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

生物資訊程式語言應用生物資訊程式語言應用 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 WebWWW comprises software (Web server and browser) and data (Web sites)

Client SideJavaScriptVBScriptDHTML

Java Applets

Server SideCGIASP

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

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 formHTTP 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=P53http://www.google.com.tw/search?q=P53NCBI, 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 6 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 18 19 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 stylesheetEmbedded stylesheet

<style type="text/css"></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

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.htmhttp://www.mastertemplates.com/

3232

phpMyAdmin & MySQL

3333

phpMyAdmin & MySQL (con.)

3434

database

You can create a database here.

Insert table

3535

tableTable

structure

Tool bar

Create table

Insert table(con.)

3636

attribute

Insert table(con.)

3737

SQL

Structure view

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

Documents

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