HTML
HTML Ordered Lists An ordered list starts with the <ol> tag, and each list item is defined by the <li> tag. Here is an example of an ordered list:
<html> <head> <title>first page</title> </head> <body> <ol> <li>Red</li> <li>Blue</li> <li>Green</li> </ol> </body> </html>
Comments The browser does not display comments, but they help document the HTML and add descriptions, reminders, and other notes.
<html> <head> <title>first page</title> </head> <body> <p>This is a paragraph </p> <hr /> <p>This is a paragraph </p> <!-- This is a comment --> </body> </html>
The <p> Element To create a paragraph, simply type in the <p> element with its opening and closing tags:
<html> <head> <title>first page</title> </head> <body> <p>This is a paragraph. </p> <p>This is another paragraph. </p> </body> </html>
Single Line Break Use the <br /> tag to add a single line of text without starting a new paragraph:
<html> <head> <title>first page</title> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph. </p> <p>This is <br /> a line break </p> </body> </html>
HTML Elements Some elements are quite small. Since you can't put contents within a break tag, and you don't have an opening and closing break tag, it's a separate, single element. So HTML is really scripting with elements within elements.
<html> <head> <title>first page</title> </head> <body> <p>This is a paragraph</p> <p>This is a <br /> line break</p> </body> </html>
Formatting Elements In HTML, there is a list of elements that specify text style. Formatting elements were designed to display special types of text:
<html> <head> <title>first page</title> </head> <body> <p>This is regular text </p> <p><b> bold text </b></p> <p><big> big text </big></p> <p><i> italic text </i></p> <p><small> small text </small></p> <p><strong> strong text </strong></p> <p><sub> subscripted text </sub></p> <p><sup> superscripted text </sup></p> <p><ins> inserted text </ins></p> <p><del> deleted text </del></p> </body> </html>
Image Location You need to put in the image location for the src attribute that is between the quotation marks. For example, if you have a photo named "tree.jpg" in the same folder as the HTML file, your code should look like this:
<html> <head> <title>first page</title> </head> <body> <img src="tree.jpg" alt="" /> </body> </html>
Image Resizing To define the image size, use the width and height attributes. The value can be specified in pixels or as a percentage:
<html> <head> <title>first page</title> </head> <body> <img src="tree.jpg" height="150px" width="150px" alt="" /> <!-- or --> <img src="tree.jpg" height="50%" width="50%" alt="" /> </body> </html>
HTML Elements~ HTML documents are made up of HTML elements. An HTML element is written using a start tag and an end tag, and with the content in between. HTML documents consist of nested HTML elements. In the example below, the body element includes the <p> tags, the <br /> tag and the content, "This is a paragraph".
<html> <head> <title>first page</title> </head> <body> <p>This is a paragraph <br /></p> </body> </html>
HTML Unordered List An unordered list starts with the <ul> tag.
<html> <head> <title>first page</title> </head> <body> <ul> <li>Red</li> <li>Blue</li> <li>Green</li> </ul> </body> </html>
The <img> Tag The <img> tag is used to insert an image. It contains only attributes, and does not have a closing tag. The image's URL (address) can be defined using the src attribute. The HTML image syntax looks like this:
<img src="image.jpg" />
Image Border By default, an image has no borders. Use the border attribute within the image tag to create a border around the image.
<img src="tree.jpg" height="150px" width="150px" border="1px" alt="" />
Attributes You may be wondering what happens if you try to apply contradictory attributes within the same element.
<p align="center"> This is a text. <hr width="50%" align="left" /> </p>
HTML Attributes Attributes provide additional information about an element or a tag, while also modifying them. Most attributes have a value; the value modifies the attribute.
<p align="center"> This text is aligned to center </p>
HTML stands for HyperText Markup Language. Unlike a scripting or programming language that uses scripts to perform functions, a markup language uses tags to identify content. Here is an example of an HTML tag:
<p> I'm a paragraph </p>
The align To change your table's position, use the align attribute inside your table tag:
<table align="center">
The Border and Colspan Attributes A border can be added using the border attribute:
<table border="2">
bgcolor Attributes Now let's specify a background color of red for a table row. To do that, just use the bgcolor attribute.
<table border="2"> <tr> <td bgcolor="red">Red</td> <td>Blue</td> <td>Green</td> </tr> <tr> <td>Yellow</td> <td colspan="2">Orange</td> </tr> </table>
A table cell can span two or more columns:
<table border="2"> <tr> <td>Red</td> <td>Blue</td> <td>Green</td> </tr> <tr> <td><br /></td> <td colspan="2"><br /></td> </tr> </table>
Colspan Color The example below demonstrates the colspan attribute in action:
<table border="2"> <tr> <td>Red</td> <td>Blue</td> <td>Green</td> </tr> <tr> <td>Yellow</td> <td colspan="2">Orange</td> </tr> </table>
Creating a Table Tables are defined by using the <table> tag. Tables are divided into table rows with the <tr> tag. Table rows are divided into table columns (table data) with the <td> tag. Here is an example of a table with one row and three columns:
<table> <tr> <td></td> <td></td> <td></td> </tr> </table>
The <a> Tag Links are also an integral part of every web page. You can add links to text or images that will enable the user to click on them in order to be directed to another file or webpage. In HTML, links are defined using the <a> tag. Use the href attribute to define the link's destination address:
<a href=""></a>
The target Attribute The target attribute specifies where to open the linked document. Giving a _blank value to your attribute will have the link open in a new window or new tab:
<a href="http://www.sololearn.com" target="_blank"> Learn Playing </a>
Creating Your First Link In the example below, a link to SoloLearn's website is defined:
<a href="http://www.sololearn.com"> Learn Playing </a>
Attribute Measurements As an example, we can modify the horizontal line so it has a width of 50 pixels. This can be done by using the width attribute:
<hr width="50px" /> -or- <hr width="50%" />
The Align Attribute The align attribute is used to specify how the text is aligned. In the example below, we have a paragraph that is aligned to the center, and a line that is aligned to the right.
<html> <head> <title>Attributes</title> </head> <body> <p align="center">This is a text <br /> <hr width="10%" align="right" /> This is also a text. </p> </body> </html>
HTML Headings HTML includes six levels of headings, which are ranked according to importance. These are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. The following code defines all of the headings:
<html> <head> <title>first page</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>
Horizontal Lines To create a horizontal line, use the <hr /> tag
<html> <head> <title>first page</title> </head> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <p>This is a paragraph </p> <hr /> <p>This is a paragraph </p> </body> </html>
The Web Structure The ability to code using HTML is essential for any web professional. Acquiring this skill should be the starting point for anyone who is learning how to create content for the web.
Modern Web Design HTML: Structure CSS: Presentation JavaScript: Behavior PHP or similar: Backend CMS: Content Management
