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

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

IKM 3 Web Foundation

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 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 How HTML is Displayed Browser Command HTML Display Http protocol (HyperText Transfer Protocol) Text & binary data render HTML URL:

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

8 How HTML is Displayed – from client site 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. See also,

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

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

Introduction for Appserv AppServ Apache PHP MySQL phpMyAdmin

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

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

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

Hyperlink NCKU NCBI, EBI, Uniprot …. 17

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

Insert table 19

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

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

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

Inline stylesheet output 23

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

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

Form 26

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

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

Select/option 研究所 大學 高中

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

Frames Page 31

Free template Free website downloadFree website download | Open Source web designOpen Source web design

phpMyAdmin & MySQL 33

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

Insert table 35 table Table structure Tool bar Create table

Insert table(con.) 36 attribute

Insert table(con.) 37 SQL Structure view