LESSON 1: WORKING WITH TEXT
< Back to table of contents Next
lesson >
|
TODAY's TOPICS |
·
Lists - ordered, unordered and definition · Horizontal lines · Centering · Blockquotes · The comment tag |
STEP 1: 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.
EXERCISE 1:
Create a directory structure
STEP 2: 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).
EXERCISE 2: Setting up
Open your text editor (use simple text not Microsoft Word) and start a new document.
Let's start with your resume.
1. Open a new document in your text editor.
2. Type the following in:
<html>
<head>
<title>Your Name's Page</title>
</head>
<body>
YOUR TEXT WILL GO HERE
</body>
</html>
3. Save this document as resume.html
Note you can use this later when you start another page.
4. Between <title> </title> type "Your name's" Resume
5. Save your document in your WEB SITE directory as resume.html
STEP 3: Add text and format your page
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
EXERCISE 3:
Open up the resume.doc file and copy and paste it into your HTML text. Then
format the heading with Bold, Italic, underline and monspaced text.
STEP 4: The <font> tag
The font tag can be used to change the color, size and typeface of sections
of text. It does require a closing tag.
color=#000099color="blue" The color attribute is used to change the
color of text
size=6size=+2size=-3 The size attribute sets the size of the text by using a
number between 1 and 7. You can also use relative sizes by using + or -. The
size is relative to the default size, which is three.
face="arial, helvetica" The face attribute sets the font typeface.
You should always use common Windows and Mac fonts and spec more than one just
in case the user's machine doesn't have a particular font installed.
For example:
<font color=blue>
This text will be blue
</font>
<font face="arial, helvetica" size=+1>
This will be in arial or
helvetica and the size will be 4 (one more than the default 3)
</font>
EXERCISE 4: Choose a font for the resume text in your file. Use two different sizes in the document.
STEP 5: Add Rules
Horizontal lines
Horizontal lines (also called horizontal rules) can be used to separate blocks
of text, making it more readable.
Adding a horizontal line:
· Type <hr> where you want a horizontal line to appear.
There is no closing tag.
You can also change the appearance of horizontal lines by using combinations
the following attributes.
Size=4: The size attribute changes the line thickness. The thickness
is measured in pixels, with 2 being the default and also the smallest measurement.
width=300 width=80%: The width attribute is used to set the width of
the line. Measurements can be either in pixels or percentage of screen width.
align=left
align=right
align=center: The align attribute flushes the line left, right or centers
it.
Noshade: The noshade attribute removes the 3D effect from lines, giving
a solid black line instead.
For example:
<hr size=6 width=80% align=right noshade>
EXERCISE 5: Add a rule underneath the header in your resume.
STEP 6: Add lists
Using HTML you can create:
· Numbered lists (otherwise known as ordered lists)
· Bulleted lists (or unordered lists)
· Definition lists
· Nested lists
NOTE: You don't need to add a <p> or <b> tag after the line - the
<li> automatically puts in a break.
Numbered lists <ol>:
To create an ordered list you use the following tags:
<ol>Copy goes here</ol>: Start and end an ordered list
<li> List item.: The closing </li> tag is optional
TYPE="n": An attribute used within the <ol> tag and sets
the type of character used in the list. Values can be: A: capital letters; a:
small letters; I: capital roman numerals; i: small roman numerals; 1: numbers
(default
For example:
<b>Skills</b><ol>
<li>Type 100 words a minute
<li>Leap tall buildings at a single bound
<li>Swim the English Channel in under two hours
</ol>
This will appear as:
Skills:
1. Type 100 words a minute
2. Leap tall buildings at a single bound
3. Swim the English Channel in under two hours
NOTE: You don't need to add a <p> or <b> tag after the line - the
<li> automatically puts in a break.
Bulleted lists <ul>
Bulleted lists (unordered lists) are the same as numbered lists, except use
the <ul> tag instead of <ol>.
<ul>text goes here </ul>: Start and end a bulleted (unordered)
list
<li> List item.: The closing </li> tag is optional
TYPE="n": Type is an attribute of the <UL> Tag, and the
values it can use are DISC, CIRCLE or SQUARE.
For example:
<b>Large CA cities </b><ul>
<li>San Francisco
<li>Los Angeles
<li>Bakersfield
</ul>
This will appear as:
Large CA cities
· San Francisco
· Los Angeles
· Bakersfield
Definition lists <dl>
A definition list creates a hanging indent for a definition term,
which is useful in offsetting text. Note that it doesn't use the <li>
tag, but instead uses the <dt> and <dd> tags.
<dl> text goes here </dl>: Start and end a definition list
<dt>: The term (definition term)
<dd>: The definition (definition definition)
For example:
<dl>
<dt>SKILLS
<dt>FARMER
<dd>Grow organic tomatoes and beans
<dd>Rotate crops every two years</dl>
<dl><dt>MULTIMEDIA DESIGNER
<dd>Create director projects
<dd>Code HTML pages
</dl>
This will appear as:
EXERCISE 6: Add lists to your site with the lists on the resume.
STEP 7: Centering text
You can center elements on your page using the <center> tag. You can also
center text by adding the align=center attribute into paragraph or heading tags.
It can also be used to center other page elements like images and tables.
For example:
<center>
<h1>Centering text</h1>
You can center blocks of information with the center tag.<p>
</center>
<h1 align=center>Center text</h1>
<p align=center>You need to include the align=center attribute every heading
and paragraph tag.</p>
EXERCISE 7: Center the first block of text on the resume.
STEP 8: Block Quotes
Block Quotes
Use the <blockquote> tag to set off large blocks of text pulled from external
sources or if you just want to indent blocks of text from the left and right
margin.
Example:
<p>
I received this email from my travel agent yesterday:
<blockquote>Dear Wanda,<br>
Please make sure that you have all your travel arrangements made by June 4.
We think that prices will be going up after that date and your flight to Shanghai
will double in mid-June. <br>
Thanks,<br>
<br>
<br>
Betty<br>
Acme Travel<br>
</blockquote>
EXERCISE 8: Add a block quote to a paragraph on your resume.
STEP 9: The Comment Tag
The comment tag
The browser ignores comment tags, so this is where you want to put notes to
yourself or other HTML coders who make edit your file. You can also temporarily
hide sections of your document by commenting out <tags>. This can help
you debug files to see if certain lines of code are causing problems.
<p>
<!-This code will not appear when your document is opened in a browser window
-- >
<!-The following text was added in June because we to amend a previous error.
-- >
The tickets to Shanghai will be $1,500 roundtrip starting June 4.
</p>
EXERCISE 6: Add a comment tag to the top of your document.
HOMEWORK ASSIGNMENT:
Create an HTML page for your own resume using the techniques you learned
in class.