Document

生物資訊程式語言應用
Part 2
HTML
Principle of Programming
Interface with PC
Compiler / Interpreter
English
C++
Machine
Code
Japanese
Chinese
Perl
Assembler
Machine Code
2
Web Foundation
3
I K M
World Wide Web
WWW comprises software (Web server
and browser) and data (Web sites)
HTML, XML, ...
Client Side
Server Side
JavaScript
VBScript
DHTML
Java Applets
CGI
ASP
Java Servlets
4
HyperText Markup Language
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
<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>
5
How HTML is Displayed
Http protocol
(HyperText Transfer Protocol)
Browser Command
HTML
URL:http://www.google.com
HTML Display
render
Text & binary data
6
How HTML is Displayed – from remote site
HTML
CGI
ASP
PHP
…
http request
Browser Command
URL:http://www.yahoo.com
User
http response
DB
HTML Display
Remote
Web Server
Client Site
7
How HTML is Displayed – from client site
HTML
Browser Command
URL:c:\my_page.html
User
HTML Display
Client Site
8
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/
9
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.
10
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 /.
11
Tools
Server platform
Apache
Dynamic program
PHP
Database
MySQL
HTML editor
Macromedia Dreamweaver 8
12
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
Mapping
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/
HTML file structure
<html>
<head>
<title>web page title</title>
</head>
<body>
statement
…….
</body>
</html>
Practice
Output: hello world!
http://localhost/html_practice/helloworld.html
15
Introduce Dreamweaver
下拉式選單
標籤式版面
視覺化的面
板群組
程式碼
網頁內容
屬性欄
16
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 ….
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
The
</head>
<body>
style attribute specifies the style for an
element. Some style properties are font-size and
color.
<p>This text does not have any style applied to it.</p>

-->
-->
it 20pt.
<p style = "font-size: 20pt; color: #0000ff">
This text has the <em>font-size</em> and
<em>color</em> styles applied to it, making it
20pt. and blue.</p>
</body>
</html>
22
Inline stylesheet output
23
CSS
Inline stylesheet
Embedded stylesheet
<style type="text/css">
<!-body{color: #000;}
-->
</style>
Imported stylesheet
Linked 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!
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
籃球<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/option
Select/option
<select name=fruit>
<option value=“1”>研究所</option>
<option value=“2” selected>大學</option>
<option value=“3”>高中</option>
</select>
<input type="submit" name="submit" value="送出" />
Practice
Input:
Output:
By PHP, Perl or ASP…
30
Frames Page
31
Free template
Free 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/
32
phpMyAdmin & MySQL
33
phpMyAdmin & MySQL (con.)
database
You can create a database here.
34
Insert table
Tool bar
Table
structure
table
Create table
35
Insert table(con.)
attribute
36
Insert table(con.)
SQL
Structure
view
37

Download Report