Scribd Logo
Upload

Welcome to Scribd!

  • 3 views

    Lecture.1 Web

    Uploaded by

    adhamelthn

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Lecture.1 Web

    Uploaded by

    adhamelthn
    3 views16 pages

    Original Title

    lecture.1 web

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    3 views16 pages

    Lecture.1 Web

    Uploaded by

    adhamelthn

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 16

    Web Programming

    HTML

    CSS JavaScript

    Step by step Exercises


    History of the Web
    • Internet (1960s)
    • World Wide Web - WWW (1991)
    • First Web Browser - Netscape, 1994
    • Google, 1998
    • Facebook, 2004
    • Smartphones (iPhone), 2007
    • Tablets (iPad), 2010
    The Web Browser

    Chrome
    Internet Explorer

    Opera

    Safari
    Firefox
    The Web Programming Triangle

    HTML Use HTML to define the


    content of web pages

    Web
    Programming
    JavaScript
    CSS
    Use CSS to specify the layout of web pages Use JavaScript to program
    the behavior of web pages
    Basic Web Programming
    • HTML
    • CSS
    • JavaScript

    For more Dynamic Web Programming we use e.g.,


    • ASP.NET
    • SQL
    • AJAX
    • PHP
    • etc.
    CSS

    JavaScript

    Server
    Web
    Web Architecture

    Internet Explorer Chrome Firefox Opera Safari

    Web Browser
    Client

    HTML CSS JavaScript


    Server-side

    Web Server
    Client-Server Example
    Client
    Web Browser

    Response
    Web Server

    Request
    Database

    Internet Information Services (IIS), Apache, etc.


    Web Platform
    The Web Browser creates the visual web page you see in the browser based on
    <!DOCTYPE html> the HTML code
    <html>
    <body>

    <h1>My First Heading</h1>

    HTML, CSS, JavaScript


    <p>My first paragraph.</p>
    Client-side
    </body>
    Web Browser
    </html>

    The code runs on the server and converted to Web Page (HTML)
    HTML before sending to client (Web Browser)

    Web Server Server-side


    ASP.NET, PHP, ...

    Internet Information Services (IIS), Apache, etc.


    HTML
    • HyperText Markup Language (HTML)
    • The Visual Appearnce of a Web Site
    • “Web Browser Language”: All Web Browser

    understand HTML
    • HTML 5 is the latest
    • Maintained by W3C
    - World Wide Web Consortium

    1
    3
    HTML Editors
    Professional HTML editors:
    • Adobe Dreamweaver
    • CoffeeCup HTML Editor
    • Notpad++,……..
    For the simple examples in this Tutorial we only
    need Notepad (Windows)
    What Are HTML Tags?

    • Tags are used to mark up the start of an HTML element and


    they are usually enclosed in angle brackets.
    An example of a tag is: <h1>.
    • Most tags must be opened <h1> and closed </h1> in order to
    function.
    HTML Code

    <!DOCTYPE html>
    <html>
    HTML
    <head>
    <title> This is document title </title>
    </head>
    <body>
    <h1> This is a heading </h1>
    <p> Hello World! </p>
    </body>
    </html>

    Web Browser
    HTML Page Structure

    <!DOCTYPE html>
    <html>
    <body>

    <h1>This is a heading</h1>

    <p>This is a paragraph.</p>

    <p>This is another
    paragraph.</p>

    </body>
    </html>

    1
    5
    My First HTML Web Page
    <tagname>content</tagname>

    • The DOCTYPE declaration defines the


    <!DOCTYPE html> document type
    <html> • The text between <html> and</html>
    <body> describes the web document
    • The text between <body> and</body>
    describes the visible page content
    <h1>My First Heading</h1> • The text between <h1> and </h1> describes
    a heading
    • The text between <p> and </p> describes
    <p>My first paragraph.</p>

    </body>
    paragraph
    </html>
    Students: Create this HTML Code in e.g., NotePad and Save the File as .htmL.
    Then Open the File in a Web Browser (just double-click on the file)
    In HTML, headings are written in the following elements:
    •<h1>
    •<h2>
    •<h3>
    •<h4>
    •<h5>
    •<h6>

    As you might have guessed <h1> and <h2> should be used for the most
    important titles, while the remaining tags should be used for sub-headings
    and less important text.

    You might also like