Did you manage to make a few pages on your own? If not, here is an example:
|
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 openning tag <strong>
and the closing tag </strong>
.
Example 1:
|
Will look like this in the browser:
Likewise, you can make your text smaller using small
:
Example 2:
|
Will look like this in the browser:
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 elements. This is best illustrated by an example:
Example 3:
If you want to emphasise small text, it must be done like this:
|
And NOT like this:
|
The difference is that in the first example, we closed the tag we first opened last. This way we avoid confusing both ourselves and the browser.
More elements!
As mentioned in Lesson 3 there are elements which are opened and closed in the same tag.
These so-called empty 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
|
Will look like this in the browser:
and some more text in a new line
Notice that the tag is written as a contraction of an opening and
closing tag with an empty space and a forward slash at the end: <br />
.
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 - is 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:
|
will look like this in the browser:
- A list item
- Another list item
Example 8:
|
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:
|
See Also * Next lesson: Attributes * Previous lesson: What have you learned so far? |