HTML

<html> <body> <h1>My First Heading</h1> <p>My first paragraph.
</p> </body> </html>
My First Heading
My first paragraph

The The The The text text text text between between between between <html> and </html> describes the web page <body> and </body> is the visible page content <h1> and </h1> is displayed as a heading <p> and </p> is displayed as a paragraph
<html> <body>
<h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6>
</body> </html>
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5 This is heading 6
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
Example
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML links are defined with the <a> tag.
HTML Links
Example
<a href="http://www.w3schools.com">This is a link</a>
HTML Images
HTML images are defined with the <img> tag.
Example
<img src="w3schools.jpg" width="104" height="142" />
<html> <body> <p>The hr tag defines a horizontal rule:</p> <hr /> <p>This is a paragraph</p>
<hr /> <p>This is a paragraph</p> <hr /> <p>This is a paragraph</p> </body> </html>
The hr tag defines a horizontal rule:
This is a paragraph
This is a paragraph
This is a paragraph
<html> <body>
 <p>This is a regular paragraph</p>
</body> </html>
This is a regular paragraph
<html> <body>
<p>This is<br />a para<br />graph with line breaks</p>
</body> </html> Output
This is a para graph with line breaks
<html> <body>
<p><b>This text is bold</b></p> <p><strong>This text is strong</strong></p> <p><big>This text is big</big></p> <p><i>This text is italic</i></p> <p><em>This text is emphasized</em></p> <p><code>This is computer output</code></p> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
This text is bold This text is strong
This text is big

This text is italic This text is emphasized
This is computer output
This is subscript and superscript
HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text. These HTML tags are called formatting tags (look at the bottom of this page for a complete reference). Often <strong> renders as <b>, and <em> renders as <i>. However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only. <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!
HTML Text Formatting Tags

Tag <b> <big> <em> <i> Description Defines bold text Defines big text Defines emphasized text Defines italic text
<small> <strong> <sub> <sup> <ins> <del>
Defines small text Defines strong text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text
HTML "Computer Output" Tags

Tag <code> <kbd> <samp> <tt> <var> <pre> Description Defines computer code text Defines keyboard text Defines sample computer code Defines teletype text Defines a variable Defines preformatted text
HTML Citations, Quotations, and Definition Tags

Tag <abbr> <acronym> <address> <bdo> <blockquote> <q> Description Defines an abbreviation Defines an acronym Defines contact information for the author/owner of a document Defines the text direction Defines a long quotation Defines a short quotation
<cite> <dfn>
Defines a citation Defines a definition term
<html> <body>
<p> <font size="5" face="arial" color="red"> This paragraph is in Arial, size 5, and in red text color. </font> </p>
<p> <font size="3" face="verdana" color="blue"> This paragraph is in Verdana, size 3, and in blue text color. </font> </p>
<p>The font element is deprecated in HTML 4. Use CSS instead!</p>
</body>
</html> Output
This paragraph is in Arial, size 5, and in red text color.

This paragraph is in Verdana, size 3, and in blue text color.
The font element is deprecated in HTML 4. Use CSS instead!
<html> <body style="background-color:yellow;"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html>
This is a heading
This is a paragraph.
<html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body>
Output
A heading
A paragraph. <html> <body>
<h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p>
Center-aligned heading
This is a paragraph.
The message is clear: Avoid using deprecated tags and attributes! These tags and attributes should be avoided: Tags <center> <font> and <basefont> <s> and <strike> <u> Description Deprecated. Defines centered content Deprecated. Defines HTML fonts Deprecated. Defines strikethrough text Deprecated. Defines underlined text
Attributes align bgcolor color
Description Deprecated. Defines the alignment of text Deprecated. Defines the background color Deprecated. Defines the text color
For all of the above: Use styles instead!
<html> <body>
<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window/tab.</p>
</body> </html> output

Visit W3Schools.com! If you set the target attribute to "_blank", the link will open in a new browser window/tab.
Example
A named anchor inside an HTML document:
<a name="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:
<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page:
<a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a>
<html> <body>
<h2>Norwegian Mountain Trip</h2> <img border="0" src="/images/pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
</body> </html>
Norwegian Mountain Trip
Syntax for defining an image:
<img src="url" alt="some_text"/>

The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif. The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" />

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default:
<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />
HTML Image Tags

Tag <img /> <map> <area /> Description Defines an image Defines an image-map Defines a clickable area inside an image-map
HTML Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
<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>
How the HTML code above looks in a browser: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
HTML Tables and the Border Attribute

If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show. To display a table with borders, specify the border attribute:
<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>
HTML Table Headers

Header information in a table are defined with the <th> tag. All major browsers display the text in the <th> element as bold and centered.
<table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <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>
How the HTML code above looks in your browser: Header 1 Header 2
row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2
More Examples
Tables without borders How to create tables without borders. Table headers How to create table headers. Table with a caption How to add a caption to a table.
Table cells that span more than one row/column How to define table cells that span more than one row or one column. Tags inside a table How to display elements inside other elements. Cell padding How to use cellpadding to create more white space between the cell content and its borders. Cell spacing How to use cellspacing to increase the distance between the cells. The frame attribute How to use the "frame" attribute to control the borders around the table.
HTML Table Tags

Tag <table> <th> <tr> <td> <caption> <colgroup> <col /> <thead> <tbody> <tfoot> Description Defines a table Defines a table header Defines a table row Defines a table cell Defines a table caption Defines a group of columns in a table, for formatting Defines attribute values for one or more columns in a table Groups the header content in a table Groups the body content in a table Groups the footer content in a table
HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items are marked with bullets (typically small black circles).
<ul> <li>Coffee</li> <li>Milk</li> </ul>

How the HTML code above looks in a browser:
Coffee Milk
HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items are marked with numbers.
<ol> <li>Coffee</li> <li>Milk</li> </ol>

How the HTML code above looks in a browser: 1. Coffee 2. Milk
HTML Definition Lists

A definition list is a list of items, with a description of each item. The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list):
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
Coffee - black hot drink Milk - white cold drink
HTML List Tags

Tag <ol> <ul> <li> <dl> <dt> <dd> Description Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines an item in a definition list Defines a description of an item in a definition list
HTML Forms - The Input Element

The most important form element is the input element. The input element is used to select user information. An input element can vary in many ways, depending on the type attribute. An input element can be of type text field, checkbox, password, radio button, submit button, and more. The most used input types are described below.
Text Fields
<input type="text" /> defines a one-line input field that a user can enter text into:
<form> First name: <input type="text" name="firstname" /><br /> Last name: <input type="text" name="lastname" /> </form>
First name: Last name: Note: The form itself is not visible. Also note that the default width of a text field is 20 characters.
Password Field
<input type="password" /> defines a password field:
<form> Password: <input type="password" name="pwd" /> </form>

Password: Note: The characters in a password field are masked (shown as asterisks or circles).
Radio Buttons
<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form> <input type="radio" name="sex" value="male" /> Male<br /> <input type="radio" name="sex" value="female" /> Female </form>
Male Female
Checkboxes
<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of a limited number of choices.
<form> <input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br /> <input type="checkbox" name="vehicle" value="Car" /> I have a car </form>
I have a bike I have a car
Submit Button
<input type="submit" /> defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
<form name="input" action="html_form_action.asp" method="get"> Username: <input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
Submit
Username:
If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.
HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.
HTML Basic Document

<html> <head> <title>Title of document goes here</title> </head> <body> Visible text goes here... </body>
</html>
Heading Elements
<h1>Largest Heading</h1> <h2> <h3> <h4> <h5> . . . . . . . . . . . . </h2> </h3> </h4> </h5>
<h6>Smallest Heading</h6>
Text Elements
<p>This is a paragraph</p> <br /> (line break) <hr /> (horizontal rule) <pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em> <strong>This text is strong</strong> <code>This is some computer code</code>
Physical Styles
<b>This text is bold</b> <i>This text is italic</i>
Links
Ordinary link: <a href="http://www.example.com/">Link-text goes here</a> Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a> Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a> A named anchor: <a name="tips">Tips Section</a> <a href="#tips">Jump to the Tips Section</a>
Unordered list
<ul> <li>Item</li> <li>Item</li> </ul>
Ordered list
<ol> <li>First item</li>
<li>Second item</li> </ol>
Definition list
<dl> <dt>First term</dt> <dd>Definition</dd> <dt>Next term</dt> <dd>Definition</dd> </dl>
Tables
<table border="1"> <tr> <th>Tableheader</th> <th>Tableheader</th> </tr> <tr> <td>sometext</td> <td>sometext</td> </tr> </table>
Iframe
<iframe src="demo_iframe.htm"></iframe>
Frames
<frameset cols="25%,75%"> <frame src="page1.htm" /> <frame src="page2.htm" /> </frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get"> <input <input <input <input <input <input <input type="text" name="email" size="40" maxlength="50" /> type="password" /> type="checkbox" checked="checked" /> type="radio" checked="checked" /> type="submit" value="Send" /> type="reset" /> type="hidden" />
<select> <option>Apples</option> <option selected="selected">Bananas</option>
<option>Cherries</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form>
Entities
< is the same as < > is the same as > © is the same as
Other Elements
 <blockquote> Text quoted from a source. </blockquote> <address> Written by W3Schools.com<br /> <a href="mailto:us@example.org">Email us</a><br /> Address: Box 564, Disneyland<br /> Phone: +12 34 56 78 </address> Source : http://www.w3schools.com/html/html_quick.asp
Example HTML Form Code:

<form action="/html/tags/html_form_tag_action.cfm" method="get"> <table> <tr> <td>First name:</td> <td> <input type="text" name="first_name" value="" maxlength="100" /> </td> </tr> <tr> <td>Lunch:</td> <td> <input type="radio" name="lunch" value="pasta" /> Pasta <input type="radio" name="lunch" value="rissotto" /> Rissotto </td> </tr> <tr><td>Drinks:</td> <td> <input type="checkbox" name="drinks" value="beer" /> Beer
<input type="checkbox" name="drinks" value="wine" /> Wine </td> </tr> <tr><td>Preferred City:</td> <td> <select> <option value ="sydney">Sydney</option> <option value ="melbourne">Melbourne</option> <option value ="cromwell">Cromwell</option> <option value ="queenstown">Queenstown</option> </select> </td> </tr> <tr> <td>Comments:</td> <td> <textarea rows="3" cols="20" name="comments"></textarea> </td> </tr> <tr><td> </td> <td> <input type="submit" value="Submit" /> </td> </tr> </table>
This results in:
First name: Lunch: Drinks: Preferred City: Comments: Pasta Beer Rissotto Wine
Submit
The registration form
In order to create a user account, we need to gather a minimal amount of information from the user. We need his name, his email address and his desired username and password. Of course, we can ask for more information at this point, but a long form is always a turnoff. So let's limit ourselves to just those fields. Here is the registration form:
<form id='register' action='register.php' method='post' accept-charset='UTF-8'> <fieldset > <legend>Register</legend> <input type='hidden' name='submitted' id='submitted' value='1'/> <label for='name' >Your Full Name*: </label> <input type='text' name='name' id='name' maxlength="50" /> <label for='email' >Email Address*:</label> <input type='text' name='email' id='email' maxlength="50" /> <label for='username' >UserName*:</label>
<input type='text' name='username' id='username' maxlength="50" /> <label for='password' >Password*:</label> <input type='password' name='password' id='password' maxlength="50" /> <input type='submit' name='Submit' value='Submit' /> </fieldset> </form>
So, we have text fields for name, email and the password. Note that we are using the password widget for better usability.
of your web page:

Name: Email:
Comment:
Submit
Reset
<FORM action="mailto:you@yourdomain.com" method="post" enctype="text/plain"> <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%"> <TR> <TD width="30%"><DIV align="right"> <B>Name:</B> </DIV> </TD> <TD width="70%"> <INPUT type="text" name="name" size="20"> </TD> </TR>
<TR> <TD><DIV align="right"><B>Email:</B></DIV> </TD> <TD> <INPUT type="text" name="email" size="20"> </TD> </TR> <TR> <TD><DIV align="right"> <B>Comment:</B> </DIV> </TD> <TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4"> </TEXTAREA> </TD></TR> <TR> <TD> </TD> <TD> <INPUT type="submit" name="submit" value="Submit"> <INPUT type="reset" name="reset" value="Reset"> </TD></TR> </TABLE> </FORM> Change the text indicated in red to your email address.
Here you see the code and an example of the checkboxes. Nice! <input type=checkbox name=Nice!> <input type=checkbox name=Ugly!> <input type=checkbox name=Its ok> Ugly! Its ok!
HTML Tutorial Index

Text & Font Tags Tables Color (Hex)
Page Structure
Adding Images
Bulleted List
Hyperlinks
Backgrounds
Indenting Text
Special Characters
Lines / Dividers
Creating Forms
Drop Down Menu
20,000 MB Hosting - $7
HTML Templates
HTML Basics
Before I get started, you should know that HTML code almost always uses beginning and ending tags. These tags surround the text that will be affected by the code. A beginning tag is generally a word surrounded by brackets. The closure tag is surrounded by the same brackets but with a forward slash right after the opening bracket. For example, if you want to bold a portion of a sentence, then you would use <b> for the opening tag and </b> for the closing. Lets say you want to bold the word "Hello!" in the sentence below. Then your HTML code would look like this: <b>Hello!</b> My name is Carla. The output would be: Hello! My name is Carla. Only the word "Hello!" is bolded because the tags surround that word. If you wanted to bold the entire sentence, then you would have put the closure tag, </b>, after the word "Carla". Be sure to always include your closing tag because if you forget, your entire page will be affected by the tag. You can apply this same concept to many other HTML codes. Here are several of the basics...
Basic Text & Font Tags
New Paragraph: <p> Starts a new paragraph and creates a blank line between your new paragraph and the one above it. The closing tag is </p>, but is not mandatory. Line Break: <br> This will break your text to the next line. Two <br> tags is equivalent to one <p> tag. There's no closing tag needed for this one. Bold: <b> Closing tag is </b> Underline: <u> Closing tag is </u> Italics: <i> Closing tag is </i> Centering text: <center> Closing tag is </center> Left aligning text: <p align="left"> Just use </p> for the closing tag Right aligning text: <p align="right"> Just use </p> for the closing tag Change text color: <font color="red"> The ending for any font tag is </font> If you want more colors, you can also use hex codes . Changing font face: <font face="Arial"> Change font size: <font size="3"> (choose between 1 and 7) Blinking Text: <blink> </blink> (only works in Netscape) Scrolling Text: <marquee> </marquee> (only works in Internet Explorer) ------------------------To learn more HTML checkout Free HTML Tutorials on MarkupTutorials.com. Return to Index
Basic Structure of an HTML Page
Here you will see a sample HTML page with the basic structure. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<html> <head> <title>Title that is displayed at the top of your web browser and also used as the title by many search engines</title> <meta name="description" content="10-15 word description of your site read by some search engines"> <meta name="keywords" content="main keywords of your site separated by commas. Read by some search engines"> </head> <body> <p align="left"> This is my new web page. I hope you like it. Please come back and visit again. If you need help creating your web site visit <a href="http://www.2createawebsite.com">2 Create a Website.com</a>. </p> </body> </html>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ The <html> tag just tells the browser where the HTML starts. It is not necessary to include this tag to get your page to show. The <title> tells your browser the title of the page and youll see this text at the very top of your web browser. This is also used by most search engines when indexing your
page. Whatever text you have here will be title of your site when displayed in the search engines. The <meta name> information is also somewhat useful for some search engines. They may use whatever is in your "description" tag to describe your site. Others may randomly take an excerpt of the <body> of your page for a description of your site. The keyword tag may also be helpful with your ranking in some engines. Insert 3 or 4 of your main keywords or keyword phrases separated by commas here. A few years ago, the <meta name> information was quite crucial in getting a top listing with the search engines. However, things have changed drastically with the explosion of so many new sites and the fact that many people abused it. I would still recommend using these tags but dont expect to get a top ranking because of them. The body of your site should be included inside the <body> tags. Need Help With Your Design? I have some pretty cool, FREE HTML templates you can download. Just select the design you want, download the files to your desktop, edit them on your PC to start designing your site. Return to Index
Inserting Hyperlinks
Hyperlinks are links that take you to another page or web site. You create them by using the code below:
<a href="http://www.thepage.com">Name of link</a>
The link would appear as, Name of link
Open Links in a New Browser Window

If you dont want people to leave your site completely when they click on links to other sites, you can set the link to open up a new window. The "target" attribute allows you to do this:
<a href="http://www "target="_blank">
Absolute vs Relative URLs
URL is another name for a web site address and stands for Uniform Resource Locator.
There are two different types of URLs you can use to link to various pages, absolute and relative. Absolute URLs Absolute URLs include the complete path to the files location, including the names of all the directories and subdirectories. Lets say you have a folder inside your web site's root directory called "music" and you want to link to a page inside the "music" folder called brahms.html. The absolute URL is:
<a href="http://www.yoursite.com/music/brahms.html">Brahms</a>
Relative URLs If you dont want to ever have to worry about going back and editing your hyperlinks if your site structure changes then relative URLs are the way to go. Relative URLs are more or less like shorthand that tells the browser to go backward one or more directories to find the file. Let's say you're on the page we referenced above, brahms.html (located in the "music" folder) and you want to link back to the home page: (http://www.yoursite.com/index.html) Using a relative URL, you would tell the browser to go back 1 directory by using the dot-slash method.
<a href="../index.html">Home</a>
The two dots followed by a slash instructs the browser to go up 1 more level to get to
the main (root) directory. Changing the Hyperlink Colors The default color for hyperlinks on an HTML page is blue, but you can change it to whatever color you'd like by using the link code inside the <body> tag. Here's an example:
<body link="green" vlink="yellow" alink="purple">
In the above example, hyperlinks will be green, links that have already been visited will be yellow and active links will be purple. (An active link is one that has just been clicked, so for a split second the link will change colors as the mouse activates it). Creating Email Links Creating email links are just as simple. All you need is the "mailto" function to get this to work properly: <a href="mailto:youraddress@email.com">Email Me</a> Anchor Links If you want to create a link that will take the visitor to another section of the same page (rather than a new page or site), then you can create an anchor link. There are two steps to this process: 1) First, go to the place in your HTML code where you want the anchor to go. This is the spot on the page that the browser will move to when a person clicks on the link. Insert the code <a name="name1">This is the Text Where the Anchor Will Land</a> "name1" is just the name of the anchor I chose. You can all it anything you want. 2) Now to link to that section of the page, use the hyperlink code:
<a href="#name1">click here</a>
Now when your visitors click on that link, they will be taken to that section of the page. Return to Index
Creating Tables in HTML (Try the HTML table generator)
Get FREE HTML Templates With Hosting

Host your site with WebsitePalace.com and get my HTML templates for free (download link is on the thank you page immediately after ordering). Go toWebsitePalace.com now! Understanding tables, in my opinion, is one of the important lessons you can learn. Tables are such a fundamental part of web page layouts, and you can do so much with your page design if you understand how they work. If you see a web page with a left navigation, usually that page is created by using one big table with two columns and no border. The left column is generally set to a smaller amount than the right column, thus setting up the left navigation.
Basic Table Tags

The three most important tags for tables is the opening table tag, <table> and the table row and table data tags - <tr> and <td> respectively. The <tr> tag represents a row for the table The <td> tag represents a cell inside the row. Now, with that in mind, let's create a simple table:
<table> <tr> <tr> <td>A</td> <td>B</td> <td>C</td> <td>X</td> <td>Y</td> <td>Z</td> </tr> </tr>
</table>
And this is what the table would look like published:

ABC XYZ
Notice that by looking at the code, you can tell how many rows and columns are included just by looking at the code. The two opening <tr> tags indicate two rows and the three opening <td> tags on each line represents three data cells (or three columns).
Adding Table Borders

Adding a border simply involves inserting the border attribute to the opening table tag. So in the above table the code would be adjusted accordingly:
<table border="2"> <tr><td>A</td> <td>B</td> <td>C</td> </tr> <tr><td>X</td> <td>Y</td> <td>Z</td> </tr> </table>
Notice the "2" represents the thickness of the border. If you had set it to "0" then there would have been no border at all. If you wanted it very thick then you could set it to 8, for example. So now your table will look like this:
A B C X Y Z
Changing a Table's Border Color

You can change the color of a table border by simply adding the bordercolor attribute.
<table border="2" bordercolor="red"> <tr><td>A</td> <td>B</td> <td>C</td> </tr> <tr><td>X</td> <td>Y</td> <td>Z</td> </tr> </table>
And here's what it would look like...
A B C X Y Z
Adjusting Table Cell Spacing and Cell Padding

You can increase the space within the table cells and the space between the cells by using the cellpadding and cellspacing attributes. The cellspacing attribute adjusts the space between the cells and cellpadding adjusts the space within (around) the cell.
<table border="2" cellspacing="10" cellpadding="3"> <tr><td>A</td> <td>B</td> <td>C</td> </tr> <tr><td>X</td> <td>Y</td> <td>Z</td> </tr> </table>
This is what the table would look like now...
See how setting the cellspacing attribute to "10" drastically increased the spacing between the cells, and the cellpadding attribute set to "3" added a little of space within each individual cell.
Specifying a Table Width

You can specify the width of a table by using either a percentage or a pixel width.
<table width="100%" border="2"> <tr><td>A</td> <td>B</td> <td>C</td> </tr>
<tr><td>X</td> <td>Y</td> <td>Z</td> </tr> </table>
Since the width is set to 100% that means the table will take up 100% of the screen and the columns in the table will be adjusted evenly. Here's what it would look like.
A X
B Y
C Z
As we mentioned, you can also set the table width using pixels instead of percentages. So instead of setting it to 100%, you could set it to 300 pixels:
<table width="300" border="2"> <tr><td>A</td> <td>B</td> <td>C</td> </tr> <tr><td>X</td> <td>Y</td> <td>Z</td> </tr> </table>
The table would look like this:

A X B Y C Z
Setting Column Widths

Sometimes you may not always want your columns to be the same size. If this is the case, you need to set values on your table data <td> cells. Again, you can set them by using percentages or pixel widths.
<table width="300" border="2"> <tr> <td width="70%"> A</td> <td>B</td> <td>C</td> </tr>
<tr> <td width="70%"> X</td> <td>Y</td> <td>Z</td> </tr> </table>
This is what this table would look like.
A X
B Y
C Z
See how the column width for the first column in both rows is set to 70%. Notice there is no value set for the other 2 columns. If you do not set a value for the remaining columns, their width will automatically be adjusted to take up the remaining space and they'll share it equally. Since the table width is set to 300 pixels, and the first column is instructed to take up 70% of those 300 pixels (roughly 210 pixels), the other 2 columns divide the remaining 30% of the table (roughly 45 pixels a piece). You could also have expressed the column widths of this table in pixels instead of percentages. The code would have looked like this:
<table width="300" border="2"> <tr>< td width="210" >A</td> < td width="45" >B</td> < td width="45" >C</td> </tr> <tr>< td width="210" >A</td> < td width="45" >B</td> < td width="45" >C</td> </tr> </table>
A A
B B
C C
See how the width of the columns in each row add up to 300 (210 + 45 + 45) -- which is the width of the table.
What's the Difference Between Using Percentages and Pixel Widths

Many people prefer to express their table width and column widths in percentages because that will ensure that the table takes up the same amount of screen no matter how big or small the screen resolution is. If someone is using a 21 inch monitor to view your site and you have a table width set to 300 pixels, the table will show up very small on their screen. However if you set the table width to 70%, it will take up 70% of the screen no matter what size the person is using. So it's really up to you to decide what's the best layout for your tables.
Specifying a Table's Height

You can also set the table height by adding the height tag to the table code.
<table height="250" width="300" border="2"> <tr><td width="210">A</td> <td width="45">B</td> <td width="45">C</td> </tr> <tr><td width="210">A</td> <td width="45">B</td> <td width="45">C</td></tr> </table>
Which will produce the following table:

A A B B C C
Horizontally Aligning the Content Inside Tables

The content inside a cell is left aligned by default, but you can also center or right align the text as well by using the align attributes.
<table width="300" border="2"> <tr><td width="210" align="center" >A</td> <td width="45">B</td> <td width="45">C</td> </tr> <tr><td width="210" align="center" >A</td> <td width="45">B</td> <td width="45">C</td></tr> </table>
A A
B B
C C
See how the first column is aligned to the center? You can also right align the columns by using the align="right" inside the <td> cells.
Vertically Aligning the Content Inside the Table Cells

So far we've kept the table cell alignment at the default, which is the middle. Notice in the above table that the A, B, and C are all three aligned in the middle of their cells. Well you can change their alignment to either top, bottom, or middle by using the valign (which stands for vertical align) tag:
<table height="250" width="300" border="2"> <tr><td valign="top" width="210">A</td> <td width="45">B</td> <td width="45">C</td> </tr> <tr><td valign="top" width="210">A</td> <td width="45">B</td> <td width="45">C</td></tr> </table>
A A
B B
C C
I've set the table height to "250" so the alignment would be more noticeable. Notice that the A in both rows are aligned to the top. You can also align to the "bottom" or the "middle".
Creating a Left Navigation Layout With Tables

As we mentioned earlier, most left and right navigations are created using tables. All you do is create a table with one row, two columns and no border. Then align both of your columns to the top (using the valign tag) so your text will start in the top of the columns, not the middle. Depending on if you're going to have a right or left navigation, you'll make one column significantly smaller than the other. Here's a simple left navigation layout:
<table width="100%" border="0"> <tr><td valign="top" width=" 25% ">Left Nav Links Here</td> <td valign="top" width=" 75% ">Body Here</td> </tr> </table>
And here's what it would look like:

Left Nav Links Here Body Here
Notice I set the border to "0" but it's still showing in the example. I just did that to show how the layout would look. If you set your border to "0" you won't see any lines around your table. So there ya have it! That's a general overview of tables. There's so much more you can do with them, but if you can understand the basic layout, you'll be able to do so much with the design of your web site.
Don't forget to try the auto HTML table generator ! Return to Index
Inserting Images
Once you have the image you want to use you can insert it into your web page. Next youll need to do is upload the graphic to your web server. Your web hoster will either provide the environment for you to upload your images or you'll have to use an FTP program. If you need help with FTP, click here. When you upload the graphic, make sure you pay attention to what folder youre putting it into because that will affect how you write the HTML. Lets say you upload the graphic called "apple.gif" to your "images" folder on your web server. The image folder is located inside your "root" directory. Your HTML code will look like this:
<img src="images/apple.gif">
Now lets say you have uploaded the graphic to the "fruit" folder/directory that is located inside of the images folder then the code would appear as:
<img src="images/fruit/apple.gif">
The Alt Tag

If you want text to pop up when you run the mouse over the graphic, then you need to add the alt tag.
<img src="images/apple.gif" alt="This is my apple">
Specify Height and Width

If you want to adjust the height and width of the image then you need to use the height and width tags:
<img src="images/apple.gif" alt="This is my apple" height="100" width="150"> It is recommended that you always include the height and width of your images because it makes your pages load faster.
Adding a Border
To add a border to your image need the "border" attribute. Its very simple: <img src="images/apple.gif" border="5"> The 5 represents the thickness of the border. The higher the number, the thicker the border. The number 0 is equivalent to no border. Or you could just leave the border attribute out if you do not want one.
Multiple Attributes
Lets say you want your graphic to have a border of 2, be 100 x 250 pixels (height x width) and have an alt tag: <img src="images/apple.gif border="5" height="100" width="250" alt="This is my apple"> Please note that it does not matter what order you put the attributes in (border, alt, etc.). Just make sure you do not leave out any of the punctuation. "Help, My Graphic Wont Show!" If your graphic does not show up and you receive the "broken image" icon, check the following:
1. Make sure the file is uploaded and is actually in the directory you are pointing to in your HTML code. 2. Check the case of the actual filename. If you saved the file as "APPLE.gif" but typed "apple.gif" in the HTML code then the image will not show. Case does matter. 3. Check your HTML code and make sure you have included all the punctuation.
Creating a Clickable Image

Linking images is helpful if you have buttons or banners on your site and you want the visitor to be taken to another web page or site when they click on the image. To accomplish this, use the following code:
<a href="http://www.the_linked_site.com"><img src="images/apple.gif" border="0"></a>
The first part of the code tells the browser which site to go to and the second part, of course, tells it where the image is located. Return to Index
Inserting a Background
If used properly, backgrounds can really enhance your site. If used incorrectly, they can make your site very difficult to read. If you plan to use a "loud" background that you think is cool, be sure to keep your visitors in mind. Even though you may love it, it may be distracting for the average visitor and you certainly do not want a background that takes away from your text. In general, try to use light backgrounds on dark text. To insert a background color on your web page, use the following code INSIDE your <body> tag:
<body bgcolor="red" >
You can specify any color, or you can use a hex value .
Inserting a Background Image

If you want an image for your background then you would use the background and image tag together:
<body background="images/weave.gif">
Keeping in mind that "images/weave.gif" is the location of the graphic. So youre telling the browser that the graphic is located in your images folder off the root/main directory. You can also use the absolute path to your image. For example,http://www.yourdomain.com/images/weave.gif Return to Index
Understanding Hex / Color Values
Hex values are used for generating colors other than the standard reds, blues, greens, yellows, purples, etc. As you learned above, to specify a purple font you just use the tag <font color="purple">. But HTML doesn't understand colors like "sky blue" or "pea green" so if you want these kinds of colors, you need to specify a hex color value. The hex color code chart below will give you the HTML code you need for your desired colors... 1. Drag the bar on the "Hue" selector to generate the desired base color. 2. Next double click inside the Brightness/Saturation grid to activate the cursor. Drag it until the desired brightness is achieved. The "Swatch" bar shows you the final color result. 3. The Hex Color Code is generated at the bottom of the grid. Simply copy and paste the code into your page.
Return to Index
Inserting Bullets
You can insert bullets into your pages by simply using the <ul> (unordered list) and <li> (list item) codes.
<ul> <li> Bullet 1 </li> <li> Bullet 2 </li> <li>Bullet 3 </li> </ul>
The above code will create the standard, round bullet that looks like this:

Bullet 1 Bullet 2 Bullet 3
If you would like an open-circle bullet, you can change the code slightly by adding an attribute to the <ul> tag. See below:
<ul type="circle" > <li> Bullet 1 </li> <li> Bullet 2 </li> <li> Bullet 3 </li> </ul>
This will create an open-circle bullet. See below:

o o o
Bullet 1 Bullet 2 Bullet 3
Return to Index
Indenting Text
To indent your text about an inch to the right, simply use the open and closing <blockquote> tag around the text you want to indent.
<blockquote> This text will be indented indented </blockquote>
See how the code makes the text in the paragraph below behave: sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text sample text
This text will be indented indented
Return to Index | Download Tutorial | Free HTML Editor
Special Characters
Code ™ & ® © &dagger; » « ° ¼ ½ ¾ · ¡ Symbol & 30 Trademark Ampersand Registered trademark Copyright Dagger Right pointing double angle quotation mark Left pointing double angle quotation mark Em-dash Degree Quarter Half Three quarters Middle dot Inverted exclamation mark
Description
Return to Index
Horizontal Lines / Dividers

Horizontal lines are great for breaking up paragraphs of text or separating sections of
your page. To create the standard/default horizontal line, you'll just simply insert the <hr> code. This will create a line that looks like this:
Setting Horizontal Line Width, Size and Color

To set the width of your line, simply add a "width" attribute. For example, <hr width="250"> will create a line that is 250 pixels wide. See below...
You can also set the size of the line by inserting a value. So if you wanted a line that is 250 pixels wide and 6 pixels thick, you'd use the following code:
<hr width="250" size="6">
This will produce the line below:
Lastly, you can control the color of the line by inserting the color attribute:
<hr width="250" size="6" color="blue">
You may also use hex colors to define the color of the line. Return to Index
Creating Email/Feedback Forms

Probably one of the easiest forms to setup is the FormMail form. However, in order to make this work your site must be hosted with a host that allows you to upload files to your cgi bin.
If you are not sure about this, contact your web hoster. Next, download the formmail script and follow the instructions provided. Once you've edited the script as necessary, upload/save it to your site's cgi bin folder on your web server. If you do not have a folder named "cgi bin", then you can create a new
folder/directory. Then change the permission of the file to 755 (CHMOD 755). If you need help with uploading and changing permissions see the WSFTP tutorial .
HTML Code for Forms

Once the FormMail file is in place on your server, all you have to do is create a page with the form code to make it work. Below you'll find the code for creating a form in which your visitors can fill out and the results will be emailed to your email address. The form has the following fields:

Text box Password Field (hidden text) Check Box Radio Buttons
Here is what the form will look like and below you will find the HTML code. You will need to change some variables (in red) to customize it to your own needs.
Your Name: Password: Please Place me on your mailing list: What's Your Gender? How Old Are You? 0-25
Male
26-50
51 and Over
Comments:
Submit This Form
Clear Form
Here's the code for the form you can copy and paste. Feel free to remove the HTML code for fields you don't need or adjust the various values to fit your liking. Notice the red text. This is what you need to edit to customize the form. 1) The 1st line should be changed to the address of the FormMail script on your server. 2) The 2nd line should be the address of the page the user views after they submit the form. You may need to create this page. 3) The 3rd line is the email address the form results will be sent to. 4) The 4th line is the subject of the email when the form is sent to your address.
<form METHOD=POST ACTION="http://www.yoursite.com/cgi-bin/formmail.cgi"> <input type=hidden name="redirect" value="http://www.yoursite.com/thankyou.html"> <input type="hidden" name="recipient" value="email@youremail.com"> <input type="hidden" name="subject" value="Form Subject">
<p>Your Name: <input TYPE="text" NAME="Name" SIZE="40" MAXLENGTH="40"> </p>
<p>Password: <input TYPE="password" NAME="password" SIZE="10" MAXLENGTH="10"> </p>
<p>Please Place me on your mailing list: <input TYPE="checkbox" NAME="mailing-list" VALUE="Yes" checked>
</p>
<p>What's Your Gender? <select NAME="Gender"> <option VALUE="Male">Male <option VALUE="Female">Female </select> </p>
<p>How Old Are You? <input TYPE="radio" NAME="Age" VALUE="0-25" checked>0-25 <input TYPE="radio" NAME="Age" VALUE="26-50">26-50 <input TYPE="radio" NAME="Age" VALUE="50 and over">51 and Over </p>
<p>Comments: <br> <textarea NAME="comments" ROWS="10" COLS="50" wrap="virtual"> You can insert default text here if you wish </textarea> </p>
<p> <input TYPE="submit" NAME="Request" VALUE="Submit This Form"> <input TYPE="reset" NAME="Clear" VALUE="Clear Form"> </p>
</form>
Return to Index
Drop Down Menus for Navigation

You can create a drop down navigation menu by using the code below. Simply copy the code into a text editor and edit the links accordingly.
When you're done, the drop down menu will look something like this:
Select an Option
Return to Index

HTML

Cargado por

Información del documento

Descripción original:

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

<html> <body> <h1>My First Heading</h1> <p>My first paragraph.

</p> </body> </html>

The hr tag defines a horizontal rule:

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

This is a regular paragraph

<p>This is<br />a para<br />graph with line breaks</p>

</body> </html> Output

This is a para graph with line breaks

</body> </html> Output

This text is bold This text is strong

This text is big

This is subscript and superscript

HTML Formatting Tags

HTML Text Formatting Tags

<small> <strong> <sub> <sup> <ins> <del>

HTML "Computer Output" Tags

HTML Citations, Quotations, and Definition Tags

Defines a citation Defines a definition term

<p>The font element is deprecated in HTML 4. Use CSS instead!</p>

This paragraph is in Arial, size 5, and in red text color.

The font element is deprecated in HTML 4. Use CSS instead!

<html> <body> <h1 style="font-family:verdana;">A heading</h1> <p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p> </body>

<h1 style="text-align:center;">Center-aligned heading</h1> <p>This is a paragraph.</p>

</body> </html> Output

Attributes align bgcolor color

For all of the above: Use styles instead!

<a href="http://www.w3schools.com" target="_blank">Visit W3Schools.com!</a>

</body> </html> output

<a name="tips">Useful Tips Section</a>

<a href="#tips">Visit the Useful Tips Section</a>

<a href="http://www.w3schools.com/html_links.htm#tips"> Visit the Useful Tips Section</a>

Syntax for defining an image:

<img src="url" alt="some_text"/>

HTML Images - The Alt Attribute

<img src="boat.gif" alt="Big Boat" />

HTML Images - Set Height and Width of an Image

<img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228" />

HTML Image Tags

HTML Tables and the Border Attribute

HTML Table Headers

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

HTML Table Tags

HTML Unordered Lists

<ul> <li>Coffee</li> <li>Milk</li> </ul>

HTML Ordered Lists

<ol> <li>Coffee</li> <li>Milk</li> </ol>

HTML Definition Lists

Coffee - black hot drink Milk - white cold drink

HTML List Tags

HTML Forms - The Input Element

<form> Password: <input type="password" name="pwd" /> </form>

I have a bike I have a car

HTML Basic Document

<li>Second item</li> </ol>

<select> <option>Apples</option> <option selected="selected">Bananas</option>

<option>Cherries</option> </select> <textarea name="comment" rows="60" cols="20"></textarea> </form>

Example HTML Form Code:

The registration form

of your web page:

HTML Tutorial Index

Drop Down Menu

Basic Text & Font Tags

Basic Structure of an HTML Page