Scribd Logo
Upload

Welcome to Scribd!

  • HTML Tags Reference

    Uploaded by

    Akshay Mishra
    15 views15 pages
    html, tags, reference

    Original Title

    12431_html Tags Reference

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    html, tags, reference

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    15 views15 pages

    HTML Tags Reference

    Uploaded by

    Akshay Mishra
    html, tags, reference

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 15

    HTML TAGS CHART

    Tag <!-Name comment Code Example <!--This can be viewed in the HTML part of a document--> <a href="http://www.domain.com/"> Visit Our Site</a> <b>Example</b> <big>Example</big> <body>The content of your HTML page</body> Browser View Nothing will show (Tip)

    <a <b> <big>

    anchor bold big (text) body of HTML document

    Visit Our Site (Tip) Example Example (Tip) Contents of your web page (Tip) The contents of your web page The contents of your web page This will center your contents Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term Definition Term Definition of the term

    <body>

    <br>

    line break

    The contents of your page<br>The contents of your page

    <center>

    center

    <center>This will center your contents</center>

    <dd>

    <dl> <dt>Definition Term</dt> definition <dd>Definition of the term</dd> description <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>

    definition list

    <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 This is an Example of using the emphasis tag

    <em>

    emphasis

    This is an <em>Example</em> of using the emphasis tag

    embed <embed> object

    <embed src="yourfile.mid" width="100%" height="60" align="center">

    (Tip)

    <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> <font face="Times New Roman" size="4">Example</font> <font face="Times New Roman" size="+3" color="#ff0000">Example</font>

    Example (Tip)

    <font>

    font

    Example (Tip)

    <font>

    font

    Example (Tip)

    <form>

    form

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

    (Tip)

    <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 Nothing will show the document</head>

    <hr>

    horizontal rule

    <hr />

    Contents of your web page (Tip) Contents of your web page Contents of your web page

    <hr>

    horizontal rule

    <hr width="50%" size="3" /> Contents of your web page Contents of your web page <hr width="50%" size="3" noshade /> Contents of your web page

    <hr>

    horizontal rule

    <hr> (Internet Explorer)

    horizontal rule

    <hr width="75%" color="#ff0000" size="4" />

    Contents of your web page Contents of your web page Contents of your web page Contents of your web page

    <hr> (Internet Explorer)

    horizontal rule

    <hr width="25%" color="#6699ff" size="6" />

    <html>

    hypertext markup language

    <html> <head> <meta> <title>Title of your web page</title> </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:

    Contents of your web page

    <i> <img>

    italic image

    Example

    (Tip)

    Example 1: (Tip)
    Submit

    <input>

    input field

    <input> (Internet Explorer)

    input field

    <form method=post action="/cgiExample 2: (Tip) bin/example.cgi"> <input type="text" style="color: #ffffff; Submit font-family: Verdana; font-weight: bold; font-size: 12px; backgroundcolor: #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 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> <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 4: (Tip) Example 3: (Tip)

    <input>

    input field

    <input>

    input field

    Submit

    Clear

    Example 5: Tip) Select an option:


    option 2
    Submit

    <input>

    input field

    Example 6: <form method=post action="/cgibin/example.cgi"> Example 6: (Tip) Select an option:<br> <input type="radio" name="option"> Select an option: Option 1 <input type="radio" name="option" Option 1 checked> Option 2 Option 2 <input type="radio" name="option"> Option 3 Option 3 <br> <br> Select an option: Select an option:<br> Selection 1 <input type="checkbox" name="selection"> Selection 1 Selection 2 <input type="checkbox" Selection 3 name="selection" checked> Selection Submit 2 <input type="checkbox" name="selection"> Selection 3 <input type="Submit" value="Submit"> </form> Example 1: Example 1: (Tip) <menu> <li type="disc">List item 1</li> <li type="circle">List item 2</li> <li type="square">List item 3</li> </MENU> <li> list item 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> <link> link <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head>
    o

    <input>

    input field

    List item 1 List item 2 List item 3

    Example 2: i. ii. iii. iv. List item 1 List item 2 List item 3 List item 4

    <marquee > scrolling (Internet text Explorer)

    <marquee bgcolor="#cccccc" loop="1" scrollamount="2" width="100%">Example 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> <meta name="Description" content="Description of your site"> <meta name="keywords" content="keywords describing your site">
    o

    (Tip) List item 1 List item 2 List item 3

    <menu>

    menu

    <meta>

    meta

    Nothing will show (Tip)

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

    meta meta meta meta meta

    <meta HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourd Nothing will show (Tip) omain.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 item 1</li> <li>List item 2</li> <li>List item 3</li> <li>List item 4</li> </ol> Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Nothing will show (Tip) Numbered 1. 2. 3. 4. List item 1 List item 2 List item 3 List item 4

    <ol>

    ordered list 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>

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

    Lowercase Letters

    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>

    a. b. c. d.

    List item 1 List item 2 List item 3 List item 4

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

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

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

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

    Capital Roman Numerals Special Start VII. VIII. IX. X. List item 1 List item 2 List item 3 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="/cgibin/example.cgi"> <center> Select an option: <select> <option>option 1</option> Select an option: (Tip) <option selected>option 2</option> option 2 <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 This is an example displaying the use of of the paragraph tag. <p> This will the paragraph tag. create a line break and a space between lines. This will create a line break and a space Attributes: between lines. Example 1:<br> Attributes: <br> <p align="left"> Example 1: 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 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>

    <option>

    listbox option

    <p>

    paragraph

    <br> <p align="center"> This is an example<br> displaying the use<br> of the paragraph tag. <small> <strike> <strong> small (text) strong emphasis <small>Example</small> deleted text <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" 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>

    Example 3: This is an example displaying the use of the paragraph tag. Example (Tip) Example Example

    Example 1: (Tip) Column 1 Column 2

    Example 2: (Tip) Column 1 Column 2

    <table>

    table

    Example 3: (Tip) Column 1 Column 2 Row 2 Row 2

    </tr> </table> <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table>

    <td>

    table data

    Column 1

    Column 2

    <th>

    <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> table header <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> document title <title>Title of your HTML page</title> <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Column 1</td> <td>Column 2</td> </tr> </table> <tt>Example</tt>

    Colu mn 1 Row 2 Row 3 Row 4

    Colu mn 2 Row 2 Row 3 Row 4

    Colu mn 3 Row 2 Row 3 Row 4

    <title>

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

    <tr>

    table row

    Column 1

    Column 2

    <tt>

    teletype

    Example

    <u>

    underline

    <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 1:

    List item 1 List item 2

    <ul>

    unordered list

    Example 2:

    List item 1 List item 2 o List item 3 o List item 4

    HTML Text Formatting Tags


    Tag <b> <em> <i> <small> <strong> <sub> <sup> <ins> <del> <mark> Description Defines bold text Defines emphasized text Defines a part of text in an alternate voice or mood Defines smaller text Defines important text Defines subscripted text Defines superscripted text Defines inserted text Defines deleted text Defines marked/highlighted text

    Text Formatting Tags


    The following HTML tags are used to format the appearance of the text on your web page. This can jazz up the look of the web page, however, too much variety in the text formatting can also look displeasing.
    Header - <h?> </h?> There are 6 levels of headings available, from h1 for the largest and most important heading, down to h6 for the smallest heading. Bold - <b> </b> The text in between the tags will be bold, and stand out against text around it, the same as in a word processor. Italic - <i> </i> Also working the same way as a word processor, italics displays the text at a slight angle. Underline - <u> </u> Again, the same as underline in a word processor. Note that html links are already underlined and don't need the extra tag. Strike-out - <strike> </strike> Puts a line right through the centre of the text, crossing it out. Often used to show that text is old and no longer relevant. Also works by using <s>
    </s> instead.

    Preformatted Text - <pre> </pre> Any text between the pre tags, including spaces, carriage returns and punctuation, will appear in the browser as it would in a text editor (normally browsers ignore multiple spaces) Source Code - <code> </code>

    Similar to tt the text is displayed in a fixed-width font, and is commonly used to show source code. I have used it on this site, along with stylesheets, to show all tags. Typewriter Text - <tt> </tt> The text appears to have been typed by a typewriter, in a fixed-width font. For example: This text is written using the <tt></tt> tags. Block Quote - <blockquote> </blockquote> Defines a long quotation, and the quote is displayed with an extra wide margin on the left hand side of the block quote. Small - <small> </small> Instead of having to set a font size, you can use the small tag to render text slightly smaller than the text around it. Useful for displaying the 'fine-print'. Font Colour - <font color="#??????"> </font> (*) Change the colour of a few words or a section of text. The 6 question marks represent the hex color code, see this list of colours and codes for some samples. (*) Font Size - <font size="?"> </font> Replace the ? with a number from 1 to 7 to change the size of the font. One being the smallest and seven the largest. (*) Font Size Change - <font size="+/-?"> </font> For an immediate change of font size with respect to the font size preceding it, this tag increase or decreases the size of the font by the number you specify. Eg: <font size="-1">Some Text</font>(*) Change Font Face - <font face="?"> </font> To show text in a particular font, use the font name such "Helvetica" or "Arial" or "Courier". Be aware that using some fancy font from your computer means that the person viewing that page must also have that font installed on their computer too, otherwise it will look totally different to them. (*)

    Centre - <center> </center> A useful tag, as it says, it makes everything in between the tags centred (in the middle of the page).(*) Emphasis - <em> </em> Used to emphasize text, which usually appears in italics, but can vary according to your browser. Strong Emphasis - <strong> </strong> Used to emphasize text more, which usually appears in bold, but can vary according to your browser.

    You might also like