View
221
Download
0
Category
Tags:
Preview:
Citation preview
HTML-2© 2004 D. J. Foreman
Language Structure
Tag based – 3 typesPaired tags Unpaired tagsSpecial tags
Unsupported or unknown tags are ignored
HTML-3© 2004 D. J. Foreman
Formatting
Browser does the formatting (ignores any formatting you may have in your input)
Tags specify the formatting to be applied
Whitespace is ignored unless inside quotes
Data entry is NOT wysiwyg
HTML-4© 2004 D. J. Foreman
Tag Structure
< tagname attributes >
Attributes (or options):attribute_name = "value"Can be in any order, for example:
<font color='red' size='+2'>Or
<font size='+2' color='red'>
HTML-5© 2004 D. J. Foreman
Paired Tags
Require the < and > symbols Specific spelling Ending tag requires a / example:
<body></body>
HTML-6© 2004 D. J. Foreman
Unpaired Tags
No ending tag Apply to a single object Examples:
<hr><img><p>
HTML-7© 2004 D. J. Foreman
Special Tags Represent specific ASCII symbols, like:
µ micro
® ® registered non-breaking blank space
NOTES:semi-colon#Very old browsers don't know names of these
tags, but numbers are always OK.
HTML-8© 2004 D. J. Foreman
Tag Uses
Page identification<html><head> <title><meta>
Content formatting
HTML-9© 2004 D. J. Foreman
Basic Web Page Structure
Identification area Body
Text to be formattedTags to do the formatting
HTML-10© 2004 D. J. Foreman
Basic Web Page Structure -2
Method to 'connect' pagesURLs – Universal Resource Locators
(or Uniform Resource Locators) e.g.: http://domain/directory/filename.html
Tags create connections <a> (for anything 'clickable') <img> (for inline images) <embed> (for inline sounds)
HTML-11© 2004 D. J. Foreman
Example
<html><head> <!-- This is an html comment --><title> my first webpage</title></head><body> <font size='+2'> <i>My web page text </i> </font></body></html>
HTML-12© 2004 D. J. Foreman
Beginning tags
<body bgcolor="red" link="orange" alink="black" vlink="green" >
<basefont size='3'>
Alink: activated during this session Vlink: previously visited links Link: unvisited links
HTML-13© 2004 D. J. Foreman
BGColor
Specified in <body> tag May be a color name (see book) May be an 'rgb' triple in hexadecimal:
bgcolor="#D0C580" each pair of digits is a base 16 number
1st pair is for red2nd pair for green3rd pair for blue
HTML-14© 2004 D. J. Foreman
Base 16 numbering
8 bits per byte Each bit is a power of 2 higher Counting RIGHT TO LEFT, we have:
128, 64, 32, 16, 8, 4, 2, 1 as the decimal values for the bit positions.
So0 0 1 0 0 0 0 1 is32 + 1 = 33 (decimal)
HTML-15© 2004 D. J. Foreman
Base 16 numbering - 2 But remembering all those bits is hard We have a shorthand: hexadecimal
In decimal, we number our columns: 1, 10, 100 In hexadecimal we number: 1, 16, 256 So in one column, we can count to 15
(one less than our number system's base) But we don't have symbols for 10-15
HTML-16© 2004 D. J. Foreman
Base 16 numbering -3
So we "invent" new symbols:10, 11, 12, 13, 14, 15 A, B, C, D, E, F
So a number like: BF16
Is really B * 16 = 11*16 = 176 + F * 1 = 15* 1 = +15
19110
HTML-17© 2004 D. J. Foreman
Creating a Webpage - First Steps
Open NOTEPAD Type the text Save with an extension of htm or html
(may need to remove an added '.txt') Open browser
click on: File/Openenter disk address of file
Might need ftp to put file on server Test it using browser
HTML-18© 2004 D. J. Foreman
Creating a Webpage Common Errors
Test your page from someone else's signon 403 Forbidden
URL was correct & file exists file not available to the public Action – change permissions for file
chmod 755 filename on UNIX systems See link on Prof. Foreman's homepage:
"solving webpage access problems"
404 – cannot locate the page URL is incorrect, or not available, or mis-spelled. Action – fix the URL in your HTML
HTML-19© 2004 D. J. Foreman
Web Server Error Messages
400 BAD_REQUEST401 UNAUTHORIZED403 FORBIDDEN404 NOT_FOUND405 METHOD_NOT_ALLOWED408 REQUEST_TIME_OUT410 GONE411 LENGTH_REQUIRED412 PRECONDITION_FAILED413 REQUEST_ENTITY_TOO_LARGE414 REQUEST_URI_TOO_LARGE
415 SERVICE_UNAVAILABLE500 INTERNAL_SERVER_ERROR501 NOT_IMPLEMENTED502 BAD_GATEWAY503 SERVICE_UNAVAILABLE506 VARIANT_ALSO_VARIES
HTML-20© 2004 D. J. Foreman
More about basic tags
<body> attributes: bgcolor, background
<font> attributes: size, color, face
<p>alignment
headings: <h1> … <h6> <em> <strong> <sub> <sup> <u> <b> <i>
HTML-21© 2004 D. J. Foreman
The Anchor Tag points to another page on this server
or to a page on a different server<a href="…"> click here </a>
point to an image somewhere<a href="XYZ.JPG"> click me </a>
connect via a "click-able" in-line image <a href="…"> <img src="..."> </a>
HTML-22© 2004 D. J. Foreman
Using anchors within a page
<a name="my_mark1"> </a>known as a named anchor
<a href="#my_mark1"> go back</a>
Re-displays page with my_mark1 at top of screen
HTML-23© 2004 D. J. Foreman
Allows an image to be in-line with the text(no click required to see image)
This is the body of my text with
more text afterward.
Example: .. my text <img src="afile.jpg"> with more text afterward.
The <img> Tag
HTML-24© 2004 D. J. Foreman
<IMG align=…>
left/right page alignment of image top, texttop, middle, etc
align image to the text alt=what to show if no graphics "align=top" gives:
text
HTML-25© 2004 D. J. Foreman
Ordered Lists
<ol><li> list item
<li> another
<li> yet another
</ol>
A list item may contain any other tags
There is NO list-item end tag
HTML-26© 2004 D. J. Foreman
Nested Ordered Lists
<ol> ordered list 1<li> list item
<li> <ol> <li> item1 <li>item2</ol><li> yet another
</ol>
Note: I do not do the formatting myself. The browser will do it for me
HTML-28© 2004 D. J. Foreman
Nested Unordered Lists
<ul><li> list item<li> <ul>
<li> list item<li> another<li> yet another
</ul><li> yet another
</ul>
HTML-29© 2004 D. J. Foreman
Mixed Nested Lists
<ul><li>unordered list item<li> <ol>
<li> ordered list item<li> another<li> yet another
</ol><li>yet another
</ul>
HTML-30© 2004 D. J. Foreman
Dictionary (glossary) Lists
<dl><dt>dog
<dd>a 4 legged animal that barks
<dt>cat
<dd>a 4 legged animal that meows
<dt> person
<dd> a 2 legged animal that whines
</dl>
HTML-31© 2004 D. J. Foreman
Standards HTML 4.0 – many formatting elements
(like "align", <b>) are "deprecated" HTML should be for text organization CSS for element formatting & layout XML – identifies CONTENT
XML tags like: <street_address><check_number>
HTML was re-defined using XML giving XHTML
HTML-32© 2004 D. J. Foreman
Document Type Definitions
DTD statements allow you to specify:HTML vs XHTMLSupport-level
Transitional Frameset Strict
URL of the DTD rules
HTML-33© 2004 D. J. Foreman
HTML and XHTML Levels
Transitional – allows deprecated tags but all tags must have endings
Frameset - as above + frames
Strict – no deprecated tags OR framesuse CSS with layers to get the same effects
HTML-34© 2004 D. J. Foreman
Doctype Syntax for all HTML types
Identifies rules for handling the document <!DOCTYPE html -ruletype rule_loc>
NOTE: ruletype preceded by a "-" rule_loc specifies the URL for the
"document type definition" file
HTML-35© 2004 D. J. Foreman
For HTML Documents
HTML transitional (or loose):<!DOCTYPE HTML PUBLIC
" //W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML frameset:<!DOCTYPE HTML PUBLIC
" //W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML strict:<!DOCTYPE HTML PUBLIC
"//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML-36© 2004 D. J. Foreman
For XHTML Documents
XHTML transitional: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML frameset: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML strict: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Recommended