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.
Add a nav bar to the page
Pages in a website are usually connected to eachother with a collection of links, or 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.
In the web page you started yesterday, type this code: <a></a> put text inside 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 much 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.
Ok, get rid of the <br/> tags, and use pipes instead (< | >). For our basic site, we will use a horizontal nav bar instead of a vertical one.
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.
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. An absolute path is referred to as a "url", or Uniform Resource Locator.
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.
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 folder. Better yet, save it into a folder in your html folder. Call this new folder "images".
Go back to your text editor, and type <img src="images/unicorn.jpg"/>
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 folder.
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 folder called images, in a file called unicorn.jpg.
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>