Lecture 5

Introduction to HTML:

Hypertext Markup Language


 
 

1) Introduction

2) Markup Languages

3) Editing HTML

4) Common Tags

5) Headers

6) Text Styling

7) Linking

8) Images

9) Formatting Text with <FONT>

10) Special Characters, Horizontal Rules and More Line Breaks

11) Internet and WWW Resources



1) Introduction

World Wide Web : Collection of linked Web Pages

Our Goal: Give you tools to build increasingly powerful and appealing Web pages.

HTML : Hypertext Markup Language

•Has language components:

vocabulary, grammar rules

•Not a programming language

identify the elements of a page so browser can render the page on your screen.

Today: basic tags and attributes

Key issue: Separate presentation of document from structure of the document.

2) Markup Languages

Formats text and information

Programming Language: Perform actions

http://www.colorado.edu/Publications/styleguide/symbols.html



http://webster.commnet.edu/writing/symbols.htm


3) Editing HTML

Use text editor to write source-code

Stored in .html files

Windows: Notepad, Word

Macintosh Simple Text, Word

With Word: Save as text only files with .html extension
 
 

Make homepage index.html

4) Common Tags

(a) HTML: <HTML> </HTML>

Always the first and last lines

(b) Comment <!-- Comment -->

single most helpful tag; use liberally

(c) Head <HEAD> .... </HEAD>

Information about the document

Helps search engines

includes

<TITLE> ..... </TITLE>

(d) Body

<BODY> </BODY>

the content you want displayed.

(e) Paragraph element <P> </P>


5) Headers

<H1>

<H2>

<H3>

<H4>

<H5>

<H6>

<CENTER>




6) Text Styling

 
 

(a) Aligning text

<H1 ALIGN = LEFT>

<H1 ALIGN = CENTER>

<H1 ALIGN= RIGHT>
 
 

(b) Underline, italicize, bold

<U> underline

<EM> emphasis, italic

<STRONG> strong, bold

align.txt



7) Linking

Anchor

<A HREF = http://www.middlebury.edu>

Example:

Middlebury Home Page: <A HREF = http://www.middlebury.edu> http://www.middlebury.edu</A>

link.html

8) Images



<IMG SRC = Bush.jpg HEIGHT = 68 WIDTH = 54 ALT = President George W. Bush>

images,html



9) Formatting Text with <FONT>
 
 

10) Special Characters, Horizontal Rules and More Line Breaks
 
 

11) Internet and WWW Resources

http://www.w3.org

htpp://www.w3.org/TR/REC-html40/

http://www.freewebpromotion.com/harvillo/index.htm

http://www2.utep.edu/~kross/tutorial