Download presentation
Presentation is loading. Please wait.
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. 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
2
Uniform Resource Locator (URL) l Universal address l Contains three items: l The communications protocol to be used across the network l The computer’s internet address l Directory and file to be retrieved
3
URL, continued l Example: –http://www.microsoft.com/ms.htm
4
HTML Tags l Enclosed within brackets l Optional attributes l End tag closes the block, but is only used with some tags Example: Don Quixote
5
Skeleton HTML Page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict. dtd"> My Title
6
Skeleton HTML Page, continued <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict.dtd"> your name’s First Test Page It Works!
7
Skeleton HTML Page, continued
8
Use a Web Server to Display the Test HTML Page l Modify the Title, changing “First” to “Second” l Save this file to the web server’s root directory using a unique name l Use a Browser to view the page
9
Use a Web Server to Display the Test HTML Page
10
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”>
11
Header Tags l Can be bracketed by the optional tag l Contains the required element TITLE l May contain metadata
12
Example Header Chapter 4
13
Body Tags l The tag is optional l Not used with frames l Contains the document’s content l Text, images, colors, graphics, etc.. l Many features have been deprecated due to style sheets
14
Body Tags and Style Information l Example: l <BODY l STYLE=“color:red; font-size:24pt; font-family:arial;” l > l As shown above, styles can be applied directly to any HTML tag.
15
Body Tags, continued l New Paragraph l Line Break l Horizontal Tab
16
Font Styles l Discouraged – Use style sheets instead l Not consistent between browsers l Teletype (monospaced) l Italic l Bold l Large l Little
17
Horizontal Rules l Causes a horizontal rule to be rendered by the browser l Start tag: required, end tag: forbidden l Standard attributes apply: id, class, lang, title, style, and the onevent attributes.
18
Images & Objects l : Display an image on the page l : Display a generic object
19
Image Maps l Image to be displayed l Area within map where a click will activate a link l Example: l
20
HTML Tags l The tag is optional l When the start tag is used, it is advisable to finish the page with the end tag. l Contains the header and body
21
Headings l There are 6 levels of headings to l H1 is most important, H6 is least l End tags are required Example: Agenda Old Business
22
Example Headings: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html40/strict. dtd"> Example Headings Level 1 Heading Level 2 Heading Level 3 Heading Normal Text
23
Anchors l Link web pages together l The actual URL is hidden l If there is associated text, that text is underlined l Can be part of a graphic
24
Example Anchor
25
Forms l Forms are read by the web server, and an associated action is performed. l The action is specified in the start tag l Actions can return information to the browser and/or take some other action.
26
Example Form
27
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
Similar presentations
