Have you ever wondered how Internet webpages are made? This multimedia workshop will help you create your own! You will learn how to put a poem, a story, and pictures into a template designed for this project. When you're finished, you'll have a Literary Webpage to share with the world!
This workshop is available at
http://www.sonic.net/~patald/lesson/litpage/workshop.html; to
print it out, select File|Print... from your browser menu.
Write a poem and story suitable for Internet publishing. Although freedom of speech is valued on the World Wide Web, profanity and hatred are not cool. Try to write something you feel proud of. Remember to check your spelling and grammar for mistakes, and give each piece a title. Submit your drafts to your teacher for correction.
Visit the template for your webpage: If you are viewing this workshop with Explorer, click on this link: template.html. Otherwise, launch Explorer, select File|Open Location from the menu, type http://www.sonic.net/~patald/lesson/litpage/template.html in the location box, and press the Go button. Explorer will display the generic template webpage which you will be customizing for yourself.
While you are there, examine the layout of the template's poem, story, titles, and images. The template has a title, "My Literary Webpage Template", which is displayed in the browser window title bar. At the top of the webpage the main heading reads, "Welcome to My Literary Webpage Template!", while the poem's title is "A Poem" and the story's title is "A Story." The text of the poem is formatted with spaces, while the text of the story is arranged in paragraphs. There are horizontal lines between sections of the webpage, and two images help to illustrate and brighten up the text. And finally, at the bottom of the template, there is a link to send email to a generic address, "student@school.edu."
Now you have to copy the code from the template. The template, and in
fact all webpages, are written in HyperText Markup Language (HTML). You can
view the HTML code of any webpage in Explorer by selecting View|Page
Source from the menu. Do this while looking at the template. All HTML
is made up of tags and the content they surround. Most tags come in pairs, a
beginning and an end, but some stand alone. A typical tag would like like
this: <TAG ATTRIBUTE="Value">Stuff affected by the
tag</TAG> - where an attribute is a quality of the tag that can
be set to a particular value. Can you see how the code and the webpage
correspond? Now, select Edit|Select All to highlight all of the
HTML source code, and copy it by selecting Edit|Copy from the
menu.
Launch SimpleText. SimpleText automatically creates an untitled document
after being launched; this document can be used for pasting the HTML you
just copied. Select Edit|Paste from SimpleText's menu. Now select
File|Save As... and locate and open your student folder with the
dialog. The name of your webpage should be unique and indicate the purpose
of the page, such as portfolio.html. The .html part of the file
name is an "extension" which helps you and the computer remember what type
of file it is. Avoid using spaces and weird characters when naming your
webpage.
Edit the content of the template by replacing the generic poem and stories with your own writing, and by choosing colors and images. Here is a link to color names you can choose for your background, text, and links. The background and text colors should contrast so the page is easy to read, and the links should jump out. Remember to save regularly so you don't lose your work!
<!-- Welcome to the guts of the web. You are looking at HyperText Markup Language.
HTML is made up of text for a webpage surrounded by pairs of tags -->
<!-- Tags with exclamation points attached at the front are comments to
help you understand this coding. This is an example of a comment -->
<!-- Your webpage goes between HTML (HyperText Markup Language) tags -->
<HTML>
<!-- Special information about your webpage goes between HEAD tags -->
<HEAD>
<!-- STEP 1 - TITLE - Insert the title of your webpage between TITLE tags -->
<TITLE>My Literary Webpage Template</TITLE>
</HEAD>
<!-- Insert the content of your webpage between BODY tags -->
<!-- STEP 2 - COLORS - Modify the colors of your webpage with the BODY tag
attributes -->
<BODY BGCOLOR="white" TEXT="black" LINK="lime" ALINK="black" VLINK="lime">
<!-- STEP 3 - MAIN HEADING - Insert the main heading of your webpage
between H1 (heading one) tags -->
<H1>Welcome to My Literary Webpage Template!</H1>
<!-- Use the HR (horizontal rule) tag for visual division of sections -->
<HR>
<!-- STEP 4 - POEM TITLE - Insert the title of your poem between H2
(heading two) tags -->
<H2>A Poem</H2>
<!-- STEP 5 - POEM - Insert your formatted poem between PRE
(pre-formatted) tags -->
<PRE>
Roses are red
Violets are blue
Teachers are neat
Learning is cool
</PRE>
<!-- STEP 6 - POEM IMAGE - Modify the location of your image with the
IMG (image) tag -->
<IMG SRC="flower.jpg" BORDER="3">
<HR>
<!-- STEP 7 - STORY TITLE - Insert the title of your story between H2
(heading two) tags -->
<H2>A Story</H2>
<!-- STEP 8 - STORY - Insert your story's paragraphs between P
(paragraph) tags -->
<P>There was a student who wrote a very interesting story and
published it on the Internet.</P>
<P>The student's story was so interesting and written so well, she
became instantly famous.</P>
<!-- STEP 9 - STORY IMAGE - Modify the location of your image with the
IMG (image) tag -->
<IMG SRC="smiley.jpg" BORDER="3">
<HR>
<!-- STEP 10 - EMAIL ADDRESS - Modify your email address with the A
(anchor) tag -->
Please email <A HREF="mailto:student@school.edu">
student@school.edu</A> with your literary critique!
</BODY>
</HTML>
Here is what the HTML code looks like with all the comments removed and some indenting added. Do you think it is easy or hard to read?
<HTML>
<HEAD>
<TITLE>My Literary Webpage Template</TITLE>
</HEAD>
<BODY BGCOLOR="white" TEXT="black" LINK="lime" ALINK="black" VLINK="lime">
<H1>Welcome to My Literary Webpage Template!</H1>
<HR>
<H2>A Poem</H2>
<PRE>
Roses are red
Violets are blue
Teachers are neat
Learning is cool
</PRE>
<IMG SRC="flower.jpg" BORDER="3">
<HR>
<H2>A Story</H2>
<P>There was a student who wrote a very interesting story and
published it on the Internet.</P>
<P>The student's story was so interesting and written so well,
she became instantly famous.</P>
<IMG SRC="smiley.jpg" BORDER="3">
<HR>
Please email
<A HREF="mailto:student@school.edu">student@school.edu</A>
with your literary critique!
</BODY>
</HTML>
Pictures can illustrate ideas or add style to your webpage. If you have a drawing program such as Adobe Photoshop, you can paint a digital image. If you have a photograph or you like drawing on real paper, you can just scan your image with the File|Import|Twain Acquire... menu command. Your image should be no wider than 500 pixels (computer screen dots) or 7 inches. Most images, such as photographs, should be saved in JPEG format with a .jpg file extension at the end of the name. If the image has large areas of solid color or you want a background color to be transparent, save in GIF format with a .gif file extension. These are basically the only image formats that are used on the web. JPEG uses a fractal compression scheme to make the image file smaller, while GIF dithers the image to a small palette of colors. You may want to save original scans and artwork in the PhotoShop format in order to preserve detail and color information.
To include an image from a website in your webpage, you need to use its absolute address, which is a complete URL like http://www.sonic.net/~patald/lesson/litpage/flower.jpg. It is important not to plagiarize, so please ask permission and <CITE> your source. If you want to include your own image, you should use its relative location, so it has to be saved in the same folder as your webpage, or in a sub- or parent folder. A tag to retrieve an image from the same folder would look like <IMG SRC="smiley.jpg">, whereas accessing a subfolder resembles <IMG SRC="storyphotos/snapshot01.jpg">, and jumping up to a parent folder is symbolized by <IMG SRC="../classlogo.gif">. The / and .. notations are relics from Unix.