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

1
Lecture 6Introduction 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