Last time we covered the short history of HTML and learn how to create a bare bones web page. I’m assuming you’ll care about the look of your website in the future, so this article will cover tables, images, and links.
The table tag ‹table› is useful for displaying data such as comparing different software features or for organizing a contact form. There are three basic parts to creating a table. The first part is the parent ‹table› tag which is found at the beginning and end of the table content. The second element found in a table is the row tag ‹tr›. The table row tag is found at the beginning and end of each table row. Thirdly is the individual table cell tag ‹td›. The ‹td› tag is found at the beginning and end of each table cell. Table styling can be edited via Cascading Style Sheets (CSS), which will be covered in later articles.
<table border="1">
<tr>
<td>This is where you put header text</td>
<td>This is where you put header text</td>
<td>This is where you put header text</td>
<td>This is where you put header text</td>
</tr>
<tr>
<td>This is where you put your data</td>
<td>This is where you put your data</td>
<td>This is where you put your data</td>
<td>This is where you put your data</td>
</tr>
</table>
Next is the image tag, ‹img›. The image tag is very useful and almost mandatory if you want your web page to have any styling besides solid colors. When calling an image you must always include three elements. The three elements are as follows; img (image tag must always be first), src (URL location of the image), and alt (the alternative description of the image). Image tags will be a necessity to your website so know this tag well.
<img src="images/sample.jpg" alt="This is a sample image"/>
Last is the link tag also known as the anchor tag, ‹a›. This tag is used to link to other pages on your website, websites throughout the Internet, or a specific section on your web page. An anchor tag must always have two elements, a (anchor) and href (URL of the page you would like to navigate to). The anchor tag must always wrap around content on your page. This content can include images or text. If you have a lot of content on a web page and would like to provide your readers with a jump link you can add an anchor tag. You must implement a “id” element to the section you want the reader to jump to. This is displayed in the final example below. When sending your readers to a website away from your own, it is wise to add “target=”_blank”" to the anchor tag. This opens the link in a new window or tab. This function can also be viewed in the final example below.
<a href="sample-page.html">Click here for the sample link</a>
Below, I have created a page displaying all we have covered so far.
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph. Click <a href="#image">here</a> to move down to the image.</p>
<br>
<table border="1">
<tr>
<td>This is where you put header text</td>
<td>This is where you put header text</td>
<td>This is where you put header text</td>
<td>This is where you put header text</td>
</tr>
<tr>
<td>This is where you put your data</td>
<td>This is where you put your data</td>
<td>This is where you put your data</td>
<td>This is where you put your data</td>
</tr>
</table>
<br>
<img id="image" src="images/sample.jpg" alt="This is a sample image"/>
<br>
<a href="sample-page.htm">Click here for the sample internal link</a>
<br>
<a href="http://www.google.com" target="_blank">Click here for sample external link</a>
</body>
</html>
Click here to see the example page
That is all for today. You now have the basics of a web page covered. Next time I will begin talking about advanced elements of HTML and why you should use them in your webpage.
Happy surfing!
