Introduction to HTML (adapted from Laurent Falquet) VI, October 2006 Page 1 Outline Tags, structure Definitions Text formatting • HTTP, MIME, URL... • Tables • Images • History Links • Forms, example • Browsers HTML forms & CGI Mosaic, Netscape, Lynx, Internet • Explorer, other CSS Client <-> Server JavaScript vs Java Dynamic vs Static Apache server Future: XHTML? VI, October 2006 Page 2
HTML - Definitions HTTP HTML HyperText Transfer Protocol HyperText Markup Language • • MIME CSS Multipurpose Internet Mail Cascading Style Sheet • • Extension XML URL (URI) eXtended Markup Language • Uniform Resource Locator • FTP File Transfer Protocol • VI, October 2006 Page 3 HTML - History 60s ARPANET 1989-90 HTML and World-Wide-Web concept Tim Berners-Lee at CERN • 1992 Definition of HTTP 1993 First graphic browser 1994 Foundation of W3 consortium 1995-… Start of WWW economy... 2004 Internet2 and the GRID VI, October 2006 Page 4
HTML - Little network reminder IPv4 Tools Internet Protocol ver. 4 • nslookup • 192.42.197.31 • traceroute 3 • IPv6 (Internet2) • Root DNS ifconfig • 2 *.org 4 5 Local DNS Primary DNS dns.anywhere.net www.expasy.org 6 1 www.expasy.org ?? Client query Target server client.anywhere.net 129.194.8.64 DNS • domain name server • Convert a URL to an IP and vice-versa VI, October 2006 Page 5 HTML - Client <-> Server VI, October 2006 Page 6
HTML - Browsers (client) Mosaic Internet Explorer First graphic browser by NCSA From Microsoft • • Netscape Others Son of Mosaic also called Firefox, Opera, iCab, OmniWeb, • • Communicator or Mozilla Chimera, Galeon, Safari, Webstar… Lynx WAP Text only browser • Wireless Application Protocol • VI, October 2006 Page 7 HTML - The Apache server Receives calls from port 80 or other Answers by sending back html or images Process dynamic pages (php, jsp) Calls executables (cgi-bin) Check authorizations (.htaccess, .htpasswd) Encrypt data (SSL) Sends cookies VI, October 2006 Page 8
HTML - Tags, structure VI, October 2006 Page 9 VI, October 2006 Page 10
HTML - Tags, structure <HTML> minimal tags: <HEAD> <HTML> <TITLE>title of the page </TITLE> <BODY> </HEAD> </BODY> <BODY> </HTML> <FRAMESET> <FRAME> </FRAMESET> </BODY> </HTML> Example: <tagname> xxxxx </tagname> The <B>bold</B> word ---> The bold word Attributes: <IMG src="../images/logo.gif" height=’320’ width=‘576’> VI, October 2006 Page 11 HTML - Frames Ability to conserve some parts of the page (e.g., headers, menus, etc…) VI, October 2006 Page 12
HTML - Frames http://www.htmlhelp.com/design/frames/whatswrong.html Potential problems • some browsers What's wrong with frames? • keeping bookmarks … • Printing In depth AVOID FRAMES ! Unaddressable resources On the Web, everything can be accessed (or addressed, at least) using an Uniform Resource Locator (URL). This makes it possible to link to anything, anywhere. At least, as long as the anything in question does not use frames. Totally incompatible The general rule for HTML is that if an element is not understood by a browser, it should be ignored. This way, a browser that does not understand the element can still show the rest of the document. The reader may miss some of the meaning of the text, or get a document that is formatted a bit strangely. Unfortunately, this is not the case with frames. The FRAMESET and FRAME elements do not have textual content. A browser that does not support frames will simply skip over these tags. But as there is nothing else to show, this browser would display nothing in place! The NOFRAMES element allows an author to specify content for such a browser, but this often means that the author has to do double work. VI, October 2006 Page 13 HTML - Text formatting Format Lists <LI> <Hn> header (n = 1 to 6) • <UL> unordered list • <P> paragraph • <OL> ordered list • <CENTER> center • <DL> definition list • <BR> line break • <HR> horizontal rule • </UL> Style <LI>first line</LI> <B> bold </B> <LI>second line</LI> • <LI>last line</LI> <I> italic </I> • • first line </UL> • second line <PRE> fixed width text </PRE> • • last line deprecation <U>, <S>, <FONT>, … • <DL> Use CSS ! <DT>spam • <DD>annoying unrequested email </DL> spam annoying unrequested email VI, October 2006 Page 14
HTML - Table formatting CAPTION - Table caption TR - Table row TH - Header cell TD - Table cell <TABLE BORDER=1> <CAPTION>A test table with merged cells</CAPTION> <TR><TH ROWSPAN=2><TH COLSPAN=2>Average<TH ROWSPAN=2>other<BR>category<TH>Misc <TR><TH>height<TH>weight <TR><TH ALIGN=LEFT>males<TD>1.9<TD>0.003 <TR><TH ALIGN=LEFT ROWSPAN=2>females<TD>1.7<TD>0.002 </TABLE> A test table with merged cells /--------------------------------------------------\ | | Average | other | Misc | | |-------------------| category |--------| | | height | weight | | | |-----------------------------------------|--------| | males | 1.9 | 0.003 | | | |-----------------------------------------|--------| | females | 1.7 | 0.002 | | | \--------------------------------------------------/ VI, October 2006 Page 15 HTML - Table formatting Attributes: <TABLE> align, width, cellpading, • <CAPTION>…</CAPTION> • cellspacing, border <TR> • colspan, rawspan, nowrap • • <TH>…</TH> … • </TR> • <TR> • Tables within tables? • <TD>…</TD> (http://www.isb-sib.ch) </TR> • </TABLE> VI, October 2006 Page 16
HTML - Tables example VI, October 2006 Page 17 HTML - Tables example 56 tables !!! VI, October 2006 Page 18
HTML - Tables example 3 tables … VI, October 2006 Page 19 HTML - Images GIF Images types: 256 indexed colors, interlacing, • GIF87, GIF89, Animated • transparency, animated, (logos, flat (Graphics Interchange Format) colors) JPEG (Joint Photographic • Experts Group) JPEG PNG (Portable Network Graphic) • 24 bits, 16.8 mio colors, no • interlacing or transparency, static, (photographic images) <IMG src="../images/logo.gif" height=‘320’ width=‘576’> PNG 48 bits colors, interlacing, • transparency, static, smaller files Image Maps See links • VI, October 2006 Page 20
HTML - Links Internal Allows redirection inside of a (long) page • <A HREF="#nextchapter">click here</A> ...Some HTML code... <A name="nextchapter"></A> External Allows redirection to another page or site • <A HREF="http://www.expasy.ch"> click here</A> E-mail Allows direct email • <A HREF="mailto:jean@isb.ch"> click here</A> Image maps Allows clickable regions in an image • <IMG width="48" height="24" src="../images/map.gif" usemap="#anymapname"> <MAP name="anymapname"> <AREA href="otherpage.html" coords="33,2,43,22" shape="rect"> </MAP> VI, October 2006 Page 21 HTML - Links: Image Maps VI, October 2006 Page 22
HTML - Forms Forms allow user to enter data and transmit them to the server <FORM name="FormName" action="/cgi-bin/dea-test.pl" method="post"> ...Some HTML code... ...With form tags... </FORM> GET or POST ? (with the Get, all the form data is included in the URL. So we can directly access this program without the form, by using the following URL: http://www.expasy.org/cgi-bin/mailform/Swiss-Prot_Helpdesk&&swiss-prot@expasy.org ) INPUT tag options: Text, Password, Hidden • Other tags Radio • • TEXTAREA Checkbox • • SELECT, OPTION Submit, Reset • File, Button, Image • VI, October 2006 Page 23 HTML - Forms Example VI, October 2006 Page 24
Recommend
More recommend
