1. 生物資訊程式語言應用 Part 2 HTML

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

3. IKM 3 Web Foundation

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

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

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

7. 7 How HTML is Displayed – from remote site 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. 8 How HTML is Displayed – from client site HTML Browser Command URL:c:\my_page.html HTML Display User Client Site

9. 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. See also, http://www.w3.org/Protocols/

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

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

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

13. Introduction for Appserv 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://www.jollen.org/php/ 13

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

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

16. Introduce Dreamweaver 16 視覺化的面 板群組 標籤式版面下拉式選單 程式碼 網頁內容 屬性欄

17. Hyperlink NCKU http://tw.search.yahoo.com/search?p=P53 http://www.google.com.tw/search?q=P53 NCBI, EBI, Uniprot …. 17

18. Practice Link to NCBI by words. Link to EBI by picture. Link to UniProt by a part of the picture. 18

19. Insert table 19

20. Practice 紅字, 底線, 藍底 藍字, 粗體, 紅底 20

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

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

23. Inline stylesheet output 23

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

25. Practice Firstly, you need to develop two CSS styles in css_practice.css. style1 : 紅字, 底線, 藍底 style2 : 藍字, 粗體, 紅底 Then, please to build a HTML file. Lastly, you have to construct a table by using the two CSS styles 25

26. Form 26

27. Checkbox 籃球 網頁設計 看電影 聽音樂 You can get these strings when you checked the checkboxes. favor1 = 籃球 favor2 = 網頁設計 favor3 = 看電影 favor4 = 聽音樂 Values will be transport to next page 。

28. Radiobox 男 女 You can only choose one Radio in the same name group.

29. Select/option 研究所 大學 高中

30. Practice 3030 Input:Output: By PHP, Perl or ASP…

31. Frames Page 31

32. Free template Free website downloadFree website download | Open Source web designOpen Source web design http://www.templateworkz.com/ http://www.freelayouts.com/templates/display/templates/ http://www.templatesweb.com/free_templates/index.htm http://www.mastertemplates.com/ 32

33. phpMyAdmin & MySQL 33

34. phpMyAdmin & MySQL (con.) 34 database You can create a database here.

35. Insert table 35 table Table structure Tool bar Create table

36. Insert table(con.) 36 attribute

37. Insert table(con.) 37 SQL Structure view