This document introduces you quickly to the basics of HTML. If you already know these things, but just want a quick reference of what some common tags are and what they do, click here .
A web page is just a text file, with plain old text in it, plus some "markup tags". Here is a sample HTML file:
<HTML> <BODY> Hi there. </BODY> </HTML>
You might save the stuff between (but not including) the lines in a file called /tmp/foo, then start up your browser, then hit the Open button, then — instead of typing in a URL such as "http://something.or.other.com" as you usually would — type
and hit return. Or click here. Voilà — you will see how it looks.
The basic idea of HTML is that the body is just text, with formatting codes, hyperlinks, etc. indicated with "markup tags" (hence the term HTML, which stands for "hypertext markup language").
Some tags (e.g. <HTML> and <BODY> in the example above, or the <CENTER> tag which centers text) operate on a range of text. They look like <SOMETHING> and </SOMETHING>, to indicate start and end, respectively.
Other tags are just used once (e.g. the <P> tag which starts a new paragraph) so there is no corresponding </SOMETHING> (e.g. no </P>).
Tags are case-insensitive: e.g. <HTML> is the same as <html>. You might like to make them all upper-case to make them stand out. Or not. Personally, I'm very inconsistent about it.
You are probably wondering how to get a real > or < in an HTML page. What you do is to type > and < (for "greater than" and "less than", respectively).
(How do you get a '&' then? By typing &. You need all five characters, including the semicolon.)
Now, you can vi /tmp/foo and change "Hi there." to "Hey you". Then, go into your browser (which doesn't know that the file has changed) and hit the Reload button. Now you are seeing the changed text.
This is how I do all my HTML editing — vi in one window, browser right next to it, then edit and save in vi, reload in the broswer, edit and save in vi, reload in the browser, etc. (There are tools out there that let you do all your editing in one window.)
Now you might vi /tmp/foo to make it look like this:
<HTML> <BODY> <b>Hi there.</b> </BODY> </HTML>
then push Reload in your browser, or click here. Now the text is bold.
Here is a bigger example:
<HTML> <HEAD> <TITLE> This text goes in the browser's title bar </TITLE> </HEAD> <BODY BGCOLOR ="#FFFFFF"> <!--- FFFFFF means white, which is the background color I prefer for all my pages, and yes this is how you do a comment. ---> <FONT COLOR = "#0000FF"> <!--- 0000FF is blue ---> <B><CENTER> Here is some text that is blue, bold and centered. </CENTER></B> </FONT> Here is some normal text. Here is more text on another line in the HTML source file, but the carriage return doesn't show up unless I put in a <p><p> to start a new paragraph. Note that paragraph formatting is controlled by the markup tags — not by the way it appears in the source file. </BODY> </HTML>
You get the idea.
Important tags are:
Here is a bigger example, with a lot of features. I'll try to let them explain themselves. (Click here to see what it looks like.)
<HTML> <HEAD> <TITLE> Here is my title. </TITLE> </HEAD> <BODY BGCOLOR ="#FFFFFF"> <H1> </H1> <!--- This is very big text — too big. ---> <H2> </H2> <!--- This is also too big. But I read somewhere that it is important to include these blank h1/h2 spots, instead of starting directly with h3. I use h3 for the top line of my pages. ---> <H3> <FONT COLOR = "#FF0000"> <CENTER> Here is some red centered text. </CENTER> </FONT> </H3> This is just a paragraph of text. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. <p>Here is another paragraph. Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. <p><I> This text is in italics.</I> <HR> <p> There is a line drawn above these words, using <HR>. <p>Click <a href="http://www.tds-az.lmco.com"> here </a> to see the LMTDS-AZ home page. That's how easy it is to do a hyperlink. Note that you can also make a hyperlink have a relative pathname. If there is an HTML file called foo.html in the parent directory from the current page being viewed, you can simply use "../foo.html" in the href statement. <p> This is how to do a mailto. Note that I can surround the mailto with an italic format if I want. <p>For further information contact: <I> <a href="mailto:john.r.kerl at lmco.com"> john.r.kerl at lmco.com </a> </I> <p> Above I said, "Note that paragraph formatting is controlled by the markup tags — not by the way it appears in the source file." Well, when you have some nicely formatted text, you can tell the browser to print it as is, using <pre> and </pre>. Note the difference between this: <p> Here is one word per line. </BODY> </HTML> <p> and: <pre> <p> Here is one word per line. </pre> <p> Sometimes you want to make bulleted lists. Here is how: <UL> <LI> Item 1. <LI> Item 2. <LI> Item 3. </UL> <p>Or maybe you want to number them: <OL> <LI> Item 1. <LI> Item 2. <LI> Item 3. </OL> <p>Or maybe you want to nest them: <UL> <LI> Item 1. <UL> <LI> Sub-item a. <LI> Sub-item b. <LI> Sub-item c. <LI> Sub-item d. </UL> <LI> Item 2. <OL> <LI> Sub-item a. <LI> Sub-item b. <LI> Sub-item c. <LI> Sub-item d. </OL> <LI> Item 3. </UL> <p> Lastly, here is a sample table. Note that you can include markup tags within the cells. <TABLE BORDER=1 WIDTH=100%> <TR> <TD> <b>cell</b> </TD> <TD> <b>cell</b> </TD> <TD> <b>cell</b> </TD> </TR> <TR> <TD> cell </TD> <TD> cell </TD> <TD> cell </TD> </TR> <TR> <TD> cell </TD> <TD> cell </TD> <TD> cell </TD> </TR> </TABLE> </BODY> </HTML>
Those are the features that I use the most often. As you can see, these are all simple building blocks; but you can use them to make some neat-looking pages. It is really easy.
There are of course many more kinds of markup tags.
To learn more:
Lastly, how to make your own home page on the LMTDS-AZ intranet: It will take you just a minute to do and you can do it by yourself. First, cd to your home directory. Then mkdir public_html. Then, in that directory, create an HTML file called index.html. Save it, then start up your browser and open
http://www_cae/~your-user-name-goes-here-don't forget the-tilde
Voilà — you are on-line.