Beginning html

Reporting & Research
Writing
Production
Design
Planning

Basic html tags

By Chris Harvey

Even if you're going to be using a Web-editing tool such as Dreamweaver or a content management tool such as WordPress 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 is also 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 on simple HTML as a starting point, with perhaps a touch of inline css. In subsequent sessions, we'll look at attaching cascading style sheets 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, Safari 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 on a PC for this exercise. It won't insert unintended code. (You may also use TextWrangler on a Mac.)

Notepad is often buried in your computer's software under Accessories. To get there on a PC, 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 can find TextWrangler in a Mac's Applications area.)

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: </>

Getting started

Letís create a Notepad file. If you're taking JOUR 202 or a short tutorial, please save it lastname.html. Please type the document name all in lowercase letters.

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:

<!DOCTYPE html>

<html>
<head>
<title>

</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 generally used in pairs. The first tag in your file, after the document declaration tag <!DOCTYPE html>, should be <html>; the last tag should be </html>.

When coding with html tags, ORDER MAKES A DIFFERENCE. Tags are generally nested on a page: 

<a> then <b>, followed by </b>, 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: <p><em>The Artful Dodger</em></p> 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 help search engines find your page, and other advanced formatting information called Metatags.

Metatags 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 google and 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:

<p> creates a line of space between lines of text; close it with </p>.

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

<strong> bolds words; close with</strong>.

em italicizes words; close with</em>.

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 layout. Unless you tell it otherwise, H1 on a PC is roughly equal to about 24 points of type. h2 is roughly 18 points, h3 14 points, h4 12 points (generally considered body type), h5 10 points, h6 8 points.

(NOTE: pixels are smaller than points. 12 points is about equal to 16 pixels, or 16px .)

You can combine these headline prompts with attributes to align the text to the center or to the right. So to center your h2 headline-- or your name on your resume-- here's what you'd type:

Type <h2 style="text-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.

Let's use headline tags to type resume categories, starting with Work Experience:

Surround the words with html tags to create a paragraph break between this phrase and your name. Try the <H3> tag.

Notice that we didn't include an alignment attribute in our <H3> or <p> tags. The computer will automatically align your type left, unless you give it a different alignment command, such as center. 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 <em> 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 <strong> or <em>; you'll also need to close the tags with a </strong> or </em> after the last word you want bolded or italicized.

So type:

<p><em>University of Maryland Philip Merrill College of Journalism</em>, July 1998 to present: Full-time faculty member.</p> 

If you have more to add here, type it now. If you have a second paragraph, remember to start and finish this paragraph with <p> and </p> 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: <br / >. This is a line break, rather than a paragraph break.

A <br /> tag is opened and closed in the same tag.

But before you go on, 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.merrill.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 in a PC, you can shade it with your mouse and type Ctrl C. To paste it in, you can use Ctrl V On a Mac, it's Command C and Command 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. 

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.merrill.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@umd.edu">charvey@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>

Bullets:

To create a bulleted list (using indented cirecles) on a Web page, start with a <ul> tag (for unordered list); start each item with an <li> tag (for list item). Open and close each, nesting your tags. Your code would look like this:

<ul>

<li> apples </li>

<li> peaches </li>

<li> pears <li>

</ul>

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.

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:

<img src="http://www.newsline.umd.edu/Harvey/frog2.gif" width="200" height="155" alt="cute frog" />

To figure out the width and height of an image, right-click on it. (On a Mac, then click on "Get Info," "More Info. The width is shown first, in pixels."

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:

<a href="http://cgee.hamline.edu/frogs/"><img src="http://www.newsline.umd.edu/Harvey/frog2.gif" width="200" height="155" alt="cute frog" /></a>

Checking out others' work

You can check out the 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. Codecademy and W3 Schools are good places to start.

Top of Page

Created January 2001. Last updated: Sept. 12, 2013

Copyright © 2001 and 2002, 2003, 2004,  2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012 and 2013 Chris Harvey. Reproduction in whole or in part without permission is prohibited.


Reporting & Research
Writing
Production
Design
Planning