Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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