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