Uh oh!
There was an error while loading. Please reload this page.
More HTML
We're going to learn some more HTML elements in the following lesson. There are many HTML elements out there but you'll mostly use just a portion of them.
A link, also known as a hyperlink, is text, an image, or other element that when clicked on brings a user to another page. That page can be within the same site or to another site.
Links consist of three main parts:
- the
<a>element - the href atrribute which holds the URL
- and the URL
A URL, or uniform resource locator, is a web address. http://www.google.com is a URL. When you type a web address into the browser to visit a website you
are typing a URL. URLs are defined with the href attribute which you can see in use below.
In HTML:
<a href="http://www.google.com">This is a link to Google</a>
Actual link:
Two types of URLs:
Absolute URLs use the full web address such as http://www.example.com/path/to/file and are used when linking to external websites.
Relative URLs use just the path to a page or file and omit the first part such as path/to/file. Relative URLs are used to link to other pages
within your website. There is no need to include the full path to your website in a link that is to another part of your website because
you're already on it.
The image element in HTML is one of the few with no closing tag because there is nothing to wrap the tags around.
<img src="http://i.imgur.com/58eyAmw.jpg" alt="Llama photo">
There are two attributes here: src and alt. The src attribute is the source, or the location, of the image which comes in the form of a URL. The alt attribute is what will be displayed if for some reason the image isn't available or someone is using a screen reader.
HTML lists are found all over the web. There's one directly above in Step 3. There are two types of lists: unordered and ordered.
Unordered simply means the list will use bullet points. Ordered means it will display numbers next to each item instead of bullets. Ordered lists use the <ol> element while
unordered lists use the <ul> element. Unordered lists are used much more often. Both types of lists use the same element to define items which is a list
item or <li> element.
Unordered list:
<ul><li>Orange</li><li>Apple</li><li>Banana</li></ul>- Orange
- Apple
- Banana
Ordered list:
<ol><li>Orange</li><li>Apple</li><li>Banana</li></ol>- Orange
- Apple
- Banana
Tables are as old as the web, and prior to the advancement of CSS, were used to handle a lot of formatting and alignment on websites. Today tables are mostly used to display what they should be...tabular data.
Tables have three main elements:
<table>defines the table itself<tr>defines a row (remember the r for table row)<td>defines a cell (td means tabular data)
<tableborder="1" cellpadding="10"><tr><td>Type of fruit</td><td>Number of pieces</td></tr><tr><td>Orange</td><td>4</td></tr><tr><td>Apple</td><td>7</td></tr><tr><td>Berries</td><td>3</td></tr></table>| Type of fruit | Number of pieces |
| Orange | 4 |
| Apple | 7 |
| Berries | 3 |
We're using the border and cellpadding attributes inside the table tag just to make it pretty for now but this should be done a different way using CSS. By default a table won't have any borders around the cells.
Without those attributes it looks like this:
| Type of fruit | Number of pieces |
| Orange | 4 |
| Apple | 7 |
| Berries | 3 |
