Scribd Logo
Upload

Welcome to Scribd!

  • Website Authoring

    Uploaded by

    tunalidoga
    3 views16 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    3 views16 pages

    Website Authoring

    Uploaded by

    tunalidoga

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 16

    Website authoring

    Chapter 21
    This chapter covers:
    • Use the Three web development layers : the content
    Use , behaviour and presentation layers

    • Understand and use HTML to create the content


    Understand and use layer of a web page

    • Understand the use of a script language in the


    Understand behaviour layer of a web page

    • Understand and use CSS in the presentation layer of


    Understand and use a web page
    Simple HTML document layout
    <!DOCTYPE html> • Contains the visible page content
    <html> • Contains Java script code
    <head>
    • Defines this document to be HTML5
    <style>
    • Contains meta information about the
    </style> document.
    <script>
    • The root element of an HTML page.
    </script>
    • Contains style information for the page.
    </head>
    <body>
    </body>
    </html>
    The World wide Web

    • WWW was first proposed by Tim Berners


    –Leela in 1989.
    • In 1990 , he created the first successful
    communication between a computer and a
    server using HTTP.
    • His first web page went line in 1991
    Hypertext

    Since 1990 , the www has developed at an


    incredible speed and the code in which the
    This term was first used in 1963 by Ted Nelson . content is written – HTML

    1963 1990

    1967

    In 1967 Nelson developed the Hypertext Editing


    System.
    ….WWW
    • Benefits of internet • Misuses of internet
    Discussion
    Questions
    1. List five attributes of a good
    webpage
    2. List five attributes of a bad
    web page
    21.1 The three web
    development layers
    Website development involves three separate layers, or areas
    of development (coding) that all contribute to the finished
    webpages and website.

    They are called layers because the commands or formatting


    provided by one layer influence those of others.
    3 Layers

    The content layer is what people see


    . It consist of text, images , videos ,
    tables , links. The function of the
    Content layer content layer is to enter the content
    and create structure of the webpage
    using HTML

    This layer sometimes also called


    scripting layer refers to how web
    elements behave when user interact
    Behaviour Layer with them. In this layer user enter
    codes to control elements. Different
    scripting languages can be used , for
    example : Java Script.
    ……3 layers
    Presentation Layer
    The layer refers to the styles that have been
    applied to the elements of web pages – How
    they will appear to the users. The function of the
    presentation layer is to dispaly and format
    elements within a webpage .
    The styles are assigned using another scripting
    language called CSS (Cascading Stylesheets)
    21.2 Creating a webpage

    A WEBPAGE CAN BE CREATED IN ANY TYPE OF SPECIALIST PROGRAMS CALLED SOURCE CODE ALL WEBPAGES NEED TO BE SAVED WITH AN
    TEXT SOFTWARE , FOR EG: A WORD PROCESSOR EDITORS ASSIST BY MAKING SUGGESTIONS AND .HTML EXTENSION.
    OR TEXT EDITOR HIGHLIGHTING WHERE THERE IS AN ERROR .
    Using HTML
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    </style>
    <script>
    </script>
    </head>
    <body>
    </body>
    </html>
    The head section of a webpage
    <!DOCTYPE html>
    <html>
    <head>
    <title> A sample page </title>
    <meta charset = “UTF-8”>
    <meta name =“keywords” content=“computer, ICT, databases, spreadsheets”>
    <meta name =“description” content=“ICT , IGSCE”>
    <meta name =“author” content=“A person”>
    <meta name =“viewpoint” content=“width=device-width, initial scale=1.0”>
    </head>
    <body>

    </body>
    </html>
    The body section of a webpage
    <body>
    <h1> This is h1 heading</h1>
    <h2> This is h2 heading </h2>
    <h3> This is h3 heading </h3>
    <p>This is a paragraph <br> with a line break. <br>
    <b> This is in bold </b> <br>
    <i> This is in italics </i>
    <b><i> This is bold and italics </i> </b>
    </p>
    <h1> Lists </h1>
    <h2> This is an unordered list </h2>
    <ul>
    <li> Red</li>
    <li> Green</li>
    <li> Blue</li>
    </ul>
    <h2> This is an ordered list </h2>
    <ol>
    <li> Red</li>
    <li> Green</li>
    <li> Blue</li>
    </ol>
    </body>
    Links
    <!DOCTYPE html>
    <html>
    <head>
    <title> A sample page </title>
    <meta charset = “UTF-8”>
    <meta name =“keywords” content=“computer, ICT, databases, spreadsheets”>
    <meta name =“description” content=“ICT , IGSCE”>
    <meta name =“author” content=“A person”>
    <meta name =“viewpoint” content=“width=device-width, initial scale=1.0”>
    </head>
    <body>

    </body>
    </html>
    <body>
    <h1> Links </h1>
    < a id=“bookmark”>Link to the heading. </a>
    <h2> Local Webpage</h2>
    < a href=“local_webpage.html”>Link to local webpage </a>
    <h2>Website URL</h2>
    <a href=“http://www.google.com”>Link to a website URL </a>
    <h2>Open link in same window</h2>
    <a href=http://www.google.com target=“_self”> Link to a website URL that
    opens in same window </a>
    <h2> Open link in a new tab </h2>
    < a href=http://www.google.com target=“_blank”> Link to a website URL that
    opens in a new link </a>
    </body>

    You might also like