Creating simple web pages is not a difficult process. You can think of it as writing a bunch of text and marking up that text. The markup might say to place an image somewhere, some text should be bold, some text links to another page...
The way in which we mark up the text is with HTML. Together, HTML and
text make up the source for a web page. Source is usually
stored in files ending in .html or .htm.
In its simplest form, a tag begins with a less than
symbol (<), contains a special word or abbreviation,
and ends with a greater than symbol (>). Most tags
come in pairs, a start tag and an end tag.
For example, the title for a page is specified using:
<TITLE>Creating Web Pages with HTML</TITLE>
The start tag is <TITLE>, which marks the beginning
of the title. The tag </TITLE> marks the end of the
title. The text in between is the title's text.
/). Tags can be
in either upper- (<TITLE>), lower-
(<title>) or mixed case
(<Title>), but consistency is desirable.
Since tags are textual, we can create the source for web pages in any text editor.
Below are descriptions of some of the common tags we can use.
They are typically displayed more prominently than regular text and with space above and below them.
Headings use the <Hn> tag, where
n is a number from 1 to 6 (<H1> being the
most prominent).
For example, you could label the first section of a document with your name:
<H1>My Name</H1>
The above will be displayed as:
<H3>Heading</H4>
Normally, things like headings line up with the left margin. A heading can be centered (or right justified) by using an attribute in the start tag.
An attribute is just a keyword following by "=" and then a value. For example:
<H1 ALIGN="center">My Name</H1>
makes the heading centered:
<P> tag:
<P> This is just a silly little paragraph to show you that putting text on a separate line does not cause your browser to format it in that manner.
</P>, is optional.
The web browser decides where to break lines based on how wide the browser window is. I.e., the above might appear as:
This is just a silly little paragraph to show you that putting text on a separate line does not cause your browser to format it in that manner.
In other words, the space you type in the source is ignored. The following:
<P>
This is my first paragraph in a set of 2
paragraphs. The only point of these paragraphs
is to illustrate that the 2 paragraphs get merged
into one.
Here is the second paragraph. It is
real short.
is displayed as:
This is my first paragraph in a set of 2 paragraphs. The only point of these paragraphs is to illustrate that the 2 paragraphs get merged into one. Here is the second paragraph. It is real short.I.e., it is collapsed into one paragraph and the indentation is lost.
Use <P> at the beginning of each paragraph and they
will be displayed as separate paragraphs. For example:
<P>
This is one paragraph. <P> This is another.
displays as:
This is one paragraph.
This is another.
<BR> tag in those cases:
is shown as:Roses are red,<BR> Violets are blue,<BR> I like writing HTML,<BR> And so do you.<BR>
Roses are red,
Violets are blue,
I like writing HTML,
And so do you.
<BR> has no end tag.
<HR> tag to place a horizontal rule
(i.e., a separating line) on a page. It requires no end tag. Here
is a horizontal rule:
The <EM> tag is used to emphasize text. It is up to
the browser how it displays emphasized text (typically, it uses
italics). For example:
This is a sentence with an <EM>emphasized</EM> word.
is shown as:
This is a sentence with an emphasized word.
For stronger emphasis, use the <STRONG> tag.
For example:
I <STRONG>strongly</STRONG> disagree with you.
is displayed as:
I strongly disagree with you.
<B> tag.
<I> tag.
<U> tag.
All require end tags.
and the unordered list:
Ordered list just means that the items are numbered. The numbers are generated by the web browser, they aren't part of the source. In an unordered list the items are displayed with bullets.
To create an ordered list, you put the text inside of
<OL> tags. Each item must also start with a
<LI> tag (for List Item), as in:
<OL> <LI>Insert bread. <LI>Select darkness. <LI>Press button. </OL>
For an unordered list, it's the same but the tag is <UL>
instead of <OL>. The <LI> tag
doesn't require an end tag.
List items can be bigger than the short phrases we use above. They can be several paragraphs, contains links, etc.
.
If you know the location of an image on someone else's site or have a image
yourself, it's easy to include it in a web page.
Images are included using the <IMG> tag. The
SRC attribute of that tag is used to specify the location, i.e.,
the format of the tag is:
<IMG SRC="URL">
To include an image from someone else's site, you can do:
<IMG SRC="http://www.nyu.edu/projects/julian/sparklea.gif">
and to include an image that is in your web directory:
<IMG SRC="tree.gif">
<IMG> has no end tag.
The anchor tag, <A>, allows you to make clicking on
some text go to another web page. Most browsers will indicate an
anchor by putting it in a different color and by underlining it:
TV listings
The <A> tag has the following syntax:
<A HREF="URL">Click on this text</A>
where URL is the page's location and the text that will be
clicked on goes between an <A> tag and its end
</A> tag. For example:
<A HREF="http://tvguide.com">TV listings</A>
is the source for the above link.
In addition, there are tags (that we haven't yet discussed) that any well-written page should include, like:
We'll start by creating a file, bob.html, to hold the HTML
for the main example page. Start up a text editor to create that
file:
% emacs bob.html &
The first thing we'll type into that file are 3 pairs of tags all HTML files should have:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> |
I.e., all the HTML in a file should be inside <HTML>
tags. That is broken down into 2 sections: the head of the
document, indicated by <HEAD> tags and the
body, indicated by <BODY> tags.
The head section should contain the title of the page (the text shown in the titlebar of the web browser). The body will contain everything that is viewed on the page.
Let's start by adding a title and a centered heading for the page:
<HTML> <HEAD> <TITLE>Bob's Page</TITLE> </HEAD> <BODY> <H1 ALIGN="center">Bob's Corner</H1> </BODY> </HTML> |
Since we now have a page with some content, we can view it in a web browser:
bob.html in your text editor.
bob.html.
You should see the title on the web browser's titlebar and the heading for the page.
Next, let's start the 1st section of the page. We'll give this section its own heading (leaving it non-centered this time) and we'll add the first paragraph:
<H1 ALIGN="center">Bob's Corner</H1> <H2>Bob</H2> <P> Bob was born in a valley of the Rocky Mountains and was raised by trees. When Bob turned 18 he could no longer suppress his desire to seek out the lights he had seen shining in the distance. He left the valley and discovered the city where he now makes his life. |
Let's now see what it looks like in the web browser:
Let's continue by adding the 2nd paragraph:
<P> Bob was born in a valley of the Rocky Mountains and was raised by trees. When Bob turned 18 he could no longer suppress his desire to seek out the lights he had seen shining in the distance. He left the valley and discovered the city where he now makes his life. <P> It took several years for Bob to master urban speech as he had grown up using <EM>tree speak</EM>. |
Save the file and reload it into the web browser to see it.
At the beginning of the 3rd paragraph, we need to put an image. There is an image of a tree on the page:
http://www.nyu.edu/projects/julian/venicetrees.html
One way we can include the image is by going to that page and finding
its URL. Then, include its URL in an <IMG> tag:
<P> It took several years for Bob to master urban speech as he had grown up using <EM>tree speak</EM>. <P> <IMG SRC="http://www.nyu.edu/projects/julian/sparklea.gif"> |
View Bob's Page to see that it worked.
The other way to use the image is to download it into your directory:
tree.gif in the same directory as
your file bob.html.
<IMG> tag so that it refers to that local copy.
<P> It took several years for Bob to master urban speech as he had grown up using <EM>tree speak</EM>. <P> <IMG SRC="tree.gif"> |
View the change in the web browser.
Next, we will finish the 3rd paragraph with some text that links to a list of Bob's favorite tree sites:
<P> <IMG SRC="tree.gif"> Bob likes <A HREF="trees.html">trees</A>. |
Those links will be on a separate web page that we've decided
to name trees.html. We'll work on that page when we're done
with Bob's main page.
We can finish up Bob's main page with its 2nd section, for "Favorite Poem":
<H2>Favorite Poem</H2> <P> Bob's favorite poem is <EM>Ode to a Duck</EM>. Here it is: <P> O' how the duck doth<BR> Glide o'er the water<BR> And pronounce his majestic<BR> Presence with a <STRONG>Quack! Quack!</STRONG><BR> |
Since each line of the poem must start on a new line, note the use
of the <BR> tags.
Now, we're ready to work on the subpage, trees.html. In
your text editor, open a new file trees.html.
Remember, like all web pages, it needs some basic tags:
<HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> |
Again, we'll start by adding a title and main heading for the page:
<HTML> <HEAD> <TITLE>Bob's Tree Page</TITLE> </HEAD> <BODY> <H1 ALIGN="center">Trees for Everyone</H1> </BODY> </HTML> |
Now, we want to add a list of 3 web sites. We'll choose to put them in a unordered list:
<H1 ALIGN="center">Trees for Everyone</H1> <P> Here are some of Bob's favorite tree links: <UL> <LI> <LI> <LI> </UL> |
Each list item is a link:
<P> Here are some of Bob's favorite tree links: <UL> <LI><A HREF="http://www.nyu.edu/projects/julian/venicetrees.html">Tree Artwork</A> <LI><A HREF="http://www.vtonly.com/fallfoto.htm">Vermont Fall Foliage</A> <LI><A HREF="http://www.treeguide.com/treeguide/index.htm">Tree Taxonomy</A> </UL> |
Now that the page of tree links is complete, let's save it. Then, go back to the web browser and see if our link to it from Bob's main page works.
The only thing left is to add some horizontal rules, with
<HR>, to Bob's pages.
Also, keep in mind that you can't technically just grab text, HTML or images from anywhere. In general, those are all protected by copyright laws.