Embed Size (px)
Citation preview
LIS900C: HTML structural tags
Thomas Krichel and Jeremiah C. Trinidad
2003-05-13
feeling sloppy?
• Thomas Krichel is a very strict professor. • Therefore he wants to teach strict HTML.• But actually he will only check if the pages
validate, but not prescribe a particular DTD. • So you can also use the loose DTD
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html40/loose.dtd">
• I will teach the constraints of the strict DTD.
today
• I will do a list of tags that describe the structure of the page.
• I will only do the tags of the strict DTD• The loose DTD has more tags, but all the
functionality of these tags is best done with style sheets.
• Tomorrow Thomas Krichel will show you how to add presentational elements through style sheets.
• Thus, the pages created today will look rather boring because I will not cover fancy style.
today
• You can start from empty.html, the file that validates, and copy it to test.html
cp empty.html test.html
nano test.html• Then you can change test.html to try out the
tags as I discuss them here.
things I do not cover
• input forms• frames• mouse event attributes• clickable image maps • some fine points of table construction .
• at the end you will be happy that I did not…
the <html> tag
• appears after the DTD declaration• encloses the html contents• has required contents <head> and <body>.• the "dir" attribute says in which direction the
contents is rendered. The classic value is "ltr", "rtl" is also valid.
• the "lang" attribute says in which language the contents is. Use ISO 639 codes, e.g. lang="en-us"
the <head> tag
• <head> appears right after the <html> tag to give metadata about the document. It may have the "dir" and "lang" attributes as the html tag does.
• <head> must contain a <title> tag. It may also contain <style> and <link>, as well as– <base> to set a base URL– <meta> to give metadata– and some other stuff that I do not cover
the <title> tag (required)• appears in the <head>, defines the title of the
document• takes "dir" and "lang" attributes.• The title is used by the browser in a special
manner, e.g. as bookmark default title.• Google uses the title as anchor text to your web
page. A good title is therefore very important!• Bad ideas for titles
– section 1– home page
the <style> tag in <head>
• Appears in the <head> of the page.• It is used to give style sheet information for the
whole document. • The "type" attribute give what type of style it is,
usually it takes the value "text/css" for CSS.• Example
<style type="text/css">h1 {text-align: center}
</style>• More on CSS tomorrow!
the <link> tag in <head>
• appears in the <head> of the page.• create a link between the current page and
others• mainly used to create a link between the page
and a style sheet in a separate page as in <link rel="stylesheet" type="text/css" href="url"> where url is a URL details to be discussed tomorrow.
• Other usages are possible but rare.
other values of "rel" attribute
• Alternate Stylesheet • Start Next • Prev Contents • Index Glossary • Copyright Chapter • Section Subsection • Appendix Help • Bookmark
the <meta> tag in <head>
• This can be used to include metadata in the header.
• It has an attribute "name" for the property name• It has an attribute "content" for the property
values• There is no standard set of names and values. • Example:
<meta name="author" content="Thomas">
the <meta> tag in <head>
• There is also a special way to pass http headers to the client
• The "http-equiv" lets you set http variable and send them to the client.
• Example: <meta http-equiv="content-type"
content="text/html"> will tell the server to tell the browser that the
page is written in html.• more on this later, when we discuss http.
the <base> tag
• Can fix the baseline URL for all the relative links in the document.
• Within the confines of what we are working with, I do not see a reason for you to use it.
the <body> tag
• This encloses the contents of the page as opposed to its header.
• Strict validation requires it.• Strict validation limits the document to have only
one body. • It admits the "lang" and "dir" attributes, as well
as some others that we will discuss now. These fall into a group of attributes we call "usual suspect attributes"
usual suspects attributes: id
• This attribute assigns a name to an element. • This name must be unique in a document. In
the <body> element, this requirement is superfluous, of course.
• The id attribute has several roles in HTML, including
• As a style sheet selector.• As a target anchor for hypertext links.
usual suspects attributes: class
• The class attribute is a friend of the "id" attribute. • It assigns one or more class names to a tag; the
tag may be said to belong to these classes. A class name may be shared by several tags.
• It is like placing the tag instance into a set of tags.
• The class attribute has several roles in HTML, but it is most useful as a style sheet selector, when you want to assign style information to a set of tags.
Example for "class"
<p class="limerick">There was a young man from Peru<br>
Whose limericks stopped at line two<p>
<p> This is really a stupid limerick. Let us look at another<p>
<p class="limerick">There was a young from from Japan<br>
Whose limericks would never scan<br>
And when they asked why<br>
He said it is because I<br>
Try to put as many words into the last line as a possibly can</p>
usual suspects attributes: title
• The "title" attribute sets a title in use with the element.
• There is no prescribed way in with the title is being rendered by a user agent.
• Sometimes it is shown as a tool tip, i.e. something that flashes up when the mouse is rolled over it.
• This is not to say that the "title" attribute is for flashers only.
usual suspects attributes: style
• Use the "style" attribute to give style information to a particular element.
• This will be more discussed tomorrow, for the moment, you can relax and forget about it.
summary: usual suspects attributes
• To summarize, we have a group of usual suspects attributes
• These attributes can be used with almost all elements.
• The ones that we mention here are– dir – lang – id – class – title – style
• There are other attributes that can be universally used, called "event attributes", but they have to do with scripting, they are therefore not studied in this course.
the <div> and <p> tags
• The <div> tag allows you to set arbitrary block level divisions in your document.
• It admits the usual suspects attributes. • It also admits the "align" attribute. "align" sets
alignment of contents. It can take the value – "left" this is the default– "right"– "center"
• The <p> tag is like <div> but it signals the start and end of a paragraph.
The <span> tag
• This is another tag for arbitrary divisions, but it operates on inline content. This in contents that is put is lines horizontally, rather than block-level contents, that is put in vertically.
• Admits usual suspect attributes, but not "align" because it is put into the line with the contents next to it.
• More on that tomorrow.
header tags
• 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. • Results can vary significantly between user
agents.• All admit the usual suspects attributes
Now let us play
• Create a document with various headers• Include different alignments• Compare results in a couple of user agents.
• and then I will do images and multimedia
<hr> tag
• create a horizontal rule• admits the usual suspect attributes• other attributes have been deprecated, i.e. are
allowed in the loose DTD but not the strict one.
the <img> tag
• "src" attribute says where the image is• "alt" attribute give a text to show for user agents
that do not display image. It may be shown by the user agents as the user highlights the image. It is limited to 1024 characters.
• "longdesc" attribute is the same as "alt" but does not have the length limitation.
the <img> tag II
• "width" attribute gives the user agent a suggestion for the width of the image.
• "height" attribute gives the user agent a suggestion for the height of the image
• both can be expressed – in pixels, as a number– in %age of the current display width
• of course <img> supports the usual suspects attributes.
contents-based style tags• <abbr> encloses abbreviations• <acronym> encloses accronyms• <cite> encloses citations• <code> encloses computer code snippets• <dfn>encloses things being define• <em> encloses emphasized text• <kbd> encloses text typed on a keyboard• <samp> encloses literal samples• <strong> encloses strong text• <var> encloses variablesall admit the usual suspects attributes
physical style tags
• <b> encloses bold contents• <big>encloses big contents• <small> encloses small contents• <i> encloses italics contents• <sub> encloses subscripted contents• <sup> encloses superscripted contents• <tt> encloses typewriter-style contents
all admit the usual suspects attributes
the <br> tag
• is used to create a line break• which of the usual suspect attributes does it not
admit? • Instead it has the clear attribute that can take
the values "left", "right" and "center" and "all". This prevents textual content to float around other content.
• Admits usual suspects attributes.• It is not required to close the tag, but Thomas
Krichel recommends to write it as <br/>, this closes the tag.
the <pre> tag
• encloses contents that is to be rendered with the characters and line breaks just like in the source text. Markup is still allowed, but tags that do spacing should not be used, obviously.
• If you want to render HTML, quote– < as <– > as >– & as &
• It admits the usual suspects and a width attribute setting the number of characters per line.
<blockquote> and <q> tags
• <blockquote> quotes a paragraph• <q> make a short quote inside a paragraph• both admit a "cite" attribute that take the value of
a URL of the source of the quote.• The also admit the usual suspect attributes.
the <a> tag
• opens a hyperlink, contents of tag is the anchor text, it is limited to text only
• "href" attribute has the target URL• "hreflang" has the language of the target• "type" attribute gives the MIME-type of the target• Some other attributes for which we have no use
– coords –shape –accesskey –tabindex
• and of course, <a> admits the usual suspects attributes
the <a> tag II
• it admits the "rel" attributes to specify the relationship between the current document and the link target, as well as the "ref" attribute to specify the reverse.
• This is not currently well supported by the browsers.
linking within a document
• If you have the "id" attribute (one of the usual suspects) set to id on an element in a document at a URL URL, you can make the element the target of a link.
• You use the URL URL#id for this purpose.• The "name" attribute can also be used for this
purpose, instead of "id", but this is only allowed for historical reasons.
• If the document linked to is the current document, you don’t need to reference its URL.
list tags: <ol> and <ul>
• <ol> creates an ordered list.• <ul> ordered list• of course, they also support the usual suspects
attributes
the <li> tag
• It marks each item of a list.• it is usually not closed.• it admits the "type" attribute, so you can style
each item differently• it admits a "value" attribute, so you can give
each item a different numerical value in an ordered list. You can do that if you want to confuse the hell out of your users. The value of "value" must be a number, of course.
• <li> admits the usual suspects.
definition lists tags
• <dl> encloses a definition list• <dt> encloses the term that is being defined• <dd> encloses the definition• All admit the usual suspects.
Slides prepared by K.Clarck
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 prepard by K.Clark
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 3CellCellCell
CellCellCell
CellCellCell
the <table> tag
• encloses a table• The "summary" attribute provides a summary of
the table's purpose and structure for user agents rendering to non-visual media such as speech and Braille.
• The width attribute specifies the desired width of the entire table and is intended for visual user agents. When the value is a percentage value, the value is relative to the user agent's available horizontal space.
the frame attribute of <table>
• This attribute specifies which sides of the frame surrounding a table will be visible. Possible values: – void: No sides. This is the default value. – above: The top side only. – below: The bottom side only. – hsides: The top and bottom sides only. – vsides: The right and left sides only. – lhs: The left-hand side only. – rhs: The right-hand side only. – box: All four sides. – border: All four sides.
the "rules" attribute of <table>
• This attribute specifies which rules will appear between cells within a table. Possible values – none: No rules. This is the default value. – groups: Rules will appear between row groups only. – rows: Rules will appear between rows only. – cols: Rules will appear between columns only. – all: Rules will appear between all rows and columns
• We will not study groups in the remainder of the lecture
• We will now study the alignment attributes
alignment: the "align" attributeThe "align" attribute specifies the alignment of data
and the justification of text in a cell. Possible values: – left: Left-flush data/Left-justify text. This is the default
value for table data. – center: Center data/Center-justify text. This is the
default value for table headers. – right: Right-flush data/Right-justify text. – justify: Double-justify text. – char: Align text around a specific character. If a user
agent doesn't support character alignment, behavior in the presence of this value is unspecified.
alignment: the "valign" attribute
• The "valign" attribute specifies the vertical position of data within a cell. Possible values: – top: Cell data is flush with the top of the cell. – middle: Cell data is centered vertically within the cell.
This is the default value. – bottom: Cell data is flush with the bottom of the cell. – baseline: All cells in the same row as a cell whose
valign attribute has this value should have their textual data positioned so that the first text line occurs on a baseline common to all cells in the row. This constraint does not apply to subsequent text lines in these cells.
alignment: "char" and "charoff"• The "char" attribute specifies a single character
within a text fragment to act as an axis for alignment. The default value for this attribute is the decimal point character for the current language as set by the "lang" attribute.
• The "charoff" attribute specifies the offset to the first occurrence of the alignment character on each line. If a line doesn't include the alignment character, it should be horizontally shifted to end at the alignment position. The direction of offset is determined by the current text direction, as set by the "dir" attribute. (obscure)
alignment: the cell spacing
• The "cellspacing" attribute specifies how much space the user agent should leave between the left side of the table and the left-hand side of the leftmost column, the top of the table and the top side of the topmost row, and so on for the right and bottom of the table. The attribute also specifies the amount of space to leave between cells.
• The "cellpadding" attribute specifies the amount of space between the border of the cell and its contents. If the value of this attribute is a pixel length, all four margins should be this distance from the contents.
• These attributes can be set to pixels or percentages.
<tr>
• encloses a table row• it admits the alignment attributes• it admits the usual suspects attributes.
the <td> tag• encloses a cell in a table that is not a header cell• It admits the alignment and usual suspects
attributes• It has an "abbr" attribute for abbreviated
contents.• Its "rowspan" and "colspan" attributes say how
many rows or columns the cell spans. • It has a "headers" attribute specifies the list of
header cells that provide header information for the current data cell. The value of this attribute is a space-separated list of header cell "id" attribute values.
the <th> element• encloses a header cell• It admits the same attributes as <td>, but "headers" does
make no sense here. • Instead, we have a "scope" attribute that specifies the
set of data cells for which the current header cell provides header information. It can take the values– row: The current cell provides header information for the rest of
the row that contains it.– col: The current cell provides header information for the rest of
the column that contains it. – rowgroup: The header cell provides header information for the
rest of the row group that contains it. – colgroup: The header cell provides header information for the
rest of the column group that contains it.
more on tables…
• Yes, there are some fine points like the grouping and axis attributes.
• But for all but the most sophisticated tables, what we have covered is enough.
Special Characters
• Inserted as an entity reference– Format can be &code;
• Ex. & – Insert an ampersand
– Codes often abbreviated forms of the character– Codes can be in hex form
• Ex. & to insert an ampersand
http://www.w3.org/TR/REC-html40/sgml/entities.html has the list
http://openlib.org/home/krichel
Thank you for your attention!
