LESSON 1: WORKING WITH TEXT
< Back to table of contents
Next lesson >
|
TODAY's SUGGESTED
GOALS Understand the following concepts and terms:
|
HTML RESOURCES MATERIAL FOR GETTING STARTED:
ONLINE HTML REFERENCE GUIDE
On the Web:
· Webmonkey (www.webmonkey.com)
· HTML writer's guild (www.hwg.org)
· CNET's Builder.com (builder.cnet.com)
· World Wide Web Consortium (www.w3c.org)
· Lynda.com (www.lynda.com)
Printed material:
Elizabeth Castro, HTML 4.0 for the World Wide Web:
Visual QuickStart Guide, PeachPit Press.
Key Words:
HTML: HyperText Markup Language. The code used to create a Web page.
HTML lets a browser know how to display and format a given Web page's font,
hyperlinks and elements.
HTTP: HyperText Transfer Protocol - The set of rules, as defined by the
W3C (World Wide Web Consortium) that allows Web browsers and servers to exchange
data.
Hyperlinks: Elements, such as text, graphics, pictures and other object
embedded within a Web page's HTML code that contain connections to related Web
pages or elements. Users can simply click a hyperlink, and their Web browser
will access the information.
URL (uniform resource locater): The network-wide address used by a Web browser
for locating a specific document. The URL includes a Web server's domain name
and the specific file name for the Web page you're accessing.
W3C: The World Wide Web Consortium (W3C) was founded in October 1994 as
a consortium of international corporations interested in developing the Web
as a platform, developing common protocols that promote its evolution and ensure
its interoperability. W3C has more than 500 Member organizations and has grown
from developing standards to providing common ground from which the industry
can grow.
Setting up a document
Directory structures and file-naming conventions
· File-naming conventions:
You must follow certain rules when naming files inside HTML so that the images
and pages always display.
· Don't use spaces in names: If you use blank spaces, the browser will
not be able to display the file. If you need to break apart two words, use an
_ or a - instead of a space band.
· Avoid capitalization: Because UNIX is case sensitive, you will have
to remember exactly how you capitalized words. So you should always use lowercase
in naming files.
· Also, you're going to build your site on a hard drive and then upload
your files to a server. You must have the exact file structure in both places
if you don't want any broken links.
· For your Web site, you'll need a directory for your images and a root
folder that holds everything. Call the main folder WEB SITE. Under that, create
one folder called IMAGES. You should put your final PhotoShop image and any
other Photos or images you use on your site in that folder. All of your HTML
documents should go right into the root folder (WEB SITE).
· Name your home page index.html. Most Web servers recognize the index.html
as the default home page and will load that automatically without users typing
it in.
Create Your HTML Pages
Use any text editor to create an html document. On a Macintosh, use SimpleText.
Creating your page in html means adding the html tags that tells the browser
about the style that text should be. For example, if you want to put a heading
at the top of your page, you use one of the heading style tags.
Document tags
The first thing you type is the DOCTYPE tag, which tells the browser what version
of HTML you're using. This is the first line in your HTML document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
Meta tags set up keywords and content descriptions for your pages, indicating
to the search engines what this page, and your site, are about. All meta-tags
go between the end of your </TITLE> and the end of your </HEAD>.
Before your <BODY> tag.
<META NAME="keywords" CONTENT="Travel, travel photography,
photographs of China, China, travel writing">
The Description attribute sets a one-line description of your site, which will
display when a search engine lists your site.
<META NAME="description" CONTENT="Recent photos of western China and northwestern United States.">
The essence of HTML
HTML uses a combination of tags, attributes and values to display the results.
A sample line of code looks like this:
<BODY BGCOLOR="#FF0000">
· <BODY> is a tag
· BGCOLOR is an attribute of that tag and describes how that tag should
behave
· #FF0000 is the value of the attribute (it sets the hexadecimal color)
and usually has quote marks around it. Besides hex colors, values can also be
text, URLs, styles, numbers.
· The collection of these three commands together is called an element.
The first tags you include are the document tags: <html>, <head>
and <body>. These describe the document's overall structure.
<html>your document</html>:
The <html> indicates the content of your document is html. Note, there
is a closing tag.
These tags go at the very beginning and very end of the document.
<head><title>The title of your document.</title></head>:
The <head> tag contains descriptive information about the document, including
the title.
<body> the body of the document</body> All the rest of the document
is included inside the <body> tags.
The Title: The <title> tag is an important tag. The title pops
up in the page window when someone goes to the site. The browser also uses it
when you create a bookmark (the title is automatically the bookmark name).
Heading tags
There are six levels of heading styles <h1> through to <h6>. Headings
create headline-style type, which is larger and bolder than regular text. <H1>
is the largest heading and <H6> the smallest.
Paragraph and spacing tags
Carriage returns are not read in HTML. Word wrapping can occur at any point
in your text and is determined by the screen size in the browser. HTML ignores
blank lines and extra spaces. If you insert multiple spaces in your HTML they
will be read as a single space. To start a new line or paragraph you need to
use the line break and paragraph tags. To create extra space bands you use a
non-breaking space code. Note, these tags do not require closing tags.
<p>: Starts a new paragraph, leaving a space between the lines.
<br>: Starts a new line with no space between the lines.
: Inserts an extra space (non-breaking space)
Character formatting tags
To add formatting you can use these tags.
<b>text goes here</b>: bolds text within the tags
<i>text goes here </i>: italicizes text within the tags
<u>text goes here </u>: Underlines text within the tags
<tt>text goes here </tt>: formats text within the tags to
be monospaced or typewriter text
GOAL:
Create an HTML page for your own resume using the techniques you learned
in class.
