Culture Web Page Assignment Guide

HTML Editor: Adobe Dreamweaver - Free Trial Download

Standalone Template: Click here to Download

Template Package: Click here to Download

There are a few things you must know in order to make your web page. If you would rather skip to the editing, download the template and fill it in with your own text. Make sure you read the comments in the file itself to see where to put your text!

Comments look like this: <!-- Insert body text after this comment -->

Open this template in your favorite text editor, word processor or ideally, HTML editor (If you use an HTML editor the layout will probably look weird--I don't know of any that display CSS layout properly). If you do open it in a word processor such as Microsoft Word make sure you Save As with the file type set to ASCII or Text - Do NOT save your original essay as a Microsoft Word HTML file when you are finished.

If you want all the associated graphics and CSS code to view your creation as it would appear on the web, click here to download a compressed ZIP file containing the template and images. If you do not know how to deal with compressed ZIP files, then Google it.

HTML Concept

Here is a nice guide to HTML for those who are interested. You can also download a free editor there (I recommend the Dreamweaver trial however): HTML For the Conceptually-Challenged

HTML is text encapsulated with two surrounding tags. If you want to modify a string of text you will surround it with an opening and closing tag which is like an instruction to tell the browser what to do.

For example, say you want to make you bold text. Surround the text you want with the tag <strong> and </strong> anything within there will be bold. </ > denotes the end of a block of instruction.

Let's try it:

Say my title is "Religion in Japan". You would use the following line of code to make it bold:

<strong>Religion in Japan</strong>

Your result would be: Religion in Japan

You can do the same with italics and underline with the <em> and <u>

<em>Emphasis</em> ends up rendering as: Emphasis

<u>Underline</u> will look like: Underline

Links

Here is an example of a link. Replace the website address with your own to link it. Remember to keep the quotes around the link.

<a href="http://www.csun.edu" alt="CSUN Webpage" target="_blank"> California State University Northridge </a>

This will look like: California State University Northridge

That's great, but how about pictures?

Images in HTML use the <img> tag with a few parameters such as the location of the image and the title.

src="image.jpg" and alt="Image name".

I'm sure you're confused if you have never done this before, so the best thing to do is just copy this example and change the image filename picture.jpg to your image file--leave the folder /images/ intact.

<div id="pictureRight">
<img src="images/picture.jpg" alt="Tutorial Image " />
<br />
<strong>Emperor Jimmu</strong>:<br /> Photo from <a href="http://www.clas.ufl.edu/users/jshoaf/Jdolls/boys.htm">

Image source</a>
</div>

What's all that other junk? We'll get to that in a bit. However, code will result in this:

Notice that your text will wrap around the image as long as it comes after the <div> container (where it ends, </div>).

What's a <div>? Basically it's like a box with certain attributes for formatting text or images that saves you time. The code for right, left, and center images are all contained within <div>s with their respective ID tags.

So, if you wanted your image on the left instead of right, use id="pictureLeft" in the above code.

If you want it in the center, use id="pictureCenter"

Here are some examples (with code):

<div id="pictureLeft">
<img src="images/picture.jpg" alt="Chado" />
<br /><strong>id="pictureLeft"</strong>
</div>

Center an image? No problem.

 

 

 

 

<div id="pictureCenter">
<img src="images/picture.jpg" alt="Chado" />
<br />
<strong>id="pictureCenter"</strong>
</div>

This is all very confusing - I hate computers. Why are you trying to kill me with nerd knowledge?

Sorry! I merely want you to share the pain that is HTML/CSS with me.

Use this template and replace the text with your text and the pictures with your own.

You could also theoretically make a web page in Microsoft Word, save it, and copy and paste the code right into this template. Make sure you pray to whatever deity you worship as well because it's probably going to come out as something other than you expected (and load very slow because of Word's excessive code size).

-Erek Yedwabnick