Tuesday, February 14, 2012

A few more HTML elements


Did you manage to do a few pages on your own? If not, here's your example:


<html>

<head>
<title> My website </title>
</head>

<body>
<h1> Header </h1>
<p> text text text text </p>
<h2> Subheading </h2>
<p> text text text text </p>
</body>

</html>

Now what?

Now it's time to learn seven new elements.

In the same way you can bold your text by placing it between the opening and closing <b> </b>, you can tilt the text using <i> opening tag and closing </i>. Yes, "i" stands for "italic" style letters or inclined.



Example 1:


<i> It should be italic. </i>


Will look like in the browser:

It should be italic.


Similarly, you can make the text smaller by using the tag small:

Example 2:


<small> It should be small. </small>


Will look like in the browser:

It should be small.


Can I use multiple items at once?

You can easily enjoy the many items at once if any overlap between the elements. The best illustrate with an example:

Example 3:

If you want to display bold and bold text, you have to do this:


<b> <i> text is bold and bold </i> </b>


But not so:


<b> <i> text is bold and bold </b> </i>


The difference is that in the first example, the first marker was closed as the last. This will avoid confusion with yourself and your browser.

More items!

There are elements of the opening and closing the same tag. These so-called empty elements have no content, they are rather separate tags. An example of such a tag is <br/> which creates a forced line break:

Example 4:


Text <br/> and a bit of text in new line


Will look like in the browser:

Text
and some text on a new line

Note that the marker is a combination of closing and opening tag with a space and a slash at the end: <br/>.

Another element that closed and opened in one tag is <hr/>. We use it to draw a horizontal line ("hr" stands for "horizontal rule" or wyliniowanie horizontal):

Example 5:


<hr/>


Will look like in the browser:




Examples of elements for opening and closing tag - as most of the elements - this ul, ol and li. These elements are used to create the list.

st is an abbreviation for "unordered list" or list is not sorted and puts a bullet before each item in the list. ol stands for "ordered list" or list of ordered and number each item in the list. To place items in the list, you use a tag ("list item" - an element of the list). Confused? See the examples:

Example 6:


<ul>
 <li> Element 1 </li>
 <li> Element 2 </li>
</ul>

Will look like in the browser:

  • Element 1
  • Element 2



Example 7:


<ol>
<li> First list item </li>
<li> Second list item </li>
</ol>

Will look like in the browser:

  1. First list item
  2. Second list item

Hehe! Is that all?

For now everything. Again, experiment and create their own pages using some of the seven newly discovered elements:


<i> italic </i>
<small> Small text </small>
<br /> End of Line
The horizontal line <hr/>
<ul> List </ul>
<ol> Ordered List </ol>
<li> Elment list </li>

No comments:

Post a Comment