1 / 42

HTML

Lecture. Client-side Programming. HTML. Hypertext Markup Language. What is an HTML?. Basic Document Structure. Topics for Discussion. Document Head. Document Body. More Markups, Attributes. Common Pitfalls. Markup Validation. Client-side Internet Programming.

heinz
Download Presentation

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. Lecture Client-side Programming HTML Hypertext Markup Language

  2. What is an HTML? Basic Document Structure Topics for Discussion Document Head Document Body More Markups, Attributes Common Pitfalls Markup Validation

  3. Client-side Internet Programming What is transported by HTTPand what does the client do with it?

  4. HTML Hypertext Markup Language

  5. HTML • Mark up to describe structure of document • Basically the markupis 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+ attributesdefine how content is displayed

  6. Basic 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

  7. Document 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!

  8. An HTML example <!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> There’s something wrong here actually. We can validate our HTML file using http://validator.w3.org/check

  9. Markup Validation http://validator.w3.org/#validate_by_input http://www.w3.org/QA/Tools/

  10. Corrected version <!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 >

  11. Document 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 intepretationis switched off, useful for displaying HTML • Comments • <!-- this is a comment --> • Special Characters • &lt; , &gt; , &amp; , &quot; , &nbsp; Take note, there’s a semicolon at the end of a special character (e.g. &amp; )

  12. More Markup • <ul> <li>… </li><li> … </ul> • Unordered list • <ol> <li>… </li> <li> … </ol> • Ordered lists • <b> bold, <i> italic, <tt> fixed width

  13. Unordered/Ordered List HTML Code How it appears in a browser

  14. Nested List HTML Code How it appears in a browser <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>

  15. Inserting Images • <imgsrc=“….”> • 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) Examples: <imgsrc="boat.gif" alt="Big Boat" /> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="Valid CSS!" >

  16. Links • <a href=“….”>SomeText</a> • Provides a link to the given url • Linking images • <a href=“….”> <imgsrc=“….”> </a>

  17. Layout 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

  18. Forms • 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: <form>.input elements.</form>

  19. Forms • <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

  20. Examples of Forms Radio Button

  21. Examples of Forms Text 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>

  22. Examples of Forms Password <form> Password: <input type="password" name="pwd" /> </form>

  23. Addition <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

  24. Examples of Forms Drop-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>

  25. List 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

  26. GET and POST form submission • The Form tag specifies a methodattribute • 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

  27. GET method inside a Form HTML Code How it appears in a browser <!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>

  28. HTML 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

  29. <body> attributes Do NOT set these attributes inside the body section as they have been deprecated already. Use Styles instead. • 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

  30. <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

  31. <td> attributes • align="center/right/justify" • bgcolor="color" • colspan="value" • height="value" • rowspan="value" • valign="top/middle/bottom/baseline" • width="value"

  32. Some Common Pitfalls

  33. Wrong Ampersands (&'s) in URLs <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 "&amp;" to "&" so the Web server would only see "&" and not "&amp;" in the query string of the request Correct way <a href="http://www.microsoft.com/downloads/en/confirmation.aspx?familyId=941b3470-3ae9-4aee-8f43-c6bb74cd1466&amp;displayLang=en"> PowerPoint Viewer 2007, Microsoft Compatibility Pack </a>

  34. Missing 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.

  35. Wrong 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"> Using all lowercase letters in a DOCTYPE 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 Correct way Transitional uses a different case: <!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">

  36. Wrong Uppercase letters in XHTML tags In XHTML, unlike HTML, element and attribute names must be all lowercase. For example, onMouseOveris an invalid attribute in XHTML, Either is fine in HTML. Correct way This requires the use of onmouseoverinstead.

  37. Wrong Incorrect Nesting of Elements Elements in HTML cannot overlap each other. The following is invalid: <b><i>Incorrect nesting</b></i> Correct way 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>

  38. Wrong 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> Writing HTML in a SCRIPT Element Correct way end tags are recognized within SCRIPT elements, but other kinds of markup--such as start tags and comments are not

  39. Wrong <script type="text/javascript"> <!-- // This is an error! document.write("</P>"); // --> </script> Writing HTML in a SCRIPT Element Correct way 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>

  40. Summary • 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?

  41. References • 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

  42. Client-Side Programming HTML Hypertext Markup Language

More Related