Scribd Logo
Upload

Welcome to Scribd!

  • HTML Basic TAgs

    Uploaded by

    Sourabh Joshi
    4 views6 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views6 pages

    HTML Basic TAgs

    Uploaded by

    Sourabh Joshi

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    HTMLS BASIC TAGS

    Standard Structure

    <html> ... These tags are used at the beginning and <head> ... Use these to group information specific to the
    </html> end of an HTML document. This is known as the </head> page. This includes title tags, meta descriptions,
    "root element." Using these tags tells the website and links to both script and style sheets.
    that the web page is being written in HTML5, and
    that all the other tags within these are HTML for-
    matted.

    <title> ... This is used for the title tag of the page. Here you'll <body> ... Between these tags is where you'll place all the
    </title> place a title that is useful to both search </body> content for users. This includes text images,
    engines and users. and graphic elements.

    Here's what a typical layout looks like: <base/>


    <html>
    <head><title>HTML 5 Cheat Sheet</title> Signifies the Base URL and specifies all relative links in the
    </head><body> Your content </body> document.
    </html>

    <meta/> <link/>
    Includes additional information about the page. This includes Creates association with external pages like style sheets.
    descriptions, author, publish date,
    keywords, and other ·off-page" information.

    <style> ... </style> <script> ... </script>


    Used to include document style information which is usually CSS. All the information or links to external scripts.

    Here's an Example:

    <html>
    <head>
    <meta charset=•utf-8">
    <base href="http://www.mywebsite.com• target="_blank"/>
    <title>My Website</title>
    <link rel="stylesheet" href="/css/master.css">

    type=rtextzjavascrtpt">
    <script zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA
    Var MyVar = O;
    </script>
    </head>
    <body>
    Your content
    </body>
    </html>
    HTMLS COMMON TAGS
    Formatting your Text

    <strong> .. </strong> <b> ... zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA


    <lb>
    Places strong emphasis on something
    (displays in bold on browsers) Also creates bold text, but not as effective as the
    tag above.

    <em> ... </em> <i> ... </i>


    The emphasis tag. Turns text into italics for An alternate way to create italics, but mainly
    on browsers. used for thoughts or names.

    <cite> ... </cite> <pre> ... </pre>


    This highlights references information. Good for Monospace text laid out with the whitespace
    quotes and statements. inside the element intact.

    <del> ... </del> <ins> ... </ins>


    Labels a previously deleted portion of text. Shows a section that has been inserted into the
    content.

    <blockquote> ..... </blockquote> <q> ... </q>


    These are used for long paragraphs of Used for shorter quotations.
    quotation which are commonly cited as well.

    <br/> <hr/>
    This creates a line break used for writing blocks Create a horizontal rule or sectional break. This is u:
    of text on different lines. to create a change in topic or section on the page.

    <sub> ... </sub> <sup> ... </sup>


    Subscript text that is smaller and placed a Superscript text which is half a line higher than
    half-line lower than previous text. previous text.
    HTMLSDOCUMENTSTRUCTURE

    <h1 - h6> <div> ... </div>


    These are the six levels of headings
    Containers used to label a page section
    </h1 • h6> on a page. One is the most important
    and six is the least. orthe placement of an element.

    <span> ... </span> <p> ... </p>


    lnline labels used to grouping style elements. Used to organize paragraphs of text.

    Example of Text and Document Formatting

    <div>
    <h1 >How to start a blog</h1 >
    <p>So you have this idea, and you want to <strong>create
    a blog</strong>. Well, today I'm going to show you how to
    make that happen.</p>

    <hr/>

    <h2>Start With an ldea</h2>


    <p>lt all begins with a topic you want to cover in your new
    blog. Remember, your topic is <em>the soul of your
    blog</em. It has to be something you're <span>passionate
    about</span>. </p>
    </div>

    <hgroup>

    </hgroup>
    HTMLS IMPLEMENTING IMAGES

    <i mg /> This tag is used to display image files. src="u rl" The URL or file name of the image being displayed.

    alt="text'' height=""

    Alternative text used to explain image content to Used to specific image height in either pixels or percentages.
    both search engines and users.

    Width="" Align='~"

    Specify width in pixels or percentages. Where to align the image relative to other elements on the page.

    Border="" vs pace=""

    Specifies border thickness (if any). Denote spacing on the left or right side of the image.

    hspace="" <map> ... </map>

    Spacing on the top or bottom of the image. Informs users that an interactive image is present with
    clickable areas.

    <map name=""> ... </map> I>


    <area zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFED

    The name of the map between the image and the The image area of an image map.
    map itself.

    Example of Images

    <lmg src='"planets.gll"Wklthr"140" hef.ght=·120- alt=-""planets"usemap:'"#planetmap'">

    <map name .. p&anetmap'">


    zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA
    <ore, sh.ipeZ'"re<t"'coords=\),0.82,126'" hrer="'sun.htm· alt="'Sun'">
    <ore.i sh.iper-cir,1e· coords=990, 58, 3· hrer=·mercur.htm1·.ilt="merw,y>
    <area shape,....clrcle· coordsr"l 24, 58, a· hrefr"Venus.htm• att=-Venu~
    <Jmap>
    HTMLS CREATING LISTS

    <ol> ... <fol> Numbered lists in sequential order. <ul> ... </ul> Bullet point list (no particular
    order).

    <Ii> ... </Ii> Specify each item to be bulleted or <di> ... </di> List item definitions.
    numbered.

    <dt> ... </dt> Defines a single term inline with <dd> ... <!dd> A description for a defined term.
    body content.

    Example of Listing

    <ol>
    <li>One</li>
    <li>Two</li>
    <Ii> Three</li>
    <li>Four</li> zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPONMLKJIHGFEDCBA
    <fol>

    <ul>
    <li>Bacon</li>
    <li>Eggs</li>
    <li>Pancakes</li>
    </ul>

    <di>
    <dt>Cofee</dt>
    <dd>Hot or iced drink, black</dd>
    <dt>Milk</dt>
    <dd>White, cold drink</dd>
    </di>
    HTMLSDOCUMENTSTRUCTURE

    <a href=""> Creates a hyperlink with <a href="mailto:"> A link that pulls up an outgoing
    defined anchor text. ... <la> messages to a specific email
    ... <la>
    address.

    <a href= A link that makes numbers Anchor text used to bring users
    <a name=""> zyxwvutsrqponmlkjihgfedcbaZYXWVUTSRQPON
    "tel://###-"> clickable. Great for mobile ... <te» to a specific place in a
    ... <la> users . document.

    <a href="#name"> Anchor text used to bring


    ... </a> users to a div element.

    Example of Link

    <a href="www.onblastblog.com">On Blast Blog</a>

    You might also like