HTML

Lectures > HTML

HTML

foundation of web page

HTML

Hypertext Markup Language
- Predominant markup language for web pages.
- Continually updated
- Can include or load:
  - Scripts, such as JavaScript, which affect browser behavior (such as rollovers)
  - Cascading Style Sheets to define appearance and layout of text and other material
    - W3C encourages use of CSS over presentational markup.
      - Reduces cost of serving wide range of platforms.
      - Stylesheets are used across pages
HTML gives a set of predefined styles to indicate how text and other elements of a web page should be structured. .
- Presentational attributes include
  - headings and paragraphs,
  - some limited formatting tools, and
  - a set of web-specific elements.
- The browser uses this information to format the page, depending on the browser’s capabilities.
HTML documents are created using plain ASCII text files
- Can be read & written with simple text editors.
  - MS Note Pad
  - Must be saved as "text only" (no formatting) with .htm or .html extension.
- Reduces letters and characters to numbers.
Most web-authoring software uses HTML 4.0 or XHTML 1.0
- Recommended by the W3 Consortium.
- Standard still HTML 4.01
HTML 5 published as working draft
- Dreamweaver CS5 incorporates an HTML 5 extension pack
- Apples supports HTML 5 for video; backed by Microsoft for IE9

HTML tags

HTML documents use tags < >, or codes,
- To define the various document styles or elements, formatting options, hyperlinks, and graphical images to be displayed.
- Created by enclosing the instructions in the lesser-than < and greater-than > symbols.
- Tags typically do not print on browsers,
  - unless the editor types in special instructions or tags.
  - To see the tags: View: View Source in Safari and View: Source in Explorer; Page > View Source in IE8.

Using HTML tags

The tags enclose the text to be formatted and displayed because
- The first one < > turns the feature on, and the last one </ > turns the feature off.
  - The tag that turns off the feature repeats the instruction after a forward slash like this /.
- <tagname>Text</tagname>
HTML 4 tags are not case-sensitive
- It formerly was standard practice to use ALL CAPS so tags were easy to locate on source page/file.
- CS3 recommends using caps for elements and lower case for attributes.

Structure of HTML Documents

Some tags structure HTML documents

They separate the major components into individual blocks of information.
They are:
- <html>
  - Document starts with <html> and ends with </html>.
- <head> information not for display </head>
- <body> Text goes here and
  may continue for quite some length...
  </body>
- </html>
The head tag is placed immediately after the html tag.

It contains information not to be displayed on the web page itself.
- It is used to title the page and give meta tags for search engines.
- Comment tag for notes, such as author and creation date.
  - <! -- This is a comment -->
- Title tags put a title in the browser's top bar.

<html>
<head>
<title>Creating Lists</title>
</head>
<body.>....

Body tags:
- The area for information you want displayed as part of your web page
  - Bounded by the <body> ... </body> tags.

Here you include
- the text of your web page,
- any hyperlinks and graphics,
- all the formatting elements.

Unordered Lists

First tier
- Second tier (nested)
  - Third tier (nested)

<html>
<head>
<title>Creating Lists</title>
</head>

<h2>Unordered Lists</h2>

<ul>
<li>First tier
<ul><li>Second tier (nested)
<ul><li>Third tier (nested)
</ul> </ul> </ul>

</body>
</html>

HTML styles

The most basic style available is plain text.
- Considered the default style,
  - No need to define plain text.
  - Any text not included in a formatting tag is displayed using the browser’s default text style
Text enclosed in formatting tags is displayed according to the instructions contained in the tags.
- <b>This would be displayed in bold.</b>

HTML tag attributes

Tags may have attributes associated with them.
- Tag attributes supply the browser with additional information about how a tag should be represented or treated.
- All the attributes associated with a specific tag must be included within the tags: before the end >, or greater-than symbol, of the first tag.
  - Example: <h1 align="center">Text</h1>
    - Note that attributes are enclosed in quotation marks.
- Alignment attributes tell the browser to center, left justify, or right justify the text associated with the heading tag.
  - Default (needing no tags) is left justify (flush left)
    - Example: <h1 align="center">Text</h1>

Headings

Six heading tags:
- h1, the largest, through h6, the smallest.
- h5 and h6 usually smaller that plain text.
- h1 through h4 produces bold text larger than the standard text.
  - Beginners use heads too often or heads that are too large.
Blank line follows a heading
- Equal in height to the heading.

Paragraph Formatting

Browsers do not read carriage returns, tabs, or extra (more than one) space.
When you want text to start on a new line, you must use paragraph formatting tags.
- <br> the line break tag at end of line
- <p> the paragraph (2 line breaks) tag
<br>
- <br> is one of the few tags in HTML that don’t have a corresponding end tag.
  - Tags like these are called single-sided tags.
- The text immediately following <br> is moved to the start of a new line.
- No paragraph indent.
- Two br’s -- <br> <br> -- will double-space.
<p>
- Separates blocks of text into paragraphs.
  - Visually same result as two <br> tags side by side
  - No paragraph indents.
- Originally a single-sided tag, used to indicate the end of a paragraph.
- The text following the paragraph tag is moved to the start of a new line and separated from the preceding text by an additional line (double space).
- The p tag has become a double-sided tag,
  - Most browsers still support the single-sided version.
  - XHTML requires a closing tag.
  - Using double-side tags allows the inclusion of attributes within the tags.
    - The align="left" as the default text format does not have to be included now, but may in the future
      - Especially with addition of other paragraph attributes, such as full justification and paragraph style sheets.
Dreamweaver will write the appropriate tags with shift + carriage return for <br> and carriage return for <p>.

Character formatting

Two main types of character style tags:

physical style tags

tell the browser how the text should be formatted.

logical style tags.

tell browser what the text is used for and lets the browser determine the text’s physical appearance.

Can use more than one.

Turn off each in reverse order you turned them on.

<b><i><tt>bold, italic and typewriter</tt></i></b>

The Physical Style Tags include:

<big> Big text: Uses larger than standard text

<b> Bold

<i> Italic

<small> Small: Smaller than standard text.

<sub> Subscript: _{Text is below baseline.}

<sup> Superscript:^{Text is above baseline.}

<tt> Typewriter: Monospaced typewriter font.

Logical Style Tags include:
- <em> Emphasis: For italic emphasis
- <strong> Strong: For bold text.

Your web pages

Create a folder for web work

One for web exercises

Save your lab exercises here as you will use them more than once.

One for the final web project.

Organize the folder

Folder name as it will appear as the directory on the web.

Use the name you want to appear in the URL

Web project

Source Art

Source Documents

client

Images

Any other sub folders

html documents, including home page titled index.htm

Create a web page

In Windows,

Open Microsoft Note Pad (Programs: Accessories) and write the text below, saving it as a Text Only document with an .htm extension in the title (yourname.htm).

In Macs,

Save this text as Text Only with an .htm extension in the title (yourname.htm).

This webpage is saved as HTML.html.

index.htm or index.html is the default home page (no need to write it in URL)

Use all lower-case letters

Keep file names short (no more than 15 characters)

When you create an HTML document, test it with your browser.

Start browser and use Open file under the File menu and Browse for file.

Then use Reload on Netscape and Safari, Refresh on Explorer to update as you go.

Icon for reloading usually in browser’s top bar

Dreamweaver allows Preview in Browser

Web Page Exercise in HTML

Type this and save it in your exeercises folder: (And then compare your results with this. Use your browser's back button to return to this page.)

<html>
<head> 
<title> Resume for Your Name</title>
</head>

<body bgcolor="#FFFFFF">
<h2 align="center">Your Name</h2>
<p>The rest of the document goes here. Notice that you have changed the background color from default gray to white. See the back of your Non-Designer's Web Design book for codes for browser-safe colors.</p>
<p>Paragraph codes create a double space between paragraphs</p>

But maybe you don't want a double space.<br>
Then use the break code at the end of a line when you want the text to start on the next line

<p>You can <b>bold</b> and <i>italicize</i> words and much more.</p>

<p>Congratulations! You have created (your first?) web page.</p>

</body>
</html>

For more help, check out Teach Yourself HTML Visually by maranGraphics, Foster City, CA: IDG Books Worldwide (1999).

Back to top

Back to schedule