Scribd Logo
Carica

Benvenuto in Scribd!

  • Blog

    Caricato da

    Oluwaseyi Adegoke
    8 visualizzazioni6 pagine
    Blog

    Copyright

    © © All Rights Reserved

    Formati disponibili

    TXT, PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento
    Blog

    Copyright:

    © All Rights Reserved
    Scarica in formato TXT, PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    8 visualizzazioni6 pagine

    Blog

    Caricato da

    Oluwaseyi Adegoke
    Blog

    Copyright:

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

    WEB DESIGN WITH XHTML,HTML AND CSS

    LESSON 1
    INTRODUCTION TO WEB DESIGN AND DEVELOPMENT
    Wile using the internet, you have encountetred various attractive and useful web
    sites. However,merely using the internet will not give you an idea of how these
    sites are created. In this course, you will examine the basics of web technology
    and create your own web pages such as Hypertext Markup Language (HTML),Extensib
    le Hypertext Markup Language (XHTML) and Cascading STyle Sheets (CSS)
    I dont want to make this boring so I will be as brief as possibe.
    Course Requirements
    Intel Pentium 4 or higher (Compatible processor)
    256MB of RAM (512 MB Recommended)
    2GB available hard disk space
    CD-ROM drive (optional)
    Intenet Connection
    Microsoft Internet EXplorer 7.0 and above
    Moxilla Firefox 2.0 and above
    Notepad++ 4.6 and above
    SETUP
    1. Install Internet explorer 7 or Morxilla Firefox 2.0 and above
    a. Internet EXplorer can be downloaded at http://www.microsoft.com/windows/downl
    oads/ie/getitnow.mspx?wt_svl+20510a&mg_id+20510b
    b. Mozilla Firefox can be downloaded at http://www.mozilla.com/en-US/firefox/
    2. INstall Notepad++ 4.6 or you can improvise with the one already on your syste
    m.
    World Wide Web (WWW)
    (WWW) or simply "the Web" is a part of the internet that stores a l;arge quantit
    ty of hypertext multimeduia documents called web pages. Web pages can be accesed
    using a web browser.
    Hypertext Markup Language (HTML)
    HTML can be used to create web pages consisting of text, graphics and links as w
    ell as dynamic web pages with animated content. Style Languages such as CSS were
    developed to deal with the presentation aspect.
    Extensible Hypertext Markup Language (XHTML)
    Since most browsers are lenient in rendering HTML, XHTML allows you to create do
    cuments following syntax rules. THe leniency may result in incosistent display o
    f content.
    ELEMENTS
    In HTML and XHTML, elements are sets of instructions that describe the structure
    and content of a web page. These instructions are applied through the use of ta
    gs. Elemts can be either empty or Container elements.
    Container Element <h3> Our Web <h3/>
    Empty Element <br/>
    TAGS
    Tags are indicators used to identify the type of a particular content. e.g. encl
    osing text between <h1> </h1> tahs indicate the text written inside is a heading
    ,
    <h1> The whole world </h1>
    ATTRIBUTES
    An attribute is a part of an XHTML element that modifies the characteristics of
    that element. ATtributes are included in the opening tag of a container element
    and use a name="value" syntax. Most elements have a defined set of attributes th
    at you can modify to suit your needs.

    name="value"
    Excercises
    Which of the following XHTML elements are empty elements?
    a) <p> Text </p>
    b) <br/>
    c) <title> Tiltle </title>
    d) <h6> Heading </h6>
    e) <hr/>
    Answers: b, e
    WHich markup Language is used to define syntax of a markup language?
    a) HTML
    b) SGML
    c) XHTML
    d) MathML
    Answer: c
    Watch out for Lesson 2, PLease Post your comments below!

    LESSON 2
    CREATING A BASIC PAGE STRUCTURE
    If you followed the first Lesson, you should have been familiar with some of the
    se terms. I will advice that you get a jotter to note somethings down
    THE GLOBAL STRUCTURE
    The Global Structure is the overall structure of an XHTML document which consist
    s of the elements required to display a web page.
    Element Descript
    ion
    Element
    Description
    DTD
    The DTD is used to determine the elements and attributes allowed in an XHTML doc
    ument

    <head></head>
    The head section that contais information such as title of the web page, charact
    er set and style sheet.

    <title></title>
    The title of the web page

    <body></body>
    Body Section that consists of the elemnts to be displayed on the web page.
    <p></p>
    A paragraph containing some text to be diplayed

    </html>

    The closing HTML tag.

    Namespace
    The name space declaration informs the browser about the language used.

    Document Type Definition (DTD)


    DTD is an XHTML element used to determine the elements, attributes and character
    s of a document.
    The DTD should be the first line of an HTML or an XHTML document.
    A DTD can either be strict or Flexible

    Rules in writing an XHTML document

    Rule Example
    1. Doctype is required <! DOCTYPE html
    PUBLIC "-//W3c//
    DTD XHTML 1.0 Strict//EN"
    "http://www.w3.o
    rg/TR/xhtml1/DTD/xhtml1-strict.dtd">
    2. All tags and attributes must be written in <p>This is a par
    agraph</p>
    lower case
    3.All elements must be properly enclosed <head> Title of
    Web Page</head>

    4.The attribute values must always be quoted <img src="url" a


    lt="text"/>
    5.All elements must be properly nested <p><em>This is a
    n emphasized word.</em><p>
    6.Attribute values must not be minimized <input checked="
    checked">
    7. The stylesheet or CSS must be sperated from the <style type="tex
    t/css">
    presentation
    HOW TO CREATE A BASIC PAGE
    Creating a Basic WebPage Structure
    1.Declare a DTD and a name space a. Open a blank document
    in the notepad application
    b. Click the first line
    and enter the DTD
    c. Type <! DOCTYPE htm
    l
    d. Press Enter and type
    PUBLIC "-//W3c//DTD XHTM
    L 1.0 Strict//EN"
    Press Enter and type
    "http://www.w3.org/TR/xh
    tml1/DTD/xhtml1-strict.dtd">
    e. Press Enter and type
    <html xmlns="http://www.
    w3.org/1999/xhtml" xml:lang="en">
    to declare Namespace

    2. Enter the head section of your webpage a. Press Enter and type
    <head>
    b. Press Enter and type
    <meta http-equiv+"content-type" content+"text\html; charset=utf-8"
    and press Enter
    c. type
    <title>My First Webpage
    </title> to enter the title of your Web Page and Press Enter
    d. Press Enter and type
    </head> to close the head section

    3. Enter the body section of your web page a. Press Enter and type
    <body>
    b. Press Enter and type
    </body> NB: you can type anything you want inbetween the the opened
    and closed body tag. To
    start a new line, you can use paragraph element <p> and close it </p>
    c.Press Enter and type <
    /html> to end the document.

    4.Save and view the File a. Choose File---Save as


    to open Save As dialog box
    b. In the File name text
    box type "Index.html" NB: Open a new folder and save it inside
    c. From the save as drop
    down list, select all files and click Save.
    d. Open your browser and
    choose File----Open
    e. In the Openv dialog b
    ox. click Browse and open the document you saved.\
    IMAGES
    The <img> tag requires the src attribute, which specifes the path to an image.
    Adding Text and Images
    1. Create a paragrapgh about your Webpage a. Click after the <body
    and press Enter
    and display it on your web browser
    b. Type <p> to insert a
    new paragraph
    c. Type in whatever you
    want in the paragrapgh
    d. Type </p> to close pa
    ragraph
    e. Choose the File-----S
    ave
    f. Refresh your browser
    to display the paragraph or open your webpage again.

    2. Embed your webpage banner at the top of a. Switch to the notepad


    and click after the <body> tag and press Enter
    the web page. ( any picture for now)
    b. Type
    <p><img src="your pictur
    e's name.jpeg" alt+"webpage banner"/></p>
    NB: Your picture must be
    inside the folder that has your webpage file "index.html"
    your picture's name be c
    orrectly spelled and must have correct file extension e.g. .jpeg,.gif.e.t.c
    C. Save your File

    d. Switch to your web br


    owser and Refresh your Web browser

    3. Insert comments for the footer section a. Switch to the notepad


    and click after the paragrapgh containing text and press Enter
    of the webpage
    b. Type <!--Page Footer-
    -> to label the section as page footer
    c. Press Enter and type
    <!--Navigation Bar-->
    d. Click Save and Switch
    to web browser and refresh

    That will be all for these lesson, If you encounter any problem, comment below a
    nd you will be replied shortly.
    Watch out for Lesson3- Structuring Content.Please share for others to benefit.

    Potrebbero piacerti anche