More Related Content
![HTML5: Smart Markup for Smarter Websites [Future of Web Apps, Las Vegas 2011]](https://cdn.slidesharecdn.com/ss_thumbnails/html5smartmarkupforsmarterwebsites-futureofwebappslasvegas2011-110628193453-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Lecture1and2
- 1. Lecture 1 and2 Raul Valverde
- 2. World Wide Web(WWW) • Subset of the Internet • World wide collection of XHTML documents called Web pages • Web pages are viewed using browsers • Web browser – Software application running on a user’s computer – Requests Web pages from Web servers and displays those Web pages on the user’s computer
- 3.
- 4. Web Technologies • XHTML(Extensible Hypertext Markup Language) • DHTML (Dynamic HTML with Java Script and Ajax) • XML (Extensible Markup Language) • Scripting languages (Php) • MySQL
- 5. Introduction • XHTML (ExtensibleHyperText Markup Language) – markup language for creating web pages • Based on HTML (HyperText Markup Language) – legacy technology of the World Wide Web Consortium (W3C) • XHTML 1.0 – Allows only a document’s content and structure to appear in a valid XHTML document, and not its formatting 5 – Formatting is specified with Cascading Style Sheets
- 6. XHTML • Extensible HypertextMarkup Language • Used to create Web pages • Formats the content on a Web page by using tags to mark the text
- 7. Creating Web Pages •Text Editor – Simple, text-based editing – User enters both content and HTML code – Example: Notepad • HTML Converters – Converts text from one format, such as a word document, to HTML code – Example: Microsoft Word
- 8. Creating Web Pages •XHTML Editor – GUI Interface – Generates XHTML code for the user – Examples: Microsoft FrontPage Macromedia Dreamweaver
- 9. XHTML Tags • Bracketsenclose tag name – <tag_name> • Tags usually come in pairs – Opening tag <html> – Closing tag </html> • Attributes define additional characteristics – <h3 align=center>My Heading</h3> • Tags can be nested inside other tags • Case insensitive
- 10. XHTML Tags • <html></html> Identifies an HTML document • <head> </head> Identifies the document heading • <title> </title> Used within the heading to specify a page title • <body> </body> Identifies the content that will be displayed on the page
- 11. The Basic WebPage <html> <head> <title> This is the title of the page</title> <body> This is the body of the page</body> </html>
- 12. XHTML Tags • <h1></h1> through <h6> </h6> Headings - h1 is the largest • <p> </p> Identifies a paragraph • <hr> (no closing tag) Horizontal rule - creates a horizontal line • <br> (no closing tag) Line break
- 13. Create Paragraphs with <p>,</p> …<body> <p>This is the first sentence.</p> <p>This is the second sentence.</p> <p>This is the third sentence. This is the fourth sentence. This is the fifth sentence.</p> </body>
- 14. Formatting Text <b>This willbe presented in bold.</b> <i>This will be printed in italics.</i> <h1>This is the largest heading.<h1> <h6>This is the smallest heading.</h6> <b><i>This will be in bold & italics.<i></b>
- 15. 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.2: heading.html --> 6 <!-- Heading elements h1 through h6. --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> | Heading 9 <title>Headings</title> 10 11 </head> Creates six headings, each with elements decreasing significance h1 through 12 <body> 13 <h1>Level 1 Heading</h1> 14 <h2>Level 2 heading</h2> 15 16 17 <h3>Level <h4>Level <h5>Level 3 4 5 heading</h3> heading</h4> heading</h5> h6. 18 <h6>Level 6 heading</h6> 19 </body> 20 </html> 15
- 16. Images • Formats: – .gif – Can be transparent or animated. – .jpg – Smaller file sizes for photographs. – .png – Portable Network Graphics. Example: <img src = "Logo.gif" alt="Logo" width ="80" height ="100"/ >
- 17. Images • Inline Image <img src=“filename”> – filename is the name and extension of the image file – filename may also include the path to the file as well – supports GIF, JPEG and PNG image file formats
- 18. 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Images in XHTML 5 <!-- Fig. 4.5: picture.html --> 6 <!-- Images in XHTML files. --> Specifies the image 7 <html xmlns = "http://www.w3.org/1999/xhtml"> file’s location 8 9 <head> <title>Images</title> Specifies the image’s files. 10 </head> 11 width 12 <body> Specifies the image’s 13 14 <p> <img src = "cpphtp6.jpg" width = "92" height = "120" height 15 alt = "C++ How to Program book cover" /> Specifies text to display 16 17 <img src = "jhtp.jpg" width = "92" height = "120" alt = "Java How to Program book cover" /> if the image is 18 </p> unavailable 19 </body> 20 </html> 18
- 19. Adding Hyperlinks toText Link to a different page: <a href="home.htm" title="Home Page" >Home page</a> Link to a different place on same page: <a href="#bottom"> bottom of page </a> links to …. <a name="bottom"> ending text </a>…
- 20. Pieces of aURL Protocol Folder http://www.mysite.com/files/jsPage.ht m Web Server Name File Name
- 21. Other Types ofURLs • http – HyperText Transfer Protocol. – http://www.againsttheclock.com • https – Secure HyperText Transfer Protocol. – https://www.melitta.com/default.html • File – Searches local hard drive only. – File:///HardDrive/desktop/headerpage.htm • ftp – File Transfer Protocol. – ftp://ftp4.netscape.com/netscape6/ntscfull.zip
- 22. Creating Links • Toother Web sites – <a href=“#URL”>…</a> URL is the address of the Web site on the Internet Example: <a href=“http://www.concordia.ca”>…</a> • To Internet resources such as email – <a href=mailto:email_address>…</a>
- 23. 1 Linking to <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 other web 5 <!-- Fig. 4.3: links.html --> 6 7 <!-- Linking to other web pages. --> <html xmlns = "http://www.w3.org/1999/xhtml"> pages. 8 <head> 9 <title>Links</title> Creates anchor elements that 10 </head> 11 link to the URL specified in the 12 <body> href attribute 13 <h1>Here are my favorite sites</h1> 14 <p><strong>Click a name to go to that page.</strong></p> 15 16 <!-- Create four text hyperlinks --> 17 <p><a href = "http://www.deitel.com">Deitel</a></p> 18 <p><a href = "http://www.prenhall.com">Prentice Hall</a></p> 19 <p><a href = "http://www.yahoo.com">Yahoo!</a></p> 20 <p><a href = "http://www.usatoday.com">USA Today</a></p> 21 </body> 22 </html> 23
- 24. 1 <?xml version = "1.0" encoding = "utf-8"?> 2 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Linking to an e- 4 5 <!-- Fig. 4.4: contact.html --> mail address (Part 6 7 <!-- Linking to an e-mail address. --> <html xmlns = "http://www.w3.org/1999/xhtml"> 1 of 2). 8 <head> 9 <title>Contact Page</title> Hyperlink that creates a message 10 </head> 11 to the address 12 <body> deitel@deitel.com with 13 <p> 14 My email address is the computer’s default e-mail 15 16 <a href = "mailto:deitel@deitel.com"> deitel@deitel.com program 17 </a> 18 . Click the address and your default email client 19 will open an e-mail message and address it to me. 20 </p> 21 </body> 22 </html> 24
- 25. 1 <?xml version = "1.0" encoding = "utf-8"?> 2 Images as link anchors <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 4.6: nav.html --> (Part 1 of 2). 6 <!-- Images as link anchors. --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>Navigation Bar</title> 10 </head> Creates a hyperlinked 11 12 <body> image 13 <p> 14 <a href = "links.html"> 15 <img src = "buttons/links.jpg" width = "65" 16 height = "50" alt = "Links Page" /> 17 </a> 18 19 <a href = "list.html"> 20 <img src = "buttons/list.jpg" width = "65" 21 height = "50" alt = "List Example Page" /> 22 </a> 23 24 <a href = "contact.html"> 25 <img src = "buttons/contact.jpg" width = "65" 26 height = "50" alt = "Contact Page" /> 27 </a> 28 25
- 26. 29 <a href = "table1.html"> 30 <img src = "buttons/table.jpg" width = "65" 31 height = "50" alt = "Table Page" /> | Images as 32 33 </a> link anchors 34 <a href = "form.html"> (Part 1 of 2). 35 <img src = "buttons/form.jpg" width = "65" 36 height = "50" alt = "Feedback Form" /> 37 </a> 38 </p> 39 </body> 40 </html> 26
- 27. 1 Internal <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> hyperlinks to 4 5 <!-- Fig. 4.14: internal.html --> make pages 6 7 <!-- Internal hyperlinks to make pages more navigable. --> <html xmlns = "http://www.w3.org/1999/xhtml"> more 8 <head> Sets the id attribute navigable 9 <title>Internal Links</title> 10 </head> for the h1 element (Part 1 of 3). 11 12 <body> 13 <!-- id attribute creates an internal hyperlink destination --> 14 <h1 id = "features">The Best Features of the Internet</h1> 15 16 <!-- an internal link's address is "#id" --> 17 <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p> 18 19 <ul> 20 <li>You can meet people from countries Creates a link to the 21 around the world.</li> element in this document 22 <li>You have access to new media as it becomes public: 23 <ul> with id = bugs 24 <li>New games</li> 25 <li>New applications 26 <ul> 27 <li>For Business</li> 28 <li>For Pleasure</li> 29 </ul> 30 </li> 31 27
- 28. 32 <li>Around the clock news</li> 33 <li>Search Engines</li> 34 <li>Shopping</li> Internal 35 <li>Programming hyperlinks to 36 <ul> 37 <li>XHTML</li> make pages more 38 <li>Java</li> navigable (Part 2 39 <li>Dynamic HTML</li> of 3). 40 <li>Scripts</li> 41 <li>New languages</li> 42 </ul> 43 </li> 44 </ul> 45 </li> 46 47 <li>Links</li> 48 <li>Keeping in touch with old friends</li> Sets the id attribute for 49 <li>It is the technology of the future!</li> this h1 element 50 </ul> 51 52 <!-- id attribute creates an internal hyperlink destination --> 53 <h1 id = "bugs">My 3 Favorite Bugs</h1> 54 <p> 55 <!-- internal hyperlink to features --> 56 <a href = "#features">Go to <em>Favorite Features</em></a> 57 </p> 58 <ol> 59 <li>Fire Fly</li> 60 <li>Gal Ant</li> Creates a link to the element in 61 <li>Roman Tic</li> 62 </ol> this document with id = 63 </body> features 64 </html> 28
- 29. Internal hyperlinks tomake pages more navigable (Part 3 of 3). 29
- 30. The Basic Table … <tableborder="1" width="100%"> <tr><th>First Column</th><th>Second Column</th><th></tr> <tr><td>Cell 1</td> <td>Cell 2</td></tr> <tr><td>Cell 3</td> <td>Cell 4</td></tr> </table>…
- 31. 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Creating a basic 4 5 <!-- Fig. 4.10: table1.html --> table (Part 1 of 6 7 <!-- Creating a basic table. --> <html xmlns = "http://www.w3.org/1999/xhtml"> Begins a new 3). 8 <head> XHTML table 9 <title>A simple XHTML table</title> 10 </head> Sets the table’s 11 border to be one pixel 12 <body> 13 wide 14 <!-- the <table> tag opens a table --> Sets the table’s width 15 <table border = "1" width = "40%" 16 summary = "This table provides information about to 40% of the screen 17 the price of fruit"> 18 19 <!-- the <caption> tag summarizes the table's --> Describes the table’s 20 <!-- contents (this helps the visually impaired) --> contents in the 21 <caption><strong>Price of Fruit</strong></caption> 22 summary attribute 23 <!-- the <thead> section appears first in the table --> 24 <!-- it formats the table header area --> Sets the text above 25 <thead> the table 26 <tr> <!-- <tr> inserts a table row --> 27 <th>Fruit</th> <!-- insert a heading cell --> 28 <th>Price</th> Creates a head 29 </tr> 30 </thead> element 31 Creates a table heading cell in the new table row Makes a new table Creates the next cell in the row 31 row
- 32. 32 <!-- the <tfoot> section appears last in the table --> 33 <!-- it formats the table footer --> 34 35 <tfoot> <tr> Creates a foot section Creating a basic 36 <th>Total</th> table (Part 2 of 37 <th>$3.75</th> 38 </tr> Creates table header 3). 39 40 </tfoot> cells at the bottom of 41 <!-- all table content is enclosed --> the table 42 <!-- within the <tbody> --> 43 44 <tbody> <tr> Creates a body 45 section <td>Apple</td> <!-- insert a data cell --> 46 <td>$0.25</td> 47 </tr> Inserts a cell in the 48 49 <tr> <td>Orange</td> body of the table 50 <td>$0.50</td> 51 </tr> 52 <tr> 53 <td>Banana</td> 54 <td>$1.00</td> 55 </tr> 56 <tr> 57 <td>Pineapple</td> 58 <td>$2.00</td> 59 </tr> 60 </tbody> 61 </table> Ends the table 62 63 </body> 64 </html> 32
- 33. Creating a basictable (Part 3 of 3). 33
- 34. Tables (Cont.) • You can merge data cells with the rowspan and colspan attributes – The values of these attributes specify the number of rows or columns occupied by the cell – Can be placed inside any data cell or table header cell 34
- 35. 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Complex 4 5 <!-- Fig. 4.11: table2.html --> XHTML table 6 (Part 1 of 3). <!-- Complex XHTML table. --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>Tables</title> 10 </head> 11 12 <body> 13 <h1>Table Example Page</h1> 14 15 <table border = "1"> 16 <caption>Here is a more complex sample table.</caption> 17 18 <thead> 19 <!-- rowspans and colspans merge the specified --> 20 <!-- number of cells vertically or horizontally --> 21 <tr> 22 <!-- merge two rows --> Makes the header cell 23 <th rowspan = "2"> 24 <img src = "camel.gif" width = "205" span 2 rows 25 height = "167" alt = "Picture of a camel" /> 26 </th> 27 35
- 36. 28 <!-- merge four columns --> 29 <th colspan = "4"> 30 <h1>Camelid comparison</h1> Makes the header cell 31 32 </th> <p>Approximate as of 6/2007</p> span 4 columns Complex XHTML 33 34 </tr> <tr> table (Part 2 of 3). 35 <th># of Humps</th> 36 <th>Indigenous region</th> 37 <th>Spits?</th> 38 <th>Produces Wool?</th> 39 </tr> 40 </thead> 41 <tbody> 42 <tr> 43 <th>Camels (bactrian)</th> 44 <td>2</td> 45 <td>Africa/Asia</td> 46 <td>Yes</td> 47 <td>Yes</td> 48 </tr> 49 <tr> 50 <th>Llamas</th> 51 <td>1</td> 52 <td>Andes Mountains</td> 53 <td>Yes</td> 54 <td>Yes</td> 55 </tr> 56 </tbody> 57 </table> 58 </body> 59 </html> 36
- 37. Complex XHTML table(Part 3 of 3). 37
- 38. Lists <ul> Unnumbered List: <li>Item1</li><li>Item1</li> <li>Item1</li> </ul> <ol>Numbered List: <li>Item1</li><li>Item1</li> <li>Item1</li> </ol>
- 39. 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Unordered list 4 5 <!-- Fig. 4.8: links2.html --> containing hyperlinks 6 <!-- Unordered list containing hyperlinks. --> (Part 1 of 2). 7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>Links</title> 10 </head> 11 Creates an unordered 12 13 <body> <h1>Here are my favorite sites</h1> list 14 <p><strong>Click on a name to go to that page.</strong></p> 15 16 <!-- create an unordered list --> Makes 17 <ul> 18 <!-- add four list items --> hyperlinked 19 <li><a href = "http://www.deitel.com">Deitel</a></li> elements into 20 <li><a href = "http://www.w3.org">W3C</a></li> 21 <li><a href = "http://www.yahoo.com">Yahoo!</a></li> individual list 22 <li><a href = "http://www.cnn.com">CNN</a></li> items 23 </ul> 24 </body> 25 </html> 39
- 40. Unordered list containing hyperlinks (Part 2 of 2). 40
- 41. 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 4 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Nested and ordered 5 <!-- Fig. 4.9: list.html --> lists (Part 1 of 3). 6 <!-- Nested and ordered lists. --> 7 <html xmlns = "http://www.w3.org/1999/xhtml"> 8 <head> 9 <title>Lists</title> 10 </head> 11 12 <body> 13 <h1>The Best Features of the Internet</h1> 14 15 <!-- create an unordered list --> 16 <ul> 17 <li>You can meet new people from countries around 18 the world.</li> 19 <li> 20 You have access to new media as it becomes public: 21 22 <!-- this starts a nested list, which uses a --> 23 <!-- modified bullet. The list ends when you --> 24 <!-- close the <ul> tag. --> 25 <ul> A single list element 26 <li>New games</li> 27 <li>New applications 28 41
- 42. 29 <!-- nested ordered list --> 30 <ol> Creates an ordered 31 <li>For business</li> list within a list Nested and ordered 32 <li>For pleasure</li> 33 </ol> element lists (Part 2 of 3). 34 </li> <!-- ends line 27 new applications li --> Ends nested list 35 36 <li>Around the clock news</li> 37 <li>Search engines</li> Ends the list 38 <li>Shopping</li> element 39 <li>Programming Another single 40 41 <!-- another nested ordered list --> unordered list 42 <ol> element 43 <li>XML</li> Creates an ordered 44 <li>Java</li> list within this list 45 <li>XHTML</li> 46 <li>Scripts</li> element 47 <li>New languages</li> 48 </ol> 49 </li> <!-- ends programming li of line 39 --> 50 </ul> <!-- ends the nested list of line 25 --> 51 </li> 52 53 <li>Links</li> 54 <li>Keeping in touch with old friends</li> 55 <li>It is the technology of the future!</li> 56 </ul> <!-- ends the unordered list of line 16 --> 57 </body> 58 </html> 42
- 43. Nested and orderedlists (Part 3 of 3). 43
- 44. meta Elements • Oneway that search engines catalog pages is by reading the meta element’s contents. – The name attribute identifies the type of meta element – The content attribute • Of a keywords meta element: provides search engines with a list of words that describe a page, which are compared with words in search requests • Of a description meta element: provides a three- to four-line description of a site in sentence form, used by search engines to catalog your site. This text is sometimes displayed as part of the search result
- 45. 1 <?xml version = "1.0" encoding = "utf-8"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 | meta elements 5 <!-- Fig. 4.15: meta.html --> 6 <!-- meta elements provide keywords and a description of a page. --> provide keywords and 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> a description of a 9 <title>Welcome</title> page (Part 1 of 2). 10 11 <!-- <meta> tags provide search engines with --> 12 <!-- information used to catalog a site --> 13 <meta name = "keywords" content = "web page, design, Provides keywords 14 15 XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, deitel" /> describing the page for 16 <meta name = "description" content = "This website will a search engine 17 help you learn the basics of XHTML and web page design 18 19 through the use of interactive examples and instruction." /> Provides the site’s description in 20 </head> sentence form for a search 21 22 <body> <h1>Welcome to Our Website!</h1> engine 23 24 <p>We have designed this site to teach about the wonders 25 of <strong><em>XHTML</em></strong>. <em>XHTML</em> is 26 better equipped than <em>HTML</em> to represent complex 27 data on the Internet. <em>XHTML</em> takes advantage of 28 XML’s strict syntax to ensure well-formedness. Soon you 29 will know about many of the great features of 30 <em>XHTML.</em></p> 31 32 <p>Have Fun With the Site!</p> 33 </body> 34 </html>
- 46.
- 47. Frames • Uses – Consistent header and navigation throughout the site – Information does not need to be repeated on multiple pages • Problems – Not all browsers support frames – May cause problems with search engine indexing – Users may not like them • Printing and bookmarking issues – May effect performance
- 48. Frame Layout <html> <head> <title>Page Title</title> </head> <frameset> <frame> <frame> </frameset> </html>
- 49. Frames: Rows <html> <head> <title>Page Title</title> </head> <framesetrows=“33%,33%,*”> <frame src=“filename1”> <frame src=“filename2”> <frame src=“filename3”> </frameset> <html>
- 50. Frames: Columns <html> <head> <title>Page Title</title> </head> <framesetcols=“33%,33%,*”> <frame src=“filename1”> <frame src=“filename2”> <frame src=“filename3”> </frameset> <html>
- 51. Nesting Frames <frameset rows=“100,*”> <frame src=“header.htm”> <frameset cols=“25%,*”> <frame src=“contents.htm”> <frame src=“main.htm”> </frameset> </frameset> Header/Logo Frame Main Frame Table of Contents Frame
- 52. <frame> Attributes • src=“filename” specify the URL of the page to be loaded into the frame • scrolling=YES or NO display/remove scrollbars • marginheight=“value” and marginwidth=“value” distance (in pixels) between the frame border and its contents • noresize frame can not be resized by the user • name=“frame_name” frame name to be used with hyperlinks
- 53. Frames and Hyperlinks •By default a link will open in the same frame that contains the link • To open the link in a different frame (target frame) – Give the target frame a name <frame src=“filename” name=“frame_name”> – Include the target attribute in the <a> tag of the hyperlink <a href=“URL” target=“frame_name”>
- 54. The Frameset <frameset cols="50%,50%"> <frame src="winter.html"/> <frame src="summer.html"/> </frameset> <frameset rows="100,*"> <frame src="winter.html"/> <frame src="summer.html"/> </frameset>
- 55. Control Frames • Noresizing. … <frame src="menu.html" noresize="noresize"/>… • Scrolling. …<frame src="menu.html" scrolling="no"/>… • Set margins, border.
- 56. Targets …<frameset cols="50%,50%"> <frame src="winter.html"name="winterframe"/> <frameset cols="25%,*"> <frame src="summer.html" name="summerframe"/> <frame src="spring.html" name="springframe"/> </frameset></frameset>… …the <a href=“”spring.html” target=“wintertime”>winter</a>!…
- 57. Special Target Names •_blank Load the page in a new browser window • _self Load the page in the same frame that contains the link • _parent Load the page in the parent frame of the frame with the hyperlink (for nested framesets) • _top Load the page in the full display area (replaces all frames)
- 58. <noframes> Tag <html> <head> <title>Page Title</title> </head> <frameset> Frame definitions </frameset> <noframes> <body> Page Layout </body> </noframes> <html>
Editor's Notes
- #3 It is important to make the distinction between the Internet and the World Wide Web – they are not the same. The World Wide Web is just one aspect of the Internet. Web pages are formatted with HTML (we’ll learn more about this in upcoming slides) which allows the documents to be linked to other documents. You can jump from one page to another by clicking on the links. Web browsers provide users with access to the Web. There are several types of Web browsers available. The two most popular browsers are Internet Explorer and Netscape Navigator. Each browser often has several different versions as well. Different browsers and even different versions of a browser will vary in their level of support for HTML and other associated technologies. Because of this varying level of support it is important to test the Web pages that you create on different browsers to make sure that they load properly.
- #4 A Web browser running on a user’s computer (the client) will generate a request for a Web page. This request is transmitted across the Internet to the Web server that hosts that Web page. When the Web server receives the request it will locate the specified file and send it back through the Internet to the Web browser application. Depending on the type of Web page the server may need to perform some processing before returning the file or it may be even more complicated involving other servers. The Web browser receives the Web page file, formats the contents according to the HTML tags and finally displays the page in the browser window.
- #7 HTML is the language used to create Web pages. HTML pages are text files that include: Content – the actual content that is displayed on a Web page Tags – used to format the content of the Web page You will be working with HTML throughout the course as you learn how to create Web pages.
- #8 You will be working with Notepad for many of the assignments. In fact you will use Notepad to create your first Web page this week. This does require a little more effort than some of the other methods however, you will have a much better understanding of HTML when you work directly with the tags.
- #9 HTML editors are another tool for creating Web pages and the do have several advantages – we will discuss the advantages and disadvantages next week. We will be using FrontPage in this course. However, I would caution against relying too much on the GUI interface – you still need to learn the tags!
- #10 Guidelines for working with HTML tags. HTML tags are enclosed in brackets as shown in this slide. Most (but not all) tags come in pairs. There is an opening tag and a closing tag. The tags are similar but the closing tag will include a / as in the example. Content between the opening and closing tags can be further formatted by using tag attributes. Each tag has its own set of attributes. We will learn many of these as we learn the different tags. Attributes and their values are given in the opening tag. Tags can be nested within other tags. HTML is case insensitive. You can use either uppercase, lowercase or a combination for tag names and their attributes. However, I do suggest that you use all lowercase as other standards (such as XHTML) are case sensitive.
- #11 These are the structural tags that are used to define the major sections of the HTML document. The <html> tag indicates that the page is an HTML page and will be rendered by a Web browser. The <head> tag is used to define the head section of the HTML document. The head section can include the <title> tag, comments about the page, and other global information. The <title> tag is used to specify the title of the page. This is the title that appears in the title bar of the Web browser. The <body> tag is used to define the body of the HTML page. This includes the actual content that will be displayed in the browser window.
- #13 Headings - h1 through h6 Used to create document headings Change the font size and bold the text between the opening and closing tags h1 is the largest and h6 is the smallest The align attribute can be used to control the horizontal alignment. The default alignment is left. Other options include center, justify and right. Example: <h2 align=“center”>…</H2> Paragraph – p Breaks up text and will insert a blank line before and after the enclosed text Horizontal rule – hr Creates a horizontal line to separate sections of the Web page Break – br Create a line break Two of these used together will create a blank line Example: < br >< br >
- #18 Inline images are images that are placed within a Web page. The <img> tag does not have an align attribute. So, you will need to nest the <img> tag within a <p> tag to control the alignment. <p align=“center”><img src=“filename”></p> Note that the <img> tag does not require a closing tag.
- #23 Mailto links When the hyperlink is clicked the default email client on the computer will be launched and a new message will be created. The email address specified by the HREF attribute will be placed in the To field of the email address. Mailto links will not work if a default email client is not set up on the browser’s computer.
- #47 In this example you can see how two different web pages are loaded into a single window. In this case the display area has been divided into two columns. The toolbar.html is loaded into the left frame and the products.html file is loaded into the right frame.
- #48 While there are some benefits to using frames, there are also some problems. Keep these in mind when deciding whether or not to use frames. Also, frames should be use to facilitate the navigation of the Web page and should not be use to control the layout of a single page – use a table instead.
- #49 Frameset (frames page) – this is the web page that contains multiple frames Frame – part of the frameset; loads a single page The frames page is a separate page in the Web site (.htm) – it defines the organization of the frames. Note that the <body> tags have been replaced by the <frameset> tags.
- #50 The <frameset> tags has two attributes: Rows and Cols Within a single frameset tag you use either the rows attribute or the cols attribute but not both. Row or column size can be specified using either a percentage (of the total display area) or the number of pixels. Pixels are absolute while percentages will adjust as the window is resized. The * designates whatever amount of space is left (can be used with either percentages or pixels). In this example there are three rows – the first two each take up 33% of the space and the last frame takes up the remaining amount (34%). For each row in the frameset you need to have a <frame> tag to specify the course file that is loaded into each frame.
- #51 Columns function in the same manner as rows.
- #52 More complicated frame structures can be created by nesting one frameset within another. In this case the outer frameset specifies two rows (the first is 100 pixels and the second row takes up the remaining space. ) The first row load a page called header.htm. The second row is another frameset – this frameset specifies two columns. So, the second row is broken up into two columns.
- #53 Attributes of the <frame> tag can be used to specify the file that is loaded into the frame, the appearance of the frame and its behavior.
- #54 You can also specify a target for all the links in a Web page. His is done by including <base target=“target_name”> in the head section of the HTML code. <head> <title>Page Title</title> <base target=“target_name”> </head>
- #58 These can be used within the <a> tag as values for the target attribute.
- #59 Not all browsers support frames – so, it is possible to provide additional code to be executed if frames are not supported. If frames are supported then the frameset will be loaded – everything between the <noframes> tags will be ignored. . If frames are not supported then everything will in he <frameset> tags will be ignored. However, the information between the body tags will be displayed on the page.