As with the CSS tutorials, the XHTML tutorials are cumulative and dependent on each other. That being said, if you didn't read the Basics of XHTML Part 2 you may read it now or read on. Something interesting happens here, however. This is where we begin learning specific attributes, other neat HTML elements, and including styles into our HTML.

Styles

We won't get into great detail about the style attribute but we will cover the basics! Recall that attributes is additional information about an HTML element. This style attribute is one that we can place on ANY HTML element that you know!

content
<a style="text-decoration:underline;" href="url">Click here</a>
<img style="height: 15px; width: 15px;" src="image.jpg" alt="img" />
<p style="margin-left:25px;">content</p>

So we have a wide variety of elements and each of them has the style attribute which is defining additional information for that particular instance in which it is used. If you know a little about External and/or Internal Style Sheets, this style attribute (commonly referred to as Inline CSS) has priority over External and Internal Style Sheets. So if you have a style that defines the width and height of an image and you want to override that you would use this style attribute. Consider the following code:

<html>
<head>
<style type="text/css">
.img {
     border:none;
     width:100px;
     height:25px;
}
</style>
</head>

<body>
<div class="img">
<!--This will NOT work-->
<img src="image url" alt="img" width="50" height="25" />
<!--This will work-->
<img src="image url" style="width: 50px;" alt="img" /></div>
</body>

The first question you might as is why didn't we not define the height inside of the style attribute? The answer is simple, it is redundant! Since we want to keep the height 25px (at least for this example) is it perfectly legal to leave it out since the height is inherited from the class="img".

If you wish to read more about Inline CSS then Click here. If you wish to read more about CSS then read about it here

Hyperlinks and Anchors

I believe we talked about hyperlinks in the Basics of XHTML and we covered atributes in the Basics of XHTML Part 2 so we know that..

<!--Syntax for hyperlink-->
<a href="url">click here</a>
<a href="http://www.atomicpages.net">Atomicpages.net</a>

href="url" and href="http://www.atomicpages.net/" is an attribute that is telling the browser where this link is. However, there are some conditions we need to be aware of...

  1. If you want to link to a website other than your own you MUST include a protocol such as http:// and then the address of the website.
  2. If you want to link inside of your website you may use relative links or absolute links.

As minimal as these two things that we need to be aware of are.. the http:// is absolutely necessary in the attribute for hyperlinks to work properly. here for no http:// is a link neglecting the http://. If you click on that link it will take you to the 404 Page Not Found Page.

Target Attribute

The only target attribute we really need to associate ourselves with is target="_blank".

<a href="url" target="_blank">link</a>
<a href="http://www.atomicpages.net/" target="_blank">AtomicPages Hosting</a>

target="_blank" will open that link in a new window or tab depending on your browser settings. Usually there are some rules that I follow.. If I am referring to a link within the same website in which I am writing on, I'll do a standard link. If I am referring to a link outside of a website I am writing on I usually use the target="_blank" attribute so it opens and the user can still easily access the content with the hyperlink. It's all personal preference, however; not all people are thrilled by the idea of a new window or tab popping up and some people are irked when it doesn't.

Name Attribute

Have you ever visited a website like wikipedia and click in an article and it moves you to a certain part of the page? If not then visit this wiki article on the thrilling history of HTML and in the contents click on a link. You'll notice the url changed! Example:

<a href="http://en.wikipedia.org/wiki/HTML/">Wiki</a>
<!--to-->
<a href="http://en.wikipedia.org/wiki/HTML#HTML_version_timeline/">Wiki</a>

How in the world did they do that?! It is very simple actually! By using the name attribute of course! Consider the following:

<!--This labels the anchor-->
<a name="label">content</a>
<!--This calls the anchor-->
<a href="#label">content</a>

Back to Top.

So what's exactly happening here? Isn't there a style that says everything within a tags will be orange and underlined? Why isn't there anything that is underlined and orange at the top except that one link to the Basics of XHTML Part 2? Is it there?
No! Since I wanted to avoid any changed text and I wanted to avoid using inline css (because it's more work) I did the following:

<!--No content-->
<a name="top"></a>
<!--And to link the name attribute-->
<a href="#top">Back to Top</a>

Relative Links

Relative Links are links to files on your server. For example:

<a href="hosting.php">Web Hosting</a>
<a href="../index.php">Home</a>

This is perfectly legal to do and often is much better than using an absolute link. As long as the file that is referencing the file or address is within the same directory on your server it will still link properly. If you wish to go to one directory above to "link" a file then you use ../filename.

Absolute Links

Absolute Links are usually links to files beyond your server such as links to other websites. There are times when using an absolute link is necessary like to define an https:// protocol or maybe a address to a subdomain of your website or simply to another page that you know won't move.

Be Sociable, Share!