Scribd Logo
Importer

Bienvenue sur Scribd !

  • Sample Web Design Course

    Transféré par

    Nihal
    14 vues3 pages
    Sample web design course for teachers

    Titre original

    Sample web design course

    Copyright

    © © All Rights Reserved

    Formats disponibles

    TXT, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Sample web design course for teachers

    Droits d'auteur :

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

    Sample Web Design Course

    Transféré par

    Nihal
    Sample web design course for teachers

    Droits d'auteur :

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

    Lesson 1 - Introduction to basics.

    What is HTML?
    Hypertext Mark Up Language. It is the primary language that is used to create a
    web page.
    The latest version being HTML 5. There are many ways of writing HTML for it to
    be valid from the sloppy ways to the strict and semantic ways.
    The sloppy ways tend to work but it is not a good practice to follow. Good html
    mark up is now said to be in the XHTML syntax (the format you will be learning)
    and that is the kind of mark up we are looking to follow for all of our projects
    .
    What is Mark Up?
    Now imagine you're reading a newspaper. All you have in there is a large block o
    f text. No headings no paragraphs, nothing. Everything the same size and font. A
    s an editor the first thing you would do is to seperate the headings, the paragr
    aphs, the quotes etc. This is what mark up is. It is a set of simple tags that s
    uggest the structure of a document.
    Good to know info: Markup is not the same as code. There are times when people i
    ncorrectly refer to markup as code, but code goes beyond the basic abilities of
    markup. With code, you can create programs and make your web page more dynamic,
    while markup simply deals with the page s structure.
    What is CSS?
    CSS stands for Cascading Style Sheets. We need to be using a combination of HTML
    and CSS to create websites. CSS is a language that lets you control how your we
    b pages look. It s important that you know what the abbreviation stands for. You ll
    also learn that CSS, like HTML, evolves over time. The latest version of CSS is
    CSS3 which is very powerful and has some interesting new features.
    Web Standards
    Web standards advocate best practices for building websites. These are standards
    and recommendations published by the w3 consortium. At a practical level, compl
    iance (or adherence) to web standards refers to the
    development of web pages that validate according to the W3C recommendations, lik
    e those for HTML, XHTML, or CSS, or to the guidelines for accessibility.
    Basic Tools Needed
    Text Editor like notepad and a web browser! That is it.

    Lesson 2 - Getting Started With Our Webpage


    Breaking down HTML
    The basic building blocks of HTML are called HTML elements. Elements tell the we
    b browser what each item in the page is: a paragraph,
    a heading, a quotation, and so on. These elements contain all the information th
    at
    the browser requires.
    The Anatomy of a Webpage
    HTML is the skeletal structure of every web page and a website will require html
    for you to work on it further. It is like the chassis of a car upon which every
    thing is built. These requirements make up the basic skeleton of a web page.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Untitled Document</title>
    <meta charset="utf-8"/>
    </head>
    <body>
    </body>
    </html>
    The markup above is the most basic web page you ll see here.
    1. The DOCTYPE
    This is short for Document Type Definition and it must be the first item on a we
    b page apearing even before any spacing. There have also been different versions
    of HTML over time, for example HTML 3.2, HTML 4, XHTML 1.1 and now HTML5.
    2. The html element
    An HTML document is built using elements. Elements are the bricks
    that create the structures that hold a web page together.
    Important things to know about elements
    1. An HTML element starts and ends with tags - the opening tag and the closing t
    ag.
    2. A tag consists of an opening angled bracket (<), some text, and a closing bra
    cket (>)
    3. Inside a tag, there is a tag name and there may also be one or more attribute
    s.
    3. The head element
    The head element contains information about the page, but no information that wi
    ll be displayed on the page itself.
    The title Element
    It does pay to have a meaningful title, and not just for the sake of those peopl
    e who visit our web page.
    The content of the title element is also used for purposes like:
    1. It s the name that appears in the Windows Taskbar.
    2. If users decide to add the page to their bookmarks (or favourites), the title
    will be used to name the bookmark.
    Your title element is used heavily by search engines to work out what your
    page contains, and what information should be displayed in the search results.
    The meta Elements
    A meta element can be used in a web page for different reasons. Some are used to
    provide additional information that s not displayed onscreen to the browser or se
    arch engines; for instance, the name of the page s author or a copyright notice mi

    ght be included in meta elements. In the example above, the meta tag tells the b
    rowser which character set to use specifically, UTF-8, which includes the characte
    rs needed for web pages in just about any written language.
    Self-closing Elements
    There are some elements that do not require a closing tag. The meta element is j
    ust one of them.
    The body Element
    Finally, we reach the place where it all happens. The page s body element contains
    almost everything that you see on the screen: headings, paragraphs, images, any
    navigation that s required, and footers that sit at the bottom of the web page.
    Adding Structure and Splitting Up the Page
    The DIV element is used to divide up your page. The purpose of a div is to divid
    e up a web page into distinct sections and basic structural framework with no st
    yling.
    Creating a menu for navigation
    To enable site visitors to move around, we need to add navigation. Navigation re
    lies on anchors, more commonly referred to as links. We will most likely always
    use the <li> element we learnt about earlier to create a menu for navigation.
    The a (where a is for anchor) element is used to create links on your web page.
    You will always need to specify the href attribute while using the anchor elemen
    t. The href attribute refers to the page that you re linking to (be that a file st
    ored locally on your computer, or a page on a live website).
    Adding Images using the self closing img element
    <img src="ali.jpg"/>

    Vous aimerez peut-être aussi