Overview of Web Programming Fundamentals of Static Web Programming HTML Brian Kwan IEE, MCSE, MCSE I - PowerPoint PPT Presentation


PPT – Overview of Web Programming Fundamentals of Static Web Programming HTML Brian Kwan IEE, MCSE, MCSE I PowerPoint presentation | free to download - id: 53c78-ZDc1Z


The Adobe Flash plugin is needed to view this content

Get the plugin now

View by Category
About This Presentation

Overview of Web Programming Fundamentals of Static Web Programming HTML Brian Kwan IEE, MCSE, MCSE I


Some simple flags HR This command gives you a line across the page ... with a particular background color or a specified wallpaper image. On the page content: ... – PowerPoint PPT presentation

Number of Views:315
Avg rating:3.0/5.0
Slides: 62
Provided by: personalI3


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

Title: Overview of Web Programming Fundamentals of Static Web Programming HTML Brian Kwan IEE, MCSE, MCSE I

Overview of Web Programming Fundamentals of
Static Web Programming (HTML)Brian KwanIEE,
MCSE, MCSEI, MCDBAbriankwan_at_iee.org
Table of Contents
  • Overview of web programming
  • What is web programming?
  • What are the languages used for web programming?
  • Basics of HTML
  • Adjusting Text size and alignment
  • Creating links and mailto links
  • Placing an image to the page

Table of Contents
  • Creating tables
  • Setting Pages Body properties
  • Creating frames
  • Enabling with Sound
  • How to publish your page
  • Lab sessions
  • Reference URL

What is Web Programming?
  • Web browsing becomes our usual practice

Internet Explorer
What is Web Programming?
For example search engines
What is Web Programming?
For examples online newspaper
What is web programming?
Other services and information source
Hong Kong Yellow Page Http//www.yp.com.hk
Hong Kong government Http//www.info.gov.hk
What is web programming?
  • From the web pages, you may observe
  • Textual information
  • Scrolling text box
  • Graphics (JPEG, GIF, Animated GIF)
  • Query Form (asking for users input for
    authentication or whatever)
  • Information organized in table form, .
  • ...
  • What is behind the scene?

When you key in the address...
HTML/DHTML Request Http//www.hkma.org.hk/
Submit query
Web Server
The roles of web server and client
  • Web Server
  • provides static homepage
  • access (retrieve, and store) information from/to
    the database and generate dynamic homepage to web
  • Web Client
  • reads in the homepage (HTML page), parse it and
    display it with appropriate layout

So, what is web programming?
  • Write programs to enable interactions between web
    clients and web servers
  • To be more concrete, your programs are
    responsible for
  • deciding the layout of the page in advance
  • creating web pages on-the-fly in responding
    users input
  • recording/retrieving users information to/from
    the database

Common terminology (??)
  • Web server HTTP (Hyper-text Transfer
    Protocol) server
  • Web client HTTP client, web browsers,
    Netscape, Internet Explorer, Operaetc
  • Web page HTML (Hyper-text Markup Language)
    page, home page, website, etc
  • Web address URL (Universal Resource
    Locator), link

What programming languages are used?
  • Many programming languages could be used for web
  • Operate on the client side
  • HTML (Hyper-text Markup Language)
  • Java applet
  • Java Script
  • VB Script
  • ...

What programming languages are used?
  • Operate on the server side
  • ASP (Active Server Pages)
  • CGI
  • Perl
  • Java Application
  • Database Access Object
  • COM Object
  • We start with the most basic one. HTML

Introduction HTML
  • HTML HyperText Markup Language
  • It works in a very simple, logical format
  • It is written with TEXT and is saved as a HTML
    file (with extension .html or .htm)
  • The browser reads the HTML file just like you
    reads it top to bottom, left to right

Introduction HTML
  • Remember what you have observed in the first few
    web pages?
  • They are mostly formed with HTML
  • What you use to set certain sections apart bigger
    text, smaller text, bold text, is a series of
  • Flag (or tag) is the heart of HTML language!

Flags in HTML
  • Think of flags as commands
  • For example, you want a line of text to be bold
  • Put a flag at the exact point before the letter
    you want to bold
  • Put another flag to indicate the end of the bold
  • Setting italic fonts, bigger fonts,.are all like

Flag format
  • Flags begin with a less-than sign lt and end with
    a great-than sign gt
  • Inside the lt gt side is the flag
  • Learning HTML is learning that flag to perform
    whatever command you want to do
  • Example
  • ltBgt HelloWorld lt/Bgt

Some simple flags
  • ltHRgt This command gives you a line across the
  • ltBRgt This BReaks the text and starts it again
    on the next line
  • ltPgt This stands for Paragraph. It does the exact
    same thing as the ltBRgt above except this
    flag skips a line

Writing your first page
  • Two items are important to every page
  • ltHTMLgt denoting that this is an HTML document
  • ltTITLEgt lt/TITLEgt writing the Title of your
    page here
  • lt/HTMLgt end the page with the pair-up of the
    initial ltHTMLgt

Writing your first page
  • So, your sample first page could be like this
  • ltHTMLgt
  • ltTITLEgtMy first pagelt/TITLEgtltBgtHelloWorldlt/Bgt
  • ltIgtA very nice page lt/Igt
  • lt/HTMLgt
  • Save this as a .html (or .htm) file, and open it
    with a web browser to see the effect

Manipulating text in HTML size
  • Heading commands ltH1gt to ltH6gt
  • ltH1gt The largest heading size
  • ltH6gt The smallest heading size
  • Font size commands ltFONT SIZEgt
  • There are 12 font size commands available to you
    6 through 1 and -1 through -6
  • 6 is the largest, while -6 is the smallest
  • Use like this ltFont Size3gt lt/Fontgt
  • We call Size the attribute of the Font command
  • Two other attributes related to the Font command
    Color and Face

Manipulating text in HTML alignment
  • Centering text
  • ltCentergt lt/Centergt
  • Example
  • ltCentergt This is a statement in the center of the
    line lt/Centergt
  • Aligning to the right
  • Use ltPgt with ALIGN attribute
  • ltP ALIGNRightgt . ltPgt

Creating links to other pages
  • Example
  • ltA HREFhttp//www.hkma.org.hk/gt Click here to
    go to HKMA homepage lt/Agt
  • A Stands for anchor
  • HREF Stands for Hypertext reference
  • http//www.hkma.org.hk/ Full address of the
    link to go
  • Click here. the Text you want to display out
  • /A Ends the entire link command

Creating page links
  • When you want to jump within a page by a simple
    click, you can use page links
  • Two steps involved
  • 1. Set a point for click (source)
  • ltA HREFbottomgt Click here to scroll downlt/Agt
  • 2. Set a point for destination
  • ltA NAMEbottomgt
  • ..... Other html codes

Creating page links
  • Notes
  • 1. We call the word followed by HREF the codeword
  • 2. There is a sign in the front of the
    codeword. You need to denote it as an internal
  • 3. Try to keep your codeword short.
  • Page that uses page links
  • e.g. Guestbook ....

Allow people to reach you by email
  • Example
  • ltA HREF"mailtohkma_at_hkma.org.hk"gtClick Here To
    Write Melt/Agt
  • Similar to the link created to other pages
  • Change the http// to mailto

Placing images on the page
  • Example
  • ltIMG SRC"image.gifgt
  • IMG Stands for image. It tells the browser that
    an image will be here
  • SRC Source. This is an attribute of the IMG
    command. It tells the browser where to find the
  • image.gif This is the name of the image

A note on Image Format
  • Three basic formats in WWW
  • .gif The format is invented by Compuserve, and
    it is very popular. It is a series of colored
    picture elements, or dots, known as pixels, that
    line up to make a picture.
  • .jpeg or .jpg There are two names to denote this
    format because of the PC and MAC formats allowing
    3 and 4 letters after the dot. JPEG is an acronym
    for Join Photographic Equipment Group, which is
    the organization that invented the format.

A note on Image Format
  • .bmp This is a bitmap. You are not supposed to
    put a bitmap as an image although Internet
    Explorer supports this.
  • A general feel on the size of these three
  • BMP gt GIF gt JPEG

Putting link and image together
  • Image link?
  • Actually, just put the ltAgt and ltIMGgt together
    like this example
  • ltA hrefhttp//www.hkma.org.hk/gt ltIMG
    SRClogo.gifgt lt/Agt

More on images
  • Align an image to the right
  • ltIMG ALIGN"right" SRC"image.gif"gt
  • When text goes along with images, you can specify
    the text alignment to the image
  • top ltIMG ALIGN"top" SRC1.gif"gt top text
  • middle ltIMG ALIGNmiddle" SRC1.gif"gt middle
  • bottom ltIMG ALIGNbottom" SRC1.gif"gt bottom

More on images
  • Change the size of the images
  • Image is made up of pixels 100 x 100 pixels
  • You can view the images information in any image
  • You can specify a new Height x Width combination
    to the image to display out

A little bit advanced.
  • Starting from this page, some advanced skills in
    HTML are introduced
  • Table
  • Background
  • Frame
  • Sound

Tables in HTML
  • Use the ltTABLEgt lt/TABLEgt command
  • A simple table could be like this 2 x 2 table
  • ltTABLEgt
  • ltCAPTIONgt This is the table captionlt/CAPTIONgt
  • ltTRgt
  • ltTDgt Row 1, Col 1 lt/TDgt ltTDgt Row 1, Col 2lt/TDgt
  • lt/TRgt
  • ltTRgt
  • ltTDgt Row 2, Col 1 lt/TDgt ltTDgt Row 2, Col 2lt/TDgt
  • lt/TRgt
  • lt/TABLEgt

Tables in HTML
  • ltTABLEgt .. lt/TABLEgt Starts and ends the table
  • ltTRgt .. lt/TRgt Starts and ends a table row
  • ltTDgt .. lt/TDgt Starts and ends a cells in the
  • Some attributes with TABLE command
  • ltTABLE Border 1 CellSpacing1
    CellPadding1gt .. lt/TABLEgt
  • Border How large the border should be
  • CellSpacing Amount of space between cells
  • CellPadding Amount of space between cell border
    and cell content

Effects with Table
A calendar in Table form
A table in another table
Effects with Table
Image in the cells of the table
Putting colors to the table
Background in HTML
  • The command ltBODYgt to change the background
    immediately follows the ltTITLEgt command
  • Change the background color with
  • ltBODY BGCOLORFF0000gt .. lt/BODYgt
  • Change the background wallpaper with
  • ltBODY BACKGROUNDimage.gifgt .. lt/BODYgt

  • What is a frame? See this obvious example

  • Using frame, you could represent several HTML
    files in one page
  • To coordinate the individual HTML files, you need
    a main HTML file telling the browser how many
    frames and in what orientation they are

  • ltHTMLgt
  • ltTITLEgtFirst Frame Pagelt/TITLEgt
  • ltFRAMESET COLS"50,50"gt
  • ltFRAME SRCleft.htm"gt
  • ltFRAME SRCright.htm"gt
  • lt/FRAMESETgt
  • lt/HTMLgt
  • FRAMESET starts a frame page
  • COLS Set the coming specified frames in columns
  • FRAME SRC denotes the source of the frame pages
  • Similarly, you can have ROWS for horizontal
  • Do you know how to make the demo page now?

More on Frame
  • Suppose we have two frames (left frame and right
    frame). We want to display a page on the right
    frame upon a click on the left frame (with the
    ltAgt command)
  • We have to set the NAME in the ltFRAMEgt and set
    the TARGET in the ltAgt command

More on Frame
  • ltHTMLgt
  • ltTITLEgtFirst Frame Pagelt/TITLEgt
  • ltFRAMESET COLS"50,50"gt
  • ltFRAME NAMELEFT SRCleft.htm"gt
  • ltFRAME NAMERIGHT SRCright.htm"gt
  • lt/FRAMESETgt
  • lt/HTMLgt
  • In the anchor command on the left page, we
    specify what to display on the RIGHT Frame upon
    the mouse click
  • ltA HREF"http//www.hkma.org.hk TARGETRIGHT"gt

Common homepages with Frame
Common homepages with Frame
Common homepages with Frame
Enable your page with Sound
  • Sounds on the Net are a great thing!
  • At least two ways in offering sounds to your
  • helper application
  • embedding
  • EMBED is not standard HTML, it can only be
    understood by Netscape browser

Enable your page with Sound
  • Helper application
  • programs that are attached to the Netscape
  • Options -gt Preference -gt Helper Applications
  • When a specified file type is enabled, the steps
    are like
  • 1. The browser get the sound file and downloads
  • 2. Once the download is complete, the helper
    application is invoked
  • 3. The browser loads the sound file into the
  • 4. The application plays the sound file

Enable your page with Sound
  • So, with the helper application, you can add code
  • ltA HREF"http//www.yoursite.com/filename.wav"gt
    Click Herelt/Agt
  • It is actually a simple link!
  • If you use this method (helper application), you
    assume that the user has the appropriate player

Enable your page with Sound
  • Embedding a sound means
  • Include sound commands in the HTML page
  • Use a plug-in to run it
  • Plug-ins are programs that help your browser to
    perform at a higher level
  • Similar to helper application, except that it
    launches within the browser, and not a separate

Enable your page with Sound
  • MIDI Musical Instrument Digital Interface
  • Format for embedding
  • lt/EMBEDgt

After embedding, you will see a control like
What you can create so far?
  • On general layout
  • Display in frames
  • Display with a particular background color or a
    specified wallpaper image
  • On the page content
  • Display textual information with different font
    sizes, font color, and font faces
  • Display image (JPEG, GIF)
  • Provide links to other pages or provide links to
    mail information to a specified email address
  • Display information (either image or textual
    information) in table form

How to publish your page?
  • How? Just copy your HTML files (and other
    resource files like .jpg, .gif, ... ) to the
    appropriate directory of the Web Server
  • This process is called uploading
  • Use software like WSFTP32, ... for uploading
  • You can publish your pages to your account in an
    ISP. The ISP will charge you some price in
    hosting the pages.

Learn more from your browsers!
  • View the source code of the web site by
  • If you are a Netscape user
  • Menu --gt View --gt Document Source
  • If you are a Internet Explorer user
  • Menu --gt View --gt View Source Code

Lab sessions
  • L1 Familiar yourself with the web browsers.
    Configure your web browsers (Internet Explorer or
  • What options to set?
  • L2 View the source code of several websites
  • http//www.yahoo.com/
  • http//www.appledaily.com.hk/
  • http//www.the-sun.com.hk/
  • L3 Open a text editor and type in the key-body
    of a HTML page. This includes ltHTMLgt ltTITLEgt.
    Enter some texts to adjust the size of the
    words/paragraph inside.

Lab sessions
  • L4 Create a page with links to the following
    sites http//www.info.gov.hk/
  • http//www.yp.com.hk/
  • http//www.the-sun.com.hk/
  • L4 Create Image links to a JPEG file, to a GIF
    file, adjust the size of the Image to see the
    effect in the browser
  • L5 Create a table of 5 x 5, adjust the Border,
    CellSpacing, CellPadding to see the effect in the
  • L6 Create a table of 2x2 within the (row1, col1)
    of another table of 5x5

Lab sessions
  • L7 Put images into each of the cells in a table
    of 2x2. Provide the images with links to other
  • L8 Create a frame page with two columns (left
    and right). In the left column, create another
    frame page with three rows. In the right column,
    create another frame page with two rows.

Reference URL
  • For demonstration
  • HKMA homepage http//www.hkma.org.hk/
  • Microsoft homepage http//www.microsoft.com/
  • Yahoo http//www.yahoo.com/
  • Altavista http//www.altavista.com/
  • Appledaily http//www.appledaily.com.hk/
  • The-Sun http//www.the-sun.com.hk/
  • YellowPages http//www.yp.com.hk/
  • Hong Kong government http//www.info.gov.hk/

Reference URL
  • Useful HTML links and resources
  • How the web works
  • http//www.webdeveloper.com/html/html_how_the_web_
  • HTML and others
  • http//www.htmlgoodies.com/

Reference software to download
  • Web browsers
  • Netscape http//netscape.home.com/
  • Internet Explorer http//www.microsoft.com/
  • Opera http//www.opera.com/
About PowerShow.com