CAZine: issue 7, January 2010

By
zerhash
Published: January 31, 2009Posted in: IssuesTags: , , , , , , ,
CAZine: issue 7, January 2010

XHTML

By: Capt d0s

Introduction

This article is targeting beginners in web development, however can be used as a reference for experienced web developers needing a quick cheat sheet. This does not cover all aspects of HTML/XHTML, however this should be a good intro to getting people started. You do not need to know HTML to understand this article, however already knowing HTML will benefit and speed up the learning. Extensible Hypertext Markup Language (XHTML) is the next version of HTML. A lot of the HMTL tags are the same, however some tags are being phased out and eventually will cease to exist. Before we get into writing XHTML code, there are a few things that need to be known. When writing a webpage, you will want to write a page that will validate. A validated page ensures it is using proper format and has better chances of appearing for more people to view via search engines. To test if your page validates go to http://validator.w3.org

There are several other languages you can use with XHTML such as: CSS, JavaScript, VBScript, and Jscript to name a few however I will be focusing this article on XHTML. There are several GUI programs that you can use to create a webpage, however the best method to learning to write webpages is to actually write it out and play around with attributes to see how it can alter the outcome. If your using windows, you can use Notepad or WordPad. If you are on Linux, you can use Vi or Pico. Enough with this intro, onto learning XHTML.

XHTML Flavors

There are 3 flavors to XHTML. Below is a brief description of each.

  • XHTML Transitional – Most popular version of XHTML. This allows the use of deprecated tags, tags that are being phased out.
  • XHTML Strict – Requires the use of CSS for all formatting elements. Deprecated tags are not allowed.
  • XHTML Frameset – Required for pages that use frames.

Tags

  1. <!DOCTYPE>: Determines how the document will be rendered. IE: XHMTL Transitional
  2. <html>: The tag used to start your web document. Everything outside this tag is considered SGML.
  3. <head>: This is where you would like meta tag, style sheets, and the title tag
  4. <meta>: Specify various information about your page, IE keywords
  5. <link>: This is the tag where you link style sheets to your document inside the head tag.
  6. <title>: Specify the title of your page, also goes inside the head tag
  7. <body>: Everything in the body tag is what will show up on your page.

All these are the main tags that you will use almost all the time when creating your website. In XHTML tags are case sensitive. All tags in XHTML need to be lowercase for the page to validate. The <!DOCTYPE> tag is the only tag that will be uppercase. Almost all tags require a closing tag. For example, <title> tag is called to specify the title of your page. After that you would use </title> to close the tag out. Some tags allow self closing such as hr, br, input (used within a form) to name a few. Below is an example of a proper XHTML page that will validate.

Example:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

<html>

<head>

<title>XHTML Basic Layout</title>

</head>

<body>

<h1 align=”center”>

My XHTML

</h1>

<br />

<hr />

<br />

<p>This is a paragraph format</p>

</body>

</html>
In this example, notice how hr and br have the closing forward slash within the brackets of the tag. This is a self closing tag that was mentioned earlier. the <br /> tag calls a break in the line so anything after this tag will start on the next line down. The <hr /> tag is a horizontal rule drawing a line across the screen. You can specify how how far across the screen it goes. Default it will draw the line at 100% width. This brings us into the next topic, attributes.

Attributes

Attributes allow you to alter the look and feel of your website. Several tags, not all, allow attributes. In example 1, I added the align attribute to the header tag telling it to center the text that appeared in within the header tags. With attributes you can change the alignment of text, color of text/background, font size/style, height/width of a table ect. You can learn more about attributes for each tag at http://www.w3schools.com. Here is an example of attributes for the horizontal rule.

  1. Horizontal Rule <hr />
    1. align
      1. left
      2. right
      3. center
    2. size
    3. width
    4. noshade
      1. true – renders solid color
      2. false – renders two colors
      3. noshade is a deprecated attribute. CSS should be used in its place

Images in webpages

You can use images in your pages for different things. You can use them as a background, links, inside tables, or if you just want to throw an image on your page. There are 3 image format types you can use in XHTML.

  1. Joint Photographic Experts Group (JPEG) – JPEGS are image formats that produce high quality images. JPEG also supports compression if you want to reduce the image size, however doing so will result in reduction of the picture quality. There is a new JPEG format that supports image reduction without losing quality. This is called JPEG 2000. You can learn more about it at www.jpeg.org
  2. Graphics Interchange Format (GIF) – GIFs support 256 colors, lower than JPEGs. There are 2 versions of GIF, 87a and 89a. 89a is better because it supports the following features:
    1. Transparency – pretty self explanatory, blending the image into the background.
    2. Interlacing – rendering the image as its downloading
    3. Animation – again self explanatory, a series of images in sequence to create motion
  3. Portable Network Graphics (PNG) Unlike JPEG, you can compress PNG image files without losing any of its qualities even though it does not have the same quality as a JPEG. PNG’s also support Transparency, Interlacing, and Animations.
    To use an image you would use the <img> tag. An example looks like the following: <img src=”picture.jpeg”/>. You could also close this tag using </img> if you wanted to. When using the image tag, it will not validate unless you use the alt attribute. The alt attribute specifies text to be displayed while the image is being loaded or if you’re using a non-graphical browser or if your image just disappears from the directory it was previously in. An example of this would be: <img src=”picture.jpg” alt=”Text to be displayed”/> The img tag as a few attributes you can use with it
    1. align
      1. bottom
      2. middle
      3. top
      4. left
      5. right
    2. hspace – aligns the image horizontally, moving it to the right
    3. vspace – aligns the image vertically, moving the image to the top
    4. width – resizes the images width in pixels
    5. height – resizes the images height in pixels

Hyperlinks

Hyperlinks are used to direct you to either another page or another website. You would also use hyperlinks if you were wanting to link a document to be opened or saved if it is server side. You can also use hyperlinks to jump to different sections on the same page. There are 3 types of links however the formatting is the same:

  1. Local – Local links are used to link to a document or file on your local system.
  2. Internal – internal links are links used to direct you to a different section of the same page. This would be good to use on long pages that are in sections.
  3. External – External links are links that redirect you to a different page or site on the internet.

Anchor tag

You create hyperlinks using the Anchor Tag <a>. This will display the text or image that will be shown for the user to click on. You use the href attribute to specify the target location. If you are linking to a page or document within the same directory as your current page then you can just specify the name, otherwise you have to specify the path for it as well. Quick example of using hyperlinks:

<a href=”http://www.google.com”>Google</a>

This will tell your web browser to take you to googles hompage. If you are linking to another site and want to keep the user at your webpage as well, you can use the target=”_blank to open that page in a new browser. Here is an example of using this attribute:

<a href=”URL” target=”_blank”>Google Homepage</a>

Protocols

Hyperlinks are also used for various protocols

  1. HTTP: <a href=”http://www.google.com”>Google Homepage</a>
  2. HTTPS (Secure HTTP): <a href=”https://www.google.com”>Google Homepage</a>
  3. FTP: <a href=”ftp://ftp.server.com”>FTP Server</a>
  4. Telnet: <a href=”telnet:my.telnetserver.com”>Google Homepage</a>
  5. Email: <a href=”mailto:me@emailaddress.com”>Google Homepage</a>

Images

As mentioned earlier, you can use an image as a hyperlink instead of using text. In this situation you would use the img tag inside the anchor tag like so:

<a href=”URL”><img src=”picture.jpg” alt=”text incase image is not displayed”/></a>

Internal Links

If you have a webpage broken down into sections, you may want to use internal links for quick navigation to specific section. This helps the user get to the area they need without having to shuffle through all the other content and possibly getting frustrated and leaving. Setting up a glossary would help in this situation. When creating a internal link, you use the anchor tag with the bookmarked section. Here is an example of setting up an internal link:

<a href=”#link1”>Go to Link 1</a>

<!– Page content –>

<a name=”link1”>Link 1</a>

TABLES

Tables are used for a variety of reasons. You can use them for data formatting, sorting content, separating content, charting, and various other things you can probably think of. Some people use tables to store links in, such as a navigation link. You can use text, links, images, and color inside a table. Here is the structure layout for a table:

  1. Table: <table>…</table>
    1. Table Caption: <caption>…</caption>
      1. This is optional and will add a title to the table
    2. Table Row: <tr>…</tr>
    3. Table Header: <th>…</th>
    4. Table Data: <td>…</td>

Here is a list of attributes that can be used with tables.

  1. Table
    1. align: aligns the table
      1. left
      2. center
      3. right
    2. border: Border to appear around the table. Takes numeric values, 0 = no border 1 = thin border ect.
    3. cellpadding: The spacing between the content inside the table and the inner border wall.
    4. cellspacing: The amount of spacing between table cells
    5. width: the width of the table

Web Forms

Web forms are used to gather a variety of information from the user. To create a form, you use the <form> tag. You can collect information from the user several ways. For a form to be fully functional, it will require a Command Gateway Interface(CGI) program to process the information the user put into the forms. Some of the forms you can use are:

  • textboxes
  • checkboxes
  • radio buttons
  • drop down boxes

When inserting a part of the form, you use the <input> tag like so:

<input type=”text” name=”name”>

This will create a single line text box. When you create radio buttons and want to have only 1 selected, you use the same name attribute to group them together.

Here is an example of a basic form:

<form>

Enter Your Name: <input type=”text” name=”name”/>

<br />

<br />

Enter Your Email: <input type=”text” name=”email”/>

<br />

<br />

Would you like to recieve email from spammers?:

<input type=”radio” name=”spam” value=”yes”/>Yes

<input type=”radio” name=”spam” value=”no” checked=”checked”/>No

<br />

<br />

What would you like to receive emails about?: <br />

<select name=”tm”>

<option>Select an option…</option>

<option>System Vulnerabilities</option>

<option>Programming</option>

<option>Web Development</option>

</select>

<br />

<br />

Anything else you would like added?:

<br />

<textarea name=”other” cols=”30″ rows=”5″>

</textarea>

<br />

<br />

Please send a copy of this form to my email address: <input type=”checkbox” name=”cc”/>

<br />

<input type=”submit”/>

<input type=”reset”/>

</form>

As you can see, this form asks for basic information. As it is right now though, this information would not be processed.

Special Characters

Sometimes you may want to use special characters on your pages. Most special characters can be inserted using a couple different types of code:

  • Copyright symbol
    • &copy;
    • &#169;
  • Ampersand
    • &amp;
    • &#38;
  • Quotation Marks
    • &quot;
  • Non-breaking space
    • &nbsp;
  • Tilde
    • &ntilde;
    • You can create a tilde over a character. If you wanted to create one over an “o” you would use &otilde;
  • Umlaut
    • &uuml;
    • &ouml; if you want it over an o or another character as tilde
  • Pound Sterling
    • &#163;
  • Greater than sign
    • &gt;
  • Less than sign
    • &lt;
  • Registered trademark symbol
    • &reg;
    • &#174;
  • Acute accent
    • &oacute; to go over an o. as above

This concludes this article. I apologize that I was not able to write a full length article on every aspect of HTML/XHTML but I currently have limited time to work on articles. Hope you enjoyed reading this and took something from it.

VN:F [1.7.9_1023]
Rating: 10.0/10 (3 votes cast)
CAZine: issue 7, January 201010.0103

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

About the Author