![Page 1: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/1.jpg)
Introduction to Programming the WWW I
Introduction to Programming the WWW I
CMSC 10100-01
Summer 2003
Lecture 5
![Page 2: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/2.jpg)
2
Topics TodayTopics Today
• Table (cont’d)• Frames
frameset frame nested framesets targeting links to frames navigation via frames deep linking pros and cons of frames
• Case study To dissect a complicated Web page
![Page 3: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/3.jpg)
3
ReminderReminder
• Homework1 due midnight today
• Register at course’s web if you have not done it I need your cs account information
• No class on July 4th (this Friday)
![Page 4: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/4.jpg)
4
Elements Used in TableElements Used in Table
• Table element <table></table>
• Table row element <tr></tr>
• Table data element <td></td>
• Table head element <th></th>
![Page 5: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/5.jpg)
5
Table StructureTable Structure
<table><caption>Sample Table</caption><tr>
<th>headrow-col1</th>…<th>headrow-coln</th>
</tr><tr>
<td>row1-col1</td>…<td>row1-coln</td>
</tr>…<tr>
<td>rowm-col1</td>…<td>rowm-coln</td>
</tr></table>
sampletable.html
![Page 6: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/6.jpg)
6
Table Element AttributesTable Element Attributes
• align values: left, center, right default: left
• bgcolor, background• border
values: n (an integer) default: 0
![Page 7: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/7.jpg)
7
Table Element Attributes(cont’d)Table Element Attributes(cont’d)
• cellpadding margin between cell content and cell border default: 2
• cellspacing space between adjacent cells default: 2
• Example: table_layout.html
![Page 8: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/8.jpg)
8
Table CellsTable Cells
• A table cell = a table data element • Tables cells can be independent from each other
background colors: bkcolor background patterns: background alignments: align fonts: using nested <font></font>
• Use case: a table with a single cell can frame an image or offset important text Example: singlecell-image.html
![Page 9: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/9.jpg)
9
Tables and TextTables and Text
• Text is hard to read against a busy background pattern, but you can lay a table containing text on top of a background pattern without sacrificing readability (just give the table a solid background color) Examples: table_text2.html vs. table_text1.html
• Tables can also be used to separate text into two columns (a cellpadding=“20” table attribute will put white space between the two columns) Example: table_2col.html
• More on tables for page layout later
![Page 10: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/10.jpg)
10
colspan and rowspancolspan and rowspan
• colspan and rowspan are table data attributes that are used to create irregular tables
• A table cell can be extended horizontally with the colspan attribute
• A table cell can be extended vertically with the rowspan attribute
• Example: table_rowspan.html table_colspan.html composite example (with both rowspan and colspan)
![Page 11: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/11.jpg)
11
Tables and GraphicsTables and Graphics
• Tables can be used to control a Web page layout for multiple images (or images mixed with text)
• Images of different sizes can be fit together in irregularly-shaped tables using cell-structure diagrams
• All tables have an underlying cell structure with a uniform number of table cells across each table row
![Page 12: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/12.jpg)
12
Rules for Table ElementRules for Table Element
• TD Rule 1:each row receives a TD element whenever the row has (1) a cell with no arrow or (2) a cell with the beginning of an arrow
• TD Rule 2:any TD tag corresponding to a cell that contains the beginning of a downward-pointing arrow receives a ROWSPAN attribute with a value equal to the length of the arrow
• TD Rule 3:any TD tag corresponding to a cell that contains the beginning of a rightward-pointing arrow receives a COLSPAN attribute with a value equal to the length of the arrow
![Page 13: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/13.jpg)
13
Web Page BordersWeb Page Borders
• Empty table columns can be used to create margins for text on a Web page
• Use a fixed width attribute (e.g. width=“50”) for the empty table data element
• Put an internal table inside
• Better to control margins with CSS (later)
![Page 14: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/14.jpg)
14
One vs. ManyOne vs. Many
• If you have one very large table, try to break it up into a sequence of smaller tables that can be stacked vertically on a Web page
• Browsers download the contents of an entire table before any of the table can be viewed
• Multiple tables will be displayed incrementally so the user will be able to see the first part of your page while the rest of the page is still downloading
![Page 15: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/15.jpg)
15
Disadvantages of tables for layout
Disadvantages of tables for layout
• Not all browsers can read tables
• Complex layout requires complex tables (lots of headaches, room for error)
• Complex tables can download, be rendered slowly
• Scalability issues
![Page 16: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/16.jpg)
16
FramesFrames
• Frames can be used to facilitate Web site navigation Good for organizing large Web sites
• Easy to construct
• However, frame-based approaches have disadvantages
![Page 17: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/17.jpg)
17
Frame Code StructureFrame Code Structure
</head><frameset rols=“” cols=“”><frame name=“frame1” src=“”>…<frame name=“framen” src=“”><noframes>
use <a href=“”>no-frame version</a> instead
</noframes> </frameset></html>
![Page 18: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/18.jpg)
18
The Frameset ElementThe Frameset Element
• The frameset tag pair should follow the head element, replacing the body element
• The cols and rows attributes are used to divide the Web page into frames
• Each frame is represented by a separate frame element
• Specify DOCTYPE as “HTML 4.01 Frameset” HTML 4.01 Frameset is a variant of HTML 4.01 Transitional
for documents that use frames.
![Page 19: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/19.jpg)
19
Setting up rows and columnsSetting up rows and columns
• Specify a certain number of rows or columns of certain sizes by<frameset cols=“100,300,*”>
• This makes a three columns of 100 pixels, 300 pixels, and the rest of the screen• Example: frameseta.html• Can also use percentages (n%)• Use no more than one * in the list
![Page 20: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/20.jpg)
20
The Frame ElementThe Frame Element
• Each frame tag should contain a name attribute
• The name attribute is used for targeting links (see later)
• Each frame tag should contain a src attribute that specifies a Web page
• Can turn off scroll bars with scrolling=“no”
• frame is a self-closing tag Other self-closing tags?
![Page 21: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/21.jpg)
21
Some more attributesSome more attributes
• You may specify frameborder, framespacing, and border attributes
• Only border seems to have a big effect
• HTML validator has trouble with frameborder
• See HTML p. 136, and W3C online for more information
• Examples: frameseta1.html (border="5" framespacing="5“)
frameseta2.html (frameborder="0" border="0" framespacing="0“)
![Page 22: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/22.jpg)
22
Tabular layoutTabular layout
• By setting both the cols and rows attribute, you create a table of frames
<frameset rows=“20%,*” cols=“*,50%”>
• Frames are listed row by row
• Example: framesetb.html
![Page 23: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/23.jpg)
23
Nested framesetsNested framesets
• Irregular layouts are useful (the equivalent of using rowspan or colspan in a table layout)
• You can specify a <frameset> instead of a <frame> to create nested framesets
• Or, you can set the src for a frame to point to a frameset file.
• Example: framesetc.html
![Page 24: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/24.jpg)
24
Linking in framesLinking in frames
• Target links to correct frame
• Avoid sucking in external sites
![Page 25: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/25.jpg)
25
The target attributeThe target attribute
• In a frameset, you can specify which frame you want to load a file in useful when using frames for site navigation
<a href=“foo.html” target=“myframe”>
• loads the source into myframe• target=“_top” clears the frameset• target=“popup” loads in a new window• Example: framesetd1.html
![Page 26: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/26.jpg)
26
The base tagThe base tag
• Rather than specifying the target for each link, you can add a line before the </header> such as
<base target=“right”>
• Sets default link
• Can also set default link targets to be “_top” to leave the site
![Page 27: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/27.jpg)
27
Deep LinkingDeep Linking
• A deep link is any absolute link inside a framed Web page that displays the destination page inside the frame system
• You can avoid deep links by sending them to a new browser window
• Any link can be routed to a new browser window with the target attribute
![Page 28: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/28.jpg)
28
Frames for Site NavigationFrames for Site Navigation
• A typical frame layout uses two nested frameset elements to divide a Web page into three frames:
1. The title frame runs across the top of the Web page
2. A navigational frame occupies a left-hand border under the title frame
3. A content frame occupies the remainder of the Web page
• Example: framesetd.html
![Page 29: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/29.jpg)
29
Art Galleries with FramesArt Galleries with Frames
• A three-frame layout works well for an online art gallery
• Fill the navigation frame with clickable thumbnail previews
• When a user clicks on a thumbnail preview, send the original image to the content frame
• Example: framesete.html
![Page 30: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/30.jpg)
30
Problems with FramesProblems with Frames
• Not all browsers support frames (try it on a palm!)
• It is difficult for others to link to content inside a frame
• It’s easy to create deep links by accident• Tougher to save sub-pages, messy with
browser cache• Complex layout awkward• Doesn’t control layout inside each frame
![Page 31: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/31.jpg)
31
Advantages of FramesAdvantages of Frames
• Frames support intuitive site layouts that are easy to navigate
• Site development efforts can focus on content and navigation as independent problems
• Scalability: write one navigation tool bar and stick it in a frame - only change one file to change navigation system
![Page 32: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/32.jpg)
32
Frames vs. tablesFrames vs. tables
• Tables are tougher to code (but this is fixable through scripting)
• Tables have wider (but not universal) support on browsers
• Frames are really quick to get going
![Page 33: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/33.jpg)
33
Case StudyCase Study
• What will we study? Modified version of course’s syllabus page URL:
http://www.classes.cs.uchicago.edu/classes/archive/2003/summer/10100-1/syllabus_bak.html
• Why will we study this page?
![Page 34: Introduction to Programming the WWW I CMSC 10100-01 Summer 2003 Lecture 5](https://reader033.vdocument.in/reader033/viewer/2022051416/56649ee65503460f94bf5b65/html5/thumbnails/34.jpg)
34
The Anatomy of Syllabus page
The Anatomy of Syllabus page
• How to analyze?