To
use any of the following HTML tags, simply select the HTML code you'd like and
copy and paste it into your web page.
Tag
|
Name
|
Code Example
|
Browser View
|
||||||||||||
<!--
|
comment
|
<!--This can be viewed in the HTML part of a document-->
|
Nothing will show (Tip)
|
||||||||||||
<a -
|
anchor
|
<a href="http://www.domain.com/">
Visit Our Site</a> |
Visit Our Site (Tip)
|
||||||||||||
<b>
|
bold
|
<b>Example</b>
|
Example
|
||||||||||||
<big>
|
big (text)
|
<big>Example</big>
|
Example (Tip)
|
||||||||||||
<body>
|
body of HTML document
|
<body>The content of your HTML page</body>
|
Contents of your web page (Tip)
|
||||||||||||
<br>
|
line break
|
The contents of your page<br>The
contents of your page
|
The contents of your web page
The contents of your web page |
||||||||||||
<center>
|
center
|
<center>This will center your contents</center>
|
This
will center your contents
|
||||||||||||
<dd>
|
definition description
|
<dl>
<dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> |
Definition Term
Definition of the term
Definition Term
Definition of the term
|
||||||||||||
<dl>
|
definition list
|
<dl>
<dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> |
Definition Term
Definition of the term
Definition Term
Definition of the term
|
||||||||||||
<dt>
|
definition term
|
<dl>
<dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> |
Definition Term
Definition of the term
Definition Term
Definition of the term
|
||||||||||||
<em>
|
emphasis
|
This is an <em>Example</em>
of using the emphasis tag
|
This is an Example of using
the emphasis tag
|
||||||||||||
<embed>
|
embed object
|
<embed src="yourfile.mid" width="100%"
height="60" align="center">
|
|||||||||||||
<embed>
|
embed object
|
<embed
src="yourfile.mid" autostart="true"
hidden="false" loop="false">
<noembed><bgsound src="yourfile.mid" loop="1"></noembed> |
<bgsound src="wonderfu.mid" autostart="false" loop="1" /> Music will begin playing when your page is loaded and will only play one time. A control panel will be displayed to enable your visitors to stop the music. |
||||||||||||
<font>
|
font
|
<font face="Times New Roman">Example</font>
|
Example (Tip)
|
||||||||||||
<font>
|
font
|
<font face="Times New Roman"
size="4">Example</font>
|
Example (Tip)
|
||||||||||||
<font>
|
font
|
<font face="Times New Roman" size="+3"
color="#ff0000">Example</font>
|
Example (Tip)
|
||||||||||||
<form>
|
form
|
<form action="mailto:you@yourdomain.com">
Name: <input name="Name" value="" size="10"><br> Email: <input name="Email" value="" size="10"><br> <center><input type="submit"></center> </form> |
Name: (Tip)
Email: |
||||||||||||
<h1>
<h2> <h3> <h4> <h5> <h6> |
heading 1
heading 2 heading 3 heading 4 heading 5 heading 6 |
<h1>Heading 1 Example</h1>
<h2>Heading 2 Example</h2> <h3>Heading 3 Example</h3> <h4>Heading 4 Example</h4> <h5>Heading 5 Example</h5> <h6>Heading 6 Example</h6> |
 |
||||||||||||
<head>
|
heading of HTML document
|
<head>Contains elements describing the document</head>
|
Nothing will show
|
||||||||||||
<hr>
|
horizontal rule
|
<hr />
|
Contents of your web page (Tip)
Contents of your web page
|
||||||||||||
<hr>
|
horizontal rule
|
<hr width="50%" size="3" />
|
Contents of your web page
Contents of your web page
|
||||||||||||
<hr>
|
horizontal rule
|
<hr width="50%" size="3" noshade />
|
Contents of your web page
Contents of your web page
|
||||||||||||
<hr>
(Internet Explorer) |
horizontal rule
|
<hr width="75%" color="#ff0000"
size="4" />
|
Contents of your web page
Contents of your web page
|
||||||||||||
<hr>
(Internet Explorer) |
horizontal rule
|
<hr width="25%" color="#6699ff"
size="6" />
|
Contents of your web page
Contents of your web page
|
||||||||||||
<html>
|
hypertext markup language
|
<html>
<head> <meta> <title>Title of your web page</title> </head> <body>HTML web page contents </body> </html> |
Contents of your web page
|
||||||||||||
<i>
|
italic
|
<i>Example</i>
|
Example
|
||||||||||||
<img>
|
image
|
<img src="Earth.gif" width="41" height="41"
border="0" alt="text describing the image" />
|
|||||||||||||
<input>
|
input field
|
Example 1:
<form method=post action="/cgi-bin/example.cgi"> <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> |
Example 1: (Tip)
|
||||||||||||
<input>
(Internet Explorer) |
input field
|
Example 2:
<form method=post action="/cgi-bin/example.cgi"> <input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> |
Example 2: (Tip)
|
||||||||||||
<input>
|
input field
|
Example 3:
<form method=post action="/cgi-bin/example.cgi"> <table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td><td bgcolor="#8463ff" valign="Middle"> <input type="image" name="submit" src="yourimage.gif"></td></tr> </table> </form> |
Example 3: (Tip)
|
||||||||||||
<input>
|
input field
|
Example 4:
<form method=post action="/cgi-bin/example.cgi"> Enter Your Comments:<br> <textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br> <input type="Submit" value="Submit"> <input type="Reset" value="Clear"> </form> |
Example 4: (Tip)
|
||||||||||||
<input>
|
input field
|
Example 5:
<form method=post action="/cgi-bin/example.cgi"> <center> Select an option: <select> <option >option 1</option> <option selected>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select><br> <input type="Submit" value="Submit"></center> </form> |
Example 5: Tip)
Select an option: |
||||||||||||
<input>
|
input field
|
Example 6:
<form method=post action="/cgi-bin/example.cgi"> Select an option:<br> <input type="radio" name="option"> Option 1 <input type="radio" name="option" checked> Option 2 <input type="radio" name="option"> Option 3 <br> <br> Select an option:<br> <input type="checkbox" name="selection"> Selection 1 <input type="checkbox" name="selection" checked> Selection 2 <input type="checkbox" name="selection"> Selection 3 <input type="Submit" value="Submit"> </form> |
Example 6: (Tip)
Select an option: Option 1 Option 2 Option 3 Select an option: Selection 1 Selection 2 Selection 3 |
||||||||||||
<li>
|
list item
|
Example 1:
<menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </MENU> Example 2: <ol type="i"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> |
Example 1: (Tip)
Example 2:
|
||||||||||||
<link>
|
link
|
<head>
<link rel="stylesheet" type="text/css" href="style.css" /> </head> |
|||||||||||||
<marquee>
(Internet Explorer) |
scrolling text
|
<marquee bgcolor="#cccccc"
loop="-1" scrollamount="2"
width="100%">Example Marquee</marquee>
|
|||||||||||||
<menu>
|
menu
|
<menu>
<li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </menu> |
|
||||||||||||
<meta>
|
meta
|
<meta name="Description" content="Description of
your site">
<meta name="keywords" content="keywords describing your site"> |
Nothing will show (Tip)
|
||||||||||||
<meta>
|
meta
|
<meta HTTP-EQUIV="Refresh"
CONTENT="4;URL=http://www.yourdomain.com/">
|
Nothing will show (Tip)
|
||||||||||||
<meta>
|
meta
|
<meta http-equiv="Pragma"
content="no-cache">
|
Nothing will show (Tip)
|
||||||||||||
<meta>
|
meta
|
<meta name="rating" content="General">
|
Nothing will show (Tip)
|
||||||||||||
<meta>
|
meta
|
<meta name="robots" content="all">
|
Nothing will show (Tip)
|
||||||||||||
<meta>
|
meta
|
<meta name="robots"
content="noindex,follow">
|
Nothing will show (Tip)
|
||||||||||||
<ol>
|
ordered list
|
Numbered
<ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Numbered Special Start <ol start="5"> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Lowercase Letters
<ol type="a">
<li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters
<ol type="A">
<li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Letters Special Start
<ol type="A"
start="3">
<li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Lowercase Roman Numerals
<ol type="i">
<li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals
<ol type="I">
<li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Capital Roman Numerals Special Start
<ol type="I"
start="7">
<li>List item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> |
Numbered
Numbered Special Start
Lowercase Letters
Capital Letters
Capital Letters Special Start
Lowercase Roman Numerals
Capital Roman Numerals
Capital Roman Numerals Special
Start
|
||||||||||||
<option>
|
listbox option
|
<form method=post
action="/cgi-bin/example.cgi">
<center> Select an option: <select> <option>option 1</option> <option selected>option 2</option> <option>option 3</option> <option>option 4</option> <option>option 5</option> <option>option 6</option> </select><br> </center> </form> |
Select
an option: (Tip)
|
||||||||||||
<p>
|
paragraph
|
This is an example displaying the
use of the paragraph tag. <p> This will create a line break and a space
between lines.
Attributes: Example 1:<br> <br> <p align="left"> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> Example 2:<br> <br> <p align="right"> This is an example<br> displaying the use<br> of the paragraph tag.<br> <br> Example 3:<br> <br> <p align="center"> This is an example<br> displaying the use<br> of the paragraph tag. |
This is an example displaying the
use of the paragraph tag.
This will create a line break and
a space between lines.
Attributes: Example 1: This is an example displaying the use of the paragraph tag.
Example
2:
This is an example displaying the use of the paragraph tag.
Example
3:
This is an example displaying the use of the paragraph tag. |
||||||||||||
<small>
|
small (text)
|
<small>Example</small>
|
Example (Tip)
|
||||||||||||
<strike>
|
deleted text
|
<strike>Example</strike>
|
|||||||||||||
<strong>
|
strong emphasis
|
<strong>Example</strong>
|
Example
|
||||||||||||
<table>
|
table
|
Example 1:
<table border="4" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> Example 2: (Internet Explorer) <table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> Example 3: <table cellpadding="2" cellspacing="2" width="100%"> <tr> <td bgcolor="#cccccc">Column 1</td> <td bgcolor="#cccccc">Column 2</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> </tr> </table> |
Example 1: (Tip)
Example 2: (Tip)
Example 3: (Tip)
|
||||||||||||
<td>
|
table data
|
<table border="2"
cellpadding="2" cellspacing="2"
width="100%">
<tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> |
|
||||||||||||
<th>
|
table header
|
<div
align="center">
<table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Row 3</td> <td>Row 3</td> <td>Row 3</td> </tr> <tr> <td>Row 4</td> <td>Row 4</td> <td>Row 4</td> </tr> </table> </div> |
|
||||||||||||
<title>
|
document title
|
<title>Title of your HTML page</title>
|
Title of your web page will be
viewable in the title bar. (Tip)
|
||||||||||||
<tr>
|
table row
|
<table border="2"
cellpadding="2" cellspacing="2"
width="100%">
<tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> |
|
||||||||||||
<tt>
|
teletype
|
<tt>Example</tt>
|
Example
|
||||||||||||
<u>
|
underline
|
<u>Example</u>
|
Example
|
||||||||||||
<ul>
|
unordered list
|
Example 1:<br>
<br> <ul> <li>List item 1</li> <li>List item 2</li> </ul> <br> Example 2:<br> <ul type="disc"> <li>List item 1</li> <li>List item 2</li> <ul type="circle"> <li>List item 3</li> <li>List item 4</li> </ul> </ul> |
Example 1:
Example 2:
|
Making a tab in HTML
Many people wonder, is it possible to make tabs in HTML? And if it is, how can you do it? While there is no HTML tab tag (like the bold tag or the italic tag), there are many ways to get a tab-like effect.Option 1: Preformatted
You can put tab characters in your HTML directly if you use what’s called “preformatted” text.In HTML, surround text that you want “preformatted” in a pair of “<pre>” and “</pre>” start and end tags. Any spacing characters you put between those tags (including tab characters) will show up just as you entered them. The result looks something like this:Last First Date of Birth
Doe Jane Feb. 19, 1964
Schmoe Joe June 2, 1968Unless you changed your browser settings, you should see this in a fixed-width font, different from the font in the rest of your page. In a fixed-width font, text on different lines will line up. Otherwise, the text can get ragged, as in this example:
Last First Date of Birth
Doe Jane Feb. 19, 1964
Schmoe Joe June 2, 1968
Here is the HTML code I used to get these effects:<pre>
Last First Date of Birth
Doe Jane Feb. 19, 1964
Schmoe Joe June 2, 1968
</pre>for the first one, and:
<pre style="font-family: Verdana, Arial, sans serif;">
Last First Date of Birth
Doe Jane Feb. 19, 1964
Schmoe Joe June 2, 1968
</pre>for the second.
Otherwise, you can’t put tabs in HTML directly. It’s not built for it, because HTML is a language for expressing content, not formatting. This is why many designers have a love-hate relationship with HTML.
However, you can do something that looks a lot like a tab. In fact, there several ways to make something that looks like a tab in HTML.
Option 2: Tables
The first alternative is to use tables to space things out.
This is by far the most common way people use to space things neatly on HTML
pages. There are many good sources on making HTML tables - I mean many
good sources, coming at them from many angles. Look at any web site on HTML or
any book on HTML design. For now, I’ll just show something quick.
In fact there is more than one way to get tables to work. Here are two
examples of table with the same information in it as in the preformatted
example:Table Example 1
Last
|
First
|
Date of Birth
|
Doe
|
Jane
|
Feb. 19, 1964
|
Schmoe
|
Joe
|
June 2, 1968
|
Last
|
First
|
Date of Birth
|
||
Doe
|
Jane
|
Feb. 19, 1964
|
||
Schmoe
|
Joe
|
June 2, 1968
|
Here is what the HTML code looks like:
Table Example 1
<table>
<tr><td width="100">Last</td><td width="100">First</td><td width="300">Date of Birth</td></tr>
<tr><td>Doe</td><td>Jane</td><td>Feb. 19, 1964</td></tr>
<tr><td>Schmoe</td><td>Joe</td><td>June 2, 1968</td></tr>
</table>Table Example 2
<table>
<tr><td>Last</td><td> </td><td>First</td><td> </td><td>Date of Birth</td></tr>
<tr><td>Doe</td><td> </td><td>Jane</td><td> </td><td>Feb. 19, 1964</td></tr>
<tr><td>Schmoe</td><td> </td><td>Joe</td><td> </td><td>June 2, 1968</td></tr>
</table>It may look like a lot, but it’s really not. Even basic HTML editors should be able to help you with this. Even creating tables by hand isn’t too bad (it’s my preferred method), just a bit time-consuming. (So why do I do it? It gives me more control over the final formatting and how fast my pages will download.)
Thanks to Richard for the Table 1 Example code! I put it first because it is nicer than than my original version, which is now in Table Example 2.
Option 3: Using the <dd> Tag
This one’s a bit of a cheat, but it works! The <dd> tag is for formatting definitions. But it also will create a line break and make a tab! Here’s an example of a couple of paragraphs that are formatted with the <dd> tag to make a nice tab at the start of the line.
Elit immitto adsum gravis valde
occuro quadrum hendrerit ad tego imputo ad quidne. Verto gilvus hendrerit odio
velit lenis sino duis suscipit molior odio, dolore fere. Nonummy feugiat cui,
ingenium acsi vulputate. Et virtus facilisi sed luctus singularis, hendrerit
epulae epulae.
Illum rusticus, tincidunt, ut exerci
ea feugiat torqueo. Lenis dolore vulputate gemino iriure vel esse vel. Nimis et
enim multo, comis letalis abigo wisi duis tum turpis refero, lobortis ingenium.
Aptent vel, ibidem augue populus, augue et.
And here’s the code:<p><dd>Elit immitto adsum gravis valde occuro quadrum hendrerit ad tego imputo ad
quidne. Verto gilvus hendrerit odio velit lenis sino duis suscipit molior odio, dolore fere.
Nonummy feugiat cui, ingenium acsi vulputate. Et virtus facilisi sed luctus singularis,
hendrerit epulae epulae.
</dd></p>
<p><dd>Illum rusticus, tincidunt, ut exerci ea feugiat torqueo. Lenis dolore
vulputate gemino iriure vel esse vel. Nimis et enim multo, comis letalis abigo wisi duis
tum turpis refero, lobortis ingenium. Aptent vel, ibidem augue populus, augue et.
</dd></p>Thanks to J Smith for this trick! I would never have thought of it.
Option 4: , The Non-Breaking Space
One bit of HTML code I used in the table example is the “non-breaking space,” encoded as in HTML. This just gives you some space. Combined with a line break, <br>, you can create some tab-like effects. For example, you can:Indent a line
or put extra space in a line,
but you can’t make text on different lines line up, like you can with the table or <pre> tag. In case you want to do this, here’s how I did it:
<p> Indent a line<br><br>
or put extra space in a line,<br><br>
Option 5: CSS
To make designers happy, there’s a relatively new HTML technology available, called Cascading Style Sheets (CSS). Actually, it’s been around long enough for some very good books to be written about it. It is also incredibly popular on the web, and appears in many web pages today.In fact, there’s a CSS stylesheet built into this page. If you look at the page source you’ll be able to see it. (Go to the View menu on your browser and look for a menu item called Source, Page Source, or similar.) The stylesheet for this page looks like this:
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, sans serif;
}
// -->
</style>It says that I want you to see my page on your screen in the font Verdana (if you have it), or Arial (if you don’t have Verdana) or whatever sans serif font you’ve set as a default, if you don’t have Verdana or Arial.
In addition to specifying fonts, CSS can also (in theory) be used to specify where text should appear on the page, and to specify how whitespace (including tabs) should appear. This can be used to specify “tabs”. Unfortunately, not all browsers support these features, so you can’t count on them to work. A good source on formatting whitespace using CSS is the article CSS Tip: Adding Whitespace To Text at NetMechanic.
One way to use CSS that works on some recent browsers is to make indents. For example, you can:
Indent the whole paragraph...
Indent the first line of a very long paragraph. To
illustrate, this paragraph just runs on and on. I need to keep adding useless
words so that it will wrap in your browser window. Mary had a little lamb whose
fleece was white as snow, and everywhere that Mary went that lamb was sure to
go... and I hope that’s enough words that the line wraps around in your
browser.
Indent all but the first line in a long paragraph.
Like the last example, this paragraph has to run on and on so that it will wrap
in your browser window. ’Twas brillig and the slithey toves did gyre and gimble
in the wabe; all mimsy were the borogroves, and the mome raths outgrabe...Whew!
I hope it’s wrapped by now.
If you didn’t see what I said you should see, then your browser
doesn’t support these CSS features. On my Windows system, for example, Netscape
displays properly, but Internet Explorer and Mozilla Firefox don’t.Here’s the stylesheet that let me do all that:
<style type="text/css">
<!--
/* Indent whole paragraph */
p.indent {
margin-left: 1.5em;
}
/* Indent the first line only */
p.firstindent:first-line {
margin-left: 1.5em;
}
/* Indent all but the first line (have to make indent negative for the first line) */
p.restindent {
margin-left: 1.5em;
}
p.restindent:first-line {
margin-left: -1.5em;
}
// -->
</style>
You can also use CSS code directly, without using
a stylsheet. I did that with this paragraph, using an example provided to me by
Bojidar (thanks, Bojidar!). Here’s how it’s coded in HTML:
<p style="text-indent: 30px;" align="justify">You can also use CSS code directly, without using
a stylsheet. I did that with this paragraph, using an example provided to me by Bojidar (thanks, Bojidar!).
Here’s how it’s coded in HTML:</p>There are web sites and many, many books about CSS, including how to use different positioning schemes. They take more work up front, but (when the browser supports them) they offer the most control by far.
My final recommendation
If you don’t mind using a fixed-width font, or if you don’t need the text to line up, then use preformatted text! It’s easy and will get the job done. If not, use tables. They are flexible, very useful and well worth learning about. Finally, if you really need things to look right, and you know that the people viewing your site will use browsers that support CSS (or if you are trying to build for the future and want to know what the next generation technology is), then use CSS. You may be frustrated at not being able to display your page properly in all browsers yet, but browser compliance is improving all the time. (Also, I strongly recommend learning about CSS even if you don’t want to use it for tabs.)For online tutorials about HTML, CSS, and much more, try the W3C Schools site.
Tidak ada komentar:
Posting Komentar