JOUR 202 Web Page Tutorial from Chris Harvey

Beginning Web Tutorial

For use in JOUR 202

On this page:

Getting Started
Headlines
Fonts
Hyperlinks
Rules
Background Colors
Page Source
Practice
Upload to Server

Using basic html to build a resume shell

Hypertext Markup Language is used to create, link and view documents on the Web.

The documents are written as plain text files with inserted codes that affect the document's appearance when viewed with a Web browser, such as Netscape Communicator or Microsoft's Internet Explorer. You can use a number of text editors to create html code for a Web file. However, many of these text editors, such as Word, insert undesirable coding into your html file.

To avoid this problem, we'll use Notepad for this exercise. It won't insert bad code.

Notepad is often buried in your computer's software under Accessories. To get there, try clicking on your bottom tool bar's Start button, then move your mouse to Programs, then Accessories. You should find Notepad there.

You'll be formatting your Web document with tags, created with less than and greater than symbols <> and words or letters sandwiched between those symbols.

Most html elements have a start tag and an end tag. The end tag includes a forward slash after the first less-than symbol: </>

The tags aren’t case sensitive, but it’s a good idea to type the letters and symbols inside the tags in small letters, to conform to the latest Web coding guidelines.

It’s also a good idea as you're creating your page with code to use extra hard returns (made with the Enter key on your keyboard) to make individual lines of code easy to find among the sea of sentences in your story. These hard returns won’t show up when you look at your document through a Web browser, but you will be able to see them in your Web editor or in your raw code in Notepad when you go in to make changes.

Getting started

Let’s create a Notepad file. Please save it as c:\lastname.htm (putting it on your computer's hard drive), or as a:\lastname.htm, if you choose to save it on a disc to take the work home with you. Please type the document name all in lowercase letters. (Note that we’re using htm, not html, as our ending extension so that people with Windows 3.1 will not have trouble viewing your document.)

Beginning at the top of your open document, start creating the skeleton of your html file, by typing each of these words or acronyms and symbols on a separate line:

</title>
</head>
<body>

</body>
</html>

What you should notice first of all is that html opening and closing tags are used in pairs. The first tag in your file, to start the page of text and codes, should be html; the last tag should be /html.

Order makes a difference with tags; they’re generally nested on a page:

<a> then , followed by , then </a>.

So if you have a string of code surrounding a sentence or phrase, you'd close out each tag in the reverse order that you typed it.

Ex: The Artful Dodger

The head tag, HEAD, defines the top of your page. It’s where you type the title, which will show up in your Web browser to identify your page, and other advanced formatting information that won’t show up when you view the document in Netscape or Explorer. We won't go into the advanced formatting today.

Don’t confuse the header with a headline. They’re not the same. A headline will appear in the body area. But we're getting ahead of ourselves!

The title area is very important to your document! In most browsers, words typed here will show up in the colored title bar at the very top of the screen. The title bar identifies your page. And words in the title area will show up in bookmarks you create, to help you return to favorite pages. So choose your words carefully. Make the title succinct, but informative. Don’t use symbols, colons or backslashes in it.

Go ahead and type a title into the title area of your document. Because we're about to type a resume, it should include your first and last name and the word "resume," as in: Chris Harvey's resume.

The body area of your page is where you type the text and codes for your resume (or other document), including headlines, section heads and codes for pictures and graphics.

To get started, let’s type in your full name on the line after the opening body tag--but BEFORE the </body> tag. Let’s type your name twice, to experiment with size and alignment. (You’ll remove one of these names after you've viewed your early work in a Web browser.)

CHRISTINE HARVEY

Because we’re using this name as a headline, we’ll want to size it as one.

Creating headlines

One way to create headlines is with tags ranging from h1, the largest, to h6, the smallest. Some of you may be familiar with point sizes for headlines in print page layouts. h1 on a PC is equal to about 24 points of print type. h2 is roughly 18 points, h3 14 points, h4 12 points, h5 10 points, h6 8 points.

You can combine these headline prompts with an align prompt to either center your type or to flush it left or right. So to center your headline--or your name on your resume--and size it at 18 points (h2), here's what you'd type:

Type <h2 align="center"> before the first name. Immediately after your last name, type </h2> to create the closing tag.

Because you’ve typed a headline, a paragraph break is understood in the command and doesn’t need to be typed after the closing tag. A boldface is also understood in the headline command, without being explicitly typed, so it does not need to be typed before the name.

Fonts:

Many Web coders prefer to type headlines and other text using a font command, rather than one beginning h1, h2, h3, etc. I find it gives me more flexibility. Enclosing the word font between <> allows you to change the face (or style), size and color of the words you type, including headlines and body type. If you use this tag for headlines, I'd recommend adding a tag to bold it (and a tag to stop the bolding). You'll also need to open and close lines of type with and commands, to skip a line after the one you've just typed and start a new graph.

Example: Head Goes Here

Notice I closed out my font and bold and paragraph tags in the reverse order that I typed them, for a nesting effect.

Font sizes range from 1-7, with 3 being the default size, which is usually equivalent to 12 points on a PC. (A font size of 1=8 points, 2=10 points, 3=12 points, 4=14 points, 5=18 points, 6=24 points and 7=36 points.)

Font faces, or sizes, are serif (with feet) or sans serif (without feet). Sometimes Web designers use different font styles for headlines and body text. Often headlines are presented in a sans serif face, such as Arial or Verdana or Tahoma, while body text is sometimes typed in a serif style, such as Times Roman or Times New Roman or Garamond.

To change font colors, there are 16 predetermined colors for which you can simply type the word. Green, gray, silver, green, navy, purple, red, blue, black and white are among them. But it's probably wiser to use hexadecimal codes inside quotation marks and preceded by a # symbol to make the color of your choice. The numerals in these codes correspond to very specific shades of color. So it's more likely to conform to the shade you selected.

Ex: This changes the font face to Arial, the size to about 14 point and the color to grayish black.

bolds the line.

Check out this color chart for hexadecimal codes for other safe shades for the Web.

Sometimes Web designers include more than one font face in a string of code, separating each face with a comma. (As in: This way, if a user doesn’t have the first font installed on his or her computer, the browser will automatically display the type using the second face.

Remember that your computer will default to Times New Roman if you don't specify an alternative font face, or style.

Let's use this information to type subheads for your name, which you already typed twice.

Code the first name in a font size of 5, with an Arial face, and black type. (The computer will automatically make the text black, unless otherwise specified.)

Code the second name in a font size of 7, with a Times Roman face, and blue type.

Now save what you've typed (File/Save) and minimize the Notepad file by clicking on the minus symbol at the top right of your screen. To look at what you've done, double-click on the "My Computer" icon on your computer, double-click on the C or A or H drive to open this file, and double click on the file with your last name on it. It should open in a Web browser. Notice the difference in the way your name displays on the two lines. Now minimize this page, by clicking on the minus symbol at the top right of the browser. Double-click on the Notepad file saved on your tool bar and delete one of the names you typed. The one typed to the size you liked best should remain.

Not let's use the font tags to type resume categories, starting with the mini title of Work Experience:

Work Experience

Surround the words with html tags to create a paragraph break between this phrase and your name. Let's also give it an Arial face and make it 14 points tall, which translates to a size of 4:

Work Experience

A tag will boldface text. Go back into your education line and make it bold.

Work Experience

Notice that we didn't include an align="left" command in our tag. The computer will automatically align your type left, unless you give it a different alignment command, such as CENTER. We also failed to put in a color command. The computer will automatically make the text black, unless otherwise specified.

Below that Work Experience line, type in a sentence or phrase about your current job. I’d recommend using an Italics tag when naming the newspaper or broadcast outlet you work for. Or you could boldface it. To activate either command, you’ll need to surround it with the less-than, greater-than symbols, as in or ; you'll also need to close the tags with a or after the last word you want bolded or italicized.

So type:

University of Maryland College of Journalism, July 1998 to present: Full-time faculty member.

If you have more to add here, type it now. If you have a second paragraph, remember to start and finish this paragraph with and tags.

If, however, you simply wanted to drop your type to the next line, without any space between your lines of text, you'd type . This is a line break, rather than a paragraph break

A tag is one of the few Web commands that doesn't need a closing tag.

Use the font commands to create other sections of your resume, such as Education, Awards; Special Skills. Try changing the colors of some of these subheads, using the color="#xxxxxx" command inside the font tag. But before you do this, let’s again save your work in Notepad, so we don't lose it. Remember to keep your file name lowercased and to use your last name and a .htm extension. And let's minimize our Notepad file, double-click on the minimized browser on the tool bar, refresh that page and view our latest work.

Creating basic hyperlinks:

Before we look at what we've created so far in a Web browser, let's add one hyperlink to your education summary, so that if a user clicks on the words "University of Maryland College of Journalism," it will take them to the J-school home page.

To create a hyperlink, you need to know the Web address for the page you want to send users to. In this case, the College of Journalism home page is http://www.journalism.umd.edu//. The best practice is to cut or copy the Web address, or URL, from the "Location" area at the top of your browser, pasting it right into your document. This way you won't mistype the address.

Once you know the URL, it's easy to create the link. (To copy it, you can shade it with your mouse and type Ctrl C. To paste it in, you can use Ctrl V.)

Before the words "University of Maryland College of Journalism," I'll create the tag by typing:

The full URL is dropped between the quotation marks inside the tag.

After the word "Journalism," I would then close the hyperlink, with </a>.

A link off your site, using the full Web address, is called an absolute link. It is the full address.

Some coders create links to jump a user down the page they're already viewing, to another section or subhead. When creating these links, they typically only type a partial, or relative link. We won't be creating relative links today, but at least you will recognize the term when you hear it. Big sites often use relative links within a section, to make it easier to move files to another section should the site be redesigned.

An important hyerlink for Web resumes is the one for your e-mail address, which you'll likely want to center below your name at the top of your resume.

Here's the code to creat a link to my e-mail address:

<a href="mailto:charvey@jmail.umd.edu">charvey@jmail.umd.edu</a>

One last note about identifying yourself on a Web resume. Centered below your e-mail address, you may want to add a work phone number. I DO NOT RECOMMEND putting home phone numbers or home addresses on Web resumes. You'd be giving too many people easy access to this personal information.

Creating a horizontal rule:

A horizontal line, or rule, can create a tidy break between sections or paragraphs. No end tag is needed to close this tag.

Type HR, for horizontal rule, and enclose the two letters in carots: <hr>. Before the greater-than symbol, you can type additional words to alter the height and width of the rule. size=n gives you a height in pixels (a pixel is roughly equal to a point in size); width=w gives you the width of the rule in pixels. Or you can type the width as a percentage of the width of your page, as I did below. align=direction, as in center, left or right. noshade gives you a solid bar, with no shading.

So a full tag for a horizontal rule could look like this:

Body Background Colors:

You can change the background color of your Web page by adding a color to the body tag near the top. For instance, type <body bgcolor="#eoeoeo"> to get light gray.

<body bgcolor="#ffe7c6"> gives you light peach.

Remember that any background color that makes it difficult to read your text is unacceptable. So you need to keep them light! Also, be aware that you can’t change the color on segments of your page until you learn how to create tables inside tables. That's an intermediate skill that we won't be learning today.

Checking out others' work:

Web-savvy surfers know how to read the html code on others' work. If you're in Netscape, for instance, with washingtonpost.com's home page open, go to the top of your Browser and click on "View," then "Page Source." This will show you all the code used to create the page. Be aware that stealing large chunks of another site's code is unethical and often illegal; you're stealing their design work. If the site is copyrighted, it's a copyright violation to lift text, words or images. But looking at someone else's code to learn from it is A-OK!

Practice:

Try inserting a horizontal rule onto your resume.

Try experimenting with some very light background colors for the entire page.

Go ahead and type in the rest of the text for your resume, using small headlines for each category.

Transferring your completed page to the U. of Md. server (should work from all 3rd floor JOUR labs):

Once you've completed a basic Web page to your liking and have saved it, you should double click on the saved filed to view it in your Web browser. (To find it, double click on the My Computer icon on your computer screen, click on the T or C or A or H or X drive --wherever you saved your file on your computer!-- and click on your file.) If you spot problems when you view your page now, you can do more editing and save it again.

Now you have two options for making it live on the Web. You could either move your file to a commercial server, such as AOL Hometown or Yahoo!GeoCities, or shift it through a File Transfer Protocol, or ftp, to the campus server.

Let's concentrate on moving it to the campus server, since the university provides free access to students and faculty. You need a university e-mail account and a user name and password to do so.

From your bottom tool bar, click on "Start" and then move your cursor to Journalism Applications. (Depending on the model of your computer, you may have to click through "All Programs" to get to "Applications.") Slide your cursor to the right, opening a pop-up box for F-Secure SSH File Transfer.

Click on the white "Quick Connect" box in the upper left corner of the software.

It should list the "Host name or IP address" as wam.umd.edu

In the "User Name" box, type your directory ID (or user name).

"Port" should say 22.

Click on "Connect."

Next to Password, please type in your university e-mail password.

Now you'll see an interface with "local folders," for our journalism network, and "Remote Folders," for the university server. In the Web address box for the Remote folders area, change the last word in the URL from "home" to "pub."

To move a file or folder from our network to the university server, you must first find the file in the "Local Folders" area, by clicking on "My computer" and then clicking into whatever lettered drive you saved your file in.

To publish it on the university server, you drag and drop the file or folder, or copy and paste the file and folder from the local folders area.

To check how your page or pages looks live, open Explorer or Netscape, and type in your URL:

http://www.wam.umd.edu/~yourusername/yourfilename.htm

Unfortunately, if you've found typos once you've posted your pages live, you have to make corrections to your pages in our local journalism drive, then again drag and drop the files into the remote folders area.

If you take JOUR 352, you'll learn more advanced html coding, you'll build a Web biography package about yourself--along with news and feature packages--and you'll be introduced to the Web editing tool FrontPage and to the photo editing tool PhotoShop.

In advanced online classes offered by the college, students work as Web producers or multimedia reporters for Maryland Newsline. They create special reports, interactive quizzes, stories incorporating audio and photos, and other original content. They also archive the Maryland Newsline cable TV show on the Web.

Hope to see you in class!

--Chris Harvey, online bureau director

Top of Page

Last updated: 10/11/06 12:10 PM