Embed Size (px)
Citation preview
<meta> TagMetadata is information about data.The <meta> tag provides metadata about the
HTML document. Metadata will not be displayed on the page.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
Example
Paragraph level tags<Address> Tag.<Blockquote >Tag.<Pre> Tag.
Address
Block quote
Pre
4
TABLE
Tables:Tables are used on websites for two major purposes:
The obvious purpose of arranging information in a table
The less obvious - but more widely used - purpose of creating a page layout with the use of hidden tables.
Row 1 Cell 1
Row 1 Cell 2
Row 1 Cell 3
Row 1 Cell 4
Row 2 Cell 1
Row 2 Cell 2
Row 2 Cell 3
Row 2 Cell 4
Row 3 Cell 1
Row 3Cell 2
Row 3 Cell 3
Row 3Cell 4
Row 4Cell 1
Row 4Cell 2
Row 4Cell 3
Row 4Cell 4
6
<TABLE>• The table element starts with <TABLE>
tag & ends with a</TABLE> tag.• Elements that can appear between these
tags are as follows:Caption element containing the table’s description.
<CAPTION> table’s description </CAPTION>
The table row that creates a horizontal row of cells and contains table headings & table data.
<TR> <TH> This is heading </TH> <TD> This is data </TD> </TR>
The table data element to create each individual cell
<TD> This is cell 1 </TD><TD> This is cell 2 </TD>
The table heading element creates the heading cells.
<TH> This is heading </TH>
View Example
Example:<html><body>
<table><tr>
<td></td> </tr><tr><td></td> </tr></table>
</body></html>
8
Attributes of <TABLE>Alignment of the entire table <TABLE ALIGN=“value”>
value can be left, center or right
Width of the entire table <TABLE WIDTH=“number”>
<TABLE WIDTH=“percent”>
Table border <TABLE BORDER=“number”>
Spacing between each neighboring cell
<TABLE CELLSPACING=“5”>
Space between the cell’s content & the cell border
<TABLE CELLPADDING=“10”>
View Example
1
View Example
View Example
View Example
View Example
View Example
2
9
Attributes of <TABLE> (cont…)
Coloring table with BGCOLOR attribute
<TABLE BGCOLOR=“color name/color value”>
View Example
10
Difference between cell spacing & cell padding
TEXT
TEXT
TEXT
TEXT TEXT
TEXT TEXT
TEXTTEXT
CELLSPACES CELLSPADDING
11
COLSPAN View Example
<TD COLSPAN=“4”> text </TD>
12
ROWSPAN View Example
<TD ROWSPAN=“5”> text </TD>
13
IT IS YOUR TURN NOW
IT IS YOUR TURN NOW
14
12
3
4
1. Limegreen
2. Cornsilk 3. Pink 4. Cyan
HTML Frames
With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others.
The disadvantages of using frames are:The web developer must keep track of more
HTML documentsIt is difficult to print the entire page
The HTML frameset Element
The HTML frameset ElementThe frameset element holds one or more
frame elements. Each frame element can hold a separate document.
The frameset element states HOW MANY columns or rows there will be in the frameset, and HOW MUCH percentage/pixels of space will occupy each of them.
16
FRAMESET ElementFrames are created using the
FRAMESET tagThe attributes are:
RowsCols
FRAME ElementThe attributes of the FRAME element
include:namesrcnoresizescrolling
Example
<frameset cols="25%,75%"> <frame src="frame1.html" /> <frame src="frame2.html" /></frameset>
19
Vertical frameset
<frameset cols="25%,50%,25%">
<frame src="frame1.html" /> <frame src="frame2.htm" /> <frame src="frame3.htm" />
</frameset>
20
Horizontal frameset
<frameset rows="25%,50%,25%">
<frame src="frame1.htm" /> <frame src="frame2.htm" /> <frame src="frame3.htm" />
</frameset>
21
Frameset with noresize="noresize"
<frameset rows="50%,50%">
<frame noresize="noresize" src="frame1.html" />
<frame noresize="noresize" src="frame2.html" />
</frameset>
22
Inline frameHow to create an inline frame (a frame inside an HTML page).
<html><body>
<iframe src=“http://www.google.com"></iframe>
</body></html>
23
Nested frames
Frame attributes
Some more examples
