objectives: 1. create a skeleton html 2. view a skeleton file through a server and browser 3. learn...
TRANSCRIPT
![Page 1: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/1.jpg)
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
![Page 2: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/3.jpg)
URL, continued
Example:
–http://www.microsoft.com/ms.htm
![Page 4: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/4.jpg)
HTML Tags
Enclosed within brackets
Optional attributes
End tag closes the block, but is only used with some tags
Example:
<TITLE>Don Quixote</TITLE>
![Page 5: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/5.jpg)
Skeleton HTML Page
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html40/strict.dtd">
<TITLE>My Title</TITLE>
![Page 6: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/6.jpg)
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>
![Page 7: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/7.jpg)
Skeleton HTML Page, continued
![Page 8: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/8.jpg)
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
![Page 9: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/9.jpg)
Use a Web Server to Display the Test HTML Page
![Page 10: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/10.jpg)
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”>
![Page 11: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/11.jpg)
Header Tags
Can be bracketed by the optional tag <HEAD>
Contains the required element TITLE
May contain metadata
![Page 12: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/12.jpg)
Example Header
<HEAD>
<TITLE>Chapter 4</TITLE>
<META name=“Author” content=“Arthur C. Clark”>
<LINK rel=“stylesheet” type=“text/css” href=“MyStyles.css”>
</HEAD>
![Page 13: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/13.jpg)
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
![Page 14: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/14.jpg)
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.
![Page 15: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/15.jpg)
Body Tags, continued
New Paragraph <P> Line Break <BR> Horizontal Tab <TAB>
![Page 16: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/16.jpg)
Font Styles
Discouraged – Use style sheets instead Not consistent between browsers <TT> Teletype (monospaced) <I> Italic <B> Bold <BIG> Large <SMALL> Little
![Page 17: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/17.jpg)
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.
![Page 18: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/18.jpg)
Images & Objects
<IMG> : Display an image on the page
<OBJECT> : Display a generic object
![Page 19: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/19.jpg)
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>
![Page 20: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/21.jpg)
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>
![Page 22: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/22.jpg)
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
![Page 23: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/24.jpg)
Example Anchor
![Page 25: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/25.jpg)
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.
![Page 26: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/26.jpg)
Example Form
![Page 27: 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](https://reader030.vdocuments.site/reader030/viewer/2022032605/56649e7d5503460f94b808bf/html5/thumbnails/27.jpg)
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