HTML

HTML Basics

HTML stands for HyperText Markup Language. It is the language in which webpages are written.

A webpage is simply a text document including HTML code that has been interpretted by a web browser. To create a webpage, simply write HTML code in a text editor (preferrably Notepad) and save the file with a ".html" suffix.

HTML commands are written among text enclosed in pairs of < >'s. The first of the pair will put the document in a certain mode and the second will cancel that mode. For example, an HTML document must begin with "< html >" (to put it in HTML mode) and end with "< /html >" (to cancel HTML mode).

The following commands are the most basic parts of an HTML document:

As an example, here is a sample webpage using what we have learned so far. On the top is the HTML document in text form, and on the bottom it appears as displayed in a web browser.

HTML Text

We saw in the last section how to form paragraphs in HTML; simply enclose text inside <p> </p>. There are some other text options to control size and font.

HTML Images

Including images in a webpage is fairly simple. Suppose you have a picture called pic.jpg that is in the same directory (or folder) as your webpage. Then the HTML code to put pic.jpg on your webpage is:

<img src="pic.jpg">

Here, img stands for "image" and src stands for "source". Therefore the code reads "include the image whose source is...". This is all you need to do to put an image on a webpage, but there are other optional arguments you can add for certain effects.

An optional argument is any information you give to HTML that is not necessary but can activate certain features. One such option in the <img> tag is alignment. Images can be aligned left to right on the page by using the option align="left" or align="right" inside the <img> tag. You can also align the image top to bottom by using align="top", align="middle", or align="bottom". You can also use a vertical align command with a horizontal command. The images below demonstrate these options.

<img src="DukePic.JPG" align="left">
	<img src="DukePic.JPG" align="right">
<img src="DukePic.JPG" align="top">
<img src="DukePic.JPG" align="middle">
<img src="DukePic.JPG" align="bottom">

Other optional arguments you can use with the <img> tag are height and width, which, naturally, control how tall and wide the image will appear. If no specifications are given, the image will appear as its natural size. If only height or width is given, both dimensions of the image will be scaled proportionally. If both are given, the dimensions will be as you designate, which may cause stretching.

The syntax of the heigth and width as simply height="desiredHeight" and width="desiredWidth", where desiredHeight and desiredWidth are measured in pixels. Typically, the browser window will be approximately 600 pixels tall and 1000 pixels wide in full-screen mode. Therefore, setting width="500" will make an image approximately half as wide as the full browser window. The images below demonstrate the height and width arguments.

	<img src="DukePic2.jpg">
	<img src="DukePic2.jpg" height="200">
	<img src="DukePic2.jpg" width="300">
	<img src="DukePic2.jpg" height="300" width="400">

The final optional argument we will consider for the <img> tag is alt="alternativeText". Here, alternativeText is text that will appear is the picture has not loaded or cannot load, for whatever reason. Below is an image which cannot load, but the alternative text still appears.

<img src="APictureOfADog.JPG" alt="A picture of a dog.">

HTML Links

Links put the "hyper" in "Hypertext Markup Language". A link is a shortcut from a webpage to another webpage. A link is created beginning with a <a href="location"> tag and ends with a </a> tag. Anything occuring between these two tags is the link object, on which the viewer clicks to execute the link. Usually one uses either text or a picture as the link object. The location is the webpage being linked to, and can be specified with either absolute or relative location.

Absolute locations are the URLs associated to a webpage, for example "http://www.google.com". Absolute locations are used to link to webpages that are not part of your website. The HTML code <a href="http://www.google.com">Google<a> produces the following link: Google .

Relative locations are used to link to webpages that are part of your site. Rather than having to type the entire URL of the webpage, you can just type how to get there from where you are. If the webpage you are linking to is in the same directory as the webpage you are writing, you simply type the name of that webpage as the href value in the <a> tag. For example, the webpage "UB.html" lies in the same directory as this current webpage, so the HTML code <a href="UB.html"> Homepage </a> produces the following link: Homepage .

You can choose to always use absolute locations, but relative locations provide some advantages. First of all, they involve less typing. Second, if the location of your webpage changes, the relative positions will not be affected, but their absolute locations would. If you used absolute locations, you would have to change all of your links or they would not work.

HTML Tables and Lists

Tables and Lists are features that allow you to organize information on your webpage. A table is a two-dimensional array of cells, similar to a Microsoft Excel spreadsheet. Lists are what they sound like, and can either be bulleted or numbered.

To declare a table, you simply use the <table> tag. To end it, use </table>. You fill in a table row-by-row. You start a new row with the <tr> tag and end it with </tr> (tr stands for table row). Once you have a row, you can start to add cells. You start a new cell with the <td> tag and end it with </td> (td stands for table data). There is no need to tell the table how many rows and columns it has - the HTML interpreter will do that automatically. Below is a table with three rows and two columns (the background color is added for highlighting):

You can put essentially anything in a table cell, from text to images to other tables.

As with images, there are optional arguments you can use with tables. There are horizontal alignment commands, namely align="left", align="right", and align="center". You can also specify a width in pixels with width="numberOfPixels".

Lists are far easier than tables. There are two types of lists: unordered (or bulletted) and ordered (or numbered). To start an unordered list, use the <ul> tag. To start an ordered list, use the <ol> tag. These lists are ended with the </ul> and >/ol> tags, respectively. To add an item to a list (either kind), enclose it between <li> and </li> tags. The HTML code on the left below produces the following lists:

HTML Colors

Colors are probably the most difficult part of an HTML document. The way English describes colors is rather vague. For example, the word blue can refer to anything from teal to navy. Therefore, the computer cannot rely on a statement such as "make the text blue", it must know how blue. For the purpose of specifying colors, HTML uses an RGB-scale.

The RGB scale encodes colors according to their Red, Green, and Blue components. Each component is an integer between 0 and 255. 0 represents none of that color and 255 is the maximum amount of it. Since there are 256 possibilities for each of the three components, there are over 16 million colors possible.

That's not the end of the story, though. The components are represented in hexadecimal, or base 16. This makes each component a two-digit number, where each digit can be 0-9 or A-F (for a total of 16 possible digits). Here, A, B, C, D, E, and F represent 10, 11, 12, 13, 14, and 15, respectively.

Suppose, for example, you wanted the blue component of your color to be 200. To figure out what 200 is in base 16, use integer division (that is, division with remainders). The first digit is the quotient and the second digit is the remainder. Since 200 divided by 16 gives 12 remainder 8, 200 becomes C8 in hexadecimal (remember C represents 12).

A color, then, is just a 6-digit string consisting of 0-9 and A-F; the first two are the red component, the second two are the green, and the final two are the blue.

To get a feel for the RGB system, let's look at some common colors. If all three components are 0, then we just get black, the absence of any color. If all three are 255, we have all possible color, so we get white. If all three components are equal, we get a shade of gray, which is lighter the larger the components are. Red, green, and blue can be gotten by simply setting one component to 255 and the other two to 0. Yellow is gotten by setting red and green to 255 and blue to 0. We summarize some common colors in the table below.