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) 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
URL, continued l Example: –
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
Skeleton HTML Page <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " dtd"> My Title
Skeleton HTML Page, continued <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " your name’s First Test Page It Works!
Skeleton HTML Page, continued
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
Use a Web Server to Display the Test HTML Page
Document Type Definitions (DTD) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “ <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “
Header Tags l Can be bracketed by the optional tag l Contains the required element TITLE l May contain metadata
Example Header Chapter 4
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
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.
Body Tags, continued l New Paragraph l Line Break l Horizontal Tab
Font Styles l Discouraged – Use style sheets instead l Not consistent between browsers l Teletype (monospaced) l Italic l Bold l Large l Little
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.
Images & Objects l : Display an image on the page l : Display a generic object
Image Maps l Image to be displayed l Area within map where a click will activate a link l Example: l
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
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
Example Headings: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " dtd"> Example Headings Level 1 Heading Level 2 Heading Level 3 Heading Normal Text
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
Example Anchor
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.
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