1128-1130
Page 1128
machine. HTML is not a computer language to the same degree that C or Java are languages. It is a set of a few simple rules, and a few more complex ones, which you can learn in order to mark up a document.
Let us mark up and create our first Web-ready HTML document. Each type of mark is called a tag. You are required to put four tags in each document:
<html> <head> <title> <body>
What are these tags marking? The first one, <html>, simply tells a browser reading the new page that it is reading HTML. The markers for <head> and <title> allow us to label the browser window and our document with a title.
Here is a small piece of text from Shakespeare's Hamlet:
Imperious Caesar, dead and turned to clay,
Might stop a hole to keep the wind away.
O, that that earth which kept the world in awe
Should patch a wall t'expel the winter flaw!
For this example, we'll make the previous text an HTML document. So, if you are following along, use a text editor (not a word processor unless you know how to save something as a text file) and type in the original text. Don't center the text; you can do that later. Save the document with an .HTM or .HTML extension, because that is what you are creatingsomething that can be read by the new graphical standard of network computing.
The first tag you need is <html>, which tells the browser that what it is reading is an HTML document. So, the previous example would change:
<html> Imperious Caesar, dead and turned to clay, Might stop a hole to keep the wind away. O, that that earth which kept the world in awe Should patch a wall t'expel the winter flaw! </html>
Close the <html> tag with its ending /. Notice the </html> marker. This tells the browser that the HTML text is finished. All tags are closed with this slash.
The second tag is <head>:
<html> <head> </head> Imperious Caesar, dead and turned to clay, Might stop a hole to keep the wind away. O, that that earth which kept the world in awe Should patch a wall t'expel the winter flaw! </html>
Page 1129
The second and third lines define the beginning and end of the header section. What do we want as a header to adorn this Shakespeare text? We'll call it "Shakespeare Surfs the Web." Let's use another tag within the <head> area of the document and add the new title with the <title> tag:
<html> <head> <title>Shakespeare Surfs the Web</title> </head> Imperious Caesar, dead and turned to clay, Might stop a hole to keep the wind away. O, that that earth which kept the world in awe Should patch a wall t'expel the winter flaw! </html>
The title will appear somewhere in the border of the user 's browser, not as part of the text. That is because we are still inside the <head> tag. The area within the window of the browser is called the body. The following defines this area with the markers <body> and </body>:
<html> <head> <title>Shakespeare Surfs the Web</title> </head> <body> Imperious Caesar, dead and turned to clay, Might stop a hole to keep the wind away. O, that that earth which kept the world in awe Should patch a wall t'expel the winter flaw! </body> </html>
If you also want a title to appear in the text, use a heading tag, which is different from the head tag. A heading tag is an <H> with a number between 1 and 6 following it. This is the level of the heading, similar to an outline style. You should also put paragraph markers, <P> and </P>, around the main text.
1 <html> 2 <head> 3 <title>Shakespeare Surfs the Web</title> 4 </head> 5 <body> 6 <h1> From Hamlet: </h1> 7 <p>Imperious Caesar, dead and turned to clay, 8 Might stop a hole to keep the wind away. 9 O, that that earth which kept the world in awe 10 Should patch a wall t'expel the winter flaw! </p> 11 </body> 12 </html> sample1.html
Page 1130
Now you can open the file from your browser or, on many operating systems, just click the file, which as an HTML document will bring up a browser. You will see the Shakespeare text, the heading, and even another title somewhere above the document, displayed with the browser. You have just created your first Web page!
Making Your HTML Fancier
Let us take our amazing Shakespeare quote and do some things to make the new Web page look a little more flashy and glamorous. Let's center the actual quote within the <P> and </P> paragraph tags. For line 7 of the above HTML text, put a command after the <P, ALIGN=CENTER. Now you have <P ALIGN=CENTER> as the command.
Notice that in the previous example, the poem resides on lines 7, 8, 9, and 10. HTML will ignore the four lines that the poem is formatted on, unless you want them to be noticed. If so, use the tag <pre>. Now the four lines will be centered.
If you find the gray background boring, copy a graphical file that you think would be a good background. Maybe find a picture of a forest or a mountain to give a backdrop to the text.
I am using a JPEG formatted file named myfile.jpg. Here are the following changes I have made to my HTML file in this section:
<html> <head> <title>Shakespeare Surfs the Web</title> </head> <body BACKGROUND="myfile.jpg"> <h1> From Hamlet: </h1> <pre> <p ALIGN=CENTER>Imperious Caesar, dead and turned to clay, Might stop a hole to keep the wind away. O, that that earth which kept the world in awe Should patch a wall t'expel the winter flaw! </p> </pre> </body> </html>
To change the font to something more appealing, use the <font> tag of HTML. If you want to change the font of this text to Arial, add a simple line before the paragraph with the font tag:
<font FACE=ARIAL> </font>.
Creating Links
My new Web page is so popular, I am going to link it to more pages. This is the real power of HTML: document linking. Remember, linking can mean joining two documents on one machine or on different machines. We'll start with a link to another page in the same directory.
EAN: 2147483647
Pages: 391