Download presentation
Presentation is loading. Please wait.
1
CSC 2720 Building Web Applications Hypertext Markup Language (HTML)
2
Outlines Overview of HTML HTML Basics Encoding special characters Representing hyperlinks, tables, lists, inline images
3
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)
4
Why should we learn HTML as a web application developer? Need to interweave scripts with HTML code JSP JSP PHP PHP ASP.NET ASP.NET Need to understand and modify code generated by web page authoring software (e.g.: Dreamweaver, Front Page)
5
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) … Element name Attribute Name Attribute Value A "p" element Start/Opening tag End/Closing tag
6
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. To indicate it is an empty element
7
HTML Document Template <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> Title Main Heading The head section of a document. One can place additional info about the document or scripting code here. Everything enclosed within 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.
8
Main HTML Elements 1.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)
9
XHTML Examples <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML contents goes here … <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> XHTML contents goes here … <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> XHTML contents goes here … Strictly XHTML syntax Allows HTML syntax When "frameset" is used
10
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 ResultDescriptionEntity NameEntity Number non-breaking space <less than<< >greater than>> &ersand&" "quotation mark"& 'apostrophe''
11
HTML Character Entity References ResultDescriptionEntity NameEntity Number ¢cent¢¢ £pound££ ¥RMB / yen¥¥ ©copyright©© ®registered trademark®® Reference: http://www.w3schools.com/html/html_entitiesref.asphttp://www.w3schools.com/html/html_entitiesref.asp (It also contain more examples of character entity references)
12
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 element.
13
Headings ( h1, h2, h3, h4, h5, h6 ) Headings are defined with the to tags. defines the largest heading. defines the smallest heading. (example)example
14
Paragraph ( p ) and Line Break ( br ) Paragraphs are defined with the tag. May have attribute align with possible value of "left", "right", "center", and "justify". The tag is used when you want to end a line, but don't want to start a new paragraph. The tag forces a line break wherever you place it. This is paragraph. This is another paragraph. This is line one of paragraph 3 and this is line two of paragram 3.
15
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
16
Logical and Physical Character Styles
17
Example of Preformatted Text Welcome to the new year party. Welcome to the new year party.
18
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.: Home 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.: Chapter 1 The above anchor can be referred to in a URL as Chapter 1 Note: The role of "anchor" may be replaced by the "id" attribute in the future and any element can be treated as an anchor.
19
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 as http://www.example.com/foo/bar/path/index.html /index.html is interpreted as http://www.example.com/index.html../index.html is interpreted as http://www.example.com/foo/index.html
20
Unordered List ( ul ) Attributes: type: Possible values are "disc", "square", and "circle" Use to specify list items Item 1 Item 2 Item 1 Item 2 Item 1 Item 2
21
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 to specify list items Item 1 Item 2 Item 1 Item 2 Item 1 Item 2
22
More List Examples Lists can be nested (example)example List (with CSS) More list style types (example)example Using images as bullets (example)example Definition List (example)example
23
Tables ( table ) Define a table A table is divided into rows (with the tag), and each row is divided into data cells (with the tag) row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
24
Table's Attributes border (example)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)example This gives the space in pixels between adjacent cells. The default is usually about 3 cellpadding (example)example Specifies the space between the cell walls and contents The default is usually about 1
25
Table's Attributes width This specifies the width of the table In pixels ( ), or As a percentage of the current browser window width ( ) rules (example)example Specifies the horizontal/vertical divider lines. Must be used in conjunction with the "border" attribute! frame (example)example Specifies which outer borders are drawn All four are drawn if this attribute is omitted
26
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"
27
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 … valign "top", "bottom", "middle" width, height Cell width and height in pixels only (no percentages officially allowed)
28
Cell that spans two columns: Name Telephone Bill Gates 555 77 854 555 77 855 Cell that spans two rows: First Name: Bill Gates Telephone: 555 77 854 555 77 855
29
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 Aligning images Let the image float to the left/right of a paragraph. Let the image float
30
Embedded Images (img) Some advanced features: Aligning images w.r.t. the surrounding texts Aligning images Let the image float to the left/right of a paragraph Let the image float Create an image map with clickable regions Create an image map 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.
31
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.
32
META Elements (Example) News Headlines News Headlines … Can also be used to redirecting the client to a different resource after a set period of time (example)example
33
Summary You 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
Similar presentations
