CS-3432 Electronic Commerce Lecture – 10 Sikandar Shujah Toor

CS-3432Electronic Commerce

Lecture – 10Sikandar Shujah Toorhttps://sites.google.com/site/uolcsecom

<Embed> tag attributes•We can embed video and music into our web

pages with <embed> tag• Autostart=“False” • Loop=“3” • Hidden=“True” • Height = pixel• Width=pixel• Src = url Source file name• Type = MIME type of embedded content

Example - Embedding<HTML><HEAD><TITLE>Example - Embedding</TITLE></HEAD><BODY>Click the Play button below to listen to music:<p></p> <p></p><p></p><p></p><p></p><embed src="kalimba.mp3" loop="2" autostart="false"></embed><p></p> <p></p><p></p><p></p><p></p><p></p>

<p></p><p></p><p></p><p></p>Click the Play button below to view video:<p></p> <p></p><p></p><p></p><p></p><embed src="state.mp4"></embed></BODY></HTML>

Embed Example

<Marquee>tag Attributes• Used to scroll the text horizontally across the

screen• Align=“top” or “bottom”• Direction=“”left” or “right”• Behavior=“Scroll” or “Slide” or “Alternate”• Loop=“5”• Scrollamount=“5”• Width=“200” • Height=“100” • Bgcolor=“yellow”

Marquee - Example<HTML><HEAD><TITLE>Marquee</TITLE></HEAD><BODY>The name of our university is <br><MARQUEE ALIGN="BOTTOM" BGCOLOR="yellow"

WIDTH="200" SCROLLAMOUNT="5" behavior="scroll">University of Lahore, Lahore </MARQUEE></BODY></HTML>

Marquee Example

Cascading Style Sheet (CSS)• It is a style sheet language used for describing the

presentation semantics (the look and formatting) of a document written in a markup language. • Its most common application is to style web pages

written in HTML and XHTML, but the language can also be applied to any kind of XML document• Make the ‘look & feel’ of web pages easy to change • Can be embedded in the html page or in a separate

file with .css extension• File name is given in <head> portion of html file

A Simple Example

<HTML><TITLE>Style Sheets: Example</TITLE><STYLE>H1 {font-size: 50pt; color:#fed123; background-color:blue}</STYLE><BODY><H1>Style Sheets: A Very Simple Example</H1></BODY></HTML>

CSS Example

Embedded Example<HTML><head><style></style></head><body><h1>An Example of Embedded Method</h1></body></html>

Embedded CSS

CSS file Example<HTML><head><LinK Rel="stylesheet" Type="text/css" href="css-sheet.css"></head><body><h1>This heading-1 is green</h1><h2>This heading-2 is red</h2>

<p> This line has a 40pt font</p></body></html>

css-sheet.cssh1{color:green}p{font-size:40pt}h2{color:red}

CSS Example

css-sheet.css• .T1{font-size: 20pt;color:blue;text-align:left}• .T2{font-size: 25pt;color:red;text-align:right}• .T3{font-size: 30pt;color:green;text-align:center}

<HTML><HEAD><TITLE>Style Sheets: Style Classes</TITLE><LinK Rel="stylesheet" Type="text/css" href="css-sheet.css"></HEAD><BODY><DIV CLASS="T1"><h1>This text is in blue, left aligned</h1></DIV><DIV CLASS="T2"><h2>This text is in red, right aligned</h2></DIV><DIV CLASS="T3"><h3>This text is in green, center aligned</h3></DIV></BODY></HTML>

Div Classes & CSS

Div Class Example

Span Tag• The <span> tag is used to group inline-elements in

a document.• The <span> tag provides no visual change by itself.• The <span> tag provides a way to add a hook to a

part of a text or a part of a document

css-sheet.css

.s1{font-size: xx-small;color:red}

.s2 { font-size:small; color:blue }span {font-size: x-small; color:green}

Using Styles to Control Fonts<HTML><HEAD><TITLE>Style Sheets: Font Sizes</TITLE><LinK Rel="stylesheet" Type="text/css" href="css-sheet.css"></HEAD><BODY>We off the following products in Our store:<br> <span class="S1"> Books</span>, <SPAN>Gifts</SPAN>, <SPAN class=“S2”>Cosmetics</SPAN>, <SPAN STYLE="font-size: medium">Garments</SPAN>, <SPAN STYLE="font-size: large">Electronics</SPAN>, <SPAN STYLE="font-size: x-large">Computers</SPAN> and<SPAN STYLE="font-size: xx-large">Household Utencils</SPAN><br>You can also buy <SPAN STYLE="font-size: smaller">DVDs</SPAN> and <SPAN STYLE="font-size: larger">music CDs</SPAN>.<br> We offer<SPAN STYLE="font-size: 24pt">Greeting Cards</SPAN> also.</BODY></HTML>

Font Control with Span Example

<HTML><HEAD><TITLE>Style Sheets: Font Families</TITLE><STYLE></STYLE></HEAD><BODY BGCOLOR="cyan"><DIV CLASS="fonttype1">This sentence is in Times New Roman</DIV><DIV CLASS="fonttype2">This one is in Arial Font Type</DIV><DIV CLASS="fonttype3">This is in Courier New Font Type</DIV><HR><DIV STYLE="font-size:35pt;color:blue"><DIV STYLE="font-family: Arial">The Arial Font Family</DIV><DIV STYLE="font-family: Tahoma">This line is in Tahoma Font Family</DIV></DIV> </Body></HTML>

Font Families

Font Families - Example

<HTML><HEAD><TITLE> Indenting the First Line </TITLE><STYLE></STYLE></HEAD><BODY><P>Electronic commerce, commonly known as e-commerce, is the buying and selling of product or service over electronic systems such as the Internet and other computer networks. Electronic commerce draws on such technologies as electronic funds transfer, supply chain management, Internet marketing, online transaction processing, electronic data interchange (EDI), inventory management systems, and automated data collection systems. </P><P>Originally, electronic commerce was identified as the facilitation of commercial transactions electronically, using technology such as Electronic Data Interchange (EDI) and Electronic Funds Transfer (EFT). These were both introduced in the late 1970s, allowing businesses to send commercial documents like purchase orders or invoices electronically.</P></BODY></HTML>

Indenting the First Line

Indenting the First Line

Documents

CS-3432 Electronic Commerce Lecture – 10 Sikandar Shujah Toor