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><!--H1{font-size:42pt; background:cyan}--></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><!--.fonttype1 {font-size: 23pt; font-family: "Times New Roman"; color:green}.fonttype2 {font-size: 26pt; font-family: "Arial"; color:yellow}.fonttype3 {font-size: 15pt; font-family: "Courier New"; color:red}--></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><!--P {text-indent: 0.75in; font-size:15pt}--></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