Scribd Logo
Upload

Welcome to Scribd!

  • HTML Introduction: Learn HTML Basics in 40 Steps

    Uploaded by

    Ujwala Bhoga
    46 views6 pages
    basic tags

    Original Title

    Basic HTML Elements

    Copyright

    © © All Rights Reserved

    Available Formats

    DOC, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    basic tags

    Copyright:

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

    HTML Introduction: Learn HTML Basics in 40 Steps

    Uploaded by

    Ujwala Bhoga
    basic tags

    Copyright:

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

    HTML Introduction

    HTML is a language for describing web pages.

    HTML stands for Hyper Text Markup Language


    HTML is not a programming language, it is a markup language

    A markup language is a set of markup tags

    HTML uses markup tags to describe web pages

    HTML Tags
    HTML markup tags are usually called HTML tags

    HTML tags are keywords 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

    Start and end tags are also called opening tags and closing tags

    HTML Documents = Web Pages

    HTML documents describe web pages


    HTML documents contain HTML tags and plain text

    HTML documents are also called web pages

    The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML
    documents and display them as web pages. The browser does not display the HTML
    tags, but uses the tags to interpret the content of the page:
    HTML basic Syntax
    <html>
    <head>
    <title>webpage</title>
    </head>
    <body>
    </body>
    </html>

    An HTML element starts with a start tag / opening


    tag

    An HTML element ends with an end tag / closing tag

    The element content is everything between the start


    and the end tag

    Some HTML elements have empty content

    Save the file as filename.html

    The <html> element defines the whole HTML document.


    The <body> element defines the body of the HTML document
    The <title> element names the webpage.

    The <p> element:


    <p>This is my first paragraph</p>

    The <p> element defines a paragraph in the HTML document


    The element has a start tag <p> and an end tag </p>
    The element content is: This is my first paragraph

    HTML Headings
    Headings are defined with the <h1> to <h6> tags.
    <h1> defines the largest heading. <h6> defines the smallest heading.
    <h1>This
    <h2>This
    <h3>This
    <h4>This
    <h5>This
    <h6>This

    is
    is
    is
    is
    is
    is

    a
    a
    a
    a
    a
    a

    heading</h1>
    heading</h2>
    heading</h3>
    heading</h4>
    heading</h5>
    heading</h6>

    Use HTML headings for headings only. Don't use headings to make text BIG or
    bold.

    Text Formatting Tags


    HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
    These HTML tags are called formatting tags.
    <b>Welcome</b> --- Defines bold text. (Welcome)

    <i>Welcome</i>--- Defines italic text.( Welcome)


    <big>Welcome</big>--- Defines big text.(

    Welcome)

    <small>Welcome</small>--- Defines small text.(Welcome)


    <strong> Welcome</strong>--- Defines strong text. (Instead of <b>)
    <sub> Welcome </sub>--- Defines subscripted text.(Welcome)
    <sup> Welcome </sup>--- Defines superscripted text.(Welcome)
    <strike>Welcome</strike>-- Defines strike through text.(Welcome)

    <u>Welcome</u>---Defines under lined text. (Welcome)


    <em>Welcome </em>--- Defines emphasized text. (Instead of <i>)

    Anchor Tag
    The HTML anchor element <a>, is used to define both hyperlinks and anchors.

    <a href=url >Link to another document </a>


    The href attribute defines the link "address".
    <a href="http://www.google.com/">Visit Google Webpage!</a>

    <a> element defines a link to google.com

    Image Tag
    In HTML, images are defined with the <img> tag.
    The <img> tag is empty, which means that it contains attributes only and it has no
    closing tag.
    The syntax of defining an image:
    <img src=url >
    Example: <img src=deitel.gif>
    The url points to the location where the image is stored. And src is the must
    attribute.
    <img src=url height= width= alt=Message>
    The height & width attributes are used to set the height & width of the image. And
    alt attribute is used to display message when the mouse pointer is placed on the
    image.

    Image as Anchor
    In HTML , both text and images can act as anchors to link to other pages.
    The syntax is:
    <a href=url>
    <img src=url

    height= width= alt=Message >

    Example:
    <a href="http://www.google.com/">
    <img src=deitel.gif height=50 width=50 ></a>

    Formatting Text
    <font> is the element used to format the text
    <font> tag has the following attributes
    color to change the font color of text
    <font color=blue>Welcome</font>
    size to change the font size of text
    to increase size of text size= +1
    <font size=+2> Welcome</font>
    to decrease size of text size= -1
    <font size=-2> Welcome</font>
    face to change the font type
    <font face=Times new roman> Welcome</font>

    HTML LISTS
    Html supports 2 types of lists
    Ordered List
    Unordered List
    Ordered Lists

    An ordered list is also a list of items. The list items are marked with numbers.

    An ordered list starts with the <ol> tag.

    Each list item starts with the <li> tag.

    <ol>
    <li>Coffee</li>
    <li>Milk</li>
    </ol>
    <ol> tag has one attribute i.e.,
    type - used to change the sequence type

    ex:-

    type=1

    type=A
    type=a
    type=i
    type=I
    <ol type=I>
    type attribute in <li> tag also.

    We can insert

    Unordered Lists

    An unordered list is a list of items. The list items are marked with bullets
    (typically small black circles).

    An unordered list starts with the <ul> tag.

    Each list item starts with the <li> tag.

    <ul>
    <li>Coffee</li>
    <li>Milk</li>
    </ul>
    <ul> tag has one attribute i.e.,
    type - used to change the bullet type
    ex:-

    type=circle
    type=square
    type=disc
    <ul type=circle>
    <li> tag also

    We can insert type attribute in

    Nested List
    List with in another List
    <ul>
    <li>Coffee</li>
    <ol>
    <li> Instant Coffee </li>
    <li> Filter Cofee </li>
    <li>Tea</li>
    </ol>
    <li> Green Tea </li>
    <li> Lemon Tea </li>
    </ul>

    You might also like