About Computer and Hardware and the Hot Topics of the World.......
Monday, September 9, 2013
Web-page designing
Web-page
design
When using the Internet’s World Wide Web, don’t be just a
looker; be a creator! Create your own Web pages and let everybody else
in the world see them!
Angelfire
The easiest way to create your own Web pages is to use a Web
site called Angelfire.
It’s free!
Angelfire is at www.angelfire.com. It used to be an
independent company, but now it’s owned by Lycos. (which also owns a similar site, Tripod, at ww w.tripod.com).
Restrictions
Angelfire lets you create any Web pages you wish, as long as
you keep them “clean”, so they don’t contain content or links to anything
that’s:
unlawful, harmful, hateful,
harassing, stalking, or containing viruses
defamatory, libelous,
ethnically objectionable, or pirated (copied without permission)
privacy-invading (or vulgar or
pornographic), especially if involving minors or viewable by minors
required to stay private (by
copyright laws or an employer’s nondisclosure agreement)
selling explosives, weapons,
securities, or non-existent goods
selling alcohol, tobacco,
controlled drugs (or pharmaceuticals), or unpackaged food
advertising gambling (or
raffles requiring a fee) or pyramid schemes
Unfortunately, Angelfire will automatically put an ad on your
Web page and restrict you (to 20 megabytes of Angelfire’s disk space, with a
limit of 1 gigabyte of transfers per month between Angelfire’s disk and people
viewing your Web page), unless you pay extra (to get a fancier plan):
Get
your own .com,
Plan’s name Cost Disk
space Bandwidth Forced ad? such as joe.com?x
Free free
20M 1G/month yes no
Entry
$1/month 40M 2G/month yes no
Basic
$3/month 100M 5G/month no no
THE Plan $10/month
5G 1T/month no yes
Create an account
Using your Web browser (such as Microsoft Internet Explorer),
go to www.angelfire.com.
Click “Try It Now for Free!” then “Sign up for one of these plans today!”
(which you see when you scroll down).
Click in the “Your New Website” box. Your Website will be
named “http://______.angelfire.com”. Invent a name to put in the blank. The
name cannot contain capital letters or spaces: it must be made of just
lower-case letters, digits, dashes, and periods. Type the name you invented
(such as “secretguide”) then click in the Password box. If the name you
invented is okay, the computer says “User name Available”; otherwise the
computer says “User name Unavailable” (probably because somebody else picked
that name) and you must try again to pick a name.
Next, invent a password (which must be at least 6 characters
long, with no spaces). Type the password in the Password box, press the Tab
key, type the password again, click “Next”, and click “Next” again.
The computer will say “Welcome”. Answer the questions about your
birthday, security, usage, gender, and newsletters, then click “Confirm”.
Angelfire Customer Service will send you an e-mail whose
subject is “Welcome to Angelfire”. Find it in your e-mail’s Inbox. Click the
first link in the e-mail.
The computer will say “Your account has been activated”. Click
“Start Building Now” then “Create a New Website”.
Change the text
You’re using a Website-creation program called Webon (pronounced
“web on”). It shows a Web page containing 5 blocks of text. In each block of text,
switch those words to your words. Here’s how to do that:
Drag across the first
block of text, which says “MY WEBSITE”. Type whatever heading you
want instead, such as “JOAN’S HOME PAGE”. Your typing will be automatically
capitalized.
Drag across the second
block of text, which says “My website’s subheading”. Type whatever subheading you
want instead, such as “Made with love”.
Drag across the third
block of text, which begins “This is your main content section. You should delete…” Type the main message you want instead,
such as “I was born yesterday. I want to die.”
Drag across the fourth block of text, which begins “This is your sidebar. This
sidebar is…” Type the sidebar message you want instead, such as “We won’t reply
to e-mails addressed to my goldfish.”
Scroll down to see the
fifth block of text, which begins “This is your footer. You can delete…” Drag across that
block of text, then type the footer you want instead, such as “Copyright by a
wronged woman.”
Format the text
You can easily format the text in blocks 3, 4, and 5. To do
that, drag across the phrase you want to change (so the phrase temporarily appears in white letters on a blue
background), then do one of these things:
Click one of the formatting
buttons: Bold, Italic, Underline, Align Left, Align Center, Align Justify,
Align Right, Ordered List (which means a numbered list), or Unordered List
(which means a bulleted list).
For the Font Size box
(which normally says “12px”, which means 12 pixels high), click its down-arrow
then click a different number of pixels instead. Your choices are 8, 9, 10, 11,
12, 14, 16, 18, 20, 22, 24, 28, 32, 36, 48, and 72.
For the Font box (which
normally says “Arial”), click its down-arrow then click a different font
instead. Your choices are Arial, Times New Roman, Verdana, Georgia, Trebuchet,
Courier New, Tahoma, Palatino Linotype, Impact, and Comic Sans.
For the Color box (which is
normally black), click its down-arrow then click a different font color
instead. The phrase will appear in the new color when you finish highlighting
the phrase: click elsewhere.
For the Background Color
Box (which says “BG” and is normally white), click its down-arrow then click a
different background color instead. The phrase will have the new background
color when you finish highlighting the
phrase: click elsewhere.
Notice that to format a phrase, you must drag across the
phrase beforehand. For example, if you want a phrase to be bold, you
must drag across the phrase before you click the Bold button.
Undo
If you make a typing mistake, here’s how to undo it: while
holding down the Ctrl key, tap the Z key.
That method undoes your last typing mistake, but it can’t undo
your last two typing mistakes, and it can’t undo formatting. If you
format a phrase wrong, format it again correctly.
Change the style
You’ve been using a style called Working Comp. To use a different style
instead, click “Styles” (which is at the screen’s top). You start seeing a list
of 152 styles, in alphabetical order. To see the rest of the list, click “Next”
several times. To go back toward the list’s beginning, click “Previous” several
times. If a style interests you, put the mouse pointer on it without clicking;
then you see a slightly larger picture of the style.
Click whichever style you like. Then you see the words you
wrote, reformatted to fit in that style.
If you don’t like that style, try clicking “Revert”, which
takes you back to a style you used before
(such as Working Comp).
When you’ve finished picking a style, click “Text” (which is
near the screen’s top-left corner).
Add links
Here’s how to make the phrase “house hunting” be underlined
and link to www.realtor.com:
Type “house hunting”. Drag
across that phrase (so it’s highlighted). Click “Link”. Click after the
“http://”. Type “www.realtor.com”. Click the green “Create” button.
This book was written by Russ Walter, whose e-mail address is
Russ@SecretFun.com. Here’s how to make your Web page let people send an e-mail
to Russ Walter, by clicking “write to Russ”:
Type “write to Russ”. Drag
across that phrase (so it’s highlighted). Click “Link” then the
down-arrow then “an e-mail address”. Press the Tab key. Type the e-mail address
“Russ@SecretFun.com”. Click the green “Create” button.
Then when a person accesses your Web page, “write to Russ” will
be underlined. If the person clicks “write to Russ”, the computer will
automatically run the person’s e-mail client program (such as Outlook Express),
automatically click “Create Mail”, automatically type “Russ@SecretFun.com” in
the “To” box, and wait for the person to type an e-mail message to Russ.
Final steps
When you finish editing your Website, click “Save” (which is
near the screen’s top-right corner) then “Publish” (which is next to “Save”)
then “Publish to the main page of the site” then the green “Publish” button. The
computer says, “Congratulations! Your site was published…”
If you want to edit further, click “Keep Working”; otherwise,
exit by doing this:
Click “Back to Angelfire” then
“logout” (which is near the screen’s top-right corner).
Edit your site
To edit a Website you created before, do this:
Go to www.angelfire.com.
Click “Login” (which is at the top). Type your user name (such as
“secretguide”), press the Tab key, type your password, then click the green
“Log In” button. Click “Edit” (which is below “Create a New Website”).
You see your Website.
Edit it, then do the “Final steps” procedure again.
Extra pages
Here’s how to put extra pages onto your Website.
While you’re editing the first page you created, click “Pages”
(which is at the top) then the “Create a new page” icon. (That icon is near the
screen’s top-left corner, under “Text”, and shows a single sheet of paper with
a green plus sign.)
Invent a title for the page (such as “My Family”); type it and
press Enter.
Now the screen’s left edge shows you have 2 pages. The first
page (which you created before) was automatically called “Home”. If the new
page you’re creating is called “My Family”, the screen’s left edge shows this
list of pages:
1. Home
2. My Family
If you want to create a 3rd page, click the “Create
a new page” icon again, type the new page’s title (such as “Our Friends”) and
press Enter again, so the screen’s left edge looks like this:
1. Home
2. My Family
3. Our Friends
The screen’s bottom is still devoted to showing what you typed
on page 1. To switch your view to page 2 or page 3, click the page’s name in
that list of pages, then click the “Jump to a page” icon (which is a sheet of
paper with a green arrow). That makes the screen’s bottom show the page you
requested. The heading you requested is at the screen’s top and has the page
name you invented. There’s no subheading. The sidebar is at the left instead of
the right. The main content section, sidebar, and footer are all blank, waiting
for you to type your words there. Below the
heading you also see this navigation bar —
HOME MY FAMILY OUR
FRIENDS
which your readers can click on to jump from page to page, after
you’ve finished creating your Website.
To see normal editing tools again (such as the Bold button),
click “Text” (which is near the screen’s
top-left corner).
HTML
Every page on the Internet’s Web is written in a computer
language called the HyperText
Markup Language (HTML).
Warning: if someone claims to know “HTML”, it could mean “HyperText
Markup Language” or “How To Make Love”. Ask which!
HTML uses these commands:
HTML command Ending Page
<a href=…> </a> 288
<a name=joys> </a> 289
<b> </b> 286
<big> </big> 286
<body> </body> 287
<body bgcolor=red> </body> 289
<br> 287
<font color=red> </font> 289
<font face=Arial> </font> 287
<font size=5> </font> 286
<form method=…> </form> 291
<h1> </h1> 286
<head> </head> 287
<html> </html> 287
<i> </i> 285
<input name=city> 291
<input type=button> 603
<input type=submit> 291
<li> 287
<link rel=…> 290
<noscript> </noscript> 604
<ol> </ol> 288
<p> 286
<pre> </pre> 288
<script> </script> 598
<script language=…> </script> 604
<small> </small> 286
<style> </style> 289
<sub> </sub> 286
<sup> </sup> 286
<table border=1> </table> 288
<td> 288
<th> 288
<title> </title> 286
<tr> 288
<tt> </tt> 286
<ul> </ul> 288
<!DOCTYPE HTML …> 287
<!--I was drunk--> 291
HTML uses these styles:
Style command Page
body {background:yellow} 289
body {color:red} 289
body {font-size:13pt} 289
h1 {color:blue} 290
h1 {font-size:40pt} 290
h1 {text-align:center} 290
p {margin-bottom:0} 290
p {margin-top:0} 290
p {text-indent:2em} 290
:hover {color:navy} 290
:link {color:green} 290
:visited {color:fuchsia} 290
Simple example
Suppose you want to create a Web page that says:
We love you
Notice that the word “love” is italicized (slanted).
To create that Web page, write this HTML program:
We <i>love</i> you
Here’s what that program means:
The <i> is an HTML tag that
means “italics”. Each HTML tag is enclosed in the symbols <>, which are
called angle brackets.
The </i> is an HTML
tag that means “end the italics”, because the symbol / means “end the”. The
<i> shows where to begin the italics; the </i> shows where to end
the italics.
To type that program, you can use two free methods: Notepad or Angelfire. I’ll
explain both.
Typing in Notepad
If your computer contains Windows, the easiest way to type that
HTML program is to use Notepad,
as follows.…
Launch Notepad. Here’s how:
Click Start then All Programs
then Accessories then Notepad. You see the Notepad window.
Make the Notepad window consume the screen’s bottom right
quarter. Here’s how:
If the Notepad window is
maximized (consumes the whole screen), make the window smaller by clicking the
restore button (which is next to the X button).
Drag the window’s bottom
right corner to the screen’s bottom right corner. Drag the window’s top right
corner to the screen’s center. Then the window consumes the screen’s bottom
right quarter.
Make Notepad do word wrapping. Here’s how:
Click “Format”. You see “Word
Wrap”. If there’s no check mark in front of “Word Wrap”, put a check mark there
(by clicking “Word Wrap”).
Click in the middle of the Notepad window. Type the HTML
program, like this:
We <i>love</i> you
Save the
program Save the program onto your desktop, and give it a name
that ends in “.html”. Here’s how:
Click “File” then “Save”.
Click the word “Desktop”
at the screen’s left edge. For Windows 7, click in the “File name” box.
Type any name ending in
“.html” (such as “joan.html”); to be safe, use just small letters (no capitals,
no spaces). Press Enter.
Your program’s icon arrives on the desktop but might be
covered by the Notepad window. Move the Notepad window (by dragging its blue
title bar) until you see your program’s icon.
The icon has an “e” on it. The “e” means the program works
with Microsoft Internet Explorer. It works with Microsoft Internet Explorer
because the program is written in HTML and ends in .html.
Run
the program Double-click your program’s icon. That makes the
computer run your program. (If a “Connect To” window appears, click “Cancel”
once or twice, to make the “Connect To” window go away.)
If your computer’s been set up properly (to use Microsoft
Internet Explorer as the main Web browser), you’ll see a Microsoft Internet
Explorer window that shows the result of running your program; it shows a Web
page that says:
We love you
Edit the
program If you typed and ran
the program recently, here’s how to edit it.
At the screen’s bottom, to the right of the Start button, you
see a wide button for Notebook. Click it. That makes the Notebook window appear
and be the active window. Then make any changes you wish to your HTML program.
For example, if you want the Web page to say “We tickle you”, change
“love” to “tickle” (by dragging across “love” and then typing “tickle”).
Go ahead: make that change
and any other changes you wish! Experiment! Go wild!
After you’ve edited the program, save the edited version (by
clicking “File” then “Save”).
To run that program, click in the Microsoft Internet Explorer
window (which hides behind the Notepad window), so the Microsoft Internet
Explorer window becomes the active window. Then click the Refresh button, which
makes Microsoft Internet Explorer re-examine your program and run your
program’s new version.
Edit old
programs Here’s how to edit an old program that you haven’t typed
or run recently.
Find the program’s icon on the desktop. Right-click that icon.
Click “Open with” then do this:
Windows XP & Vista: click
“Notepad”.
Windows 7: if you see
“Notepad”, click it; otherwise, do the following.… Click “Choose default
program”. Remove the check mark from “Always use the selected program” (by
clicking). Click the down-arrow to the right of “Other Programs”. Scroll down
until you see “Notepad” then double-click “Notepad”.
Make the Notepad window consume the screen’s bottom right
quarter. Make Notepad do word wrapping.
Then you see your HTML program. Edit it. When you finish
editing, click “File” then “Save”.
Typing in Angelfire
Here’s how to type an HTML program by using Angelfire instead
of Notepad.…
Go to www.angelfire.com. Start creating a Web page, using the
methods I described on pages 283-284.
While you’re typing & editing the main content section,
click “Add-ons” (which is at the top). You see 27 add-ons. Drag “Custom HTML”
(which is the last add-on) until it’s below the typing in the main content
section and is in the middle of a big black box that suddenly appears.
After several seconds, the computer says this sentence:
Click the “Edit” Link to add
HTML to this space.
Move the mouse pointer to that sentence, without clicking. Then
above that sentence, you see “Edit”. Click that “Edit”.
The computer says this sentence:
Paste or write your custom HTML
in the box below.
In the box below that sentence, drag across the sentence that’s
already there (which begins with “<p>”) then type your HTML program
instead. For example, type:
We <i>love</i> you
When you finish typing your program in the box, click the
green “Save” button (which you must scroll down to see).
Then you see a box showing the result of your programming:
We love you
If you want to edit your program further, move the mouse
pointer to that box (without clicking), then click the “Edit” above that box,
then edit your program further, then click the green “Save” button again (after
scrolling down to see it).
Simple HTML commands
Here are simple HTML commands you can give.
Italicize
To make a phrase be italicized (like this), type <i> before the
phrase; type </i> after the phrase.
Bold
To make a phrase be bold (like this), type <b> before the phrase;
type </b> after the phrase. To make a phrase be bold italic (like
this), type <b><i> before the phrase; type </i></b>
after the phrase.
Paragraph
If your document contains more than one paragraph, put <p> at the
beginning of each paragraph. For example, if you want a paragraph to begin by
saying “Motherhood is maddening!”, begin the paragraph by typing this:
<p>Motherhood is
maddening!
At the end of each paragraph, press the Enter key twice. Then
when you run the program, the computer will put a blank line below each
paragraph.
Title
To create a title, type <title> before it and </title> after it.
For example, to make your title say “Joan’s Home Page”, type this:
<title>Joan's Home
Page</title>
When you run the program, the computer will put the title in the
blue title bar
at the Web page’s top.
Fonts
You learned to italicize by saying <i> and </i>,
and to create bold by saying <b> and </b>. Here are other ways to
change the text’s font….
Size
You can make the computer can produce text in 7 sizes. Font size 1 is the
smallest; Font size 7 is the biggest. Here’s how big they are:
This is font size 1. It is 8 points tall.
This is font size 2. It is 10 points tall.
This is font size 3. It is 12 points tall.
This is font size 4. It is 14 points tall.
This is font size 5. It is 18 points tall.
This is font size 6, 24 points tall.
Font size 7, 36 points.
That’s how big the font sizes and point size look on paper and
a 14-inch monitor. (On a slightly bigger monitor, the font sizes and point
sizes look slightly bigger.)
Normally, the computer makes your Web page have font size 3.
To make a phrase be font size 5, say <font size=5> before the phrase; say
</font> after the phrase.
You can make part of a phrase be one size bigger, by saying
<big> before that part and saying </big> after that part. For
example, if the computer is making a phrase be font size 5 because you said
<font size=5>, you can make part of that phrase be slightly bigger (font
size 6) by saying <big> before that part and saying </big> after
that part. To make part of a phrase be one size smaller, say <small>
before that part and say </small> after that part.
If you said <font size=7> and then try to say
<big>, the computer will ignore the <big>, since the computer can’t
go bigger than font size 7. If you said <font size=1> and then try to say
<small>, the computer will ignore the <small>, since the computer
can’t go smaller than font size 1.
To make a phrase be subscript (like this), say
<sub> before the phrase, </sub> afterwards. To make a phrase be
superscript (like this), say <sup> before the phrase,
</sup> afterwards.
Heading
To create a heading (such as a chapter title or a newspaper headline), say
<h1> at the heading’s beginning and </h1> at the heading’s end,
like this —
<h1>Chapter 2: Laura
giggles at death</h1>
or like this:
<h1>USA declares war on hangnails</h1>
To do that, make sure you type the symbol “<”, then the
letter “h”, then the number one, then the symbol “>”, then the rest.
The <h1> makes the computer automatically create a new
paragraph in font size 6 and bold. Saying <h1> is similar to saying
<p><font size=6><b>.
If you want the heading to be centered (instead of at the
screen’s left edge), say <h1 align=center> instead of just <h1>.
If you say <h2> instead of <h1>, the computer will
make the font size slightly smaller (5 instead of 6), so you’ll be creating a
“less dramatic heading”, a subheading. If you say <h2> at the heading’s
beginning, say </h2> at the heading’s end.
You can create headings in 6 sizes:
<h1> produces font size 6
<h2> produces font size 5
<h3> produces font size 4
<h4> produces font size 3
<h5> produces font size 2
<h6> produces font size 1
To create a heading in font size 7, say <h1><big>
at the heading’s beginning, and say </big></h1> at the heading’s
end.
Tt
Normally, the computer makes the text’s typeface be Times New Roman (which
looks like this). If you want a phrase’s typeface to be Courier New (which looks like this and imitates a
typewriter and a Teletype), say <tt> before the phrase,
</tt> afterwards.
Arial
If you want a phrase’s typeface to be Arial (which
looks like this), say <font face=Arial> before the phrase,
</font> afterwards.
If you want a phrase to be font size 7 and Arial, say <font
size=7 face=Arial> before the phrase; </font> afterwards.
Compliance
If you want to create a Web page whose title is “Joan’s Home
Page” and whose body says “We love you”, you can write this HTML
program:
<title>Joan's Home
Page</title>
We <i>love</i> you
Although that program works with most versions of most
Web browsers, you’re supposed to add some extra lines, for 3 reasons:
to help other programmers
understand your program
to make sure the program works
with all browsers
to prevent getting fired from
your programming job
Head
& body You’re supposed to divide the program into two parts.
The first part, called the head,
begins with <head> and ends with </head> and includes the title. The
second part, called the body,
begins with <body> and ends with </body> and includes the paragraphs.
So your program should look like this:
<head>
<title>Joan's Home
Page</title>
</head>
<body>
We <i>love</i> you
</body>
(If you’re typing into the middle of an Angelfire page, do not
type a head, since Angelfire gave the page a head already.)
The
<html> warning To make your program even better, you’re
supposed to begin the whole program by saying <html> and end the whole
program by saying </html>, to emphasize that the whole program is written
in HTML rather than a different computer language. So your program should look
like this:
<html>
<head>
<title>Joan's Home
Page</title>
</head>
<body>
We <i>love</i> you
</body>
</html>
Is code
compliant? You should include all those extra lines —
<head>, </head>, <body>, </body>, <html>, and
</html> — to make your program comply with the standards that people
expect. Those lines help make your program be compliant.
I usually don’t bother including those lines, since I’m my own
boss; but if you’re employed, you should include those lines to keep your job.
Title
To be compliant, your program must include a <title> line.
DOCTYPE
To be compliant, you’re supposed to also put this line at your program’s top,
above the <html> line:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN">
That line brags that your program document is of this type: it
obeys the HTML standard, which is publicly available from the World Wide Web Consortium (W3C),
using the document type
definition (DTD) for HTML version 4.01 — except that you’re letting
yourself include some older HTML commands also, to be transitional and help
older Web browsers understand your Web page; and you’re doing all this in English (EN).
Actually, you’re supposed to include another line below that,
saying what Web site reveals the HTML 4 and 4.01 specifications; so your
program is supposed to begin like this:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
Hardly anybody bothers to include those two lines about
DOCTYPE. For example, Yahoo’s Web site (www.yahoo.com) and Microsoft’s Web site
(www.microsoft.com) omit both lines.
Even the inventors of HTML 4.01 don’t bother including the
second line in their own Web pages.
XHTML
HTML 4.01 was invented in 1999. Now committees are working to develop fancier
programming language, called the eXtensible HTML (XHTML), which is influenced by the eXtensible Markup Language (XML).
If you want to be compliant
with XHTML, adopt these habits:
In commands, use small letters (such as <p>) instead of capitals
(such as <P>).
At the end of each
paragraph, say </p>.
After each equal sign, put
quotation marks; so instead of saying <font size=5>, say <font
size="5">.
In XHTML, the top lines say:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml/1-transitional.dtd">
Lists
If you want your Web page to contain a simple list, say
<br> at the beginning of each list item.
For example, suppose you want your Web page to say:
Here are the favorite flavors:
chocolate
vanilla
strawberry
To do that, say <p> at the beginning of the paragraph,
<br> at the beginning of each list item, like this:
<p>Here are the favorite
flavors:
<br>chocolate
<br>vanilla
<br>strawberry
The <br> stands for “break out a new line”.
In XHTML, instead of saying <br> you must say <br
/> and make sure to put a blank space before the slash.
Bullets
Suppose you want your list to show bullets, like this:
Here are the favorite flavors:
• chocolate
• vanilla
• strawberry
To do that, say <p> at the beginning of the paragraph,
<li> at the beginning of each list item, like this:
<p>Here are the favorite
flavors:
<li>chocolate
<li>vanilla
<li>strawberry
Suppose you want the bullets to be indented, with a space
above the list, like this:
Here are the favorite flavors:
• chocolate
• vanilla
• strawberry
To do that, say <ul> above the list, </ul> below the
list, like this:
<p>Here are the favorite
flavors:
<ul>
<li>chocolate
<li>vanilla
<li>strawberry
</ul>
The <ul> stands for “unordered list”. When you type
<ul>, make sure you press the U and L keys on your keyboard (not the
number one).
The <ul> accomplishes two goals:
It makes the list be indented.
It makes your program be
compliant.
(A list without <ul> is not
compliant.)
In XHTML, the end of each list item must say </li>.
Numbers
Suppose you want your list to be numbered, like this:
Here are the favorite flavors:
1. chocolate
2. vanilla
3. strawberry
To do that, say <ol>
above the list, </ol> below the list, like this:
<p>Here are the favorite
flavors:
<ol>
<li>chocolate
<li>vanilla
<li>strawberry
</ol>
The <ol> stands for “ordered list”. When you type
<ol>, make sure you press the O and L keys on your keyboard.
Tables
You can create a simple table or a fancy table.
Simple
table Here’s how to create a simple table:
Tell the computer the text is
preformatted, by saying <pre>. Then type the table, by using the Space
bar and Enter key to line up the columns. Below the table, say </pre>.
For example, suppose you want your Web page to say:
Here are the bowling scores:
NAME SCORE
Jacqueline 200
Ann 137
Ed 75
To do that, say <pre> above the table and </pre>
below the table, like this:
<p>Here are the bowling
scores:
<pre>
NAME SCORE
Jacqueline 200
Ann 137
Ed 75
</pre>
The <pre> makes the computer use Courier New, as if you
had typed <tt>. Courier New is a convenient font for tables, because it
makes every character and space have the same width, so you can easily align
the table’s columns by pressing the Space bar several times.
The <pre> also makes the computer copy each Enter and Space
onto the Web page, unedited. (If you don’t say <pre>, the computer turns
each Enter into a Space and turns each pair of Spaces into a single Space.)
Fancy
table Let’s create a fancy
table, so the Web page says:
Here are the bowling
scores:
|
NAME
|
SCORE
|
|
Jacqueline
|
200
|
|
Ann
|
137
|
|
Ed
|
75
|
To do that, say <table border=1> above the table,
<tr> at the beginning of each table row, <th> at the beginning of
each column heading, <td> at the beginning of each data item, and
</table> below the table, like this:
<p>Here are the bowling
scores:
<table border=1>
<tr><th>NAME<th>SCORE
<tr><td>Jacqueline<td>200
<tr><td>Ann<td>137
<tr><td>Ed<td>75
</table>
The computer automatically makes the columns wide enough to
hold their headings and data. The computer automatically makes the column
headings be bold and centered.
The border=1 makes the table have a normal border. If you say
border=12 instead, the table’s outer border will be much thicker and shaded,
forming a beautiful 3-D picture frame that makes the table seem to pop out from
the screen and into the human’s face. Try it! You’ll impress your friends!
Links
You learned:
To make a phrase be italicized, say
<i> before the phrase, </i> afterwards.
To make a phrase be bold, say
<b> before the phrase, </b> afterwards.
Link to
other Web sites To make the phrase “house hunting” be underlined
and link to www.realtor.com, say this:
<a
href=http://www.realtor.com>house hunting</a>
Notice that before “house hunting”, you say what
“house hunting” is linked to, by saying
<a href=http://www.realtor.com>, which means “anchor (link) with a hypertext reference to http://www.realtor.com”. After “house hunting”, say </a>.
“house hunting” is linked to, by saying
<a href=http://www.realtor.com>, which means “anchor (link) with a hypertext reference to http://www.realtor.com”. After “house hunting”, say </a>.
Make sure you include the “http://”. If you omit that, the
link doesn’t work.
Don’t insert extra spaces. For example, don’t insert a space
after “http:”; don’t insert a space after “//”.
Most text on your Web page is black (on a white background).
Links are underlined and typically blue; but that if the link refers to a Web
page that was visited recently, the link turns purple (instead of blue).
Link to
your own Web pages To make the phrase “funny jokes” be underlined
and link to Web page you created and called “jokes.html”, say this:
<a href=jokes.html>funny
jokes</a>
That works just if you earlier invented a Web page named
jokes.html and put it on the same disk and in the same folder as the new Web
page you’re inventing. For example, if you’re inventing a new Web page on your
hard disk’s Desktop, jokes.html must also be a Web page on your hard disk’s
Desktop.
Suppose you create a Web page that’s too long to fit on the
screen, so when a human tries to read the page the human must scroll down. To
let the human avoid scrolling, do this: near the page’s beginning, put a table
of contents that links to later parts of the page. Here’s how. To make the
phrase “my joys” be underlined and link to a part of the page that discusses
your joys, say this:
<a href=#joys>my
joys</a>
Tell the computer which part of your page discusses your joys,
by beginning that part like this:
<a name=joys></a>
Link to
e-mail This book was written by Russ Walter, whose e-mail address
is Russ@SecretFun.com. On your Web page, you can let people write to Russ
Walter. Here’s how.…
To make the phrase “write to Russ” be underlined and link to
creating an e-mail to “Russ@SecretFun.com”, say this:
<a href=mailto:Russ@SecretFun.com>write
to Russ</a>
Then when a person accesses your Web page, “write to Russ” will
be underlined. If the person clicks “write to Russ”, the computer will
automatically run the person’s e-mail client program (such as Outlook Express),
automatically click “Create Mail”,
automatically type “Russ@SecretFun.com” in the “To” box, and then wait
for the person to type an e-mail message to Russ.
Try it! Go put that in your Web page, run your Web page, and
write an e-mail to Russ! If you don’t know what to say in the e-mail, just say,
“Hi, Russ, I’m testing my Web page’s e-mail link to you.”
Be brave! Let people accessing your Web page write an e-mail
to you. For example, if your name is Joan Smith and your e-mail address
is “jSmith@SecretFun.com”, say this:
<a href=mailto:jSmith@SecretFun.com>write
to Joan Smith</a>
Custom colors
You can change colors.
Change a
phrase Normally, the computer makes your text be black. To make a
phrase be red, say <font color=red> before the phrase; say </font>
after the phrase.
The computer knows the names of 16 colors:
Light color Dark
color
red maroon (dark red)
blue navy (dark blue)
aqua (greenish blue) teal (dark aqua)
lime (bright green) green (darker than lime)
fuchsia (bright purple) purple (darker than fuchsia)
silver (light gray) gray (darker than silver)
yellow olive (dark yellow, looks greenish
brown)
white black
If you want a phrase to be font size 7 and red, say
<font size=7 color=red> before the phrase; say </font> after the phrase.
<font size=7 color=red> before the phrase; say </font> after the phrase.
Change
the whole Web page On a normal Web page, the background is white,
the text is black, each typical link is blue, and each viewed link is purple.
Your program is supposed to be divided into two parts, called <head> and <body>. Instead of saying
just <body>, you can say:
<body bgcolor=yellow text=red
link=green vlink=fuchsia>
That makes the background be yellow, the text be red, each
typical link be green, and each viewed link be fuchsia. Choose any colors you
wish, from the list of 16 colors.
Usually, the background should be a light color (such as white
or yellow) and the text should be a dark color (such as black). If you want to
be shockingly different, do the reverse: make the background be a dark color
(such as black or navy) and make the text be a light color (such as white or
yellow). For example, try this:
<body bgcolor=navy text=white
link=lime vlink=yellow>
Warning: the human eye gets dizzy when it sees red next to
blue, so don’t choose “red text on a blue background” or “blue text on a red
background”. If you make the mistake of choosing those combinations, the people
viewing your Web site will get dizzy and fall asleep without reading your
words. Your Web site will put them into a hypnotic trance. The human eye also
has difficulty reading red (or maroon) next to black.
Style sheets
To change the appearance of your whole Web page, create a style sheet.
For example, suppose you want red characters on a yellow
background. You learned you can do that by changing <body> to this:
<body bgcolor=yellow
text=red>
Here’s a better way: in your <head> section, below the
<title>, say this:
<style>
body {color:red;
background:yellow}
</style>
That creates this style: throughout the body, make the text
color be red, the background yellow. That makes most of the text be red (though
normal links will still be blue underlined and the viewed links will still be
purple underlined). When you type the second line, make sure you type braces,
which look like this: {}. Don’t type parentheses, which look like this: ().
Normally, the text is font size 3, which is 12 points. If you
want the text to be slightly bigger (so people can read it more easily),
request a bigger point size, such as 13 points, by saying font-size=13pt, like
this:
<style>
body {color:red; background:yellow;
font-size:13pt}
</style>
That makes most text get bigger, but headings will be unchanged.
For example, <h1> headings will still be font size 6 (which is 24
points).
Should
you use style sheets? Style sheets were invented recently.
They’re new, hip, cool, and recommended.
For example, to get a yellow background, you ought to say
background:yellow in the style sheet, rather than bgcolor=yellow in the
<body>.
Using style sheets is recommended. Giving older types of
commands, such as bgcolor=yellow, is deprecated (which means “pooh-poohed”).
But many people still use older types of commands, such as
bgcolor=yellow, since they work even on old computers whose browsers were
invented before style sheets.
Links
You can change the color of links:
<style>
body {color:red;
background:yellow}
:link
{color:green} x
:visited
{color:fuchsia}
:hover
{color:navy} x
</style>
That makes most links be green, recently visited links be
fuchsia, and each link temporarily turn navy while the mouse hovers over it.
Headers
You learned that you can create big headers by saying <h1>, smaller
headers by saying <h2>, and even smaller headers by saying <h3>, <h4>, <h5>, and <h6>.
Normally, headers are the same color as the body text. For example, if
you made the body text be red, the headers are automatically red also.
To make <h1> headers be blue and all other headers be
maroon, say so in the style sheet, like this:
<style>
body {color:red;
background:yellow}
:link {color:green}
:visited {color:fuchsia}
:hover {color:navy}
h1
{color:blue}
h2,h3,h4,h5,h6
{color:maroon}
</style>
To make <h1> headers be blue and also centered (instead
of at the screen’s left edge), make the style sheet’s h1 line be this:
h1 {color:blue;
text-align:center}
Frankly, I hope you don’t choose those colors! Your Web page
will be too wild if you actually make the body text red, the background yellow,
the links green, the visited links fuchsia, the hovered links navy, the big
headings blue, and the smaller headings maroon. Choose more reasonable colors.
Normally, <h1> headers are font size 6, which is 24
points. To make <h1> headers be even bigger, give a bigger point size,
such as by saying:
h1 {color:blue;
text-align:center; font-size:40pt}
Paragraphs
You learned to put <p> at the beginning of each paragraph. Normally, the
<p> makes the computer put a blank line above the paragraph. If you want
the computer to omit the blank line and indent the paragraph’s first word, put
this line in your style sheet:
p {text-indent:2em;
margin-top:0; margin-bottom:0}
Sharing
Several Web pages can share a style sheet. Here’s how.
Using Notepad, create the style sheet, but omit the
<style> and </style> lines. For example, create this style sheet:
body {color:red;
background:yellow}
Save it on your Desktop, but give it a name that ends in .css
(which stands for Cascading Style Sheet) instead of .html. For example, name it
mystyle.css.
Then create your Web pages; but on each Web page, tell the
computer to use the style sheet you created (mystyle.css), by putting this line
in the <head> part of the Web page:
<link rel=stylesheet
href=mystyle.css>
That tells the computer to create a link, related to your style
sheet, which is located at the HTTP reference “mystyle.css”.
Upload
To let the public use your Web page, make sure your Web page
is on the Internet. Here’s how.
If you created the Web page by using Angelfire’s Webon,
make sure you published your page (by clicking the blue “Save” and “Publish”
buttons at Webon’s top-right corner).
If you created the Web page by using Notepad, you must upload your page
(copy it from your computer’s hard disk to an Internet-connected hard disk). To
upload your page, you need permission from a Web host, which will usually
charge you a monthly fee. For example, you can upload to Angelfire if you pay
Angelfire $1 per month to get Angelfire’s Entry service (which is better than
Angelfire’s Free service). If you’ve upgraded to Angelfire’s Entry service,
here’s how to copy your Web page to Angelfire’s hard disk:
Using your Web browser,
go to “www.angelfire.com”. Click “Login” (which is at the top). Type your user
name (such as “secretguide”), press the Tab key, type your password, then click
the green “Log In” button. Click “Upload Files” (which is at the screen’s
center and isn’t included in the Free version). Click the first “Browse”
button.
You see a list of files
that are on your computer’s hard disk. Double-click the file you want to
upload, such as “joan”. (If you don’t see that file in the list, try making it
appear by clicking the word “Desktop” and using the scroll arrows.)
Click the green “Upload”
button (which you see when you scroll down).
That file will now be on
Angelfire’s disk. For example, if your user name is “secretguide” and the file
was joan.html, it’s now available on the Internet as
“http://secretguide.angelfire.com/joan.html”. If the file was index.html, it’s
now available on the Internet as “http://secretguide.angelfire.com/index.html”
or more simply as “http://secretguide.angelfire.com” (since “index.html” is
your main page).
If your Web page includes
links to other files (such as other Web pages you created and style sheets),
make sure you upload those files also.
If you’re too cheap to pay Angelfire $1 per month, try this
crude trick:
Create a free Web page by using
Angelfire’s Webon. On that page, start the processing of typing your own HTML,
as I explained in the section called “Typing in Angelfire”. But instead of
typing lots of HTML there, copy your typing from Notepad to there (by dragging
across the HTML you typed in Notepad, then pressing Ctrl with C, then clicking
in Angelfire’s HTML editing box, then pressing Ctrl with V).
FTP
The typical ISP lets you also copy your Web page to your ISP’s hard disk by
using File Transfer
Protocol (FTP). For example, if your ISP is Galaxy Internet
Services (GIS), here’s how to copy your Web page to GIS’s hard disk:
Click “Start” then
“Programs”.
Click “MS-DOS Prompt”.
The computer will say:
C:\WINDOWS>
That should be in a black
window that does not consume the whole screen. (If the window consumes
the whole screen, so you see no colors, make the window smaller by tapping the
Enter key while holding down the Alt key.)
Type “ftp” and then the
name of your ISP’s FTP site. For example, GIS’s FPT site is called
“ftp.gis.net”, so you’d type “ftp ftp.gis.net”, to make your screen looks like
this:
C:\WINDOWS>ftp ftp.gis.net
At the end of that line, press
Enter.
If you’re not connected
to the Internet at the moment, the computer might ask you to type your
password. Do so and press Enter.
The ISP’s computer will
say “FTP server” and then “User”. Type the user name that the ISP assigned you
(such as “poo”) and press Enter.
The ISP’s computer will
say “Password”. Type the password that the ISP assigned you and press Enter.
The ISP’s computer will
say “logged in” and then say:
ftp>
Now you’re using the
ISP’s operating system, which is Unix. You can type Unix commands. At the end
of each Unix command, press the Enter key. (For example, just for fun, type the
Unix command “dir” and press Enter: you’ll see a list of files about you on the
ISP’s hard disk; each file’s name is in the rightmost column. If you’d like to
see a list of other Unix commands, type “help” or a question mark and press Enter.
To see a command’s purpose, type “help” then a space then the command’s name,
then press Enter.)
If you haven’t done so
already, make a directory (folder) called “public_html” on the ISP’s hard disk
by typing “mkdir public_html” (and press Enter).
Next, tell the computer
to send (copy) the Desktop’s joan.html file to the ISP’s public_html folder. To accomplish that, type so your screen looks
like this:
ftp> send Desktop/joan.html
public_html/joan.html
The computer typed the
“ftp> ”, but you must type the rest. Type it very carefully! Type forward slashes (/) not backslashes (\), since Unix
understands just forward slashes. Type a space after “send” and a space
before “public”; those are the only spaces you type. After “public”, type an
underline (by holding down the Shift key
while you tap the key that’s right of the zero key).
The computer will copy
the file and say “Transfer complete”.
When you finish using
FTP, type “quit” or “bye” and press Enter. The computer will quit using FTP and
quit using Unix and say “C:\WINDOWS>”. Then close the black window by clicking
its X box.
That file will now be on the ISP’s disk. For example, if the
file was joan.html, it’s now available on the Internet as
“www.gis.net/~poo/joan.html. If the file was index.html, it’s now available on
the Internet as www.gis.net/~poo/index.html or simply as “www.gis.net/~poo” or
even more simply as “gis.net/~poo”. (The symbol “~” is at your keyboard’s top
left corner, above the Tab key, and requires you to hold down the Shift key.)
If your Web page includes links to other files (such as other
Web pages you created and style sheets), make sure you upload those files also.
Special symbols
To put special symbols onto your Web page, type these codes:
Symbol Symbol’s name Code you type
© copyright ©
® registered ®
™ trademark ™
¢ cent ¢
£ British pound £
¥ Japanese yen ¥
¼ fraction
1/4 ¼
½ fraction 1/2 ½
¾ fraction 3/4 ¾
¿ inverted
question ¿
¡ inverted
exclamation ¡
¹ superscript
1 ¹
² superscript
2 ²
³ superscript
3 ³
< less
than <
> greater
than >
& ampersand &
é e acute é
É E acute É
(similar for á, Á, í, Í, ó, Ó,
ú, Ú, ý, Ý)
Comments
In the middle of your program, you can write a comment such
as:
<!--I wrote this program
while drunk-->
The computer will ignore the comment. The comment won’t affect
what appears on the Web page.
To write a comment, begin with this symbol —
<!--
and end with this symbol:
-->
The computer ignores whatever appears between those symbols.
Whatever appears between those symbols is a comment. The comment can be short
(part of a line) or long (many lines), but make sure you begin it with
“<!--” and end with “-->”.
Write comments to help other programmers deal with your
program! For example, give your name, the date you wrote the program, and your
address or phone number. Also include any technical comments you wish to make
about how your program works and what further improvements you hope to make.
Forms
You can make your Web page display a form and let the human
fill it in. For example, you can make your Web page say this:
I’m doing a survey of people
who view this Web page.
Tell me about yourself.
┌─────────────────────┐
What's your favorite ice cream flavor? │ │
└─────────────────────┘
┌─────────────────────┐
What's your favorite animal? │ │
└─────────────────────┘
This program makes it happen (if your e-mail address is jSmith@SecretFun.com):
<p>I'm doing a survey of
people who view this Web page.
<p>Tell me about yourself.
<form method=post
action=mailto:jSmith@SecretFun.com>
<pre>
What's your favorite ice cream
flavor? <input name=flavor>
What's your favorite
animal? <input name=animal>
</pre>
<input type=submit>
</form>
If you examine that program, you’ll notice these rules:
Above the form, say <form method=post> and give your e-mail
address. Below the form, say </form>.
To create each box, say
<input> and give a one-word name for the box.
To make the boxes line up, say
<pre> above them and </pre> below them.
At form’s
bottom, say <input type=submit>.
When a person runs your Web page, here’s what happens. The
computer shows the form and waits for the person to fill in the form. Each box
is wide enough to show 20 typical characters. If the person types more that the
box can show, the writing in the box automatically scrolls to the left, to let
the person type more.
Below the form, the computer puts a button labeled “Submit
Query”. The person is supposed to click that button after filling in the form.
When the person clicks that button, the computer e-mails the box’s contents to the
e-mail address mentioned in the <form> command. Here’s how:
First, the computer gives
the person this warning: “This form is being submitted using e-mail. Submitting
this form will reveal your e-mail address to the recipient, and will send the
form data without encrypting it for privacy. You may continue or cancel this
submission.”
The computer waits for
the person to click “OK”. (If the person clicks “Cancel” instead, the process
is stopped.)
The computer
automatically runs the person’s e-mail program (such as Outlook Express) and
automatically creates a new e-mail.
The e-mail’s “To” is the
e-mail address mentioned in the <form> command.
The e-mail’s “Subject” is
“Form posted from Microsoft Internet Explorer” (if the person used Microsoft
Internet Explorer) or “Form posted from
Mozilla” if the person used Netscape Navigator).
The e-mail’s “Message” is
blank, but the e-mail includes an Attachment, which is a Notepad document. That
document is called “POSTDATA.ATT” (if the person used Microsoft Internet Explorer)
or “Form posted from Mozilla.dat” (if the person used Netscape Navigator). For
example, if the person said the favorite ice cream flavor is strawberry and the
favorite animal is guinea pig, the document says this:
flavor=strawberry&animal=guinea+pig
The computer tries to
send the e-mail. If the computer is not attached to the Internet at the moment,
the computer either asks the person to connect or else just puts the e-mail in
the Outbox (which is a holding area for e-mail that will be sent automatically
when Internet connection is reestablished).
Then the computer stops
running the e-mail program and returns to showing the Web page that contained
the form.
When you receive the e-mail, try to open the attachment. The
computer will ask whether you want to open it or save it.
For example, if you’re using Windows Me, do this:
Click “Open it” then
“OK”.
If the attachment is
called “POSTDATA.ATT”, it opens immediately.
If the attachment is
called “Form posted from Mozilla.dat”, the computer warns “You are attempting
to open a file of type .dat”. To respond to the warning, press Enter then click
“Notepad” (from the scrolling list of programs) then press Enter again.
Customize
Here’s how to customize the form.
If you want a box to be 30 characters wide instead of 20, say
“size=30” like this:
What's your favorite ice cream
flavor? <input name=flavor size=30>
If you want the “Submit Query” button to say instead “Click
here to transmit”, say so in the type=submit line, like this:
<input type=submit
value="Click here to transmit">
You can put a Reset button to the right of the “Submit Query”
button:
<input
type=submit><input type=reset>
You can make the Reset button say “Click here to erase and start
over”:
<input
type=submit><input type=reset value="Click here to erase and start
over">
Check
boxes Your form can include check boxes, so your Web page says:
Check all that apply:
q
You have a pet dog.
q
You have a pet cat.
q
You can bark like a dog.
q
You got arrested for being sneaky as a cat.
To do that, say this below the </pre>:
<p>Check all that apply:
<br><input
type=checkbox name=dog>You have a pet dog.
<br><input
type=checkbox name=cat>You have a pet cat.
<br><input
type=checkbox name=bark>You can bark like a dog.
<br><input
type=checkbox name=purr>You can purr like a cat.
<p>
If the person clicks the “You have a pet dog” and “You can
bark like a dog” boxes, check marks appear on those boxes and the e-mail will
say:
dog=on&bark=on
Radio
buttons Your form can include radio buttons, so your Web page
says:
Choose just one:
m
You are male.
m
You are female.
Each radio button acts like a check box, except that the
button is round (instead of square), clicking it makes the middle get a dot
(instead of a check mark), and just one button can be selected (since clicking
a button makes all other buttons get unselected).
To create those radio buttons, say this below the
</pre>:
<p>Choose just one:
<br><input type=radio
name=sex value=male>You are male.
<br><input type=radio
name=sex value=female>You are female.
<p>
If the person clicks the “You are male” button, a dot appears
in that button and the e-mail will say:
sex=male
Create your
own .com
I invented my own .com and called it “SecretFun.com”, so you
can access my Web page by typing just “www.SecretFun.com”.
You can invent your own .com! Here are two cheap
ways to do it.…
Method 1: pay Angelfire
Create a Web site on Angelfire, but pay Angelfire extra to get
a .com name or switch to Angelfire’s fanciest plan (called “THE Plan”) which
includes a domain name at no extra charge.
(Page 283 explained how Argon, Xenon, and Krypton differ from
each other.)
Method 2: pay Go Daddy
Create a Web site cheaply anywhere (such as a free Angelfire
site or a cheap Neon Angelfire site or a free site anywhere else), then buy a domain name (such
as a .com name) from a domain
registrar such as Go Daddy, which charges:
$15 per year for .co or .ws
$12 per year for .com
$10 per year for .org or .net
$6 per year for .biz
$5 per year for .us
$2 per year for .info
Go Daddy was started by a famous nice guy (Bob Parsons, whose previous venture was called Parsons Technology). You can reach Go Daddy at www.GoDaddy.com.
Tell Go Daddy to charge you for the domain name (at $15/year
or less) and set up a parked
site (which is free because it just says “under construction —
coming soon”). Then tell Go Daddy to do domain forwarding (which is free) from
the parked site to the site you created at Angelfire. You can also tell Go
Daddy to do e-mail
forwarding (which is free) to your current e-mail address.
For example, I told Go
Daddy to do this:
create www.SecretFun.com (now $12/year)
forward www.SecretFun.com to www.angelfire.com/nh/secret
(free)
forward Russ@SecretFun.com to SecretGuide@comcast.net
(free)
So now you can see my Web site (www.angelfire.com/nh/secret) by
typing just “www.SecretFun.com” (which is easier to remember), and you can send
me e-mail by typing “Russ@SecretFun.com” (which you might remember easier than
“SecretGuide@comcast.net”).
If you wish, Go Daddy can also host your site (so you don’t need to
involve Angelfire), but Go Daddy charges more for hosting than Angelfire does.
Go Daddy will try to sell you many extra services (for surcharges), but you can
decline them all: pay just
$15 per year or less for a domain name (with free domain
forwarding and e-mail forwarding to your current addresses elsewhere).
Blogs
On a traditional ship, the captain’s supposed to write a daily
log, which is
a diary of what happened each day and how the ship progressed on its voyage.
You can create your own log — a daily diary of your
experiences and thoughts — showing how you progress on your voyage from birth
to death. You can put your log onto a Website, so others can read it. Then it’s
called a Web log,
or, more briefly, a blog.
In your blog, you can write about your loves & hates, desires &
despairs, successes & failures, pleasures & pains, laughs & tears.
The typical blog has a theme, such as:
you won’t believe what happened
to me today!
come peek at the latest adventures of me and my lover
here are my latest beliefs
about politics
I’ll share with you my
deepest thoughts about the meaning of life today
my newest ideas for the
book I’m trying to write — do you like them?
A person who writes a blog is called a blogger and is said to be blogging.
The Internet includes thousands of blogs, written by
people all over the globe, forming our blogosphere (the globe full of blogs, the
ideas they express, and the intellectual atmosphere they create). The typical
blog begins by showing the author’s newest thoughts, then shows older thoughts
below, in case you’d like to read them also. The thoughts are listed in reverse chronological order
(the newest thoughts first) and lets readers add their own comments about the
author’s thoughts. The author’s writings are just the tinder to start a fiery
group discussion that all readers can participate in.
Create a blog
The easiest way to create your own blog is to use a Website
called Blogger.com.
It used to be independent but was bought by Google. Here’s how to use it.
Go to
www.blogger.com.
If you have a Google account already (because you used
Blogger.com before or you used another Google service, such as gmail), do this:
Type your Google username.
Press the Tab key. Type your Google password. Click the “Sign in” button.
Click
“CREATE YOUR BLOG NOW”.
If you don’t have a Google account yet, the computer
will say “Create a Google Account” and wait for you to do this:
Type your e-mail address (such
as “SecretGuide@comcast.net”). Press the Tab key. Invent a password that’s at
least 6 characters long and type it; you’ll see black circles instead of what
you’re typing. Press Tab twice. Type the password again. Press Tab. Type your
name or nickname or however you want to sign what you write, such as “Russ
Walter”; type it. Press Tab. Type the nonsense word you see. Click the
Acceptance of Term box (which you might have to scroll down to see), so a
checkmark appears in that box. Click “CONTINUE” (which you might have to scroll
down to see).
Invent
your blog’s title (such as “Computer Culture”) and type it. Press
Tab.
Invent
your blog’s address. It must end in “.blogspot.com” (such as
“ComputerCulture.blogspot.com”). Type the part that comes before the
.blogspot.com (such as “ComputerCulture”). It must not contain any blank
spaces. Click “Check availability”; if the computer says “Sorry, this blog
address is not available”, invent and type a different address instead, click
“Check availability” again, and hope for better luck! When the computer finally
says “This blog address is available”, click “CONTINUE”.
The computer will say “Choose a template”. Don’t bother choosing a fancy template yet; just click
“CONTINUE” (which gets you the simplest template, which is minimal and called
Minima). The computer will say “Your blog has been
created”.
Click
“START POSTING”.
Publish a thought
Type
whatever thought you want to express for the world to see.
You can type several paragraphs. At the end of each typical
paragraph, press Enter twice.
At the end of the final paragraph, instead of pressing Enter
twice, press Tab.
Type a
list of keywords about your paragraphs. For example, if your
paragraphs are about ketchup and blood, type “ketchup,blood”. Put commas
between the keyboards.
Click in
the Title box. Type a title for those thoughts (such as
“Experiment with ketchup”).
Click
“PUBLISH”. The thoughts you typed and published are called your post; you have posted your
thoughts. The computer says “Your blog post published successfully!”
Click
“View Blog”. You see how your blog looks:
You see the blog’s title
(such as “COMPUTER CULTURE”).
You see the paragraphs
you wrote this time. Above them, you see the date you wrote them and the title
you gave them. Below them, you see your name (or nickname), the exact time you
published them, how many comments about those paragraphs were contributed by
your readers (probably 0 so far), and an alphabetized list of keyboards about
those paragraphs (“BLOOD, KETCHUP”).
Below all that, you see
similar info about any paragraphs you wrote on previous days (probably none so
far).
Sign out
When you finish looking at your blog today, click “Sign Out”
(which is at the screen’s top-right corner). Then you see the main Blogger.com
screen again (which is called www.blogger.com and also called
www2.blogger.com/start).
View your blog again
To view your blog again, go to the Website that’s your blog,
such as “ComputerCulture.blogspot.com”. (The computer doesn’t care whether you
put “www.” or “http://” before that.)
You see what you wrote.
If you want change what you wrote (by writing more or
deleting), you must be signed in. If you’re not signed in now, sign in by doing
this:
Click “Sign In” (which is at
the screen’s top-right corner). Type your username (which is your e-mail
address, such as “SecretGuide@comcast.net”). Press the Tab key. Type your
Blogger.com password. Click “SIGN IN” then “View Blog”.
Then do whatever editing you wish.
If you want to publish an
extra thought, click “New Post” (which is near the screen’s top-right
corner) then do the “Publish a thought” procedure I explained previously.
If you want to edit a
thought you published previously, find that thought (by scrolling down
until you see it). Below that thought, you see a pencil (to the right of
“POSTED BY” and “COMMENTS”). Click that pencil. Edit that thought, then click
“PUBLISH” then “View Blog”.
Handle comments
While you’re viewing a thought written by a blog’s owner,
trying clicking the word “COMMENTS” that’s immediately below that thought. You
see any comments that people have written about that thought.
If you want to type your own comment about that
thought, do this:
Type your comment. Your
typing will appear in the box at the screen’s top-right corner. You can type
several paragraphs. At the end of each paragraph, press Enter twice (except you
don’t have to bother after the final paragraph).
If you see a box called
“USERNAME”, type your username (such as “SecretGuide@comcast.net”)
then press Tab then type your Google password.
Click “PUBLISH YOUR
COMMENT”. The computer will say “Your comment has been saved.”
When you finish viewing and creating comments, click the
blog’s title (such as “Computer Culture”).
If you published your own comment, the blog mentions 1 more
comment about the blog owner’s thought; the extra comment is the one you wrote.
If you wish, repeat the process by doing this:
To see all the comments about
the blog owner’s thought, click the “COMMENTS” below that thought. Then, if you
wish, write another comment then click “PUBLISH YOUR COMMENT”.
Use the archive
While you’re looking at a blog, the screen’s right-hand side
says “BLOG ARCHIVE”. Below that, you see the titles of the thoughts that were
published this month.
If one of those titles interests you, click it: that makes the
computer show just that thought and the comments about it. When you finish
admiring that detail, return to the blog’s normal view by clicking the blog’s
title (such as “COMPUTER CULTURE”).
Subscribe to:
Posts (Atom)