1 / 46

Lecture 4: HTML

Lecture 4: HTML. Web Page Authoring The concept of markup language Introduction to HTML ( H yper T ext M arkup L anguage ) List Tagging Table Frame image map Form. 1. The Concept of Markup Language. Markup language originates from the book publishing industry.

hamish-houston
Download Presentation

Lecture 4: 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 4: HTML • Web Page Authoring • The concept of markup language • Introduction to HTML (HyperText Markup Language) • List • Tagging • Table • Frame • image map • Form 3: Web Page Authoring

  2. 1. The Concept of Markup Language • Markup language • originates from the book publishing industry. • allows us to embed formatting instructions in the document. • HTML: HyperText Markup Language • A universal publishing language of the World Wide Web • Additional supports in HTML 4: • more multimedia options • scripting languages • style sheets • more accessible to users with disabilities. 3: Web Page Authoring

  3. 1. HTML • Structure of an HTML document: • Head: contains the title of the page and other parameters that the browser will use. • Body: the actual contents of a page which includes the text and the tags. • The text is the actual information contained in a page. • The tags define the appearance of the document • Both the text and tags use only ASCII characters. 3: Web Page Authoring

  4. 2. HTML • Basic HTML document: <HTML> <HEAD> <TITLE> First Sample Document </TITLE> </HEAD> <BODY> The body of the first sample document ……………………………………….. </BODY> </HTML> 3: Web Page Authoring

  5. 2. HTML • HTML tag: • contained in pairs of angle brackets • e.g. <HTML></HTML> • usually comes in pairs • not case sensitive • can have a list of attributes with the format: 3: Web Page Authoring

  6. 2. HTML • HTML4 defines a total of 91 possible tags, each with anywhere from 2 to 25 possible attributes. • List of all HTML4 tags and its attributes: • http://wdvl.com/Authoring/HTML/4/Tags/ • Common tags: • <B> tag is replaced by <STRONG> • <I> tag is replaced by <EM> • <FONT> formats the size and color of text. 3: Web Page Authoring

  7. 2. HTML 3: Web Page Authoring

  8. 2.1 HTML: Unordered Lists <ul> <li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul> Links Keeping in touch with old friends It is the technology of the future! 3: Web Page Authoring

  9. 2.1 HTML: Ordered Lists New applications <ol type = "I"> <li>For business</li> <li>For pleasure</li> </ol> New applications I.For business II.For pleasure Programming <ol type = "a"> <li>XML</li> <li>Java</li> <li>XHTML</li> <li>Scripts</li> <li>New languages</li> </ol> Programming a.XML b.Java c.XHTML d.Scripts e.New languages 3: Web Page Authoring

  10. 2.1 HTML: Ordered Lists <!-- ol elements without a type attribute --> <!-- have a numeric sequence type (i.e., 1, 2, ...) --> <ol> <li>Harvey Deitel</li> <li>Bill Gates</li> <li>Michael Dell</li> </ol> 1.Harvey Deitel 2.Bill Gates 3.Michael Dell 3: Web Page Authoring

  11. 2.1 HTML: Nested Lists <ul> <li>New games</li> <li> New applications <!-- ordered nested list --> <ol type = "I"> <li>For business</li> <li>For pleasure</li> </ol> </li> </ul> <!-- ends the nested list> New games New applications I.For business II.For pleasure 3: Web Page Authoring

  12. 2.2 HTML:Tagging • Tagging specify more than just formatting, but can also be used to : • create hypertext links, e.g. <A HREF> tag. • assign named anchors to subsections that other document can point at, e.g. <A NAME> tag. • mark specific parts of a document to be executed by external programs - plug-ins • e.g. <IMG> tag the image files to be viewed by external image viewer • e.g. <APPLET> tag show that the contents are executable binary code or bytecode • give information about a document • e.g. to identify the author and version, e.g. <ADDRESS> tag. • interact with search engine, e.g. <META> tag. 3: Web Page Authoring

  13. 2.2 HTML:Tagging • META tag: • Not visible to users of the site • Should be placed inside header section • Contain two attributes that should always be used: • NAME identifies type of META tag • CONTENT provides info the search engine will catalog about your site • e.g. CONTENT of a META tag with NAME = “keywords” • Provides search engines with a list of words that describe key aspects of your site • Eg, <META NAME="keywords" CONTENT="index, stanford, Stanford, stanford websites, stanford web, stanford home page, university, college"> • e.g. CONTENT of a META tag with NAME = “description” • Should be 3 to 4 lines • Used by search engines to catalog and display your site • <META NAME="description" CONTENT="The Stanford University home page is a good place to start your search of Stanford University's web resources and websites."> 3: Web Page Authoring

  14. Tables Organize data into rows and columns All tags and text that apply to the table go inside <TABLE>…</TABLE> tags TABLE elements TABLE attributes BORDER lets you set the width of the table’s border in pixels ALIGN: left, right or center WIDTH: pixels (absolute) or a percentage CAPTION element is inserted directly above the table in the browser window THEAD element Header info For example, titles of table and column headers TR element Table row element used for formatting the cells of individual rows TBODY element Used for formatting and grouping purposes Smallest area of the table to format is data cells Two types of data cells In the header: <TH>…</TH> suitable for titles and column headings In the table body: <TD>…</TD> Aligned left by default 2.3 HTML Samples: Tables 3: Web Page Authoring

  15. 2.3 HTML Samples: Tables 3: Web Page Authoring

  16. 2.3 HTML Samples: Tables <table border = "1" width = "40%" summary = "This table provides information about the price of fruit"> <!-- the <caption> tag summarizes the table's --> <!-- contents (this helps the visually impaired) --> <caption><strong>Price of Fruit</strong></caption> <!-- the <thead> is the first section of a table --> <!-- it formats the table header area --> <thead> <tr> <!-- <tr> inserts a table row --> <th>Fruit</th> <!-- insert a heading cell --> <th>Price</th> </tr> </thead> 3: Web Page Authoring

  17. 2.3 HTML Samples: Tables <!-- all table content is enclosed --> <!-- within the <tbody> --> <tbody> <tr> <td>Apple</td> <!-- insert a data cell --> <td>$0.25</td> </tr> <tr> <td>Orange</td> <td>$0.50</td> </tr> <tr> <td>Banana</td> <td>$1.00</td> </tr> <tr> <td>Pineapple</td> <td>$2.00</td> </tr> </tbody> 3: Web Page Authoring

  18. 2.3 HTML Samples: Tables <!-- the <tfoot> is the last section of a table --> <!-- it formats the table footer --> <tfoot> <tr> <th>Total</th> <th>$3.75</th> </tr> </tfoot> 3: Web Page Authoring

  19. Frames Display more than one HTML file at a time If used properly, frames make your site more readable and usable <FRAMESET> tags Tell the browser the page contains frames Frame details contained inside <FRAMESET>…</FRAMESET> tags COLS or ROWS attribute gives the width or height of each frame In pixels or a percentage Not all browsers support frames Use the NOFRAMES element inside the FRAMESET Direct users to a non-framed version Provide links for downloading a frames-enabled browser Use of frames Do not use frames if you can accomplish same with tables or other, simpler HTML formatting 2.4 HTML Samples: Frame Set 3: Web Page Authoring

  20. FRAME elements Specify what files will make up frameset FRAME attributes: NAME - identifies specific frame, enabling hyperlinks to load in their intended frame SCROLLING attribute Set to “no” to prevent scroll bars NORESIZE attribute prevents user from resizing the frame SRC Gives the URL of the page that will be displayed in the specified frame TARGET attribute of A element Ex. <A HREF = “links.html” TARGET = “main”> TARGET = “_blank” loads page in a new blank browser window TARGET = “_self” loads page in the same window as anchor element TARGET = “_parent” loads page in the parent FRAMESET TARGET = _top” loads page in the full browser window 2.4 HTML Samples: Frame Set 3: Web Page Authoring

  21. 2.4 HTML Samples: Frame Set 3: Web Page Authoring

  22. 2.4 HTML Samples: Frame Set <frameset cols = "110,*"> <!-- frame elements specify which pages --> <!-- are loaded into a given frame --> <frame name = "leftframe" src = "nav.html" /> <frame name = "main" src = "main.html" /> <noframes> <p>This page uses frames, but your browser does not support them.</p> <p>Please, <a href = "nav.html">follow this link to browse our site without frames</a>.</p> </noframes> </frameset> 3: Web Page Authoring

  23. 2.4 HTML Samples: Main <h1>Welcome to Our Web Site!</h1> <p>We have designed this site to teach about the wonders of <strong><em>XHTML</em></strong>. <em>XHTML</em> is better equipped than <em>HTML</em> to represent complex data on the Internet. <em>XHTML</em> takes advantage of XML’s strict syntax to ensure well-formedness. Soon you will know about many of the great new features of <em>XHTML.</em></p> <p>Have Fun With the Site!</p> 3: Web Page Authoring

  24. 2.4 HTML Samples: Navigation <p> <a href = "links.html" target = "main"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /> </a><br /> <a href = "list.html" target = "main"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /> </a><br /> <a href = "contact.html" target = "main"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /> </a><br /> 3: Web Page Authoring

  25. 2.4 HTML Samples: Navigation <a href = "header.html" target = "main"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /> </a><br /> <a href = "table1.html" target = "main"> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /> </a><br /> <a href = "form.html" target = "main"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /> </a><br /> </p> 3: Web Page Authoring

  26. 2.4 HTML Samples: Email <p>My email address is <a href = "mailto:deitel@deitel.com"> deitel@deitel.com </a> . Click the address and your browser will open an e-mail message and address it to me. </p> 3: Web Page Authoring

  27. 2.4 HTML Samples: Links <h1>Here are my favorite sites</h1> <p><strong>Click a name to go to that page.</strong></p> <!-- create four text hyperlinks --> <p><a href = "http://www.deitel.com">Deitel</a></p> <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> <p><a href = "http://www.yahoo.com">Yahoo!</a></p> <p><a href = "http://www.usatoday.com">USA Today</a></p> 3: Web Page Authoring

  28. 2.4 HTML Samples: Lists Created using a nested list of unordered and ordered lists (See 2.1) 3: Web Page Authoring

  29. 2.4 HTML Samples: Headers <h1>Level 1 Header</h1> <h2>Level 2 header</h2> <h3>Level 3 header</h3> <h4>Level 4 header</h4> <h5>Level 5 header</h5> <h6>Level 6 header</h6> 3: Web Page Authoring

  30. 2.4 HTML Samples: Frame Set2 3: Web Page Authoring

  31. 2.4 HTML Samples: Frame Set2 • Nesting frames • Include the correct number of FRAME elements inside FRAMESET • Using nested FRAMESET elements • Makes page clearer and easier to debug <FRAMESET COLS ="110,*"> <FRAME NAME ="nav" SCROLLING ="no"SRC ="nav.html"> <FRAMESET ROWS ="175,*"> <FRAME NAME ="picture"SRC ="picture.html" NORESIZE> <FRAME NAME ="main"SRC = "main.html"> </FRAMESET> <NOFRAMES> <P>This page uses frames, but your browser doesn't support them.</P> <P>Get Internet Explorer 5 at the <A HREF ="nav.html">follow this link to browse our site without frames</A></P> </NOFRAMES> </FRAMESET> 3: Web Page Authoring

  32. Image Maps Designate certain sections of an image as hotspots Use hotspots as anchors for linking All elements of image map inside <MAP>…</MAP> tags Hotspots designated with AREA element AREA attributes: HREF sets the target for the link on that spot SHAPE and COORDS set the characteristics of the AREA ALT provides alternate textual description COORDS - pairs of numbers corresponding to x and y axes x axis extends horizontally from upper-left corner y axis extends vertically from upper-left corner Ex. <AREA HREF = “form.html” SHAPE = “rect” COORDS = “3, 122, 73, 143”> Rectangular hotspot with upper-left corner of rectangle at (3, 122) and lower-right corner at (73, 143) To use the image map with an IMG element Insert the USEMAP = “#name” attribute into the IMG element name - value of the NAME attribute in the MAP element 2.5 HTML Samples: Image Maps 3: Web Page Authoring

  33. 2.5 HTML Samples: Image Maps <MAP NAME ="picture"> <AREA HREF ="mailto:deitel@deitel.com"SHAPE = "poly" COORDS ="28, 22, 24, 68, 46, 114, 84, 111, 99, 56, 86, 13” ALT ="Email the Deitels"> </MAP> <IMG SRC ="deitel.gif"WIDTH ="200"HEIGHT ="144"BORDER ="1” ALT ="Harvey and Paul Deitel"USEMAP ="#picture"> 3: Web Page Authoring

  34. 2.6 HTML Samples: Forms • Forms • Collect information from people viewing your site • FORM element • METHOD attribute indicates the way the Web server will organize and send you form output • METHOD = “post” in a form that causes changes to server data • METHOD = “get” in a form that does not cause any changes in server data • Form data sent to server as an environment variable • Processed by scripts • ACTION attribute • Path to a script (a CGI script written in Perl, C or other languages) 3: Web Page Authoring

  35. 2.6 HTML Samples: Forms • INPUT element • Attributes: • TYPE (required) • Hidden inputs always have TYPE = “hidden” • Defines the usage of the INPUT element • TYPE = “text” inserts a one-line text box • NAME provides a unique identification for INPUT element • VALUE indicates the value that the INPUT element sends to the server upon submission • SIZE • For TYPE = “text”, specifies the width of the text input, measured in characters • MAXLENGTH • For TYPE = “text”, specifies the maximum number of characters that the text input will accept 3: Web Page Authoring

  36. 2.6 HTML Samples: Forms • INPUT element (con’t.) • Include textual identifier adjacent to INPUT element • 2 types of INPUT elements that should be inserted into every form: • TYPE = “submit” inserts a button that submits data to the server • VALUE attribute changes the text displayed on the button (default is “Submit”) • TYPE = “reset” inserts a button that clears all entries the user entered into the form • VALUE attribute changes the text displayed on the button (default is “Reset”) 3: Web Page Authoring

  37. 2.6 HTML Samples: Forms • INPUT element (cont.) • More advanced options: • TYPE = “password” • Inserts a text box where data displayed as asterisks • TYPE = “checkbox” creates a checkbox • Used individually or in groups • Each checkbox in a group should have same NAME • Make sure that the checkboxes within a group have different VALUE attribute values • Otherwise, browser will cannot distinguish between them • CHECKED attribute checks boxes initially • TYPE = “radio” • Radio buttons similar in function and usage to checkboxes • Only one radio button in a group can be selected • CHECKED attribute indicates which radio button is selected 3: Web Page Authoring

  38. 2.6 HTML Samples: Forms • TEXTAREA element • Inserts a scrollable text box into FORM • ROWS and COLS attributes specify the number of character rows and columns • SELECT element • Places a selectable list of items inside FORM • Include NAME attribute • To add an item to the list of items • Insert an OPTION element in the <SELECT>…</SELECT> tags • Closing OPTION tag optional • Change the number of list options visible • Including the SIZE = “x” attribute inside the <SELECT> tag • x number of options visible 3: Web Page Authoring

  39. 2.6 HTML Samples: Forms 3: Web Page Authoring

  40. 2.6 HTML Samples: Forms <html> <head> <title>Sample form to take user input in XHTML</title> <h1>Feedback Form </h1> </head> <body> <BR> Please fill out this form to help us improve our site. <BR> <!–- The codes for an example of a form are given in --> <!–- slides 41 through 43. However, please note that --> <!–- in this example, the code only generate a form --> <!–- that allows only allows users to enter data. --> <!–- Examples of CGI scripts to process form data --> <!–- will be taught in a later lecture. --> </html> 3: Web Page Authoring

  41. 2.6 HTML Samples: Forms <FORMMETHOD ="POST"ACTION ="/cgi-bin/formmail"> <!-- Hidden inputs are typical for this kind of CGI script: --> <!-- An email address to which to send the data, the subject --> <!-- line of the email and the URL to which the user is --> <!-- redirected after submitting the form --> <INPUT TYPE = "hidden"NAME = "recipient”VALUE =deitel@deitel.com/> <INPUT TYPE = "hidden" NAME ="subject”VALUE ="Feedback Form"/> <INPUT TYPE ="hidden"NAME ="redirect”VALUE ="main.html"/> <!-- NAME provides a unique identification for INPUT element --> <!-- TYPE = “text”inserts a one-line text box--> <P><STRONG>Name: </STRONG> <INPUT NAME ="name"TYPE ="text"SIZE = "25"/></P> <!-- <TEXTAREA> creates a textbox of the size given --> <P><STRONG>Comments:</STRONG> <TEXTAREA NAME ="comments" ROWS ="4"COLS ="36"></TEXTAREA></P> <!-- <INPUT TYPE = "password"> inserts a textbox whose --> <!-- readout will be in *** instead of regular characters --> <P><STRONG>Email Address:</STRONG> <INPUT NAME ="email"TYPE = "password"SIZE ="25"></P> 3: Web Page Authoring

  42. 2.6 HTML Samples: Forms <!-- <INPUT TYPE = "checkbox"> creates a checkbox --> <!--check boxes that belongs to a group are--> <!--assigned the same name, in this case “things” --> <P><STRONG>Things you liked:</STRONG><BR> Site design <INPUT NAME ="things"TYPE = "checkbox"VALUE ="Design"> Links <INPUT NAME ="things"TYPE ="checkbox"VALUE =”Links"> Ease of use <INPUT NAME ="things"TYPE ="checkbox"VALUE =”Ease"> </P> <!-- <INPUT TYPE = "radio"> creates a radio button. The --> <!-- difference between radio buttons and checkboxes is --> <!-- that only one radio button in a group can be selected --> <P><STRONG>How did you get to our site?:</STRONG><BR> Search engine <INPUT NAME ="how get to site"TYPE = "radio”VALUE = "search engine"CHECKED/> Links from another site <INPUT NAME ="how get to site"TYPE ="radio"VALUE ="link"/> </P> 3: Web Page Authoring

  43. 2.6 HTML Samples: Forms <!-- The <select> tag presents a drop down menu with --> <!-- choices indicated by the <option> tags --> <P><STRONG>Rate our site (1-10):</STRONG> <SELECT NAME ="rating"> <OPTION SELECTED>Amazing:-) <OPTION>10 <OPTION>9 <OPTION>8 <OPTION>7 <OPTION>6 <OPTION>5 <OPTION>4 <OPTION>3 <OPTION>2 <OPTION>1 <OPTION>The Pits:-( </SELECT></P> <!-- TYPE = “submit” inserts a button that submits data to the server --> <!-- TYPE = “reset” inserts a button that clears all entries the user entered into the form--> <INPUT TYPE ="submit"VALUE ="Submit Your Entries"/> <INPUT TYPE ="reset"VALUE = "Clear Your Entries"/> </FORM> 3: Web Page Authoring

  44. 3. Web Authoring tools • Graphics-based HTML editing programs • Should only be used as aids • None of them creates perfect HTML code. • Often disrupt indentation • Often insert unnecessary tags • No substitute for in-depth knowledge of HTML • you may need to amend the HTML yourself. • Sometimes it is not easy to make changes to HTML files produced by these editing programs. 3: Web Page Authoring

  45. 3. Web Authoring tools • Free tools: • Microsoft FrontPage Express • comes free with certain versions of Internet Explorer. • Netscape Composer • comes with Netscape v4.x or later. • Commercial tools: • Macromedia Dreamweaver (will be introduced by the Tutors) • available on both PC and Mac . 3: Web Page Authoring

  46. Further Readings • Note: This topic is designed with the objective of providing an introduction toHTML. • Advanced features of HTML are beyond the scope of this course and will NOT be taught or discussed. Students who wish to invest more time on studying advanced features and topics of HTML are referred to the following resources: • Deitel Chapter 4-5. • Textbook Chapter 23. • http://wdvl.com/Authoring/HTML/4/Tags/ 3: Web Page Authoring

More Related