Lecture 1 and 2   Raul Valverde
World Wide Web (WWW)• Subset of the Internet• World wide collection of XHTML documents  called Web pages• Web pages are vi...
Web Browsers
Web Technologies• XHTML (Extensible Hypertext Markup  Language)• DHTML (Dynamic HTML with Java Script and  Ajax)• XML (Ext...
Introduction• XHTML (Extensible HyperText Markup  Language)    – markup language for creating web pages• Based on HTML (Hy...
XHTML• Extensible Hypertext Markup Language• Used to create Web pages• Formats the content on a Web page by using  tags to...
Creating Web Pages• Text Editor  – Simple, text-based editing  – User enters both content and HTML code  – Example: Notepa...
Creating Web Pages• XHTML Editor  – GUI Interface  – Generates XHTML code for the user  – Examples: Microsoft FrontPage   ...
XHTML Tags• Brackets enclose tag name   – <tag_name>• Tags usually come in pairs   – Opening tag <html>   – Closing tag </...
XHTML Tags• <html> </html>  Identifies an HTML document• <head> </head>  Identifies the document heading• <title> </title>...
The Basic Web Page<html><head><title> This is the title of the page</title><body> This is the body of the page</body></html>
XHTML Tags• <h1> </h1> through <h6> </h6>  Headings - h1 is the largest• <p> </p>  Identifies a paragraph• <hr> (no closin...
Create Paragraphs with              <p>,</p>…<body><p>This is the first sentence.</p><p>This is the second sentence.</p><p...
Formatting Text<b>This will be presented in bold.</b><i>This will be printed in italics.</i><h1>This is the largest headin...
1    <?xml version = "1.0" encoding = "utf-8"?>2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3       "http:...
Images• Formats:   – .gif – Can be transparent or animated.   – .jpg – Smaller file sizes for photographs.   – .png – Port...
Images• Inline Image  <img src=“filename”>  – filename is the name and extension of the image file  – filename may also in...
1    <?xml version = "1.0" encoding = "utf-8"?>2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"34        "htt...
Adding Hyperlinks to TextLink to a different page:<a href="home.htm" title="Home Page" >Home  page</a>Link to a different ...
Pieces of a URL Protocol                 Folderhttp://www.mysite.com/files/jsPage.ht  m        Web Server Name       File ...
Other Types of URLs• http – HyperText Transfer Protocol.  – http://www.againsttheclock.com• https – Secure HyperText Trans...
Creating Links• To other Web sites  – <a href=“#URL”>…</a>    URL is the address of the Web site on the Internet    Exampl...
1                                                                                           Linking to     <?xml version =...
1    <?xml version = "1.0" encoding = "utf-8"?>23     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"       "http...
1    <?xml version = "1.0" encoding = "utf-8"?>2                                                                          ...
29           <a href = "table1.html">30               <img src = "buttons/table.jpg" width = "65"31                  heigh...
1                                                                                        Internal     <?xml version = "1.0...
32                   <li>Around the clock news</li>33                   <li>Search Engines</li>34                   <li>Sh...
Internal hyperlinks to make pages more navigable (Part 3 of 3).29
The Basic Table…<table border="1" width="100%"><tr><th>First Column</th><th>Second   Column</th><th></tr><tr><td>Cell 1</t...
1    <?xml version = "1.0" encoding = "utf-8"?>2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3       "http:...
32           <!-- the <tfoot> section appears last in the table -->33           <!-- it formats the table footer -->3435  ...
Creating a basic table (Part 3 of              3).33
Tables (Cont.)     • You can merge data cells with the       rowspan and colspan attributes       – The values of these at...
1    <?xml version = "1.0" encoding = "utf-8"?>2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3       "http:...
28                 <!-- merge four columns -->29                 <th colspan = "4">30                      <h1>Camelid com...
Complex XHTML table (Part 3               of 3).37
Lists<ul> Unnumbered List:<li>Item1</li><li>Item1</li><li>Item1</li></ul><ol> Numbered List:<li>Item1</li><li>Item1</li><l...
1    <?xml version = "1.0" encoding = "utf-8"?>2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3       "http:...
Unordered list containing      hyperlinks (Part 2 of 2).40
1    <?xml version = "1.0" encoding = "utf-8"?>2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"34       "http...
29                      <!-- nested ordered list -->30                      <ol>                                     Creat...
Nested and ordered lists (Part 3            of 3).43
meta Elements• One way that search engines catalog pages is by  reading the meta element’s contents.   – The name attribut...
1    <?xml version = "1.0" encoding = "utf-8"?>2    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3      "http:/...
Frames
Frames• Uses  – Consistent header and navigation throughout the site  – Information does not need to be repeated on multip...
Frame Layout<html><head><title>Page Title</title></head><frameset>   <frame>   <frame></frameset></html>
Frames: Rows<html><head><title>Page Title</title></head><frameset rows=“33%,33%,*”>   <frame src=“filename1”>   <frame src...
Frames: Columns<html><head><title>Page Title</title></head><frameset cols=“33%,33%,*”>   <frame src=“filename1”>   <frame ...
Nesting Frames<frameset rows=“100,*”>   <frame src=“header.htm”>   <frameset cols=“25%,*”>      <frame src=“contents.htm”>...
<frame> Attributes• src=“filename”  specify the URL of the page to be loaded into the frame• scrolling=YES or NO  display/...
Frames and Hyperlinks• By default a link will open in the same frame that  contains the link• To open the link in a differ...
The Frameset                        <frameset cols="50%,50%">                        <frame src="winter.html"/>           ...
Control Frames• No resizing.… <frame src="menu.html" noresize="noresize"/>…• Scrolling.…<frame src="menu.html" scrolling="...
Targets…<frameset cols="50%,50%"><frame src="winter.html" name="winterframe"/><frameset cols="25%,*"><frame src="summer.ht...
Special Target Names• _blank  Load the page in a new browser window• _self  Load the page in the same frame that contains ...
<noframes> Tag<html><head><title>Page Title</title></head><frameset>    Frame definitions</frameset><noframes><body>    Pa...
Upcoming SlideShare
Loading in …5
×

Lecture1and2

1,137 views
1,020 views

Published on

Published in: Education, Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,137
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 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.
  • 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.
  • 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.
  • 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.
  • 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!
  • 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.
  • These are the structural tags that are used to define the major sections of the HTML document. The &lt;html&gt; tag indicates that the page is an HTML page and will be rendered by a Web browser. The &lt;head&gt; tag is used to define the head section of the HTML document. The head section can include the &lt;title&gt; tag, comments about the page, and other global information. The &lt;title&gt; 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 &lt;body&gt; tag is used to define the body of the HTML page. This includes the actual content that will be displayed in the browser window.
  • 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: &lt;h2 align=“center”&gt;…&lt;/H2&gt; 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: &lt; br &gt;&lt; br &gt;
  • Inline images are images that are placed within a Web page. The &lt;img&gt; tag does not have an align attribute. So, you will need to nest the &lt;img&gt; tag within a &lt;p&gt; tag to control the alignment. &lt;p align=“center”&gt;&lt;img src=“filename”&gt;&lt;/p&gt; Note that the &lt;img&gt; tag does not require a closing tag.
  • 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.
  • 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.
  • 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.
  • 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 &lt;body&gt; tags have been replaced by the &lt;frameset&gt; tags.
  • The &lt;frameset&gt; 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 &lt;frame&gt; tag to specify the course file that is loaded into each frame.
  • Columns function in the same manner as rows.
  • 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.
  • Attributes of the &lt;frame&gt; tag can be used to specify the file that is loaded into the frame, the appearance of the frame and its behavior.
  • You can also specify a target for all the links in a Web page. His is done by including &lt;base target=“target_name”&gt; in the head section of the HTML code. &lt;head&gt; &lt;title&gt;Page Title&lt;/title&gt; &lt;base target=“target_name”&gt; &lt;/head&gt;
  • These can be used within the &lt;a&gt; tag as values for the target attribute.
  • 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 &lt;noframes&gt; tags will be ignored. . If frames are not supported then everything will in he &lt;frameset&gt; tags will be ignored. However, the information between the body tags will be displayed on the page.
  • Lecture1and2

    1. 1. Lecture 1 and 2 Raul Valverde
    2. 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. 3. Web Browsers
    4. 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. 5. Introduction• XHTML (Extensible HyperText 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 formatting5 – Formatting is specified with Cascading Style Sheets
    6. 6. XHTML• Extensible Hypertext Markup Language• Used to create Web pages• Formats the content on a Web page by using tags to mark the text
    7. 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. 8. Creating Web Pages• XHTML Editor – GUI Interface – Generates XHTML code for the user – Examples: Microsoft FrontPage Macromedia Dreamweaver
    9. 9. XHTML Tags• Brackets enclose 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. 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. 11. The Basic Web Page<html><head><title> This is the title of the page</title><body> This is the body of the page</body></html>
    12. 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. 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. 14. Formatting Text<b>This will be 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. 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">45 <!-- Fig. 4.2: heading.html -->6 <!-- Heading elements h1 through h6. -->78 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> | Heading9 <title>Headings</title>1011 </head> Creates six headings, each with elements decreasing significance h1 through12 <body>13 <h1>Level 1 Heading</h1>14 <h2>Level 2 heading</h2>151617 <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. 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. 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. 18. 1 <?xml version = "1.0" encoding = "utf-8"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"34 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Images in XHTML5 <!-- Fig. 4.5: picture.html -->6 <!-- Images in XHTML files. --> Specifies the image7 <html xmlns = "http://www.w3.org/1999/xhtml"> file’s location89 <head> <title>Images</title> Specifies the image’s files.10 </head>11 width12 <body> Specifies the image’s1314 <p> <img src = "cpphtp6.jpg" width = "92" height = "120" height15 alt = "C++ How to Program book cover" /> Specifies text to display1617 <img src = "jhtp.jpg" width = "92" height = "120" alt = "Java How to Program book cover" /> if the image is18 </p> unavailable19 </body>20 </html> 18
    19. 19. Adding Hyperlinks to TextLink 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. 20. Pieces of a URL Protocol Folderhttp://www.mysite.com/files/jsPage.ht m Web Server Name File Name
    21. 21. Other Types of URLs• 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. 22. Creating Links• To other 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. 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 web5 <!-- Fig. 4.3: links.html -->67 <!-- Linking to other web pages. --> <html xmlns = "http://www.w3.org/1999/xhtml"> pages.8 <head>9 <title>Links</title> Creates anchor elements that10 </head>11 link to the URL specified in the12 <body> href attribute13 <h1>Here are my favorite sites</h1>14 <p><strong>Click a name to go to that page.</strong></p>1516 <!-- 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. 24. 1 <?xml version = "1.0" encoding = "utf-8"?>23 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Linking to an e-45 <!-- Fig. 4.4: contact.html --> mail address (Part67 <!-- 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 message10 </head>11 to the address12 <body> deitel@deitel.com with13 <p>14 My email address is the computer’s default e-mail1516 <a href = "mailto:deitel@deitel.com"> deitel@deitel.com program17 </a>18 . Click the address and your default email client19 will open an e-mail message and address it to me.20 </p>21 </body>22 </html> 24
    25. 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">45 <!-- 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 hyperlinked1112 <body> image13 <p>14 <a href = "links.html">15 <img src = "buttons/links.jpg" width = "65"16 height = "50" alt = "Links Page" />17 </a>1819 <a href = "list.html">20 <img src = "buttons/list.jpg" width = "65"21 height = "50" alt = "List Example Page" />22 </a>2324 <a href = "contact.html">25 <img src = "buttons/contact.jpg" width = "65"26 height = "50" alt = "Contact Page" />27 </a>28 25
    26. 26. 29 <a href = "table1.html">30 <img src = "buttons/table.jpg" width = "65"31 height = "50" alt = "Table Page" /> | Images as3233 </a> link anchors34 <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. 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 to45 <!-- Fig. 4.14: internal.html --> make pages67 <!-- Internal hyperlinks to make pages more navigable. --> <html xmlns = "http://www.w3.org/1999/xhtml"> more8 <head> Sets the id attribute navigable9 <title>Internal Links</title>10 </head> for the h1 element (Part 1 of 3).1112 <body>13 <!-- id attribute creates an internal hyperlink destination -->14 <h1 id = "features">The Best Features of the Internet</h1>1516 <!-- an internal links address is "#id" -->17 <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p>1819 <ul>20 <li>You can meet people from countries Creates a link to the21 around the world.</li> element in this document22 <li>You have access to new media as it becomes public:23 <ul> with id = bugs24 <li>New games</li>25 <li>New applications26 <ul>27 <li>For Business</li>28 <li>For Pleasure</li>29 </ul>30 </li>31 27
    28. 28. 32 <li>Around the clock news</li>33 <li>Search Engines</li>34 <li>Shopping</li> Internal35 <li>Programming hyperlinks to36 <ul>37 <li>XHTML</li> make pages more38 <li>Java</li> navigable (Part 239 <li>Dynamic HTML</li> of 3).40 <li>Scripts</li>41 <li>New languages</li>42 </ul>43 </li>44 </ul>45 </li>4647 <li>Links</li>48 <li>Keeping in touch with old friends</li> Sets the id attribute for49 <li>It is the technology of the future!</li> this h1 element50 </ul>5152 <!-- 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 in61 <li>Roman Tic</li>62 </ol> this document with id =63 </body> features64 </html> 28
    29. 29. Internal hyperlinks to make pages more navigable (Part 3 of 3).29
    30. 30. The Basic Table…<table border="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. 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 basic45 <!-- Fig. 4.10: table1.html --> table (Part 1 of67 <!-- Creating a basic table. --> <html xmlns = "http://www.w3.org/1999/xhtml"> Begins a new 3).8 <head> XHTML table9 <title>A simple XHTML table</title>10 </head> Sets the table’s11 border to be one pixel12 <body>13 wide14 <!-- the <table> tag opens a table --> Sets the table’s width15 <table border = "1" width = "40%"16 summary = "This table provides information about to 40% of the screen17 the price of fruit">1819 <!-- the <caption> tag summarizes the tables --> Describes the table’s20 <!-- contents (this helps the visually impaired) --> contents in the21 <caption><strong>Price of Fruit</strong></caption>22 summary attribute23 <!-- the <thead> section appears first in the table -->24 <!-- it formats the table header area --> Sets the text above25 <thead> the table26 <tr> <!-- <tr> inserts a table row -->27 <th>Fruit</th> <!-- insert a heading cell -->28 <th>Price</th> Creates a head29 </tr>30 </thead> element31 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. 32 <!-- the <tfoot> section appears last in the table -->33 <!-- it formats the table footer -->3435 <tfoot> <tr> Creates a foot section Creating a basic36 <th>Total</th> table (Part 2 of37 <th>$3.75</th>38 </tr> Creates table header 3).3940 </tfoot> cells at the bottom of41 <!-- all table content is enclosed --> the table42 <!-- within the <tbody> -->4344 <tbody> <tr> Creates a body45 section <td>Apple</td> <!-- insert a data cell -->46 <td>$0.25</td>47 </tr> Inserts a cell in the4849 <tr> <td>Orange</td> body of the table50 <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 table6263 </body>64 </html> 32
    33. 33. Creating a basic table (Part 3 of 3).33
    34. 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 cell34
    35. 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"> Complex45 <!-- Fig. 4.11: table2.html --> XHTML table6 (Part 1 of 3). <!-- Complex XHTML table. -->7 <html xmlns = "http://www.w3.org/1999/xhtml">8 <head>9 <title>Tables</title>10 </head>1112 <body>13 <h1>Table Example Page</h1>1415 <table border = "1">16 <caption>Here is a more complex sample table.</caption>1718 <thead>19 <!-- rowspans and colspans merge the specified -->20 <!-- number of cells vertically or horizontally -->21 <tr>22 <!-- merge two rows --> Makes the header cell23 <th rowspan = "2">24 <img src = "camel.gif" width = "205" span 2 rows25 height = "167" alt = "Picture of a camel" />26 </th>27 35
    36. 36. 28 <!-- merge four columns -->29 <th colspan = "4">30 <h1>Camelid comparison</h1> Makes the header cell3132 </th> <p>Approximate as of 6/2007</p> span 4 columns Complex XHTML3334 </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. 37. Complex XHTML table (Part 3 of 3).37
    38. 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. 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 list45 <!-- Fig. 4.8: links2.html --> containing hyperlinks6 <!-- 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 unordered1213 <body> <h1>Here are my favorite sites</h1> list14 <p><strong>Click on a name to go to that page.</strong></p>1516 <!-- create an unordered list --> Makes17 <ul>18 <!-- add four list items --> hyperlinked19 <li><a href = "http://www.deitel.com">Deitel</a></li> elements into20 <li><a href = "http://www.w3.org">W3C</a></li>21 <li><a href = "http://www.yahoo.com">Yahoo!</a></li> individual list22 <li><a href = "http://www.cnn.com">CNN</a></li> items23 </ul>24 </body>25 </html> 39
    40. 40. Unordered list containing hyperlinks (Part 2 of 2).40
    41. 41. 1 <?xml version = "1.0" encoding = "utf-8"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"34 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Nested and ordered5 <!-- 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>1112 <body>13 <h1>The Best Features of the Internet</h1>1415 <!-- create an unordered list -->16 <ul>17 <li>You can meet new people from countries around18 the world.</li>19 <li>20 You have access to new media as it becomes public:2122 <!-- 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 element26 <li>New games</li>27 <li>New applications28 41
    42. 42. 29 <!-- nested ordered list -->30 <ol> Creates an ordered31 <li>For business</li> list within a list Nested and ordered32 <li>For pleasure</li>33 </ol> element lists (Part 2 of 3).34 </li> <!-- ends line 27 new applications li --> Ends nested list3536 <li>Around the clock news</li>37 <li>Search engines</li> Ends the list38 <li>Shopping</li> element39 <li>Programming Another single4041 <!-- another nested ordered list --> unordered list42 <ol> element43 <li>XML</li> Creates an ordered44 <li>Java</li> list within this list45 <li>XHTML</li>46 <li>Scripts</li> element47 <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>5253 <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. 43. Nested and ordered lists (Part 3 of 3).43
    44. 44. meta Elements• One way 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. 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 elements5 <!-- Fig. 4.15: meta.html -->6 <!-- meta elements provide keywords and a description of a page. --> provide keywords and78 <html xmlns = "http://www.w3.org/1999/xhtml"> <head> a description of a9 <title>Welcome</title> page (Part 1 of 2).1011 <!-- <meta> tags provide search engines with -->12 <!-- information used to catalog a site -->13 <meta name = "keywords" content = "web page, design, Provides keywords1415 XHTML, tutorial, personal, help, index, form, contact, feedback, list, links, deitel" /> describing the page for16 <meta name = "description" content = "This website will a search engine17 help you learn the basics of XHTML and web page design1819 through the use of interactive examples and instruction." /> Provides the site’s description in20 </head> sentence form for a search2122 <body> <h1>Welcome to Our Website!</h1> engine2324 <p>We have designed this site to teach about the wonders25 of <strong><em>XHTML</em></strong>. <em>XHTML</em> is26 better equipped than <em>HTML</em> to represent complex27 data on the Internet. <em>XHTML</em> takes advantage of28 XML’s strict syntax to ensure well-formedness. Soon you29 will know about many of the great features of30 <em>XHTML.</em></p>3132 <p>Have Fun With the Site!</p>33 </body>34 </html>
    46. 46. Frames
    47. 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. 48. Frame Layout<html><head><title>Page Title</title></head><frameset> <frame> <frame></frameset></html>
    49. 49. Frames: Rows<html><head><title>Page Title</title></head><frameset rows=“33%,33%,*”> <frame src=“filename1”> <frame src=“filename2”> <frame src=“filename3”></frameset><html>
    50. 50. Frames: Columns<html><head><title>Page Title</title></head><frameset cols=“33%,33%,*”> <frame src=“filename1”> <frame src=“filename2”> <frame src=“filename3”></frameset><html>
    51. 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. 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. 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. 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. 55. Control Frames• No resizing.… <frame src="menu.html" noresize="noresize"/>…• Scrolling.…<frame src="menu.html" scrolling="no"/>…• Set margins, border.
    56. 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. 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. 58. <noframes> Tag<html><head><title>Page Title</title></head><frameset> Frame definitions</frameset><noframes><body> Page Layout</body></noframes><html>

    ×