Scribd Logo
Upload

Welcome to Scribd!

  • HTMLIntroduction

    Uploaded by

    Puneet Dhaliwal
    15 views24 pages
    HTML is a recommendation maintained by World Wide Web Consortium (w3c) HTML files are identified as.html file extension..htm is the 3 letter abbreviation of.html.

    Original Description:

    Original Title

    15861_HTMLIntroduction

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    HTML is a recommendation maintained by World Wide Web Consortium (w3c) HTML files are identified as.html file extension..htm is the 3 letter abbreviation of.html.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    15 views24 pages

    HTMLIntroduction

    Uploaded by

    Puneet Dhaliwal
    HTML is a recommendation maintained by World Wide Web Consortium (w3c) HTML files are identified as.html file extension..htm is the 3 letter abbreviation of.html.

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 24

    HTML - An Introduction

    Selin George Our Lady of Fatima Church, Kallukoottam

    www.saintfatima.in

    06-Sep-2009
    1

    Introduction
    

    Hyper Text Markup Language Hypertext implies the text can include graphics, audio, video. Markup refers to the tags used to define the hypertext. HTML is a recommendation maintained by World Wide Web Consortium (W3C) HTML is a case insensitive language HTML files are identified as .html file extension. .htm is the 3 letter abbreviation of .html.
    2

    Tags And Attributes


    HTML is a tag driven language

    Tags And Attributes Contd.


    Nesting of tags are allowed provided tags should not jump into the boundaries.

    Tags And Attributes Contd.


    Attribute can use either single or double quote.

    Tags without contents can be written as follows:

    HTML Document Structure


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>Your Title</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META content="MSHTML 6.00.2900.3268" name=GENERATOR> <META name="keywords" content="Our Lady of Fatima, Catholic Church"> <META name="description" content="Welcome to Our Lady of Saint Fatima Church, kallukoottam> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="style/main.css"> </HEAD> <BODY> ..... </BODY> </HTML>

    Ah Seems tough

    HTML Document Structure - Tags


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>Your Title</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META content="MSHTML 6.00.2900.3268" name=GENERATOR> <META name="keywords" content="Our Lady of Fatima, Catholic Church"> <META name="description" content="Welcome to Our Lady of Saint Fatima Church, kallukoottam> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="style/main.css"> </HEAD> <BODY> ..... </BODY> </HTML>

    Hmm better

    No Worries Edit only few


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>Your Title</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META content="MSHTML 6.00.2900.3268" name=GENERATOR> <META name="keywords" content="Our Lady of Fatima, Catholic Church"> <META name="description" content="Welcome to Our Lady of Saint Fatima Church, kallukoottam> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="style/main.css"> </HEAD> <BODY> . . . . . A little bit goes here . . . . . </BODY> </HTML>

    10

    Wow!!!

    11

    No Worries Contd.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>Your Title</TITLE> <META http-equiv=Content-Type content="text/html; charset=windows-1252"> <META content="MSHTML 6.00.2900.3268" name=GENERATOR> <META name="keywords" content="Our Lady of Fatima, Catholic Church"> <META name="description" content="Welcome to Our Lady of Saint Fatima Church, kallukoottam> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="style/main.css"> </HEAD> <BODY> . . . . . A little bit goes here . . . . . </BODY> </HTML>

    12

    Document Header Contd:


     

    <title> Title of the page. <meta> - Information mostly used by browser. <style> - Define a Cascaded Style Sheet (CSS) associated with the page. <base> - Specifies the base URL.

    13

    Headlines And Paragraph:


    

    HTML supports 6 levels of headings (h1 to h6). <h1> defines the largest heading and <h6> defines the smallest heading. Paragraphs are tagged by <p>. Block Elements Nesting of block elements are not allowed. In-line Elements Nesting of inline elements are allowed.
    14

    Example 1:
    <h1>Our Lady of Fatima Church</h1> <h2>Kallukoottam</h2> <p>Kallukoottam is a small and beautiful village located in Southern India.</p>

    Output:

    15

    Emphasis:
    <em> and <strong> are used to emphasis text. <em> (usually) provides an italics effect whereas <strong> (usually) provides a bold effect.

    Example 2: <p>Be faithful in <em>small things</em> because it is in them that your <em>strength</em> lies - <strong>Mother Teresa</strong></p> Output:

    16

    Line Breaks:
    Line breaks are the end of line characters or equivalently the Enter key in keyboard.. <br /> tag is used to insert the line breaks.
    Example 3: <p>Be faithful in <em>small things</em> because it is in them that your <em>strength</em> lies.<br /> - <strong>Mother Teresa</strong></p>

    Output:

    17

    The List Element:


    

    There are two types of list element (<li>), viz. Ordered List Element (<ol>), Unordered List Element (<ul>). Ordered List Element:
    1. Rediff 2. Google 3. Yahoo

    Unordered List Element:


      

    Rediff Google Yahoo

    18

    Example 4:
    Output:

    <p>Ordered List:</p> <ol> <li>Rediff</li> <li>Google</li> <li>Yahoo</li> </ol> <p>Unordered List:</p> <ul> <li>Rediff</li> <li>Google</li> <li>Yahoo</li> </ul>

    19

    Page Linking:
    

    Links in HTML are used to link other pages/files. Anchor tab (Address tab) <a> is used for this purpose. <a href=www.saintfatima.in>Fatima Church Website</a> - Go to link www.saintfatima.in <a href=www.saintfatima.in#index1>Fatima Church Website</a> - Load www.saintfatima.in and scroll down to the section index1.
    20

    Image Linking:
    

    The tag used to link image is <img> Ex: <img src=file.jpg alt=File image />

    21

    Table:
    

    HTML Tables are required to arrange and position the data.


    Output:

    <table> <caption>HTML Table</caption> <thead> <tr> <th>Sl.No</th><th>Name</th><th>Attendance</th> </tr> </thead> <tbody> <tr> <td>1</td><td>Hero</td><td>Yes</td> </tr> <tr> <td>2</td><td>Villan</td><td>Yes</td> </tr> </tbody> </table>

    22

    Table Contd.:
    <table border=1> <caption>HTML Table</caption> <thead> <tr> <th>Sl.No</th><th>Name</th><th>Attendance</th> </tr> </thead> <tbody> <tr> <td>1</td><td>Hero</td><td>Yes</td> </tr> <tr> <td>2</td><td>Villan</td><td>Yes</td> </tr> </tbody> </table>

    Output:

    23

    Miscellaneous Tags:
      

    Subscript, Superscript: <sub>, <sup> Horizontal rule (line): <hr /> Search Engine sensitive tags: <dfn>, <address>, <acronym> etc.

    24

    You might also like