1 / 61

Overview of Web Programming Fundamentals of Static Web Programming (HTML) Brian Kwan IEE, MCSE, MCSE+I, MCDBA briankwan

Overview of Web Programming Fundamentals of Static Web Programming (HTML) Brian Kwan IEE, MCSE, MCSE+I, MCDBA briankwan@iee.org. Table of Contents. Overview of web programming What is web programming? What are the languages used for web programming? Basics of HTML

mason
Download Presentation

Overview of Web Programming Fundamentals of Static Web Programming (HTML) Brian Kwan IEE, MCSE, MCSE+I, MCDBA briankwan

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Overview of Web Programming Fundamentals of Static Web Programming (HTML)Brian KwanIEE, MCSE, MCSE+I, MCDBAbriankwan@iee.org

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

  3. Table of Contents • Creating tables • Setting Page’s Body properties • Creating frames • Enabling with Sound • How to publish your page • Lab sessions • Reference URL

  4. What is Web Programming? • Web browsing becomes our usual practice Netscape Internet Explorer

  5. What is Web Programming? For example: search engines Http://www.altavista.com Http://www.yahoo.com

  6. What is Web Programming? For examples: online newspaper Http://www.appledaily.com.hk Http://www.the-sun.com.hk

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

  8. 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?

  9. Web browser Web browser submit When you key in the address... HTML/DHTML Request: Http://www.hkma.org.hk/ Static HTML/DHTML page write Submit query read Web Server Database HTML/DHTML page Interactive

  10. 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 clients • Web Client: • reads in the homepage (HTML page), parse it and display it with appropriate layout

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

  12. Common terminology (命名) • Web server: HTTP (Hyper-text Transfer Protocol) server • Web client: HTTP client, web browsers, Netscape, Internet Explorer, Opera…etc • Web page : HTML (Hyper-text Markup Language) page, home page, website, …etc • Web address: URL (Universal Resource Locator), link

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

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

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

  16. 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! • Flag (or tag) is the heart of HTML language!

  17. 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 command • Setting italic fonts, bigger fonts,….are all like this!

  18. Flag format • Flags begin with a less-than sign < and end with a great-than sign > • Inside the < > side is the flag • Learning HTML is learning that flag to perform whatever command you want to do • Example: • <B> HelloWorld </B>

  19. Some simple flags <HR> This command gives you a line across the page <BR> This BReaks the text and starts it again on the next line <P> This stands for Paragraph. It does the exact same thing as the <BR> above except this flag skips a line

  20. Writing your first page • Two items are important to every page: • <HTML>: denoting that this is an HTML document • <TITLE> … </TITLE>: writing the Title of your page here • </HTML>: end the page with the pair-up of the initial <HTML>

  21. Writing your first page • So, your sample first page could be like this: <HTML> <TITLE>My first page</TITLE><B>HelloWorld</B> <I>A very nice page </I> </HTML> • Save this as a .html (or .htm) file, and open it with a web browser to see the effect

  22. Manipulating text in HTML: size • Heading commands: <H1> to <H6> • <H1>: The largest heading size • <H6>: The smallest heading size • Font size commands: <FONT SIZE> • 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: <Font Size=“+3”> … </Font> • We call “Size” the attribute of the Font command • Two other attributes related to the Font command: Color and Face

  23. Manipulating text in HTML: alignment • Centering text: • <Center> … </Center> • Example: • <Center> This is a statement in the center of the line </Center> • Aligning to the right: • Use <P> with ALIGN attribute • <P ALIGN=“Right”> …. <P>

  24. Creating links to other pages • Example: • <A HREF=“http://www.hkma.org.hk/”> Click here to go to HKMA homepage </A> • 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

  25. 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) • <A HREF=“#bottom”> Click here to scroll down</A> • 2. Set a point for destination • <A NAME=“bottom”> • ..... Other html codes

  26. 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 link. • 3. Try to keep your codeword short. • Page that uses page links: • e.g. Guestbook ....

  27. Allow people to reach you by email • Example: • <A HREF="mailto:hkma@hkma.org.hk">Click Here To Write Me</A> • Similar to the link created to other pages • Change the “http://” to “mailto”

  28. Placing images on the page • Example: • <IMG SRC="image.gif”> • 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 • image.gif: This is the name of the image

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

  30. 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 formats: • BMP > GIF > JPEG

  31. Putting link and image together • Image link? • Actually, just put the <A> and <IMG> together like this example: • <A href=“http://www.hkma.org.hk/”> <IMG SRC=“logo.gif”> </A>

  32. More on images • Align an image to the right: • <IMG ALIGN="right" SRC="image.gif"> • When text goes along with images, you can specify the text alignment to the image • top: <IMG ALIGN="top" SRC=”1.gif"> top text • middle: <IMG ALIGN=”middle" SRC=”1.gif"> middle text • bottom: <IMG ALIGN=”bottom" SRC=”1.gif"> bottom text

  33. More on images • Change the size of the images: • Image is made up of pixels: 100 x 100 pixels • You can view the image’s information in any image editor • You can specify a new Height x Width combination to the image to display out • <IMG HEIGHT = “##” WIDTH = “##” SRC=“1.gif>

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

  35. Tables in HTML • Use the <TABLE> … </TABLE> command • A simple table could be like this: 2 x 2 table <TABLE> <CAPTION> This is the table caption</CAPTION> <TR> <TD> Row 1, Col 1 </TD> <TD> Row 1, Col 2</TD> </TR> <TR> <TD> Row 2, Col 1 </TD> <TD> Row 2, Col 2</TD> </TR> </TABLE>

  36. Tables in HTML • <TABLE> .. </TABLE>: Starts and ends the table • <TR> .. </TR>: Starts and ends a table row • <TD> .. </TD>: Starts and ends a cells in the table • Some attributes with TABLE command: • <TABLE Border = “1” CellSpacing=“1” CellPadding=“1”> .. </TABLE> • Border: How large the border should be • CellSpacing: Amount of space between cells • CellPadding: Amount of space between cell border and cell content

  37. Effects with Table A calendar in Table form A table in another table

  38. Effects with Table Image in the cells of the table Putting colors to the table

  39. Background in HTML • The command <BODY> to change the background immediately follows the <TITLE> command • Change the background color with: • <BODY BGCOLOR=“#FF0000”> .. </BODY> • Change the background wallpaper with: • <BODY BACKGROUND=“image.gif”> .. </BODY>

  40. Frame • What is a frame? See this obvious example:

  41. Frame • 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

  42. Frame <HTML> <TITLE>First Frame Page</TITLE> <FRAMESET COLS="50%,50%"> <FRAME SRC=”left.htm"> <FRAME SRC=”right.htm"> </FRAMESET> </HTML> • 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 splitting • Do you know how to make the demo page now?

  43. 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 <A> command) • We have to set the NAME in the <FRAME> and set the TARGET in the <A> command

  44. More on Frame <HTML> <TITLE>First Frame Page</TITLE> <FRAMESET COLS="50%,50%"> <FRAME NAME=“LEFT” SRC=”left.htm"> <FRAME NAME=“RIGHT” SRC=”right.htm"> </FRAMESET> </HTML> • In the anchor command on the left page, we specify what to display on the RIGHT Frame upon the mouse click: <A HREF="http://www.hkma.org.hk” TARGET=”RIGHT">

  45. Common homepages with Frame Http://www.mingpao.com/

  46. Common homepages with Frame Http://www.easyfinder.com.hk

  47. Common homepages with Frame Htttp://www.freethemes.com

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

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

  50. Enable your page with Sound • So, with the helper application, you can add code like: • <A HREF="http://www.yoursite.com/filename.wav"> Click Here</A> • It is actually a simple link! • If you use this method (helper application), you assume that the user has the appropriate player

More Related