<TR>..</TR> is used within the TABLE element to define rows of the table.
<TD>..</TD> is used within the TR element to define actual cells (columns) of the table.
<TH>..</TH> - Works just like TD except that textual content is rendered in bold and center. csc318/dec 2013/nuraina daud csc318/dec 2013/nuraina daud Codes <table> <tr><th>ITEM </th></tr> <tr> <td> item 1</td></tr> <tr> <td> item 2</td></tr> </table>
csc318/dec 2013/nuraina daud bgcolor Color of back ground Ex: bgcolor="#99FF33 Bordercolor Color of border Ex: bordercolor=#000000 Border The thickness of border Ex: border=2 No border border=0
background/ bgimage Image of back ground Ex: background=cat.jpg Align Alignment of table Center, left, right Height Height of table In pixel or % Ex: height=130, height=50%
Width Width of table Pixel or % Ex: width=350 , width=50% Notes-Using % will cause the table to be resized based on the resolution of monitor Cellpadding Space between cells Ex: cellpadding=3 No space between cells cellpadding=0 Cellspacing Space between border of cells and items Ex: cellspacing=3 the number spaces
csc318/dec 2013/nuraina daud cellpadding
Defines the empty space around the cell content cellspacing
Defines the empty space between cells Tables have two important attributes: cell cell cell cell cell cell cell cell csc318/dec 2013/nuraina daud bgcolor Color of background Ex: bgcolor=#99CC00 Background Image of background Ex: background=cat.jpg Bordercolor Color of border Ex bordercolor=#000000
Width Width of item Pixel, % Ex width=230, width=50% Height Height of item Pixel, % Ex height=230, height=30% csc318/dec 2013/nuraina daud align Horizontal align Left,right,center Ex: align=center valign Vertical align Top, middle, baseline Ex: valign=top
csc318/dec 2013/nuraina daud Merge of 2 columns <table> <tr> <td colspan="2"> BANNER IS PLACED HERE </td> </tr> <tr> <td> MENU</td> <td>CONTENTS</td> </tr> </table> BANNER IS PLACED HERE MENU CONTENTS colspan = 2 Merge of 3 rows <table> <tr> <td rowspan=3> Column 1</td> <td>Row 1</td> </tr> <tr> <td>Row 2</td> </tr> <tr> <td>Row 3</td> </tr> </table> csc318/dec 2013/nuraina daud r o w s p a n
=
3
Using the table tag, create a webpage for your class timetable. Use different color for different codes (MATH). Merge row cells for break time Bold the text for day and time.
Save the page using the following name format <your short name>page.htm Ex: ainapage.htm, nikpage.htm csc318/dec 2013/nuraina daud Display more than one web pages at the same time. Must have at least 2 web pages One for the frame At least one page for the contents Advantage Fixed navigation bar can be provided Disadvantage Surfer cannot bookmark individual page Web site of other people or organization is nested inside the current webpage Not all web browser support frame
BORDER: Sets the border between frames. The value determines the thickness in pixels. BORDERCOLOR: Sets the color of the border. Takes color names or hexadecimal color codes as value. Applicable only if FRAMEBORDER is set. FRAMEBORDER: A '1' or 'yes' value displays a border while '0' or 'no' removes the border. The BORDERCOLOR attribute work only if this attribute is set to display a border.
FRAMESPACING: Places some space between the edges of the frame and its contents. Value has to be specified in pixels and this attribute is recognized only by Internet Explorer. COLS and ROWS: We've met COLS before. ROWS is similar and puts frames in horizontals rows instead of vertical columns. The values taken by these attributes can be a number (which determines the size in pixels) or percentages or wildcard *.
SRC: required attribute URL of a document to load in the frame. BORDERCOLOR: Defines color for the border. Both, color names and hexadecimal color codes are accepted values. FRAMEBORDER: Places a border. Values can be '1' or 'YES' that display a border or '0' or 'NO' which prevent border display. MARGINWIDTH: Defines the amount of space in pixels between the left and right hand sides of the frame and its contents. MARGINHEIGHT: Defines the amount of space in pixels between the top and bottom edges of the frame and its contents.
NAME: Specifies a name for the frame that can be used for easy reference. This is especially helpful when using scripting languages such as JavaScript or VBScipt. NORESIZE: Frames can be sized by the user if a border is present. By placing this attribute, you can prevent your visitors from resizing frames. This attribute takes no values. SCROLLING: 'YES' will display a scroll bar even though one is not required. 'NO' will prevent any scroll bars and 'AUTO' lets the browser to decide if the frame needs a scroll bar.
<FRAMESET ROWS="20%, *"> <FRAME SRC="topframe.html" NAME="top"> <FRAMESET COLS="50%, *"> <FRAME SRC="leftbot.html" NAME="left_bot"> <FRAME SRC="rightbot.html" NAME="right_bot"> </FRAMESET> </FRAMESET> _blank: Indicates a new window. _parent: Specifies the parent frame which contains the source link. _self: The new document is loaded in the same frame. _top: This indicates a new document window. It is a good way to break out of frames and load the document in the same window. frame-name: You can use this to specify in which frame the document should be loaded. RESOURCE WINDOW: This loads the document in a new browser window. This is same as _blank.
<A HREF="test.html" TARGET="_blank"> Loads test.html in a new browser window</A> <A HREF="test2.html" TARGET="_self"> Loads test2.html in this window</A> <A HREF="test2.html" TARGET=content"> Loads test2.html in frame named content</A>
Form starts with tag <form> .. </form>
<input /> Use to input data from user Non container element no close tag TYPE attribute determines how the input process is executed such as: TYPE=text TYPE=button TYPE=reset TYPE=checkbox TYPE=radio
Input short text <INPUT TYPE=text> Attributes Name : Name of field, important when more than one text fields are declared in a form. Size: specifies width (char) of the text field Value: provide initial value
<INPUT type=password> Works as text field except chars are secured. Attributes: Name : Name of field, important when more that one text fields are declared in a form. Size: specifies width (char) of the text field Value: provide initial value <html> <head> <title > Test Input element </title> </head> <body> <h2> Input element </h2> <form> Name: <INPUT TYPE=text VALUE="Enter your Name" SIZE=15> <br> password: <INPUT TYPE=password VALUE="Name" SIZE=15> </form> </body> </html>
Example: Choose gender : Male <INPUT TYPE=radio CHECKED > Female <INPUT TYPE=radio> Attributes Name: specifies name of objects / group Checked: radio button will be selected when loaded. Value: Assign a value to the radio button
Similar to radio button Attributes Name: specifies name of objects / group Checked: box will be selected when loaded. Value: Assign a value to the box
<html> <head> <title > Test Input element </title> </head> <body> <h2> Input element </h2> <form> Choose gender : <br> Male <INPUT TYPE=radio CHECKED > Female <INPUT TYPE=radio> <br><br> Choose your favorite singer <br> Siti Nurhaliza <input type="checkbox" name="checkbox" id="checkbox" /> Mawi <input type="checkbox" name="checkbox2" id="checkbox2" /> </form> </body> </html> 3 types Generic : <INPUT type=button> Allow user to defined event handler Reset: <INPUT type=reset> Elements of forms are revert to its original Submit: <INPUT type=submit> Clicking the button will call method submit() Attributes Value: provide text on the button
<html> <head> <title > Test Input element </title> </head> <body> <h2> Input element </h2> <form> <INPUT TYPE=button VALUE="PRESS TO SUBMIT INFO"> <br> <INPUT TYPE=reset VALUE="RESET"> </form> </body> </html>
Two tags are used; SELECT and OPTION Attributes for SELECT tag Name name of the menu Size use for more than 1 menu Attributes for OPTION tag Value not visible on the web but will be assigned to the value property of object Selected option will automatically selected when the page is loaded
<html> <head> <title > Test Input List Menu</title> </head> <body> <h2> Input element </h2> <form> Select Diploma <SELECT > <OPTION VALUE="DCS"> DCS <OPTION VALUE="DIA"> DIA <OPTION VALUE="DPA"> DPA </SELECT> </form> </body> </html>
Input multiple lines of text Attributes Cols specifies the width of the text area in characters Name name of the text area Rows specifies the height of the text area
<html> <head> <title > Test Input text area</title> </head> <body> <h2> Input element </h2> <form> Enter any comment or suggestion <TEXTAREA cols=30, rows=3> Enter any comment or suggestion. </TEXTAREA> </form> </body> </html>
39 40
Test Your Knowledge
Using Text, Image, List and Table
ALL THE BEST! You have created several web pages so far. Create a new page name <yourname>menu.htm which contain links to all the web pages.
Using frameset create a website from these webpages. The menu may be placed horizontally or vertically.