Lecture 2

Shaw Lecture 2 HTML

History of HTML - (Hypertext Mark Up Language); really invented by Tim Berners-Lee, CERN in Switzerland, 1989-91. Earliest versions had hyperlinks, which had been invented before, but what Berners-Lee added was the HTTP (Hypertext Transfer Protocol) so that the links would pull up pages on the internet. This took off very quickly and was quickly modified and improved by other programmers. The original HTML code could not handle images and sounds. In 1993, Mark Andreessen, working in the NCSA (National Center for Supercomputing Applications at the University of Illinois at Urbana-Champain), developed the browser Mosaic, which allowed easy graphical display. This was an immediate hit, and he soon left NCSA to form Netscape, which developed this browser a lot further. The original Mosaic was used by about 1 million people, and 19 months later 65 million people had used Netscape, possibly the quickest/largest product assimilation in history. The first iterations of the web were static, in that a page was displayed from a pre-existing template, so someone had to make each and every page that appeared on the web. Then, through CGI (common gateway interface), it became possible for another computer to actually create a page in response to a specific input. Good examples today are Medline, Travelocity and Fedex. This is called dynamic HTML. Even more sophisticated is Javascript, Java, Perl and other programming languages which can be embedded in web pages in various ways and which allow complex programs to be downloaded from the web and run on the host computer.

Ok, first of all you need a server onto which you can put your web page. You will put your file there by FTP and it will likely be a subdirectory call /www. As the guy who set up your email about this; you will need some disk space and an FTP password so you up load files and change files that are there already. If you are a UF student you have a gatorlink account, and can put your pages there. You go to http://plaza.ufl.edu/yourgatorlinkid and use your gatorlink pass to log on for FTP. If you don't specify a file in that subdirectory, the browser will load up a file called either index.htm or index.html if there is one there (there won't be unless you put one there of course). So people often call their home page index.htm or index.html. The file extension *.htm or *.html stands for “hypertext markup language”; either works fine and the longer extension indicates that the file may have been written on a Macintosh, while the shorter may have been written on a PC (in MS-DOS the extension could only be three letters max). A mark up language is not really a programming language or word processing program; it is really something designed to make a small file which will display the same information in more or less the same way on a variety of computers. It's designed to produce small files since computer memory was much less and transmission times used to be much slower than they are now. Its major weakness is that it does not precisely define how a page will look, which requires more information and larger files. For this reason it is good to check out how your document looks on a variety of browsers and on UNIX, Mac, Windows based computers. The strengths of it are that it is very versatile and can handle hyperlinks, images, movie clips, sounds etc. etc. If you want to make in more interesting and interactive you can use add ons such a Javascript, a C like language and Flash, for making movies and other complex effects. There are many other things you can add on to web pages, virtually unlimited...

The index.htm file will be an ascii text file, meaning you can create this file in Wordpad, MS Word, or any text editor; just remember you have to save the file as a text file, you don't need all the junk that Word routinely adds to files. (Alternately Word and Powerpoint documents can actually be saved in html format, but this is rather ignorant way of making web pages).

It's perfectly possible to make functioning web pages using Wordpad and an FTP program, both of which are already in Windows, so you don't have to buy anything. However it's a lot easier to make web pages if you can quickly flip between the source code, the ascii text, and the actual appearance of the web page. The free 1st Page program I showed you in class does that pretty well. Some programs such as Dreamweaver actually also include an FTP program, so you can download a file from your server, edit it, see what the edits look like, and then put the file back on the server. So if you open Dreamweaver and ask to make a new page something like this will appear.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
</body>
</html>

Notice that everything is surrounded by < and >; the language uses things called tags, which are always surrounded by < and >. The <!DOCTYPE stuff tells the browser what version of html you are supposed to be coding it. Unless you are doing something complicated this is probably not important, and can be left out for now. The title tag <title> Untitled document </title> is where you put the title of the file; you don't really need this though. The important tags in this example are; .

In fact this will work as a web page without all the other stuff, so this is essential while the other stuff is not. <html> tells the computer that a html document is starting, while </html> tells the computer it is finishing. There are two parts to the document, the “head” and the “body”, and you can guess where they start and stop. The head is where you put details about the page for your own use, for search engines etc. For instance you might put in who made the page, when they made it and you can also put in specific terms for Google to find. However, nothing you put there actually gets printed on the web.

The body is where you put the actual text and pictures for the page. Text you put in between <body> and </body> is actually displayed.

The body tag can take several "arguments", just like in C. (in fact almost all of the tags can take a variety of different arguments). For example, background colors and images are defined as the bgcolor argument to the <body> tag, like this, to define a white background;

The six letters are the densities of the R, B and G pixels, in hexadecimals each with 16 * 16 = 256 possible values. Hexadecimals, you will remember are 0123456789ABCDEF, equal to decimal 0-15; Experiment with changing those numbers and see what happens. You'll find that high levels are dim and the low are bright, like you might expect.

Alternately you can define the background as an image, like your face or something; you do this like this;

On to the body. Anything text you type between the <body> and </body> tag appears on the screen. If you simply type in “Hello Computer” that text will appear when you put the page on the web. Dreamweaver will allow you to view in in your favorite browser, so you can see what it looks like. 1 st page has a preview page which works quite well. It probably looks pretty boring, let's jazz it up a bit, use some different fonts. You change fonts by using the <font face> command. This, like in C functions, has to take arguments, one of which would be the font. The Verdana font is used a lot on the internet, so we'll choose that one. You can also specify the size the text gets printed out, from size 1 to 7. Or if you put in + in front of the number, the font is increased in size by however many units above what it was already, and a – does the opposite, brings down the font size.

<font face "verdana" size="2">Hello Computer</font>

So that says use verdana font at size 2 for whatever is between the on tag and the off tag.

Other useful tags to work on a page;

The paragraph tag <p></p>

The <i></i>tag makes text italics

The <b></b> tag makes text bold

The <u></u> tag underlines text

The <sup></sup> and <sub></sub> tags superscript and subscript text; note that, since HTML is fairly primitive, they just move the text up or down, without changing its size, which you can do if you want using the <font size="-1"> tag.

Can combine these; <i><b><u>text here </u></b></i>

The following tag works for remarks, comments, to remind you who did what when etc. Any text between the tags is ignored.

The

This is useful for putting a description of what each piece of the code does actually into the code, and all computer languages have some sort of version of this.

And two that don't require and off tag;

The horizontal line <hr>

Line break <br>

If you put this after some text it introduces a newline/carriage return

Experiment with these tags <center></center>

If you want to indent text or make blank spaces this is a bit of a pain, since html compresses down multiple blank spaces to just one blank space, so just typing in blanks doesn't work; you have to put in this; “ ” bit of a pain, though the keyboard will do this with “control shift space” if you have Dreamweaver, which is OK I suppose.

More complicated stuff; putting in a table; This makes a table with one row and three colums with text in;

So <tr> says a row is coming, and the row elements are defined by <td></td>; the end of each row is defined by </tr>, so a table with two rows would be;

<table>

</table>

This makes a table but it looks sort of ugly. Fortunately you can specify width of each element of the table to make it a bit nicer looking; To do this <td> can take arguments such as <td width=”100”>. This makes that element of the table 100 points wide. Can also take the argument height, e.g. <td width=”100” height=”50”>

One of the most notable features about web pages is that you can link to other web pages with a hyperlink. You use the <a> for anchor tag; A typical hyperlink is blue (you can change this if you want) and when you mouse on it you go to another web page. Here is how you do this;

<a href=”http://www.mbi.ufl.edu>The Brainers Institute</a>

so the tag is <a></a>, (a stands for anchor) the argument is href=””, and the web address is simply inserted between the “”. Note that the text that appears on the page is between the <a> and the </a>, and you can choose what that is; so I can put the Brain Institute or the No Brain Institute, which will piss people off, but will non the less direct people to the MBI home page.

One of the strengths of html is that it is easy to insert images. The format that html likes is gif and jpg, both of which are compressed file formats.

The tag for inserting an image is simply;

img src can take various arguments to define the width, height etc.

Most modern programs allow you to insert images by simply browsing for the image on the computer. HTML can handle either jpg/jpeg or Gif images. Jpg images are smaller than gifs but actually are “losy”, so that the compression algorithm cuts some corners, so you loose image information. Gif images are loseless, which is better but of course means they are bigger also. (jpeg = Joint Photographic Experts Group; GIF = Graphics Interchange Format) Just remember that you have to get the same image onto the FTP server, and the server has to know where it is; people often create a subdirectory called /images and put them there. So in this case the filename would be;

The resolution of most computers is currently about 800*1000, i.e only about 1 megapixel, so there is not much point in putting images bigger than that on the internet, they will be slow to download and people won't see the quality anyway. So in the above example you should use Photoshop or whatever to shrink down the picture of Berners-Lee to 250*164 pixels, it won't look any better if it is bigger than that.

Inserting an email link is simple also.

<a href="mailto:shaw@mbi.ufl.edu">Email me here</a>

Will insert a hotlink to mail to me; note you can put any text in the “Email me here”, so that this does not necessarily have to be my name...

Inserting sounds is easy too;

If you want some text to move across the screen use the “Marquee” tag.

<marquee> This text will move across screen </marquee>

All the above stuff is in between the <body> and </body> tags, but a lot useful stuff goes on in the head tags too.

One thing is the<meta> tag, important if you want your page to be found by search machines, Google, Yahoo et al. Can do this;

Google, Yahoo et al. will find your page, after a short while, and so people searching for whatever you put into the metafile will start to see your page as one of the list of things they find.

Cascading style sheets (CSS)

These also go in the <head> part of the document, and they allow things like the font, background image, text size and other general attributes of the page to be defined by downloading the details from another file. This means that all the web pages on your site can look the same without you having to specify a particular font for each one individually, and you can change the shape of all of them simultaneously also.

Javascript

This is C like language that is widely used to make html interactive, despite only being 10 years old. It is also designed to use the host computer to do calculations; this means that a program written in Javascript will do the calculations on the host rather than the computer from which the page was downloaded, which saves time. The Javascript uses the <script> tag in head part. More about this later...