Scribd Logo
Upload

Welcome to Scribd!

  • HTML - Introduction

    Uploaded by

    John Lenard Bocal
    6 views22 pages
    Web Systems and Technologies Component

    Original Title

    01. HTML - Introduction

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Web Systems and Technologies Component

    Copyright:

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

    HTML - Introduction

    Uploaded by

    John Lenard Bocal
    Web Systems and Technologies Component

    Copyright:

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

    HTML

    WHAT IS HTML?
    Hyper Text Markup Language
    It is a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on
    World Wide Web pages.

    Link
    • Planning
    • Deploy
    • Coding

    Link Link
    THE PARTS OF MARKUP

    TAGS
    ELEMENTS
    ATTRIBUTES
    TAGS

     Tags are the coded symbols that separate and distinguish one portion of content from
    another while also informing the browser about what type of content it’s dealing
    with.
     A web browser can interpret the tags embedded in an HTML document and treat
    different types of content appropriately.
     Most of the tags available in HTML have names that describe exactly what they do
    and what sort of content they designate, such as headings, paragraphs, lists, images,
    quotations, and so on.
    TAGS

     Tags in HTML are surrounded by angle brackets (< and >) to clearly distinguish them
    from ordinary text. The first angle bracket (<) marks the beginning of the tag,
    immediately followed by the specific tag name, and the tag ends with an opposing
    angle bracket (>). For example, this is the HTML tag that begins a paragraph:

    <p>
    TAGS
     Most tags come in matched pairs: one start tag (also called an opening tag) to mark
    the beginning of a portion of content and one end tag (also called a closing tag) to
    mark its end. For example, the beginning of a paragraph is marked by the start tag,
    <p>, and the paragraph ends with a </p> end tag; the slash after the opening bracket
    is what distinguishes it as an end tag. A complete (if short) paragraph would be
    marked up like this:

    <p>Hello, world!</p>
    TAGS

     These twin tags and everything between them form a complete element, and elements
    are the basic building blocks of an HTML document.

     A few elements don’t require an end tag in select circumstances. For example, if
    certain elements are immediately followed by certain other elements, the start tag for
    the following element implies the end of the previous element, so that previous
    element’s end tag may be optional, depending on the elements in play.
    TAGS

     Some tags indicate void elements (also called empty elements), which are elements
    that do not, and in fact cannot, hold any contents. Void elements don’t require a
    closing tag because there’s nothing to enclose. For example, the br element represents
    a line break that forces the text that follows it to wrap to a new line on the rendered
    page. It’s a void element that can’t hold any content.
    TAGS

     An element’s start tag can carry attributes to provide more information about the element—
    specific traits or properties that element should possess. An attribute consists of an attribute
    name followed by an attribute value, like so:

     <p class="greeting">Hello, world!</p>


     This paragraph includes a class attribute with a value of “greeting,” making it distinct from
    other paragraphs that don’t include that attribute. An attribute’s name and its value are
    connected by an equal sign (=) with no spaces allowed between; class = "greeting" isn’t valid.
    HTML ELEMENTS

     The HTML element is everything from the start tag to the end tag:
    NESTED HTML ELEMENTS

     HTML elements can be nested (this means that elements can contain other elements).

     All HTML documents consist of nested HTML elements.


    NESTED HTML ELEMENTS

     Example Explained
    NESTED HTML ELEMENTS

     Example Explained
    HTML ANATOMY
    BASIC TAGS IN HTML

    Tag Description
    <!DOCTYPE> Defines the document type
    <html> </html> Defines an HTML document
    <head> </head> Contains metadata/information for the document
    <title> </title> Defines a title for the document
    <body> </body> Defines the document's body
    <h1></h1> - <h6></h6> Defines HTML headings
    <p> </p> Defines a paragraph
    <br> Inserts a single line break
    <!--……--> Defines a comment
    FORMATTING TAGS IN HTML

    Tag Description

    <b> </b> Defines bold text

    <i> </i> Defines an italic text

    <small> </small> Defines smaller text

    <sub> </sub> Defines subscripted text

    <strong> </strong> Defines important text

    <var> </var> Defines a variable


    LISTS, LINKS AND IMAGE TAGS IN HTML
    Tag Description

    <ul> </ul> Defines an unordered list

    <li> </li> Defines a list item

    <ol> </ol> Defines an ordered list

    <dl> </dl> Defines a description list

    <u> </u> Defines some text that is unarticulated and styled differently from normal text

    <img src =“”> </img> Defines an image

    < a href = “”> </a> Defines a hyperlink


    HEAD
    BODY
    PARAGRAPH
    LISTS

    You might also like