33
CSC 2720 Building Web Applications H ypert ext M arkup L anguage (HTML)
| Date post: | 29-Dec-2015 |
| Category: |
Documents |
| Upload: | evan-carpenter |
| View: | 224 times |
| Download: | 0 times |
CSC 2720Building Web Applications
Hypertext Markup Language (HTML)
Outlines Overview of HTML
HTML Basics
Encoding special characters
Representing hyperlinks, tables, lists, inline images
Overview of HTML Designed to represent the structural elements in a
hypertext document Tables, paragraphs, headings, lists, …
XHTML – HTML in strict XML syntax
A standard maintained by the World Wide Web Consortium (W3C)
Why should we learn HTML as a web application developer? Need to interweave scripts with HTML code
JSP PHP ASP.NET
Need to understand and modify code generated by web page authoring software (e.g.: Dreamweaver, Front Page)
Elements, Tags, Attributes
An element in a predefined building block of the document. An element is marked using tags in the document as
An element has a name. An element may have zero or more attributes (some are
required and some are optional)
<p align="right"> … </p>
Element nameAttribute Name
Attribute Value
A "p" element
Start/Opening tag End/Closing tag
HTML vs. XHTML Elements
A non-empty element must be enclosed using a pair of opening and closing tags.
An empty element, an element that does not enclose anything, is represented directly by a tag as
In XHTML, element and attribute names must be in lower case.
In XHTML, an attribute value must be enclosed by a pair of double quote characters.
<img src=“CUHKLogo.gif” />To indicate it is an empty element
HTML Document Template
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>Title</title></head><body><h1>Main Heading</h1>
<!–- Rest of page goes here -->
</body></html>
The head section of a document.One can place additional info about the document or scripting code here.
Everything enclosed within<!-- and --> is treated as a comment.
Specify which DTD this document is based on.
Start of an HTML document Goes on browser's title bar.
The content of the document goes into the body section.
Main HTML Elements1. DOCTYPE
• Specify which "version" of HTML/XHTML the current document adheres to
2. html• Appear exactly once.
3. head title element required Optional elements:
base, meta, script, style, link Appear exactly once
4. body• Appear exactly once (immediately after the head
element)
XHTML Examples<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> XHTML contents goes here …</html>
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> XHTML contents goes here …</html>
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> XHTML contents goes here …</html>
Strictly XHTML syntax
Allows HTML syntax
When "frameset" is used
HTML Character Entity References Some characters have special meaning in an HTML
documents and therefore must be represented as character entity references. A character entity reference can take two forms
&name; name is a predefined name &#N; where N is an integer number
Result Description Entity Name Entity Number
non-breaking space  
< less than < <
> greater than > >
& ampersand & "
" quotation mark " &
' apostrophe ' '
HTML Character Entity References
Result Description Entity Name Entity Number
¢ cent ¢ ¢
£ pound £ £
¥ RMB / yen ¥ ¥
© copyright © ©
® registered trademark ® ®
Reference: http://www.w3schools.com/html/html_entitiesref.asp(It also contain more examples of character entity references)
White Space Each newline/tab character is replaced by a space
character.
Consecutive white space characters, including tab, newline, and space characters, are collapsed into a single space character.
To output multiple spaces, use non-breaking space entity ( ) . For example,
A B
will produce three spaces between A and B
Exception: white space characters are preserved in the <pre> element.
Headings (h1, h2, h3, h4, h5, h6)
Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading. (example)
Paragraph (p) and Line Break (br) Paragraphs are defined with the <p> tag.
May have attribute align with possible value of "left", "right", "center", and "justify".
The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.
<p>This is paragraph.</p><p align="center">This is another paragraph.</p><p align="right">This is line one of paragraph 3<br/>and this is line two of paragram 3.</p>
Text Formatting Physical Character Styles
Bold (b), italics (i), teletype (tt), underline (u), subscript(sub), superscript (sup), small text (small), big text (big), deleted text (del), inserted text (ins)
Logical Character Styles Emphasized text (em), strong text(strong), computer code
(code), sample computer code text (samp), citation (cite), …
Prefromatted Text (pre) Preserve space and line break Use fixed-pitch font
Logical and Physical Character Styles
Example of Preformatted Text
<p>Welcome tothe new year party.</p>
<p><pre>Welcome tothe new yearparty.</pre></p>
HTML Link and Anchor (a) To create a link to a resource identifiable by a URL
href: specify a URL of the target resource target: specify where to display the target document
e.g.: <a href="index.htm" target="_blank">Home</a> Open the document "index.htm" in a new browser window
Can also be used to create an anchor within a document name: specify the anchor name
e.g.: <a name="chap1"></a><h2>Chapter 1</h2>
The above anchor can be referred to in a URL as<a href="http://host/file.html#chap1">Chapter 1</a>
Note: The role of "anchor" may be replaced by the "id" attribute in the future and any element can be treated as an anchor.
Absolute and Relative URLs Absolute URL
A complete URL beginning with http:// e.g., http://www.example.com/foo/index.html
Relative URL Interpreted as relative to the URL of the current document Suppose the URL of the current document is
http://www.example.com/foo/bar/index.html
path/index.html is interpreted ashttp://www.example.com/foo/bar/path/index.html
/index.html is interpreted ashttp://www.example.com/index.html
../index.html is interpreted ashttp://www.example.com/foo/index.html
Unordered List (ul) Attributes:
type: Possible values are "disc", "square", and "circle"
Use <li> to specify list items
<ul><li>Item 1</li><li>Item 2</li></ul>
<ul type="square"><li>Item 1</li><li>Item 2</li></ul>
<ul type="circle"><li>Item 1</li><li>Item 2</li></ul>
Ordered List (ol) Attributes:
type: Possible values are "A", "a", "I", "i", and "1" start: Indicate the starting number/letter of the first item
Use <li> to specify list items
<ol><li>Item 1</li><li>Item 2</li></ol>
<ol type="A" start="5"><li>Item 1</li><li>Item 2</li></ol>
<ol type="i" start="10"><li>Item 1</li><li>Item 2</li></ol>
More List Examples Lists can be nested (example)
List (with CSS) More list style types (example) Using images as bullets (example)
Definition List (example)
Tables (table) Define a table A table is divided into rows (with the <tr> tag), and each row
is divided into data cells (with the <td> tag)
<table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
Table's Attributes border (example)
This specifies the width in pixels of the border around the table This is in addition to the border around each cell (the "cellspacing"). The default is zero
cellspacing (example) This gives the space in pixels between adjacent cells. The default is usually about 3
cellpadding (example) Specifies the space between the cell walls and contents The default is usually about 1
Table's Attributes
width This specifies the width of the table
In pixels (<table width="250">), or As a percentage of the current browser window width (<table
width="75%">)
rules (example) Specifies the horizontal/vertical divider lines. Must be used in conjunction with the "border" attribute!
frame (example) Specifies which outer borders are drawn All four are drawn if this attribute is omitted
Table Row (tr) Define each row in the table Each row may contain table header (th) and table data (td)
elements
Attributes: align: Horizontal alignment
Values: "left", "center", "right", "justify", "char"
valign: Vertical alignment Values: "top", "middle", "bottom"
Table Header (th) and Table Data (td) Define a table cell Attributes
colspan Defines a heading or cell data entry that spans multiple columns
rowspan Defines a heading or cell data entry that spans multiple rows
align "left", "right", "center", "justify", "char" e.g.:, the following aligns entries on a decimal point
<td align="char" char=".">…</td> valign
"top", "bottom", "middle" width, height
Cell width and height in pixels only (no percentages officially allowed)
<h4>Cell that spans two columns:</h4><table border="1"><tr> <th>Name</th> <th colspan="2">Telephone</th></tr><tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td></tr></table>
<h4>Cell that spans two rows:</h4><table border="1"><tr> <th>First Name:</th> <td>Bill Gates</td></tr><tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td></tr><tr> <td>555 77 855</td></tr></table>
Embedded Images (img) To embed an image (jpg, gif, png) in a document. Example
<img src="SomeFile.gif" alt="My Dog" title="My Dog" width="400" height="300" />
Basic attributes: src: URL of the image (required) alt: Alternate text description of the image (technically required) title: text to appear when mouse cursor hovers above the image width, height: display the image in this dimension
Some advanced features: Aligning images w.r.t. the surrounding texts Let the image float to the left/right of a paragraph.
Embedded Images (img)
Some advanced features: Aligning images w.r.t. the surrounding texts Let the image float to the left/right of a
paragraph Create an image map with clickable regions
What is the significance of specifying the image width/height besides resizing the image? Without specifying image dimension
Browser may delay rendering the content (user have to wait longer)
May cause content in browser to rearranged each time an image is fully loaded.
Block-level and Inline Elements Block-level Elements
A block-level element takes up the full width available, with a new line before and after
e.g.: p, div, table, list, h1, …, h6, … div is a generic block element
Inline Elements An inline element takes up only as much width as it
needs, and does not force new lines e.g.: img, a, b, i, button, span, … span is a generic inline element
Note: The "block/inline" property can be modified using CSS.
META Elements (Example)<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>News Headlines</title> <meta name="keywords" content="News, International" />
<!-- Automatically reload the document every 3600 seconds --> <meta http-equiv="REFRESH" CONTENT="3600" /></head>
<body><h1 align="center">News Headlines</h1>
…</body></html>
Can also be used to redirecting the client to a different resource after a set period of time (example)
SummaryYou should Understand the basic syntax of HTML/XHTML
Understand the structure of a HTML encoded file
Recognize what character entity references are, including < > " &
Know how to create tables, links, lists, embedded images
