Ok so if you’ve followed along with part one you should be familiar with HTML tags and the basics of an HTML page. If you’re not go back and read part 1, download the code and watch the videos http://keytheory.com/crash-course-in-web-design-part-1-basic-html-tags/.
There are three things I want you to take away from Part 2.
- Absolute vs Relative Links
- Linking pages to each other pages, files or sites
- Bringing in images from other directories, or sites
Absolute vs. Relative Links
Absolute URL
An absolute URL is a full path in a URL (Uniform Resource Locator) to a exact destination or file. examples:
- http://domain-name.com
- http://domain-name.com/directory/
- http://domain-name.com/directory/sub-directory/file.extention
You’d use absolute links if you were:
- linking to web site
- linking to a file on web site
- theming a CMS that requires absolute links
Relative URL
A relative URL is a path to a destination or file relative to the location that the link is being called from. examples:
- /directory/
- /directory/file.extention
- /images/logo.gif
You’d use a relative link if you were:
- linking to files with in your site
- linking to pages with in your site
Linking pages to each other pages, files or sites
Okay so now you’ve got the difference between absolute and relative you just need to apply it with HTML to get it working in action.
If you recall the tag for links <a href=”destination-here”>Text Here</a>
What this is doing is opening an anchor tag <a></a>, giving it a destination href=, and telling what the anchor text will be. Anchor text is the actual text making up the link, it can be an image as well. For SEO purposes use keywords when creating anchor text.
Examples using HTML Links:
Link to the another site:
<a href=”http://twitter.com/kennywharper”>View my Twitter</a>
Link to a file located in the same directory:
<a href=”myfile.doc”>Check out this document</a>
Link to another site and open another tab/window:
<a href=”http://youtube.com/keytheory/” target=”_blank”>My YouTube Page</a>
Link to another page in a directory (named chocolates) on the same site:
<a href=”chocolates/myfile.htm”>My YouTube Page</a>
“/” will take you to the root directory:
<a href=”/”>Go to index</a>
“../” will take you to a directory higher.
<a href=”../”>Go to directory above</a>
Check out the source code for more examples.
Bringing in images from other directories or sites.
At this point you should get how to link to other files but what about getting images into your document?
Recall the image tag: <img src=”mypicture.jpg” />
Img stands for image, src for source, you can also put other attributes such as an alt tag or size dimensions:
<img src=”mypicture.jpg” alt=”Description of image for seo & vision impaired” border=”0″ />
This technique is used code images into your HTML page, different mark up is used for embedding Flash, Videos or Scripts and will be looked at later. * Note you can also use CSS (Cascading Style Sheets) to bring images into your web design. Using CSS is best practice when building a site, this will be covered later.
Examples coding images into HTML pages:
Now to get an image into your page from somewhere else you just need to determine the source.
Code in image from another site: (absolute)
<img src=”http://img383.imageshack.us/img383/3066/ss35450qf7.jpg” />
Code in image from the directory named “images” located in the same directory: (relative)
<img src=”images/myimage.jpg” />
Assignment 2:
- Download the source files
- There are two folders in the zip: “cc-2-start” & “cc-2-finish”
- Open the file “index.htm” within “cc-2-start” in a text editor and follow the instructions
- Check your code against the index file located in “cc-2-finish”
- Open up both files in a browser to see how they render
