objectives: 1. create a skeleton html 2. view a skeleton file through a server and browser 3. learn...
TRANSCRIPT
Objectives: 1. Create a Skeleton HTML
2. View a Skeleton File Through a Server and Browser
3. Learn HTML Body Tags for the Display of Text and Graphics.
4. Use Tags to Create Input Fields
5. Use Tags to Display a Component
6. Embed a Code From a Scripting Language Inside an HTML Form
Fundamentals of HTML
Uniform Resource Locator (URL)
Universal address
Contains three items: The communications protocol to be used
across the network The computer’s internet address Directory and file to be retrieved
URL, continued
Example:
–http://www.microsoft.com/ms.htm
HTML Tags
Enclosed within brackets
Optional attributes
End tag closes the block, but is only used with some tags
Example:
<TITLE>Don Quixote</TITLE>
Skeleton HTML Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html40/strict.dtd">
<TITLE>My Title</TITLE>
Skeleton HTML Page, continued
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html40/strict.dtd">
<HTML>
<HEAD>
<TITLE> your name’s First Test Page</TITLE>
</HEAD>
<BODY> It Works! </BODY>
</HTML>
Skeleton HTML Page, continued
Use a Web Server to Display the Test HTML Page
Modify the Title, changing “First” to “Second”
Save this file to the web server’s root directory using a unique name
Use a Browser to view the page
Use a Web Server to Display the Test HTML Page
Document Type Definitions (DTD)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html40/strict.dtd">
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html40/loose.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html40/frameset.dtd”>
Header Tags
Can be bracketed by the optional tag <HEAD>
Contains the required element TITLE
May contain metadata
Example Header
<HEAD>
<TITLE>Chapter 4</TITLE>
<META name=“Author” content=“Arthur C. Clark”>
<LINK rel=“stylesheet” type=“text/css” href=“MyStyles.css”>
</HEAD>
Body Tags
The tag <BODY> is optional Not used with frames Contains the document’s content Text, images, colors, graphics, etc.. Many features have been deprecated due
to style sheets
Body Tags and Style Information
Example: <BODY STYLE=“color:red; font-size:24pt; font-family:arial;” >
As shown above, styles can be applied directly to any HTML tag.
Body Tags, continued
New Paragraph <P> Line Break <BR> Horizontal Tab <TAB>
Font Styles
Discouraged – Use style sheets instead Not consistent between browsers <TT> Teletype (monospaced) <I> Italic <B> Bold <BIG> Large <SMALL> Little
Horizontal Rules
Causes a horizontal rule to be rendered by the browser
<HR> Start tag: required, end tag: forbidden
Standard attributes apply: id, class, lang, title, style, and the onevent attributes.
Images & Objects
<IMG> : Display an image on the page
<OBJECT> : Display a generic object
Image Maps
<MAP> Image to be displayed
<AREA> Area within map where a click will activate a link
Example:
<a href=“images/map2”>
<img src=“pics/map2.gif” ismap usemap=“#map2”> </a>
<map name=“map2”>
<area coords=“0,0,49,49” href=“link1.html”>
<area coords=“50,0,99,49” href=“link2.html”>
</map>
HTML Tags
The tag <HTML> is optional When the start tag is used, it is advisable
to finish the page with the end tag. Contains the header and body
Headings
There are 6 levels of headings <H1> to <H6>
H1 is most important, H6 is least End tags are required
Example:
<H1>Agenda</H1>
<H2 ALIGN=center>Old Business</H2>
Example Headings:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html40/strict.dtd">
<TITLE>Example Headings</TITLE>
<H1>Level 1 Heading</H1>
<H2>Level 2 Heading</H2>
<H3 ALIGN=center>Level 3 Heading</H3>
Normal Text
Anchors
Link web pages together
The actual URL is hidden
If there is associated text, that text is underlined
Can be part of a graphic
Example Anchor
Forms
Forms are read by the web server, and an associated action is performed.
The action is specified in the start tag <FORM>
Actions can return information to the browser and/or take some other action.
Example Form
Topics Covered: 1. Create a Skeleton HTML
2. View a Skeleton File Through a Server and Browser
3. Learn HTML Body Tags for the Display of Text and Graphics.
4. Use Tags to Create Input Fields
5. Use Tags to Display a Component
6. Embed a Code From a Scripting Language Inside an HTML Form
Summary