HTML/XHTML Basics

Basics of XHTML Part - #3

1

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.

Basics of XHTML - Part #2

1

As we covered in the Basics of XHTML, we have basic rules that we need to follow in order to correctly write XHTML and get the results we want. We know that for most elements, we need an opening tag and closing tag. There are, however, some elements that are self-closing such as the img element and br element.

<start tag>content</end tag>

<a href="http://www.example.com">Example</a>
<img src="images/img.png" />
<br />

This tutorial will cover additional major concepts of HTML such as attributes and a basic introduction to various HTML elements.

HTML Attributes

  1. HTML elements can have attributes
  2. Attributes provide more info about the element
  3. Attributes are always defined in the start tag

The general syntax for attributes is as follows:

<start attribute="value">...</end>
<a href="http://www.atomicpages.net">AtomicPages</a>
<img src="images/img.png" height="200" width="200" title="Image" />

As mentioned previously, attributes provide additional information about the element that is being used. For instance, consider our img element that is used above. We have three different attributes that are contributing to the information of this element.

  • height - setting the height in px
  • width - setting with width in px
  • title - setting the title of the image

Not all attributes can be used on all HTML elements. There are restrictions on which can be used and which cannot be used. To see all of the attributes, see this W3C reference.

Common Attributes

Here is a list of some very common attributes that we will encounter very often in the future.

<start class="[class name]">...</end tag>
<start style="[inline css]">...</end tag>
<start id="[id name]">...</end tag>

<p class="start">...</p>
<span style="font-size:15px;">...</span>
<div id="header">...</div>

These three attributes are perhaps the most common attributes aside from "href" and "src". These attributes aid in styling web pages usingCSS which we cover in a separate tutorial series. They are, however, still very important to be aware of and how the function as attributes.

HTML Formatting

We can think of an HTML document as one without any formatting whatsoever. HTML does not have a mind of its own and will not automatically format itself like a term paper would in Microsoft Word or any other word-editing program. All of the formatting is organic and has to be done manually by us. Though this may seem tedious, we eventually grow fond of it because we can see our work come to life.

The most common formatting tags will produce various results. We can create bold text, italic text, big text, an underlined text all without any additional assistance from anything other than pure HTML. We don't even need anything other than pure HTML so create a web site!

Text Formatting

Tags Description
<b> Bold Text
<strong> Strong Text
<i> Italic Text
<em> Emphasized Text 
<u> Underlined Text depreciated use inline css instead
<s> Deprecated, strikethrough text. Use <del>.
<strike> Deprecated, strikethrough text. Use <del>.
<del> Deleted Text
<ins> Inserted Text
<sub> Subscript Text
<sup> Superscript Text
<big> Big Text
<small> Small Text

So what do all of these insane tags do? Well, let's start form the top!

  1. Bold and Strong.
  2. Italic and Emphasized. <i> is deprecated.
  3. Underlined Text without the use of styles. <u> is deprecated.
  4. Strike and Strikethough do the same thing but are depreciated1
  5. Deleted Text is the preferred way of creating strike though text.
  6. Inserted Text is an alternative way of creating underlined text.
  7. Subscript is subscript text.
  8. Superscript is superscript text.
  9. Big is a way of creating big text.
  10. Small is a way of creating small text.

Computer Text

Tags Description
<code> Computer Code Text
<pre> Preformatted Text
<samp> Sample Computer Code
<tt> Teletype Text
<kbd> Keyboard Text
<var> Defines a Variable
  1. Code, Pre, Teletype, Sample Computer Text, and Keyboard Text do essentially the same, which is formatting text in a way that it appears to be computer code. There are differences between them, however, but we need not be worried about this yet.
  2. Variables is slightly different for instead of making the text monospace it actually italicizes the text.

Quotes, Citations, etc

Tags Description
<blockquote> Long Quotations
<q> Short Quotations
<cite> Cites something
<address> Address Element
<abbr> Abbreviation Element
<dfn> Definition Term
<bdo> Text Direction
  1. Generally you'll see blockquote on forums or blogs somewhere, you'll click "quote" and then a new window will pop up and you'll see blockquote in HTML of BB Code form (usually). As you can see, using this blockquote element, our text is the same, however, the background is different to signify this long quote.

  2. The "q" element is a short quote. Notice how the "q" element is simply surrounded by double quotes to signify it's existence as a short quote.
  3. Cited text it different to let users know that whatever you are referring to is a cited source. You may want to utilize the "sub" and/or "sup" elements when using the "cite" element so you can create footnotes at the bottom of the web page.
  4. The address element if for placing an address in

    . The text is intentionally different for the specific use of an address.

  5. A definition term is more like a type of list. We will be covering this later on.
  6. This "bdo" element should not be be used unless you want wish to have the direction of text reversed.This text will read from left to right. This text well read from right to left.(This text will read from right to left - it's backwards!)

1. Depreciated — These are outdated HTML elements that have been replaced by more conventional, functional, and flexible alternatives. Though some browsers may support these elements, their continued support cannot be assumed; eventually these tags will become obsolete and browsers will not support their functionality.

A List of Depreciated Elements and their Alternatives

Tags Description Replacement
<applet> Inserts Applet <object>
<basefont /> Sets defaul font color and size font style sheets
<center> Centered Text text-align:center;
<dir> Directory List <ul>
<font> Font, color, and size of text font style sheets
<isindex> Adds search field <form>
<menu> Menu List <ul>
<s> Strike through text <del> or style sheets
<strike> Strike through text <del> or style sheets
<u> Underlined text text-decoration:unerline;
<xmp> Preformatted Text <pre>

Basics of XHTML

3

What is HTML

What does HTML even stand for anyhow? HTML stands for Hyper Text Markup Language. HTML is not a web programming language like PHP or ASP, it is a markup language. HTML uses elements to create web pages.

HTML Tags

  • HTML Tags are keywords surrounded in angled brackets like: <tag>
  • HTML tags almost always come in pairs, for example: <opening tag> and <closingtag>
  • The first tag is called the start tag and the second tag is called the ending tag. Though, alternative forms of these titles exist, they can commonly be referred to as starting and closing tags, beginning and ending tags, or opening and closing tags.

What use is HTML?

HTML is the language that web browsers, such as Mozilla Firefox, Google Chrome, Apple's Safari, and Microsoft's Internet Explorer, read and interpret to display a web page. Every time you visit a web page, a web server is sending your web browser HTML code. Your web browser then turns the raw HTML into paragraphs, headings, images, and other nifty things that we can do on web sites!

How Do We Code HTML?

Writing HTML is easy and can be done using the standard default text editor such as notepad, textedit, or even wordpad. In theory, one can use Microsoft Word to write your html, just be sure to save your initial document as a .txt file since .doc, .rtf, etc have additional formatting that is not needed for HTML.

Other great programs that might or might not be available for free are Notepad++, Netbeans IDE, Aptana Studio, and Dreamweaver.

Writing HTML

If you are using Textedit or Notepad, you need to be sure that you can modify file extensions from .txt to either .html or .htm, they are two of the same.
Note: The file extension .htm is loitering around from the days when you could only have a three-character file extension; there is no difference between .htm and .html.

HTML Syntax

Generally, you'll have something like the following:

<start tag>Text</closing tag>

This is the very basic syntax of HTML. There are, however, more sophisticated ways of integrating HTML, CSS, and Server-Side Programming Languages that we will discuss in later article series.

Doctype

Declaring the DOCTYPE is not absolutely necessary but it's a W3C standard as really should be used. This is how each HTML document should begin since this states which version of HTML we are using, how the page is encoded, and other important meta data. Below is an outline of XHTML 1.0 Transitional blank HTML document. We also want to declare the DOCTYPE for our Internet Explorer users since IE can produce buddy and unpredictable results if no DOCTYPE is declared.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--where metadata, scripts, and other code goes-->
</head>

<body>
<!--where all HTML goes-->
</body>
</html>

Since the W3C calls this as a standard, it is important that all HTML documents have a similar setup. We need not concern ourselves with the different types of HTML or the functionality of metadata yet.

Common HTML Elements

Here are some very common HTML elements that we will use when creating a web page.

HTML Paragraphs

This element will define a paragraph within a web page.

<p>This is a Paragraph</p>
<p>This is another Paragraph</p>

Heading Elements

<h1>This is a giant heading</h1>
<h2>This is a big heading</h2>
<h3>This is a medium heading</h3>
<h4>This is a small heading</h4>
<h5>This is a smaller heading</h5>
<h6>This is the smallest heading</h6>

Try creating a blank HTML document and testing these headings yourself and see how they are different!

Links

Links, or anchors, are an essential part of a web experience. Links can take us to other pages within the website and to other websites that have the information we want. Creating links, or anchors, is a very easy and is critical to any website.

<a href="link address">click here</a> <!--This is a link-->
<a href="http://www.atomicpages.net">AtomicPages Hosting!</a>

Using the same code as above, this will allow us to link to other pages, whether within or outside of our web page. When creating links, the url of the website must include http://www.websiteaddress.com. This specifies the protocol to use when opening a link and specifies the world wide web for the website address. Try creating a blank HTML document and creating various links to web pages.

HTML Images

An Image is a digital graphic file such as a .gif, .jpg, .png, .bmp, etc. For web purposes, we only need to be concerned with .jpg, .png, and .gif since they are compressed. Images create a pleasing (or displeasing) experience for users on a web site. Sometimes images can be used to create navigation menus, background patterns, or even contain information for visitors to see. To put an image on a web page, we can use the following HTML:

<img src="image url" />
<!--This is an Image-->
<img src="images/picture.jpg" />

Note: the links used above are called relative links and will be covered in later articles.

There is something different about this element, however. This is known as an empty element and is used with only certain tags such as image tags, link tags (<link />), and meta tags. These elements do not have a closing tag, they are self-closing tags.

Applying this information image tags we can embed an image such as... flower into our web page with ease!

These are the absolute basics of HTML that will help you on your way to creating a web page of your own one day!

Think you got it? Take the quiz and find out!


Organizing your HTML and CSS

0

Code that is neatly organized is much easier to read, easier to fix, and just better overall for you and anyone else that might be looking over your code. Whether you are using Adobe's Dreamweaver or just Notepad, keeping things organized is essential.

For starters

One thing that you can do to help the building process of a website is to simply add HTML comments at the end of div tags, at the start of a major section on your site, etc..

Here's an example:

<!--start header-->
<div id="header">
     <div id="menu">
          <ul>
               <li><a href="home.html">Home</a></li>
               <li><a href="blog.html">Blog</a></li>
          </ul>
     </div><!--end menu-->
</div><!--end header-->
<!--start content-->
<div id="content"></div>

Comments help us understand code better. We can define clear lines in our code that state where items begin and end. In the example above, we have three comments:

  • <!--header-->
  • <!--end menu-->
  • <!--end header-->
  • <!--start content-->

These comments are separating the HTML into different sections so we can quickly identify where in the HTML we are. If you have any experience with server-side programming languages, this is similar to the multi-line comment /* Commented out code here */

CSS Comments

The same principles may also apply to CSS as well. Lets say that you have..

body {
     background-color: #3b3b3b; /*rgb(59, 59, 59)*/
     margin: 0px;
     padding: 0px;
     line-height: 1.4em !important; /*do not change!*/
}

For CSS the same principles apply to HTML. We create comments to indicate where we are in the style sheet and also to make notes on our style sheet. In this example, we have a few notes that we left ourselves or anyone else that looks at our style sheet. Our first comment has the corresponding rgb values of our color and the second comment is to tell other people that the value should not be changed under any circumstances.

Commented out code

body {
     margin: 0px;
     padding: 0px;
     line-height: 1.1em !important;
     width: 1000px;
     /*min-width: 900px;*/
}

Commenting out HTML, CSS, PHP, JavaScript, etc... can be an easy and painless way of testing whether or not you have an error in your coding. You can easily comment out a segment of code and then test your project to see if the error still occurs.

Summary

These comments can be useful for you and anyone else that you are building a website with, for homework assignments if you happen to be learning web design in a class, or for any computer language really. They are not necessary to keep after the building and refining process is complete, however, they won't hurt anything if you decide to leave the comments there.

Using good practices when writing XHTML

1

The  latest standards for making websites these days is XHTML and CSS, yet I still see websites quite frequently using some of the old practices that have been deprecated or are just plain wrong to use in XHTML today.  Here I'd like to highlight some of these old practices and how to fix them to be compliant with today's standards.

XHTML elements must be nested within each other

<strong><i>This is Correct</i></strong>
<i><strong>This is Incorrect</i></strong>

XHTML elements must be in lowercase

This is incorrect:

<IMG SRC="image.png" alt="Image" />

This is correct:

<img src="image.png" alt="Image" />

XHTML elements must always be closed

This is incorrect:

<ul>
     <li>list item 1
     <li>list item 2
</ul>

This is correct:

<ul>
     <li>list item 1</li>
     <li>list item 2</li>
</ul>

Even tags like br tags and img tags must be closed, but in a slightly different way.
This is incorrect:

An Image: <img src="image.png" alt="Image">
A Break: <br>

This is correct:

An Image: <img src="image.png" alt="Image" />
A Break: <br />

All XHTML attribute values must be in double quotes!

This is incorrect:

<img src=image.png alt='Image' />

This is correct:

<img src="image.png" alt="Image" />

There are many more differences as well, but those will be saved for a later post.  You can visit http://validator.w3.org/ to test if your code is compliant and if not, see how many and what errors you have in your code.  It will even fix your code for you, if you check the "Clean up Markup with HTML Tidy" checkbox under "More Options."

Go to Top