Web Coding/Production Tutorial from Chris Harvey

Beginning html

Jump to:

Getting Started
Headlines
Fonts
Hyperlinks and e-mail links
Anchor links
Rules
Background Colors
Practice
Photos and Graphics
Checking Out Others' Work
Free Code

Basic html tags

By Chris Harvey

Even if you're going to be using a Web-editing tool such as Dreamweaver to build your pages, it's good to know how to create and recognize the basic html tags that are used as the backbones of your pages.

Hypertext Markup Language is an evolving language used to create, link and view documents on the Internet. HTML 4.01 is being overtaken by XHTML, but the evolution has been gradual. HTML is also being complemented by Cascading Style Sheets (CSS), which help to control the look of text and the design of a Web page.

For today, we'll focus more on simple HTML as a starting point--but we'll discuss using in-line style when creating a single Web page. In subsequent sessions, we'll look at cascading style sheets, which are linked to a series of Web pages to control the look and style of them all.

HTML documents rely on inserted codes, or tags, to tell the computer how to display the information when viewed with a Web browser, such as Mozilla Firefox, Netscape Communicator or Microsoft's Internet Explorer. You can use a number of simple text editors to create html code for a Web file. However, many of these text editors, such as Wordpad and Word, insert undesirable coding into your html file.

To avoid this problem, we'll use Notepad for this exercise. It won't insert unintended 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 in the next popup.

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, which includes a forward slash after the first less-than symbol: </>.

It's a good idea to type the letters and symbols comprising your tag commands in lowercase letters, to conform to the latest coding formats.

Getting started

Let’s create a Notepad file. If you're taking JOUR 202 or a short tutorial, please save it c:\lastname.html (thus putting it on your computer's hard drive), or a:\lastname.html, if you choose to save it on a disc to take the work home with you. If you're taking JOUR 352/652, please save it as h:\lastnameresume.html, thus saving the work in your own class work area. You need to be logged in to our class network before saving to h.

Please type the document name all in lowercase letters; it’ll make it easier when people have to type your document name into a search engine to look for it on the Web.

Beginning at the top of your open document, start creating the skeleton of your html file, by typing each of these structural tags on a separate line:

</title>
</head>

<body>

</body>
</html>

You have created coding tags.

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>.

PLEASE NOTE that in newer versions of html or xhtml, the html tag is preceded by a longer string, called a document declaration. I don't expect you to memorize the document declaration; it will pop up automatically in Web editor tools. I simply expect you to know that "html" is part of the tag, and it describes what type of a page you are creating. Here's what a document declaration might look like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

When coding with html tags, ORDER MAKES A DIFFERENCE. Tags are 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 each tag in the reverse order that you typed it.

Ex: The Artful Dodger

The head tag defines the top of your page. It’s where you type the title, which will show up at the top of your Web browser to identify your page, and other advanced formatting information called Metatags.

Metatags won’t show up when you view the document in Netscape or Explorer, but they do help search engines to find relevant Web pages for a particular query. They also contain descriptive information about your page, that would be displayed in a search query.

Do not confuse the header with a headline. They’re not the same. A headline will appear in the body area.

The title area is very important to your document! In most browsers, words typed here will show up in the title bar at the very top of the screen. The title bar identifies your page. The title is also used by search indexes and engines such as Yahoo! to help locate your document on the Web. 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. Three to five words for a title would be a good choice.

If you're creating a resume, 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 your main page content appears, such as headlines, section subheads and codes for pictures and graphics and layout.

Here are some basic tags you'll need to know before creating your first page in class, a resume:

 creates a line of space between lines of text; close it with .

 centers the text that follows it; close with a 

<center> allows you to center text without the p space; close with a </center>

  drops your cursor to the next line, without creating a line of space. It does not need a separate closing tag.

 or  bold words; close with  and .

 and  italicize words; close with  and .

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 newspaper or magazine page layouts. H1 on a PC is equal to about 24 points of 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:

Another way of specifying sizes and styles for text is through the font command. 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.

The two most widely used font faces, or styles, on the Internet can be catgorized as serif (with feet) or sans serif (without feet). Often Web designers use different font styles for headlines and body text. Often headlines are presented in a sans serif face, such as Verdana or Arial or Helvetica, while body text might be typed in a serif style, such as Georgia or Times New Roman or Times.

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 specific shades of color. So it's more likely to conform to the shade you selected when users look at it from different platforms--on PCs, Macs, etc.

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

The bolds the line.

Check out Webmonkey's color chart at http://www.webmonkey.com/webmonkey/reference/color_codes/ for hexadecimal codes for other shades. And read Lynda Weinman's explanation of why some designers still only work with 216 "Web-safe colors."

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 or 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 or 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 Philip Merrill 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 br, enclosing it in <>. Example: . This is a line break, rather than a paragraph break.

A tag is opened and closed in the same 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 .html 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 and e-mail links:

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:

<a href="">

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.

Large sites typically use partial, or relative links, for story files within a section, to make it easier to move the files to another section should the site be redesigned. Relative links generally only consist of the page name, skipping the main part of the Web address, called the domain name.

A quick tip: To open up a new browser window from your link, include as an attribute in the <a href> tag. So it's: <a href="http://www.journalism.umd.edu" target="_blank"> to pull up the College of Journalism home page in a new browser window.

An important hyperlink 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 I'd use to create my link:

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

Try to type your link, substituting your e-mail address in the two spots.

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.

Links within documents, or anchor links:

Links can be used to send readers from one spot on a Web page to a different place on the same page--although occasionally they are used to sed readers to a spot below the top of another page. The bulleted links in the left-hand column of this page are examples of these jump-down, or anchor links.

When creating an anchor link, it's a two-step process. First you must create a link--the words users will click on. It should include a # symbol at the start of the URL. (You may use a partial, or relative link, if you're simply jumping readers around on the same page.) Then you must code in the anchor, or the spot on the page where you'll send readers to.

Example: To jump the reader down from the top of this page to the above subhead on anchor links, I typed the link information (see below) at the top of the page, and the anchor information next to the subhead. Only the link line will appear underlined.

Link: <a href="#anchorlink">Anchor links</a>

Anchor: <a name="anchorlink">Links within documents, or anchor links</a>

Creating a horizontal rule:

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

Type HR, for horizontal rule, and enclose the two letters in carots: <hr />. Notice that the horizontal rule tag opens and closes in the same tag. Before the greater-than symbol, you can type additional words, called attributes, to alter the height and width of the rule. size="x" gives you a height in pixels (a pixel is roughly equal to one point in size); width="x" 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, when the rule is viewed in Internet Explorer.

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="#E0E0E0"> to get light gray.

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

The six-letter code is a hexadecimal code, which mixes shades together virtually to get a specific hue. Web-editor tools have color charts that visually show what a code will look like; other color charts exist online as well.

Remember that any background color that makes it difficult to read your text is unacceptable. So you need to keep them very light!

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. When you've finished, save this again to your C drive on this computer, then insert the disc you brought with you and do a File/Save As to your A drive, putting this file onto your disc. If you're in JOUR 352/652, you should again be saving your work to h.

Adding photos and graphics to a page:

Once you have downloaded, sized and cropped a photo or graphic for use on your pages, you can type in a tag to call that image onto your Web page.

The tag you'll need is an image source tag, or <img src />. To correctly write this tag, you'll need to know the Web address of the image, and its width and height. You should also add an ALT attribute inside your tag, describing the image. To call in a frog graphic with a Web address of http://www.newsline.umd.edu/Harvey/frog2.gif, a width of 200 pixels, and a height of 155 pixels, here's what you'd type inside the tag:

To figure out the height and width of an image, right-click on it.

To link that image to another page, simply add a link tag before the image source tag, then close the link tag after the image source tag. So to send users from the frog image to a page about frogs, I'd type:

Checking out others' work:

Web-savvy surfers know how to read the html code on others' work. If you're in Internet Explorer, for instance, with salon.com's home page open, go to the top of your Browser and click on "View," then "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 copyrighted design work. Also be aware if the site is copyrighted, it's a copyright violation to lift text, photographs or graphics.

But looking at someone else's code to learn from it is OK!

Free Code and Tutorials on the Web

Some sites on the Internet do offer tutorials or coding help for free. HTML Goodies offers tutorials, as does and W3 Schools. Sites with free code include JavaScript Kit's clocks, calendars and scrollers; and FreewareJava.com's news tickers.

Top of Page

Created January 2001. Last updated: Feb. 10, 2009.

Copyright © 2001 and 2002, 2003, 2004, 2005, 2006, 2007, 2008 and 2009 Chris Harvey. Reproduction in whole or in part without permission is prohibited. Feel free to link to this resource page, but do not cut and paste it onto your own site.

Reporting & Research Writing Production Design Planning