HTML Introduction (02c)
Our Plan G HTML background G Unix and other issues G Minimal HTML documents G Hyperlinks and URLs
Web Concepts: Static Design your PC domain.name Client Software HTTP HTML/HTTP HTML /HTTP HTML Server Internet TCP/IP TCP/IP Page Software <A HREF=> HTML, TXT , Static pages GIF, JPEG created manually etc.
HTML Background G derived from SGML (an ISO standard) G tailored (bastardized) for Web G stored as plain ASCII text with “markup tags” G an “open” standard G evolving into a robust "SGML application" with special tags added for dynamic screen presentation G a related future technology is “XML”
SGML Background G SGML – standard generalized markup language – superset of HTML – allows documents to describe their own “grammar” – has well defined international standard (ISO 8879) – has many industry-specific applications – very important in government publishing
SGML vs. HTML G SGML allows documents to describe their own grammar. It specifies the tags used in the document and the structural relationships that those tags represent. HTML applications predefine a small set of tags in conformance with a fixed specification. Freezing a small set of tags allows users to leave the language specification out of the document and makes it much easier to develop documents. Unfortunately, this comes at the cost of severely limiting HTML. G SGML has proved very costly to learn and implement
Extensible Markup Language -- XML G XML retains the key SGML advantages of extensibility, structure, and validation in a language that is designed to be easier to learn, use, and implement than full SGML. G XML differs from HTML as follows: – Information providers can define new tag and attribute names at will. – Document structures can be nested to any level of complexity. – Documents may include optional description of grammar so applications can validate structure.
Logical vs. Physical Markup G physical – describes fonts, spacing, layout details G logical – describes “structure” such as headings, paragraphs, lists, etc. G early emphasis was on logical markup, current pressures argue for more physical control over "look and feel"
Browser Page Resolution G text, graphics, and multimedia objects are stored separately and brought together by the browser G actual look and feel of page depends upon client browser and user settings G thus you should design primarily for logical presentation
Evolution of HTML G Version 1 G version 2 G version 3.2 -- current standard G Microsoft vs. Netscape differences – dynamic HTML – "push" strategies
Unix Issues G mkhomepage G pico, vi G mkdir, rm, cp, ls -l (dir), G file permissions – chmod 600 private.html – chmod 644 normal.html – chmod 755 normal.cgi – chmod 777 dangerous.html G ftp
Other issues G Adobe Acrobat – renders PDF formatted files – www.adobe.com G HTML editors – Netscape Gold or Composer – Internet Explorer – Word 97 suite
The Minimal HTML Document <html> <head> </head> <body> </body> </html>
The Head Part <head> <meta name=“author” content=“brancheau”> <script>javascript here</script> <title>shown in title bar</title> <style type="text/css"> <!--h3 { font-family: Arial; font-style: bold}--> </style> </head> G Note difference among tags, attributes, values
Basic Tags G headings G paragraphs G lists G text
The Body Part <body> all content is “tagged” e.g. <h1>first level heading</h1> <h2>second level heading</h2> <h3>third level heading</h3> <p>paragraph text</p> <ul><li>bullet list item</li> <li>second item</li></ul> <applet>java, etc.</applet> </body>
Creating Links and Anchors G Set a link using the href attribute: <A HREF="URL">text or object</A> G Set an anchor using the name attribute: <A NAME="top"></A>
Hyperlinking Hyperlink part seen by user <a href=home.html> embedded text or object to highlight </a> <a href= #anchor-name > embedded text or object to highlight </a> <a href= home.html#anchor-name > embedded text or object to highlight </a>
Anatomy of a URL G Everything on Web addressed with standard G Universal Resource Locator (URL) – used to address info resources on the web Directory and File Name Protocol http://www.colorado.edu/infs/jcb/home.html Host Name File Type (incl domain)
Relative vs. Absolute URLs G absolute (for Web or for server document tree) – any fully qualified URLs (http://www.colorado.edu/jcb/home.html) – or files with leading slash (/jcb/home.html) G relative (to currently displayed page) – directory/file or file (jcb/home.html or home.html) – or files without leading slash (./home.html) – use ./ and ../ per normal G pros and cons
Using URLs G Absolute URLs – use for all external resources (remote server) http://www.colorado.edu/infs/jcb/home.html – use for permanent internal resources /infs/jcb/home.html – for getting feedback "mailto:james.brancheau@colorado.edu"
Using URLs G Relative URLs – use for most internal resources jcb/home.html – use URLs in same “project” home.html
Using URLs G within a specific page – use for links inside a different page home.html#top – use for links inside a page #top
HTML Lists G Unordered (bullet) list <UL>...</UL> – use <LI> for list items G Ordered (number) list <OL>...</<OL> – use <LI> for list items G Definition (indented) list <DL>…</DL> – use <DT> for terms and <DD> for definitions
Text Formatting G Logical styles G Physical styles <STRONG>strong</STRONG> <B>bold</B> <EM>emphasize</EM> <I>italics</I> <U>underline</U>
Other Features G to force a "line break" <BR> G to add a "horizontal rule" <HR>
Recommend
More recommend
