overview
Web pages get really interesting when we examine how they link together and connect to other forms of content, such as images, video, and maps.
Quiz/discussion
- What is a link? What kinds of links are there?
- What kinds of content can be displayed on a web page?
- What are helper applications?
Add a nav bar to the page
Pages in a website are usually connected to eachother with a collection of links, commonly known as a nav bar.
Let's consider links. The backbone of the WWW is its capacity for connecting web pages together. This connectivity is what makes hypertext hyper.
Create a new html file. Save it as template.html in your webroot directory. Inside your body tags, type in: <a></a> Put some text between the a tags and preview in browser. Inside the first <a> tag, after the a but before the >, type this code: href="index.html"
Between the a tags, type home
My philosophy of templatizing-do as much general work you possibly can, and then duplicate, either with copy paste or save as/save a copy. A nav bar is a good opportunity for this. Highlight the code you typed, copy, and paste, once for each page in your website. Change the text between the a tags for each page in your website: about links contact. Change the text in the quotes next to the href attribute as follows: about.html links.html contact.html. Hit enter or return after each line.
Your code should look like this:
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="links.html">Links</a> |
<a href="contact.html">Contact</a>
</div><!--end nav-->
We will discuss the div tag in more detail tomorrow. For now, understand that it creates a divide on the page, defining an area of related content. The comment at the end is a convention I use to tell me what div has ended. I can always see what the beginning div is called, but the ending div can get confusing, especially when there are a bunch of them.
Test in your browser. Not what you expected, eh? Why are the links lined up in a row, instead of on seperate lines?
This is the essence of the "whitespace" idea that we discussed in day 1. The browser ignores line breaks in your html code, unless they are explicitly stated with <br/> tags. Add <br/> tags at the end of each link, save, refresh. Now the links are stacked above eachother.
Nav bars are typically displayed in one of the two ways, depending on the design of the site. Consider the usability issues that pertain to both types. If you want to stick with the horizontal style, just get rid of the <br/> tags, and use pipes instead (< | >).
Understand what a path is
Take a look at the href="..." part of the opening a tag. This is called an attribute, and "..." is the attribute's value.
The href attribute makes the a tag become a link. It causes the text between the a tags become underlined and clickable. The stuff between the quotes (index.html, about.html, etc.) is called the path to the other pages.
Understand the difference between absolute and relative paths
Understanding paths is a very important part of understanding how html works. Html connects things, and it does so with paths. Paths can be local or absolute.
The links in your nav bar are relative paths. Relative paths are like telling you neighbor around the corner how to get to your house--"you just go to the corner, make a right, I'm the third house on the left". You're simple telling the page that has the nav bar go to another page in the same directory.
The collection of files that comprise a website may all sit in the same directory, on the same level, essentially relating to one another as siblings. But this approach yields a very messy, disorganized directory. Most websites consist of at least a directory for the images in the site, typically named images. Often, sub-directories are created to contain related html files. It's important to understand how these files can link to each other.
Consider a website with the following directory structure: in the root, or base-level directory are pages for home (index.html), about us (about.html) and contact (contact.html), and directories for news and images. In the news directory is a file called latest_news.html.
The path from index.html to latest_news.html is easy enough; the code would be
<a href="news/latest_news.html">Latest news</a>
But how do we get back to index.html? It gets a bit messy. The code for the link on latest_news.html would read:
<a href="../index.html">Back to the home page!</a>
That's not too bad, but imagine if your site had many nested directories. Trying to link from a deeply nested file back to a page on the root would require a ../ for each jump from the directory the file is located in to the root. Not enough or too many ../'s is a very common bug.
Absolute paths, on the other hand, are very explicit instructions for how to get to another page, or image, or any kind of file. They tell the browser to leave the current directory, and go to a domain name, such as google.com, or roswellpark.org, to find the file. This domain name is actually an IP address, that has been associated with that domain name by the company with which the domain name was registered with, or the registrar. The computer to which the IP address is assigned is the hosting provider. Sometimes these two services are provided by the same company, but I'd recommend against it. It's easy to switch hosting providers, but switching registrars can be tricky. An absolute path is referred to as a "url", or Uniform Resource Locator.
Absolute links are typically used in one of two situations: the author may be referencing an external site (most common), or the author wishes to avoid dealing with the array of ../'s that may plague a site with lots of pages and directories/sub-directories. In the former instance, authors may wish to have the visitor open the url in a new browser window. The easiest (although maybe not the best, since it will throw an error if validated as html 4.01 or better, for somewhat complicated reasons) method is to use the target attribute, as follows:
<a href="http://www.google.com" target="_blank">Latest news</a>
This way, you are not kicking your visitor off of your site. Unfortunately, visitors may not realize they haven't left your site, and may be annoyed when they close the new browser window, only to find your site staring them in the face.
To put a link on your page that uses an absolute path, you include the entire web address. Go to roswellpark.org, copy the link from your address bar, and paste it into your page. This way, you won't have to type in all the http:// stuff. Type <a href=", paste the url, and type ">. The a tags needs to enclose text that will appear as the link, so type something inside the a tags, like Where I Work, or My favorite site. Refresh the file in the browser to see the link appear on the page.
Last note re:absolute urls--note the attribute value contains the full url, including the http:// --another common bug when left off.
Other types of links are basic anchors, like <a name="waydownthepage">Some information way down the page</a>. If you wanted to link that text from somewhere else on the page, like on an FAQ page, you would use a link like this: <a href="#waydownthepage">Click here to see some information way down at the bottom of the page</a>. Notice the # sign in the path.
You can add title attributes inside your a tags, like this: <a title="Excellent recipes">allrecipes.com</a>
Add an email link
Another type of href value you can use is an email link. Add a line of code that will let your visitor send you an email: <a href="mailto:you@yourdomainname.com">Send me an email!</a>. One thing to beware of when doing this is that spammers have ways of finding out your email address by looking at the html code on the page for email addressed. It's not a bad idea to simple tell someone "Email me at you-at-yourdomain.com" and let people type in your email address manually.
Add an image
Let's dress up the page a little. Find a graphic you like on the web; google "unicorn" and click images. Find one you like, right click on it in your browser, and save the image to your html directory. Better yet, save it into a directory in your html directory. Call this new directory "images".
Go back to your text editor, and type <img src="images/unicorn.jpg" alt="unicorn" />
images/unicorn.jpg is a relative path. The browser doesn't need to look very hard to find unicorn.jpg; it's right there, in the images directory.
Let's examine the img tag for a minute. In english, the whole tag reads like this:
Here is a tag, see the less than symbol? OK, we're dealing with an image, an img for short. Well, where is the image, asks the browser? What is its source? The next part of the code says the source, or src, for the image is in a directory called images, in a file called unicorn.jpg.
Note the alt attribute in the above tag. This tells the browser what to display if the user has turned off images in his/her browser, or if the user is viewing the page with a screen reader. The alt tag is good practice, and xhtml 1.0 strict requires it, so make sure you always include it.
Add a youtube video and a google map to a page
You can add all sorts of things to your website. Maps and videos are always fun.
To add a google map, go to maps.google.com, search for a place you want to grab a map from, and click the "Link to this page" link in the upper left corner of the browser window. Copy the text in the box under "Paste HTML to embed in website", and paste it on your index.html page. Save and check the page in your browser.
To add a youtube video to your page, go to youtube, find a video you like, choose the code next to "Embed" in the upper right corner of your browser, copy, and paste it onto your page. Save and check the page in your browser.
Add an iframe to a page
You can even add another web page to your page! iframe is how.
To use an iframe, simply add this code to your page:
</iframe>
quiz/discussion
- When used within the a tag, what does the href attribute do?
- When is it appropriate to use an absolute url? A local link? How do the paths for these two types of links differ?
- How do you open a page in a new browser window?
- What other kinds of links are there?
lab
- Create a new directory called lab2.
- Create a sub-directory called images in your lab2 directory.
- Find a logo you like on google images or anywhere, and save it in the images directory.
- Insert it into your template page via the img tag, above the code for your nav bar.
- Don't forget your alt.
- Below your nav bar code, add an h1 tag that containing the following content: HEADING 1 GOES HERE.
- Below the h1 element, add a p element, containing the content: PARAGRAPH GOES HERE. Create the files you link to in your template; index.html, and so on.
- Save them into the lab2 directory.
- Text your website by going to http://localhost/lab2 (notice that although you don't specify index.html, this is the file that gets loaded by default.
- Note how although you have made 4 pages, you really only worked on one-the template.html file.