CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .

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

CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .

Documents

Transcript of CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .