Links and HTML
Links and HTML
LEARNING GOAL: The Basics of HTML
Students will be able to design multiple web pages with HTML through the use of simple Text Editors.
No web site is complete without links. Either you are linking to pages within your own website (folders) or you are linking to another website, another web page, or another folder. And if we’re being perfectly honest, there would be no World Wide Web without links, since the Web depends almost entirely on people linking to each other.
If you build a website that doesn’t link to anyone else’s website, then it’s almost like your website is alone on an island in the middle of the ocean. No one knows you’re there. And if you build a webpage that doesn’t link to another one of your own webpages, it’s like you’re a dog chasing your tail. Your page will never go anywhere or mean anything.
One part of HTML, the HT, stands for “hypertext,” which basically refers to any text on a page that can be clicked on so that the reader can find more information. So even HTML was designed with links, or “hypertext,” in mind from the very beginning.
But how do we create links on a page? How do we create links that open in new windows or tabs? When should we really have links open in new windows? How can we create linked images? These are questions we’ll answer in the lesson.
DAILY SCHEDULE (85 MINUTES):
PART 1: GETTING STARTED (20 Minutes) – Source Code Writing
Between Lesson 2.2 and Lesson 2.5, you are responsible for getting 4 out of 6 source codes completed for an A (3/6 = B, 2/6 = C, 1/6 = D, 0/6 = F). However, if you finish any of them early, just keep going because the more pages you build, the more prepared you’ll be for the Learning Goal #2 Project. Source Codes will be due by the end of Lesson 2.6.
Source Codes that are highlighted in green are new codes from this lesson, but you may finish an old first if you wish.
Source Codes that are highlighted in yellow are error codes that will only work if you fix the syntax problems.
SOURCE CODE :: HTML SAVE TITLE :: FOLDER :: LOOKS LIKE
If you finish ALL of these codes, please feel free to go back and work on your personal web page (index.html) or explore the W3Schools website.
PART 2: CLASS DISCUSSION (20 Minutes) – Human Links
Topic #1 – Open Forum (Part One)
Survey: How many of you would be open to the idea of a Phone Blackout Day? How about a Social Media Blackout Day?
What are some of the benefits of the Internet and the Web?
What are some of the benefits of linking people together instantly across the globe?
Are there any disadvantages of all this linking together? Why or why not?
Topic #2 – Two Minutes for Perspective
Topic #3 – A Message from Tim Berners-Lee
“Link by link we build paths of understanding across the web of humanity. We are the threads holding the world together.” (Tim Berners-Lee, Weaving the Web)
Topic #4 – Open Forum (Part Two)
Are we the threads holding the word together or are we, through the Internet, and the Web, and all of our social media, actually tearing it apart?
Why do we, or anyone, use the Internet to hurt each other?
Are there ways we can restore the ideals of the Internet that Tim once had in mind? Are there ways we can be better citizens of the Web?
PART 3: CLASS DISCUSSION (45 Minutes) – HTML Links (A = Anchors)
Topic #1 – Review Questions
1. Name three examples of self-closing tags.
2. __________ is basically just “grammar” for coding.
3. What does the word copyright mean?
4. Which organization was created to help make sharing creative works a little easier on the World Wide Web?
5. Explain the difference between internal and inline styling.
Topic #2 – W3C & W3Schools
All of these rules about how to write with HTML are determined by an organization known as the W3C, or the World Wide Web Consortium. The people who work for the W3C live all around the world, making it a large, international body of experts. The person in charge of the W3C? Tim Berners-Lee.
However, you don’t go to the W3C when you want to learn HTML. Instead, you go to W3Schools, a resource for teaching yourself how to write almost any kind of web design code. Get comfortable with the W3Schools website because it can be your greatest resource throughout the semester.
Now that you’ve had a few days of coding HTML, let’s see how you do with a quick, 40-question HTML quiz from W3Schools. When you finish, go back to the main HTML Home page, then look for the “HTML Tag List” in the left column and experiment with the <a></a> anchor link tag.
Topic #3 – The Purpose of Links
Nothing is more important to a website than its links. You can have a page with amazing images and well written text, but if it doesn’t connect to another page or another website, then it has no value to the World Wide Web. So there might be no more important HTML element to understand in this learning goal.
Topic #4 – Two Types of Links
Internal Links – If a link on my page goes to another one of my own pages, that means I haven’t gone anywhere beyond my own files and folders. We call them internal links because they are local.
External Links – If a link on my page goes to another website or a web page that I did not create, this means I have gone outside of my own files and folders. We call these external links because they have nothing to do with us directly.
Topic #5 – From Links to Anchors
If we were writing HTML in its simplest form, an HTML link element might just look like <link></link>. Instead, links are created using something called an anchor, which is abbreviated to look like <a></a>.
All links use an Anchor Tag (<a></a>) as follows:
The “a” tag stands for “anchor”
The “href” attribute stands for “hypertext reference”
The URL or FILE NAME goes inside of the quotations
The name of your link goes between the opening/closing tags
Topic #6 – Writing Internal & External Links
1. Internal Links are your own links (the ones from your own folders). Instead of URLs, you refer to folder files in the same way that you learned how to link images in the last lesson. For example:
<a href=”index.html“>Home Page</a>
<a href=”pages/ivyleague.html“>Ivy League Page</a>
Remember that if the page you want to link is in a folder ABOVE the folder you’re working in, you would use the DOT DOT SLASH procedure (../).
2. External Links are the links that go to someone else’s website or web page. For example:
<a href=”http://www.whitehouse.gov“>The White House</a>
Notice that the URL begins with HTTP and ends with a domain extension (.com, .gov, .edu, etc)
Topic #7 – Image Links and New Windows
1. Opening Links in New Windows
If you want to open up a link in a new window, you must add target=”_blank” inside of the opening anchor text. For example:
<a href=”http://twitter.com” target=”_blank”>Twitter Link </a>
2. Using Images as Links
If you want to make a link into an image, you would follow all the same rules above, but instead of giving the link a name between the anchor tags, you would insert an image code between the anchor tags. For example:
Instead of writing this code with a link title:
<a href=”http://youtube.com” target=”_blank”>You Tube</a>
You would write this code with an image location:
<a href=”http://youtube.com” target=”_blank”><img src=”images/youtubeicon.jpg”></a>
Topic #8 – Cooperative Practice
Before we return to our Source Code writing, let’s practice together as a class. Remember, a good portion of time was already spent practicing with links back in Lesson 2.1. This is just a little more in-depth. Open a new Notepad Document and save it as “newlinks.html” in your “pages” folder.