Wednesday, March 31, 2010

HTML - Part 2


hey, welcome to the second tutorial about HTML. With several reason, I will write this tutorial only in english. :D hope you can understand what will we learn together in this tutorial. As I said in the last tutorial, we will learn about HTML elements.



HTML Elements

Heading Element
heading element define with <h1> - <h6>.
purpose of the heading element is to make something like title. Maybe you must see how it works. okay type this code below in your html document and save as "heading.html". (if you dont understand how to make html document ,read this)


<html>
<head>
<title>heading elements</title>
</head>

<body>
<h1>This is heading #1</h1>
<h2>This is heading #2</h2>
<h3>This is heading #3</h3>
<h4>This is heading #4</h4>
<h5>This is heading #5</h5>
<h6>This is heading #6</h6>
</body>
</html>


If you open heading.html it must be like this :


As you can see that tag H1 is the biggest heading element and H6 is the smallest. When you use heading element, its automatically turn your text into bold and size of the text depend on which element you used.


List Item

List Item used to classify the data both the ordered list or unordered list, for example we have list of item : laptop, mobile-phone, personal computer,and iPod. how to write those into list of item??

create new html document, save as "listItem.html" write this code below inside your html document.

<ul>
<li>laptop</li>
<li>mobile-phone</li>
<li>personal computer</li>
<li>iPod</li>
</ul>

and you have a list of item like this :
  • laptop

  • mobile-phone

  • personal computer

  • iPod



<ul></ul> is tag which define that the code inside is and UnorderedList.
<li></li> is tag which define each L of Item.
well, maybe you think how if you wanna write some ordered list of item such as :

  1. laptop

  2. mobile-phone

  3. personal computer

  4. iPod


it is a simple . just create new html document or you can edit listItem.html into

<ol type="1">
<li>laptop</li>
<li>mobile-phone</li>
<li>personal computer</li>
<li>iPod</li>
</ol>


what is the different between two codes above? yups! <ul></ul> and <ol></ol>. I think you know what is ol stands for. . . Ordered List.
there seems strange code in ol tags. <ol type="1"> its called attribute.
1 = Numerical ordered list (this is default) (1, 2, 3, 4)
a = Alphabetically ordered list, lowercase (a, b, c, d)
A = Alphabetically ordered list, uppercase (A, B, C, D)
i = Roman numbers, lowercase (i, ii, iii, iv)
I = Roman numbers, uppercase (I, II, III, IV)

Format Text
you can set the text formatting as you wish, here is the tag which you can used to format your text.
<b> ... </b> = Defines bold text
<big> ... </big> = Defines big text
<em> ... </em> = Defines emphasized text
<i> ... </i> = Defines italic text
<small> ... </small> = Defines small text
<strong> ... </strong> = Defines strong text
<sub> ... </sub> = Defines subscripted text
<sup> ... </sup> = Defines superscripted text
<ins> ... </ins> = Defines inserted text
<del> ... </del> = Defines deleted text
<u> ... </u> = Defines underline text


See you on the next tutorial. . .

No comments:

Post a Comment