Write simple HTML
This tutorial shows you how to write simple HTML. We will not explore all of the HTML tags just the most useful.
HTML code will appear in gray <p>This is some HTML code<p>.
The examples are inside a yellow box with a red boarder.
This is an example
Headers
So lets start. First you will need headers. A header is written like this:
<h1>Some text to be a header</h1>
It looks like this:
Some text to be a header
You can have headers with number from 1 through 6; for example: <h3> or <h5>.
<h3>This is an <h3> header</h3><h5>While this is an <h5> header</h5>
This is an <h3> header
While this is an <h5> header
For more information on headers go to w3school.com HTML Headers.
<br/>, <hr/> and <img .../> Tags
Most HTML tags have a start tag and an end tag. Start tags look like <tag> and end tags look like </tag>. The end tag has a forward slash '/' before the tag name like </h3> or </h5> above.
There are a few exception tags that need only a start tag. These tags look like <tag />. The forward slash is include in the start tag after the tag name (the space is not necessary but allowed). The trailing '/' is not required in traditional HTML but is required with XHTML. You can either use it or not. For example the following line will break with or without the '/'.
<p>This is a text line<br/>with a 'br' with a trailing '/'<br>and this 'br' has no trailing slash.
If this were XHTML the 'br' without the trailing slash would be a mistake.</p>
The paragraph looks like this:
This is a text line
with a 'br' with a trailing '/'
and this 'br' has no trailing slash. If this were XHTML the 'br' without the trailing slash would be a mistake.
The following useful tags do not have an end tag:
- Break <br/>
- Seperator line <hr/>
- Image <img .../> the ... represent attriblutes which we will get into later
There are more but the above are the most important for now.
For more information on 'br', 'hr' and 'img' click the links.
Paragraphs
To indicate a paragraph you use the <p> tag like this:
<p>This is a paragraph. Paragraphs wrap around if they are longer than their containing
element.</p>
Here is how that looks:
This is a paragraph. Paragraphs wrap around if they are longer than their containing element.
Here is some HTML that illistrates what we have seen so far:
<h1>This Is A Page Title</h1>
<p>This is a paragraph on our page. This can have long lines that can break
any where but will be rendered to fit the
width of the page. Extra spaces like this will be removed as will line breaks.</p>
This HTML will render like this:
This Is A Page Title
This is a paragraph on our page. This can have long lines that can break any where but will be rendered to fit the width of the page. Extra spaces like this will be removed as will line breaks.
Notice that the line breaks and extra spaces are not rendered. To force a space you can use an entilty . Also to have a less than < or a greater than > sign you would enter < or >. For example:
<p>This paragraph has three spaces here and a less than <
and greater than > sign.
It also has some line
breaks that will be removed as well as these extra spaces .</p>
This paragraph has three spaces here and a less than < and greater than > sign. It also has some line breaks that will be removed as well as these extra spaces .
For more information on paragraphs go to w3school.com HTML Paragraphs.
Lists
Lists are nice in pages. To create lists one uses code like this:
<ul>
<li>This is a bullet list. This the first bullet</li>
<li>This is the second bullet</li>
</ul>
This list looks like this:
- This is a bullet list. This is the first bullet
- This is the second bullet
You can have numbered lists. The <ul> stands for 'unordered list'. An 'ordered list' tag is <ol>. Here is some code:
<ol>
<li>This is a bullet list. This the first bullet</li>
<li>This is the second bullet</li>
</ol>
The only change is the 'ul' tag is changed to a 'ol' tag. This code looks like this:
- This is a bullet list. This is the first bullet
- This is the second bullet
For more information on 'lists' go to w3school.com HTML Lists
Tables
Tables are also very popular in pages. There are several tags associated with tables.
- <table> the start of a table tag.
- <tr> the start of a table row.
- <th> the start of a column header.
- <td> the start of a column detail.
Each of these tags have a coresponding end tag: </table>, </tr>, </th>, and </td>. Tables are formed by having a 'table' tag and then one or more 'tr' row tags. Each 'tr' row tag can have 'th' or 'td' column tags. Here is an example table:
<table border="1">
<tr><th>Column One</th><th>Column Two</th></tr>
<tr><td>Date 1</td><td>Date 2</td></tr>
<tr><td>Date 3</td><td>Data 4</td></tr>
</table>
This table looks like this:
| Column One | Column Two |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Did you notice the 'border="1"' in the 'table' tag? That is an attribute. Most tags can take attributes. In this case the 'border' attribute makes the table render with borders as seen above. If we removed the border attribute the table would look like this:
| Column One | Column Two |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
We could also make the borders bigger by saying 'border="5"' which would produce a border of five pixles width like this:
| Column One | Column Two |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
For more information on tables go to w3school.com HTML Tables.
Images
We showed you the 'img' tag above but here are some examples. The 'img' tag needs some attributes to be useful. The 'src' attribute lets you give the address of the image file you want to display.
<img src="/images/msfree.png" />
There are several other attributes for the 'img' tag that are useful:
- 'width'
- 'height'
- 'alt'
- 'border'
The 'width' and 'height' attributes control the size of the image. The 'alt' provides a textual description of the image which is useful when a site is accessed by a brower that does not render images, for example a braill reader used by a blind visitor. The 'border' attribute is used the same way as with the 'table' tag.
<img src="/images/msfree.png" width="200" height="200" border="5" alt="MS Free" />
As you can see the image is distorted. The actual image size is 100 by 31 pixles which is rectangular. By setting the width and height to 200 pixles each we have forced the image to be square. To keep the original ratios you can specify only the width or the height then the unspecified attribute will be scaled to maintain the same ratio.
<img src="https://bartonphillips.net/images/msfree.png" width="200" border="5" alt="MS Free" />
You will notice that the image becomes 'pixalized' as the size is expanded beyond the original dimentions.
For a list of all attributes for the 'img' tag go to w3school.com img
tag.
For further information about Images go to w3school.com HTML Images.
Hyperlinks, Anchors and Links
The final tag we will discuss is the 'anchor' tag: <a ... >. This tag also needs attributes to be useful, and it takes an end tag </a>. In web terms, a hyperlink is a reference (an address) to a resource on the web. Hyperlinks can point to any resource on the web: an HTML page, an image, a sound file, a movie, etc. An anchor is a term used to define a hyperlink destination inside a document. The HTML anchor element <a>, is used to define both hyperlinks and anchors. We will use the term HTML link when the <a> element points to a resource, and the term HTML anchor when the <a> elements defines an address inside a document.
To define a link you use the relative or absolute URL (Universal Resource Locator) and the 'href' attribute.
<a href="http://www.w3schools.com/html/html_links.asp">Link to w3schools.com</a>
Using a relative URL to an image looks like this:
<a href="https://bartonphillips.net/images/msfree.png">View the MS Free Image</a>
The absolute URL in the first example links to an external page on another server. The relative URL in the second example links to an image on our server.
A page anchor lets you specify a location on a page and then return to that location using a link later in your page. Here I have placed an anchor at the top of this page it looks like this:
<a name="top-of-page></a>
You can also use the 'id' attribute as the link address like this:
<div id="top-of-page2>This is the top of the page</div>
I can put a link here to go to the top of the page like this:
<a href="#top-of-page">Go To The Top Of This Page</a>
<a href="#top-of-page2">Go To The Top Of Page DIV</a>
If you click on the above examples you will move to the top of the page.
For further information about HTML Anchors and Links go to w3school.com HTML.
Show source code of this file
For further information about HTML go to w3school.com HTML Links.