Scribd Logo
Upload

Welcome to Scribd!

  • 0 views

    HTML Cheat Sheet - Scaler Topics

    Uploaded by

    lenkaprameela9

    Copyright:

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

    You might also like

    HTML Cheat Sheet - Scaler Topics

    Uploaded by

    lenkaprameela9
    0 views16 pages

    Original Title

    HTML_Cheat_Sheet_-_Scaler_Topics

    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
    Download as pdf or txt
    0 views16 pages

    HTML Cheat Sheet - Scaler Topics

    Uploaded by

    lenkaprameela9

    Copyright:

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

    <img src="URL" />

    <address> </address>

    HTML
    CHEAT SHEET

    <section></section>

    <td rowspan=?>
    Structure

    <html> </html> <head> </head>

    Contains metadata about an HTML


    Defines the root of an HTML document.
    document, including the title and links
    to external files.

    <body> </body>

    Contains the visible content of an HTML


    document, such as text, images, and
    other elements.

    <head> </head>
    Contains information
    about the website
    <html> </html>
    Overall document
    structure <body> </body>
    Contains the display
    part.

    <head> Information about the website


    <meta charset="utf-8">
    Characters: "utf-8"
    <meta name="Keywords" content = "Cheat Sheet, HTML">
    Keywords: Cheat Sheet, HTML
    <meta name = "author" content = "David Hill">

    <meta name="Description" content = "Learn HTML">


    Author: David Hill

    <title>HTML Cheat Sheet</title>


    Description: Learn HTML

    </head>
    Title: HTML Cheat Sheet

    01 Cheatsheet
    Layout

    <header> <nav>

    Defines the header section of a Defines a section of a web page that


    web page or a section of a page. contains navigation links.

    <section> <article>

    Defines a generic section of a web page Defines an independent, self-contained


    or a section of a page. content block, such as a blog post or
    news article.

    <aside>
    <footer>

    Defines a section of a web page that Defines the footer section of a web page
    is separate from the main content. or a section of a page.

    HTML Semantic Elements

    <header>

    <nav>

    <header>

    <article>
    <section> <aside>

    <header>

    <article>

    <footer>

    02 Cheatsheet
    Formatting

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

    Defines a small section of text within


    Defines a paragraph of text.
    a larger block element.

    <blockquote> </blockquote> <br>

    Defines a block quotation,


    Defines a line break.
    typically indented.

    <div> </div>

    Defines a division or section of a


    web page.

    <div>This is a div element</div>

    This is a div element

    <br>

    Something after div element. This is a span element.


    Something after span element

    <span>This is a span element</span>

    03 Cheatsheet
    Text Tags

    <pre> </pre> <h1> </h1> --> <h6> </h6>

    Defines preformatted text, where Defines headings of different levels,


    whitespace is preserved. from largest to smallest.

    <b> </b> <i> </i>

    Defines bold text. Defines italicized text.

    Hello
    This is Preformatted Text in different lines.
    It is written exactly like this in the code.

    <pre>
    Hello
    This is Preformatted Text in different lines.
    It is written exactly like this in the code.
    This is heading 1 </pre>

    This is heading 2
    This is heading 3 h1 to h6 tags from top to bottom

    IP Programming

    This is heading 5

    This is heading 6

    This is bold text. <b> This is bold text. </b>

    This is italic text. <i> This is italic text </i>

    NITI Aayogʼs goal is to “To evolve a shared vision of national development priorities with the active involvement of States.” q tag: <q> To evolve ... </q>

    04 Cheatsheet
    <tt> </tt> <q> </q>

    Defines text in a fixed-width font. Defines a short quotation.

    <code> </code>

    Defines text that represents


    computer code.

    <cite> </cite>

    Defines a citation or reference to


    a work.

    <address> </address>

    Defines contact information for the


    author or owner of a document.

    <strong> </strong>

    Defines text that is especially


    important.

    <acronym title=?> </acronym>

    Defines an acronym or abbreviation,


    with an optional title attribute.

    05 Cheatsheet
    The address of David Johnson is:
    Visit:
    address tag: <address>
    3rd Floor, Narayan Building, Indore
    Visit: ...
    Follow at instagram @davidjohnson </address>
    Call at: 9820382712
    Official Website: www.davidjohnson.com

    cite tag: <cite>Malgudi Days</cite>

    The Malgudi Days was created by R. K. Narayan.

    This is <acronym title=”Indian Air Force”>


    This is IAF command from the South. IAF
    </acronym> command from the South.
    Indian Air Force

    #include using namespace std; int main() { cout << "Hello World!"; return 0; }

    Code tag:
    <code>
    #include <iostream>
    using namespace std;
    int main( ) {
    cout <<”Hello World!”;
    return 0;
    }
    </code>

    06 Cheatsheet
    Lists

    <ul> </ul> <li> </li>

    Defines an unordered list of items. Defines an individual list item.

    <ol start=?> </ol>

    Defines an ordered list of items, with


    an optional starting number.

    An Unordered HTML List

    <li>Coffee</li> Coffee
    Tea
    Milk

    <ul>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    </ul>

    An Ordered HTML List

    1. Coffee <li>Coffee</li>
    2. Tea
    3. Milk
    <ol>
    <li>...</li>
    <li>...</li>
    <li>...</li>
    </ol>

    07 Cheatsheet
    Graphical

    <hr> <img src="URL" height=?>

    Defines a thematic break or horizontal Defines an image with a specified height.


    rule, typically rendered as a line across
    the page.

    <hr size=?> <img src="URL" width=?>

    Defines the height of a horizontal rule in


    Defines an image with a specified width.
    pixels, relative to the default size.

    <hr width=?> <img src="URL" alt=?>

    Defines the width of a horizontal rule in


    Defines alternate text for an image.
    pixels, relative to the default size.

    Text above hr tag.

    height

    Text below hr tag.

    width

    <img src= “mountains.jpg”


    <img src="URL" /> width= “400px” height= “350px”>

    Defines an image, with a required


    source URL attribute.

    08 Cheatsheet
    <img src="URL" align=?>

    Defines the horizontal alignment of


    an image.

    align= “center”
    NOT SUPPORTED

    <img <img
    src="mountains.jpg" src="mountains.jpg"
    align="left" align="right"
    alt="River Scenery" alt="River Scenery"
    style="width: 450px; height: 300px" style="width: 450px; height: 300px"
    /> />

    09 Cheatsheet
    Links
    <a href="#NAME">clickable text</a>

    <a href="URL">clickable text</a> Defines a hyperlink that jumps to a


    Defines a hyperlink to another web page specific location within a web page,
    or resource, with visible clickable text. identified by an anchor name.

    Yahoo <a href= “https://www.yahoo.com”>Yahoo</a>


    <a href= “https://www.google.com”>Google</a>
    Google

    Go to Section 2 <a href= “#section2”>Go to Section 2</a>

    Section 1
    This is Section 1. Lorem ipsum dolor sit amet consectetur adipisicing
    <h1 id= “section1”>Section 1</h1>
    elit. Perferendis consectetur est eveniet itaque fugiat laboriosam

    repella commodi expedita quasi pariatur, libero doloremque quaerat


    <p>
    omnis error, sed placeat numquam, amet vel.
    This is Section 1. Lorem...
    </p>

    points to

    Section 2
    This is Section 2. Lorem ipsum dolor sit amet consectetur adipisicing <h2 id= “section2”>Section 2</h2>
    elit. Perferendis consectetur est eveniet itaque fugiat laboriosam

    repellat commodi expedita quasi pariatur, libero doloremque quaerat <p>


    omnis error, sed placeat numquam, amet vel. This is Section 2. Lorem...
    </p>

    10 Cheatsheet
    <a href="mailto:EMAIL_ADDRESS">
    clickable text</a>

    Defines a hyperlink that opens the user's


    email client with a pre-populated email
    address.

    Send email

    <a href="mailto:someone@example.com">Send email</a>

    11 Cheatsheet
    Tables

    <table> </table> <th> </th>

    Defines a table, which is used to Defines a header cell within a table row,
    display data in rows and columns. typically used for column headings.

    <tr> </tr> <td rowspan=?>

    Defines a row within a table. Defines a table cell that spans the
    specified number of rows.

    <td> </td>
    <td colspan=?>

    Defines a cell within a table row. Defines a table cell that spans the
    specified number of columns.

    <th> Age </th>


    <tr>
    <td>..</td> <td colspan="2"> Name </td>
    <td>..</td>
    <td>..</td>
    </tr>
    Name Age
    Jill Smith 43

    Eve Jackson 57

    Chris 56
    Hemsworth
    <td> Chris </td> Robert 45

    <td rowspan="2"> Hemsworth </td>

    12 Cheatsheet
    Forms

    <form> </form> <input type="text"


    name=? size=?>
    Defines a form that can be used to
    collect user input. Defines a single-line text input area.

    <select name=?> </select> <input type="submit" value=?>

    Defines a dropdown list of options


    Defines a button to submit a form.
    for user selection.

    <option> <input type="image" name=?


    src=? alt=?>
    Defines an individual option within a
    <select> dropdown list. Defines an image button to submit a form.

    <textarea name=? cols="x" <input type="reset">


    rows="y"></textarea>
    Defines a button to reset a form to
    Defines a multi-line text input area. its initial values.

    <input type="checkbox"
    name=? value=?>

    Defines a checkbox input element.

    <input type="radio"
    name=? value=?>

    Defines a radio button input element.

    13 Cheatsheet
    Student Details Form

    <input type="text">
    Name:

    Password: <input type="password">

    Choose one Programming Language:


    C++
    <input type="radio">
    Java
    <select> Python
    <option></option>
    <option></option>
    ...
    </select>

    Choose: Web Development

    <input type="file"> Submit your resume: Choose File No file chosen

    Any comments..
    <textarea rows="10"
    cols="30">
    Any comments..
    </textarea>

    <input type="checkbox"> I agree to the Terms and Conditions

    Submit <input type="submit">

    14 Cheatsheet

    You might also like