HTML

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

3

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

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

How HTML is Displayed 6 Browser Command HTML Display Http protocol (HyperText Transfer Protocol) Text & binary data render HTML URL:

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

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

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,

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

HTTP Transactions  Requests  Given the following URL: the browser interprets the URL as follows:   Use HTTP, the Hypertext Transfer Protocol.   Contact a computer over the network with the hostname of  :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

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

Introduction for Appserv   AppServ  Apache  PHP  MySQL  phpMyAdmin  

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

HTML file structure  web page title statement ……. 15 Practice Output: hello world!

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

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

Inline stylesheet output 18

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