Scribd Logo
Upload

Welcome to Scribd!

  • Michelle Johnson's Big List of HTML Tags To Know

    Uploaded by

    mijohn4018
    533 views6 pages
    All web pages should start and end with these tags Title Tag Title goes here. Body tag All body text and visible content on the page goes between these tags. Style lets you specify a font, point size, color or alignment? you've got to do it with style.

    Original Description:

    Original Title

    Michelle Johnson's Big List of HTML Tags to Know

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    All web pages should start and end with these tags Title Tag Title goes here. Body tag All body text and visible content on the page goes between these tags. Style lets you specify a font, point size, color or alignment? you've got to do it with style.

    Copyright:

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

    Michelle Johnson's Big List of HTML Tags To Know

    Uploaded by

    mijohn4018
    All web pages should start and end with these tags Title Tag Title goes here. Body tag All body text and visible content on the page goes between these tags. Style lets you specify a font, point size, color or alignment? you've got to do it with style.

    Copyright:

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

    Michelle Johnson’s Big List of HTML Tags to Know

    HTML Tag

    Tells the browser: Hey! This is a web page!

    <html>

    All kinds of coding goes in-between this opening and closing tag. Note
    the forward slash in the closing tag.

    </html>

    All web pages should start and end with these tags

    Title Tag

    <head>
    <title>Title goes here</title>
    </head>

    This adds a title that appears at the top of the web browser window.
    Important because this is the text that gets saved when the user
    bookmarks a page. Title carefully if you want someone to get back to
    your site!
    Example: The Daily News - Homepage

    Body Tag

    <body>
    All body text and visible content on the page goes between these
    tags.
    </body>

    Text Formatting

    <b>some text here.</b>


    Creates bold text. (Duh!)

    You may also come across this, which also creates bold text:
    <strong>some text here</strong>

    <i>text</i>
    Guess what this one does?
    Style
    Need to specify a font, point size, color or alignment? You’ve got to do
    it with style.

    Examples
    <body style="background-color:yellow">

    <body style="background-color:#ffff00">
    Changes the background color of an entire page. For a list of colors
    names that are safe to use, do a search for the term or see:
    http://www.w3schools.com/html/html_colors.asp
    Example 2 uses a “hexadecimal number.” For a list of them do a
    search for the term.

    <body style="font-family:arial, helvetica,sans-serif”>Some text


    here.</body>
    Specifies a default font for the entire page.

    <h1 style="text-align:right">Some text here.</h1>

    <p style="font-family:arial, helvetica,sans-serif; color:red; font-


    size:20px">Text goes here.</P>
    Specifies font, color, size

    Paragraph
    <p> ... </p>

    <p>Breaks text into paragraphs. Breaks text into paragraphs.


    Breaks text into paragraphs.</p>
    <p>Breaks text into paragraphs. Breaks text into paragraphs.</p>

    Line break: <br />


    Hey, html, create a line break here.<br />
    Note space before closing slash!
    The break tag is what’s called an “empty” tag. It has or needs no
    closing tag.

    Heds
    <h1>Largest</h1> (Equivalent to 24 pt)
    <h2> Next Largest </h2> (Equivalent to 18 pt)
    <h3> Medium </h3> (Equivalent to 14 pt)
    <h4> Smaller </h4> (Equivalent to 12 pt)
    <h5> Even smaller </h5> (Equivalent to 10 pt)
    <h6>Tiny</h6> (Equivalent to 8 pt)

    Headers can take additional attributes such as alignment.


    Example:
    <h3 style="text-align:center">A hed goes here</h3>
    Links

    This is called an “anchor” tag or “href” for short.

    <a href="http://www.somesite.com">Click here!</a>


    Links to a page on another web site.

    <a href="aboutus.html”>Click here!</a>


    Links to a internal page on a site.

    Email link:
    <a href="mailto:someperson@somplace.com">Click to email
    me.</a>

    A “named anchor” allows the user to click an jump to a specific


    point on a page.
    Example:
    <a name="tips">Useful Tips Section</a>

    <a href="#tips">Jump to the Useful Tips Section</a>

    Don’t want your links underlined? Try this.


    <a href="somepage.html" style="text-decoration:none">Click this
    even though it’s not underlines</a>

    To make a link launch in a new window:


    <a href="http:www.somesite.com" target="_blank">Click here!</a>

    Images
    To add a photo or other art (jpg, gif) to a page use the “img” tag. Img is
    also a so-called “empty tag,” so you know what that means: add a
    space and forward slash to the end of the tag!

    <img src="photo.jpg" />

    The img tag can take attributes that control the appearance or actions
    of an image.

    Examples:

    <img src="photo.jpg" width="200” height="300" />


    (Note: measurements are in pixels)
    <img src="photo.jpg" width="200” height="300" alt="I am a
    tool tip. " />
    (Note: This displays pop-up text when a user mouses over a link.)

    <img src="photo.jpg" width="200” height="300" alt="I am a


    tool tip. " />

    <a href="http://www.somesite.com><img src="photo.jpg"


    width="200” height="300" alt="I am a tool tip. " /></a>

    <a href="http://www.somesite.com><img src="photo.jpg"


    width="200” height="300" alt="I am a tool tip. " border="1"
    /></a>

    Lists

    Bulleted list:
    <ul>
    <li>First item </li>
    <li>Second item </li>
    <li>Third item </li>
    </ul>

    Creates something like this:


    • First item
    • Second item
    • Third item
    (UL stand for “unordered list”)

    Numbered list:
    <ol>
    <li> Item 1 </li>
    <li> Item 2 </li>
    <li> Item 3 </li>
    </ol>

    Creates this:
    1. Item 1
    2. Item 2
    3. Item 3
    (OL stands for “ordered list.”)

    Horizontal Rule
    <hr />

    This is another empty tag. It can take additional attributes, such as a


    width or height. You can specify pixels or percentages.

    HR Examples:

    <hr width="100%" />


    Rule stretches across entire page.

    <hr width="50%" size="2" />


    Creates a 2-pt rule, half the width of the page.

    <hr width="150" size="1" />


    Creates a 1-pt rule, 150 pixels wide

    <hr width="150" size="1" align="left" />

    Blockquote

    Indents text or even a graphical element or photo.

    Here’s the entry from Wikipedia on block quotations.


    <blockquote>
    A block quotation, also known as a long quotation or extract, is a
    quotation in a written document, set off from the main text as a
    distinct paragraph or block. It is typically used for a longer passage
    than a run-in quotation, which is set off with quotation marks. A block
    quotation is often distinguished visually using indentation, setting in a
    different typeface, or in a smaller size.
    </blockquote>
    It’s quite wordy, however, it sums things up nicely.

    Produces this:

    Here’s the entry from Wikipedia on block quotations.


    “A block quotation, also known as a
    long quotation or extract, is a
    quotation in a written document,
    set off from the main text as a
    distinct paragraph or block. It is
    typically used for a longer passage
    than a run-in quotation, which is
    set off with quotation marks. A
    block quotation is often
    distinguished visually using
    indentation, setting in a different
    typeface, or in a smaller size.”
    It’s quite wordy, however, it sums things up nicely.

    Comment

    This is used by programmers to write a note in code that won’t display


    on the page.

    Example:
    <!—The next line of code controls the color of the text -->

    Sample page code:

    <html>
    <head>
    <title>The Daily News: Welcome</title>
    </head>
    <body>
    <p>Here’s some body text. It’s great reading. Here’s some body text.
    It’s great reading. Here’s some body text. It’s great reading.</p>
    <p>Here’s some body text. It’s great reading. <a
    href="http://www.site.com">This is a text link.</a> It’s great
    reading.</p>
    <p><img src="photo.jpg" alt="This is a photo">Here’s some body
    text. It’s great reading. Here’s some body text. It’s great reading.
    Here’s some body text. It’s great reading.</p>
    </body>
    </html>

    You might also like