1. Point #1
  2. Point #2
  3. Point #3
  4. Point #4
  5. Point #5
  6. Point #6
  7. Point #7

Introduction to HTML

Hyper Text Markup Language

Point #1

HTML is the Foundational Language for building webpages!

A web page may consist of other Languages such as CSS, PHP, JavaScript, etc. which can and do add to the user experience, however you can have a complete web page with only HTML.

While not much of a webpage, this code is a complete webpage:

Point #2

HTML elements are the building blocks of HTML pages.

Knowing only these three html tags, you could write and self-publish online the world's next greatest novel of all time!

Point #3

The Technically Correct Minimal HTML Template:

These are the minimum required tags for a valid HTML document:

                    <!DOCTYPE html>
                    <html>
                    <head>
                        <title></title>
                    </head>
                    <body>

                    </body>
                    </html>

NOTE: There are only three additional tags from those introduced in Point #1 above:

  1. The "doctype" tag
  2. The "head" tag
  3. The "title" tag

The head tag contain the title tag which w3schools states is required, however in its absence most browsers will use the file name as the title.

Providing a meaningful title is useful because the title is displayed in the browser's toolbar tab for the page, thus clearly identifying what the page is.

Point #4

A handful of useful tags to know:

  1. 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
  2. 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.
  3. The Six HEADER tags <h1> to <h6>:

    1. <h1>header 1</h1>

    2. <h2>header 2</h2>

    3. <h3>header 3</h3>

    4. <h4>header 4</h4>

    5. <h5>header 5</h5>
    6. <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.

  4. 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

    1. List Item #1 milk
    2. List Item #2 coffee
    3. List Item #3 sugar
    4. List Item #4 tea
    5. List Item #5 eggs
  5. 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
Point #5

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:

  1. HREF:

    What does href stand for?

  2. URL:

    The Drudge Report's URL:

    http://www.drudgereport.com/

  3. Link Description:

    Most often is simply descriptive text. Can be the URL or can be an image.

Point #6

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:



Point #7

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!

w3schools HTML Tag Reference