Thursday: Adding links to other Web pages

Before getting into today's content, let's install a package in Atom. The name of the package is file-icons, and it won't do much at this point in the course, but as you start adding other files to your project you may find that these icons help you keep track of your HTML, CSS, and other file types. It adds an icon next to each file name. That's all it does.

Yesterday I showed you how to add comments and I also showed you a bit about attributes and the values they require. Today we're going to learn what is the most powerful combination of tag, attribute, and value in the world of HTML: the hyperlink.

HTML stands for Hyper Text Markup Language. The hyperlinks that we're going to make today are what the entire language is named after. The Web depends on the ability of each document to connect to other documents, in an ever-expanding chain that ultimately allows you to travel from any one page on the World Wide Web to any other page, if you're willing to click on enough links.

To do this, you are going to use anchor tags. Like paragraph tags, anchor tags are a single letter held by brackets: ‹a›. On their own they don't do much. But if you add a value to its hypertext reference attribute, suddenly it connects to another document. If, for example, we wanted to create a link to Google's search engine, we would type ‹a href="https://www.google.com"›. That establishes a link between Google's search page and your document. Think of it like putting an address into your phone's GPS app, but when you click on it instead of telling you how to get to your destination it simply teleports you there, instantly.

That's how the Web works. It turns out that anchor tags need to be manually closed, however, and they also need to have something (text or an image) between the start and stop tags so that you have something to click. If I wanted the word "Google" to appear on the web page and be clickable, I would type ‹a href="https://www.google.com"›Google‹/a›, and the word Google is transformed into a clickable portal from here to Google's search engine. It's that simple.

Now I want you to take some time and curate a handful of Web sites - 6 is the goal - that deal with the topic you're interested in trying as your project. I then want you to create an unordered list of them on your index.html page. Earlier in the week I showed you how to make an ordered list by typing ‹ol›; an unordered list is similar, except you will substitute a "u" for the "o," like so: ‹ol›. Everything else is the same about the way these two lists are coded to work. Ordered lists put items into a numbered or lettered sequence; unordered lists just put bullet points to the left of the items. I will demonstrate on the board how to do this.