HTML Tutorial
HTML Tutorial
Page: head body | Page structure | Text formatting | Links
Graphical elements | Tables | Forms | FramesRead 1-how_to_learn_html.html to learn how to make web pages.
Using your text editor, type the code examples on this page.
Using your web browser, view the results!
Learn how to fix problems
Learn more about html
The left column gives explanations about the html tags. The right column gives the
html code to type in your web pageand the result you should see in your pageSee more about writing web pages here
| Page Tags |
top ↑ |
|---|---|
|
The page tags tell the browser which part of the web page is information for the browser (in the <head> tag), and which part is to be displayed (in the <body> tag). All web pages have a <head> and a <body>, just like you and me! |
|
|
<html> </html>
<head> </head>
<body> </body>
|
example code: Here is the code for a basic web page: <html>
<head>
<title>
My Big Web Page
</title>
</head>
<body>
<h1>
About html
</h1>
<p>
HTML tags may look confusing!
But really there are only about 25 html tags,
and you usually use only about 15 of them.
</p>
</body>
</html>
And this will make a web page that looks (more or About htmlHTML tags may look confusing! But really there are only about 25 html tags, and you usually use only about 15 of them. |
| Head Tag |
top ↑ |
|
|---|---|---|
|
The <head> tag contains information about the web page. The most common head tag is the <title> tag. There are others: <meta>, <style>, <javascript>, that you can learn later. |
||
This text is also used by the browser in its history list, bookmarks ("favorites"), and 'back' and 'forward' button menus. Also it is used by search engines, to display when they find your page. The title may seem like a small thing, but it can be really helpful, or very unhelpful, to your user. The title tag never has any attributes. |
example code:
<head>
<title>
My Great Page
</title>
</head>
Now the title bar at the top of the web browser will say "My Great Page". |
|
| Body Tag |
top ↑ |
|
|---|---|---|
|
The body tag holds the content that you see in the browser. That is, everything that the user sees in the web page, is inside the <body> tag. All the html tags below go between the <body> tags. |
||
|
example code:
<html>
<head>
<title>
My Great Page
</title>
</head>
<body>
<p>
all page content goes here.
</p>
</body>
</html>
result in web page: all page content goes here. |
|
| Page Structure |
top ↑ |
||
|---|---|---|---|
|
<hl> - the header tag <hl>some text</hl> Creates the largest headline |
example code:
<h1>
This is a level 1 header
</h1>
result in web page: This is a level 1 header |
||
|
<h6>some text</h6> Creates the smallest headline (Don't confuse the 'header' tags — <h1> — with the 'head' tag — <head> — they are different!) |
example code:
<h1>
This is a level 6 header
</h1>
result in web page: This is a level 6 header |
||
|
<p> - the paragraph tag
Creates a paragraph. Puts extra space above and below. |
example code: <p>
Here is a paragraph with some words in it so that
it will wrap and look like a paragraph.
</p>
<p>
Here is another paragraph, to show how the p
tag will put some space between paragraphs.
</p>
|
||
Aligns a paragraph horizontally. ALIGN is either "left", "right", or "center". |
example code: <p>
This paragraph is aligned to the left.
(If you don't give any "align" at all,
the paragraph will always align to the left.)
</p>
result in web page: This paragraph is aligned to the left. (If you don't give any "align" at all, the paragraph will always align to the left.) example code: <p align="right">
This paragraph is aligned to the right.
With some words in it so that
it will wrap and look like a paragraph.
</p>
result in web page: This paragraph is aligned to the right. With some words in it so that it will wrap and look like a paragraph. example code: <p align="center">
This paragraph is aligned in the center.
With some words in it so that
it will wrap and look like a paragraph.
</p>
result in web page: This paragraph is aligned in the center. With some words in it so that it will wrap and look like a paragraph. |
||
|
<br />
Makes a line break |
example code: Here is some text <br /> and some more.
result in web page:
Here is some text
and some more. |
||
|
lists
|
|||
|
<ol></ol>
<li></li>
|
example code: <ol>
<li> ice cream </li>
<li> oats porridge </li>
<li> chocolate </li>
</ol>
result in web page:
|
||
|
<ul></ul>
<li></li>
|
example code: <ul>
<li> ice cream </li>
<li> oats porridge </li>
<li> chocolate </li>
</ul>
result in web page:
|
||
|
<dl></dl>
<dt>term</dt>
<dd>definition</dd>
|
example code: <dl>
<dt> ice cream </dt>
<dd> Food of the gods. </dd>
<dt> oats porridge </dt>
<dd> A delicious and filling
breakfast, especially in winter. </dd>
<dt> chocolate </dt>
<dd> The best chocolate is
bittersweet and hard to bite. </dd>
</dl>
result in web page:
|
||
A tag used to format blocks of HTML. In html it is usually used for aligning blocks of text, a table, or an image. It is useful for many things when using stylesheet language (css). In fact, it was invented for use with style language. |
example code: <div style="text-align: center;
background-image: url(images/lightblue-sand.jpg);
width: 200px; height: 100px;">
<p>
Here is a div using css to make the width and background image.
</p>
</div>
result in web page: Here is a div using css to make the width and background image. |
||
A tag used to format inline text.
Like |
example code: <p>
We can do
<span style="color: green; border: 1px dashed red;">many things</span>
with css language.
</p>
result in web page: We can do many things with css language. | ||
| Text Formatting |
top ↑ |
|
|---|---|---|
| Here are the html tags for making text bold, italic, or preformatted. We don't use these tags very often. To change font size, color, and many other nice things, we usually use stylesheet language. | ||
|
<b> - the bold tag <b>some text</b> Creates bold text |
example code: <p>
Here are some <b>bold words</b>.
</p>
result in web page:
Here are some bold words.
|
|
|
<i> - the italic tag <i>some text</i> Creates italic text. |
example code: <p>
Here are some <i>italic words</i>.
</p>
result in web page:
Here are some italic words.
|
|
|
<code> - the code tag <code>some text</code> This creates text in a monospace font, to look like programming code. |
example code: <p>
Here is some <code>code text</code>.
</p>
result in web page:
Here is some
code text
|
|
|
<pre> - the pre tag
For preformatted text - the text will show in the browser just the way you typed it in the html page. This is useful for displaying data or code, when you don't really need it marked up with complex html code. |
example code: <pre>
what when how
---- ---- ---
cats happy purr
dogs happy wag
dogs excited bark
</pre>
result in web page: what when how ---- ---- --- cats happy purr dogs happy wag dogs excited bark |
|
| Links |
top ↑ |
|---|---|
Links are what the web is all about!
The <a> tag makes links.
(The 'a' stands for 'anchor'.)
|
|
|
<a> - the a tag. Makes an anchor. <a href="URL">some text</a> Creates a link, or hyperlink reference. The "URL" is the name of the file you want to go to. It can be a file on your website, or another website.
In the example on the right,
the file "some text" is the words that the user will see, that they can click on. |
example code: Link to a page on your website: <p>
Read about
<a href="../css-begin/2-css_tutorial.html">
stylesheets</a>.
</p>
result in web page:
Read about
stylesheets.
Link to another website: <p>
At the
<a href="http://www.w3.org/">w3 consortium</a>
you can find out everything about html and stylesheets.
</p>
result in web page:
At the
w3 consortium
you can find out everything about html and stylesheets.
|
|
Linking to a location in a web page requires two <a> tags: <a name="NAME">some text</a> Creates the target location within a page <a href="#NAME">some text</a> Links to that target location from elsewhere in the page In this looooong page, the 'top' links on the right end of each blue header use this to help you get back to the top. |
Link to one location in a web page: example code: <a name="here">here is the anchor name</a>
result in web page: example code: Go to the <a href="#here">anchor name</a>.
result in web page:
Go to the anchor name.
|
|
Graphical Elements
More elements (movies, sound, etc.) in media_tutorial.html |
top ↑ |
|---|---|
|
<img> - the img tag. Displays an image in the page. <img src="LOCATION" />
"LOCATION" means "the path to the image file" —
that is, the folder where the image file is.
The folder should be inside the same folder with
your other web pages.
In the example on the right, the
Remember that the image is still a separate file. It does not become part of your html file, as it would for instance in MSWord become part of your Word file. Below are other attributes for the 'img' tag. You can use any of all of them, but of course you always have to use the 'src' attribute also – or you won't see any picture! It is recommended to always use the 'width', 'height' attributes. These will make the browser load the image faster. Also always put something in the 'alt' attribute. This will make things nicer for your user.
width="NUMBER"
height="NUMBER"
("NUMBER" is in pixels)
alt="TEXT"
align="ALIGN"
("left" or "right")
border="BORDER"
("BORDER" is in pixels)
|
example code:
<p>
<img src="images/dalai_lama-sm.jpg"
width="199"
height="126"
align="right"
alt="his holiness and the himalayas" />
Here is a picture of His Holiness ...
</p>
result in web page:
|
|
<hr />
<hr size="SIZE" />
<hr width="WIDTH" />
<hr align="ALIGN" />
<hr noshade />
|
example code: <hr size="1" noshade /><hr size="1" width="50%" align="right" /> <hr size="10" width="80%" align="left" /> |
| Tables |
top ↑ |
||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| The <table> tag was originally invented for scientists to display their data, the same way you would use an MSExcel spreadsheet. But now that other than scientists are using html, tables have become a very useful way to lay out our page design - at least until the browser companies all decide to do stylesheets. the same way! | |||||||||||||||||||||
|
<table> - the table tag
table attributes
<table border="NUM">
<table cellspacing="NUM">
<table cellpadding="NUM">
<table width="NUM">
<table bgcolor="COLOR">
<table background="IMAGE">
<table align="ALIGN">
row attributes
<tr align="ALIGN"> or <td align="ALIGN">
<tr valign="VALIGN"> or <td valign="VALIGN">
column (cell) attributes
<td colspan="NUM">
<td rowspan="NUM">
<td nowrap>
<td bgcolor="COLOR">
<td background="IMAGE">
|
examples: here is a simple (and boring) table: <table cellpadding="8" cellspacing="0" border="1">
<tr>
<th>one</th>
<th>three</th>
<th>two</th>
</tr>
<tr>
<td colspan="3">how many? </td>
</tr>
</table>
Click here to see the code for this table.
Click here to see the code for this table.
(If the image is smaller than the table or the cell, it will repeat. In the first table above, this was useful since the image is a pattern. In the second table it would not look so nice for the image to repeat.) |
||||||||||||||||||||
| Forms |
top ↑ |
||
|---|---|---|---|
| The form tags will make a form with places where people can type things and click buttons. BUT: The form doesn't actually do anything. You need a separate program to make the form do anything! This program may be a cgi program, php, perl, or some other programming language. | |||
|
<form> - the form tag
<form method="post" action="SCRIPTNAME">
= form tags go here, also text, images, whatever. = </form> |
Begins and ends a form. The 'action' is the name of the program (script) that will run when the person clicks the submit button. The tags below go between the <form> tags. |
||
|
menus
Creates a pulldown menu.
Your user can pick one thing from the menu.
The things to pick are created with the
Creates a scrolling, multiple-choice menu.
Again, the things to pick are created with the <option /> tag.
<option value="VALUE" /> something
|
examples: <select name="colors">
<option value=""> choose:</option>
<option value="blue"> blue</option>
<option value="red"> red</option>
<option value="purple"> purple</option>
<option value="gold"> gold</option>
</select>
|
||
|
<select multiple size="3" name="colors">
<option value=""> choose: </option>
<option value="blue"> blue </option>
<option value="red"> red </option>
<option value="purple"> purple </option>
<option value="gold"> gold </option>
</select>
|
|||
|
text fields
|
|||
Creates a one-line text area.
|
example code: <input type="text" name="name" value="your name here" size="40" />
<input type="text" name="name" size="20" maxlength="30" />
|
||
Creates a text box area. 'cols' (columns) set the width; 'rows' set the height. As with 'size' in the one-line input method, the size you actually get will vary with different browsers. |
example code: <textarea name="comments" cols="40" rows="4">type here</textarea>
|
||
|
checkboxes and radio buttons |
|||
<input type="checkbox"
name="NAME" value="VALUE" />
Creates a checkbox.
|
example code: <input type="checkbox" name="animals" value="goat" /> goats
<input type="checkbox" name="animals" value="sheep" /> sheep
<input type="checkbox" name="animals" value="yak" /> yaks
goats
sheep
yaks
|
||
<input type="radio"
name="NAME" value="VALUE" />
Creates a radio button.
Your programmer will tell you what needs to be put in the 'name' and 'value' places. |
example code: <input type="radio" name="animals" value="g" /> goats
<input type="radio" name="animals" value="s" /> sheep
<input type="radio" name="animals" value="y" /> yaks
|
||
|
form buttons
<input type="submit" name="NAME" value="VALUE" />
Creates a Submit button.
The Submit button will look a little different in different browsers. |
examples: <input type="submit" name="submit" value="Send" />
|
||
<input type="image" name="NAME" value="VALUE"
src="IMAGE" />
Creates a Submit button using an image. Because it is an image, it will look the same in all the browsers. (The color may not be exact though.) |
<input type="image" name="submit" value="doit"
src="images/b_login.gif" />
|
||
Creates a Reset button. We don't use this much any more. |
<input type="reset" value="clear the form" />
|
||
| Frames |
top ↑ |
|---|---|
|
Frames should not be used on most public websites. Why?
So – frames don't make it easier for you to build your website, and they do make it harder for people to use your website. Frames can be very useful in an online application. But that is the only good reason that i know of to use frames. If you do need to use frames for a particular reason, you can learn the code from any html book or website. |
|
| copyright / license |
top ↑ |
|---|---|
|
Q: Can i copy this file? Can i give to other people? Answer: Sure, you can give it to anyone, according to the terms of the license below. It is copyright © 2004 James Walker. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no Invariant Sections, with no Front-Cover Texts, and with no Back-Cover Texts. A copy of the license is included here. If not found, find it at www.fsf.org - the Free Software Foundation. |
|
| translation |
top ↑ |
|---|---|
|
It would be very useful to have translations of this document in any language. Most preferred would be Tibetan, Hindi, Nepali, and Chinese. Please contact me if you can do a translation for us. |
|
| contact |
top ↑ |
|---|---|
|
Was this helpful? Is it clear, or confusing? I would be happy to hear anything about how to make this better. You can contact me at the email address i have given you, or at http://www.webwalker.to/contact.php |
|
Here is a picture of His Holiness the Dalai Lama.
We are using it to also demonstrate how we align
a picture with some text. By specifying
'align=right', we tell the
browser to put the picture on the right, and
wrap the text to the left around the picture.