HTML - An Introduction © 2012 D. J. Foreman
Purpose of HTML To structure text and multimedia documents To provide links to other documents To create web pages To provide uniformity in web pages © 2012 D. J. Foreman
Language Structure Tag based – 3 types Paired tags Unpaired tags Special tags Unsupported or unknown tags are ignored Spelling counts! © 2012 D. J. Foreman
Formatting, Layout, Organization - 1 Formatting: visual appearance Style bold, italic Color (now use CSS) Font (now use CSS) Organization Paragraphs Lists Tables Forms Headings © 2012 D. J. Foreman
Formatting, Layout, Organization - 2 Browser does the formatting, layout and organization (ignores any formatting or layout you may have in your text) Tags specify the actions Whitespace is ignored unless inside quotes Data entry is NOT wysiwyg © 2012 D. J. Foreman
Deprecated Tags Still work, but future is limited DON’T USE THEM <applet> <basefont> <center> <dir> <font> <menu> <s> <strike> <u> © 2012 D. J. Foreman
Tag Structure < tagname attributes > Attributes (or options): attribute_name = "value" Can be in any order, for example: <table border='5' rules=‘cols'> Or <table rules='cols' border='5' > Note the quotes REQUIRED for correctness © 2012 D. J. Foreman
Paired Tags Require the < and > symbols Specific spelling Ending tag requires a / example: <body> </body> © 2012 D. J. Foreman
Unpaired Tags No ending tag Apply to a single object Examples: <hr> <img> XHTML rules require them to be “self-ending” e.g.; <hr /> note the space before the / © 2012 D. J. Foreman
Special Tags Represent specific ASCII symbols, like: µ micro ® ® registered non-breaking space (a “required blank” in the text) NOTES: Very old browsers don't know names of some special tags, but their numbers are always OK. © 2012 D. J. Foreman
Tag Uses Page identification, manipulation and style <html> <head> <title> <meta> <style> <script> © 2012 D. J. Foreman
Basic Web Page Structure Identification area tags Body Text to be formatted Tags and styles to do the formatting Paragraph Block structure May NOT contain other blocks Must have </p> for "HTML strict" compliance © 2012 D. J. Foreman
Basic Web Page Structure -2 Method to 'connect' pages URLs – Universal Resource Locators (or Uniform Resource Locators) e.g.: http://domain/directory/filename.html Tags can create connections <a> (for anything 'clickable') <img> (for inline images) <embed> (for inline sounds) <object> (for inline video) © 2012 D. J. Foreman
Example <html> <head> <!-- This is an html comment --> <title> my first webpage</title> </head> <body> <p> <i>My web page text </i> </p> </body> </html> © 2012 D. J. Foreman
Beginning tags <body> all options are deprecated Old options: Alink: activated during this session Vlink: previously visited links Link: unvisited links © 2012 D. J. Foreman
Background Color Formerly specified in <body> tag Now done via CSS Color name or 'rgb' triple in hexadecimal: "#D0C580" each pair of digits is a base 16 number 1st pair is for red 2nd pair for green 3rd pair for blue © 2012 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 0 0 1 0 0 0 0 1 is 32 + 1 = 33 (decimal) © 2012 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 © 2012 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 © 2012 D. J. Foreman
Creating a Webpage - First Steps Open NOTEPAD Type the text Save with an extension of htm or html On your H: drive In your public_html folder Open browser Click on: File/Open Enter: bingweb.binghamton.edu/~yourid Might need ftp to put file on other servers © 2012 D. J. Foreman
Spelling: MyPage is not the same as mypage 403 Forbidden Common Errors Spelling: MyPage is not the same as mypage 403 Forbidden URL was correct & file exists, BUT 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 misspelled. Action – fix the URL in your HTML © 2012 D. J. Foreman
Web Server Error Messages 415 SERVICE_UNAVAILABLE 500 INTERNAL_SERVER_ERROR 501 NOT_IMPLEMENTED 502 BAD_GATEWAY 503 SERVICE_UNAVAILABLE 506 VARIANT_ALSO_VARIES 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 © 2012 D. J. Foreman
More about basic tags <body> <font> (deprecated – use CSS attributes: bgcolor, background <font> (deprecated – use CSS attributes: size, color, typeface <p> headings: <h1> … <h6> <em> <strong> <sub> <sup> <u> <b> <i> © 2012 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> © 2012 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 © 2012 D. J. Foreman
The <img> Tag 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. © 2012 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 © 2012 D. J. Foreman
Ordered Lists <ol> </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 © 2012 D. J. Foreman
Nested Ordered Lists <ol> ordered list 1 </ol> <li> list item <li> <ol> <li> item1 <li>item2</ol> <li> yet another </ol> Note: You do not do the formatting (such as indenting). The browser will do it. © 2012 D. J. Foreman
Unordered Lists <ul> </ul> <li> list item <li> another <li> yet another </ul> © 2012 D. J. Foreman
Nested Unordered Lists <ul> <li> list item <li> <ul> <li> another <li> yet another </ul> © 2012 D. J. Foreman
Mixed Nested Lists <ul> </ul> <li>unordered list item <li> <ol> <li> ordered list item <li> another <li> yet another </ol> <li>yet another </ul> © 2012 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> © 2012 D. J. Foreman
Standards HTML 4.0 – many formatting elements (like "align", <center>) 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 (uses same tags) © 2012 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 © 2012 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 © 2012 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 © 2012 D. J. Foreman
For HTML Documents HTML transitional (or loose): HTML frameset: <!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"> © 2012 D. J. Foreman
For XHTML Documents XHTML transitional: XHTML frameset: XHTML strict: <!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"> © 2012 D. J. Foreman
Unpaired Tags in Xhtml All tags have endings Examples (with formal XHTML endings): <hr> <hr /> <img> <img /> <p> <p /> Note the space before the "/" More info at www.w3.org © 2012 D. J. Foreman