Tags : HTML/CSS



Inline elements

Inline elements do not add a new line after being defined. It only occupies the space where it was defined. For example a paragraph is NOT an inline element as it adds a new line after it.

More info at Mozilla

Hyperlink (a tag)

The text after “>” and before the closing tag “< /a>” is going to be displayed as the link text. Remember to use target=”_blank” if you want to open the link in a new window or tab.

<a href="http://en.wikipedia.org/wiki/List_of_volcanoes_in_Guatemala">volcanoes in Guatemala.</a>

Image tag

Please note that image tags are self-closing. They do NOT require the closing tag </img>

<img src="acatenango.jpg">

Span tag

Span tags are used when you want to modify the content inside the span tag.

<li>Agua <span style="color:red">(active)</span><img src="agua.jpg"></li>
<!DOCTYPE html>
<html>
  <head>
    <title>Volcanoes in Guatemala</title>
  </head>
  <body>
    <p>Here you can find the list of all the <a href="http://en.wikipedia.org/wiki/List_of_volcanoes_in_Guatemala">volcanoes in Guatemala.</a></p>
    <p>Here are some examples</p>
    <ul>
      <li>Acatenango <img src="acatenango.jpg"></li>
      <li>Agua <span style="color:red">(active)</span><img src="agua.jpg"></li>
    </ul>
  </body>
</html>

Try the following:

  • Create a new web page.
  • Add a link to your favorite website.
  • Add an multiple images within a list (find anything you like) and add images to each list item.
  • Add some text context and try to style it with a span.