Scribd Logo
Upload

Welcome to Scribd!

  • Web Engineering Week 1

    Uploaded by

    Muhammad Yasir Imam
    8 views14 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, 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 PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    8 views14 pages

    Web Engineering Week 1

    Uploaded by

    Muhammad Yasir Imam

    Copyright:

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

    Web Engineering

    (Week 1)
    Main Topics

     Introduction to www

     HTML Introduction

     HTML Basic Page Creation Tags


    Introduction to www
    • The term WWW refers to the World Wide Web or simply the Web.

    • The World Wide Web consists of all the public Web sites connected
    to the Internet worldwide.

    • The WWW is just one of many applications of the Internet and


    computer networks. Like FTP, Internet gaming, Chat, and e-mail are
    all part of the Internet.

    • The World Web is based on these technologies:


     HTML - Hypertext Markup Language
     HTTP - Hypertext Transfer Protocol
     Web servers and Web browsers

    HTTP for client/server communication, (request/response protocol)


    WWW Structure
    • Clients use browser application to send URLs via HTTP to
    server requesting a web page.

    • Web pages constructed using HTML (or other markup


    languages like XML or DHTML) consist of text, images, audio or
    video files.

    • Server respond with requested web page or with error


    message.

    • Client’s browser displays web page returned by server.


    • The whole process runs over standard networking protocols.
    WWW Working
    • A browser contains URL (uniform recourse locator) where visitors
    can specify the website they want to see.

    • The browser sends the URL request using HTTP, then the browser
    and the server gets connected in order to get the desired result.

    • A URL consists of several parts. The 1st part (http://) is used for
    internet. The 2nd part (www) tell what kind of internet recourse is
    being contacted. The 3rd part is (xyz.com) for webserver
    identification.

    • When a request is sent on internet, the routers send them to the


    servers, it goes to the specified web server and search for the
    website that is specified by the visitor.

    • The server finds the requested home page & display it on the web
    browser.
    HTML
    • HTML stands for Hyper Text Markup Language.
    • HTML is a markup language not a programming language
    • Needs no compilation and is human readable.
    • A markup language is a set of markup tags < >
    • HTML tags are keywords surrounded by angle brackets,
    like <html> or <body> etc.
    • HTML tags normally come in pairs like <b> and </b>
    • The tags describe document content
    • HTML documents contain HTML tags and plain text
    • HTML documents are also called web pages
    HTML Document = Web Pages
    • HTML documents are also called web pages.

    • The purpose of a web browser (like internet explorer, firefox or chrome


    etc.) is to read HTML documents and display them as web pages.

    • The browser does not display the html tags, but uses the tags to interpret
    the content of the page.
    • Example

    <html>
    <head>
    <title> page title goes here </title>
    </head>
    <body>
    Contents goes here
    </body>
    </html>
    HTML - Elements
    • An HTML element consists of three essential pieces:
    • an opening tag, the content, and a closing tag.
    e.g.
    <p> - opening paragraph tag
    Element Content - "Once upon a time..."
    </p> - closing tag

    • A Complete HTML Element:


    <p>Once upon a time...</p>
    • A single page can contain hundreds or thousands of
    elements, but the four important elements of an HTML
    page are the
    HTML, head, title, and body elements.
    HTML – Elements Cont.
    • HTML Element
    every web page begins and ends with <html> element.
     HTML Element Code:
    <html> Contents </html>

    • Head Element
    The <head> is usually the first element inside the <html> element.
    The <head> may contain the title of the page, meta data, scripts and
    CSS.
     Head Element Code:
    <html>
    <head> </head>
    </html>
    HTML – Elements Cont.
    • Title Element
    The <title> element adds a title to a web page. Web page titles are displayed at the top of any
    browser window.
    titles.
     Title Element Code:
    <html>
    <head>
    <title>My Web Page!</title>
    </head>
    </html>

    • Body Element
    The element that encapsulates all the visual elements (paragraphs, pictures, tables, etc.) of a
    web page is the <body> element.
     Body Element Code:
    <html>
    <head>
    <title>My Web Page!</title>
    </head>
    <body>
    <p>Once upon a time...</p>
    </body>
    </html>
    HTML Tags
    • An HTML element starts with a start tag / opening tag
    • An HTML element ends with an end tag / closing tag
    • The element content is everything between the start and
    the end tag
    • There are a number of HTML tags used for forms, images,
    tables, lists etc.
    • Everything displayed on an web page requires the use of a
    tag.
    <html>
    <head> head tag </head>
    <body>Body Tag
    <p>Paragraph Tag</p>
    <h2>Heading Tag</h2>
    <b>Bold Tag</b>
    <i>Italic Tag</i>
    </body>
    </html>
    HTML Tags Cont.
    • HTML - Elements Without Closing Tags
    • There are a few elements that do not require formal closing
    tags.
     <br /> -- Line Break Tag
     <img src="mypic.jpg" /> -- Image Tag
     <input type="text" size="12" /> -- Input Field

    First Example
    <html>
    <head>
    <title>My Web Page!</title>
    </head>
    <body>
    Hello World!
    </body>
    </html>
    HTML Tags Cont.
    • HTML Text Formatting Tags:
    <p>An example of <b>Bold Text</b></p>
    <p>An example of <em>Emphasized Text</em></p>
    <p>An example of <strong>Strong Text</strong></p>
    <p>An example of <i>Italic Text</i></p>
    <p>An example of <sup>superscripted Text</sup></p>
    <p>An example of <sub>subscripted Text</sub></p>
    <p>An example of <code>Computer Code Text</code></p>
    Static Vs. Dynamic Web Page
    • Static Web Page:
     A web page that displays same information to all users.
     No user interaction.
     One page is shown to many users.
    • Dynamic Web Page:
     Involves user interaction.
     Information is different for each user e.g checking an email
    • Creating a Web Page:
     Open Notepad.
     Write code.
     Once you finished the content, click on file and save.
     Give a file name e.g. myfirstpage.html
     Click on save
     Run your webpage where it is stored.

    You might also like