Bioinformatics Programming 1 EE, NCKU Tien-Hao Chang (Darby Chang)

Outline HTML (HyperText Markup Language) CSS (Cascading Style Sheets) Javascript CGI (Common Gateway Interface) 2

HTML Determine the layout of a web page What is a layout –it describes the structure of a document rather than the rendering details –e.g., a Word document 3

CSS Specify the styles, i.e., the rendering details For example, if you want a red headline –old way (specifying styles via HTML) Red Headline what if there are two headlines? –new way (via CSS) h1 { color: red; } 4

The best way? This is an energetic field HTML3, CSS1 HTML4, XHTML1, CSS2 HTML5, CSS3 HTML5 + CSS3 –web 2.0 –gradient, round box, text shadow… In the near future, developing web applications will be much easier than it is right now –of course, the demands from clients will increase, too (fast, dynamic, animation…) – 5

XHTML1 Red Headline Define how to write a correct document –Word is a WYSIWYG editor so that you do not need to (and can not) know the format of a.doc file Define what elements/tags you can use –paragraph text… –line break –ordered list text… … –unordered list text… … 6

Block vs. inline element What if we want to make some text bold/italic? – text…, text… –which is better? In general, block elements consume the width as wider as possible; while inline elements are inline –with CSS, this should be the only thing you should keep in mind to reasonably use HTML Understand why you choose a specific tag –there should be always only a (or at most a few) correct tag for your need, which is both semantically and logically sound 7

Images and tables Images – Tables – text… … text… … … –if you have merged table cells rowspan colspan what a hateful table syntax, just memorize it Note that images are inline and tables are block elements, this convention could be also observed (though it is implicit) in Word 8

CSS2 h1 { color: red; } Define what properties you can use –element { property-name: property-value; property-name: property-value; … } –background-color, color… –font-family, font-size, font-style, font-weight… –text-align, text-decoration… – Define how to specify HTML elements to apply –a { color: red; } h1 a { color: black;} –what if we want to change the colors of a specific link? #element_id { color: red; } –what if we want to change the colors of a groups of links?.element_class { color: red; } –combining them becomes powerful, but harder to be familiar with p.element_class a { color: red; } 9

CSS specificity l-css-techniques/quick-tip- understanding-css-specificity/ l-css-techniques/quick-tip- understanding-css-specificity/ css-specificity/ css-specificity/ archives/css_specificity_wars.html archives/css_specificity_wars.html 10

11

12

Box model 13

14

Box model depth-margins-padding-the-box- model/ depth-margins-padding-the-box- model/ ml ml 15

Float and positioning If you understand HTML block/inline element and CSS float/positioning, then you can create any layout you have seen on the internet (theoretically, maybe a some creativity) – Something that neighbor block nor inline element is column, which is a commonly used layout –#sidebar { float: left; width: 100px; } What if we want an element on an exactly position? –#element_id { position: absolute; left: 100px; top 100px; } In general, a non-floating element is positioned according to a normal flow (the concept of block/inline elements), where the elements position is relative to its parent element –#element _id { position: relative; left: 100px; top 100px; } There is a third positioning with which you can nail elements on screen –#element _id { position: fixed; left: 100px; top 100px; } 16

depth-floats-positions/ depth-floats-positions/ /05/01/css-float-theory-things- you-should-know/ /05/01/css-float-theory-things- you-should-know/ 17

CSS summary Selector and specificity Box model Float and positioning –thats why block/inline concept should be the only thing you should keep in mind to reasonably use HTML with CSS 18

Javascript Define variables pointing to some elements Change their properties Yes, it looks like dynamic CSS In the past, to select a HTML element, or DOM (Document Object Model) the formal name, is very diffcult Now we have jQuery, which makes us to query DOM elements with CSS syntax –var obj=$('p.element_class a'); obj.css( { 'background-color': 'red', 'color': 'white' } ); –Javascript code, especially using jQuery, is a little hard to read because of its flexibility – 19

CGI Javascript is interpreted by browsers. Image that implementing a PSI-BLAST in Javascript… So we need to perform tasks on the server, which requires some rules (though people making rules just want the leading role and money, they do have contributions) –HTML form –how data is packed via HTTP –how data is returned via HTTP (simply HTTP, since HTTP originally defines how to transfer data from server to client) The later two are CGI (Common Gateway Interface) 20

Most details of CGI are taken care by the web server such as Apache or IIS, so what we need to know is how the web server calls our CGI program In Perl, use the CGI module to read the data –use CGI; my $cgi = new CGI; # Perl can do OO my $seq=$cgi->param('seq'); In any CGI program, the standard output is a instant HTML document that the web server will send to the browser The client will not know if a page is a static HTML file on the server or a CGI programs output running on the server –print "Content-Type: text/html\n\n"; # HTTP print " Hello World! \n"; 21

Input of your project 22 Innull Outa web application Requirement - provide input fields according to your final project - prints the users inputs proteins - teamwork report Bonus - beautify it with CSS and even Javascript

Deadline /5/25 23:59 Zip your code, step-by-step README and anything worthy extra credit. to