HTML

Basics of XHTML – Part #7

Mar 12th

Posted by Dennis Thompson in HTML

No comments

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:

1
2
3
4
5

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13

<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:

1
2
3
4
5
6
7
8
9
10
11

<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:

1
2
3
4
5
6
7
8
9
10
11

<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:

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

<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:

1
2
3
4
5

<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:

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<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

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:

1
2
3
4
5
6
7
8
9

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<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:

1
2
3
4
5
6
7
8
9

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

<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

1 comment

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<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:

1
2
3
4
5
6
7
8
9
10
11

<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<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:

1
2
3
4
5

<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:

1
2
3
4
5
6
7

<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:

1
2
3
4
5
6
7

<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:

1
2
3

<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:

1
2
3

<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:

1
2
3
4
5
6
7

<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:

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

<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!

1
2
3
4
5
6
7

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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

1
2
3
4
5

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

1
2
3

<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:

1
2
3
4
5

<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:

1
2
3
4
5
6
7

<!--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:

1
2
3
4
5
6
7

<!--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:

1
2
3

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

« Older Entries
Newer Entries »