R. Craig Collins >
Common > How To: Your First Web Page
R. Craig Collins >
Common > How To: Your First Web Page
How To: Your First Web Page © R. Craig Collins, 2000/6
 |
An eight minute video is available illustrating the following steps. I recommend you read over this web page first, then watch the video to see the steps being performed. This video is available here, or at the bottom of the page. YouTube Version http://www.youtube.com/watch?v=Dx__92GizG4 |
Note on Controlling File Names in Windows
Many computers are set up to hide known file extensions, this can be very confusing
for computer students. To set your computer to display the entire file name:
• Open My Computer or Windows Explorer
• Choose Tools\Folder Options... (for Vista users, press the [Alt] key to reveal the Tools menu, then select Folder Options)
• Choose the View tab
• Click off the check mark next to 'Hide extensions
for known file types'
• Click OK
How web pages work
Web pages are simply plain text files that contain simple markup language controls,
called tags; these tags format documents for viewing by a web page browser,
such as Internet Explorer or Mozilla. A tag is enclosed between a less than
sign (<) and a greater than sign (>).
99% of all tags are pairs; you start a tagged area, then end the tagged area, such as telling the browser when to turn on making words bold, and then when to turn off making word bold. So, think of tags as light switches, to turn on and off some formatting.
Starting a plain text editor
Windows Users:
To begin this project, launch Notepad.
From the [Start] button, open up to the Programs tab, then open the Accessories tab. Click on Notepad.
Linux Users:
From a Terminal prompt, touch template.htm, then either
emacs template.htm or vi template.htm
All browsers need to be instructed as to what type of file to they are about
to deal with, so the first tag set that we need to type in your text editor
identifies the page as a Hyper-text document. Type in:
<HTML> </HTML>
I usually type in both the starting tag <HTML> and the ending
tag </HTML> at the same time, this way I don't forget the ending
tag later. Next, place the insertion point between the tag set, and hit the
enter key a few times to give you space to work. What is typed in between
these two tags will be part of the web page.
<HTML>
</HTML>
Next, we need to know that there are two parts of the web page, the part the computer reads, and the part the users read. We'll insert the computer's part next. Just as Microsoft Word has parts of the document reserved for page numbers, etc., web pages also have something similar to a header section, called the head.
Between the two <HTML> tags, add the head section, as follows.
Don't worry about how many spaces or how many lines are between things…browsers
ignore this "white" space. It also doesn't matter if you use capital
letters or not.
<HTML>
<HEAD>
</HEAD>
</HTML>
Usually, the only thing that goes in between the head tags is something to
create a title. So add the following so that your entire page looks like:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
</HTML>
Now, just as in Microsoft Word, we need to add the section where all the words
go; just as Microsoft Word has a body area, web pages also have something similar,
also called the body.
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Notice the two HTML tags surround the entire document. Within the document you have a HEAD section and a BODY section. And within the head, you have an area for a TITLE. We are now ready to save this document, which will be the starting point for all of your web documents.
Windows Users:
Click on the File menu item, then select Save. This
will open the Save As dialog box. For the file name, type in
"template.htm"
Please make sure that the extension is .htm, and not txt. In the upper box,
select to save the file, perhaps on your floppy disk, A:. Then choose Save.
Linux User:
Choose File\Save Current Buffers
Now we have a file that contains all the required tags. Instead of having to type them in each time, we can simply open the file, and using the File\Save As menu, create a new file with a new name.
Let's do that now; Using File\Save As, name the file test1.htm. You should now have two, identical documents, template.htm and test1.htm, with test1.htm now open
Again, you'll be able to use the template.htm later as a starting point later, so we will be making our changes only to copies of it, as we have done. Whenever you want to start a new web page, open template.htm, and the use save as to create a copy, with a different name. This page contains all the required tags…all it lacks is your formatted text.
Now modify test1.htm by inserting a title between the <TITLE> tags. Call it something like My 1st page.
<HTML>
<HEAD>
<TITLE>
My 1st page
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Now click the File menu item, and then select the save option. (Not save as, the file already has a name.)
Next, minimize your text editor window; DO NOT CLOSE THE WINDOW, as we will be switching back to it.
Windows Users:
Start My Computer, and browse to the location where you saved test1.htm, and
double click it.
Linux Users:
Open your 'home' folder, locate test1.htm, and double click it.
This should launch Internet Explorer or the Mozilla browser, placing test1.htm in address text box.
It may look like nothing is being displayed, but look in the upper left hand corner of the browser window, in the blue title bar. It should read "My 1st page". This is appropriate as we have only put in a title.
Next, leave the browser running, but click on the your text editor icon on the task bar, to switch to your text editor.
If you accidentally closed Notepad, and are using Internet Explorer 7 or earlier, choose View\Source.
If you accidentally closed Notepad, and are using Firefox or Internet Explorer 8, go to the folder, right click test1.htm, and choose Open with... and choose Notepad
Between the <BODY>tags, type Hi.
<HTML>
<HEAD>
<TITLE>
My 1st page
</TITLE>
</HEAD>
<BODY>
Hi
</BODY>
</HTML>
Save your text editor file, click on the browser icon, then click on the refresh/reload button. You should now see the word Hi displayed.
Switch back to your text editor, and highlight the word Hi by clicking just to the left of the word, and drag across it with the mouse button sill depressed. When the word is highlighted, press down the [Ctrl] button and hold it down. Now tap the [c] key and let go of both. Now press the [End] key. This will break the highlight, and place the cursor at the end of the line. Press the [Enter] key to create a new line below the word Hi. Now, press down the [Ctrl] button and hold it down. Now tap the [v] key and let go of both. A copy of the word Hi should now be pasted in below the original. (You could also have used the edit menu.)
<HTML>
<HEAD>
<TITLE>
My 1st page
</TITLE>
</HEAD>
<BODY>
Hi
Hi
</BODY>
</HTML>
Save the changes, and switch back to your browser. Refresh/reload (Internet Explorer can be refreshed by using the [F5] key. )
You should now have two Hi's, but are they one on top of the other?
No. I'll bet they are side by side.
Why? Because the browser ignored the white space separating the two, and thus they are displayed side by side.
In Microsoft Word, you start a new line by inserting a line break... so let's force a line break here. In your text editor, make the following change, and save.
<HTML>
<HEAD>
<TITLE>
My 1st page
</TITLE>
</HEAD>
<BODY>
Hi <BR>
Hi
</BODY>
</HTML>
Notice that the break tag <BR> does not have an ending component, as this tag is not surrounding text in order to format the text for display. You don't start breaking your leg, then finish breaking you leg later... it is just a break!
Switch to your browser, refresh, and you should now see the two Hi's displayed in stacked fashion.
Now, when we read a newspaper, we know when a new story starts, because of headlines. Headlines are different sizes, bold, and always are on on a different line than the story. So, let's try to add one of the 6 headlines by make the following changes, and note the results in your browser. Remember, every time you make a change in your editor, save your document, switch to your browser, then refresh/reload.
Recall also, tags normally surround the text that they will format for the browser.
Only the <BODY> section will be changing this time, but the other tags must still be on your document. First we'll get rid of the <br>, and surround the first word Hi with a headline size 6 tag set.
Color Charts
Our 8 crayon box colors, in hex :)
| 000000 | . | 0000FF | . |
| 00FF00 | . | 00FFFF | . |
| FF0000 | . | FF00FF | . |
| FFFF00 | . | FFFFFF | . |
More on colors here
What else goes in web page?
Oh yes... now, let's add a picture.
Open Google and select to
search for Images. Type in something, such as Money or Lincoln, and search. You
will be presented a list of images; right click one of those images, and choose
Save Picture As...
Make sure you save the picture in the same folder as the web page you are working
on, and give it a short, memorable name. (I'll call mine 'prez.jpg'). You can also right click the file below, instead.
NOTE, this is 'fair use' of a copyrighted image, since only you are viewing
it. You may NOT use this image on web pages that you post to the Internet. Review
Copyrights below, if you aren't sure how to use copyrighted images
Now, switch back to your text editor and insert the following line.
<HTML>
<HEAD>
<TITLE> My first web page </TITLE>
<BODY TEXT="#FFFFFF"
BGCOLOR="#000000">
<H2>hi</H2>
Hi<BR>
<img src="prez.jpg">
</BODY>
</HTML>
Then, switch back to the browser, and refresh.
Finally, we'll create a link, using the anchor tag. An anchor tag allows you
to not only move to another site, but to later return to sight you came from
by using the back button, hence the anchor name. Just as the image
tag required the source attribute to point to the location of
the image, the a tag requires an href attribute
to point to the fully qualified URL of the site you wish to link to. And just
as the H2 tag set needs to surround the text to render as a
headline, the a tags need to surround the text that will become
the clickable link.
Note, shown below is the entire document... your work in your text editor should
be identical, aside from URL!
Please replace URL below with a favorite web site, such
as
http://www.google.com.
(You must include the http://)
<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY TEXT="#FFFFFF"
BGCOLOR="#000000">
<H2>hi</H2>
Hi<BR>
<img src="prez.jpg"><br>
<a href="URL"> Clickable Text </a>
</BODY>
</HTML>
Keep Going, there is more below :)
|
An eight minute video is available illustrating the following steps. I recommend you read over this web page first, then watch the video to see the steps being performed. This video is available here, or at the top of the page. YouTube Version http://www.youtube.com/watch?v=Dx__92GizG4 |
Keep Going, there is more below :)
For more info on copyrights, hexadecimal colors, etc., refer to R. Craig Collins' Other Useful Web Pages, or Web Page Design page
How to check for errors in HMTL
Tag set: <body></body> Body
Syntax (required and [optional attributes]) <body
[text="color"] [bgcolor="color"]>text</body>
What does it do?: Contains the portion of the web page that displays in the
main window.
Attributes change the appearance of the entire web page
text="color" over-rides the default text color and
bgcolor="color" over-rides the default background color
Example:
<body text="black" bgcolor="white">
Web page content </body>
Notes: Items to be displayed in the main browser window go between the <body>
and </body>
Tag: <img> Image
Syntax (required and [optional attributes]) <img
src=" ">
What does it do?: Displays an image
Example:
<img src="prez.jpg ">
Notes: since this tag does not surround to to format its appearance, no ending
</img> is required.
Tag: <a></a> Anchor
Syntax (required and [optional attributes]) <a href="URL">clickable
link text</a>
What does it do?: Surround text that can be clicked on to link to a different
web page
Attribute href points to the hypertext reference, or the address of the page
to link to
Example:
<a href="http://www.templejc.edu">Click
here for Temple College</a>
Notes: Text surrounded by <a></a> changes
color and is underlined.
If you have read over this page, you might want to see a eight minute video that illustrates the steps.