Creating Links, Images, and Pages
In the last chapter, we learned what block and inline-level elements were and we got familiar with creating headings, paragraphs, lists, breaks and horizontal rules.
In this next chapter, we’ll dive into a standard functionality that almost all webpages have: links.
Links are necessary to allow users to click on specific content and take them to other pages on your site. They also allow you to create interactive elements for users to click on and take them to other webpages. Let’s explore some examples using our previous page we built in the previous chapter.
Creating links
In some cases, we want to be able to link to other websites or other pages on our site. We can do that by creating a link and providing a URL.
We can create links by using the <a> inline-level element (also known as an achor tag). Anchor tags always have an href attribute (also known as hyperlink reference) included with it, which provides the destination of that link.
Here’s an example of a link below:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<dl>
<dt>Cola</dt>
<dd>A cold refreshing soft drink</dd>
<dt>Coffee</dt>
<dd>A hot, brewed drink made from roasted coffee beans</dd>
<dt>Tea</dt>
<dd>A warm, aromatic drink made from cured tea leaves</dd>
</dl>
<p>Breaks are useful when you want to create a break <br />to a new line somewhere in between your content.</p>
<hr />
<p>You can click on <a href="http://www.hallofhavoc.com">this link</a> to take you to my homepage.</p>
</body>
</html>
You’ll notice that the words “this link”, which are wrapped in between the anchor tags, is what you will be able to see and click on to go to that link provided in the value of the href attribute.
Depeneding on what you type in the value of the href attribute, you can create links that point directly to other websites found on the web, or you can link to a webpage relative to your site. For example, if you create a link by typing in <a href=”http://google.com” >This is a link to Google.com</a>, adding that http:// (or https:// for secure sites) at the beginning of your link provides what is called an “absolute path” (meaning it will take you to Google’s main page like it normally would, from your domain), whereas let’s say your your website is hosted on www.awesomesauce.com, if you have created a link by typing <a href=”google.com” >This is a link to Google.com</a>, leaving out the “http://” reference, your browser will think it’s a relative path on your site and look for that link reference like this instead: www.awesomesauce.com/google.com.
So remember, if you want to point to a link found within your website domain, don’t include the “http://” or “https://” reference, but if you want to link to something outside of your website domain, include a “https://” or “http://” reference (you can also use the “//” by itself to let your browser define it automatically. Example: “//google.com”). See example below:
<!-- This is a relative path --> <a href="awesome.html">Awesome</a> <!-- This is an absolute path --> <a href="//www.google.com">Google</a>
Opening links in a new window
Normally, creating links to other websites on your page makes it so that when you click on the link, it will take you to that page on the same window/tab that you’re currently on.
However, we can also make it so that the browser opens up a new window/tab to that link when clicked. By adding target=”_blank” attribute to our anchor tag, we can make that link open up in a new window/tab, instead of opening it in the current window. Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<dl>
<dt>Cola</dt>
<dd>A cold refreshing soft drink</dd>
<dt>Coffee</dt>
<dd>A hot, brewed drink made from roasted coffee beans</dd>
<dt>Tea</dt>
<dd>A warm, aromatic drink made from cured tea leaves</dd>
</dl>
<p>Breaks are useful when you want to create a break <br />to a new line somewhere in between your content.</p>
<hr />
<p>You can click on <a href="http://www.hallofhavoc.com">this link</a> to take you to my homepage.</p>
<p><a href="http://www.hallofhavoc.com" target="_blank">This link</a> will open up my homepage in a new window/tab.</p>
</body>
</html>
Adding links for email addresses and telephone numbers
You can also define an email address link by adding a “mailto:” in your href value. This is useful for creating a link that opens your default email client and automatically populates the “to:” field. See example below:
<!-- This is an email link... this is not my real email address by the way. Just an example --> <a href="mailto:awesomesauce@email.com">Email Me</a>
You can also define a telephone number by adding “tel:” in your href value as a link to provide users a way to click that link to dial in the phone number automatically. It’s mostly useful for people on mobile devices to be able to click a link instead of having to copy and paste the number and dialing it manually.
<!-- That hotline bling --> <p>Call us at <a href="tel:5555555555">(555) 555-5555</a> to book an appointment today!</p>
NOTE: As I’ve mentioned earlier, the <a> is an inline-level element, meaning they should not wrap block-level elements. However, anchor elements are special in that they are allowed to wrap either inline, block, or any other elements. This is the only time where it’s permissable to allow an inline-level element to wrap a block-level element, in order to enable large blocks of content to be clickable and become a link. Also, don’t try and wrap an anchor tag inside another anchor tag… just dont. Other developers will laught at you. Seriously.
Images
If we wanted to add images in our webpages, we would use the <img /> inline-level element. You’ll notice that this is another one of those self-closing (void) tags.
By itself it won’t do anything but display a broken image icon. We can add an actual image by providing it with a required src attribute (short name for “source”). Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<dl>
<dt>Cola</dt>
<dd>A cold refreshing soft drink</dd>
<dt>Coffee</dt>
<dd>A hot, brewed drink made from roasted coffee beans</dd>
<dt>Tea</dt>
<dd>A warm, aromatic drink made from cured tea leaves</dd>
</dl>
<p>Breaks are useful when you want to create a break <br />to a new line somewhere in between your content.</p>
<hr />
<p>You can click on <a href="http://www.hallofhavoc.com">this link</a> to take you to my homepage.</p>
<p><a href="http://www.hallofhavoc.com" target="_blank">This link</a> will open up my homepage in a new window/tab.</p>
<img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" alt="Grumpy Cat"/>
</body>
</html>
You’ll notice that the src attribute contains a URL to an image of the Grumpy Cat. The types of image formats you can link to are: jpegs, gifs, pngs, svg, and bmp files (the most common of course are jpg, gif, and png).
You’ll also notice that I included an alt attribute and value to describe what the actual image is. While this attribute is optional, it is highly recommended that you include it in all of your image elements so that users with disabilities that use screen-readers can identify what that image is you are describing.
Back to the src attribute, we can also display local images found on our folder directory. This is useful to display images from your server.
Let’s start by downloading an image online. It can be whatever image you want (You can download this image if you want: happy-dog.jpg). Now, save it into a new folder (we’ll call this new folder “images”) and place that image you downloaded into that folder. Then lastly, place that “images” folder inside of your “my-first-site” folder. It should look like this:
In our code, lets update the src attribute for our image to use our new image we just downloaded.
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<dl>
<dt>Cola</dt>
<dd>A cold refreshing soft drink</dd>
<dt>Coffee</dt>
<dd>A hot, brewed drink made from roasted coffee beans</dd>
<dt>Tea</dt>
<dd>A warm, aromatic drink made from cured tea leaves</dd>
</dl>
<p>Breaks are useful when you want to create a break <br />to a new line somewhere in between your content.</p>
<hr />
<p>You can click on <a href="http://www.hallofhavoc.com">this link</a> to take you to my homepage.</p>
<p><a href="http://www.hallofhavoc.com" target="_blank">This link</a> will open up my homepage in a new window/tab.</p>
<img src="images/happy-dog.jpg" alt="Happy Dog"/>
</body>
</html>
You’ll notice that it now displays the updated picture of the happy-dog.jpg file inside of our images directory. We used a relative path from our index.html file, and told it to look inside of the images folder and inside that images folder, we told it to look for the happy-dog.jpg file.
Linking to other pages
Links are one of the fundamental features of building out webpages throughout the web. Without them, we wouldn’t be able to view other content without having to type in a new URL each time.
As I’ve mentioned earlier, we can create links to go to different pages of our site. As an exercise to get you more familiar with linking pages, let’s create a few pages that link to each other.
But first, lets update our index.html file and add a new link:
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello there!</h1>
<p>I am the greatest HTML developer ever!</p>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>This is another paragraph that usually follows after headings. This is useful to provide context to support those headings and can help provide more information for users.</p>
<p>This is yet another paragraph. You'll notice that each paragraph has their own separate spacing in between each paragraph.</p>
<p>In most cases, you want to give <strong>importance</strong> to a specific word instead of just making it look <b>bold</b>.</p>
<p><strong>Remember:</strong> Use <strong>strong</strong> to provide importance and <b>b</b> to make something look bold.</p>
<p>To show <em>emphasis</em> on specific words, use the <em>em</em> tag. If you just want to show italicized text without meaning, use the <i>i</i> tag.</p>
<ul>
<li>This is a list item</li>
<li>This is another list item</li>
<li>This is the final list item</li>
</ul>
<ol>
<li>Ordered list item</li>
<li>Ordered list item</li>
<li>Ordered list item</li>
</ol>
<dl>
<dt>Cola</dt>
<dd>A cold refreshing soft drink</dd>
<dt>Coffee</dt>
<dd>A hot, brewed drink made from roasted coffee beans</dd>
<dt>Tea</dt>
<dd>A warm, aromatic drink made from cured tea leaves</dd>
</dl>
<p>Breaks are useful when you want to create a break <br />to a new line somewhere in between your content.</p>
<hr />
<p>You can click on <a href="http://www.hallofhavoc.com">this link</a> to take you to my homepage.</p>
<p><a href="http://www.hallofhavoc.com" target="_blank">This link</a> will open up my homepage in a new window/tab.</p>
<img src="https://pbs.twimg.com/profile_images/616542814319415296/McCTpH_E.jpg" alt="Grumpy Cat"/>
<p><a href="page2.html">Click here</a> to go to page 2.</p>
</body>
</html>
Now that you have updated your ‘index.html’ file, go ahead and create a new file in your text editor like so:
Create another page: page2.html
<!DOCTYPE html>
<html>
<head>
<title>Page 2</title>
</head>
<body>
<h1>This is page 2</h1>
<p>Click on <a href="index.html">this link</a> to go back to the index page.</p>
<p>Click <a href="page3.html">here</a> to go to page 3.</p>
</body>
</html>
Save that file as page2.html and place it in the same folder as your index.html file.
Now create a third page and insert the following:
Create one more page: page3.html
<!DOCTYPE html>
<html>
<head>
<title>Page 3</title>
</head>
<body>
<h1>This is page 3</h1>
<p>Click on <a href="index.html">this link</a> to go back to the index page.</p>
<p>Click <a href="page2.html">here</a> to go back to page 2.</p>
</body>
</html>
Save that file as page3.html and place it in the same folder as your index.html and page2.html files.
Once you’ve saved all three files (index.html, page2.html, and page3.html), go ahead and open your index.html file. Click on the bottom link that tells you to go to page 2 and you’ll notice that you’ve successfully connected your main page to page 2. Now, on page2.html, click on either links on that page and it will take you to each corresponding pages (the same with page3.html).
Congratulations! You’ve now created your first working website with different linking pages.
It may not be pretty just yet, but in later chapters, I’ll be going over how we can style our pages to make them more visually pleasing.
Exercises you can do on your own
- Play around with creating more pages and linking to them. For example, create a page 4 and page 5 with headings, parapgraphs and lists in them. Make sure you link to your other pages too.
- Create an ordered list of sites that you like to visit and link to them. Make sure you have them open up to a new window/tab.