lesson 10. example - tag this heading uses a 30-point font this sentence will have 30-point font...
TRANSCRIPT
Lesson 10
Example - <DIV> tag
<HTML>
<body>
<DIV style=“font-size:30pt”>
<h1>This heading uses a 30-point font</h1>
This sentence will have 30-point font
<h2>This heading, too</h2>
</DIV>
</body></html>
<HTML>
<body>
<h1>
This <Span style="font-size:40pt">heading </Span> has font-size 40-point
</h1>
</body>
</HTML>
Example – style classes<HTML><HEAD><TITLE>Style Sheets: Style Classes</TITLE></HEAD>
<STYLE><!--.Text1{font-size: 20pt;color:red;text-align:center}.Text2{font-size: 16pt;color:green;text-align:center}--></STYLE>
<BODY><DIV CLASS="Text1"><h1>This text is in red</h1></DIV><DIV CLASS="Text2"><h2>This text is in green</h2></DIV></BODY></HTML>
Using styles to control fonts<HTML><HEAD><TITLE>Style Sheets: Font Sizes</TITLE></HEAD><BODY>Our store offers books on following subjects:<br> <SPAN STYLE="font-size: xx-small">Physics</SPAN>, <SPAN STYLE="font-size: x-small">Math</SPAN>, <SPAN STYLE="font-size: small">Computer Science</SPAN>, <SPAN STYLE="font-size: medium">Literature</SPAN>, <SPAN STYLE="font-size: large">E-commerce</SPAN>, <SPAN STYLE="font-size: x-large">History</SPAN> and<SPAN STYLE="font-size: xx-large">Islam</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>, too.</BODY></HTML>
<HTML><HEAD><TITLE>Style Sheets: Font Families</TITLE><STYLE><!--.fonttype1 {font-size: 20pt; font-family: "Times New Roman"}.fonttype2 {font-size: 20pt; font-family: Arial}.fonttype3 {font-size: 18pt; font-family: "Courier New"}--></STYLE></HEAD><BODY BGCOLOR="yellow"><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:34pt;color:red"><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>
<HTML><HEAD><TITLE>Font Weights</TITLE></HEAD><BODY bgcolor=yellow><DIV STYLE="font-size:20pt">You can find books in this shop on <SPAN STYLE="font-family: 'Courier
New',Courier">subjects such as:</SPAN> <BR><SPAN STYLE="font-weight: 100">Physics</SPAN>, <SPAN STYLE="font-weight: 200">Math</SPAN>, <SPAN STYLE="font-weight: 300">History</SPAN>, <SPAN STYLE="font-weight: 400">Fiction</SPAN>, <SPAN STYLE="font-weight: 500">Poetry</SPAN>, <SPAN STYLE="font-weight: 600">E-commerce</SPAN>, <SPAN STYLE="font-weight: 700">Computer Science</SPAN>, <SPAN STYLE="font-weight: 800;font-style:italic;color:red">Sociology</SPAN>,<SPAN STYLE="font-weight: 900;font-style:italic;color:red">Music</SPAN></DIV></BODY><HTML>
Font Weight StylesFont Weight Styles
Indenting the first line<HTML><HEAD><TITLE> Indenting the first line </TITLE><STYLE><!--P {text-indent: 0.5in}--></STYLE></HEAD><BODY><P>Faith, unity and discipline are the qualities through which we can progress as a nation. The focus of our young generation must be on receiving modern education.</P><P>Religion can play a very important role in the life of an individual. Islam teaches a complete way of life. It ensures success in this world and hereafter. The need is to understand the real message of Islam. </P></BODY></HTML>
<HTML><BODY><TABLE bgcolor=yellow BORDER="1"><TR><TD WIDTH="25%" STYLE="text-align: left">Hypertext Markup Language was initially developed in America for military purposes. Now it
is a popular tool for creating web pages. It is a language of tags. It has a fixed vocabulary. It is not case sensitive.</TD><TD WIDTH="25%" STYLE="text-align: center">Hypertext Markup Language was initially developed in America for military purposes. Now, it
is a popular tool for creating web pages. It is a language of tags. It has a fixed Vocabulary. It is not case sensitive. </TD><TD WIDTH="25%" STYLE="text-align: right">Hypertext Markup Language was initially developed in America for military purposes. Now, it
is a popular tool for creating web pages. It is a language of tags. It has a fixed vocabulary. It is not case sensitive.</TD><TD WIDTH="25%" STYLE="text-align: justify">Hypertext Markup Language was initially developed in America for military purposes. Now, it
is a popular tool for creating web pages. It is a language of tags. It has a fixed vocabulary. It is not case sensitive.</TD></TR></TABLE></Body></HTML>
Text Decoration Styles<HTML><HEAD><TITLE>Text Decoration</TITLE></HEAD><BODY><H2 STYLE="text-decoration: none">Introduction to E-commerce</H2><H2 STYLE="text-decoration: line-through">Introduction to
E-commerce</H2><H2 STYLE="text-decoration: overline">Introduction to E-commerce</H2><H2 STYLE="text-decoration: underline">Introduction to E-commerce</H2></BODY></HTML>
<HTML><HEAD><TITLE>Style Sheets: Text Transform</TITLE></HEAD><BODY><H2 STYLE="text-transform: capitalize">We love Pakistan</H2><H2 STYLE="text-transform: lowercase">We love Pakistan</H2><H2 STYLE="text-transform: none">We love Pakistan</H2><H2 STYLE="text-transform: uppercase">We love Pakistan</H2></BODY></HTML>
Example – Color Styles<HTML><HEAD><TITLE>Backgrounds using Style Sheets</TITLE></HEAD><BODY><DIV STYLE="background-color: yellow; color: blue">This is an example of some blue text in yellow background using Style Sheets. </DIV><Br><DIV STYLE="background-color: green; color: white">This example uses a different background color and a different font color using style sheets. Style sheets provide us more flexibility and a greater editing control over the content.</DIV><P>We can also use different background style to <SPAN STYLE="background-color: red">highlight individual words</SPAN> as in
the present case.<P><DIV STYLE="background-image: URL(image2.gif); font-size: 16pt;color:white"><B>We are studying e-commerce. E-commerce is an emerging concept that
describes the process of buying and selling or exchanging of products, services and information via computer networks including the internet</B>
</DIV></Body></HTML>