Scribd Logo
Importer

Bienvenue sur Scribd !

  • Web Design 1 New

    Transféré par

    api-262664674
    213 vues25 pages

    Titre original

    web design 1 new

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PPTX, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PPTX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    213 vues25 pages

    Web Design 1 New

    Transféré par

    api-262664674

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PPTX, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 25

    WEB PROJECT

    Andrew Dockerty


    STARTER ACTIVITY.
    Interesting and attractive.
    Create a diary of snapshots showing different websites you
    can find where the layout catches your eye.
    This can be any site or page. Put a description underneath
    showing your explanation.
    Eg. Did you like the navigation bar? Did you like where the
    images were placed?
    Look at the unit content
    Look at the grading criteria
    Create simple pages using HTML5
    Test and validate simple pages



    TODAY WE ARE GOING TO:
    Understand the fundamentals of cascading style sheets (CSS)
    Understand the fundamentals of scripting languages
    Be able to control layout of web pages using CSS
    Be able to create interactive web pages
    UNIT CONTENT
    Be able to design interactive websites
    Be able to create interactive websites
    UNIT CONTENT
    HTML
    Simple language for creating web pages
    XHTML
    A strict version of HTML
    HTML5
    Combines the best features of HTML4 and XHTML
    HOW WE HAVE EVOLVED AS
    WEB DEVELOPERS
    HTML
    Hyper Text Markup Language.
    It is simply a Markup Language.
    Markup languages are a set of Markup Tags.
    The Tags describe the content.
    HTML documents are also called web pages.
    HTML TAGS
    HTML Tags are keywords surrounded by angle brackets like <HTML>.

    The Tags normally come in pairs like <b> and </b>.

    The first is the start tag and the second is the end tag.

    Note the forward slash in the end tag </b>.
    HTML ELEMENTS
    "HTML tags" and "HTML elements" are often used to describe the
    same thing.

    Strictly speaking the element is everything between the start and the
    end tag.

    <p> This is a paragraph. </p>
    HTML STRUCTURE
    HTML needs to follow a structure. Imagine this structure like this figure
    on the right.
    We have the Head and the Body.

    <html>
    <head>
    <title>Page title</title>
    </head>
    <body>
    <p>Text goes in the body</p>
    </body>
    </html>

    VALIDATORS
    http://validator.w3.org/

    http://jigsaw.w3.org/css-validator/

    Code needs to be valid
    World Wide Web Consortium provides validators

    Open a text editor

    Open word and create:


    WALK THROUGH
    Test Number Description Expected
    Result
    Actual Result Action
    <!DOCTYPE html>
    <!--I AM A COMMENT-->
    <head>
    <meta charset="UTF-8" />
    <title>MY FIRST WEBPAGE</title>
    </head>
    </html>

    Run through the validator, test, document, view in browser





    COMMENT THROUGHOUT
    <body>

    </body>


    Run through the validator, test, document, view in browser
    <p> BTEC National Diploma</p>


    Run through the validator, test, document, view in browser
    <p><i>BTEC National Diploma</i></p>

    <p><u>BTEC National Diploma</u></p>

    <p><b>BTEC National Diploma</i></p>

    Run through the validator, test, document, view in browser


    <h1>Hello Im HEADING 1</h1>

    <H2>Hello Im HEADING 2</h2>

    <h3>Hello Im HEADING 3<h3>

    Run through the validator, test, document, view in browser

    <a href= "HTTP://WWW.GOOGLE.CO.UK">WE'RE
    OFF TO GOOGLE</a>

    Run through the validator, test, document, view in
    browser

    HYPERLINKS
    Find an appropriate image
    Save to the same location as you HTML file

    < img src = face.jpg />

    Run through the validator, test, document, view in browser

    IMAGES
    <table>
    <tr>
    <td>Column1</td>
    <td>Column2</td>
    </tr>
    <tr>
    <td>Column1</td>
    <td>Column2</td>
    </tr>
    </table>
    Run through the validator, test, document, view in browser

    <ul>
    <li>one</li>
    <li>two</li>
    </ul>

    Run through the validator, test, document, view in browser

    LISTS

    <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname"><br>
    <input type="radio" name="sex" value="male">Male<br>
    <input type="radio" name="sex" value="female">Female
    </form>

    Run through the validator, test, document, view in browser

    FORMS
    <form name="input" action="http://www.google.co.uk"
    method="get">
    First name: <input type="text" name="FirstName"
    value=Andrew"><br>
    Last name: <input type="text" name="LastName"
    value=Dockerty"><br>
    <input type="submit" value="Submit"></form>

    Run through the validator, test, document, view in browser


    FORMS CONTINUED
    Construct a page using tables as a layout tool


    Run through the validator, test, document, view in browser

    ACTIVITY
    Have we looked at the unit content
    Have we looked at the grading criteria
    Have you created simple pages using HTML5
    Tested and validate simple pages



    WRAP UP

    Vous aimerez peut-être aussi