1 / 37

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

生物資訊程式語言應用 Part 2. HTML. Compiler / Interpreter. English. C++. Machine Code. Perl. Japanese. Chinese. Assembler. Machine Code. Principle of Programming. Interface with PC. Web Foundation. HTML, XML,. Client Side. Server Side. JavaScript VBScript DHTML Java Applets. CGI ASP

rhett
Télécharger la présentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

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

  3. Web Foundation

  4. HTML, XML, ... Client Side Server Side JavaScript VBScript DHTML Java Applets CGI ASP Java Servlets World Wide Web • WWW comprises software (Web server and browser) and data (Web sites)

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

  6. Http protocol (HyperText Transfer Protocol) How HTML is Displayed Browser Command HTML URL:http://www.google.com HTML Display render Text & binary data

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

  8. How HTML is Displayed – from client site HTML Browser Command URL:c:\my_page.html User HTML Display 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, http://www.w3.org/Protocols/

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

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

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

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

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

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

  17. 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 ….

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

  19. Insert table

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

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

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

  23. Inline stylesheet output

  24. 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!

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

  26. Form

  27. 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。

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

  29. 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="送出" />

  30. Practice Input: Output: By PHP, Perl or ASP… 30

  31. Frames Page

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

  33. phpMyAdmin & MySQL

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

  35. Insert table Tool bar Table structure table Create table

  36. Insert table(con.) attribute

  37. Insert table(con.) SQL Structure view

More Related