The Hypertext Markup Language (HTML) - Cglab.ca

The Hypertext Markup Language (HTML)Pat MorinCOMP 2405

Outline History of HTML Structure of an HTML Document– DOCTYPE– HEAD– BODY HTML Tags– Paragraphs and Headings– Lists and tables– Hyperlinks Conclusions and Guidelines2

History of HTML Hypertext systems were envisioned as early as1940 by Vannevar Bush and have a rich history Tim Berners-Lee and Robert Caillau at CERN, in1989-1990 developed HTML as a simplification ofSGML CERN launched the web in 1991 (HTML HTTP) HTML is now at version 43

Versions of HTML There are several different version of HTML– HTML 1.0, 2.0, 3.2, 4.0, 4.01– XHTML 1.0 and 1.1 HTML 4.01 and XHTML 1.0 come in differentflavours:– Strict: strictly compliant– Transitional: allows some deprecated elements– Frameset: a variant of transitional for documents that useframes For these reasons, every HTML file must beginwith a DOCTYPE definition4

Structure of an HTML Document Every document starts with a DOCTYPE, followedby an HTML section that contains a head andbody: !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd" html head title The Hello World Page /title /head body p Hello World! /p /body /html 5

DOCTYPEs A list of DOCTYPEs is available here from theWorld-Wide-Web Consortium (W3C):– http://www.w3.org/QA/2002/04/valid-dtd-list.html Help on choosing a DOCTYPE is also available:– http://htmlhelp.com/tools/validator/doctype.html Pros and Cons of different DOCTYPEs– Older DOCTYPEs are supported on older browsers– Newer DOCTYPEs are generally better structured, morestandards compliant, and more modular In this course we will be using HTML 4.01 Strict6

The Document HEAD The HEAD section of the document containsinformation about the document as opposed to thecontents of the document Minimally, it should include a TITLE– title My Page Title /title The title typically appears in a Browser's title bar The HEAD may also include metadata such ascharacter encoding and information about how toformat the document7

The Document BODY The BODY contains the document itself, i.e., whatthe user sees Any text (also called character data or cdata)within the body must be contained within someother tag8

Paragraphs The P tag is used to enclose a paragraph of text Paragraphs appear formatted as you wouldexpected p In the case of a private weddingannouncement cards should be mailed thefollowing day to all relatives andacquaintances of both the contractingparties. /p p Evening weddings are no longer the custom,and the fashionable hour is now high noon,. /p 9

Headings Headings are marked with H1, H2, ., H5 tags Hn denotes an nth level heading h1 Etiquette and Courtship /h1 p It is a growing custom . /p h2 Gifts and Attention /h2 p Just what attention a person is . /p h2 The Claims of Companionship /h2 p At this period it is a wise person . /p h1 Morning Customs /h1 p The morning of the wedding, the . /p 10

Lists HTML has three kinds of lists: Unordered information (bulleted lists) Ordered information (numbered lists) Definitions (like in a dictionary)11

Unordered Lists The UL tag encloses an unordered list The individual list items are enclosed in LI tags ul li Client/server protocols /li li Web site design /li li Server-side scripting /li li Client-side scripting /li li Mixed-mode scripting /li /ul 12

Ordered Lists The OL tag denotes ordered (numbered) lists Again, list items are enclosed in LI tags ol li Mix dry ingredients thoroughly. /li li Pour in wet ingredients. /li li Mix for 10 minutes. /li li Bake for one hour at 300 degrees. /li /ol 13

Definition Lists Definition lists use the DL tag Each item has two parts, the term DT and thedefinition DD dl dt Lower cost /dt dd The new version of this product costssignificantly less than the previous one! /dd dt Easier to use /dt dd We've changed the product so that it's mucheasier to use! /dd dt Safe for kids /dt dd You can leave your kids alone in a room withthis product and they won't get hurt (much). /dd /dl 14

Some Other Tags To emphasize some text, use EM– The em last /em thing you should do . To strongly emphasize, use STRONG– The strong absolute last /strong thing . Use CODE to denote code snippets– Use code fseek(fp, 0L, SEEK SET) /code torewind the file pointer There are also short quotes Q, block quotes(BLOCKQUOTE), citations (CITE), addresses(ADDRESS), insertions (INS), deletions (DEL),typed-text (KBD), variable names (VAR), sampleoutput (SAMP), and preformatted text (PRE)15

Simple HTML Tables HTML tables are created TABLE tag Each table contains one or more rows (TR)containing table data (TD) or table headers (TH) table tr th First Name /th th Last Name /th th Research Areas /th /tr tr td Pat /td td Morin /td td Algorithms and data structures /td /tr . /table 16

HTML Tables Cont'd HTML4 Tables are actually much moresophisticated than this basic example All the gory details can be found at the W3C– http://www.w3.org/TR/html4/struct/tables.html17

The A Tag So far we know enough to create a simple textdocuments What about the hyper in hypertext? For this we use the A tag p Some of the better search sites on theInternet include a href ”h ttp://www.google.com/” Google /a , a href ”h ttp://www.a9.com/” A9 /a , and a href ”h ttp://www.altavista.com/” Alta Vista /a .For more information on internet searching, . /p 18

The A Tag (Continued) The attribute HREF of the A tag specifies thedestination the link will take us to This destination can be absolute:– href ”h ttp://www.google.com/”– href ”h ttp://www.newgrounds.com/” Or relative:– href ”n otes/index.html” – href ”/ teaching/2405/index.html” Relative locations specify the location relative tothe current document and are extremely usefulwhen building large websites19

The A Tag (Cont'd) The HREF attribute can even specify a target withina document– a href ”h ttp://abc.com/index.html#tuesday” – a href ”# sectionA” These link to the sections labels “t uesday” and“s ectionA” within their respective documents To create these targets we again use the A tag in adifferent way– a name ”t uesday” Tuesday's Schedule /a – creates a target named tuesday within the current document20

Targets and Tags Example. body h1 a name ”c hap1” Chapter 1 /a /h1 p Those already familiar with widgets canskip to a href ”# chap2” Chapter 2 /a . h1 a name ”c hap2” Chapter 2 /a /h1 p If you are reading this and you still don'tunderstand widgets then you should go backand read a href ”# chap1” Chapter 1 /a . /body 21

Images Images can be added to the document with theIMG tag The SRC attribute specifies the location of theimage data The ALT attribute specifies some text to display ifthe image can not be displayed img src "kafka.jpg" alt "Franz Kafka's Portrait" 22

Line Breaks For a quick and dirty line break you can use the BRtag Normally you should avoid this Why are you breaking the line?– For a list of items (or menu): use ul – To shorten a line: let the browser wrap it– For preformatted text: use the pre tag Do as I say, not as I do– Some examples may contain br tag to make them shorter– You should avoid them23

Summary There are many versions of HTML– You must specify which version using the DOCTYPE tag Every document has a HEAD and a BODY tag– HEAD contains information about the document– BODY contains the contents of the (displayed) document Basic document constructs are available–––––HeadingsParagraphsOrdered, unordered and definition listsTablesHyperlinks and hyperlink targets24

HTML Formatting All of the HTML tags discussed have otherattributes, examples:– td align ” right” valign ”t op” bgcolor ” red” – body background ”i mage1.gif” link ”b lue”text ” red” There are lots of other HTML tags– Some of these, like FONT, control formatting Tags and attributes that control formatting areusually not a good idea We will see a better alternative soon25

4 Versions of HTML There are several different version of HTML - HTML 1.0, 2.0, 3.2, 4.0, 4.01 - XHTML 1.0 and 1.1 HTML 4.01 and XHTML 1.0 come in different