In this blog you will know and learn how to create tables, styling lists with markers,inserting inline spans and Specifying font size using CSS and HTML.
Creating Tables
1.) Open NOTEPAD 2.) Type the code below:
<h2>5 Day Weather Forecast</h2>
3.) Type the following code below for the weather forecast data in your municipality:
<table>
<tr>
<td rowspan="2"></td>
<td>Monday</td>
<td>Tuesday</td>
<td>Wednesday</td>
<td>Thursday</td>
<td>Friday</td>
</tr>
<tr>
<td>Sunny</td>
<td>Partly cloudy</td>
<td>Mostly Sunny</td>
<td>Cloudy</td>
<td>Sunny</td>
</tr>
<tr>
<td>Temperature</td>
<td>31°</td>
<td>29°</td>
<td>30°</td>
<td>26°</td>
<td>32°</td>
</tr>
<tr>
<td>Winds</td>
<td>SW @ 10mph</td>
<td>NE @ 11mph</td>
<td>SE @ 10mph</td>
<td>NW @ 9mph</td>
<td>SW @ 10mph</td>
</tr>
<tr>
<td>Chances of<br>Rain</td>
<td>0%</td>
<td>10%</td>
<td>90%</td>
<td>13%</td>
<td>15%</td>
</tr>
<tr>
<td>Sunrise</td>
<td>5:30AM</td>
<td>6:30AM</td>
<td>5:25AM</td>
<td>5:45AM</td>
<td>6:00AM</td>
</tr>
<tr>
<td>Sunset</td>
<td>6:00PM</td>
<td>6:30PM</td>
<td>6:25PM</td>
<td>5:45PM</td>
<td>6:00PM</td>
</tr>
</table>
4.) Save the file and test it in your browser(internet explorer,Google Chrome,or Firefox)
5.) The output will be:
Next Topic will be:
learning how to style a list:
1.) Type the list-style-type: marker property in the style sheet rule.
Syntax: <ul style="list-style-type:marker">--for inline style
[Where MARKER can be any particular values]
ul{list-style-type:marker;}--for internal and external style
Marker values:
- disk (•)
- circle(੦)
- square(◼)
- decimal(1,2,3,...)
- upper-alpha(A,B,C,...)
- lower-alpha(a,b,c,...)
- uper-roman(I,II,III,IV,...)
- lower-roman(i,ii,iii,iv,...)
2.) To display the list without a marker, type list-style-type:none property.
Example code:
<ul style="list-style-type:disk"><li>disk</ul>
<ul style="list-style-type:circle"><li>circle</ul>
<ul style="list-style-type:square"><li>square</ul>
<ul style="list-style-type:decimal"><li>decimal</ul>
<ul style="list-style-type:upper-alpha"><li>upper-alpha
<li>upper-alpha 2</ul>
<ul style="list-style-type:lower-alpha"><li>lower-alpha
<li>lower-alpha 2</ul>
<ul style="list-style-type:upper-roman"><li>upper-roman
<li>upper-roman 2</ul>
<ul style="list-style-type:lower-roman"><li>lower-roman
<li>lower-roman 2</ul>
Example output:
Next Topic will be:
Learning how to insert the inline span:
1.) Open NOTEPAD
2.) In the head section of your document, insert an internal style sheet.Type the following code below:
<style type="text/css">
.emphasis{font-style:italic;font-weight:bold;}
</style>
3.) Insert <span class="emphasis"> to every word indicated below, and enclose it with a </span> tag.
4.) Save your documents as inline span.html.
5.) Test the document in a browser.
Example code:
<head>
<style stype="text/css">
.emphasis{font-style:italic;font-weight:bold;}
</style>
</head>
<body>
<p><span class="emphasis">Climate Change</span> is a long term shift in the climate of a specific
location, region or planet.</p>
<p><span class="emphasis">Climate Change</span> occurs when the climate of a specific
area or planet is altered between two different periods of time.</p>
</body>
Example output:
Next Topic will be:
Learning how to Specify font size using internal stylesheet:
1.) Open NOTEPAD
2.) Type the following codes:
<head>
<style type="text/css">
body{font-size:100%;}
h1{font-size:2.5em;}
h3{font-size:130%;}
#sentence1{font-size:16px;}
#sentence2{font-size:x-small;}
</style>
</head>
<body>
<h1>This heading is 2.5em relative to the body tag.</h1>
<h3>This Sub-heading is a percent larger than the body tag.</h3>
<id="sentence1">This sentence has fixed sized of 16 pixels.</id>
<id="sentence2">This sentence is extra small relative to the body tag.</id>
</body>
3.) Save the file and open your browser to test it.
Example output:
Copyright 2019©
Justine Kervie A. Apin,Valent B. Barrios,John Paolo Calanza,Jose Jorito J.Balonga Jr.
