Transcript web programming - National Cheng Kung University

Bioinformatics Programming
EE, NCKU
Tien-Hao Chang (Darby Chang)
1
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)
• <h1 color="red">Red Headline</h1>
• what if there are two headlines?
– new way (via CSS)
• <link type="text/css" href="main.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…)
– http://webdev.stephband.info/parallax.html
5
XHTML1



<h1>Red Headline</h1>
<link type="text/css" href="main.css" />
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 <p>text…</p>
line break <br />
ordered list <ol><li>text…</li>…</ol>
unordered list <ul><li>text…</li>…</ul>
6
Block vs. inline element

What if we want to make some text bold/italic?
– <b>text…</b>,<i>text…</i>
– <strong>text…</strong>,<em>text…</em>
– 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
– <img src="…" />

Tables
– <table>
<tr><td>text…</td>…</tr>
<tr><td>text…</td>…</tr>
…
</table>
– 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…
http://www.w3schools.com/css/
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?
•
–
what if we want to change the colors of a groups of links?
•
–
#element_id { color: red; }
.element_class { color: red; }
combining them becomes powerful, but harder to be familiar with
•
p.element_class a { color: red; }
9
CSS specificity



http://net.tutsplus.com/tutorials/htm
l-css-techniques/quick-tipunderstanding-css-specificity/
http://css-tricks.com/specifics-oncss-specificity/
http://www.stuffandnonsense.co.uk/
archives/css_specificity_wars.html
10
http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
11
http://css-tricks.com/wp-content/csstricks-uploads/cssspecificity-calc-1.png
12
Box model
http://www.guistuff.com/css/images/boxmodel.png
13
http://www.w3.org/TR/css3-box/box-intro.png
14
Box model



http://spyrestudios.com/css-indepth-margins-padding-the-boxmodel/
http://www.w3.org/TR/css3-box/
http://www.w3.org/TR/CSS2/box.ht
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)
– http://www.csszengarden.com/

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
element’s 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


http://spyrestudios.com/css-indepth-floats-positions/
http://www.smashingmagazine.com/
2007/05/01/css-float-theory-thingsyou-should-know/
17
CSS summary

Selector and specificity

Box model

Float and positioning
– that’s 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
– http://jquery.com/
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 program’s output running on
the server
– print "Content-Type: text/html\n\n"; # HTTP
print "<p>Hello World!</p>\n";
21
Input of your project
In
Out
null
a 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
22
Deadline
2010/5/25 23:59
Zip your code, step-by-step README and
anything worthy extra credit. Email to
[email protected].
23