1. HTML

2. Principle of Programming  Interface with PC 2 English Japanese Chinese Machine Code Compiler / Interpreter C++ Perl Assembler Machine Code

3. 3

4. World Wide Web  WWW comprises software (Web server and browser) and data (Web sites) 4 Client Side JavaScript VBScript DHTML Java Applets Server Side CGI ASP Java Servlets HTML, XML,...

5. H yper T ext M arkup L anguage  Markup Language: to format text and information for display by a Web browser  Vs. C, C++: procedural language, for performing actions  Main Components of HTML  Tags  Text and information 5 Bioinformatics Bioinformatics Bioinformatics Bioinformatics

6. How HTML is Displayed 6 Browser Command HTML Display Http protocol (HyperText Transfer Protocol) Text & binary data render HTML URL:http://www.google.com

7. How HTML is Displayed – from remote site 7 HTML Display User Browser Command URL:http://www.yahoo.com Remote Remote Web Server Client Site DB HTML CGI ASP PHP … http request http response

8. How HTML is Displayed – from client site 8 HTML Browser Command URL:c:\my_page.html HTML Display User Client Site

9. HTTP: Hypertext Transfer Protocol  HTTP is behind every request for a web document or graph, every click of a hypertext link, and every submission of a form  HTTP specifies how clients request data, and how servers respond to these requests. 9 See also, http://www.w3.org/Protocols/

10. Why study HTTP ?  Understand the interaction between web clients ( browsers, robots, search engines, etc.) and web servers.  Manually query web servers and receive low-level information that typical web browsers hide from the user.  can better understand the configuration and capabilities of a particular server  debug configuration errors with the server or programming errors in programs invoked by the web server.  Hacking !  Streamline web services to make better use of the protocol. 10

11. HTTP Transactions  Requests  Given the following URL: http://www.google.com:80/ the browser interprets the URL as follows:  http://  Use HTTP, the Hypertext Transfer Protocol.  www.google.com  Contact a computer over the network with the hostname of www.google.com.  :80  Connect to the computer at port 80. The port number can be any legitimate IP port number: 1 through 65535,  /  Anything after the hostname and optional port number is regarded as a document path. In this example, the document path is /. 11

12. Tools  Server platform  Apache  Dynamic program  PHP  Database  MySQL  HTML editor  Macromedia Dreamweaver 8 12

13. Introduction for Appserv  http://www.appservnetwork.com/ http://www.appservnetwork.com/  AppServ 2.5.9  Apache 2.2.4  PHP 5.2.3  MySQL 5.0.45  phpMyAdmin-2.10.2  http://vawidea.org/php%20bible/ http://vawidea.org/php%20bible/  http://www.jollen.org/php/ http://www.jollen.org/php/ 13

14. Mapping  c:\appserv\www\ is the document of the apache server platform.  This document can map to then URL:  http://localhost/webpage/  c:\appserv\www\webpage\  http://192.168.0.121/webpage/  http://127.0.0.1/webpage/

15. HTML file structure  web page title statement ……. 15 Practice Output: hello world! http://localhost/html_practice/helloworld.html

16. CSS ( Cascading Style Sheet )  Focus on formatting and presenting information  Specifying the presentation of a Web page  Fonts, spacing, margins, …  Simplifying the maintenance and modifying cost of a document’s layout 16

17. CSS Inline stylesheet 17 The style attribute specifies the style for an element. Some style properties are font-size and color.

18. Inline stylesheet output 18

19. CSS  Inline stylesheet  Embedded stylesheet   Imported stylesheet  Linked stylesheet  You need to construct a CSS file first   Let us discuss the CSS by Dreamweaver! 19