1 / 43

LIS901N: HTML

LIS901N: HTML. Thomas Krichel 2003-01-05. Structure of talk. HTML HTML standards and standard adherence much of which based on a paper by Brian Kelly, at http://www.ariadne.ac.uk/issue33/web-focus/. HTML and XHTML. HTML is the hypertext markup language

haruko
Télécharger la présentation

LIS901N: HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. LIS901N: HTML Thomas Krichel 2003-01-05

  2. Structure of talk • HTML • HTML standards and standard adherence much of which based on a paper by Brian Kelly, at http://www.ariadne.ac.uk/issue33/web-focus/

  3. HTML and XHTML • HTML is the hypertext markup language • HTML is a markup language that is widely used on the Word Wide Web (WWW) • The latest, and probably last version of HTML is at http://www.w3.org/TR/html4/ • The WC3, the standard making body for the WWW, have issued XHTML, a replacement of HTML that is compatible with XML. • We will ignore XHTML for the rest of the course.

  4. What is Markup? • Everything in a document that is not content. It can be give in two ways • 1: Procedural • Codes identify point size, style, font, etc. • Usually understood by defining tool • Example: M$ Word • 2: Descriptive • Describes purpose of text within the document • Chapter head, Paragraph, Section Head, TOC • Structure and Style are kept separate • Example: LaTeX, SGML

  5. Procedural vs Descriptive

  6. SGML • Standard Generalized Markup Language • Descriptive approach with three separate layers • structure: types of information in document • content: the information itself • style: matches typesetting with structure • Document Type Definition (DTD) • Defines the structure • Developed for the publishing industry by a group around Goldfarb. • So complicated that no software implements it fully

  7. SGML Document Type Definition • Describes information the document handles • e.g Title,TOC, Chapter, Section • Relationships between fields • e.g. A Chapter contains Sections • Consistency • Logical structure • Information defined by tags

  8. HTML • HyperText Markup Language • Defines an SGML DTD • Head, Title, Body, Paragraph, etc. • Headings, Bold, Italic, etc. • Table, List, Image, etc. • Links to other documents • Forms • Style applied by Web Browser • User has some control

  9. HTML Tags • HTML markup is written as tags. Tags are written as pairs (typically) • begin with <atag> • end with </atag> • atag is the tag name • Can be nested • Can contain non-markup data • Tag names are case-insensitive, but it is best to use the same case, consistently, for human readability.

  10. attributes to tags • <atag attribute_name_one=“value_one” attribute_name_two=“value_two”> • Here attribute_name_one and attribute_name_two are attribute names • and value_one and value_two are attribute values.

  11. Common Tags • Always include the <HTML>…</HTML> tags • Comments start with <!-- and end with --!> • HTML documents • <HEAD> section • Info about the document • Info in header not generally rendered in display window • TITLE element names your Web page • <BODY> section • Page content • Includes text, images, links, forms, etc. • Elements include backgrounds, link colors and font faces • P element forms a paragraph, blank line before and after

  12. common frame for pages • Put the following in your pages: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REChtml40/loose.dtd"> <HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML> • The first three lines are the SGML document type declaration that says which kind of HTML it is, we use version 4.0 • Close nested tags properly.

  13. Headers • Headers <H1> to <H6> • Simple form of text formatting • Vary text size based on the header’s “level” • Actual size of text of header element is selected by browser • Can vary significantly between browsers • <CENTER> element • Centers material horizontally • Most elements are left adjusted by default

  14. Text Styling • Underline style • <U>…</U> • Emphasis (italics) style • <EM>…</EM> • Strong (bold) style • <STRONG>…</STRONG> • <B> and <I> tags deprecated • Overstep boundary between content and presentation • Strikethrough with <DEL> • Superscript: <SUP> element • Subscript: <SUB> element

  15. Line break • Use <p> to create a new paragraph • Use <br> to create a line break! • To have several <P> use &nbsp; • Align elements with ALIGN attribute • right, left or center • Example <p align="center”> </p> • You do not need to close <p> and <br>

  16. Linking • Links inserted using the A (anchor) element • Requires HREF attribute which specifies the URL you would like to link to • <A HREF = “address”>…</A> • Can link to email addresses, using • <A HREF = “mailto: emailaddress”>…</A> • Note quotation mark placement • Example: <a href=“http://openlib.org/home/krichel/”> Thomas Krichel</a>

  17. Uniform Resource Locator (URL) http://arcano.openlib.org/~krichel/sae.html” URL can be • Absolute – contain all parts of URL; • Relative – present path and file name relatively current file. Scheme Server name Pass File name

  18. Scheme • http – Hypertext Transfer Protocol to access Web-pages • ftp – File Transfer Protocol to download the file from the net • mailto – to send electronic mail • File – to access file on a local hard disk (File scheme uses ///). • and others…

  19. Relative URL (examples) • A file from the same folder as current file: “file.html” • A file from a subfolder of current folder: “images/picture.gif” • A file from another folder at the same hierarchical level: “../info/data.html” • same conventions as in UNIX!

  20. Links inside document: anchors • Place the cursor in the desirable part of a page, where the link should bring visitors • Create an anchor <A NAME=“anchor_name”>Label text</A> • Label text is a text or image that should be referenced, i.e. where the link should bring the visitor to. • To link to the anchor, use • <A HREF=“#anchor_name”>Label text </A> or • <A HREF=“URL#anchor_name”>Label text </A>

  21. Images • Insert image into page with the <IMG> tag, attributes: • SRC = location • BORDER (in pixels black by default) • ALT (text description for browsers that have images turned off or cannot view images, required) • location can be any URL, or a file name on the server machine • Pixel • Stands for “picture element” • Each pixel represents one addressable dot of color on the screen

  22. Color • Preset colors (white, black, blue, red, etc.) • Hexadecimal code • First two characters for amount of red • Second two characters for amount of green • Last two characters for amount of blue • 00 is the weakest a color can get • FF is the strongest a color can get • Ex. black = #000000

  23. background • Image background • <BODY BACKGROUND = “background_image_file”> • Image does not need to be large because the browser tiles the image across and down the screen • Color background • <body bgcolor=“color”> • color is an indication of color as previously explained.

  24. Formatting Text With <FONT> • <FONT> allows to change font if browser allows it. <FONT> attributes: • COLOR="color" • SIZE • To make text larger, set SIZE = “+x” • To make text smaller, set SIZE = “-x” • x is the number of font point sizes • x is between 1 and 3 • FACE • Font of the text you are formatting • Be careful to use common fonts like Times, Arial, Courier and Helvetica • Browser will display default if unable to display specified font

  25. Special Characters • Inserted as an entity reference • Format can be &code; • Ex. &amp; • Insert an ampersand • Codes often abbreviated forms of the character • Codes can be in hex form • Ex. &#38; to insert an ampersand http://www.w3.org/TR/REC-html40/sgml/entities.html has the list

  26. Horizontal Rules • <HR> tag Inserts a line break directly below it • HR attributes: • WIDTH • Adjusts the width of the rule • Either a number (in pixels) or a percentage • SIZE • Determines the height of the horizontal rule • In pixels • ALIGN • Either left, right or center • NOSHADE • Eliminates default shading effect and displays horizontal rule as a solid-color bar

  27. Tables A table is a matrix formed by the intersection of a number of horizontal rows and vertical columns. Column 1 Column 2 Column 3 Row 1 Row 2 Row 3 Slides prepared by K.Clarck

  28. Cell Cell Cell Cell Cell Cell Cell Cell Cell Tables (continue…) The intersection of a column and row is called a cell. Cells in the same row or column are usually logically related in some way. Column 1 Column 2 Column 3 Row 1 Row 2 Row 3 Slides prepard by K.Clark

  29. Tables (continue…) Container <TABLE> … </TABLE> Attributes: BORDER= n – the border thickness in pixels WIDTH=x – width of the table or a cell within the table in pixels or relative size to the screen display (0% to 100%)

  30. Tables (continue…) • A table is formed row by row • To define a row <TR>…</TR> is used • Within a row table cells with data is determined by <TD>…</TD> or with headers by <TH>…</TH>

  31. Simple Table (example) <TABLE> <TR> <TH>Month</TH> <TH>Quantity</TH> </TR> <TR> <TD>January</TD> <TD>130</TD></TR> <TR> <TD>February</TD> <TD>125</TD> </TR> <TR> <TD>March</TD> <TD>135</TD> </TR> </TABLE>

  32. Tables (more complicated) • To span a cell across a few columns, use the attribute COLSPAN=n, where n is number of columns is used • To span a cell across a few rows use the attribute ROWSPAN=n, where n number of rows is used

  33. Cell Attributes • FONT – establishes the font of a cell • ALIGN – determines horizontal alignment of cell content, accept values: “left”, “center”, or “right” • VALIGN - determines vertical alignment of cell content, accept values: “top”, “middle”, “bottom”, or “base line”

  34. Purposes to use tables • To present tabular data • To create multicolumn text • To create captions for images • To create side bars Cells may contain various HTML containers: Images, Hyperlinks, Text, Objects, even Tables

  35. why standards matter • Avoiding Browser Lock-in • Maximize Access To Browsers • Maximize Accessibility • Enhance Interoperability • Enhance Performance • Facilitate Debugging • Facilitate Migration “Arguing that a resource is almost compliant is like describing someone as almost a virgin!”

  36. Components to add <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> </head> <body> </body> </html>

  37. use validator service • http://validator.w3.org/ • or do it on wotan, Thomas has a validator installed there.

  38. problem: Ampersand in URL • <!-- This is invalid! --> <a href="foo.cgi?chapter=1&section=2">...</a> • This example generates an error for "unknown entity section" because the "&" is assumed to begin an entity. • To avoid problems with both validators and browsers, always use &amp; in place of &: • <a href="foo.cgi?chapter=1&amp;section=2">...</a>

  39. problem: incorrect nesting • Elements in HTML cannot overlap each other. The following is invalid: • <B><I>Incorrect nesting</B></I> • The following is valid: • <B><I>Correct nesting</I></B>

  40. problem: casing in doctype • In a doctype, the formal public identifier--the quoted string that appears after the PUBLIC keyword--is case sensitive. A common error is to use the following: • <!doctype html public "-//w3c//dtd html 4.0 transitional//en"> • Transitional uses different case: • <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

  41. problem: name attribute • The HTML 4.0 Specification did not allow a NAME attribute for a FORM or IMG element. However, the HTML 4.01 Specification allows them Thus, you can now use the following document type declaration if you use those attributes: • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN” "http://www.w3.org/TR/html40/loose.dtd"> • Using a href as scr for an image is a stupid idea.

  42. Using special characters • Compose the document entirely with US-ASCII characters. • Represent other than ASCII characters using character references of the form &#number; where number is the code number of the character in ISO 10646 (Unicode) in decimal notation. • Configure things so that the Web server sends the document with the HTTP headerContent-type: text/html;charset=utf-8

  43. http://openlib.org/home/krichel Thank you for your attention!

More Related