生物資訊程式語言應用 part 2 html. 2 principle of programming interface with pc english...
Post on 21-Dec-2015
227 views
TRANSCRIPT
生物資訊程式語言應用生物資訊程式語言應用 Part 2Part 2
HTMLHTML
22
Principle of ProgrammingInterface with PC
English
Japanese
Chinese
Machine Code
Compiler / Interpreter
C++
Perl
Assembler
Machine Code
II KK MM33
Web Foundation
44
World Wide Web
WWW comprises software (Web server and browser) and data (Web sites)
Client Side
JavaScriptVBScriptDHTML
Java Applets
Server Side
CGIASP
Java Servlets
HTML, XML, ...
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 HTMLTags
Text 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>
66
How HTML is Displayed
Browser Command
HTML Display
Http protocol(HyperText Transfer Protocol)
Text & binary data
render
HTML URL:http://www.google.com
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
88
How HTML is Displayed – from client site
HTML Browser Command
URL:c:\my_page.html
HTML Display
User
Client Site
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 form
HTTP specifies how clients request data, and how servers respond to these requests.
See also, http://www.w3.org/Protocols/
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.
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 /.
ToolsServer platform
Apache
Dynamic programPHP
DatabaseMySQL
HTML editorMacromedia Dreamweaver 8
1212
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
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
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
Introduce Dreamweaver
1616
視覺化的面板群組
標籤式版面下拉式選單
程式碼
網頁內容
屬性欄
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=P53
http://www.google.com.tw/search?q=P53
NCBI, EBI, Uniprot ….
1717
PracticePracticeLink to NCBI by words.
Link to EBI by picture.
Link to UniProt by a part of the picture.
1818
Insert table
1919
PracticePractice紅字 ,底線 ,藍底藍字 ,粗體 ,紅底
2020
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
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.
Inline stylesheet output
2323
CSSInline stylesheet
Embedded stylesheet<style type="text/css"><!--body{color: #000;}--></style>
Imported stylesheet
Linked stylesheetYou need to construct a CSS file first
<link rel=stylesheet type="text/css" href="style.css">
Let us discuss the CSS by Dreamweaver!
2424
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
Form
2626
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 。
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.
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=" 送出 " />
PracticePractice
30303030
Input: Output:
By PHP, Perl or ASP…
Frames Page
3131
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.htm
http://www.mastertemplates.com/
3232
phpMyAdmin & MySQL
3333
phpMyAdmin & MySQL (con.)
3434
database
You can create a database here.
Insert table
3535
table
Tablestructure
Tool bar
Create table
Insert table(con.)
3636
attribute
Insert table(con.)
3737
SQL
Structure view