Scribd Logo
Upload

Welcome to Scribd!

  • Basic HTML

    Uploaded by

    sailormunelune
    3 views3 pages
    The document demonstrates various HTML elements used to structure and style web pages. It includes headings, paragraphs, hyperlinks, images, text styling, tables, and lists. The HTML elements are organized into sections defined by <div> tags and demonstrate how to add metadata, internal and external stylesheets, bookmarks, and alternative text for accessibility.

    Original Description:

    Original Title

    basic-html

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document demonstrates various HTML elements used to structure and style web pages. It includes headings, paragraphs, hyperlinks, images, text styling, tables, and lists. The HTML elements are organized into sections defined by <div> tags and demonstrate how to add metadata, internal and external stylesheets, bookmarks, and alternative text for accessibility.

    Copyright:

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

    Basic HTML

    Uploaded by

    sailormunelune
    The document demonstrates various HTML elements used to structure and style web pages. It includes headings, paragraphs, hyperlinks, images, text styling, tables, and lists. The HTML elements are organized into sections defined by <div> tags and demonstrate how to add metadata, internal and external stylesheets, bookmarks, and alternative text for accessibility.

    Copyright:

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

    <!DOCTYPE html> <!

    --declares the type of document (html)-->


    <html lang="en"> <!--holds all of the html and sets language using attribute lang--
    >

    <head> <!--holds metadata about the page-->


    <title>Title - HTML</title> <!--shows the title of the page-->
    <link rel="icon" type="image/x-icon" href="favicon.ico"> <!--displays favicon
    image on the browser tab of the page-->
    </head> <!--holds metadata about the page-->

    <!--holds internal CSS styling-->


    <style>
    body{color:crimson;}
    </style>

    <body> <!--holds content displayed on the page-->


    <div> <!--defines a section in a document-->
    <h1>Heading 1</h1> <!-- displays text as heading size one-->
    <h2>Heading 2</h2> <!--displays text as heading size two-->
    <h3>Heading 3</h3> <!--displays text as heading size three-->
    <h4>Heading 4</h4> <!--displays text as heading size four-->
    <h5>Heading 5</h5> <!--displays text as heading size five-->
    <h6>Heading 6</h6> <!--displays text as heading size six-->
    </div> <!--defines a section in a document-->

    <div> <!--defines a section in a document-->


    <p>Paragraph</p> <!--displays text as a paragraph-->
    <p title="Paragraph Title">Tool Tip</p> <!--displays text with tool tip
    to hover over-->
    <p>Line<br>Break</p> <!--displays text with a line break-->
    <p id="BM1"> Internal Bookmark</p> <!--creates a bookmark using id
    attribute-->
    <p style="background-color:powderblue; font-family:Impact,
    Haettenschweiler, 'Arial Narrow Bold', sans-serif";> Internal CSS</p><!--displays
    content with internal CSS using attribute style-->
    <hr> <!--displays a horizontal rule to seperate thematic content--> <p>^
    Horizontal Rule</p>
    <pre> <!--preserves the spaces and line breaks in text-->
    Preformatted.
    Text.
    </pre> <!--preserves the spaces and line breaks in text-->
    </div> <!--defines a section in a document-->

    <div> <!--defines a section in a document-->


    <a href="https://www.w3schools.com">Hyperlink</a><!--displays hyperlink
    using attribute href-->
    <br> <!--displays a line break-->
    <a href="https://www.w3schools.com" target="_self">Self-Target
    Hyperlink</a> <!--default, opens hyperlink in the same window/tab as it was
    clicked-->
    <br> <!--displays a line break-->
    <a href="https://www.w3schools.com" target="_blank">Blank-Target
    Hyperlink</a> <!--opens hyperlink in a new window or tab-->
    <br> <!--displays a line break-->
    <a href="https://www.w3schools.com" target="_parent">Parent-Target
    Hyperlink</a> <!--opens hyperlink in the parent frame-->
    <br> <!--displays a line break-->
    <a href="https://www.w3schools.com" target="_top">Top-Target
    Hyperlink</a> <!-- opens hyperlink in the full body of the window-->
    <br> <!--displays a line break-->
    <br> <!--displays a line break-->
    </div> <!--defines a section in a document-->

    <div> <!--defines a section in a document-->


    <img src="favicon.ico" alt="Image Alternative Text"><!--displays image
    using attributes src & alt-->
    <img src="image.jpg" alt="Image Alternative Text"><!--displays
    alternative text using attributes src & alt-->
    <br><!--displays a line break-->
    </div> <!--defines a section in a document-->

    <div> <!--defines a section in a document-->


    <p> <b>Bold</b> Text</p> <!--displays bolded text-->
    <p> <strong>Strong</strong> Text</p> <!--displays strengthened text-->
    <p> <i>Italic</i> Text </p> <!--displays italicized text-->
    <p> <em>Emphasized</em> Text</p> <!--displays emphasized text-->
    <p> <small>Small</small> Text</p> <!--displays small text-->
    <p> <mark>Marked</mark> Text</p> <!--displays highlighted text-->
    <p> <del>Deleted</del> Text</p> <!--displays text with striketrough-->
    <p> <ins>Inserted</ins> Text</p> <!--displays underlined text-->
    <p> <sup>Superscripted</sup> Text</p> <!--displays superscripted text-->
    <p> <sub>Subscripted</sub> Text</p> <!--displays subscripted text-->
    </div> <!--defines a section in a document-->

    <div> <!--defines a section in a document-->


    <a href="#BM1">Link to Internal Bookmark</a> <!--jumps to the bookmark
    within the same page-->
    <br><!--displays a line break-->
    <a href="BasicStyle.html#BM2">Link to External Bookmark</a> <!--jumps to
    the bookmark linked on a different page-->
    <br><!--displays a line break-->
    <br><!--displays a line break-->
    </div> <!--defines a section in a document-->

    <div> <!--defines a section in a document-->


    <table> <!--creates a table-->
    <caption>Table One</caption> <!--displays a caption/title for the
    table-->
    <tr> <!--creates a row in the table -->
    <th>Header 1</th> <!--creates displays the header for first
    column-->
    <th>Header 2</th> <!--creates displays the header for second
    column-->
    <th>Header 3</th> <!--creates displays the header third column-->
    </tr> <!--creates a row in the table -->
    <tr> <!--creates a new row in the table -->
    <td>Data 1</td> <!--displays data in first row, first column-->
    <td>Data 2</td> <!--displays data in first row, second column-->
    <td>Data 3</td> <!--displays data in first row, third column-->
    </tr> <!--creates a new row in the table -->
    <tr> <!--creates another row in the table -->
    <td>Data One</td> <!--displays data in second row, first column--
    >
    <td>Data Two</td> <!--displays data in second row, second
    column-->
    <td>Data Three</td> <!--displays data in third row, third
    column-->
    </tr> <!--creates another row in the table -->
    </table> <!--creates a table-->
    </div> <!--defines a section in a document-->

    <div> <!--defines a section in a document-->


    <ul> <!--creates an unordered list-->
    <li>List Item 1</li> <!--displays a list item-->
    <li>List Item 2</li> <!--displays a list item-->
    <li>List Item 3</li> <!--displays a list item-->
    </ul> <!--creates an unordered list-->
    <ol> <!--creates an ordered list-->
    <li>List Item</li> <!--displays a list item-->
    <li>List Item</li> <!--displays a list item-->
    <li>List Item</li> <!--displays a list item-->
    </ol> <!--creates an ordered list-->
    <dl> <!--creates an described list-->
    <dt> Term One <!--displays a list term-->
    <dd>Description</dd> <!--displays a term description-->
    </dt> <!--displays a list term-->
    <dt> Term Two <!--displays a list term-->
    <dd>Description</dd> <!--displays a term description-->
    </dt> <!--displays a list term-->
    <dt> Term Three <!--displays a list term-->
    <dd>Description</dd> <!--displays a term description-->
    </dt> <!--displays a list term-->
    </dl> <!--creates an described list-->
    </div> <!--defines a section in a document-->
    </body> <!--holds content displayed on the page-->

    </html> <!--holds all of the html-->

    You might also like