Learning HTML

Note that the heading levels are used to represent importance. Remember that each page already has a page header at the top of the page, so you do not have to start off with one of these headers. Below the header is the code to make it look like that:

This is for the biggest headline

<h1>This is for the biggest headline </h1>

This is for a big headline

<h2>This is for a big headline </h2>

This is for a smaller headline

<h3>This is for a smaller headline </h3>

This is for an even smaller headline

<h4>This is for an even smaller headline </h4>

This is for a small headline

<h5>This is for a small headline </h5>

This is for a small headline

<h6>This is for a small headline </h6>

This is a paragraph, which is written like:

</p>This is a paragraph, which is written like:

  • This is a list item
  • This is a list item
  • This is a list item
  • This is a list item
  • This is a list item

This unordered list is written like this:

<ul>
<li>This is a list item
<li>This is a list item
<li>This is a list item
<li>This is a list item
<li>This is a list item
</ul>

What I did not know, however, is that the program will automatically put a slash at the end to self-close the <li>, so what it will look like when you open it again is:

<ul>
<li />This is a list item
<li />This is a list item
<li />This is a list item
<li />This is a list item
<li />This is a list item
</ul>

You have to close the headers and the <ul> unordered list, where <li>is for each list item. If you want to make an ordered list, meaning 1,2,3,4,...., then use <ol> instead of <ul>, like this:.
  1. This is a list item
  2. This is a list item
  3. This is a list item
  4. This is a list item
  5. This is a list item

This ordered list is written like this:

<ol>
<li />This is a list item
<li />This is a list item
<li />This is a list item
<li />This is a list item
<li />This is a list item
</ol>

Creating links requires that you use the a tag, for anchor, and it looks like this: <a href="http://www.krisenos.com/">website</a>

This is an example of an image tag where the image is on the left by using HTML inside the image tag:

<img src="/images/Foundation/founders.png" alt="Carolyn Robert and Mario" align="left" title="founders of Artistas de Loisaida" class="caption" />

altThis is an example of an image tag where the image is on the right by using CSS inside the image tag. You can see that I am floating the image to the right, and when I give it a margin, the pixel values follow the direction of the clock, so the order is top, right, bottom and left:<img style="float: right; margin:0px 0px 10px 10px ;" src="/images/alma albeniz.jpg" alt="alt" /> You will notice that I am able to determine the local style of the image by using the style="" with the rules that determine the style inside. You can determine the style of a part of the text by placing it in <span></span> tags. To change the type color, for example, use <span style="color: red;">. To place emphasis on text, use <strong>BOLD</strong>. Once you get the hang of this, it wil become easy to style the text.