As we now realize that HTML pages actually operate in a similar fashion as MS Word (although very heavy in code), we can proceed with adding more HTML elements:
Note the two additional elements: <img>
and <p>
. <img>
element features two additional attributes to define the location of the image (which is already set up in our folder) as well as the alternate text that will display for those with visual impairment. <p>
, as you can imagine, stands for paragraph.
The website preview will not be so kind, as we are lacking the style document at the moment. Before we move to CSS, however, there is another important (perhaps the most important) element to cover: hyperlinks.
Once again, HTML was originally developed to exchange large research documents and facilitate discussion among the researchers. As a revolutionary step beyond a simple table of contents, the concept of hyperlink fascinated everybody: imagine being able to jump from one web page hosted by the Dutch research centre to another website hosted in Japan (back in 1990)!
Hyperlinks are created using an <a>
(for "anchor") tag, with a "href" attribute that specifies the destination of the hyperlink. Whatever that is placed between the two <a>
tags will serve as the "target" that the user can click on.
https://drive.google.com/file/d/1bjLRUYT24G-fjft43rHPbvKnl6j_em5w/view?usp=drive_link
(Updated October 23, 2023)
<!doctype html>
<html>
<head>
<title>My first website</title>
</head>
<body>
<img src="images/header.jpg" alt="Sky">
<h1>John Doe</h1>
<p>John Doe is a Toronto-based creative.</p>
<p>
<a href="http://google.com">Google</a>
</p>
</body>
</html>