HTML/XHTML Basics

Basics of XHTML Part – #6

Jan 22nd

Posted by Dennis Thompson in HTML/XHTML Basics

No comments

Today we are going to talk about List types in HTML. There are three lists that HTML supports:

  • Unordered Lists
  • Ordered Lists
  • Definition Lists

Unordered Lists

An unordered List is a list that have bullets in front of the list item (normally little black circles). The Unordered List starts with a <ul> tag and each new item starts with an <li> tag. The syntax is as follows:

<ul>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
</ul>

The browser output will look this:

  • Item 1
  • Item 2
  • Item 3

You can put unordered lists inside paragraphs, line breaks, links, images, lists, and other non-block level elements. We would use an unordered list if we wanted to create a list that didn’t have any specific order, like a grocery shopping list.

We can also change how the bullets look without using style sheets or inline css. Within the <ul> tag we simply add an attribute called type and add the value we want. Here are the values we can put:

  1. disc
  2. circle
  3. square

Here is the syntax:

<ul type="disc">
     <li>Item 1</li>
     <li>Item 2</li>
</ul>
<ul type="circle">
     <li>Item 1</li>
     <li>Item 2</li>
</ul>
<ul type="square">
     <li>Item 1</li>
     <li>Item 2</li>
</ul>

The browser output is like this:

  • Item 1
  • Item 2
  • Item 1
  • Item 2
  • Item 1
  • Item 2

Ordered List

An ordered list is a list that is marked with numbers instead of bullets. The ordered list starts with an <ol> tag and then each list item (like the unordered list) has the <li> tag around the item. The syntax is as follows:

<ol>
     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
</ol>

The browser output will look this:

  1. Item 1
  2. Item 2
  3. Item 3

You can put unordered lists inside paragraphs, line breaks, links, images, lists, and other non-block level elements. We would use an ordered list if we wanted to create a list thathas a specific order. A good example would be if you were creating a step by step guide.

Like the unordered list, there is a way to change the list type without using styles or inline css to an ordered list. Here is the syntax:

<ol type="A"> <!--Upper Alpha-->
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ol type="a"> <!--Lower Alpha-->
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ol type="I"> <!--Upper Roman-->
<li>Item 1</li>
<li>Item 2</li>
</ol>
<ol type="i"> <!--Lower Roman-->
<li>Item 1</li>
<li>Item 2</li>
</ol>

The browser output will look like this:

  1. Item 1
  2. Item 2
  1. Item 1
  2. Item 2
  1. Item 1
  2. Item 2
  1. Item 1
  2. Item 2

Definition List

A definition list isn’t really a list but rather a list of items (terms) and each item (term) has a description.

The definition list begins with an <dl> (definition list) tag.

Each term starts with a <dt> (definition term) tag.

Each term description starts with a <dd> (definition description) tag.

The browser output will look like this:

Item 1
Description 1
Item 2
Description 2
Item 3
Description 3

Basics of XHTML Part – #5

Jan 20th

Posted by Dennis Thompson in HTML/XHTML Basics

No comments

Today we’re going to talk about HTML Tables! Tables were created in May of 1996 as in update to HTML 2.0. Since then, tables were a way for us to layout our websites and/or information in a document. Frames became popular with HTML 3.0, HTML 3.2, and especially HTML 4.0. After Framesets fizzled out tables became the preferred method of website creation.

Now, websites are being created with intricate server side programs and CSS that will write HTML for you. Despite these improvements for website creation, if you just do a simple google search for a website, you’ll see that some are still made using tables. You can read all about the History of HTML by reading the wiki article on it.

Tables is a good starting point to understanding site layout and the flow of the page, so it’s still good to know!

Tables

Tables are defined by creating a <table> tag and then a <tr> and then a <td> So the order is as follows:

  1. table
  2. tr (table row)
  3. td (table cell)

The general syntax for tables is as follows:

<html>
<head>
</head>
<body>
<table>
     <tr>
          <td>table cell</td>
          <td>table cell</td>
     </tr>
</table>
row 1 cell 1 row 1 cell 2
row 2 cell 1 row 2 cell 2

The example above in the form of HTML would be like the following:

<table border="1">
     <tr>
          <td>row 1 cell 1</td>
          <td>row 1 cell 2</td>
     </tr>
     <tr>
          <td>row 2 cell 1</td>
          <td>row 2 cell 2</td>
     </tr>
</table>

Border Attribute

The border attribute is an attribute that will display (or not display) a border around the <table>, <tr>, and <td> tags – basically around all elements of a table. If, for example, you wanted to create a table with no border then you would do the following:

<table border="0">
     <tr>
          <td></td>
          <td></td>
     </tr>
</table>

You can substitute the 0 for any integer that is wanted. Consider the table example we made before the Border Attribute title. That has a border=”1″.

row 1 cell 1 row 1 cell 2
row 2 cell 1 row 2 cell 2

This is the same table but with a border of 5.

Table Headings

Table Headings are defined by the use of <th> tags. These are usually used to title rows/columns in the table and are used in place of <td> to define the cell. Consider the following:

<table border="0">
     <tr> <!--Table headings-->
          <th>Table Heading</th>
          <th>Table Heading</th>
     </tr>
     <tr>
          <td>Table Cell</td>
          <td>Table Cell</td>
     </tr>
     <tr>
          <td>This is an example</td>
          <td>This is an example</td>
     </tr>
</table>

The code above would look like this:

Table Heading Table Heading
Table Cell Table Cell
This is an example This is an example

Cell Spanning

Sometimes you may need a single cell to span more than 1 column or row. For this we use the colspan and rowspan attributes on the td or th tags.

<table>
     <tr>
          <th rowspan="2">Name</th>
          <th colspan="2">Phone Number</th>
     </tr>
     <tr>
          <th>Home</th>
          <th>Mobile</th>
     <tr>
     <tr>
          <td>John Smith</td>
          <td>555-1234</td>
          <td>555-4321</td>
     </tr>
     <tr>
          <td>Bob Jones</td>
          <td>555-2943</td>
          <td>555-4929</td>
     </tr>
</table>

The above code would look like this:

Name Phone Number
Home Mobile
John Smith 555-1234 555-4321
Bob Jones 555-2943 555-4929

Cell Spacing and Cell Padding

Cell Spacing is used to create space between cells.
Cell Padding is used to create space between the cell content and the border of the cell.

Both cellspacing and cellpadding are attributes for the table tag. Here is an example of a table with a cellspacing=”10″:

Table Heading Table Heading
Table Cell Table Cell
This is an example This is an example

and here is a table with cellpadding=”10″:

Table Heading Table Heading
Table Cell Table Cell
This is an example This is an example

Alignment

The align attribute for td and th tags can be used with the values left, right, center or justify, to specify how the contents of the cell should be aligned. Justify spaces the words in the cell so that each line is an equal width. If an align attribute is not used, the default alignment is left, unless otherwise specified by the CSS.

Basics of XHTML Part – #4

Jan 18th

Posted by Dennis Thompson in HTML/XHTML Basics

No comments

Basics of HTML Part #3 is good to know before continuing on with this tutorial!

Today we’re going to talk about the img tag and the src attribute. This very important because this element allows us to input images in our web page and also input images from another web server or folder on our web server.

The Image Tag

There is something different about this <img> tag is that the closing tag is not </img>. This is known as a self-closing element or an empty element. These empty elements contain attributes only and no closing tag.

The “src” attribute

To properly display an image on a web page, we need the src attribute (which stands for source) which contains the relative or absolute link to the image you wish to attach. Without this attribute we would not be able to display an image because there would be no source.

Standard Hosting

The syntax for the img element is as follows:

<img src="url" />
<!--The image above-->
<img src="http://www.atomicpages.net/images/standard.jpg" />

Se have our basic syntax for the image element and the example provided is points toward the image location which has an image name of “standard.jpg” which is in the folder “images” on “http://www.atomicpages.net”
that has the URL of “http://www.atomicpages.net/images/standard.jpg”.

The image element will place the image where ever the <img> is place. If that happens to be in the middle of a paragraph or in some arbitrary place on your web page, then it will be placed where ever the element is placed in your source code.

The “alt” Attribute

The alt attribute is important to have for a few reasons.

First, this alt attribute will display the text if a visitor on your web site has images turned off or they are using a text-only browser. This will accurately tell the user what they are missing if the page cannot load the images. Note: the alt attribute is not used as an image description or a summary of what the image is or what it is about.

Second, the alt attribute is good to have for Search Engine Optimization (SEO). Web bots that crawl your web site cannot see the images.

Third, the addition of the alt attribute will make your web page W3C compliant and your web page will validate when checked by the W3C HTML Validator.

Here is an example of useage for the alt attribute:

<img src="url" alt="Alternative text" />
<!--Example-->
<img src="http://www.atomicpages.net/images/standard.jpg"
alt="Standard Hosting" />

“height” and “width” attributes

Height and Width attributes can be used in the place of inline css or css in general. These attributes specify the dimensions of the image. These attributes will usually come after the src attribute. The syntax is as follows:

<img src="url" height="in px" width="in px" alt="" />
<!--Example-->
<img src="http://www.atomicpages.net/images/standard.jpg"
height="148" width="300" alt="Standard Hosting" />

The height and width attributes define the image size in terms of pixels (px) without you having to write px after the integer.

Alliteratively, you can use inline css to define an images dimensions like so:

<img src="http://www.atomicpages.net/images/standard.jpg"
style="height:148px; width:300px; alt="Standard Hosting" />

Images and Links

In Basics of HTML Part #3 we discussed links and anchors. We can actually combine links and images to make clickable images that will take us to a larger image or another place on our web page.

Consider the following code:

<img src="http://www.atomicpages.net/images/standard.jpg"
height="148" width="300" alt="Standard Hosting" />

This will correctly display the image we want; however, if we wanted to make this image one that was clickable then we would do the following:

<a href="http://www.atomicpages.net/hosting.php">
<img src="http://www.atomicpages.net/images/standard.jpg"
height="148" width="300" alt="Standard Hosting" />
</a>



This would make the image clickable and once you clicked on the image it would take you to http://www.atomicpages.net/hosting.php If we wanted to use an image that would link to another image or a larger image then we would do the following:

<a href="url to different/larger image">
<img src="url to image you want to display" height="" width="" alt="" />
</a>
<!--Example-->
<a href="http://www.atomicpages.net/images/standard.jpg">
<img src="http://www.atomicpages.net/images/standard-small.jpg"
height="74" width="150" alt="Standard Hosting" />
</a>

Click

Basics of XHTML Part – #3

Nov 11th

Posted by Dennis Thompson in HTML/XHTML Basics

1 comment

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

Nov 9th

Posted by Dennis Thompson in HTML/XHTML Basics

1 comment

As we covered in the Basics of XHTML, we have basics rules that we need to follow in order to correctly write XHTML and get the results we want.

<start tag>content</end tag>

We already learned some very basics XHTML elements that are very useful such as adding images and links to web pages.

<img src="image.gif" width=125" height="125" alt="image" />
<a href="index.html">Home</a>

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 these attributes is as follows:

<start tag attribute="value">content</ending tag>
<a href="http://www.atomicpages.net">AtomicPages</a>

Given our basics syntax rules for attributes, we can see that the actual attribute is not inside double quotes but is within the starting tag. The value, however, is inside of double quotes. Please see Using Good Practices when Writing XHTML for additional details and tips for writing proper XHTML.

Common Attributes

Here is a list of some very common attributes.

<start tag class="class_name">content</end tag>
<start tag style="inline css">content</end tag>
<start tag id="id_name">content</end tag>

You can refer to ID v. Class and Basics for CSS for more details.

HTML Formatting

Whether we’re aware of it or not, there are ways to use HTML elements instead of using inline, ID, or class attributes of CSS. Basically, for simple formatting purposes, strong, emphasized , underlined, Big, etc.. There are ways to achieve these results without using Style Sheets. You can actually do some pretty crazy things with some seemingly arbitrary HTML elements.

Text Formatting

Tags Description
<b> Bold Text
<strong> Strong Text
<i> Italic Text
<em> Emphasized Text 
<u> Underlined Text
<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 are basically the same thing.
  2. Italic and Emphasized basically do the same thing.
  3. Underlines Text without the use of styles.
  4. Strike and Strikethough do the same thing but are depreciated1
  5. Deleted Text is the preferred way of creating “strikethough” text.
  6. Inserted Text is an alternative way of creating underlined text.
  7. Subscript is subscript text probably used for mathematical notations.
  8. Superscript is superscript text probably used for mathematical notations.
  9. Big is a way of creating big text without styles.
  10. Small is a way of creating small text without styles.

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. Basically, Code, Pre, Teletype, Sample Computer Text, and Keyboard Text all do the same exact thing: turn text monotype. The only difference these different elements would make is if you want to apply individual styles to them and use them in different ways.
  2. Variables is the only fancy element that does not make the text monotype but actually emphasized. This too can be made into almost anything we’d want via styles.

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. You can alter the styles of this element via CSS as usual.

  5. A definition term is more like a type of list. We will be covering this later on.
  6. This “bdo” element is basically useless unless you want to confuse your visitors.. 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

Oct 19th

Posted by Dennis Thompson in HTML/XHTML Basics

3 comments

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, ASP, or Ruby on Rails, it is a markup language. HTML uses elements to describe web pages. These elements are made up of tags.

HTML Tags

  • HTML Tags are keywords surrounded in angled brackets like: <tag>
  • HTML tags usually come in pairs, for example: <start tag> and <ending tag>
  • 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 intemperate to display a web page. Every time you visit a website, your internet browser is looking at the HTML code on that web page and translating it into something you can log onto, view images with, and doing all of those nifty things that web pages do!

How Do We “code” HTML?

You can “code” HTML with something as simple as Microsoft’s Notepad or Apple’s Textedit. You can also use more advanced programs such as Adobe Dreamweaver, Netbeans, or other programs like these.

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 articles.

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>

If you try these heading tags you’ll see how they differ in size and font-weight. Note: you can specify the way you want your heading tags to look via CSS. See Basics of CSS for more details.

Links

That link I just made, how was that done? Well, it’s very easy actually! See below:

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

When done properly, we should see the following: AtomicPages Hosting. Using the same code as above, this will allow us to link to other pages, whether within or outside of the web page. Notice how the link is a different color and when we roll over it with our mouse pointer, the link ceases to be underlined. This is specifically put in place by web designers to let users know of the links existence. It would be useless if a users didn’t know a link was embedded somewhere within the text!

HTML Images

An Image is a digital graphic file such as a .gif, .jpg, .png, .bmp, etc.. Generally when making a web page, we’ll use .gif, .jpg, or .png files to be sure everyone is able to view these images on the web page. How do you put an image on our webpage? The solution is very simple! Please see the HTML code below:

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

Note: the image URL used in the second example is called a relative link, we will be covering the differences between absolute (http://etc..) and relative links later on.

The image element we can see is unique because there is only an opening tag and no “real” closing tag. This is known as an empty element and is used with only certain tags such as image tags, link tags, and meta 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 (X)HTML that will help you on your way to creating a web page of your own one day! Stay posted for more HTML tutorials in the near future!

Organizing your HTML and CSS

Oct 9th

Posted by Dennis Thompson in CSS Basics

No comments

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>

In this example, it is very clear where the header starts and ends because of the html comments is. If we had hundreds and hundreds of lines of HTML then things might be a little hard to find using just notepad or even with a sophisticated program such as Adobe Dreamweaver. Juts adding these little indicators during the building process can help you a lot!

CSS Comments

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

body {
     background-color: #3c3c3c; /*alternative color is #470b0b*/
     margin: 0px;
     padding: 0px;
     line-height: 1.1em !important; /*do not change!*/
}

We can see that the background-color property has an alternative color that will also look good on your site as shown by the comment we typed in alternative color is #470b0b. In addition, the line-height property you decide to add a comment stating that the value should not change for whatever reason and that it should automatically override any other CSS elements that came before it (!important). I usually leave these types of comments within the stylesheet for future reference and I always delete the commented out code once I am done.

Commented out code

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

Be sure to delete /*min-width: 900px;*/ unless you really need it to remain there. The same ideas applies to your source code as well.

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

Oct 8th

Posted by Jackson Hines in HTML/XHTML Basics

1 comment

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

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

XHTML elements must be in lowercase

This is incorrect:

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

This is correct:

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

XHTML elements must always be closed

This is incorrect:

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

This is correct:

1
2
3
4
<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:

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

This is correct:

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

All XHTML attribute values must be in double quotes!

This is incorrect:

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

This is correct:

1
<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.”