Scribd Logo
Importer

Bienvenue sur Scribd !

  • ITBIS322 Practical Lecture1

    Transféré par

    api-3822474
    26 vues22 pages
    HTML is a method of describing the format of documents - it is a text presentation language. HTML pages can be simple text or complex multimedia. HTML tags tell the browser how to display the page.

    Description originale:

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formats disponibles

    PPT, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    HTML is a method of describing the format of documents - it is a text presentation language. HTML pages can be simple text or complex multimedia. HTML tags tell the browser how to display the page.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    26 vues22 pages

    ITBIS322 Practical Lecture1

    Transféré par

    api-3822474
    HTML is a method of describing the format of documents - it is a text presentation language. HTML pages can be simple text or complex multimedia. HTML tags tell the browser how to display the page.

    Droits d'auteur :

    Attribution Non-Commercial (BY-NC)
    Téléchargez comme PPT, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 22

    ITBIS322

    LECTURE 1
    1
    What is HTML?
     HTML stands for Hyper Text Markup Language

     Markup language: a language that has codes for


    indication layout and styling ( such as boldface, italic,
    placement of graphic, etc).
     HTML is a method of describing the format of
    documents - it is a text presentation language.
     HTML pages can be simple text or complex
    multimedia.

    2
    Continue
     An HTML file is a text file containing small markup
    tags
     The markup tags tell the Web browser how to
    display the page
     An HTML file must have an htm or html file
    extension
     An HTML file can be created using a simple text
    editor
     All commands that specify the layout of our Web
    pages are provided in the form of elements, or
    tags, which are embedded between the textual
    parts of our HTML files.
    3
    Continue
     HTML tags are used to mark-up HTML elements
     HTML tags are surrounded by the two characters < and >
     The surrounding characters are called angle brackets
     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
     The text between the start and end tags is the element content
     HTML tags are not case sensitive, <b> means the same as
    <B>
     Comments may be included in a file, to aid human readability
    while it is being created or edited:
    <!-- This is comment text -->

    4
    HTML Document Structure
    <html>
    <head>
    <title>Title of page</title>
    </head>
    <body> This is my first homepage.
    <b>This text is bold</b>
    </body>
    </html>

    5
    Output

    6
    Continue
     Example Explained:
     The first tag in your HTML document is <html>. This tag tells
    your browser that this is the start of an HTML document. The
    last tag in your document is </html>. This tag tells your browser
    that this is the end of the HTML document.
     The text between the <head> tag and the </head> tag is header
    information. Header information is not displayed in the browser
    window.
     The text between the <title> tags is the title of your document.
    The title is displayed in your browser's caption.
     The text between the <body> tags is the text that will be
    displayed in your browser.
     The text between the <b> and </b> tags will be displayed in a
    bold font.

    7
    Text Formatting Tags
     One of the main purposes of HTML is to format text.
    Many different tags are provided to do this. Common
    ones include:

    Tag Description
    <i> Italic
    <b> Bold
    <u> Underline
    <big> Enlarged font
    <sub> Subscript
    <sup> Superscript
    <font> Font formatting, Size, Color & Face
    8
    :Continue
    <p> New paragraph

    <h#> Headings are defined with the <h1> to


    <h6> tags. <h1> defines the largest
    heading. <h6> defines the smallest
    .heading
    <br> Line break

    9
    :Example 2
    <html>
    <head>
    <title> welcome to exersise 2 </Title>
    <body>
    <b><i><u>This text is bold, italic, underlined </i> </u> </b>
    <br>
    <big> This text is big </big>
    <br>
    This text contains
    <sub>subscript</sub>
    <br>
    This text contains
    <sup>superscript</sup>
    <p>
    <font size="20" color="red“ face=“Bookman Old Style “> This text is
    red, the size=20 </font> 10
    </body> </html>
    Output

    11
    HTML Lists
     You can make an order list with in the HTML
    using the <ol> tag and an unordered list
    using the <ul> tags. The item inside the list
    should be surrounded by a <li> …</li> tags.

    12
    Example 3
    <html>
    <body>
    Computer divide into:
    <ol type=“a”>
    <li> hardware</li>
    <li> Software</li>
    </ol>
    Hardware consist of:
    <ul>
    <li>input</li>
    <li>output</li>
    </ul>
    </body>
    </html>

    13
    Output

    14
    HTML Nested List
    <html> <body>
    <h1> Nested List Example </h1>
    <br> <br>
    <h2> An ordered list </h2>
    <ol type="i">
    <li> Coffee
    <ul>
    <li> Milk </li>
    <li> Orange Juice </li>
    </ul>
    </li>
    <li> Tea
    <ol type="A">
    <li> Milk </li>
    <li> Orange Juice
    <ul type="square">
    <li> Milk </li>
    <li> Orange Juice </li>
    </ul>
    </li>
    </ol>
    </li>
    15
    </ol>
    </body> </html>
    Output

    16
    Horizontal lines or Rulers
     The <hr> tag creates a horizontal line on the page.
     It has no HTML closing tag.
     Its attributes include:
     The size=n attribute indicates the thickness of the
    rule line, in pixels (default=2);
     The width=n attribute indicates the horizontal width of
    the rule line. This can be specified either in pixels or
    as a percentage of the screen width.
     <hr size="6" width="400">
     <hr size="6" width="50%">

    17
    Backgrounds
     The <body> tag has two attributes where you can specify backgrounds.
    The background can be a color or an image.
     Bgcolor
     The bgcolor attribute specifies a background-color for an HTML page.
    The value of this attribute can be a hexadecimal number, or a color
    name:
     <body bgcolor="#000000">
     <body bgcolor="black">
     The lines above all set the background-color to black.
     Background
     The background attribute specifies a background-image for an HTML
    page. The value of this attribute is the URL of the image you want to
    use. If the image is smaller than the browser window, the image will
    repeat itself until it fills the entire browser window.
     <body background="clouds.gif">
     <body background="http://www.w3schools.com/clouds.gif">
     The URL can be relative (as in the first line above) or absolute (as in
    the second line above).
    18
    Images on the Web
     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.
     To display an image on a page, you need to use the
    src attribute. Src stands for "source". The value of the
    src attribute is the URL of the image you want to
    display on your page.
     The syntax of defining an image:
     <img src="url“ width=size Height= size border=size
    alt=“ “>

    19
    Continue
     src= Filename or URL of the image (GIF or JPEG)
     width= Width of the image in pixels (allows rescaling)
     height= Height of the image in pixels (allows
    rescaling)
     border= Width of the image border in pixels
     The "alt" attribute tells the reader what he or she is
    missing on a page if the browser can't load images.
    The browser will then display the alternate text
    instead of the image.

    20
    :Example 4
    <html>
    <body>
    <p>
    An image:
    <img src=“image1.gpeg"
    width="144" height="50">
    </p>
    </body>
    </html>

    21
    : Output

    22

    Vous aimerez peut-être aussi