HTML Tutorials III :: Hyperlinks and Lists

OK, here we go, lesson 3. First of all, lets cover hyperlinks. These allow you to link to other web pages or different parts of the current page you’re on. Here’s what the tag looks like to link to another page:

<a href="about.html">Go to the about page...</a>(the real url for the link you just saw is "this-is-about-jeff.php")

So you see, you wrap the text around the text you want hyperlinked. Let’s take a closer look at the tag itself. a stands for anchor and is the tag’s name, href stands for Hypertext Reference and is used to define the location of the hyperlink (i.e. a webpage part of your site, on someone else’s site, or another part of your current page).

So how do you know what value to give to the href property? By knowing the url. For example, this site’s url is https://tonysgeektips.wordpress.com. So, if you were to set a hyperlink (in you hello-world.html file perhaps…) to <a href="https://tonysgeektips.wordpress.com">go to a cool site</a>, it would create a link around the text.

Ok, now you’re probobly wondering why I sometimes include a “HTTP” and why I sometimes don’t. The answer lies in relative paths. So, what’s a relative path? Well, first of all, a path is the trail that the browser goes on to look for a site…the url. So, instead of telling the browser to look for a global address from the internet (with an “http://&#8221; prefix), you can tell it to look for a web page relative to the current one.

For example, say you’re out hiking and you get lost, and suppose you come across some other hikers who a not lost. You then ask them for directions, they then tell you how to get back to the campground. They say to go back 1/4 mi. then when you reach a big rock turn left and walk for 2 miles. You find your way back to camp and everyone lives happily ever after. The End.

The other hiker just gave you relative directions to get back to camp. That is, directions on how to get to camp from where you currently are. Those directions won’t get you to camp from your house, the store, or the moon. They only work from where you were when they were given. If you wanted to give the full directions, you would need to give latitude and longitude (or similar).

The analogy is perfect, the directions that the hikers gave you is the relative path, while the latitude and longitude is the absolute path. A web site is broken down into folders and files, and the internet is broken down into web urls. So, an example relative path to get from http://www.mysite.com/index.html to http://www.mysite.com/folder/file.htm would be “/folder/file.html“, because it takes you current location and sends you to the folder called “folder” and to the file inside of it called file.html. But, if you are on the http://www.mysite.com/folder2/folder3/anotherfile.html, that will not work. The browser will try to go to http://www.mysite.com/folder2/folder3/folder/file.html, and that’s not what we wanted. First, we need to go “up” one folder (to the site’s root (http://www.mysite.com)). To do this, we need to tell the browser. We do this like this: ../../folder/file.html (which is still a relative path). The ../ tells the browser to look one folder closer to the root of the site.

Ok, so relative paths make it easier to navigate around your site, but what if you want to get to another site? That’s when we use the absolute paths (“latitude and longitude” from the hiking anology). Here’s some good news, absolute paths are much easier to understand than relative paths. They begin with http://, then you add on the site’s url, and any nessesary files and folders (e.g. http://www.mysite.com/folder/file.html). It’s that simple.

One more thing, to open up the link in a new browser window, use the target="_blank" property of the <a> tag. So, an absolute path for this blog would become <a href="https://tonysgeektips.wordpress.com" target="_blank">A cool blog...</a>.

Next I’ll cover lists. Lists are ways to organize data in “bullet-point” type style. Here’s an example of one (describing two different types):

  • Unordered lists (list with dots or other symbols to begin a new item) begin with the <ul> tag and end with the </ul> tag…
  • Ordered lists (lists with numbered content) begin with <ol> and end with </ol>
  • Both lists use the <li> tag to begin a list item and the </li> tag to mark the end of one…
  • Unordered lists have several different types of “symbols” that can be used
    • Square
    • Circle
    • and Disc
  • You set the type with the ul tag’s “type” property (e.g. type="circle")
  • All lists must be properly nested (example below)…

Here’s an example of improperly nested tags:

<ul><li><li></li></li></ul>

It should be like this:

<ul><li></li><li></li></ul>

Note that the tag most recently opened must close before an earlier tag.

Thanks for reading! Next time I’ll cover tables. Tables use many of the same concepts as the lists, so it should be easy to learn once you understand lists.

Advertisements

One Response to HTML Tutorials III :: Hyperlinks and Lists

  1. Rodeo4Christ says:

    The camping story helped explain it a lot. :o) Otherwise, I would have been lost……..

    Thanks, Jeff!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: