ANDROID EMULATORS: CSS AND HTML TUTORIALS

Thursday, December 20, 2018

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&deg</td>
<td>29&deg</td>
<td>30&deg</td>
<td>26&deg</td>
<td>32&deg</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: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:

.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>

.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>

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:

Justine Kervie A. Apin,Valent B. Barrios,John Paolo Calanza,Jose Jorito J.Balonga Jr.

Justine Kervie Apin(Mr.KRV)December 20, 2018 at 7:49 PM

Thank youuu

AnonymousDecember 29, 2018 at 6:28 AM

I am continually amazed by the amount of information available on this subject. What you presented was well researched and well worded in order to get your stand on this across to all your readers. http://android-emulators.com/

Justine Kervie Apin(Mr.KRV)January 1, 2019 at 10:58 PM

thank youuu