Tutorial 4: A Few More Elements.
But before we start our tutorial 4, I'm gonna show you a quick sample of what your have learned so far.
Always start with the basic template we made in the previous lesson:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
In the head section, always write a title:
<title>The title of your page </title>. Notice how the title will be shown in the upper left corner of your browser:
The title is especially important because it is used by search engines (such as Google) to index your website and is shown in the search results.
In the body section, you write the actual content of the page. You already know some of the most important elements:
<p>Is used for paragraphs.</p>
<em>Emphasis text.</em>
<h1>Heading</h1>
<h2>Subhead</h2>
<h3>Sub-subhead</h3>
Remember, the only way to learn HTML is by trial and error. But don't worry, there is no way you can destroy your computer or the Internet. So keep experimenting — that is the best way to gain experience.
What is that supposed to mean?
Nobody becomes a good website creator by learning the examples in this tutorial. What you get in this tutorial is simply a basic understanding of the building blocks — to become good you must use the building blocks in new and creative ways.
So, get out in the deep water and stand on your own two feet... Okay, maybe not. But give it a go and experiment with what you have learned.
So what's next?
Try to create a few pages yourself. For instance, make a page with a title, a heading, some text, a subhead and some more text. It is perfectly okay to look in the tutorial while you make your first pages. But later, see if you can do it on your own, without looking.
So now let us get back to our Tutorial 4:
Lesson 4: A Few More Elements
Did you manage to make a few pages on your own? If not, here is an example:
<html>
<head>
<title>My website</title>
</head>
<body>
<h1>A Heading</h1>
<p>text, text text, text</p>
<h2>Subhead</h2>
<p>text, text text, text</p>
</body>
</html>
Now what?
Now it is time to learn seven new elements.
In the same way you emphasise the text by putting it between the openning tag
<em> and the closing tag </em>, you can give stronger emphasis by using the opening tag <strong> and the closing tag </strong>.
Example 1:
<strong>Stronger emphasis.</strong>
Will look like this in the browser:
Stronger emphasis.
Likewise, you can make your text smaller using
<small> and the closing tag </small>.
Example 2:
<small>This should be in small.</small>
Will look like this in the browser:
This should be in small.
Can I use several elements at the same time?
You can easily use several elements at the same time as long as you avoid overlapping your elements. They must be properly nested.
Example 3:
If you want to emphasise small text, it must be done like this:
<em><small>Emphasised small text</small></em>
And NOT like this:
<em><small>Emphasise small text</em></small>
The difference is that in the first example, encapsulated the small tag inside the em tag. This way we avoid confusing both ourselves and the browser.
More elements!
As mentioned above, there are elements which are opened and closed in the same tag. These so-called void elements are not connected to a specific passage in the text but rather are isolated labels. An example of such a tag is
<br>, which creates a forced line break:
Example 4:
Some text<br> and some more text in a new line
Will look like this in the browser:
Some text
and some more text in a new line
and some more text in a new line
Another element that is opened and closed in the same tag is
<hr> which is used to draw a horizontal line ("hr" stands for "horizontal rule"):
Example 5:
<hr>
Will look like this in the browser:
Examples of elements that needs both an opening tag and a closing tag - as most elements do - are
ul, ol and li. These elements are used when you want to make lists.ul is short for "unordered list" and inserts bullets for each list item. ol is short for "ordered list" and numbers each list item. To make items in the list use the li tag ("list item"). Confused? See the examples:
Example 7:
<ul>
<li>A list item</li>
<li>Another list item</li>
</ul>
Will look like this in the browser:
- A list item
- Another list item
Example 8:
<ol>
<li>First list item</li>
<li>Second list item</li>
</ol>
Will look like this in the browser:
- First list item
- Second list item
Phew! Is that all?
That is all for now. Again, experiment and make your own pages using some of the seven new elements you learned in this lesson:
<strong>Stronger emphasis</strong>
<small>Small text</small>
<br> (line break)
<hr> (horizontal rule)
<ul>List</ul>
<ol>Ordered list</ol>
<li>List item</li>
About
Tags
Popular
0 comments:
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.