Embed Size (px)
Citation preview
CS-3432Electronic Commerce
Lecture – 7Sikandar Shujah Toorhttps://sites.google.com/site/uolcsecom
Title and Meta Tags• Title and meta tags are used inside the head element• <title> tag is used to write a descriptive title for the page
and is shown on the title bar or tab of main window• Metadata is data (information) about data• Meta tag provides metadata the HTML document and is
NOT displayed on the page• It is typically used to describe the page description,
keywords, author, last modified etc.,• The metadata can be used by the browser (how to display
contents or reload page), search engines or other web services
Title and Meta Tags<html><head><title>CS-3432 -- Introduction to e-commerce</title><meta name=“description” content=“E-commerce is all about doing
business on the internet”><Meta name=“keyword” content=“e-commerce, internet, medium,
communication, e-business”><meta name="author" content="Sikandar Toor"><meta charset="UTF-8"><meta http-equiv=“refresh” content=“30”></head><body>=== The rest of the page goes here ====</body></html>
Title and Meta Tags
Table Tag
• Used to display data in row and columns• Tables use following basic tag:• <Table>• </Table>
• <TR> (table row tag) and </TR> are used to create/add a row• <TD> (table data tag) and </TD> are used to
divide a row into number of columns to create cells• <TH> (table header tag) and </TH> labels each
column as a heading• <caption>Caption of the table</caption>
A basic 2 row, 2 column table<HTML><BODY><Table Border=1>
<TR><TD>Cell1</TD><TD>Cell2</TD>
</TR><TR>
<TD>Cell3</TD><TD>Cell4</TD>
</TR></Table></BODY></HTML>
Cell 1 Cell 2
Cell 3 Cell 4
A slightly different table<Table Border=1>
<TR><TD colspan=2>Cell1</TD>
</TR><TR>
<TD>Cell2</TD><TD>Cell3</TD>
</TR>
</Table>
Cell 1
Cell 2 Cell 3
Try coding…Try to code the following table design:
Cell 1
Cell 2
Cell 3
Example - COLSPAN<HTML><HEAD><TITLE>Spanning Text</TITLE></HEAD><BODY><TABLE BORDER="1" align="center"><CAPTION>Example - ROWSPAN</CAPTION><tr><td>First row</td><td>First row</td> </tr><TR><TD ROWSPAN="2">This line is stretched to two rows</TD><TD>Second Row</TD></TR><TR><TD>Third Row</TD> </TR><TR><TD>This does not</TD><TD>Fourth Row</TD> </TR></TABLE></BODY></HTML>
Column Span
Example - ROWSPAN<HTML><HEAD><TITLE>Spanning Text</TITLE></HEAD><BODY><TABLE BORDER="1" align="center"><CAPTION>Example - ROWSPAN</CAPTION><tr><td>First row</td><td>First row</td> </tr><TR><TD ROWSPAN="2">This line is stretched to two rows</TD><TD>Second Row</TD> </TR><TR><TD>Third Row</TD> </TR><TR><TD>This does not</TD><TD>Fourth Row</TD> </TR></TABLE></BODY></HTML>
Example - ROWSPAN
Table tag attributes• Border - <table border=“5”>• Width - <table width=“75%”>• Height - <table height=“100%”>• Cellpadding - <table cellpadding=“10”>• Cellspacing - <table cellspacing=“5”>• Color - <table bgcolor=“#cccccc”> or
<table background=“tablebg.gif”>
Example – Page with Left Margin<HTML><HEAD><TITLE>A Page with a Left-Hand Margin</TITLE></HEAD><BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0"
MARGINHEIGHT="0"><TABLE border="2" align="center" HEIGHT="100%"><TR><TD style="background-image:url('haboob.png')" WIDTH=“150"></TD><TD VALIGN="TOP"> This section contains the contents of your web
page.</TD></TR></TABLE></BODY></HTML>
Example - Margin
• <HTML>• <HEAD>• <TITLE>Table Attributes</TITLE>• </HEAD>• <BODY LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0"
MARGINHEIGHT="0">• <TABLE bgcolor="#fec230" cellpadding="20" cellspacing="20"
border="2" align="center" HEIGHT="100%">• <TR>• <TD style="background-image:url('haboob.png')" WIDTH="150"></TD>• <TD VALIGN="TOP"> The rest of the page goes here.</TD>• </TR>• </TABLE>• </BODY>• </HTML>
Table tag attributes
Table tag attributes
Attributes for <td> tag
• Width - <td width=“50%”>• Align - <td align=“center”>• Valign- <td valign=“top”>
