Scribd Logo
Загрузить

Добро пожаловать в Scribd!

  • Some Common HTML Elements

    Загружено:

    lieth-4
    13 просмотров22 страницы
    AFTER THIS PRESENTATION You'll be able to apply headings and sections. A simple web page is so awesome! let's discuss it here in detail. Let's consider HTML lists means ordered list the first item the second item. Yes. The third item!

    Исходное описание:

    Авторское право

    © © All Rights Reserved

    Доступные форматы

    PDF, TXT или читайте онлайн в Scribd

    Этот документ был вам полезен?

    Это неприемлемый материал?

    Пожаловаться на этот документ
    AFTER THIS PRESENTATION You'll be able to apply headings and sections. A simple web page is so awesome! let's discuss it here in detail. Let's consider HTML lists means ordered list the first item the second item. Yes. The third item!

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    13 просмотров22 страницы

    Some Common HTML Elements

    Загружено:

    lieth-4
    AFTER THIS PRESENTATION You'll be able to apply headings and sections. A simple web page is so awesome! let's discuss it here in detail. Let's consider HTML lists means ordered list the first item the second item. Yes. The third item!

    Авторское право:

    © All Rights Reserved
    Скачайте в формате PDF, TXT или читайте онлайн в Scribd
    Отметить как неприемлемый контент
    из 22

    SOME COMMON

    HTML ELEMENTS
    PROF. DAVID ROSSITER
    1/22

    AFTER THIS PRESENTATION


    You'll be able to apply headings and
    sections within your page
    You'll be able to create different types of lists
    You'll be able to write comments in the code

    2/22

    ELEMENTS WE WILL LOOK AT


    Headings

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

    Sections

    <section>

    Lists

    <ul> and <ol> together with <li>

    Comments

    <! a comment >

    3/22

    QUICK REMINDER - SIMPLE WEB PAGE


    <!DOCTYPEhtml>
    <html>
    <head>
    <title>ASimpleWebPage</title>
    <metaname="author"content="DavidRossiter">
    </head>
    <body>
    <h1>MyWebPage</h1>
    <p>Thiswebpageissoawesome!</p>
    </body>
    </html>

    4/22

    HTML HEADINGS
    <h1> <h2> <h3> . . . <h6> are used for headings
    Browsers show <h1> bigger than <h2>
    <h2> bigger than <h3>, and so on
    People often 'cheat' by using these elements
    to easily generate different size text

    5/22

    HEADING TAGS
    A simple example of heading elements
    <h1>IntroductiontoSomething</h1>
    <h2>AnAreaofSomething</h2>
    <h3>ASubArea...</h3>
    <p>Thissubareaisfun!Let'sdiscussithereindetail.</p>

    6/22

    Introductionto
    Something
    AnAreaofSomething
    ASubArea...
    Thissubareaisfun!Let'sdiscussitherein
    detail.
    7/22

    LOOKS BORING?
    The elements are shown using the default browser style
    We can apply a different style to make things look better
    Let's apply the style used by this presentation
    Later we will look at style in depth

    8/22

    INTRODUCTION TO SOMETHING
    AN AREA OF SOMETHING
    A SUB-AREA...
    This sub-area is fun! Let's discuss it here in detail.

    9/22

    USING SECTION
    <section> is used to indicate a section
    <section>

    <h1>IntroductiontoSomething</h1>

    <p>Let'sdiscusssomethinghere!</p>
    </section>

    10/22

    IntroductiontoSomething
    Let'sdiscusssomethinghere!

    11/22

    A SIMPLE LIST USING BULLETS


    Now let's consider HTML lists
    <ul> means unordered list, <li> means list item
    <ul>
    <li>Thefirstitem</li>
    <li>Theseconditem...</li>
    <li>Yes...thethirditem!</li>
    </ul>

    12/22

    Thefirstitem
    Theseconditem...
    Yes...thethirditem!

    13/22

    A SIMPLE LIST USING NUMBERS


    <ol> means ordered list
    <ol>
    <li>Thefirstitem</li>
    <li>Theseconditem...</li>
    <li>Yes...thethirditem!</li>
    </ol>

    14/22

    1. Thefirstitem
    2. Theseconditem...
    3. Yes...thethirditem!

    15/22

    CHANGING THE START NUMBER


    Add start="number" to fix the starting number
    <olstart="1999">
    <li>InthisyearIwasborn...</li>
    <li>InthisyearIlearnedtowalk...</li>
    <li>InthisyearIlearnedtoprogram...</li>
    <li>InthisyearIlearnedSPAtechniques...</li>
    </ol>

    16/22

    1999. InthisyearIwasborn...
    2000. InthisyearIlearnedtowalk...
    2001. InthisyearIlearnedto
    program...
    2002. InthisyearIlearnedSPA
    techniques...

    17/22

    REVERSING THE ORDER


    Add reversed to reverse the order
    <olstart="2002"reversed>
    <li>InthisyearIlearnedSPAtechniques...</li>
    <li>InthisyearIlearnedtoprogram...</li>
    <li>InthisyearIlearnedtowalk...</li>
    <li>InthisyearIwasborn...</li>
    </ol>

    18/22

    2002. InthisyearIlearnedSPA
    techniques...
    2001. InthisyearIlearnedto
    program...
    2000. InthisyearIlearnedtowalk...
    1999. InthisyearIwasborn...

    19/22

    USING A LETTER
    Add type="A" to use a letter
    <oltype="A">
    <li>isfor'Anchor'...</li>
    <li>isfor'Body'...</li>
    <li>isfor'Cdata'...</li>
    <li>isfor'Div'...</li>
    </ol>

    20/22

    A.
    B.
    C.
    D.

    isfor'Anchor'...
    isfor'Body'...
    isfor'Cdata'...
    isfor'Div'...

    21/22

    COMMENTS
    A comment looks like this: <!a comment>
    <html>
    <!Thisisasimpledemonstrationofusingcommentsinawebpage>
    <head>

    <metaname="author"content="DavidRossiter">

    <!Ican'tbelievehowamazingthatguyreallyis!>
    </head>
    <body>

    <!Here'smysimple'todo'list>

    <p>ItemsIneedtofixinmybusiness:</p>

    <ol><li>Thepeople</li>

    <li>Theprocess</li>

    <li>Theproduct</li></ol>

    <!That'salotofthingstofix!Ibettergetstartedsoon.>
    </body>
    </html>

    Comments can be added anywhere


    22/22

    Вам также может понравиться