CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .
-
Upload
margaret-manning -
Category
Documents
-
view
219 -
download
0
Transcript of CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .
![Page 1: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/1.jpg)
CS-3432Electronic Commerce
Lecture – 7Sikandar Shujah Toorhttps://sites.google.com/site/uolcsecom
![Page 2: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/2.jpg)
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
![Page 3: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/3.jpg)
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>
![Page 4: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/4.jpg)
Title and Meta Tags
![Page 5: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/5.jpg)
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>
![Page 6: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/6.jpg)
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
![Page 7: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/7.jpg)
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
![Page 8: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/8.jpg)
Try coding…Try to code the following table design:
Cell 1
Cell 2
Cell 3
![Page 9: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/9.jpg)
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>
![Page 10: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/10.jpg)
Column Span
![Page 11: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/11.jpg)
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>
![Page 12: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/12.jpg)
Example - ROWSPAN
![Page 13: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/13.jpg)
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”>
![Page 14: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/14.jpg)
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>
![Page 15: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/15.jpg)
Example - Margin
![Page 16: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/16.jpg)
• <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
![Page 17: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/17.jpg)
Table tag attributes
![Page 18: CS-3432 Electronic Commerce Lecture – 7 Sikandar Shujah Toor .](https://reader035.fdocuments.in/reader035/viewer/2022081513/56649f345503460f94c50fde/html5/thumbnails/18.jpg)
Attributes for <td> tag
• Width - <td width=“50%”>• Align - <td align=“center”>• Valign- <td valign=“top”>