HTML Examples

This page is for newbies to HTML who just need a little straightforward, easy-to-understand information to get started writing their own HTML pages. Even if you simply want to write a blog about your family or your last vacation and don’t want to get into all of the complexities of writing HTML, understanding the basic structure of an HTML document Basic HTML Document in the first section can be very useful in determining exactly where to paste code that you copy from other sources (search engines etc).

With that in mind, the code presented here goes top to bottom according to the complexity of the subject matter covered. Take special note of text in italics, as it is the part that you need to focus on to adapt the code to you specific needs.

Basic HTML Document – Just to Get You Started

Here is an example of a very simple HTML document to outline the basic structure of a webpage and where certain elements are to be placed so that they will work correctly:

<html> <head>
Here you could place meta information such as keywords,description, content – all of which help the search engines (Google,Yahoo etc) to recognize and rank your blog or website
<title>My Vacation to Munich</title>
The title is the name that appears in the titlebar of your blog document
</head> <body>
Here you would place such things as the text, images and video or ‘content’ of your blog. Here you would also place such things as anchors (link one part of your page to another) and hyperlinks (link one page to another)
</body> </html>

Merely understanding the placement of the elements within the HTML structure above can go a long way in your further development as a blogger.

Notice that the tags (as they are referred to), beginning with <html> must be ‘closed’ with a matching tag such as </html>

Questions or comments? Contact me at: hyperscripter@gmail.com or http://twitter.com/hyperscripter or to subscribe, click the By Email link at the top of the page.

Enhancing the Looks of Text

Given this text as the title of your document

<title>Basic HTML Document</title>

You could use these tags to jazz it up a bit:

<b> – as above, could be used to make your text bold. Just don’t forget the </b> to close the tag.

<i> – as above, could be used to make your text italic. use </i> to close the tag.

Or you could use both together (<i><b>) resulting in: Basic HTML Document

If you really want to spice things up, you could use <font color="blue"> with </font> as the close tag, resulting in: Basic HTML Document

Other colors that you could use: Silver,Gray,Maroon,Green,Navy,Purple,Olive,Teal,
White,Black,Red,Lime,Blue,Magenta,Yellow,Cyan

Questions or comments? Contact me at: hyperscripter@gmail.com or http://twitter.com/hyperscripter or to subscribe, click the By Email link at the top of the page.

Anchor HTML – This Links one Part of a Page to Another:

This you would place where you want the link to go:

<a name = "Email">[THIS CAN BE LEFT BLANK IF, FOR INSTANCE, YOU WANT TO LINK TO THE TOP OR BOTTOM OF A PAGE] </a>

This is the link:

<a href = "#Email">By Email</a>

Where By Email is the actual text of the link the user will click on to go to ‘Email’ and #Email (must be preceded by #) is the reference that tells the page to look for Email in the HTML document

Web Link HTML – This Links Your Page to Another Website:

<a href="http://www.desiredWebSite.com/">Name of Website</a>

Where “http://www.desiredWebSite.com/” represents the actual website link (where you want to go when the user clicks).

Where Name of Website is the text that will be seen by the user.

Example:

<a href="http://www.apple.com/">Apple Web Site</a>

Questions or comments? Contact me at: hyperscripter@gmail.com or http://twitter.com/hyperscripter.

Image HTML

" alt="Apple II Winchester Disk Drive" width="150" height="150" />

This Displays an Image on Your Page:

<img src="http://www.yourWebSite.com/
data/images/yourImage.jpg">

Where http://www.yourWebSite.com/data/images/yourImage.jpg is the path to the location of the image.

Additionally, you could have alternate text, in case the image cannot be loaded:

<img src="http://www.yourWebSite.com/data/images/yourImage.jpg" alt="My Image">

Where My Image is the alternate name to have displayed if the image cannot be loaded

You could even specify a border size:

<img src="http://www.yourWebSite.com/data/images/yourImage.jpg" alt="My Image" border="n">

Where n is the number that indicates the thickness (in pixels) of the border surrounding the image. To have no border use 0. If omitted altogether, the image will have a thin, blue border by default.

Questions, comments, suggestions? Please feel free to contact me at: hyperscripter@gmail.com or http://twitter.com/hyperscripter or to subscribe, click the By Email link at the top of the page. Any input is appreciated.

Adding Some Pizazz to Your Text

Suppose you had a sentence beginning with: It was many, many years ago…

Heres how you would use this HTML:

<strong style="font-size: 35px; font-family: Georgia, Palatino; float: left; margin-right: 4px; line-height: 1em; color: #FFFFFF; background: #840052; padding: 0 5px; font-weight: normal;">I</strong>t was many, many years ago…

The previous would yield:

It was many, many years ago…

Where color: #FFFFFF; is a white letter and background: #840052; is a square background color (a deep purple in this case). If you aren’t interested in learning the hexidecimal codes for colors, you could substitute for #840052; any of 16 preset colors by name (ie plain english) as follows:

Silver,Gray,Maroon,Green,Navy,Purple,Olive,Teal,
White,Black,Red,Lime,Magenta,Yellow,Cyan

Should you encounter any problems with implementing this or any other HTML presented here, contact me at: hyperscripter@gmail.com or http://twitter.com/hyperscripter or to subscribe, click the By Email link at the top of the page.

HTML to Create Document Menus

Airport Card

<p><b>My Pages</b> <select name="Page Selections:"> <option value="Basic HTML"><a href="http://www.scriptsforapple.com/basic-html/">Basic HTML</a> <option value="HyperCard Users"><a href="http://www.scriptsforapple.com/hypercard-users/">HyperCard Users</a> </select></p>

This is what you will see:

My Pages

How to Write HTML for Submit forms

First, I will present you with this basic template for a submit form with some explanation below:

<form name="html" action="index2.php" method="post"> <table border=0 cellspacing=0 cellpadding=3> <tr><td colspan=2 align=center> <h3>HTML Page Form</h3> <tr><td> Name: <td> <input type="text" name="name"> <tr><td> Email: <td> <input type="text" name="email"> <tr><td> Operating System: <td> <select name="Operating System"> <option value=1>Macintosh</option> <option value=2>Windows</option> <option value=3>Linux</option> </select> <tr><td colspan=2> <p align=right> <button type="reset" value="reset" style="font: 9pt Verdana; background:red">Reset</button> <button type="submit" name="submit" value="send" style="font: 9pt Verdana; background:green">Submit</button></p> </table> </form>

The first line tells us that this is a form, therefore, we intend to send data over the internet. It also states that the data will be sent to the page ‘index1.php’.

Next the opening tag for the table that will display the form with various formatting, most of which is fairly clear. Next are the tags <tr> and <td>:
<tr> is a table row and <td colspan=2 align=center> just says that there will be two columns with text centered in each.

Then, our title with a header size of 3 followed by another row for our name input as text and then the same for email.

Finally, the <select> tag for optional selections, in this case the operating system of the user.

After closing the <select> tag, we have two <button> tags, one to reset the info and one to send the info.

Which looks like this:

For further detail and explanation, watch the video below:

HTML for Tables

There are times when you want to display information on customers in a format like a database. Maybe, you want a graphic that clearly outlines your customer pricing. You can use tables for anything like this.

We’ll start with a basic table and then add a few other elements so you can see how to put together more complicated tables; there is so much you can do with tables to enhance the look of your data.

Here is a basic template for a table:

<table border="1"> <tr> <td>Red</td> <td>Green</td> </tr> <tr> <td>Blue</td> <td>Yellow</td> </tr> </table>

We start with the table tag ‘<table border=”1″>’ or just ‘<table>’, if you don’t want a border at all.

Next the ‘<tr>’ tag or ‘table row’ tag which makes the actual rows for your text data. You can have as many of these as you like, just remember to close the tag with ‘</tr>’

Within the ‘<tr>’ tag we use the ‘<td>’ tag, also referred to as the ‘table data’ tag. I like to think of these as column tags, because each one (you can have as many of these as you want) will create a new column of data. Remember to close these tags with ‘</td>

This table has 2 rows and 2 columns and looks like this:

Red	Green
Blue	Yellow

Now let’s add color and a few other enhancements to the table:

<table border="8"> <tr> <th>Column 1</th> <th>Column 2</th> </tr> <tr> <td><font color="red">Red</font></td> <td><font color="green">Green</font></td> </tr> <tr> <td><font color="blue">Blue</font></td> <td><font color="yellow">Yellow</font></td> </tr> </table>

First we increase the border size to 8, which gives us a border with some depth.

We also add a ‘table header’ <th> tag which is placed within a ‘table row’ block just above the table.

And finally: ‘<font color=”red”>Red</font>>’

Then our table looks like this:

Column 1	Column 2
Red	Green
Blue	Yellow

Contact me if you have any questions or comments at: hyperscripter@gmail.com or http://twitter.com/hyperscripter or to subscribe, click the By Email link at the top of the page.

Inline Styles (CSS)

For those who are new to writing Cascading Style Sheets, this post is an easy introduction that will show you how to CSS by entering the CSS code directly into the tags that you want to target. I do most of mine in this manner because I like to have a lot of variety in the appearance of my pages.

First, let’s look at the basic syntax for inline CSS:

Basic CSS is used within ‘<p>‘ tags:

<p style="element 1:attribute;element 2:attribute;background-color:cyan;">Affected text</p>

Already here, you can see how to set the background color:

Affected text

Notes on Syntax:

Within the HTML Element, start with style
All of the styles must be enclosed in quotes
An Element and its attribute must be separated by a colon
Each Element-Attribute Pair is separated by a semicolon

That’s the whole deal, well not exactly

Example:

<p style=”text-align:center;color:white;background-color:red;”>Now, let’s look at a few ways that you can edit text in the document given this initial text.</p>

Which looks like this:

Now, let’s look at a few ways that you can edit text in the document given this initial text.

Let’s look at each of these styles:

text-align:center; – this is pretty easy to understand; you could use right,left or justify in place of center
color:white; – This is the color of the text. Here you have three possible ways to express a color:
- One of 16 colors by name
- Colors by hex (‘#’ followed by 6 digit code, for example: #FF0000, which is red)
By rgb value (a series of three values formatted like this, which happens to be a bright red color: {65535, 2979, 2979})
background-color:red; This is the background color. Its colors are derived in the same manner as the text color is.

As always, if you have any questions or comments, contact me at: hyperscripter@gmail.com or http://twitter.com/hyperscripter or to subscribe, click the By Email link at the top of the page.

Inline CSS for Images

A common problem for those who are new to HTML with images is with wrapping text around an image so that the page ‘flows’.

We will use the image at left to show how to deal with this problem.

The code for the image looks like this:

<a href="http://www.scriptsforapple.com/wp-content/uploads/2009/08/iMac-G4.jpg"><img style="float:left;border:5px solid #FFFFFF;margin:0 10px 10px 0;" src="http://www.scriptsforapple.com/wp-content/uploads/2009/08/iMac-G4.jpg" alt="iMac G4" title="iMac G4" width="112" height="140" class="size-full wp-image-1564" /></a>

The bold text above shows how to wrap text to the right of an image:

style="float:left;border:5px solid #FFFFFF;margin:0 10px 10px 0;"

And then to the left of an image:

<a href="http://www.scriptsforapple.com/wp-content/uploads/2009/08/iMac-G4.jpg"><img style="float:right;border:5px solid #FFFFFF;margin:0 10px 10px 0;" src="http://www.scriptsforapple.com/wp-content/uploads/2009/08/iMac-G4.jpg" alt="iMac G4" title="iMac G4" width="112" height="140" class="size-full wp-image-1564" /></a>

Note: To make text flow to the left we use ‘float:right’, to the right ‘float:left’

A common problem for those who are new to HTML with images is with wrapping text around the image so that the page ‘flows’.

Now let’s look at the other style parameters:

style="float:left;border:5px solid #FFFFFF;margin:0 10px 10px 0;"

border:5px solid #FFFFFF;

For the border you can use any number – 10px, 15px, 40px…whatever you want. If you don’t want a border than you can do away with this part altogether.

For the color you can use any color by name or by hex value (as above, which is the same as white)

margin:0 10px 10px 0;
For the margin, a series of numbers in pixels (left,top,right,bottom) For example, if you want 10 pixels all the way around the image: margin:10px 10px 10px 10px;

For this to work correctly, don’t forget to place a semicolon between each style item and a colon between a style attribute and its value!

By the way, take note of the placement of the style code within the img tag. It is placed after img and before src:

<img style="float:right;border:5px solid #FFFFFF;margin:0 10px 10px 0;" src="http://www.scriptsforapple.com/wp-content/uploads/2009/08/iMac-G4.jpg" alt="iMac G4" title="iMac G4" width="112" height="140" class="size-full wp-image-1564" /></a>

If you have any questions or comments, contact me at: hyperscripter@gmail.com or http://twitter.com/hyperscripter or to subscribe, click the By Email link at the top of the page