Learning HTML The Basics of Web Authoring
Office of Technology West Virginia Department of Education
West Virginia Department of Education
HTML Who?
HTML - HyperText Markup Language HTML tags HTML codes Markup tags Tags
West Virginia Department of Education
HTML Tags
Tags are in an ASCII/text document Brackets < > - delineate/open tag Brackets and forward slash </ > delineate/close tag Open/Close pairs or On/Off pairs of tags Tags are not case sensitive
West Virginia Department of Education 3
Properties of HTML
HTML gives instructions to the web browser software on how to interpret the document structure (headings, lists, paragraphs, tables, etc.)
HTML does not necessarily control fonts, colors, and spacing; these can depend on the browser defaults
West Virginia Department of Education 4
Properties of HTML
What is inside the open or close bracket pair is a tag and does not show up on the web page created Usually items typed within double quotes are case sensitive Without tags text will appear as an unbroken stream of characters
West Virginia Department of Education 5
Essential HTML Tags
<html> ... </html> <head> ... </head> <title> ... </title> <body> ... </body>
West Virginia Department of Education
Example Using Essential Tags
<html> <head> <title>Office of Technology</title> </head> <body> (This will be the text, graphics, links, etc.) </body> </html>
West Virginia Department of Education 7
Essential Tags: html, head & body
The <html> and </html> pair identifies the document as an HTML document The <head> and </head> pair bracket comments, notes, descriptive information that is not displayed on the web page itself The <body> and </body> pair bracket the information that is displayed on a web page
West Virginia Department of Education 8
Essential Tags: title
<title> and </title> are used to give the page a clear, descriptive, identifying title which is also used as the Bookmark/Favorites description in the browser Title and heading are sometimes the same phrase - especially if heading is for the front page (more on headings later)
West Virginia Department of Education 9
Saving an HTML Document
Normally a text file is saved with a txt extension; example: [Link] With HTML, even though it is a text document, it must be saved with a htm or html extension; example: [Link] or [Link] The opening page of a web site (or subdirectory) is usually called [Link] (or [Link], [Link], [Link]); the name is determined by the hosting web server
West Virginia Department of Education 10
West Virginia Department of Education
11
Title in Netscape
West Virginia Department of Education
12
Do HTML Exercise One Essential Tags
<html> and </html> <head> and </head> <title> and </title> <body> and </body>
West Virginia Department of Education
13
Page Formatting - Dividers
Paragraph tags
Line break tag Horizontal rule tag Preformatted tags
<p> and </p>
<br> <hr> <pre> and </pre>
14
West Virginia Department of Education
Paragraph Tag
Place <p> either at the beginning of a new paragraph or at the end, but be consistent </p> generally not necessary in newer versions of HTML </p> may be necessary for certain attributes like align (more on attributes later) <p> leaves space - blank line
West Virginia Department of Education
15
<p> at Beginning or at End of Text
<p>The paragraph tag gives the browser instructions to display the text in a paragraph with a blank line separating it from other text or graphics. The paragraph tag gives the browser instructions to display the text in a paragraph with a blank line separating it from other text or graphics.<p>
West Virginia Department of Education 16
<p> and </p> Examples
<p align=center>This paragraph would be centered on the page.</p>
<p>The paragraph tag gives the browser instructions to display the text in a paragraph with a blank line separating it from other text or graphics.</p>
West Virginia Department of Education 17
Screen Capture - Example of <p>
West Virginia Department of Education
18
Line Break Tag
<br> goes to the next line
<br> does not leave a blank line Good for addresses
West Virginia Department of Education
19
Line Break Example
Phyllis Justice<br> WV Department of Education<br> 1900 Kanawha Blvd. East<br> Charleston, WV 25305<p>
West Virginia Department of Education
20
Screen Capture Example of <br>
West Virginia Department of Education
21
Horizontal Rule Tag
<hr> displays a straight line from side to side on the web page <hr> can be used as a divider between sections on a home page Do not overuse
West Virginia Department of Education 22
Screen Capture Example of <hr>
West Virginia Department of Education
23
Preformatted Tag
<pre> and </pre> displays text as formatted
Displays text spacing as-is Use only when absolutely necessary or there is no other way to display text in the correct format; ascii graphics is an example
West Virginia Department of Education 24
<pre> and </pre> Tags
West Virginia Department of Education
25
ASCII Graphics Using <pre>
West Virginia Department of Education
26
Heading - Type not font
<h#> and </h#> - where # ranges from 1 to 6 - are used for headings and subheadings on a web page <h1> is the largest type and <h6> is the smallest <h1>, <h2> and <h3> most often used <h4>, <h5> and <h6> can be too small to read with certain browser configurations
West Virginia Department of Education 27
Heading - Type not font
Automatically bold and separated from the text (spaced) Browser uses the default type size for the text if you do not specify Example: <h1>Office of Technology</h1>
West Virginia Department of Education 28
Headings <h1> to <h6> and Default
West Virginia Department of Education
29
HTML Source Code for Exercise 2
West Virginia Department of Education
30
Exercise 2 in Internet Explorer
West Virginia Department of Education
31
Do HTML Exercise Two Page Formatting
<p> </p> <br> <hr> <h#> </h#> <pre> </pre> paragraph line break horizontal rule heading preformatted
West Virginia Department of Education
32
Text/Character Formatting
Physical Style versus Logical Style Logical style is recommended over physical style, but many people prefer to use physical style Physical style can be more intuitive and easier to remember and use Physical style may give you more control over text /character formatting
West Virginia Department of Education 33
Physical Style Tags
<b> and </b> - bold <i> and </i> - italic <u> and </u> - underline <pre> and </pre> - preformatted <center> and </center> - center <blink> and </blink> - blinking text (works in Netscape but not in Internet Explorer)
West Virginia Department of Education 34
Logical Style Tags
<em> and </em> - emphasis (usually italic)
<strong> and </strong> - strong emphasis (usually bold) <blockquote> and </blockquote> - indented
West Virginia Department of Education 35
Text/Character Nested Tags
Tags can be nested Remember to start and end with the same open/close pair Example: <b><i>Bold and Italic</i></b> Bold and Italic Example: <center><h1>Office of Technology</h1></center>
West Virginia Department of Education 36
HTML Source Code for Exercise 3
West Virginia Department of Education
37
Exercise 3 in Internet Explorer
West Virginia Department of Education
38
Do HTML Exercise Three Character Tags
<b> </b> bold <i> </i> italic <u> </u> underline <center> </center> center <blockquote> </blockquote> indent nested tags
West Virginia Department of Education 39
Links
External links (HTML Exercise 4)
Internal links (HTML Exercise 5) Relative path names Absolute path names
West Virginia Department of Education 40
External versus Internal Links
External link - link takes viewer to another page; may or may not be on the same server
Internal link - link takes the viewer to another section of the same page; often used in long documents for navigation; for instance Back to Top
West Virginia Department of Education 41
External Links
Anchor tag - <a> and </a> href - hypertext reference <a href=URL>link_phrase</a> Example: <a href=[Link] AEL would be in color (usually blue) and underlined on the web page - an active link
West Virginia Department of Education 42
Relative versus Absolute Path
Relative path - point to files based on their location in relation to the current file Absolute path point to files by starting at the very top of your directory hierarchy and working down through all the intervening directories to reach the desired file Most of the time you will use a relative path; an absolute path is not portable if any subdirectories are renamed or you move servers
West Virginia Department of Education 43
Examples of Relative Path
"[Link] ../contacts/[Link] ../../files/[Link] Two dots refer generically to the directory above the current one
West Virginia Department of Education
44
Absolute Path and URL
Absolute path names always start with a slash followed by all directories in the path; example: /success/[Link]
A URL that has the server type (protocol), host name, directory path and file name is sometimes called an absolute URL
West Virginia Department of Education 45
Examples of Absolute URL
[Link]
[Link] gopher://[Link]/1 [Link]
West Virginia Department of Education 46
HTML Source Code for Exercise 4
West Virginia Department of Education
47
Exercise 4 in Internet Explorer
West Virginia Department of Education
48
Do HTML Exercise Four External Links
External links
<a href=[Link] High School</a><p>
West Virginia Department of Education
49
Internal Links
Two tag statements needed: the link the link target <a href=#target>visible_phrase</a> <a name=target>visible_phrase</a> Target keywords are case sensitive; same word used in each statement
West Virginia Department of Education
50
Example Internal Link Tags
<a href=#top>Return to Top of Page</a><p>
<a name=top></a>
Note that the visible_phrase is optional for the <a name=target></a> open/close pair
West Virginia Department of Education 51
HTML Source Code for Exercise 5
West Virginia Department of Education
52
HTML Source Code for Exercise 5
West Virginia Department of Education
53
Exercise 5 in Internet Explorer
West Virginia Department of Education
54
Do HTML Exercise Five Internal Links
<a name=top></a> <a href=#top>Top of Page </a>
West Virginia Department of Education
55
Address Tags
<address> and </address>
Encloses an authors name and address usually displays in italics with an auto line feed
West Virginia Department of Education
56
Example 1: <address>
<address> Office of Technology<br> 1900 Kanawha Blvd. East<br> Charleston, WV 25305-0009<br> (304) 558-0304<br> </address>
West Virginia Department of Education 57
Example 2: <address>
<address>Office of Technology</address> <address>1900 Kanawha Blvd. East</address> <address>Charleston, WV 25305</address> <address>(304) 558-7880</address>
West Virginia Department of Education
58
HTML Source Code for Exercise 6
West Virginia Department of Education
59
Exercise 6 in Internet Explorer
West Virginia Department of Education
60
Do HTML Exercise Six Address Tags
<address> and </address>
West Virginia Department of Education
61
Mailto Tag
Mailto is used to include the e-mail address and immediate access to sending e-mail <a href=[Link] text</a> There is a colon between the word mailto and the e-mail address; no spaces
West Virginia Department of Education 62
Examples of Mailto
<a href=[Link] otis@[Link]</a> <a href=[Link] E-Mail the Security Officer</a>
West Virginia Department of Education
63
HTML Source Code for Exercise 7
West Virginia Department of Education
64
Exercise 7 in Internet Explorer
West Virginia Department of Education
65
Do HTML Exercise Seven mailto
<a href=[Link] E-Mail the Webmaster</a>
West Virginia Department of Education
66
Lists
Ordered lists - numbered Unordered lists - bulleted Other lists (not covered here):
directory menu definition
West Virginia Department of Education 67
Ordered Lists
<ol> and </ol> tags used <li> and </li> - list item tags Example: <ol> <li>Item One</li><br> <li>Item Two</li><p> </ol> List items listed with numbers in front
West Virginia Department of Education 68
HTML Source Code for Exercise 8
West Virginia Department of Education
69
Exercise 8 in Internet Explorer
West Virginia Department of Education
70
Unordered Lists
<ul> and </ul> tags used <li> and </li> - list item tags Example: <ul> <li>Item One</li><br> <li>Item Two</li><p> </ul> List items listed with bullets
West Virginia Department of Education 71
HTML Source Code for Exercise 8
West Virginia Department of Education
72
Exercise 8 in Internet Explorer
West Virginia Department of Education
73
Do HTML Exercise Eight Lists
<ol> <li> </li> </ol>
<ul> <li> </li> </ul>
West Virginia Department of Education
74
Images
Image source tag - link to a graphic/image <img src=URL> <img src=URL align=top> alignment can be top, bottom, middle <img src=URL alt=***> <img src=URL height=### width=###>
West Virginia Department of Education
75
Examples of img src
<img src=[Link] height=119 width=135> <img src="../images/[Link]" align=center width=89 height=77><p> If you do not specify the height and width, the picture will display in native size
West Virginia Department of Education 76
Images
Keep graphics small; graphics can be resized; use low resolution and high compression where possible Consider using a catchy logo instead of a graphic Use small colorful accent graphics like balls and lines Relative and absolute links apply here
West Virginia Department of Education 77
Graphic Formats on the Web
GIF - Graphic Interchange Format; 256 colors; used for clipart, black and white drawings, cartoons, buttons, etc. JPG - JPEG graphic; Joint Photographic Experts Group; 16 million colors; used for photographs, more detailed drawings; variable compression; quality decreases as compression increases
West Virginia Department of Education 78
Graphic Formats on the Web
The GIF89a standard has animation and interlacing; JPEG does not have either of these; P-JPEG added a form of interlacing There is a move to PNG format in newer browsers Use the <p> or <br> tags around graphics for space
West Virginia Department of Education 79
HTML Source Code for Exercise 9
West Virginia Department of Education
80
Exercise 9 in Internet Explorer
West Virginia Department of Education
81
Do HTML Exercise Nine Image Source
<img src=[Link] height=# width=#>
<center><img src=[Link] height=50 width=68></center><p>
West Virginia Department of Education
82
Tables
<table> and </table>
<tr> and </tr> - table row <td> and </td> - table data/cell
West Virginia Department of Education
83
Example: 2 Row by 3 Column Table
<table border> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> <td>F</td> </tr> </table>
West Virginia Department of Education 84
2 Row by 3 Column Table Example in Internet Explorer
West Virginia Department of Education
85
HTML Source Code for Exercise 10
West Virginia Department of Education
86
HTML Source Code for Exercise 10
West Virginia Department of Education
87
Exercise 10 in Internet Explorer
West Virginia Department of Education
88
Do HTML Exercise Ten Tables
<table> and </table>
<tr> and </tr>
<td> and </td>
West Virginia Department of Education 89
Exercise 10 Optional Assignment
West Virginia Department of Education
90