Scribd Logo
Upload

Welcome to Scribd!

  • 103 views

    Introduction To HTML: Created By: Blesilda B. Vocal

    Uploaded by

    Maan Caboles
    Basics of HTML

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd

    Introduction To HTML: Created By: Blesilda B. Vocal

    Uploaded by

    Maan Caboles
    103 views20 pages
    Basics of HTML

    Original Title

    HTML Introduction

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Basics of HTML

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    103 views20 pages

    Introduction To HTML: Created By: Blesilda B. Vocal

    Uploaded by

    Maan Caboles
    Basics of HTML

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Download as ppt, pdf, or txt
    of 20

    INTRODUCTION TO HTML

    Created by :
    Blesilda B. Vocal
    What is HTML?
    Stands for Hyper Text Markup
    Language
    Is a language for describing web pages.
    It is made up of markup tags.

    The purpose of Markup tags are to


    describe page content or the web
    page.
    HTML Tags
    HTML tags are keywords (tag names)
    surrounded by angle brackets like <html>
    HTML tags normally come in pairs like <b>
    and </b>
    The first tag in a pair is the start tag, the
    second tag is the end tag
    The end tag is written like the start tag, with
    a forward slash before the tag name
    Start and end tags are also called opening
    tags and closing tags
    <tagname>content</tagname>
    HTML Elements

    "HTML tags" and "HTML elements" are


    often used to describe the same thing.
    But strictly speaking, an HTML element
    is everything between the start tag
    and the end tag, including the tags:
    HTML Element:
    <p>This is a paragraph.</p>
    HTML Documents = Web
    Pages
    HTML documents describe web
    pages
    HTML documents contain HTML
    tags and plain text
    HTML documents are also called web
    pages
    EXAMPLE
    Visualization of HTML Structure
    <!DOCTYPE html>
    <html>
    <body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    </body>
    </html>
    HTML Headings

    HTML headings are defined with the


    <h1> to <h6> tags.
    Example
    <!DOCTYPE html>
    <html>
    <body>
    <h1>This is heading 1</h1>
    <h2>This is heading 2</h2>
    <h3>This is heading 3</h3>
    <h4>This is heading 4</h4>
    <h5>This is heading 5</h5>
    <h6>This is heading 6</h6>
    </body>
    </html>
    HTML Paragraphs

    HTML paragraphs are defined with the


    <p> tag.
    Example
    <!DOCTYPE html>
    <html>
    <body>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    <p>This is a paragraph.</p>
    </body>
    </html>
    HTML LINKS
    HTML links are defined with the <a> tag.

    <!DOCTYPE html>
    <html>
    <body>
    <h1>My First Heading</h1>
    <p>My first paragraph.</p>
    <a href="http://www.facebook.com/">Like us on facebook</a>
    <img src="C:\Users\User\Desktop\webpage\send email.gif" alt="click
    here"/>
    </body>
    </html>

    The href attribute specifies the destination of a link.


    HTML Images

    HTML Images - The <img> Tag and the Src Attribute


    In HTML, images are defined with the <img> tag.
    The <img> tag is empty, which means that it contains
    attributes only, and has no closing tag.
    To display an image on a page, you need to use the src
    attribute.

    Src stands for "source". The value of the src attribute is the URL
    of the image you want to display.

    <img src="C:\Users\User\Desktop\webpage\send email.gif" alt="click


    here"/>
    HTML Images - Set Height and
    Width of an Image
    The height and width attributes are used to specify
    the height and width of an image.
    The attribute values are specified in pixels by default:
    <img src="pulpit.jpg" alt="Pulpit rock" width="304"
    height="228" />
    Tip: It is a good practice to specify both the height
    and width attributes for an image. If these attributes
    are set, the space required for the image is reserved
    when the page is loaded. However, without these
    attributes, the browser does not know the size of the
    image. The effect will be that the page layout will
    change during loading (while the images load).
    HTML BACKGROUND COLOR

    The background-color property defines the background color for an


    element:

    Example
    <!DOCTYPE html>
    <html>

    <body style="background-color:yellow;">
    <h2 style="background-color:red;">This is a heading</h2>
    <p style="background-color:green;">This is a paragraph.</p>
    </body>

    </html>
    HTML FONT, COLOR & SIZE
    The font-family, color, and font-size properties defines
    the font, color, and size of the text in an element:

    Example
    <!DOCTYPE html>
    <html>

    <body>
    <h1 style="font-family:verdana;">A heading</h1>
    <p style="font-family:arial;color:red;font-
    size:20px;">A paragraph.</p>
    </body>

    </html>
    HTML Style Example - Text
    Alignment
    The text-align property specifies the horizontal
    alignment of text in an element:
    Example
    <!DOCTYPE html>
    <html>

    <body>
    <h1 style="text-align:center;">Center-aligned
    heading</h1>
    <p>This is a paragraph.</p>
    </body>

    </html>
    HTML TABLES
    Example

    Tables are defined with the <table> tag.


    A table is divided into rows (with the <tr> tag), and each row is divided into
    data cells (with the <td> tag). td stands for "table data," and holds the
    content of a data cell. A <td> tag can contain text, links, images, lists,
    forms, other tables, etc.
    Table Example
    <table border="1">
    row 1, cell 2
    <tr> row 1, cell 1

    <td>row 1, cell 1</td> row 2, cell 1 row 2, cell 2

    <td>row 1, cell 2</td>


    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    HTML LIST
    EXAMPLE
    <!DOCTYPE html>
    <html>
    <body>

    <h4>An Ordered List:</h4>


    <ol>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
    </ol>

    </body>
    </html>
    HTML Definition Lists
    A definition list is a list of items, with a description of each
    item.
    The <dl> tag defines a definition list.
    The <dl> tag is used in conjunction with <dt> (defines the
    HTML LAYOUT
    BURGOS NATIONAL HIGH SCHOOL
    Menu Content goes here
    HTML
    CSS
    JavaScript

    Copyright W3Schools.com
    <!DOCTYPE html>
    <html>
    <body>

    <table width="500" border="0">


    <tr>
    <td colspan="2" style="background-color:#FFA500;">
    <h1>Main Title of Web Page</h1>
    </td>
    </tr>

    <tr valign="top">
    <td style="background-color:#FFD700;width:100px;text-align:top;">
    <b>Menu</b><br />
    HTML<br />
    CSS<br />
    JavaScript
    </td>
    <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
    Content goes here</td>
    </tr>

    <tr>
    <td colspan="2" style="background-color:#FFA500;text-align:center;">
    Copyright W3Schools.com</td>
    </tr>
    </table>

    </body>
    </html>

    You might also like

    pFad - Phonifier reborn

    Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

    Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


    Alternative Proxies:

    Alternative Proxy

    pFad Proxy

    pFad v3 Proxy

    pFad v4 Proxy