Introduction to HTML
Hyper Text Markup Language
A handful of useful tags to know:
- The <title>Jo's Cooking Blog</title> tag
- defines a title in the browser toolbar
- provides a title for the page when it is added to favorites
- displays a title for the page in search-engine results
- The <p>paragraph</p> tag:
My 1st paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
My 2nd paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
My 3rd paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
My n paragraph etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
- With this tag alone, you could write your novel! Though, there would be no Chapter or Section delineations.
- The Six HEADER tags <h1> to <h6>:
<h1>header 1</h1>
<h2>header 2</h2>
<h3>header 3</h3>
<h4>header 4</h4>
<h5>header 5</h5>
<h6>header 6</h6>
The h1 tag would be good to use for your novel's title, while the h2 tag would be could for each of your novel's chapters. The other tags could be used for sections within chapters and other components requiring a header.
- The <ol> Ordered List tag:
- automatically numbers its <li> List Items
<h3>My Shopping List</h3> <ol> <li> List Item #1 milk</li> <li> List Item #2 coffee</li> <li> List Item #3 sugar</li> <li> List Item #4 tea</li> <li> List Item #5 eggs</li> </ol>
- Will render like this:
My Shopping List
- List Item #1 milk
- List Item #2 coffee
- List Item #3 sugar
- List Item #4 tea
- List Item #5 eggs
- The <ul> Un ordered List tag:
- automatically places bullets on its <li> List Items
<h3>My Shopping List</h3> <ul> <li> List Item #1 milk</li> <li> List Item #2 coffee</li> <li> List Item #3 sugar</li> <li> List Item #4 tea</li> <li> List Item #5 eggs</li> </ul>
- Will render like this:
My Shopping List
- List Item #1 milk
- List Item #2 coffee
- List Item #3 sugar
- List Item #4 tea
- List Item #5 eggs
The <a> Anchor Tag
The <a> tag defines a hyperlink, which is used to link from one page to another.
This is the tag that gives the internet its immense power! It allows automatic and easy linking to pertinent information an online article may reference. The links are not restricted to just articles.
The Drudge Report is a now famous news site that is simply a page of hyperlinks to different news articles:

Components of the anchor tag:

- HREF:
What does href stand for?
- URL:
The Drudge Report's URL:
http://www.drudgereport.com/
- Link Description:
Most often is simply descriptive text. Can be the URL or can be an image.
HTML <img> Tag
Components of the img tag:



NOTE: The img tag does not have a closing tag. Everything is contained in the opening tag.
The src is the path to the image and the name of the image file including the file extension.
Most often the page displaying the image also hosts the image on its own server. Images can be hot-linked from another sites server by acquiring the image's address usually by right clicking on the desired image. This practice uses the other server's bandwidth and is considered impolite. So, it is best to host the images you want to display yourself. However, it is important to make sure you have the rights to display the image in question.
An example of a hot-linked image that also links to the site it came from:


The w3schools HTML Tutorial
w3schools is an outstanding free website for learning more about HTML. When I search google for a coding answer and w3schools turns up in the search, they are my first choice to check for a solution.
With what you have learned in this lesson you can do a whole lot of practical things with just HTML. You should spend some time learning HTML first since it is the foundation that webpages are built upon!