Scribd
Upload
128 views

Example: Archer Solutions

The document provides examples of HTML tags and their functions. Some key tags include: <p> - paragraph <b> - bold text <i> - italic text <img> - insert image <form> - create a web form <input> - allows users to enter text or other data <textarea> - multiline text input field The document shows how each tag is written in HTML and how it will be displayed in a web browser. It provides a simple reference for common HTML tags and their usage.

Uploaded by

masumi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
128 views

Example: Archer Solutions

The document provides examples of HTML tags and their functions. Some key tags include: <p> - paragraph <b> - bold text <i> - italic text <img> - insert image <form> - create a web form <input> - allows users to enter text or other data <textarea> - multiline text input field The document shows how each tag is written in HTML and how it will be displayed in a web browser. It provides a simple reference for common HTML tags and their usage.

Uploaded by

masumi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Archer Solutions

Tag Name Code Example Browser View


<!--This can be viewed in the HTML part of a
<!-- comment Nothing will show
document-->
<a href="http://www.domain.com/">
<a - anchor Visit Our Site
Visit Our Site</a>
<b> bold <b>Example</b> Example
<big> big (text) <big>Example</big> Example
body of
HTML <body>The content of
<body> Contents of your web page
documen your HTML page</body>
t
The contents of your web
line The contents of your page<br>The contents page
<br>
break of your page The contents of your web
page
<center>This will center your This will center your
<center> center
contents</center> contents
<dl> Definition Term
<dt>Definition Term</dt> Definition of the
definition
<dd>Definition of the term</dd> term
<dd> descripti
<dt>Definition Term</dt> Definition Term
on
<dd>Definition of the term</dd> Definition of the
</dl> term
<dl> Definition Term
<dt>Definition Term</dt> Definition of the
definition <dd>Definition of the term</dd> term
<dl>
list <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the
</dl> term
<dl> Definition Term
<dt>Definition Term</dt> Definition of the
definition <dd>Definition of the term</dd> term
<dt>
term <dt>Definition Term</dt> Definition Term
<dd>Definition of the term</dd> Definition of the
</dl> term
This is an <em>Example</em> of using This is an Example of using
<em> emphasis
the emphasis tag the emphasis tag
embed <embed src="yourfile.mid" width="100%"
<embed>
object height="60" align="center">

<embed src="yourfile.mid" autostart="true" Music will begin playing


embed hidden="false" loop="false"> when your page is loaded
<embed>
object <noembed><bgsound src="yourfile.mid" and will only play one time.
loop="1"></noembed> A control panel will be
displayed to enable your
visitors to stop the music.
<font face="Times New
<font> font Example
Roman">Example</font>
<font face="Times New Roman"
<font> font Example
size="4">Example</font>

<font face="Times New Roman" size="+3"


<font> font
color="#ff0000">Example</font> Example

1
Archer Solutions

<form action="mailto:[email protected]
">
Name:
Name: <input name="Name" value=""
size="10"><br> Email:
<form> form
Email: <input name="Email" value=""
size="10"><br> Submit
<center><input type="submit"></center>
</form>

<h1> heading 1 <h1>Heading 1 Example</h1>


<h2> heading 2 <h2>Heading 2 Example</h2>
<h3> heading 3 <h3>Heading 3 Example</h3>
<h4> heading 4 <h4>Heading 4 Example</h4>
<h5> heading 5 <h5>Heading 5 Example</h5>
<h6> heading 6 <h6>Heading 6 Example</h6>

heading
of HTML <head>Contains elements describing the
<head> Nothing will show
documen document</head>
t

horizonta Contents of your web page


<hr> <hr />
l rule
Contents of your web page
Contents of your web page
horizonta
<hr> <hr width="50%" size="3" />
l rule
Contents of your web page
Contents of your web page
horizonta
<hr> <hr width="50%" size="3" noshade />
l rule
Contents of your web page
<hr> Contents of your web page
horizonta <hr width="75%" color="#ff0000" size="4"
(Internet
l rule />
Explorer) Contents of your web page
<hr> Contents of your web page
horizonta <hr width="25%" color="#6699ff" size="6"
(Internet
l rule />
Explorer) Contents of your web page
<html>
<head>
<meta>
hypertext
<title>Title of your web page</title>
<html> markup Contents of your web page
</head>
language
<body>HTML web page contents
</body>
</html>
<i> italic <i>Example</i> Example
<img src="Earth.gif" width="41"
<img> image height="41" border="0" alt="text describing
the image" />
Example 1:
Example 1:
<form method=post action="/cgi-
input
<input> bin/example.cgi">
field Submit
<input type="text" size="10"
maxlength="30">
<input type="Submit" value="Submit">

2
Archer Solutions

</form>
Example 2:

<form method=post action="/cgi- Example 2:


bin/example.cgi">
<input>
input <input type="text" style="color: #ffffff;
(Internet
field font-family: Verdana; font-weight: bold; font- Submit
Explorer)
size: 12px; background-color: #72a4d2;"
size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>
Example 3:

<form method=post action="/cgi-


bin/example.cgi">
Example 3:
<table border="0" cellspacing="0"
input cellpadding="2"><tr><td
<input>
field 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 4: Example 4:

<form method=post action="/cgi-


bin/example.cgi">
Enter Your Comments:<br>
input
<input> <textarea wrap="virtual" name="Comments"
field
rows=3 cols=20
maxlength=100></textarea><br>
<input type="Submit" value="Submit"> Submit Clear
<input type="Reset" value="Clear">
</form>
Example 5:

<form method=post action="/cgi-


bin/example.cgi">
<center> Example 5:
Select an option:
<select> Select an
<option >option 1</option> option 6
input option:
<input> <option selected>option 2</option>
field
<option>option 3</option> Submit
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
<input type="Submit"
value="Submit"></center>
</form>

Example 6: Example 6:

<form method=post action="/cgi- Select an option:


bin/example.cgi">
input Option 1
<input> Select an option:<br>
field
<input type="radio" name="option"> Option Option 2
1
<input type="radio" name="option" Option 3
checked> Option 2

3
Archer Solutions

<input type="radio" name="option"> Option Select an option:


3
<br> Selection 1
<br>
Select an option:<br> Selection 2
<input type="checkbox" name="selection">
Selection 3
Selection 1
<input type="checkbox" name="selection" Submit
checked> Selection 2
<input type="checkbox"
name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>
Example 1: Example 1:
<menu>
<li type="disc">List item 1</li> List item 1
<li type="circle">List item 2</li> o List item 2
<li type="square">List item 3</li> List item 3
</MENU>
<li> list item
Example 2: Example 2:

<ol type="i"> i. List item 1


<li>List item 1</li> ii. List item 2
<li>List item 2</li> iii. List item 3
<li>List item 3</li> iv. List item 4
<li>List item 4</li>
</ol>
<head>
<link rel="stylesheet" type="text/css"
<link> link
href="style.css" />
</head>

<marquee
<marquee bgcolor="#cccccc" loop="-1"
> scrolling
scrollamount="2" width="100%">Example
(Internet text
Marquee</marquee>
Explorer)

<menu> List item 1


<li type="disc">List item 1</li> o List item 2
<menu> menu <li type="circle">List item 2</li> List item 3
<li type="square">List item 3</li>
</menu>
<meta name="Description"
content="Description of your site">
<meta> meta Nothing will show
<meta name="keywords"
content="keywords describing your site">
<meta HTTP-EQUIV="Refresh"
<meta> meta CONTENT="4;URL=http://www.yourdomain.c Nothing will show
om/">
<meta http-equiv="Pragma" content="no-
<meta> meta Nothing will show
cache">
<meta> meta <meta name="rating" content="General"> Nothing will show
<meta> meta <meta name="robots" content="all"> Nothing will show
<meta name="robots"
<meta> meta Nothing will show
content="noindex,follow">

4
Archer Solutions

Numbered Numbered

<ol> 1. List item 1


<li>List item 1</li> 2. List item 2
<li>List item 2</li> 3. List item 3
<li>List item 3</li> 4. List item 4
<li>List item 4</li>
</ol>
Numbered Special Start
Numbered Special Start
5. List item 1
<ol start="5"> 6. List item 2
<li>List item 1</li> 7. List item 3
<li>List item 2</li> 8. List item 4
<li>List item 3</li>
<li>List item 4</li> Lowercase Letters
</ol>
a. List item 1
Lowercase Letters b. List item 2
c. List item 3
<ol type="a"> d. List item 4
<li>List item 1</li>
<li>List item 2</li> Capital Letters
<li>List item 3</li>
<li>List item 4</li>
</ol> A. List item 1
B. List item 2
Capital Letters C. List item 3
D. List item 4
<ol type="A">
ordered <li>List item 1</li> Capital Letters Special
<ol>
list <li>List item 2</li> Start
<li>List item 3</li>
<li>List item 4</li> C. List item 1
</ol> D. List item 2
E. List item 3
Capital Letters Special Start F. List item 4

<ol type="A" start="3"> Lowercase Roman


<li>List item 1</li> Numerals
<li>List item 2</li>
<li>List item 3</li> i. List item 1
<li>List item 4</li> ii. List item 2
</ol> iii. List item 3
iv. List item 4
Lowercase Roman Numerals
Capital Roman Numerals
<ol type="i">
<li>List item 1</li>
I. List item 1
<li>List item 2</li>
II. List item 2
<li>List item 3</li>
III. List item 3
<li>List item 4</li>
IV. List item 4
</ol>

Capital Roman Numerals Capital Roman Numerals


Special Start
<ol type="I">
<li>List item 1</li> VII. List item 1
<li>List item 2</li> VIII. List item 2
<li>List item 3</li> IX. List item 3
<li>List item 4</li>

5
Archer Solutions

</ol> X. List item 4

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>
<form method=post action="/cgi-
bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option> Select an option:
listbox <option selected>option 2</option>
<option> option 2
option <option>option 3</option>
<option>option 4</option>
<option>option 5</option>
<option>option 6</option>
</select><br>
</center>
</form>
This is an example
This is an example displaying the use of the
displaying the use of the
paragraph tag. <p> This will create a line
paragraph tag.
break and a space between lines.

Attributes: This will create a line break


and a space between lines.
Example 1:<br>
<br> Attributes:
<p align="left">
This is an example<br> Example 1:
displaying the use<br>
of the paragraph tag.<br> This is an example
paragrap <br> displaying the use
<p> of the paragraph tag.
h Example 2:<br>
<br>
<p align="right"> Example 2:
This is an example<br>
displaying the use<br> This is an example
of the paragraph tag.<br> displaying the use
<br> of the paragraph tag.
Example 3:<br>
<br>
Example 3:
<p align="center">
This is an example<br>
This is an example
displaying the use<br>
displaying the use
of the paragraph tag.
of the paragraph tag.
small
<small> <small>Example</small> Example
(text)
deleted
<strike> <strike>Example</strike> Example
text
strong
<strong> <strong>Example</strong> Example
emphasis
Example 1:
<table> table Example 1:
<table border="4" cellpadding="2"

6
Archer Solutions

cellspacing="2" width="100%">
<tr> Column 1 Column 2
<td>Column 1</td>
<td>Column 2</td>
</tr>
Example 2:
</table>

Example 2: (Internet Explorer) Column 1 Column 2

<table border="2" bordercolor="#336699"


cellpadding="2" cellspacing="2"
width="100%"> Example 3:
<tr>
<td>Column 1</td>
<td>Column 2</td> Column 1 Column 2
</tr> Row 2 Row 2
</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>
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<tr>
table
<td> <td>Column 1</td>
data Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<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> Colum Colum Colum
<td>Row 2</td> n1 n2 n3
table </tr>
<th> Row 2 Row 2 Row 2
header <tr>
<td>Row 3</td> Row 3 Row 3 Row 3
<td>Row 3</td> Row 4 Row 4 Row 4
<td>Row 3</td>
</tr>
<tr>
<td>Row 4</td>
<td>Row 4</td>
<td>Row 4</td>
</tr>
</table>
</div>

7
Archer Solutions

Title of your web page will


documen
<title> <title>Title of your HTML page</title> be viewable in the title
t title
bar.
<table border="2" cellpadding="2"
cellspacing="2" width="100%">
<tr>
<tr> table row <td>Column 1</td> Column 1 Column 2
<td>Column 2</td>
</tr>
</table>
<tt> teletype <tt>Example</tt> Example
<u> underline <u>Example</u> Example
Example 1:<br>
<br> Example 1:
<ul>
<li>List item 1</li> List item 1
<li>List item 2</li> List item 2
</ul>
<br>
unordere Example 2:<br>
<ul> Example 2:
d list <ul type="disc">
<li>List item 1</li>
<li>List item 2</li> List item 1
<ul type="circle"> List item 2
<li>List item 3</li> o List item 3
<li>List item 4</li> o List item 4
</ul>
</ul>

You might also like