HTML-1© 2004 D. J. Foreman HTML - An Introduction

HTML-2© 2004 D. J. Foreman Language Structure  Tag based – 3 types Paired tags Unpaired tags Special 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   Attributes (or options): attribute_name = "value" Can be in any order, for example:  Or 

HTML-5© 2004 D. J. Foreman Paired Tags  Require the symbols  Specific spelling  Ending tag requires a /  example:

HTML-6© 2004 D. J. Foreman Unpaired Tags  No ending tag  Apply to a single object  Examples:

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  Content formatting

HTML-9© 2004 D. J. Foreman Basic Web Page Structure  Identification area  Body Text to be formatted Tags to do the formatting

HTML-10© 2004 D. J. Foreman Basic Web Page Structure -2  Method to 'connect' pages URLs – Universal Resource Locators (or Uniform Resource Locators)  e.g.: Tags create connections  (for anything 'clickable')  (for inline images)  (for inline sounds)

HTML-11© 2004 D. J. Foreman Example my first webpage My web page text

HTML-12© 2004 D. J. Foreman Beginning tags  Alink : activated during this session  Vlink : previously visited links  Link : unvisited links

HTML-13© 2004 D. J. Foreman BGColor  Specified in 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 red 2nd pair for green 3rd 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.  So is = 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: BF 16  Is really B * 16 = 11*16 = F * 1 = 15* 1 =

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/Open enter 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_REQUEST 401 UNAUTHORIZED 403 FORBIDDEN 404 NOT_FOUND 405 METHOD_NOT_ALLOWED 408 REQUEST_TIME_OUT 410 GONE 411 LENGTH_REQUIRED 412 PRECONDITION_FAILED 413 REQUEST_ENTITY_TOO_LARGE 414 REQUEST_URI_TOO_LARGE 415 SERVICE_UNAVAILABLE 500 INTERNAL_SERVER_ERROR 501 NOT_IMPLEMENTED 502 BAD_GATEWAY 503 SERVICE_UNAVAILABLE 506 VARIANT_ALSO_VARIES

HTML-20© 2004 D. J. Foreman More about basic tags  attribute s: bgcolor, background  attribute s: size, color, face  alignment  headings: … 

HTML-21© 2004 D. J. Foreman The Anchor Tag  points to another page on this server or to a page on a different server click here  point to an image somewhere click me  connect via a "click-able" in-line image

HTML-22© 2004 D. J. Foreman Using anchors within a page  known as a named anchor  go back  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 with more text afterward. The Tag

HTML-24© 2004 D. J. Foreman  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 list item another yet another A list item may contain any other tags There is NO list-item end tag

HTML-26© 2004 D. J. Foreman Nested Ordered Lists ordered list 1 list item item1 item2 yet another Note: I do not do the formatting myself. The browser will do it for me

HTML-27© 2004 D. J. Foreman Unordered Lists list item another yet another

HTML-28© 2004 D. J. Foreman Nested Unordered Lists list item list item another yet another yet another

HTML-29© 2004 D. J. Foreman Mixed Nested Lists unorderedlist item ordered list item another yet another yet another

HTML-30© 2004 D. J. Foreman Dictionary ( glossary ) Lists dog a 4 legged animal that barks cat a 4 legged animal that meows person a 2 legged animal that whines

HTML-31© 2004 D. J. Foreman Standards  HTML 4.0 – many formatting elements (like "align", ) are "deprecated"  HTML should be for text organization  CSS for element formatting & layout  XML – identifies CONTENT XML tags like:  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 XHTML Support-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 frames use 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   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):  HTML frameset:  HTML strict: <!DOCTYPE HTML PUBLIC "  //W3C//DTD HTML 4.01//EN" "

HTML-36© 2004 D. J. Foreman For XHTML Documents  XHTML transitional:  XHTML frameset:  XHTML strict:

HTML-37© 2004 D. J. Foreman Unpaired Tags in Xhtml (and how to handle them)  All tags have endings  Examples (with formal XHTML endings): Note the space before the "/" More info at