A Very Simple Web Page
Here is a small bit of HTML code that will produce a web page.
<html>
<head>
<title>Basic HTML page</title>
</head>
<body>
<h1>Basic HTML Page</h1>
<p>This is a line of regular text.</p>
<hr>
<p>This is a line of regular text below a horizontal rule.</p>
</body>
</html>
If you create a file with the above code in it and access it through a web browser,you should get a page that looks like this.
Basic Commands
Only some very basic commands are listed here. Check out the links on the main course page for a more thorough list.
One annoying aspect of HTML is that the newlines you put in your text with the "Enter" key are not displayed by the browser. You need to use <p> and <br /> to move to a new line. However, newlines do appear in the source code, and make it much more readable. So, make sure the source code of your HTML is easy to read, with plenty of white space, even though it won't appear in the browser.
The best ways to learn HTML are to try out the various tags on your own web page, and to view the source code of any interesting page you run across. It is very hard to completely mess up an HTML page--by far the most likely result of miscoding something is just some odd-looking stuff being displayed. So, experiment!
Document Structure
<html> </html>
HTML documents begin at the first tag and end at the second. These tags tell the browser that what lies between is coded in HTML.
<head> </head>
Header information goes between these tags. The <title> tags are used to create a title that appears at the top of the browser window. The <meta> tag can be used to help webcrawlers index your site.
<body> </body>
The contents of the main page are displayed between these tags. You can set various attributes within this tag, including background images and colors and colors for text and links.
Body tags
<h3> </h3>
Medium-sized header line
H1 gives the biggest, h6 gives the smallest. Try them out to see which suits any given application. Within this tag, the attribute align= can be set to left, center, or right. For example: <h3 align="center"> </h3> centers the header.
<p>
Starts a new paragraph: a blank line followed by a new line. You should use the </p> tag to end the paragraph, but it isn't necessary.
<br> or <br />
Starts a new line without a blank line in between.
<b> </b>
Bold face any text between the tags.
<i> </i>
Italic face any text between the tags.
<u> </u>
Underline any text between the tags. Not widely used, because most underlined text on HTML pages is hyperlinks
<sup> </sup>
Superscript any text between the tags.
<sub> </sub>
Subscript any text between the tags.
<tt> </tt>
Any text between the tags is uniformly spaced: good for aligning columns.
<hr>
Draws a horizontal line. The attribute size="50%" (any percent will do) draws a line of that percentage of the screen width. The attribute align= can be used to move the line to left, center, or right.
<pre> </pre>
Image, Link, and Comment tags
<img src="filename" title="text">
Insert the image file: .jpg, .gif, or .png files are supported by nearly all browsers. The title attribute is displayed by the "tool tips" function of the browser: when you run the mouse over the image.
<h1 align="center"><img src="filename" alt="text"></h1>
A little trick to get a centered image: enclose the image inside headline tags, with the align="center" attribute.
<a href="filename"> Highlighted text </a>
Creates a link to the listed file. This can be a path to a file located on the server, or it can be a link to a file on another computer. In the latter case, the file name should start out with "http://". Instead of the text you can put an <img src="whatever"> to get a clickable image as a link. This is a common way to putting in buttons.
<a href="filename" target="_blank"> Highlighted text </a>
The target="_blank" attribute creates a NEW browser window containing the linked HTML file. Note that the default behavior of an <a href=> tag, if you don't include a "target=" attribute, is to replace the current web page with the new one.
<a href="mailto:you@yahoo.com"> Send an e-mail</a>
The mailto: (followed by your e-mail address) inside the href value will turn on the e-mail program and set up a message that you can send. It usually works, but I recommend also writing your e-mail address somehwere that is visible, in case this bit of automation fails.
<!-- -->
Comment tags: anything between these two tags is considered a comment and is not displayed by the browser. However, it is visible to anyone who views the source code through the browser. You can comment out large portions of your page if you like.
Character Entities
Non-break space. This entity allows you to put spaces into the display. Normal spaces like " " are collapsed to a single space by the browser. Using this entity allows you to put in as many spaces as you like. Also useful for blank cells in tables and (used as <p> </p> ) for extra blank lines.
< and >
Less than (<) and greater than (>). These characters define tags in HTML, and thus the browser interprets the actual "<" and ">" symbols as something other than the literal symbols. Use the entity tags to display these characters.
&
Ampersand (&). As with "less than" and "greater than", the ampersand is not interpreted literally by browser, and so it must be written as an entity to get it to display properly.
± © ®
Plus-or-minus (±), Copywrite(©) and registered trademark (®).
¢ £ € ¥ ¤
Cent(¢), Pound (£), Euro(€), Yen (¥), General currency (¤).
α β γ δ ε θ κ λ μ π ρ σ φ χ ω
Some small Greek letters: alpha(α) beta (β) gamma (γ) delta(δ) epsilon (ε) theta (θ) kappa (κ) lambda (λ) mu (μ) pi (π) rho (ρ) sigma (σ) phi (φ) chi (χ) omega (ω) .
Γ Δ Θ Λ Ξ Π Σ Φ Ψ Ω
Some capital Greek letters: Gamma (Γ) Delta (Δ) Theta (Θ) Lambda (Λ) Xi (Ξ) Pi (Π) Sigma (Σ) Phi (Φ) Psi (Ψ) Omega (Ω)
Lists and Tables
<ul> </ul>
Begin and end an un-numbered list. Each individual item on the list begins with <li> and ends with </li>. Each item appears as a bullet point.
<ol> </ol>
Begin and end a numbered list. Each individual item on the list begins with <li> and ends with </li>. Each item appears as a numbered point on a separate line.
<table> </table>
Begin and end a table. Tables are built row-by-row, with each row starting with <tr> and ending with <tr>. Within the rows, individual cells start with <td> and end with <td>. You can put anything you want in the cells: text, images, links, forms, etc. Tables are the way that most positioning of items on web pages is done. There are many attributes available to modify tables; see the links for complete lists of HTML tags. It is worth noting that browsers before version 4.0 (IE or NetScape) didn't support tables.
<table border> </table>
Begin and end a table that is surrounded by a border. This is the way to get a table that looks like an actual table. If you don't use the "border" attribute, you get a able with no obvious borders. That is a good way to place images on the page, but it doesn't help if you need to see which cell something is in.
Forms
<form action="path/file" method="post"> </form>
A form begins and ends with these tags. When the Submit button is clicked, the listed file (in a sub-directory of cgi-bin) will be executed. The target=new attribute is optional and means that the output of the CGI program will be sent to a new browser window.
<form action="path/file" target="new" method="post"> </form>
A form begins and ends with these tags. When the Submit button is clicked, the listed file (in a sub-directory of cgi-bin) will be executed. The target=new attribute is optional and means that the output of the CGI program will be sent to a new browser window. If you use target=_parent (note the underscore) the CGI output will go back into the original window--probably what you want. If you leave out the target, the CGI output will become a new page in the browser window and you will need to hit the "Back" button and reload to see any information (such as images) updated by the CGI program.
<input type="text" name="parameter">
This tag creates a single line text box. Whatever is typed into the box gets sent as a string to the program given by the form action mentioned above, as the value of a parameter whose name is given by "name=".
<input type="checkbox" name="parameter">
This tag creates a checkbox. The parameter is given a value of TRUE if the box is checked.
<input type="radio" name="parameter" value="par_value">
This tag creates a radio button. You typically use them in groups, all which have the same name but different values. Only one button can be checked; the parameter is given the value associated with the checked button. It is possible to have one button checked as a default, by putting the word "checked" after the value=par_value statement.
<input type="submit" value="button_label">
This tag creates a Submit button. There is no associated parameter; all this button does is send the form to the program for processing. The "value=button_label" statement tells what text to put on the button; it defaults to "Submit" if you leave the statment off. All forms MUST have a submit button.
<select name="parameter">
<option> Label 1 </option>
<option selected> Label 2 </option>
</select>
This tag creates a select box (a drop down box). Between the "select" tags are "option" tags; between <option> and </option> you put the labels for the options, the text that gets clicked on. The "selected" statement causes that option to be the default. When an option is selected by the user, the label between the option tags is sent as the value of the named parameter. Two other useful bits of knowledge: if you want to allow the user to select multiple values, put the word "multiple" in the select tag. If you want to make more than one option show on the screen, use the statement "size=3" (or some other integer), to make a box that shows 3 options at once. Note that if there are more options than can show at once, scroll bars are automatically generated.
<textarea rows="8" cols="60" name="parameter">
</textarea>
This tag creates a text box that is 8 rows high and 60 columns wide. You can change the size as you see fit. These boxes are typically used to cut-and-paste text into. Whatever text you (the programmer) put between the tags will be printed in the box.
<input type="hidden" name="parameter" value="par_value">
This tag creates a hidden input value. The name-value pair is submitted automatically to the program, without any user control, or anything appearing on the screen. This technique is occasionally very useful, but we probably won't need it in this class.
Once again, the best way to learn HTML is to see what others have done and to experiment. Enjoy yourself!
http://www.bios.niu.edu/johns/bioinform/htmlcom.html