HTML/XHTML Basics

Website Layout

0

What is generally accept as a "good website layout"? A subject of debate, however, a good layout will have a clearly defined header area, sidebar (optional), content area, and footer area. It can look like the following:

layout

The sidebar can be neglected, on the left side, the right side, or on both sides. The fact still remains that there is a clear cut header, sidebar, content area, and footer, however.
Note: the widths and height of these elements will differ of course.

Tables or CSS?

Starting with CSS2.1 in table designed websites started to phase out rapidly. This is because rich content management systems like WordPress, Drupal, and Joomla were being born and refined. The developers of these fine CMSs did not use tables to do their bidding for their rich admin panels and client-side website interactivity. Today, tables are nearly deprecated when it comes to web layout. CSS is used to create tableless layouts. If you don't know CSS and you want to learn CSS you can click here to learn it!

How to Start?

When I start a website I will work on my external style sheet first and foremost. I will set all of the link colors, define by background, etc... Like the following example:

html, body {
     margin:0;
     padding:0;
}

body {
     margin:auto;
     width:1000px;
     background:#3b3b3b url (bg.png) repeat-x top center;
     font-family: Tahoma, Arial, sans serif;
     font-size:12px;
     color:#fff;
}

a, a:visited {
     text-decoration:underline;
     color:#ff9300;
     outline:none;
}

a:hover {
     text-decoration:none;
     color:#ff9300;
     outline:none;
}

img {border:none;}

Once I have my foundation elements all set and ready to go I will create my ID selectors that I will use for the website. If you are unfamiliar with ID selectors or just want a refresher click here for basics or click here for id v. class selectors. The main ID selectors we want are the following:

  • header
  • sidebar (optional)
  • content
  • footer

The CSS could look like the following:

#header {
     height: 75px;
     background: #4c4c4c url(images/header-bg.gif) repeat-x;
     border: 2px solid #fff;
}

#sidebar {
     float: left;
     width: 150px;
     background: #DBDBDB url(images/sidebar-bg.gif) repeat-x;
}

#content {
     float: right;
     width: 850px;
}

#footer {
     clear: both;
     height: 75px;
     background-color: #4c4c4c;
}

The HTML code to make this happen would be the following:

<!DOCTYPE html>
<html lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div id="header">
    <p>Add content here</p>
  </div>

  <div id="sidebar">
    <p>content here</p>
  </div>

  <div id="content">
    <p>content here</p>
  </div>

  <div id="footer">
    <p>content here</p>  
  </div>
</body>
</html>

We are using a div element that is a block level element so we can negate display:block; for the ID selector. It is common practice that we use div elements to call certain ID selectors since div, by default, does nothing.

Once we have the basic structure of the website we can add our custom styles, class selectors, additional class selectors, nested selectors, pseudo-classes, pseudo-elements, etc... Consider the following for the sidebar:

 #sidebar.container {
     background: #DBDBDB url(images/gradient.png) repeat-x top top;
     width: 125px;
     max-height: 250px;
     overflow: hidden;
}

This creates a class selector called container which can only be used for the ID called sidebar. This container will be called multiple times in the sidebar (hence, the class selector) and will reside inside the sidebar since it's a child element.

Want to see a working example and then some? Please download web-layout.zip where you can see multiple examples of web layouts each with a combined and their own individual style sheet so you can easily see what the CSS is doing to each layout.

web-layout.zip
web-layout.zip
Size: 14.43 KB

Basics of XHTML - Part #7

0

One day while browsing the web you stumble upon a quiz on some website and you decide to take it. Whilst taking this quiz you encounter text fields, radio buttons, check boxes, and password fields. You begin to wonder how these are made. Well, you're in luck because today we're going to talk about HTML Forms and Input.

Forms

The form area is where we would put our elements such as radio buttons, textboxes, and checkboxes. This is defined by the <form> The syntax is as follows:

<form>
     <!--input elements-->
</form>

Input

The input element is where we actually get the textboxes and radio buttons. This element will take multiple attributes that will define the type of input we want.

Text

Text fields are fields where we type in things such as email addresses, phone numbers, and names. They will look something like the following:

Email Address:


First Name:


Last Name:

The HTML code for this is the following:

<form>
Email Address: <input type="text" name="email" />
<br />
First Name: <input type="text" name="firstname" />
<br />
Last Name: <input type="text" name="lastname" />
</form>

This is useful for contact forms or customer surveys.

Radio Buttons

Radio buttons derive from the original radio buttons. In the olden days you could only have one button pushed in at a time, if you pressed another button then the existing button would pop out and become deactivated. Like these traditional radio buttons, the HTML radio buttons will only allow one selection at a time.

A more commonplace example would be as if you're filling out a form and it asks you to print your last name and to fill in a bubble below your printed name. You can only fill in one bubble per space.

They look like the following:

Please select your gender:

Male
Female
Decline to state

Notice that we added another attribute to the input element. This is called the value and is used for a default value. Notice how we can only select one item at a time.
The corresponding HTML looks like the following:

<p>Please select your gender:</p>
<form>
<input type="radio" name="sex" value="male" /> Male
<input type="radio" name="sex" value="female" /> Female
<input type="radio" name="sex" value="decline" /> Decline to state
</form>

Checkboxes

Checkboxes are used when we want the user to be able to select multiple options. A common example is if you're applying for a job and they ask you "select/check all that apply".

How did you hear about us (Check all that apply):

Friend
Former Employer
Website
Other

Notice that we can select multiple item at once.

The corresponding HTML is the following:

<form>
<input type="checkbox" name="survey" value="friend" /> Friend 
<input type="checkbox" name="survey" value="former employer" /> Former Employer 
<input type="checkbox" name="survey" value="website" /> Website
<input type="checkbox" name="survey" value="other" /> Other 
</form>

Creating a drop down menu

Creating a drop down menu is yet another method for giving users the ability to select an answer or multiple answers if you want. It will look like the following:

Choose one of the following:


The HTML will look like the following:

<form>
     <select name="bikes">
          <option value="tricycle">Tricycle</option>
          <option value="street-bike">Street Bike</option>
          <option value="mtn-bike">Mountain Bike</option>
          <option value="motorbike">Motorbike</option>
     </select>
</form>

Creating a simple text area

With the addition of a text area, this allows the user to write a message on a contact form or allows them to write additional comments on a survey on any given question. It will look like this in your browser:

The HTML will look like the following:

<textarea rows="10" cols="30">
Type your message here...
</textarea>

In most modern browsers, it'll allow you to extend the size of the text area at your own discretion.

Creating a Submit Button

Creating a submit button is essential to the form as a whole. Although this button would technically anything, "Submit" is the most common. It will look like the this in your browser:



The HTML will look like this:

<form>
<input type="button" value="Submit" />
<input type="button" value="Good Morning!" />
</form>

Any value that you have in the value attribute will reflect upon the button.

Creating a fieldset around data

You might be wondering what in the world fieldset is to being with. A <fieldset> element is a border that surrounds some or all fields in a form. You can also have a legend element within each fieldset to denote the title of the fieldset.

<form>
<fieldset>
<legend>Name</legend>
First Name <input type="text">
Last Name <input type="text">
</fieldset>
<fieldset>
<legend>Address</legend>
Street Address <input type="test"><br />
City: <input type="text">
State: <input type="state" size="2">
Zip: <input type="zip" size="5">
</fieldset>
</form>

If you want to see this code in action then click on the green download button.

form.zip
form.zip
Size: 3.41 KB

Basics of XHTML Part - #6

0

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

1

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

0

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

Go to Top