Scribd Logo
Upload

Welcome to Scribd!

  • 1 Intro To HTML

    Uploaded by

    Bernie
    50 views30 pages
    HTML is a markup language used to structure and present content on the web. It uses tags to give instructions to web browsers on how to display text, images, and other content. Some key HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> for the visible page content, and <a> for creating links. Learning HTML allows you to build web pages and understand how information is delivered on the internet.

    Original Description:

    Original Title

    1 intro to html.pptx

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    HTML is a markup language used to structure and present content on the web. It uses tags to give instructions to web browsers on how to display text, images, and other content. Some key HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> for the visible page content, and <a> for creating links. Learning HTML allows you to build web pages and understand how information is delivered on the internet.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    50 views30 pages

    1 Intro To HTML

    Uploaded by

    Bernie
    HTML is a markup language used to structure and present content on the web. It uses tags to give instructions to web browsers on how to display text, images, and other content. Some key HTML tags include <html> to define an HTML document, <head> for metadata, <title> for the page title, <body> for the visible page content, and <a> for creating links. Learning HTML allows you to build web pages and understand how information is delivered on the internet.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Download as pptx, pdf, or txt
    of 30

    Intro to HTML

    The Basics
    HTML

    HTML means Hyper Text Markup Language.


    HTML is a language that helps us to create web sites
    in the Internet. HTML helps to coordinate human
    and the computer. So we have to use some codes to
    explain to computer what are we going to do.
    Therefore we use HTML to give instructions to create
    web sites.
    Why We Learn HTML?
    Tim Berners-Lee
    (CERN physicist)
    Creator of HTML &
    WWW

    CERN is an European
    Organization for Nuclear
    Research at Geneva
    Beginning of HTML
    • HTML is an evolving standard (as new
    technology/tools are added)
     HTML 1 (Sir Tim Berners-Lee, 1989): very basic,
    limited integration of multimedia
    in 1993, Mosaic added many new features (e.g., integrated
    images)

     HTML 2.0 (IETF, 1994): tried to standardize these &


    other features, but late
    in 1994-96, Netscape & IE added many new, divergent
    features

     HTML 3.2 (W3C, 1996): attempted to unify into a


    single standard
    but didn't address newer technologies like Java applets &
    streaming video
    Beginning of HTML (cont.)
     HTML 4.0 (W3C, 1997): current standard (but moving
    towards XHTML)
    attempted to map out future directions for HTML, not just
    react to vendors

     HTML 4.01(W3C, 1999):

     XHTML 1.0 (W3C, 2000): HTML 4.01 modified to


    conform to XML standards

     XHTML 1.1 (W3C, 2001): “Modularization” of XHTML


    1.0

     HTML 5 (Web Hypertext Application Technology


    Working Group, W3C, 2006): New
    HTML Tags

    We use some codes to explain to computer


    what are we going to do. These codes called
    as “Tags”.
    HTML tags must type in the angle
    brackets(<>) ,it wants to type in a text editor
    and save with .htm or .html extension. If we
    use a tag we should close the tag. To close
    the tag we use closing tags(</>).
    Software & Text Editors
    • What You See is What You Get(Software):
    Dreamweaver, Microsoft FrontPage, Netscape Composer,
    Adobe Page Mill, ,Hotdog
    • Word (Save As Webpage)
    • Text Editors
    • Notepad
    • Word pad
    • Code View
    • GEdit
    • Nano Editor
    • In HTML we use some essential tags. They are

    • <html>
    • <head> Heading Section
    • <title></title>
    • </head>
    • <body></body>
    • </html> Body Section
    HTML Tags
    • Tag – an HTML code that tells the browser
    HOW to display something
    • Opening Tag <h3>
    • Closing Tag </h3>
    • Example : <b>This will be bold</b>
    • Tags will not appear in browsers
    • All open tags must have corresponding
    closing tag.
    Attributes
    Attributes provide additional display
    information about a tag
    Attributes appear within the opening tag
    brackets
    Attribute values must be contained in quotes
    You can have more than one attribute in a
    tag

    <font size=“1” color=“green">This text would


    be green and smaller</font>
    HTML Tags
    Basic Tags

    <html></html>
    Creates an HTML document
    <head></head>
    Sets off the title and other
    information that isn't displayed on
    the Web page itself
    <body></body>
    Sets off the visible portion of the
    document
    Header Tags

    <title></title>
    Puts the name of the document in
    the title bar

    Things in the header section do not appear


    in the browser
    Body Attributes

    <body bgcolor=?>
    Sets the background color, using name or
    hex value
    <body text=?>
    Sets the text color, using name or hex value
    <body background=url>
    Specifies an image file to be used as
    background
    <body vlink=?>
    Sets the color of followed links, using name
    or hex value
    <body alink=?>
    Sets the color of links on click
    Text Formatting Tags 1

    <hl></hl>
    Creates the largest header
    <h6></h6>
    Creates the smallest header
    <b></b>
    Creates bold text
    <i></i>
    Creates italic text
    Text Formatting Tags 2

    <strong></strong>
    Emphasizes a word (with italic or bold)
    <font size=“?”></font>
    Sets size of font
    <font color=“?”></font>
    Sets font color, using name or hex value
    <font face=“?”></font>
    Set font style like Comic Sans MS
    Paragraph Formatting Tags

    <p></p>
    Creates a new paragraph
    <p align=?>
    Aligns a paragraph to the left, right, or
    center
    <br>
    Inserts a line break
    <blockquote></blockquote>
    Indents text from both sides
    HTML Formatting
    Ordered Lists –this is a numbered
    list, starts with <ol> and ends with
    </ol>, each new item in list requires
    the <li> tag

    Sample code…. Browser view…


    <ol> List Name Yankees Starting Lineup
    <li> list item 1 1. Johnny Damon
    <li> list item 2 2. Derek Jeter
    <li> list item 3 3. Bobby Abreu
    <li> list item 4 4. Robbie McGarry
    </ol>
    HTML Formatting
    Un-ordered Lists –bulleted list of
    items, starts with <ul> tag and ends
    with </ul> tag, and each list item
    begins with <li>

    Sample code…. Browser view…


    <ul> List Name Yankees Starting Lineup
    <li> list item 1 •Johnny Damon
    <li> list item 2 •Derek Jeter
    <li> list item 3 •Bobby Abreu
    <li> list item 4 •Robbie McGarry
    </ul>
    HTML Formatting
    Definition Lists –not a list of items
    but a list of terms and explanations
    or definitions
    Note: inside a definition list (the <dd> tag) you can
    put paragraphs, line breaks, images, links and
    other lists

    Sample code…. Browser view…


    <dl>
    <dt>Vocab Word 1 Rock
    <dd>Definition 1 hard object, made..
    <dt>Vocab Word 2 Ball
    <dd>Definition 2 round object….
    </dl>
    Table Formatting Tags
     <table></table>
    Creates a table
     <tr></tr>
    Sets off each row in a table
     <td></td>
    Sets off each cell in a row
     <table border=#>
    Sets width of border around table cells
     <table width=“ ? %” or height=“ ? %”>
    Sets width and height of table - in pixels or as a
    percentage of document width
    How Tables Work

    <table>

    <tr> <td> </td> <td> </td> <td> </td> </tr>

    <tr> <td> </td> <td> </td> <td> </td> </tr>

    <tr> <td> </td> <td> </td> <td> </td> </tr>


    </table>
    Images
    Img = image
    src = source of the image
    alt = stands for alternate and is used to name
    the image, important for visually impaired
    users (text to speech)
    <img src =“nameoftheimage.jpg”
    alt=“description”>
    <img src =“nameoftheimage.gif”
    alt=“description”>
    Images
    Aligning Images can be done with the
    “align=“ tag. Place this inside of your image
    source code. You can only align to the right
    or to the left with this tag.

    <img src=“name.jpg” alt=“description”


    align=“right”>
    *Note <img….> tag is an empty tag with no
    </img> tag necessary
    Image as a Link
    <a href=“url or file name”><img src =
    “imagefile.jpg” alt=“description”></a>

    Insert the img src


    tag in place of the
    clickable text on a
    normal link
    Creating Links
    Two types of links

    1. absolute: link to an outside website


    2. relative: link to another page within your
    website
    HTML uses the <a> (anchor) tag to create a link to
    another document
    An anchor can point to any resource on the Web: an HTML
    page, an image, a sound file, a movie, etc.
    The correct Syntax of creating an anchor:

    <a href="url">Text to be displayed</a>


    Creating Absolute Links
    Closing
    Where this Anchor
    Anchor link will take Tag
    Tag you

    <a href="url">Text to be displayed</a>

    Href
    attribute Text
    used to hyperlink
    address the that
    document to appears in
    link to browser
    Creating Relative Links
    Where this link will
    Anchor take you (page
    Tag within website name

    <a href=“nameofpage.html">Text to be
    displayed</a>

    Closing
    href Anchor
    attribute Tag Text
    used to hyperlink
    address the that
    document appears in
    to link to browser
    Link Tag
    Html Links :

    Html links are defined with the <a> tag


    Syntax : <a href="http://www.gmil.com">Gmail</a>
    <html>
    Example : <body>

    <a href="http://www.gmail.com">Gmail</a>

    </body>
    </html>

    If we click this link it goes to gmail


    O/P : Gmail account

    You might also like