Basic HTML english lecture

Basic HTML What and Where • Our biolinx computer has a web server on it. “Apache” is the brand name: it is Open Source software, and it is probably the most common web server in existence. • From a practical point of view, the web server makes all files located in the/srv/www/htdocs/biolinx/html directory (and any sub-directories under it) visible to the World Wide Web. Pointing your web browser at http://biolinx.bios.niu.edu gives you access to this directory. • For example, look at the “hello.html” file from within biolinx (/srv/www/htdocs/biolinx/html/hello.html) and from your web browser ( http://biolinx.bios.niu.edu/hello.html ). They are the same file! Try comparing the source code using “View Source” in your web browser. However, we can manipulate the file from inside biolinx; from the Web all we can do is look at it. • You each have your own sub directory for HTML: /srv/www/htdocs/biolinx/html/z012345 (or whatever your z-number is), viewed through the web as http://biolinx.bios.niu.edu/z012345 . Put all your HTML documents in this directory. What is HTML • Hyper Text Markup Language is a “markup language”. It is a set of instructions to your web browser to cause the text to be displayed in a certain way. • HTML is not a programming language in that it doesn’t allow decisions (if statements) or loops. • You can see what the actual HTML document looks like (as opposed to how it is displayed) using the “View Source” control on the browser. • HTML is a subset of SGML, Standard Generalized Markup Language, which is a generic way of representing any document. SGML is more or less too complicated to be useful, but it has spawned two important subsets, HTML and XML (which we will discuss later. HTML Standards • HTML is an evolving language. I am presenting approximately HTML version 3.2, which is quite simple but which should work with all current browsers. We want to be able to generate HTML documents “on the fly”, from programs written in Perl, to display data dynamically. This is best done using simple HTML rather than the more complex forms used by large commercial web pages. • HTML 4.0, a more recent version has “deprecated” many of the tags that determine style (notably the <font> tag), and asks that you put style information in “Cascading Style Sheets”. Despite the deprecation, billions of web documents were (and continue to be) written without style sheets. For this reason, all browsers continue to support older version of HTML, and will do so for the indefinite future. However, HTML 4.01, which was released in late 1997, is the current standard for the web. • “Deprecated” means that there is a newer and better way of marking up the information than the old tag. However, deprecated tags still work. “Obsolete” tags may not work. • XHTML (Extensible HTML) is still being developed. It is an attempt to convert HTML into XML. Version 1.0 has been released. Document Type Definition • HTML standards are defined in documents called DTDs (document type definitions). There is a default DTD used by the browser, and thus we don’t have to explicitly define a DTD. All XML documents come with a separate DTD file. • If desired, we can explicitly used a DTD by starting the HTML file with the line: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> • This line says that the document follows the guidelines of the World Wide Web Consortium (W3C) transitional standards for HTML 4.01. “Transitional” means that some HTML 3.2 is still involved. W3C is the body that sets standards for the web. • However, you should be aware that approximately 90% of the browsers these days are Microsoft’s Internet Explorer. This semi-monopoly allows Microsoft to ignore standards or create its own at will. • In practical terms, a web site that displays correctly for both Internet Explorer and Mozilla Firefox will probably cover just about all situations: IE because of the above-stated Microsoft 900-pouind-gorilla problem, and Firefox because it follows the W3C standards that all other browser use. HTML Tags • The basic feature in HTML documents is the “tag”. • Tags are set off by angle brackets (“<“ and “>”), with the tag name between them. For example, the entire HTML document is placed between the opening tag <html> and the closing tag </html>. • Most tags occur in pairs, indicating what is supposed to happen to whatever text is between them. The closing tag has the same name as the opening tag, but the closing tag stars with a slash (/). For example, <b>make this bold</b>. The text between the <b> and </b> tags is made boldface by the browser. • Pairs of tags are supposed to be nested: you close all inner tags before closing outer tags. Thus, <b><i>bold and italicize</i></b> CORRECT <b><i>bold and italicize</b></i> WRONG More on Tags • Opening tags often contain attributes as well as tag names. Attributes are separated from each other by spaces, and they are in the form of: name=“value”. For example: <h2 align=“center”>Title</h2> creates a centered headline. The default is left-justified. • HTML tags are case-insensitive: <table>, <TABLE>, and <tAbLE> are all equivalent. However, the current XHTML standard suggests that we should use small letters: <table>. • Some tags don’t have a closing tag. <br>, a line break, is a common example. The XHTML standard suggests putting a slash into the single tag in these cases: <br />. Character Entities • The other commonly seen feature in HTML documents is the “character entity”, a group of characters starting with & (ampersand) and ending with ; (semicolon). The entity represents a single character in the browser display. • For example > represents the > greater than sign. Since > is part of each tag, browsers have a hard time displaying the actual > character. By having > in the HTML document, the browser will display the character you want and not try to interpret as part of a tag. • Very useful is   , a non-break space, which is how you get multiple spaces. If you just use the space bar, HTML browsers will compress all those spaces into just 1 space. So, to get multiple spaces, use several   • All entity tags have a number: > is the same as > . Not all have a mnemonic name. • All characters have entity tags, but most are rarely used. Thus, a represents the letter “a”. There is no mnemonic tag for this letter; mostly we just type in the letter itself. HTML Document Structure • HTML documents are supposed to have the form of a tree, or equivalently, in the form of a set of nested tags. • The document should open with <html> and close with </html> • Within the <html> tags are 2 sections: <head> </head> and <body> </body>. • In the head section is a <title> </title> line. The title is displayed at the very top of the browser window. • The body section contains all the tags and text that are displayed in the main window. • See the “Basic HTML Commands” web page (http://www.bios.niu.edu/johns/bioinform/htmlcom.html ) A Few Tags • Headlines are within tags like <h1> </h1>. H1 is the largest, H6 is the smallest. The “align” attribute can be used to move the headline: <h1 align=“center> or <h1 align=“right”>. The default is left alignment. • Text is set off in paragraphs within <p> </p> tags. Note that the closing tag is often left off. However, that is a sloppy practice that I discourage. • The <br> or <br /> tags introduce line breaks: less space between lines than with <p>. There is no ending tag for <br>” it is considered part of the previous <p> paragraph. [...]... A Basic Form Basic Form Basic Form What is your name? Please select your favorite color: Red Blue < /html> Processing... especially if your program writes to any files Recap of CGI Processing of Forms • Start with an HTML file in your HTML directory: /srv/www/htdocs/biolinx /html/ z012345/prog1.htm • This HTML file can be accessed through the web using a web browser, at the URL: http://biolinx.bios.niu.edu/z012345/prog1.htm • The HTML file contains a form, whose action sends parameter name=“value” pairs to a CGI program on... browser to understand that this is HTML, you need to print the line “Content-type: text /html\ n\n” at the beginning of the printing Note the “\n\n”: there MUST be a blank line between the Content-type line and the tag that starts the actual document • Otherwise all printing is exactly as we have described for other Perl programs • Note that you must print an HTML document to get a good display!... Table rows are < /tr> Cells within rows are Images • Images are placed with tags, with no closing tag The basic syntax is: • The src= value is a local file, the path to a file in a different directory under the HTML root directory, or a URL • The tool tip text is displayed when the mouse hovers over the image, or if for some reason the... /srv/www/htdocs/biolinx /html/ z123456/prog_results.htm” The touch command creates the file without putting anything into it Change the permissions on that file so anyone can write to it: “chmod 666 prog_results.htm” Be sure to use the full path to that file Typically, the CGI file is in /srv/www/htdocs/biolinx/cgi-bin/z123456 and you are writing an image file at /srv/www/htdocs/biolinx /html/ z123456 So, in... this For example, the “hello.cgi” program is located at /srv/www/htdocs/biolinx/cgi-bin/bios546/hello.cgi As with HTML addresses, this program has an alias used as the “action” attribute of the form tag: CGI Basics • CGI programs are simply Perl programs with a few minor modifications that alter input and output • A key... is enclosed within the opening tag Forms • • • • • • • The form tag is used to send user-specified information back to the server The server then sends back its response, a new HTML document The form tag itself needs at least 2 attributes, the “action” attribute and the “method” attribute Although there are other methods, we generally use method=“post” for our interactive programs... need to contain “http://biolinx.bios.niu.edu” However, it does need to start with “/cgi-bin” The form sends name=value pairs to the server “name” and “value” are both specified within each form element Basic Form Elements • All forms need a “Submit” button: clicking this button sends the form to the server Syntax: If you don’t specify a value, the button is... that anyone can execute them When going through the Web, you are the anonymous user “nobody” • Any program in your CGI directory can be run through the CGI interface (i.e invoked through a form on an HTML page) I often use the “.cgi” extension on my programs just to remind me that they are meant to be used on the Web Input to CGI Programs • To get input, we use the CGI module Near the top of the program,... pt 3 • Output is printed just as in any other Perl program, except that it is redirected to the web browser that requested it by submitting the form • Output needs to have the line Content-type: text /html\ n\n at the beginning of the output . example, look at the “hello .html file from within biolinx (/srv/www/htdocs/biolinx /html/ hello .html) and from your web browser ( http://biolinx.bios.niu.edu/hello .html ). They are the same file!. has spawned two important subsets, HTML and XML (which we will discuss later. HTML Standards • HTML is an evolving language. I am presenting approximately HTML version 3.2, which is quite simple. tags may not work. • XHTML (Extensible HTML) is still being developed. It is an attempt to convert HTML into XML. Version 1.0 has been released. Document Type Definition • HTML standards are defined