1.7 - Links & Paths
Today's lesson is mostly live demo. If you miss class, read and follow the links below to learn independently (and ask a classmate).
Review:
If you've been absent, you would benefit from catching up on the previous lessons.
We have looked at the structure of an HTML document and several tags
<!doctype html> , <head> , <body>
Various basic HTML tags for things like text, tables, lists, and images
Most tags have lots of optional attributes
w3schools and Google are your best friend for learning HTML!
Part 1: Links (hypertext)
The strongest aspect of webpages is interactivity and the ability to follow a link to another page.
A "Hyperlink" was the first active tag created for HTML. It was originally known as an anchor because it marks the end of your visit on the current page, leading to a new location.
The tag is <a>Content to make hyper</a> but it requires the href attribute. "Href" stands for "hyperlink reference" and it is the destination of the link.
Example 1: <a href="www.snapchat.com">Click here to go to Snapchat</a>
Almost anything can be hyper or clickable.
Example 2 - Make an image hyper:
<a href="www.brash.ca">
<img src="./images/logo.png">
</a>
The anchor tag can be used for linking to a heading inside your own page (called bookmarks), opening a link in a new tab or window, and a few other things.
Part 2: Organization
Ever think of how many files are on Wikipedia.org or Amazon.ca? Keeping your files organized is very important.
Developers use folders and proper naming conventions to make their work easier. Let's look at a typical structure:
The first page of your site must be in the root folder (lowest or main folder) and for default web servers, it must be named index.html.
You can change the home page filename but the server would need to be configured to do so.
Media should be separated into images and video, etc.
Other HTML files should be organized in folders
Scripts and Style should also have their own "homes"
Files should be named very descriptively and with a common look and feel. If you decide on using camelCaseNaming or under_score_naming, it should be consistent.
Practice Time!
We will keep using the same repo from 1.5:
Create a folder for pages
Inside your new pages folder, create a new HTML file (following proper structure) called history.html
This new page is for historical information or facts about your topic.
Be very careful - if this new page has pictures, you're going to need to learn about file paths!
Feel free to add as many pictures as you want but always store them in your images folder
Feel free to add as many extra pages as you want but always store them in your pages or html folder
Extra
Entire list of HTML tags by category and by alphabet