生物資訊程式語言應用 Part 2
description
Transcript of 生物資訊程式語言應用 Part 2
![Page 1: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/1.jpg)
生物資訊程式語言應用生物資訊程式語言應用 Part 2Part 2
HTMLHTML
![Page 2: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/2.jpg)
22
Principle of ProgrammingInterface with PC
English
Japanese
Chinese
Machine Code
Compiler / Interpreter
C++
Perl
Assembler
Machine Code
![Page 3: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/3.jpg)
II KK MM33
Web Foundation
![Page 4: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/4.jpg)
44
World Wide WebWWW comprises software (Web server and browser) and data (Web sites)
Client SideJavaScriptVBScriptDHTML
Java Applets
Server SideCGIASP
Java Servlets
HTML, XML, ...
![Page 5: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/5.jpg)
55
HyperText Markup LanguageMarkup Language: to format text and information for display by a Web browser
Vs. C, C++: procedural language, for performing actions
Main Components of HTMLTagsText and information
<p><font size="20">Bioinformatics</font></p><p><strong>Bioinformatics</strong></p><p><em>Bioinformatics</em></p><blockquote> <p>Bioinformatics</p></blockquote><ol> <li>Bioinformatics</li></ol><ul> <li>Bioinformatics</li></ul>
![Page 6: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/6.jpg)
66
How HTML is Displayed
Browser Command
HTML Display
Http protocol(HyperText Transfer Protocol)
Text & binary data
render
HTML URL:http://www.google.com
![Page 7: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/7.jpg)
77
How HTML is Displayed – from remote site
HTML Display
User Browser Command
URL:http://www.yahoo.com
RemoteRemoteWeb ServerWeb Server
Client SiteClient Site
DBDB
HTMLCGIASPPHP…
http request
http response
![Page 8: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/8.jpg)
88
How HTML is Displayed – from client site
HTML Browser Command
URL:c:\my_page.html
HTML Display
User
Client Site
![Page 9: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/9.jpg)
99
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 formHTTP specifies how clients request data, and how servers respond to these requests.
See also, http://www.w3.org/Protocols/
![Page 10: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/10.jpg)
1010
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 serverdebug 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.
![Page 11: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/11.jpg)
1111
HTTP TransactionsRequests
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.
:80Connect 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 /.
![Page 12: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/12.jpg)
ToolsServer platform
Apache
Dynamic programPHP
DatabaseMySQL
HTML editorMacromedia Dreamweaver 8
1212
![Page 13: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/13.jpg)
Introduction for Appservhttp://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/
1313
![Page 14: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/14.jpg)
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
![Page 15: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/15.jpg)
HTML file structure<html>
<head><title>web page title</title></head>
<body> statement …….</body>
</html>
1515
PracticePracticeOutput: hello world!http://localhost/html_practice/helloworld.html
![Page 16: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/16.jpg)
Introduce Dreamweaver
1616
視覺化的面板群組標籤式版面下拉式選單
程式碼
網頁內容
屬性欄
![Page 17: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/17.jpg)
Hyperlink<a href=" http://myweb.ncku.edu.tw/">NCKU</a><a href=" http://myweb.ncku.edu.tw/"> <img src=“NCKU.gif></a>http://tw.search.yahoo.com/search?p=P53http://www.google.com.tw/search?q=P53NCBI, EBI, Uniprot ….
1717
![Page 18: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/18.jpg)
PracticePracticeLink to NCBI by words.Link to EBI by picture.Link to UniProt by a part of the picture.
1818
![Page 19: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/19.jpg)
Insert table
1919
![Page 20: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/20.jpg)
PracticePractice紅字 ,底線 ,藍底藍字 ,粗體 ,紅底
2020
![Page 21: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/21.jpg)
CSS(Cascading Style Sheet )Focus on formatting and presenting information
Specifying the presentation of a Web pageFonts, spacing, margins, …
Simplifying the maintenance and modifying cost of a document’s layout
2121
![Page 22: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/22.jpg)
CSS Inline stylesheet
2222
1 <?xml version = "1.0"?>2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">4 5 <!-- Fig. 6.1: inline.html -->6 <!-- Using inline styles -->7 8 <html xmlns = "http://www.w3.org/1999/xhtml">9 <head>10 <title>Inline Styles</title>11 </head>12 13 <body>14 15 <p>This text does not have any style applied to it.</p>16 17 <!-- The style attribute allows you to declare -->18 <!-- inline styles. Separate multiple styles -->19 <!-- with a semicolon. -->20 <p style = "font-size: 20pt">This text has the 21 <em>font-size</em> style applied to it, making it 20pt.22 </p>23 24 <p style = "font-size: 20pt; color: #0000ff">25 This text has the <em>font-size</em> and 26 <em>color</em> styles applied to it, making it27 20pt. and blue.</p>28 29 </body>30 </html>
The style attribute specifies the style for an element. Some style properties are font-size and
color.
![Page 23: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/23.jpg)
Inline stylesheet output
2323
![Page 24: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/24.jpg)
CSSInline stylesheetEmbedded stylesheet
<style type="text/css"><!--body{color: #000;}--></style>
Imported stylesheetLinked stylesheet
You need to construct a CSS file first<link rel=stylesheet type="text/css" href="style.css">
Let us discuss the CSS by Dreamweaver!2424
![Page 25: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/25.jpg)
PracticePracticeFirstly, 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
2525
![Page 26: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/26.jpg)
Form
2626
![Page 27: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/27.jpg)
Checkbox 籃球 <input type=“checkbox” name=“favor1" value=“ 籃球 "/> 網頁設計 <input type=“checkbox” name=“favor2" value=“ 網頁設計 "/> 看電影 <input type=“checkbox” name=“favor3" value=“ 看電影 "/> 聽音樂 <input type=“checkbox” name=“favor4" value=“ 聽音樂 "/> <input type=“submit” name=“submit” value=“ 送出 " />
You can get these strings when you checked the checkboxes.favor1 = 籃球favor2 = 網頁設計favor3 = 看電影favor4 = 聽音樂
Values will be transport to next page 。
![Page 28: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/28.jpg)
Radiobox 男 <input type=“radio” name=“sex” value=“ 男” /> 女 <input type=“radio” name=“sex” value=“ 女” /> <input type="submit" name="submit" value=" 送出 " />
You can only choose one Radio in the same name group.
![Page 29: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/29.jpg)
Select/optionSelect/option
<select name=fruit> <option value=“1”> 研究所 </option> <option value=“2” selected> 大學 </option> <option value=“3”> 高中 </option> </select> <input type="submit" name="submit" value=" 送出 " />
![Page 30: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/30.jpg)
PracticePractice
30303030
Input: Output:
By PHP, Perl or ASP…
![Page 31: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/31.jpg)
Frames Page
3131
![Page 32: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/32.jpg)
Free templateFree website download | Open Source web design
http://www.templateworkz.com/http://www.freelayouts.com/templates/display/templates/http://www.templatesweb.com/free_templates/index.htmhttp://www.mastertemplates.com/
3232
![Page 33: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/33.jpg)
phpMyAdmin & MySQL
3333
![Page 34: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/34.jpg)
phpMyAdmin & MySQL (con.)
3434
database
You can create a database here.
![Page 35: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/35.jpg)
Insert table
3535
tableTable
structure
Tool bar
Create table
![Page 36: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/36.jpg)
Insert table(con.)
3636
attribute
![Page 37: 生物資訊程式語言應用 Part 2](https://reader036.fdocuments.net/reader036/viewer/2022081512/56815592550346895dc36e39/html5/thumbnails/37.jpg)
Insert table(con.)
3737
SQL
Structure view