Introduction to HTML

Contents

Program Synopsis

This tutorial provides an introduction to HTML and CSS and describes some of the most common elements in building a web site. It also provides links to additional tutorials, reference materials and available code/programming editors.

HTML: Hyper Text Markup Language

HTML is a mark-up “publishing” language, (not a programming language like C or Java), that uses elements (tags) to tell the web browser how to display the content of your web page. HTML files are saved with the .html extension.

This section describes some of the most common tags. W3Schools provides a full list at http://www.w3schools.com/tags/default.asp.

Elements:

Elements are commonly known as “tags” and are used for site structure, text and image formatting, and page layout (positioning). Most include opening and closing tags, (with a few exceptions). They must also be nested properly - first to open, last to close: <tag1><tag2></tag2></tag1>.

Attributes:

Elements may also use attributes to provide additional information to define position or format or to trigger actions (like a mouse-over). The most common attributes are style (often used to format text), title (the text displayed when the mouse hovers over the element), class and id (both associated with style sheets). Attributes are located inside the open tag and include the name of the attribute and a value: <element attribute=”value”>.

Document Structure Elements

Html

The root element that defines an HTML document.

Head

Head contains metadata information (title, keywords, description, etc.) used by search engines. It may also contain links to additional scripts and style sheets used by the web page or in the site. The <title> tag is important to use as it provides the title that is displayed across the top of the browser window.

Body

This contains the content to be displayed on screen.

<html>
   <head>
     <title>Title of Website</title>
   </head>
   <body>
      <p>Lots of great information...</p>
   </body>
</html>

Body Elements (what is viewable on the screen)

Block Elements

Block-level elements can be thought of as containers. Styles applied to these elements will be applied to everything inside the element. Div elements can contain anything, paragraphs, lists, images, etc., and are most often used to block out the structure of a page. With the exception of div, you cannot place block-level elements within each other. For example, you can place anchors (links) and images within block-level elements, but you cannot place a paragraph inside a heading or a list inside a paragraph.


Divisions (div)

Creates containing blocks that may be nested.

Headers (h1-h6)

h1 through h6 are recognized by all browsers. They cannot be nested.

Paragraph (p)

Adds space around the top and bottom of paragraphs. They cannot be nested.

Lists (ul or ol)

Lists require tags to open/close the entire list (ul or ol) and also tags for each line (li). Ordered lists (ol) are numerical or alphabetical and unordered lists (ul) are bulleted. Lists may be nested.

A nested list:

<ol>
   <li>Line A</li>
   <li>Line B</li>
      <ul>
         <li>bullet 1</li>
         <li>bullet 2</li>
         <li>bullet 3</li>
      </ul>
   <li>Line C</li>
</ol>

Inline Elements

Inline elements are as the name implies. They work "in line" with text, and generally only contain text, images or other inline elements. When rendered, they do not begin a new line.

Special Characters

There are many symbols and special characters or characters that do not display properly in all browsers and require special coding. Following are common special characters. The code replaces the character.

A list of default characters available in most browsers can be found here: http://www.w3schools.com/tags/ref_entities.asp.

Character Formatting

Text may be formatted with tags that are placed inside block tags listed above. They are written in the same way as other tags and also must open, close, and nest properly.

The most common are bold (b), italic (i), emphasized (em), strong (strong), big (big), small (small), superscript (sup) and subscript (sub).

Anchor (a)

Creates a link to another document (using the href attribute) or a bookmark inside a document (using the name attribute). The title attribute provides descriptive information and will display as a mouse-over (pop-up).

Images (img)

<img src=”URI” alt=”…” /> inserts an image and title This is an "empty" element, meaning the it closes itself: />. Src is the URL of the image. Alt is alternative text displayed if the image is not available. Title displays mouse-over text. It is also a good idea to include image dimensions (in pixels) so that your image sizes properly.

SPECIAL CHARACTER / CODE / DESCRIPTION
<  < (less than)
>  > (greater than)
&  & (ampersand)
"  " (quote marks)
'  &apos; (apostrophe)
     (non-breaking space)


CHARACTER FORMATTING
<p>This word is <b>bold</b>.</p>


ANCHOR / URL
<p><a href="http://www.ischool.utexas.edu" 
         alt="link to iSchool" 
         title="iSchool at UT Austin">
         Link to the iSchool</a></p>

ANCHOR / BOOKMARK
Identifying the bookmark:
<h2><a name="ch2"></a>Chapter 2</h2>

Link to bookmark:
<p>See <a href="#ch2">Chapter 2</a>.</p>


IMAGE
<p><img href="http://www.myimage.com/myimage.jpg" 
         alt="Text if the image cannot load." 
         title="Text that displays as a mouse-over." 
         width="100px" height="100px"/></p>

Comments

In your HTML document, you can “comment out” text that will not be displayed by the browser. Comments include notes and instructions to yourself, or sections of code that you do not want displayed in a browser, but also do not want to delete. See a comment in the example below.

<!-- this is a comment  -->

Comments are GREAT! Comments not only provide documentation for you and those who wish to view your source code, but in the case that you are modifying a CSS template, it allows you to remove the elements that you don't want while keeping the option of adding them back in later. Remember: It's easier to comment it out, than remember what you deleted.

Format and Position

You can provide both format and position information within tags in HTML. In the example, the div tag surrounds the content with a margin of space, 10% on each side, and h1 tag creates red text.

<div style="margin:10%;">
     <h1 style="color:red;">Title</h1>
</div>

Styles

You may create a style list in the <head> section of your HTML document, or you may use in-line styles within the <body> section.

Keep in mind the styles would need to be included on every HTML document. If both external AND internal styles or style sheets are applied to an HTML document, the internal styles have priority over the external styles.

See the Introduction to CSS for more information on Cascading Style Sheets (CSS). It is not required to use style sheets, but they do allow you to define all the styles for your Web site – controlling the appearance – in one document. Making a change in the CSS file will push the updates through to all your pages, saving time and preventing typing errors. You can also use multiple CSS files to serve different purposes: web, print, hand-held device, or different sections of your web site.

Styles within <head>

Styles declared in the <head> section of the HTML document are written exactly as they would be in a CSS document but must be contained within style tags. They may then be used within the entire document.

<head>
     <style type="thxt/css">
          h1,h2,h3{color:#00FF00;}
          .center{text-align:center;}
     </style>
</head>
<body>
     <p class="center">This paragraph is aligned to the center.</p>
</body>

Inline styles

Inline styles are placed "in line" with the HTML tag. They only apply to the tag they are contained within. The syntax is as follows: <tag style="property:value;property:value;">.

<h1 style="color:#00FF00;">This Header is styled with bright green font color.</h1>

<p style="text-align:center;">This paragraph is center-aligned.</p>

Units of Measure

The most common units of measure are percent (%), pixel (px), and em. These are all relative units and will scale most easily between different browsers, screen sizes and printers. Percent and pixel can be used for layout positioning and font. Em is always relative to the font size. Do not insert a space between the value and unit. Examples: margin = 10%, 25px, or 1.5em.

So...what's "em" stand for? Em is a unit of measure. One em is equal to the height of one unit of text in your document. In our case, since we have our text set to be displayed at 12 pixels in height, one em is 12 pixels, 2em is 24 pixels. So, when we set the line height at 2em, each line will be 24 pixels high...remember, it's relative to the height of the text which you've specified in earlier selectors. If we had set the font size to 30 pixels and we set the line height to 2em, each line would be 60 pixels high. If that's too much space, you can also use decimal points, like 1.7em, (1.7 times the height of whatever unit you are using in your document).

Color

Colors are defined using a hexadecimal (hex) notation based on RGB values from 0 (00) to 255 (FF). The hex value is preceded by pound sign (#). Some basic colors may be defined with their name – blue, black, red – but it is safest to use the hex code. It is also important to remember that neither monitors nor browsers are able to display all possible colors and do not represent colors in the same way.

A list of colors that are safe on all browsers can be found here: http://www.w3schools.com/tags/ref_colornames.asp.

http://kuler.adobe.com is also a fun site where you can use browse existing color themes or create your own. Graphics programs such as Photoshop and Illustrator are also able to display “out of gamut” warnings (showing you what colors won’t display properly), or list only web-safe colors in the color palette.

Site Architecture

Your Web Site: Folders and File Names

The “home page” file should be named “index.html.” Browsers recognize this file as the home page: when you type www.xyz.com, the browser looks for www.xyz.com/index.html. This also applies to subfolders: www.xyz.com/subfolder/ looks for www.xyz.com/subfolder/index.html.

If you are using iSchool web space, the index.html and all other web site files are placed within the “public_HTML” folder. It is common to have separate subfolders for images (often titled “images”), CSS files, and other non-web files, like pdf’s. Any other subfolders depends on how many files your site contains and how you organize them.

Site Planning

Before you begin writing code, consider the architecture of your web site. This generally refers to folder structure, graphic layout, and functionality of the site. A planned architecture will not only assist your users by creating an easy-to-navigate site, it will help you manage your files as your web site grows.

At a minimum, a skeleton structure is incredibly useful. This may be as simple as an outline or organizational chart drawn out or created in Word or PowerPoint. Programs like Omnigraffle (for Mac) and Visio (Windows) provide low-fidelity mock-ups and diagramming tools. More elaborate design tools include products like Photoshop and Illustrator, with greater color control and imaging capabilities.

Site Validation

Please validate your code! It will save you future headaches and ensure your code is read appropriately on as many browsers as possible. Validators will read your code and indicate the line of the code in error and a description of the error. Many of the markup editors have tools or add-ons that will indicate incorrect code. There are also online validators where you can provide either a URI (web address), upload a file or submit code.

While HTML and CSS are universal, not all browsers and operating systems represent the languages in the same fashion. In addition to validating, it is also a good idea to preview your web sites on different browsers (Internet Explorer, Firefox, etc.) and different platforms (Mac, Windows, etc).

Text Editors for Web Coding

You don’t need to purchase an expensive program like Dreamweaver to create web pages. You can write code in simple text programs like TextEdit on Macs and Notepad on Windows. There are also free editors available that make coding easier like color-coding your tags or indicating when your code is not valid. You may wish to try a few different programs to see which you prefer:

Using Templates and Source Code

If you find a site you like, you can view the source code for ideas. In the browser menu, go to View > Page Source or View > Source. You can also usually right-click on the web page. Look for a “view source” or “view page source” option.

Templates are abundant on the web – free or for purchase, and are also often provided in programs like Dreamweaver. On the Internet, you can search using various combinations of free, open source, HTML, web site, css, templates, etc. You are provided with a single file or set of files (HTML, CSS, image files, etc.), often with descriptions or instructions included in the code comments. In some cases, you may be requested to include the Creative Commons license or to indicate the template source (“Design by Monty Python at xyz.com”). Always site your code just like you would site references in a paper. These are just a few of the sites on the web that offer free templates:

Resources

The IT Lab has a library of books on HTML, CSS, XML, Java, Dreamweaver and so much more! Here are more sources online:

  • w3schools This site has everything – tutorials, reference materials and validators.
    • “Try it yourself” w3schools also has an area where you can play with code: one window provides editable code – the other window displays the output. Look to the links along the left side of the home page: HTML Tutorials > Learn HTML or Learn CSS > Examples > HTML or CSS Examples.
  • W3C The consortium for web standards. Code validators are located here.
  • A List Apart TONS of articles and tutorials.
  • CSS Layout Techniques
  • Usability.gov Guides for creating usable sites.