Headings:

There are 6 levels of headings. The level of a heading corresponds to its importance:

This is the first level

This is the second level

This is the third level

This is the fourth level

This is the fifth level
This is the sixth and last level

Heading tags should only be used to create actual headings. There are other ways to make text bigger or bolder in paragraphs.

Paragraphs:

This is a paragraph. Whenever you create a start tag, remember to close it as well by rewriting that tag with a '/' character. This second tag is called an end tag. With few exceptions, tags will always come in pairs. These exceptions are called Empty Elements because they include no content, and they include the <br> tag, which creates an empty line or line break. They do not need to be closed, but they can be in order to withstand stricter validation by writing them like this: <br/>.

Pre-formatted Text:

The format of a paragraph in HTML cannot be modified by adding either extra spaces or skipped lines without adding line breaks (<br>) to the text. To add pre-formatted text to the webpage, the <pre> element must be used. This element will retain the format of the text added, and will display in a fixed-width font (with each character taking up the same amount of horizontal space) like Courier. Below is an E.E. Cummings poem that would lose its unique format if not bracketed by <pre> tags: 

  
            The Sky Was 
            E.E. Cummings
            
            the
                 sky
                       was
            can    dy    lu
            minous
                        edible
            spry
                    pinks shy
            lemons
            greens    coo    1 choc
            olate
            s.

              un    der,
              a    lo
            co
            mo
                  tive        s  pout
                                           ing
                                                 vi
                                                 o
                                                 lets

Another empty elment is the <hr> tag. This tag creates a horizontal line across the page, like so:

Here is a link to W3 School's HTML tag reference.


Notes about HTML:

CITATION: All of the information in this document comes from the Tutorial at www.w3schools.com. Some information is quoted directly, but these quoted sections are individually noted.

HTML is the acronym for Hyper Text Markup Language. HTML documents are broken up into content described by HTML tags, for example: paragraphs and headings. You can add comments to your HTML documents that won't be translated into text on a webpage by inserting comments between the following symbol series (without spaces):
< ! - - and - - >.



A <br> tag is a line break - adding one to your code will create an empty line in your webpage. Above, there are two line breaks.

Lists and Tags:

NOTE: The following list is copied and pasted from W3 School's source code:

There are different kinds of lists in HTML. One of these is an unordered, or bulleted list. Another type is the ordered, or numbered, list. Unordered lists are started and ended with <ul> tags, whereas ordered lists are started and ended with <ol> tags. Each item in a list is denoted with list item tags, <li>.

The <title> tag contains meta data, or information about the HTML page that will not be displayed. This information can include the page <title> element; the <meta> element (which can define the character set - here as UTF-8); and either the <style> or <link> elements which correspond to internal or external CSS style sheets, respectively.

All HTML documents contain nested elements.

The tags above each describe different amounts of content:

  1. The <html> tag describes the whole document
  2. The <body> tag describes the document body
  3. Note: This is an ordered list

Note: When writing HTML, to include the < or > signs, instead of typing the sign itself you write out & l t ; (without spaces) or & g t ;. This is useful when you are writing out a tag (as seen above in the code copied from W3 Schools.

Creating a HTML document.

Save your HTML file with an .html or .htm file name. This document is called W3_HTML_Tutorial.html. The preferred encoding for HTML files is UTF-8. W3 Schools described UTF-8 as:

"A character in UTF8 can be from 1 to 4 bytes long. UTF-8 can represent any character in the Unicode standard. UTF-8 is backwards compatible with ASCII. UTF-8 is the preferred encoding for e-mail and web pages."

The element shown above is a HTML blockquote which uses a <blockquote> tag (more information below).

HTML Links are created using an <a> tag. They look like this: < a href = "http://www.w3schools.com"> This is a link for W3 Schools </a>. The href attribute of the link designates its destinatin, and the link text is what will be visible to a website visitor.

Here is the same link, working this time, in a paragraph tag. This is a link for W3 Schools. The destination of the link is it's href atrribute.

The link text does not necessarily need to be text - it can be any HTML element, although images are a popular choice in lieu of text (copied from W3 Schools, a sample image link):

HTML tutorial

Local links, or links to pages on the same website, do not need to include the 'http://www...' portion of the URL.

The color and style of a link can be modified using style attributes like: color, background-color, and text-decoration. The style attributes can vary for a link based on its current status, or, whether it is un-visited, visited, active, or being hovered over. Copied from W3 Schools, the internal styling (see below) for a link may look like this: 

            <style>
            a:link    {color:green; background-color:transparent; text-decoration:none}

            a:visited {color:pink; background-color:transparent; text-decoration:none}

            a:hover   {color:red; background-color:transparent; text-decoration:underline}

            a:active  {color:yellow; background-color:transparent; text-decoration:underline}
            </style>

Attributes:

An attribute is a piece of additional information about an element and are specified in the start tag (as seen above with the href attribute). They come in name/value pairs identifiable by an = sign between the two. The value of the attribute will be enclosed in quotation marks. One important type of attribute is the lang attribute. This attribute is included in the <html> tag, and it specifies first the language, then the dialect. This document is declared to be English(United States) using an attribute value of "en-us". Here is a list of language codes that can be applied to HTML documents. Declaring the lang attribute is important because search engines and screen readers will use that information.
Note: Always use lowercase attributes (ex: <title> vs. <Title>), and always enclose the attribute value in quotation marks.

Here is a link to W3 School's Attribute Reference table.

Images in HTML documents:

Images can be added to HTML pages in a similar way to links; they are defined with an <img> tag. The attributes of this tag are the source file (src), the alternative text (alt) that will appear if the image cannot be displayed or the webpage is processed with a screenreader, and the size (width and height).

Images should be stored in the same folder as the HTML document, although they can be within a subfolder in that folder. If this is the case, then the folder name should be included in the 'src' image attribute. For example:

<img src = "/images/sampleimage.jpg" alt="This is not an image" style = "width:250;height:150;">

Images can also be accessed from any web address if that web address is set as the value of the 'src' attribute.

IMG tags look like this: <img src = "http://healthstones.com/dinosaurdata/s/stegosaurus/stegosaurus.jpg" alt = "A picture of a stegosaurus" width = "500" height = "267">.

Here is the same image, this time using <img> tags:

A picture of a stegosaurus

Tyrannosaurus Rex An image can be set to "float" to the left or right of text on a page (so that the text wraps loosely around the contour of the image) but adding a float property to the style attribute and including the image and text in paragraph tags. This is the case in this paragraph.

The <img> tag for this image and text combination looks like this: 



            <img src="http://thetechjournal.com/wp
            content/uploads/2011/10/1317572461-talking-rex-the
            dinosaur-fun-app-for-iphone-1.png" alt =
            "Tyrannosaurus Rex" style = "float:left
            width:100px;height:100px;padding
            right:50px">

HTML Quotation and Citation Elements:

These elements may be useful when writing and posting blog posts or essay content if your work includes any quotations or direct references to the current text.

There are two types of quotations in HTML: Short Quotations and Long/Block Quotations. The following two quotations are both given a style attribute: cite that sets the webpage source of the quotations as the source.

Other HTML Elements:

Other useful elements include abbreviations, addresses, and citations.

HTML Styles:

The style of any HTML element can be set using style attributes that are formatted:

style: "property:value;"

The property and the value of the style are CSS properties and values. The style properties that can be set and modified include background-color, text color, font-family, font-size, and text alignment. Some sample paragraph styles (both code and appearance) are:

<p style = "color:red; font-family:verdana; font-size:300%; text-align:right"> This is a stylized paragraph. </p>

This is a stylized paragraph.

<p style = "color:green; font-family:courier; font-size:50%; text-align:center"> This is a stylized paragraph. </p>

This is a stylized paragraph.

HTML Formatting Elements:

Just as style attributes can give HTML elements a particular look, formatting elements can be used to give sections of text particular meaning or emphasis. These formatting elements include:

HTML Colors:

Colors can be described in three ways: by CSS name (ex: Red, Orange, Yellow, Cyan, Blue, etc.), by RGB notation (where RGB is (Red, Green, Blue) and each value represents the intensity of that parameter on a scale of 0 to 255), and by hexadecimal color values in the form of #RRGGBB (where RR is the red value, GG is the green value, and BB is hte blue value). In hexadecimal notation, 00 is the lowest value, and FF the highest.

Click Here for a list of 140 colors supported by all web browsers sorted by name, or here for those 140 colors sorted by hex value.

Another great resource for choosing colors is W3 school's Color Picker, which allows website visitors to explore different colors, as well as how those colors look with text on top of them and how variations in light/darkness, hue, saturation, and lightness will affect the colors. For every possibility presented, the color picker provides both the RGB and hex values.

These color values can be used as style attribute values to adjust either the color of text or the background color of the webpage.

More on Style: A Crash Course in Applying CSS to HTML

What is CSS?

CSS stands for Cascading Style Sheets. Style can be added to HTML in one of three ways (this unordered list is taken directly from W3 School's source code):

Inline styling is the method of Styling described above in 'HTML Styles' that designates a unique style to one HTML element. As described above, inline styling follows the format -- style: "property:value;". When multiple style attributes are being defined, all are enclosed by the same quotation marks and separated by semi-colons.

Internal styling is used to set a style for one HTML page, and is defined in the <head> section of the code in a single <style> element. A simple, sample HTML page style written in this way may look like this: 

            <head>

                <style>

                    body {background-color:black;}

                    h1 {color:red; font-family:verdana;}

                    h2 {color:white; font-family:verdana;}

                    h3 {color:white; font-family:verdana;}

                    h4 {color:white; font-family:verdana;}

                    h5 {color:white; font-family:verdana;}

                    h6 {color:white; font-family:verdana;}

                    p {color:white; font-family:courier; font-size:150%;}

                </style>

            </head>

This internal styling is commented out in the <head> section of this .html document. Try uncommenting and reloading the page to see how it changes. Experiment by substituting different colors, font-families, or font-sizes.

External styling is used to define the styles of many HTML pages. These style sheets contain all of the style information for multiple pages of a website. To use an external style sheet, the following line of code is added to the <head> section of the webpage (assume, for the moment, that a .css file with CSS style information exists on your computer under the name SampleStyleSheet.css):

<head>
<link> rel = "stylesheet" href = "SampleStyleSheet.css"> </head>

The rel attribute identifies the relationship between the HTML document and the CSS document being linked to it - in this case, a stylesheet. CSS style sheets should be written in a text editor program, and should not contain any HTML tags. A style sheet may look like this (copied from W3 Schools): 

            body {
                background-color: lightgrey;
                }

            h1 {
                color: blue;
                }

            p {
                color:green;
                }

In addition to color, font-family, and font-size, the CSS border, padding, and margin can also be modified. Every element on an HTML page exists in a box, whether not you can see that box, and the three properties listed above each affect how the box is situated on the page. The border property affects the visibility and density of the box's border, the padding property defines a space inside of the border between its edges and the text, and the margin property defines space outside of the border.

Applying the following inline styling to a paragraph:

<p>style = "border: 5px solid black; padding: 10px; margin: 100px; text-align:center; background-color:black; color:white; font-family:courier; font-size: 90%;"</p>

“[...]the only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars and in the middle you see the blue centerlight pop and everybody goes “Awww!”

― Jack Kerouac, On the Road

The id attribute and the class attribute can be used to apply CSS styles to HTML objects. By giving one particular element an id attribute, you can then define a style for that particular element using its id. Similarly, by creating a class of elements denoted by the class's name, you can define a style that will be applied to all elements of that class. The following code (copied from W3 Schools) demonstrates how these two attributes are applied:

            The id attribute: 

                <p id="p01">I am different</p>

                The style for that element, by id:

                #p01 {
                    color: blue;
                    }

            The class attribute: 

                <p class="error">I am different</p>

                The style for that class, by class name:

                p.error {
                    color: red;
                    }

Bookmark Navigation:

Bookmarks allow website visitors to quickly navigate through a page by topic. This is espeically practical when a website, such as this one, has long pages and specific topic division.

To make a bookmark, you first create a bookmark id, then add a link to it. At the top of this webpage, there is a list of links underneath and 'Index' heading that are associated with the different HTML topics covered. An example:

 
            The bookmark for this section, Bookmark Navigation, is: 

                <h2 id="bookmarks"> Bookmark Navigation: <h2>

            The link for this bookmark at the top of the page is: 

                <a href="#bookmarks">Using Bookmarks in HTML</a>

HTML Tables:

In HTML, tables are defined with a <table> tag and are divided into table rows with <tr> tags. Table rows are divided into table data with <td> tags. Table rows are divided into table headings with <th> tags.

If borders are not specified in a border attribute, then no borders are included. Borders can also be added using the CSS border property. Tables also have a style attribute that sets the table's width, as a percentage.

A caption, or title, can be added above the table using a <caption> tag. This tag should be added below the <table> tag.

Using CSS, the background-color, border, border-collapse, padding properties, and text-align can be specified. Border referes to the lines drawn to define each box in the table, border-collpase will collpase the boxes drawn around each table element into single lines, padding adds extra space around each element in the table, and text-align changes the positioning of the text in the table.

A sample table with CSS formatting is formed from this internal styling and this <table> tag:

            Internal Styling:

                table, th, td {
                    border: 5px solid black;
                    border-collapse: collapse;
                        }

                th, td {
                    padding: 20px;
                    text-align:center;
                    }

                th {
                    background-color: red;
                    }

                td{
                    background-color: pink;
                    }

            Table:

            <table style="width:120%">
                <caption>American Authors</caption>
                <tr>
                    <th>Book</th>
                    <th>Author</th> 
                </tr>
                <tr>
                    <td>Catcher in the Rye</td>
                    <td>J. D. Salinger</td>
                </tr>
                <tr>
                    <td>The Great Gatsby</td>
                    <td>F. Scott Fitzgerald</td> 
                </tr>
            </table>

The corresponding table looks like this:

American Authors
Book Author
Catcher in the Rye J.D. Salinger
The Great Gatsby F. Scott Fitzgerald

Webpage Layout and Formatting

A webpage can be broken up into different containers of HTML elements by creating <div> elements. Because <div> elements can have style and class attributes, each block of content can be stylized seperately on the page. <div> elements can be given style properties like background-color, text color, and padding.

If the formatting of multiple <div> elements on a webpage are the same, then that styling can be done by creating a class of <div> elements and denoting the internal styling in the <head> section of the code.

HTML Layout With <div> Elements:

<div> elements can be combined to create multi-section layouts with columns, headers, footers, sidebars, and banners. The image below illustrates the following possible layout components of a webpage (unordered list copied from W3 School's source code and modified):

Website Layout Using HTML5 - image from W3 Images

The <div> elements can be differentiated by assigning an id to each.

Each block of content can be stylized in the <head> section using internal CSS styling. Properties including background-color, text color, text-alignment, padding, line-height (which controls the spacing between lines), float (left or right), and clear. Clear refers to whether or not floating elements are allowed on the left and right sides of content blocks; a property:value pair of clear:both indicates that no floating blocks can flank the content box being stylized.

Copied from W3 Schools, here is a sample of CSS internal styling for <div> elements: 

            header {
                background-color:black;
                color:white;
                text-align:center;
                padding:5px; 
                }

            nav {
                line-height:30px;
                background-color:#eeeeee;
                height:300px;
                width:100px;
                float:left;
                padding:5px; 
                }

            section {
                width:350px;
                float:left;
                padding:10px; 
                }

            footer {
                background-color:black;
                color:white;
                clear:both;
                text-align:center;
                padding:5px; 
                }

Validating your HTML Document

Don't forget to validate your HTML document. It's important to check your code for errors.



Back to Top

Return to the homepage.