Lesson 4 - Tables, Anchors, and Images
So right now we know how to format basic text. We've learned many useful tags, but we are missing some of the key elements to create a web page: making tables, creating links, and placing images. First let's talk about tables.
Tables
There are three elements to the table: The <table> tag, the <tr> tag, and <td> tag.
<table> Table- This is the master table tag. All content and <tr> and <td> tags go inside this tag. The opening tag designates the start of a table and the closing tag designates the end of all table elements.
<tr> Table Row- Within the master <table> tag, a table is subdivided into rows first. You can put as many rows are you want. The only content that goes within the open and closed row tags are the table cells.
<td> Table Cell- Within a row, you can add divisions. Each division is a cell in which content can be placed. You can have as many per row as you would like.
Here is a diagram of how a table is constructed:
Here is how the same table is written in code:
<table>
<tr>
<td>
<p>content</p>
</td>
<td>
<p>content</p>
</td>
</tr>
<tr>
<td>
<p>content</p>
</td>
<td>
<p>content</p>
</td>
</tr>
</table>
It should be said that each <td> is like it's own body, anything can be placed within, from Headings to Images to Paragraphs.
Anchors
In HTML, any page can be linked to another. We have all seen this. Certain words may be highlighted, and on click, they open up a new page. This is achieved through <a> tags.
<a> Anchor- Any content enclosed within anchor tags can link to another webpage or image through an attribute called "href".
So how can we make links with this? The most important attribute of the anchor tag is the "href" attribute. The value for your "href" attribute is the page you want to link to. Let's put this together. I want the words "click here" to link to "http://www.chriskoehler.com". I would write it like this:
<a href="http://www.chriskoehler.com">click here</a>
Images
Now we know how to add attributes to tags, we are ready to place images in. When writing Markup like html, it is important to know that mark up is ONLY text, which means there are no actual images in a document. When images are on webpages, they are actually being referenced from the image's location and "placed" on the page. The image tag is self closing and the images location is pointed to with the "src" (source) attribute. Because the images are being linked from external sources, the value for the "source" is a reference.
References
What is a reference? In short, it is a path to the actual file, also known as a URL (Uniform Resource Locator).
There are two types of references, absolute and relative.
The absolute reference is easy to describe. It is telling where the file is from an absolute perspective. If I was describing where Union Square is from an absolute reference i would say it is on Earth, in the United States, in California, in San Francisco, on Powell and Geary. In HTML syntax I would describe its location as "earth/united_states/california/san_francisco/powell_and_geary/union_square". When writing a reference we start at the top-most level and work our down to the actual file. If the image you want to reference was in the images folder in the documents folder on the desktop, the reference would be "desktop/documents/images/image.jpg". It doesn't matter where your web page is located, absolute references always remain the same. To state an absolute reference on the web, you preface the path with "http://www.".
Relative reference are a little trickier. Let's say I had to reference where Union Square is again, but this time I am at the Powell Bart Station. This time I would say that it is 3 blocks up Powell. Instead of describing its location from an absolute perspective, I am saying where it is relative to my HTML document. Let's say my HTML file is saved in a folder called "web". The image I want to use is in the same folder. The reference would just be "image.jpg". Now let's say that it is in a folder called "images". That folder is also in my "web" folder. Now the reference would be "images/image.jpg".
Both types of references have their uses, learning how to use both is very useful.
Now that we know how to reference we can go back to the Images. If I want to place an image called "image.jpg" in the same folder as my HTML document I would write it as such:
<img src="image.jpg" />
The value for "src" can be the URL for any image (.jpg, .gif, .png). Because this tag is self-closing it stands on it's own with no content in the middle. There are many other important attributes for the image tag which we will get into later.