Lecture%206%20Introduction%20to%20Web%20Programming - PowerPoint PPT Presentation

View by Category
About This Presentation



Lecture 6 Introduction to Web Programming – PowerPoint PPT presentation

Number of Views:52
Avg rating:3.0/5.0
Slides: 26
Provided by: Sham81


Write a Comment
User Comments (0)
Transcript and Presenter's Notes

Title: Lecture%206%20Introduction%20to%20Web%20Programming

Lecture 6 Introduction to Web Programming
Exploring the History of the World Wide Web
  • Timothy Berners-Lee and other researchers at the
    CERN nuclear research facility near Geneva,
    Switzerland laid the foundations for the World
    Wide Web, or the Web, in 1989
  • Developed a system of interconnected hypertext
    documents that allowed their users to easily
    navigate from one topic to another
  • Hypertext is a method of organizing information
    that gives the reader control over the order in
    which the information is presented

Hypertext Documents
  • When you read a book, you follow a linear
    progression, reading one page after another
  • With hypertext, you progress through pages in
    whatever way is best suited to you and your
  • Hypertext lets you skip from one topic to another

Hypertext Documents
  • The key to hypertext is the use of links, which
    are the elements in a hypertext document that
    allow you to jump from one topic or document to
  • A link may point to another section of the same
    document, or to another document entirely
  • A link can open a document on your computer, or
    through the Internet, a document on a computer
    anywhere in the world

Web Pages and Web Servers
  • Each document on the World Wide Web is referred
    to as a Web page
  • Web pages are stored on Web servers, which are
    computers that make Web pages available to any
    device connected to the Internet
  • A Web browser retrieves the page from the Web
    server and renders it on the users computer or
    other device

Introducing HTML
  • A Web page is a text file written in a language
    called Hypertext Markup Language
  • A markup language is a language that describes a
    documents content and structure
  • Styles are format descriptions written in a
    separate language from HTML that tell browsers
    how to render each element for particular devices

Writing HTML Code
  • Become well-versed in the history of HTML
  • Know your market
  • Test your code on several different browsers and
    browser versions
  • Read the documentation on the different versions
    of HTML and XHTML

Creating an HTML Document
  • plain-text files that can be created using any
    text editor (e.g., Notepad)
  • .html or .htm extension
  • constructed by HTML elements
  • An element is a distinct object in the document,
    e.g. paragraph, heading, page title, etc.
  • The whole html document is also considered an

HTML Documents creation (step by step)
  • Step 1 open Notepad in your computer
  • Start -gt All Programs -gt Accessories -gt Notepad
  • Step 2 write your html code in the notepad
    (copy-paste from next slide)

Sample HTML code
lthtmlgt ltheadgt ltTITLEgtLastname,
Firstnamelt/TITLEgt lt/headgt ltbodygt
ltH1gtWelcome to My Homepage.lt/H1gt lt/bodygt
lt/htmlgt We will have a close look at the code
HTML Documents creation (step by step)
  • Step 3 save the file in your computer
  • File -gt Save As

HTML Documents creation (step by step)
  • Step 3 contd. save the file as .html or .htm
  • Choose All Files in the field save as type
  • Type sample.htm in the field File name
  • You may replace sample with any other name you
  • Click on Save button
  • Now, double-click on the saved file to open it up
    as a web browsing page

Editing a saved HTML Document (step by step)
  • Right click on the sample.htm file and open
    with Notepad
  • Edit/Modify
  • Click on File -gt Save button
  • Now, double-click on the saved file to open it up
    as a web browsing page

In-class fun!
  • Create an html document with title
  • Welcome to ltfirst namegt ltlast namegts webpage!
  • and execute the html file using your web browser!
  • Remember to always backup the in-class files in
    your usb drive or email before logging off from
    the class.
  • After logging off, all the files stored in the
    computer Temp folder will be erased.

How to view your HTML files over the Internet
  • HTML files need to be uploaded to a web server to
    view them over the Internet
  • E.g., JJ web server
  • There are many free web servers
  • http//www.tripod.lycos.com/
  • http//bravenet.com/
  • and many more
  • For this class, you may create an account with
    any such web servers for the practice purpose
  • Lets take an example http//www.tripod.lycos.com

How to upload files
  • Sign in using your username and password
  • You will be taken to the control panel
  • Click on the File Manager Tab
  • Here you can upload your files to the web server
  • One at a time
  • Eight at a time
  • Or zip the entire folder
  • After successful uploading, you can view your
    webpage/website over the Internet
  • http//username.tripod.com/
  • Example http//math-279.tripod.com/

One particular thing to remember!
  • Starting page!
  • Web servers by default take one particular file
    as the homepage of your website
  • index.htm or index.html
  • Try to be uniform with your naming convention
    throughout this class
  • The html page that you want to load as the
    homepage of you website
  • Name it as index.htm

First HTML code
lthtmlgt ltheadgt ltTITLEgtLastname,
Firstnamelt/TITLEgt lt/headgt ltbodygt
ltH1gtWelcome to My Homepage.lt/H1gt lt/bodygt
lt/htmlgt We will start with this simple code.
First HTML code
Title of the html document
Body of the html document
Complete html document
lthtmlgt ltheadgt ltTITLEgtLastname,
Firstnamelt/TITLEgt lt/headgt ltbodygt
ltH1gtWelcome to My Homepage.lt/H1gt
lt/bodygt lt/htmlgt
  • HTML document
  • Consists of tags
  • Tags - core building block of HTML
  • marks the presence of an element
  • marks the start and end of an element
  • Two-sided tags vs. single-sided tags
  • General syntax for two-sided tags
  • lttaggt content lt/taggt

More about tags
  • special terms surrounded by angle brackets
  • can be upper, lower or mixed case
  • ltTITLEgt Math 279 lt/TITLEgt
  • lttitlegt Math 279 lt/titlegt
  • ltTitLegt Math 279 lt/tiTlEgt
  • are all ok
  • most tags come in pairs, some dont

HTML tags
  • ltHTMLgt lt/HTMLgt
  • tells browser that file contains HTML-coded
  • Anything between these two tags makes up the
    document content, including all other elements,
    text, and comments

The Structure of an HTML File
  • An HTML document is divided into two main
    elements the head and the body
  • head element contains info about the document,
    for example, the document title or the keywords
  • ltHEADgt lt/HEADgt represents the head tags
  • The content of the head element is not displayed
    within the Web page

Title tags
  • ltTITLEgt lt/TITLEgt
  • used inside ltHEADgt lt/HEADgt
  • identify document title
  • displayed in the title bar at top of browser
  • identifies your page for search engines

Body tags
  • ltBODYgt lt/BODYgt
  • start and end the actual contents (body)
  • The body element contains all of the content to
    appear on the Web page
  • HTML, HEAD, TITLE and BODY are four most basic
    tags in any html document
About PowerShow.com