Scribd
Upload
66 views

HTML Codes

The document provides examples of various HTML tags and their uses. It includes tags for headings, paragraphs, lists, links, images, and forms. For lists, it shows different numbering and lettering styles. For forms, it demonstrates using text fields, radio buttons, checkboxes, textareas, and select dropdowns.

Uploaded by

Kean Aton
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
66 views

HTML Codes

The document provides examples of various HTML tags and their uses. It includes tags for headings, paragraphs, lists, links, images, and forms. For lists, it shows different numbering and lettering styles. For forms, it demonstrates using text fields, radio buttons, checkboxes, textareas, and select dropdowns.

Uploaded by

Kean Aton
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 9

HTML Codes

HTML Comment <!-<!--This can be viewed in the HTML part of a document--> Nothing will show

(Tip)

HTML Anchor <a HTML Bold HTML Big (Text) Body of HTML Document HTML Line Break <b> <big> <body>

<a href="http://www.domain.com/"> Visit Our Site Visit Our Site</a> <b>Example</b> <big>Example</big> <body>The content of your HTML page</body> The contents of your page<br>The contents of your page <center>This will center your contents</center> <dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> <dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> <dl> <dt>Definition Term</dt> <dd>Definition of the term</dd> <dt>Definition Term</dt> <dd>Definition of the term</dd> </dl> Example

(Tip)

Example

(Tip)

Contents of your web page The contents of your page The contents of your page

(Tip)

<br>

HTML Center <center>

This will center your contents

HTML Definition Description

<dd>

Definition Term Definition of the term Definition Term Definition of the term

HTML Definition List

<dl>

Definition Term Definition of the term Definition Term Definition of the term

HTML Definition Term

<dt>

Definition Term Definition of the term Definition Term Definition of the term

HTML Emphasis

<em>

This is This is an Example of using an <em>Example</em> of using the emphasis tag the emphasis tag <embed src="yourfile.mid" width="100%" height="60" align="center"> <embed src="yourfile.mid" autostart="true" hidden="false" loop="false"> <noembed><bgsound src="yourfile.mid" loop="1"></noembed>

HTML Embed <embed> Object HTML Embed <embed> Object

Object 1

(Tip)

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

Object 2

music. HTML Font HTML Font <font> <font> <font face="Times New Roman">Example</font> <font face="Times New Roman" size="4">Example</font> <font face="Times New Roman" size="+3" color="#ff0000">Example</font > Example (Tip)

Example (Tip)

HTML Font

<font>

Example (Tip)
(Tip)

HTML Form

<form>

<form action="mailto:you@yourd omain.com"> Name: Name: <input name="Name" value="" size="10"><br> Email: Email: <input name="Email" value="" size="10"><br> SUBMIT <center><input type="submit"></center> </form>

HTML Heading HTML Heading HTML Heading HTML Heading HTML Heading HTML Heading

1 2 3 4 5 6 <head> <head>Contains elements Nothing will show describing the document</head> <h1> <h2> <h3> <h4> <h5> <h6> <h1>Heading <h2>Heading <h3>Heading <h4>Heading <h5>Heading <h6>Heading 1 2 3 4 5 6 Example</h1> Example</h2> Example</h3> Example</h4> Example</h5> Example</h6>

Heading of HTML Document HTML Horizontal Rule

<hr>

<hr />

Contents of your web page

(Tip)

Contents of your web page HTML Horizontal Rule HTML Horizontal Rule HTML Horizontal Rule HTML Horizontal Rule Contents of your web page <hr> <hr width="50%" size="3" /> Contents of your web page Contents of your web page <hr> <hr width="50%" size="3" noshade /> Contents of your web page <hr> (Internet Explorer) <hr> (Internet Explorer) <hr width="75%" color="#ff0000" size="4" /> Contents of your web page

Contents of your web page Contents of your web page

<hr width="25%" color="#6699ff" size="6" /> Contents of your web page

HTML Hypertext Markup Language

<html>

<html> <head> <meta> <title>Title of your web page</title> Contents of your web page </head> <body>HTML web page contents </body> </html> <i>Example</i> <img src="Earth.gif" width="41" height="41" border="0" alt="text describing the image" /> Example 1: <form method=post action="/cgibin/example.cgi"> <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> Example 2: <form method=post action="/cgibin/example.cgi"> Example 2: <input type="text" style="color: #ffffff; font-family: Verdana; fontweight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> Example 3: <form method=post action="/cgibin/example.cgi"> <table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#8463ff"><input Example 3: 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: <form method=post action="/cgibin/example.cgi"> Enter Your Comments:<br> <textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br> Example 4: Example 1: Example

HTML Italic

<i>

HTML Image <img>

(Tip)

(Tip)
Submit

HTML Input Field

<input>

(Tip)
Submit

HTML Input Field

<input> (Internet Explorer)

HTML Input Field

<input>

(Tip)

HTML Input Field

<input>

(Tip)

<input type="Submit" value="Submit"> <input type="Reset" value="Clear"> </form> Example 5: <form method=post action="/cgibin/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 6:

Submit

Clear

Example 5: Select an option: Submit

Tip)

HTML Input Field

<input>

option 2

HTML Input Field

<input>

<form method=post action="/cgibin/example.cgi"> Select an option:<br> Example 6: (Tip) <input type="radio" name="option"> Option 1 Select an option: <input type="radio" Option 1 name="option" checked> Option 2 Option 2 <input type="radio" Option 3 name="option"> Option 3 <br> Select an option: <br> Selection 1 Select an option:<br> <input type="checkbox" Selection 2 name="selection"> Selection 1 Selection 3 <input type="checkbox" Submit name="selection" checked>Selection 2 <input type="checkbox" name="selection"> Selection 3 <input type="Submit" value="Submit"> </form> 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: i. List item 1 Example 1:

HTML List Item

<li>

(Tip)

List item 1 List item 2 List item 3

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> HTML Link <link> <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>

ii. List item 2 iii. List item 3 iv. List item 4

HTML Scrolling Text

<marquee bgcolor="#cccccc" <marquee> loop="-1" scrollamount="2" (Internet width="100%">Example Explorer) Marquee</marquee> <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </menu>

Example Marquee (Tip)

HTML Menu

<menu>

List item 1 List item 2 List item 3

HTML Meta

<meta>

<meta name="Description" content="Description of your site"> Nothing will show <meta name="keywords" content="keywords describing your site"> <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yo Nothing will show urdomain.com/"> <meta http-equiv="Pragma" content="no-cache"> <meta name="rating" content="General"> <meta name="robots" content="all"> <meta name="robots" content="noindex,follow"> Numbered <ol> <li>List <li>List <li>List <li>List </ol> item item item item 1</li> 2</li> 3</li> 4</li> Nothing will show Nothing will show Nothing will show Nothing will show Numbered 1. 2. 3. 4. List List List List item item item item

(Tip)

HTML Meta HTML Meta HTML Meta HTML Meta HTML Meta

<meta> <meta> <meta> <meta> <meta>

(Tip) (Tip) (Tip) (Tip) (Tip)

HTML <ol> Ordered List

1 2 3 4

Numbered Special Start 5. 6. 7. 8. List List List List item item item item 1 2 3 4

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

Lowercase Letters a. List item 1 b. List item 2

<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> HTML Listbox Option <option> <form method=post action="/cgibin/example.cgi"> <center> Select an option: <select>

c. List item 3 d. List item 4 Capital Letters A. B. C. D. List List List List item item item item 1 2 3 4

Capital Letters Special Start C. D. E. F. List List List List item item item item 1 2 3 4

Lowercase Roman Numerals i. ii. iii. iv. List List List List item item item item 1 2 3 4

Capital Roman Numerals I. List II. List III.List IV. List item item item item 1 2 3 4

Capital Roman Numerals Special Start VII.List item 1 VIII.List item 2 IX. List item 3 X. List item 4

Select an option:
option 2

(Tip)

<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> This is an example displaying the use of the HTML paragraph tag. This is an example displaying the use of the paragraph tag. <p> This will create a line break and a space This will create a line break and a between lines. space between lines. Attributes: <p align="left"> Example 1:<br /> <br /> This is an example<br> displaying the use<br> of the paragraph tag.</p> <p align="right"> Example 2:<br> <br> This is an example<br> displaying the use<br> of the paragraph tag.</p> <p align="center"> Example 3:<br> <br> This is an example<br> displaying the use<br> of the paragraph tag.</p> 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.

HTML Paragraph

<p>

HTML Small(Text)

<small>

<small>Example</small> <strike>Example</strike> <strong>Example</strong> 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"

Example
Example Example

(Tip)

HTML <strike> Deleted Text HTML Strong <strong> Emphasis HTML Table <table>

Example 1: Column 1 Example 2: Column 1 Example 3: Column 1 Row 2

(Tip)
Column 2

(Tip)
Column 2

(Tip)
Column 2 Row 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> <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> Column 1 <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> <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>Title of your HTML page</title>

HTML Table Data

<td>

Column 2

Column 1 Column 2 Column 3


Row 2 Row 3 Row 4 Row 2 Row 3 Row 4 Row 2 Row 3 Row 4

HTML Table Header

<th>

HTML Document Title

<title>

Title of your web page will be viewable in the title bar. (Tip)

HTML Table Row

<tr>

<table border="2" cellpadding="2" Column 1 cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> <tt>Example</tt> <u>Example</u> 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 Example Example 1: List item 1 List item 2

Column 2

HTML Teletype HTML Underline

<tt> <u>

HTML Unordered List

<ul>

Example 2: List item 1 List item 2 List item 3 List item 4

You might also like