Skip to main content

Lesson 6: A few more elements

Familiarise yourself with seven of the most-used elements.

Lesson 6: 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>

   <p>text, text text
<h1>A Heading</h1>
, text</p>

ext text, text</p>

<h2>Subhead</h2>
   <p>text, 
t   </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 openning 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:
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 elements. This is best illustrated by an example:
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, 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<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
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:
 
 <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:
  1. First list item
  2. 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>

Horizontal line
 <
<br /> Line shift
 <hr />
 ul>List</ul>
 <ol>Ordered list</ol>



<li>List item</li>

Labels:

Comments

Post a Comment

Popular posts from this blog

HTML 5 Comments Tag

HTML 5 Comments Tag Description The HTML 'comments' tag is used for creating comments within your HTML code. Comments aren't displayed in the browser - they are simply there for the programmer's benefit. Comments can assist you, the HTML programmer, because you can write notes to yourself that explain what the code does. This is especially useful when you have a lot of code.
Post a Comment
More information Read more

Lesson 10: Margin and padding css

Lesson 10: Margin and padding In the previous lesson you were introduced to the box model. In this lesson, we will look at how you can change the presentation of elements by setting the  margin  and  padding properties. Set the margin in an element Set the padding in an element Set the margin in an element An element has four sides: right, left, top and bottom. The  margin  is the distance from each side to the neighboring element (or the borders of the document). See also the diagram in  lesson 9  for an illustration.
Post a Comment
More information Read more

Lesson 11: Borders css

Lesson 11: Borders Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages. border-width border-color border-style border The width of borders [border-width]
Post a Comment
More information Read more