HTML_3DTables _2C Frames _2C Forms

Reviews

Shared by: Honey Singh

Categories

Tags

Stats

views:: 24
rating:: not rated
reviews:: 0
posted:: 11/12/2007
language:: English
pages:: 0

Introduction to Programming the WWW I CMSC 10100-1 Summer 2004 Lecture 5 Today’s Topics • HTML Tables (cont’d) • HTML Frames • HTML Forms 2 Review: Typical Table Sketch Code … … … …

Sample Table
headrow-col1	headrow-coln
row1-col1	row1-coln
rowm-col1	rowm-coln

sampletable.html 3 Tables 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 4 Tables 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 5 Web 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  Example: innertable.html • Note: better to control margins with CSS 6 One 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 7 Disadvantages of tables for layout • Complex layout requires complex tables (lots of headaches, room for error) • Complex tables can download, be rendered slowly • Scalability issues  Not all browsers can read tables 8 HTML Frames • HTML frames allow to display multiple HTML documents in a same browser window  The browser window is divided into multiple regions, or frames  Each frame displays a unique web page  Each frame is independent of the others 9 Frame Code Structure … … <body> use <a href=“no.html”>no-frame version</a> </body> 10 The 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 11 Setting up rows and columns • Specify a certain number of rows or • • • • columns of certain sizes by This makes a three columns of 100 pixels, 300 pixels, and the rest of the screen Example: frameseta.html Can also use percentages (n%) Note: use no more than one * in the list 12 The Frame Element • Each frame tag should contain a name attribute  The name attribute is used for targeting links (discuss later) • Each frame tag should contain a src • • • attribute that specifies a Web page Can shutdown resizing by adding noresize Can turn off scroll bars with scrolling=“no” frame is a standalone(self-closing) tag 13 Some more attributes • You may specify frameborder, framespacing, and border attributes • Only border seems to have a big effect • 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“) 14 Tabular layout • By setting both the cols and rows attributes, you create a table of frames • Frames are listed row by row • Example: framesetb.html 15 Nested framesets • Irregular layouts are useful (the equivalent of using rowspan or colspan in a table layout) • You can specify a instead of a to create nested framesets • Or, you can set the src for a frame to point to a frameset file • Example: framesetc.html 16 Linking in frames • Each frame may contain hyperlinks • Each hyperlink can be targeted to different frame or a new window • It is achieved by the target attribute of tag 17 The target attribute • Target link to a named frame  Example:  loads the source into a frame named myframe  useful when using frames for site navigation • HTML defined target values  _blank opens a new, unnamed window  _self opens the link in the current frame (default)  _top opens the link in the full, unframed browser window (throws you out of the frameset)  _parent opens the link in the immediate frameset parent (calling frame) • Example: framesetd1.html 18 The base tag • Rather than specifying the target for each link, you can add a line in head element  Example:  Sets default links to the frame named right  Can also set default link targets to be “_top” to leave the site • Example: framesetd2.html 19 Avoid Deep Linking • A deep link is any absolute link inside a • framed Web page that displays the destination page inside the frame system Deep linking should be avoided, why?  Copyright issues, might be illegal • 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 20 Frames 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 21 Art 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 22 Advantages 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 23 Problems 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 It is difficult to print the entire page 24 Frames 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 25 HTML Forms • HTML Forms are used to select different kinds of • user input, defined with tag Form contains form elements to allow the user to enter information      text fields textarea fields drop-down menus radio buttons checkboxes, etc • A Web page can contain one or multiple forms  Identified by id or name attribute 26 Attributes • action attribute  Gives the URL of the program(CGI) to receive and process the form’s data • CGI is Common Gateway Interface, a protocol to handle web data transmissions • How does CGI work? (next slide) • CGI programs usually kept in a cgi-bin/ directory • Usually triggered by clicking the submit button • action can also be a mailto: link  Syntax: action=mailto:XXX  Example: formeg.html • Example:  add.html using CGI programs in action 27 How Browsers and Web Applications Work with CGI 28 Tag Attributes (cont’d) • method attribute  Sets the HTTP method by which the browser sends the form data to the program, value can be GET or POST • HTTP protocol specification • Simple HTTP request and reply  GET method: • The form data gets appended to the request URL  POST method: • The form data is sent as part of the message body  Avoid GET method in favor of POST for security reasons • A long form content line attached to URL may crash the web server • The GET request line is plain ASCII text sent without encryption and will be saved in server logs • Example:  add.html using CGI programs in action 29 Tag Attributes (cont’d) • enctype attribute  Specify the content type used to submit the form to the server when the action method is POST  Default value application/x-www-form-urlencoded (need not specify)  Special cases: • Use “text/plain” if action=mailto:XXX • Use "multipart/form-data“ if the data sent is a file • the id, name attributes  Give the identification or name to a form  Useful for multiple forms in a same page  id is preferable 30 Tag • To define any one of a number of common form “controls”     Text fields (including password, hidden fields) multiple-choice lists Clickable images Submission buttons • Only type and name attribute required • No ending tag (no ) 31 Text Fields • single line of text  • Set type to password to mask text like a password • Set type to hidden to create a hidden field  size and maxlength attributes  value attributes to give default text • Example: formeg1.html 32 Multi-line Text Area • The

tag • Attributes
 cols  rows  wrap
• Values: Off,virtual(default),physical

• Example: formeg1.html
33

Check Boxes
• Check boxes for “check all that apply” questions
 <input type=checkbox name=XXX value=XXX>  Make sure name identical among a group of checkboxes  checked attribute

• When form is submitted, names and values of •
those checked boxes are sent Example: formeg1.html

34

Radio Buttons
• Similar as checkboxes, but only one in the
group may be selected
 <input type=radio name=XXX value=XXX>

• Example: formeg1.html

35

Multiple Choice Elements
• The <select> tag creates either pull-down •
menus or scrolling lists The <option> tag defines each item within a <select> tag <select> tag attributes
 size attribute
• Number of rows visible at the same time

•

 multiple attribute
• If set, allow multiple selections

 name attribute

• Example: formeg1.html
36

Action Buttons
• Some special types of form controls
 Act immediately  Effect can not be reversed  Affect the entire content of the form

37

Action Buttons (cont’d)
• What are they?
 Submit buttons
• <input type=submit name=XXX value=XXX>

 Reset buttons
• <input type=reset name=XXX value=XXX>

 Regular buttons
• <input type=button name=XXX value=XXX>

 image buttons (will send form content as submit button)
• <input type=image name=XXX src=XXX>

 *File buttons (need to deal with enctyple attribute)
• <input type=file name=XXX accept=“text/*”>

• Example: formeg1-bak.html

38

HTML Forms Resources
• HTML Forms tutorials
 http://www.webcom.com/html/tutor/forms/start .shtml  http://info.netmar.com/creating/forms.html

• HTML Forms and Input
 http://www.w3schools.com/html/html_forms.asp

39

</div><br />

<script type='text/javascript'>
  aster_cloud_id = '2422251';
  aster_cloud_format = '728x90';
</script>
<script type='text/javascript'>
  document.write(unescape("%3Cscript src='http://web.asterpix.com/media/js/searchlight.js' type='text/javascript'%3E%3C/script%3E"));
</script>

</div>
            </div>
        </div>
    </div>

<script type="text/javascript">
		getEl('viewer-area').style.width = getEl('doc-info').clientWidth + 'px';
	</script>
	
	<div class="rCol">
	    <div class="user-box-header">Shared by: <a href="/profile/honeytech">Honey Singh</a>
</div>
        <div class="user-box">
            <div class="user-info">
                <div class="owner-photo">
<div class="shadowContainer">
<div class="shadowWrap1">
<div class="shadowWrap2"><a href="/profile/honeytech" title="click here to view user's profile"><img src="http://content1.docstoc.com.s3.amazonaws.com/images/indexpagephoto/honeytech11224056.jpg" alt="user photo" /></a></div>
</div>
</div>
</div>

<div class="user-details">
                   <div class="owner-fullname">Honey Singh</div>

<div class="owner-occupation">WebDesigner</div>

<div class="owner-title">Co-Founder</div>

<div class="owner-company">Mediaredefined</div>

<div class="owner-website"><a href="http://www.honeytechblog.com" target="_blank" rel="nofollow" onclick="outbound('http://www.honeytechblog.com')">honeytechblog.com</a></div>

</div>
                <a class="contact" onclick="openContact()">contact me</a>
                <div id="contactPane">
                    <textarea id="txtContactMe" name="txtContactMe" class="txt-contactme" rows="4" cols="25" disabled="true">In order to send a message you need to be logged in.

About

Honey is a zealous web and graphics designer (currently working with media redefined ) having a creative and devouring gumption with an experience of over 3 years in Interactive Designing , Blogging and Web technologies.

Other docs by Honey Singh

What Mr.Buffett learned from Graham

Views: 1284 | Downloads: 134

Warren Buffett_27s Invisible Empire

Views: 1117 | Downloads: 90

Under Warren Buffett_27s Big Top

Views: 730 | Downloads: 47

The Warren Buffett You Don_27t Know

Views: 991 | Downloads: 103

The Best Advice I ever Got

Views: 6474 | Downloads: 373

9 investing secrets of Warren Buffett[2]

Views: 1128 | Downloads: 148

Views: 906 | Downloads: 44

Thinking in java 2nd edition

Views: 1278 | Downloads: 69

network programming

Views: 705 | Downloads: 37

Kevs-php-mysql[1]

Views: 12230 | Downloads: 65

Googles Backdoor

Views: 451 | Downloads: 19

Google Hacking 101

Views: 14424 | Downloads: 336

Google Hackers Guide

Views: 8462 | Downloads: 260

Views: 1577 | Downloads: 195

Beej_27s Guide to Network Programming

Views: 502 | Downloads: 19