Scribd Logo
Carica

Benvenuto in Scribd!

  • Introduction To HTML

    Caricato da

    Sidra Shaikh
    31 visualizzazioni36 pagine
    The document introduces HTML5 concepts including DOCTYPE declarations, character encoding, basic HTML tags, container and standalone tags, heading tags, and formatting tags. It describes the new HTML5 DOCTYPE as <!DOCTYPE html> and explains that the default character encoding for HTML5 is UTF-8, specified in a <meta> tag. It also provides details on common basic HTML tags like <html>, <head>, <body>, and their uses.

    Descrizione originale:

    web development

    Titolo originale

    Introduction to HTML

    Copyright

    © © All Rights Reserved

    Formati disponibili

    PPTX, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    The document introduces HTML5 concepts including DOCTYPE declarations, character encoding, basic HTML tags, container and standalone tags, heading tags, and formatting tags. It describes the new HTML5 DOCTYPE as <!DOCTYPE html> and explains that the default character encoding for HTML5 is UTF-8, specified in a <meta> tag. It also provides details on common basic HTML tags like <html>, <head>, <body>, and their uses.

    Copyright:

    © All Rights Reserved
    Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    31 visualizzazioni36 pagine

    Introduction To HTML

    Caricato da

    Sidra Shaikh
    The document introduces HTML5 concepts including DOCTYPE declarations, character encoding, basic HTML tags, container and standalone tags, heading tags, and formatting tags. It describes the new HTML5 DOCTYPE as <!DOCTYPE html> and explains that the default character encoding for HTML5 is UTF-8, specified in a <meta> tag. It also provides details on common basic HTML tags like <html>, <head>, <body>, and their uses.

    Copyright:

    © All Rights Reserved
    Scarica in formato PPTX, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 36

    Session:2

    Introduction to the HTML5


    OBJECTIVES

     Describe DOCTYPE declarations


     Describe charset
     Explain the basic tags in HTML
     Describe container and standalone tags
     Heading Tags
     Formatting tags
     Paragraph tags
     Attributes of body and head

    2
    DOCTYPE
     Informs the browser the HTML version number of your document.
     It is the first declaration in the HTML5 document before any other HTML
    code is written.
     Allows a browser to be more precise in the way it interprets and
    renders your pages.

    The new HTML5 DOCTYPE is as follows:

    <!DOCTYPE html>

     It is the new syntax of HTML5 as well as for all future versions of HTML.
     This DOCTYPE is compatible with the older browsers also.

    3
    HTML Encoding (Character Sets)

    • To display an HTML page correctly, a web browser must


    know which character set (character encoding) to use.

    • ASCII was the first character encoding standard (also


    called character set).

    • ANSI (Windows-1252) was the original Windows


    character set.

    • ISO-8859-1 was the default character set for HTML 4.


    Because ANSI and ISO-8859-1 were so limited, HTML 4
    also supported UTF-8.
    • UTF-8 (Unicode) covers almost all of the characters and
    symbols in the world.
    • The default character encoding for HTML5 is UTF-8.

    To display an HTML page correctly, a web browser must


    know the character set used in the page.
    This is specified in the <meta> tag:

    <meta charset="UTF-8">
    Numb ASCII ANSI 8859 UTF-8 Description

    32 space

    33 ! ! ! ! exclamation mark

    34 " " " " quotation mark

    35 # # # # number sign

    36 $ $ $ $ dollar sign

    37 % % % % percent sign
    BASIC STRUCTURE OF HTML DOCUMENT

    head Contains
    information which
    is not directly
    displayed in the
    browser, but
    browsers may use it
    in other ways.

    Contains the content


    body to be displayed in the
    browser and also the
    code that tells the
    browser how to
    render the content.
    BASIC CODE
    <html> It tell the browser that you will "talk" to it in the language HTML

    <head> It provides information about your document

    <!-- This section is for the title and


    technical info of the page. -->
    </head>
    <body> It describes the content of the document

    <!-- This section is for all that you want


    to show on the page. -->
    </body> 1. Open Notepad
    2. Type the code shown in the above
    </html> figure.
    3. Save the file with .html extension.
    4. View it in Internet Explorer.
    Favorites.
    TAGS

     Core building block of HTML is tag , which marks


    each element in the document.
     Tags are labels one use to mark up the beginning and
    end of an element.
     Element refers to an object in a Web page, & tag
    refers to the HTML code that creates the object.
    BASIC TAGS
     An HTML document is made up of different elements, tags, attributes, which
    specify the content and its format.
     An HTML page is saved with the .html extension.
     The basic structure of an HTML document mainly consists of seven basic
    elements.
     These are as follows:
     HTML
     Head
     Title
     Meta
     Link
     Script
     Body
    heading
    horizontal line
    image

    paragraph

    unordered list

    AN ELEMENT IS A DISTINCT OBJECT IN THE DOCUMENT


    EXAMPLES: PARAGRAPH, HEADING , OR THE PAGE’S TITLE
    THE WHOLE DOCUMENT CAN ALSO BE CONSIDERED AS AN
    ELEMENT.
    DESCRIPTION OF BASIC TAGS

     HTML

     The HTML element is the root element that marks the beginning of an HTML
    document.
     It contains the start and end tag in the form of <HTML> and </HTML>
    respectively.
     It is the largest container element as it contains various other elements.
     HEAD

    • The <head> element is a container for metadata (data


    about data) and is placed between the <html> tag and
    the <body> tag.

    • HTML metadata is data about the HTML document.


    Metadata is not displayed.

    • Metadata typically define the document title,


    character set, styles, links, scripts, and other meta
    information.

    • The following tags describe metadata: <title>, <style>,


    <meta>, <link>, <script>, and <base>.
     TITLE

    • The <title> element defines the title of the document,


    and is required in all HTML documents.

    • The <title> element:

    • defines a title in the browser tab

    • provides a title for the page when it is added to


    favorites

    • displays a title for the page in search engine results


    DESCRIPTION OF BASIC TAGS
     META

    • The <meta> element is used to specify which character


    set is used, page description, keywords, author, and
    other metadata.
    • Metadata is used by browsers (how to display content),
    by search engines (keywords), and other web services.
    • Define the character set used:
    <meta charset="UTF-8">
    • Define a description of your web page:
    <meta name="description" content="Free Web tutorials">

    15
    • Define keywords for search engines:

    <meta name="keywords" content="HTML, CSS, XML,


    JavaScript">

    • Define the author of a page:


    <meta name="author" content="John Doe">

    Refresh document every 30 seconds:


    <meta http-equiv="refresh" content="30">
    DESCRIPTION OF BASIC TAGS
     LINK

     The <link> tag is used to define the association between a document and an
    external resource.
     It is used to link stylesheets. Its type attribute is used to specify the type of
    link such as ‘text/css’ which points out to a stylesheet.

    <link type=”text/css” rel=”stylesheet” href=”first.css”>

     The type attribute is not included in HTML5.


     The reason is that CSS has been declared as the default and standard style for
    HTML5. So, the new link is as follows:

    <link rel=”stylesheet” href=”first.css”>

    17
    DESCRIPTION OF BASIC TAGS
     SCRIPT

     With HTML5, JavaScript is now the standard and default scripting language.
     The type attribute tag can be removed from the script tags.
     The new script tag is as follows:
    <script src=”first.js”></script>
    The following example shows the use of the script tag.
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=”UTF-8”>
    <title>HTML Webinar</title>
    <link rel=”stylesheet” href=”first.css”>
    <script src=”first.js”></script>
    </head>
    </html>

    18
    DESCRIPTION OF BASIC TAGS
     BODY

     The BODY element enables you to add content on the Web page specified
    under the <BODY> and </BODY> tags.
     Content can include text, hyperlinks, and images. You can display the content
    using various formatting options such as alignment, color, and background.
     Following figure shows the basic HTML elements.

    19
    CONTAINER AND STANDALONE TAGS

    There are two types of HTML elements namely, container and standalone
    elements.

    A container element includes the start tag, contents, sub-elements, and end
    tag.

    All the basic HTML elements are container elements.

    A standalone element consists of the start tag and attributes followed by the
    end tag as /> without any content.

    20
    INTRODUCTION

    Text content of Web page forms an important part of a Web site.

    Text must be attractive, easy to read, and should be short and crisp.

    Text formatting options such as bold, italics, superscript, subscript, and so on


    must be applied to attract the user attention.

    Background color and image of the Web page can be specified using HTML.

    21
    HEADINGS 1-2

    Heading elements define headings for contents such as text and images.

    Specifies the hierarchical structure of a Web page by grouping the contents.

    HTML defines six levels of headings ranging from H1 to H6.

     H1 is the top level heading and is displayed with largest font size
     H6 is the lowest-level heading and is displayed with smallest font size

    22
    HEADINGS 2-2
     The Code Snippet demonstrates how to specify the six levels of heading in an
    HTML page.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Headings</title>
    </head>
    <body>
    <h1>H1 Heading</h1>
    <h2>H2 Heading</h2>
    <h3>H3 Heading</h3>
    <h4>H4 Heading</h4>
    <h5>H5 Heading</h5>
    <h6>H6 Heading</h6>
    </body>
    </html>

    23
    TEXT FORMATTING 1-5
    Formatting is
    applied using
    formatting elements
    which are container
    elements

    Content format
    Formatted content
    determines the
    appearance of the
    Formatting makes an HTML page
    more readable and
    content in the
    presentable
    browser

    Text may appear in


    bold or underlined

    24
    IMPORTANT TAGS
    Tag Description
    <html> Defines an HTML document
    <body> Defines the document's body
    <h1> to <h6> Defines HTML headings
    <hr /> Defines a horizontal line
    <!--> Defines a comment
    <p> Defines a paragraph
    <br /> Inserts a single line break
    HTML TEXT FORMATTING TAGS

    Tag Description
    <b> Defines bold text
    <big> Defines big text
    <i> Defines italic text
    <small> Defines small text
    <strong> Defines strong text
    <sub> Defines subscripted text
    <sup> Defines superscripted text
    <ins> Defines inserted text
    <del> Defines deleted text
    TEXT FORMATTING 2-5
     Commonly used formatting elements are as follows:

    B element displays text in bold and is enclosed between <b> and </b> tags.

    I element displays text in italics and is enclosed between <i> and </i> tags.

    SMALL element makes the text appear smaller in browser and is enclosed
    between <small> and </small> tags.

    U element underlines a text and is enclosed between <u> and </u> tags.

    27
    TEXT FORMATTING 4-5
     Some more formatting elements are as follows:

    DEL element encloses deleted text and is placed between <del> and </del>
    tags.

    INS element encloses inserted text and is placed between <ins> and </ins>
    tags.

    STRONG element emphasizes the text and is placed between <strong> and
    </strong> tags.

    SUB element displays a text as subscript and is enclosed between <sub> and
    </sub> tags.

    SUP element displays a text as superscript and is enclosed between <sup>


    and </sup> tags.

    28
    TEXT FORMATTING 5-5
     The Code Snippet demonstrates the use of other formatting elements.

    <!DOCTYPE html>
    <html>
    <head>
    <title>Updating and Shifting Text</title>
    </head>
    <body>
    <h3>Updating, Emphasizing, and Shifting Text</h3>
    This is an example of <del>deleted</del> <ins>inserted
    </ins> text.<br/>
    The is an example of <strong>Strong</strong> text.<br/>
    The is an example of <sub>subscript</sub>text.<br/>
    The is an example of <sup>superscript</sup> text.<br/>
    </body>
    </html>

    29
    CONTROLLING
    FONT SIZE &
    COLOR
    CHANGING FONT SIZE, COLOR AND FAMILY
    To change font size, color and family, you can use
    style attribute.
    <p style="color:white; font-family:arial;
    background-color:olive">

    This is some text in paragraph with style


    attribute.
    </p>

    <h1 style="text-align:center">
    Styling of text using style attribute
    </h1>
    CHANGING THE COLOR OF TEXT
    • TEXT attribute of the <BODY> tag is used to set the
    foreground, or text color of the page.

    <BODY TEXT=“color”>
    Color name: Specifies the text-color with a <BODY
    color name
    TEXT=“blue”>
    Hex number: Specifies the text-color with a hex <BODY
    code
    TEXT=“#FF0000”>

    RGB Specifies the text-color with an <BODY


    number: rgb code
    TEXT=“rgb(0,255,0)">
    USING IMAGE AS BACKGROUND

    <BODY BACKGROUND=“value”>

    • BACKGROUND attribute specifies a background image for an


    HTML document.
    • It overrides the BGCOLOR attribute. This means that if you
    specify both a background image & a background color, the
    background image will appear on top of the background color.
    USING IMAGE AS BACKGROUND
     The background image will scroll when the user
    scrolls down the page, unless you have set it to be
    fixed:

    <body background="drkrainbow.gif"
    bgproperties="fixed">
    BACKGROUND COLOR

    Background properties specify the background color and image for the Web
    pages.

    TEXT attribute of the <BODY> tag is used to set the foreground, or text color
    of the page. .

    bgcolor attribute specifies the background color of a document.

     Syntax for bgcolor is:

    <body bgcolor=”color_name|hex_number|rgb_number”>

    where,
    color_name - Specifies the background color with a color name (such as “red”)
    hex_number - Specifies the background color with a hex code (such as “#ff0000”)
    rgb_number - Specifies the background color with an rgb code (such as
    “rgb(255,0,0)”)
    35
    HTML COMMENTS

     Comments can be inserted into the HTML code to


    make it more readable and understandable.
    Comments are ignored by the browser and are not
    displayed.
     Comments are written like this:

    <!-- This is a comment -->

    Potrebbero piacerti anche