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

View by Category
About This Presentation
Title:

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

Description:

Lecture 6 Introduction to Web Programming – PowerPoint PPT presentation

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

less

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

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


1
Lecture 6 Introduction to Web Programming
2
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

3
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
    objectives
  • Hypertext lets you skip from one topic to another

4
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
    another
  • 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

5
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

6
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

7
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

8
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
    element

9
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)

10
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
later!
11
HTML Documents creation (step by step)
  • Step 3 save the file in your computer
  • File -gt Save As

12
HTML Documents creation (step by step)
  • Step 3 contd. save the file as .html or .htm
    file
  • 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
    want
  • Click on Save button
  • Now, double-click on the saved file to open it up
    as a web browsing page

13
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

14
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.

15
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
    /

16
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/

17
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

18
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.
19
First HTML code
Title of the html document
Body of the html document
Complete html document
20
Tags
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

21
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

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

23
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

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

25
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