Embed Size (px)
Citation preview
159.339
1
HTMLHypertext Markup Language
Client-side ProgrammingLecture
159.339
Topics for Discussion
What is an HTML?
Basic Document Structure
Document Head
Document Body
More Markups, Attributes
Common Pitfalls
Markup Validation
159.339
Client-side Internet Programming
What is transported by HTTP and what does the client do with it?
159.339
HTML
Hypertext Markup Language
159.339HTML
• Mark up to describe structure of document– Basically the markup is a suggestion to the
browser how to present the content.• Basic HTML is very simple, it shouldn’t
be used for sophisticated layout of a document.
• HTML tags + attributes define how content is displayed
159.339Basic Document Structure
• Document type declaration– Each standard conforming page should start with the
document type declaration• <!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.0//EN”>
• Document: <html> </html>– Contains Head and body
• Head Section: <head> </head>– This contains the HTML description of the page
• Body Section: <body> </body>– This is what will be rendered on the browser and contains
the content of the page
159.339Document Head
• <title> </title>– Required element, used by browsers and displayed on browser
windows and titles of book marked pages
• <base href=“….”>– Optional element, specifies where relative URLs are referenced
from
• <meta name=“…” content=“…”>– Optional element to specify information about the document, used
by search engines for indexing
• <meta http-equiv=“….” content=“…..”>– Optional element used by the server to generate matching HTTP
headers• e.g. Expires: Fri, 16 Dec 2004 23:59:59 GMT• Or Refresh 1800;
URL=http://www.massey.ac.nz/~nhreyes/159339/index.html
Do NOT use this! Non-standard!
159.339
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><HTML> <head> <title>My first HTML document</title> </ head > <body> <p> Hello world! </ body ></ HTML>
An HTML example
There’s something wrong here actually. We can validate our
HTML file using http://validator.w3.org/check
159.339Markup Validation
http://validator.w3.org/#validate_by_input
http://www.w3.org/QA/Tools/
159.339
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>My first HTML document</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head > <body> <p> Hello world! </p> </body ></html >
Corrected version
159.339Document Body
• <h1> </h1>, <h2> </h2>, etc– Large heading sizes
• <br>– Line Breaks
• <p> </p>– Paragraphs
• <pre> </pre>– Paragraphs with whitespace preserved, useful for formatted
code• <xmp> </xmp>
– Html intepretation is switched off, useful for displaying HTML• Comments
• <!-- this is a comment -->• Special Characters
– < , > , & , " ,
Take note, there’s a semicolon at the end of a special character
(e.g. & )
159.339More Markup
• <ul> <li>… </li><li> … </ul> – Unordered list
• <ol> <li>… </li> <li> … </ol>– Ordered lists
• <b> bold, <i> italic, <tt> fixed width
159.339Unordered/Ordered List
How it appears in a browserHTML Code
159.339
<html><body>
<h4>A nested List:</h4><ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>
</body></html>
Nested ListHow it appears in a browserHTML Code
159.339Inserting Images• <img src=“….”>
– Image is referenced by the url
• height– Dispayed height of image
• width– Dispayed width of image
• Alt– Alternate text for text only browsers of browsers with images
switched off (this property is required)
<img src="boat.gif" alt="Big Boat" />Examples:
<img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" >
159.339Links
• <a href=“….”>SomeText</a>– Provides a link to the given url
• Linking images– <a href=“….”> <img src=“….”> </a>
159.339Layout in Tables
• <table> </table>– Defines table
• <tr> </tr>– Defines table row
• align="center/right/justify"• bgcolor="color"• valign="top/middle/bottom/baseline"
• <td> </td>– Defines table data or table division
159.339
• HTML forms are used to select user input and pass data to a server.
• A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons, and more.
• A form can also contain select lists, textarea, fieldset, legend, and label elements.
• Add a form using the <form> tag:
Forms
<form>.input elements.</form>
159.339Forms
• <form method=“post” action=“ACT.php”> </form>– Used for submitting user data
• <input type=“TYPE” name=“..” value=“..”> </input>– Input elements– Type=submit: button to submit form– Type=text: text box, one-liner– Type=password: password input (displays asterix)– Type=reset: resets the form– Type=hidden: provides a hidden field (not displayed in
browser)– Type=file: provides a control for users to specify a file to
submit; browse button
159.339Examples of FormsRadio Button
159.339Examples of FormsText Field with Fieldset
<fieldset><legend> User Info </legend><form action="">First name: <input type="text" name="firstname" ><br>Last name: <input type="text" name="lastname" ></form></fieldset>
159.339Examples of FormsPassword
<form>Password: <input type="password" name="pwd" /></form>
159.339Addition <form> Elements
• Drop-down list <select name=“…..” multiple>
<option value=“…” > OPTION1</option> <option value=“…” selected=“selected”> OPTION2</option>
</select>
• Large input text area <textarea name=“…” cols=“..” rows=“..”> </textarea>
Specifies a default selection
159.339Examples of FormsDrop-down list with a pre-selected value
<form action=""><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected="selected">Fiat</option><option value="audi">Audi</option></select></form>
159.339List Boxes
• Radio Buttons– <input type=“radio” name=“g1” value=1 checked>– <input type=“radio” name=“g1” value=2>
• Select one of the options• Check Boxes, select many
– <input type=“checkbox” name=“c1” value=1 checked>– <input type=“checkbox” name=“c2” value=2>
• Select many of the options
159.339GET and POST form submission
• The Form tag specifies a method attribute– GET submits form data using the get method
• The form data is encoded into the URL and visible in most browsers
• There are practical limits to the size of encoded URIs received by servers
• Some characters are not allowed in the URI (only ASCII)– POST submits the form data using the post method
• Form Data is encoded using the Enctype specified, default encoding is url encoding
159.339
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title> Form Action settings </title></head><body><form action="form_action.asp" method="get">First name: <input type="text" name="FirstName" value="Napoleon" ><br>Last name: <input type="text" name="LastName" value="Reyes" ><br><input type="submit" value="Submit" ></form></body></html>
How it appears in a browserHTML Code
GET method inside a Form
159.339HTML Editors
• Text Editor – Manual editing, good for learning and experts
• XML editor– Source editing with tools for autocompletion using DTD
• Netscape Composer– Quick editing of HTML in both WYSIWYG and source format
• PHP Designer 2007 Personal Edition– Free and relatively compact
• Macromedia DreamWeaver– Fully integrated web development environment
159.339<body> attributes
• background="filename"– Background image
• bgcolor="color"– Background colour
• text="color"– Text colour
• link="color"– Text unvisited link colour
• alink="colour“• Active link colour
• vlink="colour"– Visited link colour
• See Reference for full lists of tags and attributes– http://www.webenalysis.com/html-tag-chart.asp
Do NOT set these attributes inside the body section as they have been deprecated already.
Use Styles instead.
159.339<table> attributes
• align="center/right"• background="image"• bgcolor="color"• border="value"• bordercolor="color"• cellpadding="value"• cellspacing="value"• summary="text"• width="value"
Units: 1 em = size of current font 1 px = 1 pixel
159.339<td> attributes
• align="center/right/justify"• bgcolor="color"• colspan="value"• height="value" • rowspan="value"• valign="top/middle/bottom/baseline"• width="value"
159.339
Some Common Pitfalls
159.339Ampersands (&'s) in URLs
Wrong
Correct way
<a href="http://www.microsoft.com/downloads/en/confirmation.aspx?familyId=941b3470-3ae9-4aee-8f43-c6bb74cd1466&displayLang=en"> PowerPoint Viewer 2007, Microsoft Compatibility Pack </a>
<a href="http://www.microsoft.com/downloads/en/confirmation.aspx?familyId=941b3470-3ae9-4aee-8f43-c6bb74cd1466&displayLang=en"> PowerPoint Viewer 2007, Microsoft Compatibility Pack </a>
With HTML, the browser translates "&" to "&" so
the Web server would only see "&" and not "&" in the query string of the request
159.339Missing a required sub-element of HEAD
If you receive the error "Missing a required sub-element of HEAD", check that you have included the TITLE element in the HEAD.
The TITLE element is required in all HTML documents.
159.339Using all lowercase letters in a DOCTYPE
Wrong
Correct way
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 a different case:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
Here the formal public identifier (FPI) is all lowercase. The validator does not recognize the document as HTML 4.0 Transitional since the expected FPI for HTML 4.0
159.339Uppercase letters in XHTML tags
Wrong
Correct way
In XHTML, unlike HTML, element and attribute names must be all lowercase.
For example, onMouseOver is an invalid attribute in XHTML,
Either is fine in HTML.
This requires the use of onmouseover instead.
159.339Incorrect Nesting of Elements
Wrong
Correct way
Elements in HTML cannot overlap each other. The following is invalid:
<b><i>Incorrect nesting</b></i>
In this example, the B element is intended to contain an I element. To be truly contained within the B element, the I element's end tag must occur before the B element's end tag. The following is valid:
<b><i>Correct nesting</i></b>
159.339Writing HTML in a SCRIPT Element
Wrong
Correct way
A common error (and the most common source of erroneous bug reports for the WDG HTML Validator) occurs when writing HTML tags within a SCRIPT element:
<script type="text/javascript"><!-- // This is an error! document.write("</P>");// --></script>
end tags are recognized within SCRIPT elements, but other kinds of markup--such as start tags and comments are not
159.339Writing HTML in a SCRIPT Element
Wrong
Correct way
<script type="text/javascript"><!-- // This is an error! document.write("</P>");// --></script>
Authors should avoid using strings such as "</P>" in their embedded scripts. In JavaScript, authors may use a backslash to prevent the string from being parsed as markup:
<script type="text/javascript"><!-- document.write("<\/P>");// --></script>
159.339Summary
Main points to remember:
• HTML is a standard format for writing hypertext documents
Exercises:
• Remind yourselves of the meaning of hypertext
• What “actions” can be performed when loading HTML pages.
• Look at real web sites. Ask yourselves: What’s happening at the client side? What’s happening at the server side?
159.339References
• Common HTML Problems:– http://www.htmlhelp.com/tools/validator/problems.html
#amp• HTML 4.01 Structure:
– http://www.w3.org/TR/html401/struct/global.html
159.339
42
Client-Side
HTMLHypertext Markup Language
Programming
