Now that we have the basics down, we can build something a little more complex. We’ll just cover images and links in this lesson (code in bold). In the next lesson, we’ll take a look at the meta tag and the class attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="twitter:site" content="@HemmingsNews">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Page Title</title>
</head>
<body>
<a href="https://paircode.com/forums/forum/general/">
Pair Code General Forum
</a>
<img src="/uploads/2021/08/red-panda.jpg" alt="Red Panda">
<div class="boxed-content">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer></footer>
</body>
</html>
Code Dissection
Anchor Tags
Anchor tags link text to other pages on your website or other websites.
<a href="https://paircode.com/forums/forum/general/">Pair Code General Forum</a>Here’s what this anchor element looks like in action: Pair Code General Forum If you click on the link, you’ll go to the general forum on this website.
href
The href attribute holds the URL (also known as a link).
URLs (Links)
Since this is the first time running into a URL, let’s dissect it.
https://paircode.com/forums/forum/general/https://
The scheme (https://) tells the web server which “protocol” to use. HTTPS stands for Hyper-Text Transfer Protocol Secured. It’s the “highway” for secure websites. All data passing through https is encrypted. Unsecured websites just use http.
paircode.com
The domain name (paircode) and TLD (com) combination are unique. Only one person can own it at a time. If you want to own one of these and point it to your website, you’ll have to buy it through a domain registrar like namecheap.com
URL Path
/forums/forum/generalThe last part of the URL is the path and page. We’ll dissect it even further.
/
The first slash tells the browser to start at the root of the website.
forums/forum
Then, you can have any number of subdirectories. Subdirectories can be actual folders on your web server or dynamically generated “folders.”
general
Finally, you have the page. Sometimes, the page is an actual file like contact.html (just like the path can be an actual directory), but this “page” is dynamically generated by WordPress.
This URL is an absolute URL. Absolute URLs are the most common, but if you are linking to a page on your own website, you can leave off the scheme and domain (paircode.com).
If I owned paircode.com (which I do) and I wanted to link to another page on my website, I could just use a relative URL ( /forums/forum/general).
Here’s what using a relative URL would look like.
<a href=”/forums/forum/general”>General Forum</a>
You might also be interested to know that URL stands for Uniform Resource Locator.
Image Tag
<img src="/uploads/2021/08/red-panda.jpg" alt="Red Panda">Eventually we were going to run into one of these (an img tag, not a red panda). The image tag lets visitors see images. This is an image of a red panda.
src
The src attribute tells the browser where to find the image. Images are files and have to be hosted somewhere. Usually, they’re hosted on the same server where your website is being hosted.
A server isn’t really anything special. It’s basically a computer that hosts websites and their assets (images, PDFs, etc.). Your images are stored in a folder somewhere on the server/computer. In this case, the path to the image is wp-content/uploads/2021/08.
/uploads/2021/08/red-panda.jpg
Since the image is hosted on the same server as the website, we can leave off the scheme and domain (https://paircode.com). This is known as a relative URL. It could’ve be absolute as well (https://paircode.com/uploads/2021/08/red-panda.jpg).
jpg
jpg is an image type. It’s the most popular type, but you’ll occasionally see png and gif images.
alt=”Red Panda”
The alt attribute gives the image a text description of the image.
There are a couple more attributes for the image tag, but that’s all we’ll look at for now. Don’t worry about trying to remember all of this. You’ll run into it lots of times in your coding career. If you encounter an unfamiliar tag or attribute, that’s when you should figure out what it is.