Belajar HTML

.. defines an HTML tables

.. is used within the TABLE element to define rows of the table.

.. is used within the TR element to define actual cells (columns) of the table.

.. - Works just like TD except that textual content is rendered in bold and center.csc318/dec 2013/nuraina daud

csc318/dec 2013/nuraina daud

csc318/dec 2013/nuraina daudCodes

ITEM item 1 item 2

Output


csc318/dec 2013/nuraina daudCodes

ITEM CELL item 1 cell 1

item 2 cell 2

Output


csc318/dec 2013/nuraina daudbgcolorColor of back groundEx: bgcolor="#99FF33BordercolorColor of borderEx: bordercolor=#000000BorderThe thickness of borderEx: border=2No border border=0

background/ bgimageImage of back groundEx: background=cat.jpgAlignAlignment of tableCenter, left, rightHeightHeight of tableIn pixel or %Ex: height=130, height=50%


WidthWidth of tablePixel or %Ex: width=350 , width=50%Notes-Using % will cause the table to be resized based on the resolution of monitorCellpaddingSpace between cellsEx: cellpadding=3No space between cells cellpadding=0CellspacingSpace between border of cells and itemsEx: cellspacing=3 the number spaces



cellpadding

Defines the empty space around the cell contentcellspacing

Defines the empty space between cellsTables have two important attributes:

csc318/dec 2013/nuraina daudbgcolorColor of backgroundEx: bgcolor=#99CC00BackgroundImage of backgroundEx: background=cat.jpgBordercolorColor of borderEx bordercolor=#000000

WidthWidth of itemPixel, %Ex width=230, width=50%HeightHeight of itemPixel, %Ex height=230, height=30%


csc318/dec 2013/nuraina daudalignHorizontal alignLeft,right,centerEx: align=centervalignVertical alignTop, middle, baselineEx: valign=top


csc318/dec 2013/nuraina daudMerge of 2 columns

BANNER IS PLACED HERE MENU CONTENTS

BANNER IS PLACED HEREMENUCONTENTScolspan = 2


Merge of 3 rows

Column 1 Row 1 Row 2 Row 3

csc318/dec 2013/nuraina daudrowspan = 3


Using the table tag, create a webpage for your class timetable. Use different color for different codes (MATH). Merge row cells for break timeBold the text for day and time.

Save the page using the following name format page.htmEx: ainapage.htm, nikpage.htmcsc318/dec 2013/nuraina daud


Display more than one web pages at the same time.Must have at least 2 web pagesOne for the frameAt least one page for the contentsAdvantageFixed navigation bar can be providedDisadvantageSurfer cannot bookmark individual pageWeb site of other people or organization is nested inside the current webpageNot 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 attributeURL 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.

_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.

Loads test.html in a new browser window Loads test2.html in this window

Form starts with tag

..

Use to input data from userNon container element no close tagTYPE attribute determines how the input process is executed such as:TYPE=textTYPE=buttonTYPE=resetTYPE=checkboxTYPE=radio

Input short text

AttributesName : 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

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 fieldValue: provide initial value

Test Input element

Input element

Name:

password:

Example:Choose gender :Male Female AttributesName: specifies name of objects / groupChecked: radio button will be selected when loaded.Value: Assign a value to the radio button

Similar to radio buttonAttributesName: specifies name of objects / groupChecked: box will be selected when loaded.Value: Assign a value to the box

Test Input element

Input element

Choose gender : Male Female

Choose your favorite singer Siti Nurhaliza Mawi

3 types Generic : Allow user to defined event handlerReset: Elements of forms are revert to its originalSubmit: Clicking the button will call method submit()Attributes Value: provide text on the button

Test Input element

Input element

Two tags are used; SELECT and OPTIONAttributes for SELECT tagName name of the menuSize use for more than 1 menuAttributes for OPTION tagValue not visible on the web but will be assigned to the value property of objectSelected option will automatically selected when the page is loaded

Test Input List Menu

Input element

Select Diploma

DCS DIA DPA

Input multiple lines of textAttributesCols specifies the width of the text area in charactersName name of the text areaRows specifies the height of the text area

Test Input text area

Input element

Enter any comment or suggestion Enterany comment or suggestion.

*

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 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.

*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.**##*07/16/96(c) 2007 National Academy for Software Development - http://academy.devbg.org. All rights reserved. Unauthorized copying or re-distribution is strictly prohibited.**##

Documents

Belajar HTML