Chart of Topics
Essential Question:
How can I create a webpage to communicate or increase my audience
without purchasing a web building program?
NTES Standard:
4. Technology
Communication Tools
b.
Students use a variety of media and formats to communicate information
and ideas effectively to multiple audiences.
By the End of Grade 7-
Students
demonstrate knowledge of multimedia tools and concepts used by
the media industry (e.g., music, games, video, radio, TV, Web sites) to
entertain, sell, and influence ideas and opinions.
By the End of Grade 8-Students
know how to use a variety of media and formats to design,
develop, publish, and present products (e.g., presentations,
newsletters, Web pages) that effectively communicate information and
ideas about the curriculum to multiple audiences.
Resources: Copies of
Rubric/Self Check,
Student Rubric: Click Here
Points: Points
Save As: Index.HTML (have
to type the period and HTML)
*What is HTML?
*HTML Lesson 1
*HTML Lesson 2
*HTML Lesson
3
What is HTML Coding?
HTML
stand for Hyper Text Mark-up Language. It is a series of codes that
tells your browser how to display your text and/or pictures in a web
browser. This is done using what are called elements which are
created using tags. For example: a word in italics would be
indicated like <i>this</i> and would be seen in a browser like
this. The <i> is the opening tag and the </i> is the closing tag.
Almost all HTML elements have an accompanying closing tag.
REMINDER: Web Design
Pitfalls
You cannot
design an on-screen presentation the same that you would design a
printed page. In fact, Web Page design can be downright tricky. In
addition to making allowances for the difference in media between
monitors and the printed page, one must also take different web browsers
and platforms into consideration.
Different from a
printed page
Several
characteristics of the computer monitor make designing for on-screen
presentations different than designing for the printed page.
For one
thing, the layout of the screen is different than the printed page:
screens are wider and shorter. Therefore, web pages should be designed
in Landscape orientation. Furthermore, since screen resolution may vary,
try design pages in terms of pixels, rather than inches. 640x480 pixels
will ensure that web pages (even on small monitors such as those from
laptops) will still be able to view the page as intended. If more room
is needed and more pages cannot be added, then add more space to the
bottom of the page, but not the sides.
Secondly, the computer monitor can only
display 72 pixels per inch. Therefore, images with a greater resolution
are not necessary. This can be very good news for downloading times,
since picture files do not need to look good. On the other hand, text
can look blocky and more difficult to read. “Cleaner” fonts need to be
used for easier reading… sans serif fonts such as Arial, Tahoma, and
Verdana are ideal for body text on web pages. This is exactly opposite
from the printed page, whereupon oldstyle fonts are best.
Hardware
Like considering how
something will be printed, the good graphic designer will also have to
take some
hardware
issues into consideration.
Download time
For one thing, download time needs to be considered. A recent scientific
study has found that people given only a fraction of a second to
evaluate a design were able to make qualitative decisions about whether
they liked the design or not. It’s startling just how little time one
needs to form a favorable or unfavorable opinion.
When surfing the Internet,
people are still slightly more forgiving than a fraction of a second,
but they do expect to see a page download within 10 seconds… even if the
people have a slow dial‑up connection. Web Pages that take longer than
10 seconds are less likely to be read, even if the web page is actually
quite impressive. The audience simply won’t wait to see it. As a result,
graphics, animations and sounds need to be limited to allow for those
with a slower bandwidth. A popular solution to this problem is to create
two different web pages: those with limited (or no) graphics and ones
with a high‑speed connection.
Fonts
Not all computers
share the same fonts... much less so between PC’s and Macs. Unless the
font is embedded into the design (which greatly magnifies download
time), or the font is converted to a picture (which creates
pixellated
text, unable to be highlighted, copied or pasted by the web page viewer
or search engines), then one must design web pages using the most common
fonts. If unusual fonts are used in a page design, the visiting computer
will substitute the font selection for something else— possibly a
font that is pretty unreadable.
Colors
Web Browsers
share a common 216 fonts. If a web page uses colors other than these
216, then the visiting computer will substitute the colors, which is
called dithering.
While in many cases, the colors will be close to the original color, in
some cases they can be wildly different. The good news here is that the
software can help you decide which colors are common to most all web
browsers.
Back to
Top
Create a folder called WebPage in your profile by right clicking in the
white area and going to New Folder. Everything you plan on putting on
your webpage has to be in the folder.
You need to go to the Internet and save a picture into the new folder
you have just created. Save the picture as LOGO.
How do I make an HTML file without an editor?
Prepare your page in any text editor (Word, Notepad, Wordpad, etc)
complete with all of the tags (don't worry, we'll get to that). We will
Wordpad. When you are ready to save it select Save As in your
File options. Name your file index.html. You add the HTML file
extension (either .htm or .html) to the end of the file name, so they
browser can eventually show your page. Then go to the Save As Type
box and select text. This is very important. Even though you have
identified the file as HTML with the file extension, if you are using a
program like MS Word and you save as a word document the program will
automatically encode it as one. Then, in spite of all of your HTML
coding, a browser will not be able to read it.
Let's
get started- Add in your Word Pad what is in bold!
The
first thing you need to do is to tell the browser that this is an HTML
document. That is done with the <html> element. All other coding and
text follows it. The last thing in your document will be the closing tag
</html>. This tells the browser to stop there and ignore what is after
it.
So far your document looks like this:
1.
HTML
documents are broke into two sections, the header and the body.
The header contains things like META tags which are primarily used to
supply information to search engines, JavaScript which can create
special effects like rollover buttons, and title information, which will
set the title that is shown at the top of the browser. Since this is a
basic guide we will only deal with the title.
If you
look at the top of your browser you will see a blue bar called the Title
Bar that tells the title of the document. The title of this document is
'HTML Coding Lesson One'. .First you need to tell the browser that this
is the header using the head element (<head>), then use the title
element (<title>) to indicate what your title is. Your document should
look like this: 2.
<html>
<head>
<title>HTML Lesson One</title>
</head>
</html> |
Notice
that each tag has a corresponding closing tag and I always closed the
most recent tag first. This becomes very important later, when you will
start using a lot of text formatting elements. Some browsers will ignore
it if you don't close your tags correctly. Other browsers (in
particular, Netscape) won't display your document correctly. At this
point you can go into were you saved your document and click on the icon
and it will let you preview. You should have a title on the blue title
bar, but an empty browser. Don’t close the preview window.
Empty
browser windows are pretty boring, so we'll put something there. Go back
to the Wordpad. Directly after the header we will tell the browser that
this is the body, using the body element, then use the paragraph
element, to surround our text. It seems to be a programming standard to
make all first documents say 'Hello World' so let's not break with
convention.
Now
your document looks like this: 3.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<p>Hello World</p>
</body>
</html> |
In
this case, I closed the <head> tag before opening the <body> tag. They
are completely different parts and, if the head tag isn't closed, the
browser will still presume that everything is part of the header and
nothing will appear in the main browser window. Go to your preview
window and hit refresh, you should see your updates.
To add
more paragraphs just use another <p> tag, like this:
4.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<p>Hello World</p>
<p>I always
thought that HTML was hard, but this is easy to do. I can't
believe that it only took me a few minutes to learn the
basics.</p>
</body>
</html> |
That's
right, you now have all of the basics required to make a simple HTML
document. Go to your preview window and hit refresh, you should see your
updates.
Go
back to the Wordpad and hit SAVE just to be on the safe side!
If
your index.html document is not open, go to your folder where you saved
it. Right click on the Internet Icon named index<go to Open With, click
on Wordpad. This should open up your coding page.
Font Effects: Now let's look at a few
style tricks to jazz up your writing!
Bold: To make your writing bold you use the bold element <b>.. </b>.
Just take the word you want to bold and surround it with the open and close tags.
Add just like below: 5.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<p>Hello World</p>
<p>I always
thought that HTML was hard, but this is easy to do. I can't
<b>believe </b>that it only took me a few minutes to
learn the basics.</p>
</body>
</html> |
Go and
preview your page in the Internet Browser. Your word believe should be
in bold. Minimize Internet Browser and go back to your Wordpad.
Italics:
You can also put italics on a
word by using the italics element <i>… </i>. You can place 2 elements on
the same word like below. This is called nesting elements.
6.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<p>Hello World</p>
<p>I always
thought that HTML was hard, but this is easy to do. I can't
<b><i>believe </i></b>that it only took me a few
minutes to learn the basics.</p>
</body>
</html> |
Go and
preview your page in the Internet Browser by hitting refresh to see your
changes. Minimize Internet Browser and go back to the Wordpad.
Horizontal Lines:
You
can use a horizontal line to separate parts of your document. The tag
for this is <hr>. Currently, this is one of the few tags that does not
require a closing tag, however, new HTML conventions are encouraging a
self contained end within the tag. Some time in the future all new
browsers may require this self closing tag so it is a good idea to get
used to using it right now. The self closing tag is <hr />. This
produces a single line across the page immediately after wherever it is
placed. Let's try it. 7.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<p>Hello World</p>
<hr />
<p>I always
thought that HTML was hard, but this is easy to do. I can't
<b><i>believe </i></b>that it only took me a few minutes to
learn the basics.</p>
</body>
</html> |
The HR element has several attributes
that can change its appearance. One is WIDTH="##” with ## being the
number of pixels of width or ##% with ##% being the percentage of the
total page width. Another is ALIGN="***" with *** being one of left,
right or center. There are other attributes like shadowing
and thickness but they have been depreciated with the advent of HTML 4.0
and may not work in all browsers. Let's change the above code to have a
centered line that is 50% of the width of the page. Make sure and only
put spaces in correct spaces. 8.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<p>Hello World</p>
<hr
align="center" width="50%" />
<p>I always thought that HTML was hard, but this is easy to
do. I can't <b><i>believe </i></b>that it only took me a few
minutes to learn the basics.</p>
</body>
</html> |
Go
and preview your page in the Internet Browser by hitting refresh and see
if your bar shows up underneath your “Hello World.” Minimize Internet
Browser and go back to your Wordpad.
Hit Save on the Wordpad just to be safe! = )
More about Fonts
Font Face (Type)
So
far, although we have used bold and italics, the actual
font of our text has been whatever the browser default is (usually
Courier). You may wish to use a different font face(for example, this
document is done in Verdana). To change the entire document to a
different font, use the font element, with the opening tag immediately
after <body> and the closing tag just before </body>.
9.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<font face="verdana"><p>Hello World</p>
<hr
align="center" width="50%" />
<p>I always
thought that HTML was hard, but this is easy to do. I can't
<b><i>believe </i></b>that it only took me a few minutes to
learn the basics.</p>
</font></body>
</html> |
Go and preview your page in the
Internet Browser by hitting refresh and see if your font face changed
for the page. Minimize Internet Browser and go back to your Wordpad.
Of
course you might want to switch fonts for a line or two. You can nest
your font elements like this: 10.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<font face="verdana"><p>Hello World</p>
<hr
align="center" width="50%" />
<p>I
always thought that <font face="courier">HTML </font>was
hard, but this is easy to do. I can't <b><i>believe
</i></b>that it only took me a few minutes to learn the
basics.</p>
</font></body>
</html> |
Go and preview your page in the
Internet Browser by hitting refresh and see if your font face changed
for the word HTML. Minimize Internet Browser and go back to your
Wordpad.
Hit Save on the Wordpad just to be
safe! = )
Color Your World
So far
everything we have done has been in plain old black and white but you
can easily change the color of just a few words, or your entire
document. HTML code uses a hexadecimal color system that is in RRGGBB
(red, green, blue) format with the lowest increment of a color
represented by 00 and the highest by FF (the hexadecimal numbering
sequence goes 0 1 2 3 4 5 6 7 8 9 A B C D E F). The color number is
always preceded by #. #FF0000 is red, #0000FF is blue, mixing the two,
#FF00FF, is purple. You can experiment with the colors.
Click for a swatch of color codes.
Also, there are many downloadable color pickers available on the
internet. One of my personal favorites is #009999, which produces a very
nice
teal.
Changing the color of a word or two
Let's take the above example and change the word HTML to red.
To do this you will use the color attribute of the font element. Our code will now
look like this: 11.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<font face="verdana"><p>Hello World</p>
<hr
align="center" width="50%" />
<p>I
always thought that <font face="courier" color="#FF0000">HTML
</font>was hard, but this is easy to do. I can't
<b><i>believe </i></b>that it only took me a few minutes to
learn the basics.</p>
</font></body>
</html> |
Go and
preview your page in the Internet Browser by hitting refresh and see if
the word HTML changed to red. Minimize Internet Browser and go back to
your Wordpad.
Changing the whole document
To change the entire
document you will use the bgcolor (background color) and text attributes
of the body element. To set these attributes for a white background and
black text (which is the automatic default) the attributes are
bgcolor="#FFFFFF" text="#000000". Now, let's reverse them.
12.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<font face="verdana"><p>Hello World</p>
<hr
align="center" width="50%" />
<p>I
always thought that <font face="courier"
color="#FF0000">HTML </font>was hard, but this is easy to
do. I can't <b><i>believe </i></b>that it only took me a few
minutes to learn the basics.</p>
</font></body>
</html> |
Go and
preview your page in the Internet Browser by hitting refresh and see if
your background color and text color changed. Minimize Internet Browser
and go back to your Wordpad.
Hit Save on the Wordpad just to be safe! = )
A word
of caution when playing with color in your document, the business web
standard is still the old reliable black text, white document. It has
been proven to be the easiest to read and the least tiring on the eyes.
Still, many people prefer to go with something different. When you want
to experiment try starting with a small document then check it in your
browser. Set your font size (usually in the 'view' menu option) to
'smallest and see if you have a lot of trouble reading it. If you do,
odds are that your color combination will be difficult for your readers
as well. Remember that not everyone has their browser settings the same.
Back to Top
At this point,
some of the coding has been eliminated in the boxes just to get rid of
clutter. I want you to continue working on the index.html document from
above. Keep adding on the same document you have been working on.
Headings
One of
the best ways to set up a title for your story (in the browser window,
remember, we already set up a title for the top of the browser) is to
use a heading element. These elements have a number that
determines their size (1 being largest and 6 being smallest). They bold
the contents and make an automatic break at the end.
Now, let's make 'Hello World' our story title, and center it, like this: 13.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<center><h1>Hello World</h1></center>
<p>I always
thought that HTML was hard, but this is easy to do. I can't
<b>believe </b>that it only took me a few minutes to learn
the basics.</p>
</body>
</html> |
We are going to surround the heading
element with an alignment element, center. You can also use italics or
fonts to change the look or color of the heading. If you were writing a
series with multi-parts you could use a series of heading elements to
identify the story, part, and author's name.
14.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<center><h1>Hello World</h1>
<h2>Part three</h2>
<h3>by Lonni Holland</h3></center>
<p>I always
thought that HTML was hard, but this is easy to do. I can't
<b>believe </b>that it only took me a few minutes to learn
the basics.</p>
</body>
</html> |
Go and preview your page in the
Internet Browser by hitting refresh and see if ‘Hello World’ become a
title or heading. Minimize Internet Browser and go back to your Wordpad.
Hit
Save on the Wordpad just to be safe! = )
Using Anchors to Make Links and Hyperlinks. 3 Types
1.
Linking to Email Address
One of
the most important links an author will want to include is his or her
own email address. This is done using the link or anchor element <a>…
</a> to create a mail link you will use the HREF attribute (hypertext
reference) to point to your email address. Whatever falls between the
opening and closing tag will be the actual clickable link on your page.
This can be the actual email address, your name, an image (we'll get to
those) or whatever you want to use. Now, let's add one to our s page. If
you don’t have an email address, make one up. You would fill in your
email address in place of your email address below.
15.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<center><h1>Hello World</h1>
<h2>Part three</h2>
<h3>by Lonni Holland</h3></center>
<p>I always
thought that HTML was hard, but this is easy to do. I can't
<b>believe </b>that only took me a few minutes to learn the
basics.</p>
<p>Email <a HREF="mailto:your email address
">me</a> about it.</p>
</body>
</html> |
Go and preview your page in the
Internet Browser by hitting refresh and see if you have an Email link.
When your mouse passes over the link the email address is shown on the
bottom of the browser. Minimize Internet Browser and go back to your
Wordpad.
Hit Save on the Wordpad just to be safe! = )
2.
To move to different point in same page.
Another handy use of the anchor element is to provide a fast way for
your reader to navigate your page. Place a 'name' anchor at the top of
the page like this: <a NAME="top"> </a>. This sets a navigation point
that can be then located by an HREF. At the bottom of the page put <a
HREF="#top"> top</a>. The word 'top' will appear as a link and, when
clicked, will take the reader back to the top of the document. The hash
mark (#) tells the browser to look for a 'NAME' anchor point. The actual
name doesn't need to be 'top', we have just used that as an example.
3.
Hyperlinking to Another Page
Finally, the anchor element allows links to other web pages. It is set
up the same way as the mail link, but instead of the 'mailto' you insert
the URL. If the page you want to go to is on the same server you can
just input the file name, but, if it is not, you need to have the
complete address, including 'http://'. The following has both types of
links. 16.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<center><h1>Hello World</h1>
<h2>Part three</h2>
<h3>by Lonni Holland</h3></center>
<p>I always
thought that HTML was hard, but this is easy to do. I can't
<b>believe </b>that it only took me a few minutes to learn
the basics.</p>
<p>Email <a HREF="mailto:me@mysite.com">me</a> about it.</p>
<p>I learned HTML <a HREF="index.html"> here</a>.</p>
<p>You can also check out
<a HREF="http://msn.com"> MSN </a>.</p>
</body>
</html> |
Go and preview your page in the
Internet Browser by hitting refresh and see if your link shows. Minimize
Internet Browser and go back to your Wordpad.
Hit
Save on the Wordpad just to be safe! = )
Adding Images
Unless
you have uploaded your page to a hosting site your actually picture will
no show up. You still have to add the coding while creating the page.
The following section will insert an image called LOGO.
17.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<center>
<img src="logo.jpg">
<h1>Hello World</h1>
<h2>Part three</h2>
<h3>by Lonni Holland</h3></center>
<p>I always
thought that HTML was hard, but this is easy to do. I can't
<b>believe </b>that it only took me a few minutes to learn
the basics.</p>
<p>Email <a HREF="mailto:me@mysite.com">me</a> about it.</p>
<p>I learned HTML <a HREF="index.html"> here</a>.</p>
<p>You can also check out<a HREF="http://msn.com"> MSN </a>.</p>
</body>
</html> |
Go
and preview your page in the Internet Browser by hitting refresh and see
if an image box appears. Minimize Internet Browser and go back to your
Wordpad.
Note that the image element (one of the
few that require no closing tag) is placed between the 'center' tags
and, as a result, is centered above the first heading. In the section,
we've done several things with our image. It is now imbedded in the
text, and is a clickable link as well.
18.
<html>
<head>
<title>HTML Lesson One</title>
</head>
<body>
<center><h1>Hello World</h1>
<h2>Part three</h2>
<h3>by Lonni Holland</h3></center>
<p>I
always thought that HTML was hard, but this is easy to do.
<a
HREF="http://paratime.ca/html/"><img
src="logo.gif" width="250" height="100" vspace="5"
hspace="5" align="left" border="0"></a>I
can't <b>believe </b>that it only took me a few minutes to
learn the basics. Now I can produce good looking web pages
all by myself. I'm sure that if I keep experimenting I will
be able to do even more interesting things. I just hope that
my family doesn't expect me to do web pages for them. I
guess I will just have to get them to click on this picture
and learn how for themselves.</p>
<p>Email <a HREF="mailto:me@mysite.com">me</a> about it.</p>
<p>I learned HTML <a HREF="index.html"> here</a>.</p>
<p>You can also check out<a HREF="http://msn.com"> MSN </a>.</p>
</body>
</html> |
To
make the picture a link we put it between the <a>… </a> tags. Normally
an image link would be surrounded by a blue line, but, by entering the
attribute border="0", that line is eliminated. To make the image appear
in the paragraph we imbedded the tag in the paragraph itself then use
the attribute align="left" to place the picture to the left of the
typing. If the paragraph finishes, and there is still blank space beside
the image, subsequent paragraphs will also appear beside the image and
will wrap under it, if necessary. To prevent the typing from resting
directly on the edge of the picture we used vspace="5" and hspace="5"
which pad the picture with 5 pixels of blank space vertically and
horizontally. We also included the width and height of the image, in
pixels. This isn't a required attribute, but it does make the pictures
load fast and can also force a large picture into a small space,
although this is not really recommended as it slows the load time.
19.
Go and
preview your page in the Internet Browser by hitting refresh and see
what your final page looks like. Minimize Internet Browser and go back
to your Wordpad.
Hit Save on the Wordpad just to be
safe! = )
Back to
Top
HTML Rubric
|
Skill |
Self Check
 |
Needs Improvement |
Unsatisfactory |
|
STEP 1.
|
|
1 |
0 |
|
STEP 2.
|
|
1 |
0 |
|
STEP 3.
|
|
1 |
0 |
|
STEP 4.
|
|
1 |
0 |
|
STEP 5. |
|
1 |
0 |
|
STEP 6. |
|
1 |
0 |
|
STEP 7. |
|
1 |
0 |
|
STEP 8. |
|
1 |
0 |
|
STEP 9. |
|
1 |
0 |
|
STEP 10. |
|
1 |
0 |
|
STEP 11. |
|
1 |
0 |
|
STEP 12. |
|
1 |
0 |
|
STEP 13. |
|
1 |
0 |
|
STEP 14. |
|
1 |
0 |
|
STEP 15. |
|
1 |
0 |
|
STEP 16. |
|
1 |
0 |
|
STEP 17. |
|
1 |
0 |
|
STEP 18. |
|
1 |
0 |
|
STEP 19. |
|
1 |
0 |
|
Print/Tray
|
|
1 |
0 |
|
Total |
220
Points |
|
|
a
|
Designing Your Own Home Page and
Site
In the
1960s, people asked about your astrological sign. These days,
they want to know about your
Web page.
Your personal page is an electronic meeting place for your
friends, family and potentially millions of people around the
world. Building your digital domain is easier than you may
think. Best of all, you may not have to spend very much. The Web
brims with all kinds of inexpensive services, from tools to help
you build your site, to
graphics,
animation and site hosting. Primarily, it takes time and
creativity.
Page Design
Think of your home page as
the starting point of your
website.
Like the table of contents of a book or magazine, the home page
is the front door. Your site can have one or more pages,
depending on how you design it. If there isn't a lot of content
just yet, your site will most likely have only a home page. But
the site is sure to grow over time.
While web pages vary
dramatically in their design and content, most use a traditional
magazine layout. At the top of the page is a banner graphic.
Next comes a greeting and a short description of the site.
Pictures, text, and links to other websites follow.
If the site has more
than one page, there's typically a list of items--similar to an
index--often with a brief description. The items in the list
link to other pages on the website. Sometimes these links are
highlighted words in the body of the text. It can also be a
combination of both. Additionally, a web page may have images
that link to other content. The structure of a site typically
looks something like the diagram to the right.
Before you start
building your site, do some planning. Think about whom the site
is for and what you want to say. Next, gather up the material
that you want to put on the site: write the text, collect the
photos, design or find the graphics. Draw a rough layout on a
sheet of paper.
Some Tips
While there are no rules you have
to follow, here are a few things to keep in mind:
- Start simply.
If you are too ambitious at the beginning, you may never get
the site off the ground. You can always add to your site
later.
- Less is better.
Most people don't like to read a lot of text online. Be
brief and break long paragraphs into smaller chunks.
- Use restraint.
Although you can use wild colors and images for the
background of your pages, make sure your visitors can read
the text easily.
- Smaller is
better.
Some people still
connect to the Internet
with a
dial-up
account. Since it can take a long time to
download
large image files, keep the file sizes small. For tips how
to do this, review our
graphics article.
- Have the
rights. Don't put any material on
your site unless you are sure you can do it legally. Read
Learn the Net's
copyright article
for more about this.
Stake Your Claim
Now it's time to roll up your
sleeves and start building. Your
Internet service provider
may include free web hosting services with an account, so check
that out. If not, you can find inexpensive web hosting by
searching
Google.
Many computers come
with programs for creating your own graphics. If not, visit
Download.com,
a good source of graphics software and shareware.
If you feel
adventurous and want to learn more, read the Learn the Net
series on
Building a Website.
|
Back to
Topic Choices
|
Domain Name
When you think of the Internet,
you probably think of ".com." Just what do those three letters
at the end of a World Wide
Web address
mean?
Every
computer
that hosts data on the Internet has a unique numerical address.
For example, the numerical address for the White House is
198.137.240.100. But since few people want to remember long
strings of numbers, the Domain Name System (DNS) was
invented. DNS, a critical part of the Internet's technical
infrastructure, correlates a numerical address to a word. To
access the White House
website,
you could type its number into the address box of your web
browser.
But most people prefer to use "www.whitehouse.gov." In this
case, the
domain
name is whitehouse.gov.
The Structure of a Domain
NameA
domain name
always has two or more parts separated by dots and typically
consists of some form of an organization's name and a three
letter or more suffix. For example, the domain name for IBM is
"ibm.com"; the United Nations is "un.org."
The domain name suffix
is known as a generic top-level domain (gTLD) and it
describes the type of organization. However in the last few
years, the lines have blurred somewhat between these categories.
Currently in use of these gTLDs:
.aero--For the
air-transport industry
.biz--Reserved for
businesses
.com--For
businesses, commercial enterprises, or online services like
America Online. Most companies use this extension.
.coop--Reserved for
cooperatives
.edu--For
educational institutions and universities
.gov--Reserved for
United States government agencies
.info--For all uses
.int--For
organizations established by international treaties
.mil--For the
United States military
.museum--For use by
museums
.name--For use by
individuals
.net--For
networks; usually reserved for organizations such as
Internet service providers
.org--For
non-commercial organizations
.pro--For
use by professionals, such as attorneys and physicians
Registering a Domain Name
If a
domain
name is available, and provided it does not infringe on an
existing trademark, anyone can register the name for a fee
through
domain registrars,
such as
Network
Solutions, Inc. You can use the box below to see if a name is a
available. Don't be surprised if the .com name you want is
already taken, however, as it remains the most popular.
To check for, or
register a
domain name,
type it into the
search box.
It should take this form:
myname.com
If you plan to register your
own domain name,
whether it's a .com or not, keep these tips in mind:
- The shorter the
name, the better. (But it should reflect your family name,
interest or business.)
- The name should be easy
to remember.
- It should be easy
to type without making mistakes.
- Remember, the
Internet is global. Ideally, a domain name will "read" in a
language other than English.
Country Codes
In addition to the generic
top-level domains, 244 national top-level domains (NTLD)
were established for countries and territories, for example:
.au - Australia
.ca - Canada
.fr - France
.de - Germany
.uk - United Kingdom
Here's a list of
national top-level domains.
You can
register an international domain name
with Net Names. Be aware that some countries have restrictions
for registering names.
 |
TRY
THIS...
Discover fun
facts
about domain names. |
Sooner or later
you may decide that you want your own
Internet address,
whether for your business, family, organization or just as a
hobby. Giving someone their own domain name also makes a
unique gift.
Once you have a
domain
name, you can establish a personalized
e-mail addresses.
Instead of randy2043@yahoo.com, you can be
randy@thekimfamily.com.
How do you go about it?
If all this is new to you, first read our
Domain Name article.
Confine Your Creativity
Before you starting thinking of a
name, consider these technical requirements:
A
domain name
can be up to 67 characters long, including the extension, such
as .com, at the end.
The name can include numbers and all 26 letters of the alphabet,
but not special characters such as @, #, $, ?, etc.
The exception is hyphens ( - ), but they can't occur at the
beginning or end of the name.
No spaces can be used within a name.
A domain name is not case sensitive--learnthenet.com is
the same as LearnTheNet.com
Choosing the Name That's
Right for YouWith
millions of
domain names
already taken, finding the name of your dreams may be
impossible. But with some creativity and flexibility, you can
still find a good one. The name you ultimately select really
depends on how you plan to use it.
Let's say you want a
name for a family
website.
Perhaps hernandez.com is already taken. Alternatives
include hernandezfamily.com and hernandez-family.com.
While most domain names
end with .com, you're not restricted to this. You can
also register names ending in .net, .org and a
number of other relatively new extensions like .name and
.pro.
Considerations for Choosing a Name
- The shorter the name, the
better. (But it should reflect your family name,
interest or business.)
- The name should be easy to
remember.
- It should be easy to type
without making mistakes.
- The Internet is now used
by people all over the world. Ideally, a domain name
will "read" in a language other than English.
|
To check the
availability of a name or to register one, type it into the
search box
below. The name should be in the form of: myname.com,
myname.net,
myname.name, etc.
|
Back to
Topic Choices
|
Blogs and Bloggers
With newsgroups and
websites,
people around the world can easily and inexpensively express
themselves online. Weblogs, commonly referred to as
blogs, are a relatively new form of personal publishing.
In the last few years the Web has witnessed an explosion of
blogs.
A blog is similar
to an
electronic
journal or diary. The writer, known as a blogger,
makes periodic entries, sometimes as frequently as a few
times a day. Blogs can be on any subject, for instance,
politics, relationships or daily observations while driving
to work. These musings may be of interest only to the
blogger's family and friends or they can command the
attention of a global audience. It all depends on how
thoughtful and compelling they are. What distinguishes blogs
from other online content is that it is highly personal,
reflecting the point of view of the writer.
|
According to a
Pew Internet & American Life
report, 27% of
Internet users read blogs. |
In the early
days of blogging--the late 1990s--blogs typically consisted
of lists of links to interesting websites or articles, along
with some annotation or commentary from the blog's editor.
The editor acted as a personal guide to the volume of
information that was flooding the Web. Some current blogs
still adhere to this format, but many others have become
more free form--a chronological posting of all kinds of
material, including written musings,
photos
and references to other blogs. One thing has remained
consistent though: new entries appear at the top of the page
and older ones are archived according to date.
Find That Blog
Tens of thousands of blogs
have sprouted like wildflowers after a rain, so the problem
is finding ones that interest you. While it may seem like a
daunting task, don't be discouraged. Online search tools
help with the hunt. Ones we recommend include:
Express Yourself
Not too long ago, publishing
your own blog required technical know-how, similar to having
a
website.
Fortunately for today's aspiring blogger, new
software
and online tools make blogging almost as easy as writing
e-mail using a Web-based service like Hotmail or Yahoo!
Here's how it works: First
you sign up for service, and then you log onto a
password-protected
web page
and write your copy. If you want, you can add links to other
online resources. After you've composed your thoughts,
pressing the Send button publishes your latest
missive to your personal blog. It's that easy.
If you're ready to
let loose with your thoughts, here are two free services to
evaluate:
 Blogger.com
helps you set up an account, choose from a number of
different page designs and begin blogging in minutes.
 Pitas.com
provides a very basic blogging service, without the
customization you can achieve with Blogger.com.
Now you have no
excuse to remain silent. But before you shout out loud to
the world, remember that unless you publish a private blog,
anything you write is public, so be mindful of what you say.
Most online content, like
this article for instance, is written by one person. Some
sites allow readers to post their comments for others to
read and react to. But imagine if online content could be
created collectively by people with similar interests? What
if anyone could then edit or add new content? This online
collaboration exists in the form of
wikis.
Safe Blogging
Tips for Teens
-
Be
as anonymous as possible. Avoid postings that
could enable a stranger to locate you. That includes
your last name, the name of your school, sports teams,
the town you live in, and where you hang out.
-
Protect your info.
Check to see if your service has a “friends” list that
allows you to control who can visit your profile or
blog. If so, allow only people you know and trust. If
you don’t use privacy features, anyone can see your
info, including people with bad intentions.
-
Avoid in-person meetings. Don’t get together
with someone you “meet” in a profile or blog unless you
are certain of their actual identity. Although it’s
still not risk-free, if you do meet the person, arrange
the meeting in a public place and bring some friends
along.
-
Photos: Think before posting. What’s uploaded
to the Net can be downloaded by anyone and passed around
or posted online pretty much forever. Avoid posting
photos that allow people to identify you (for example,
when they’re searching for your high school), especially
sexually suggestive images. Before uploading a photo,
think about how you’d feel if it were seen by a
parent/grandparent, college admissions counselor, or
future employer.
-
Check comments regularly. If you allow them on
your profile or blog, check them often. Don’t respond to
mean or embarrassing comments. Delete them and, if
possible, block offensive people from commenting
further.
-
Be honest about
your age. Membership rules are there to protect
people. If you are too young to sign up, do not attempt
to lie about your age. Talk with your parents about
alternative sites that may be appropriate for you.
Back to Topic Choices
 Wikis
A wiki is a
website
that encourages and enables people to participate in the
creation and editing of its content. The
software
makes it easy--all that's needed is a web
browser
and some non-technical know-how.
|
|
Wiki,
pronounced "wee-kee" comes
from the Hawaiian
word "wiki-wiki,"
which means quick. |
In the Beginning
The first wiki was created in
1995 by a programmer named Ward Cunningham as a supplement
to the
PortlandPatternRepository
website. He wanted to democratize the creation of online
content by providing a way for people to openly share their
knowledge and to be accountable to the group for the
accuracy of their information. It was a radical idea at the
time and still is among those who believe that the best
information comes from "experts." But just as
blogs
have shaken up mainstream journalism, wikis challenge the
status quo of mainstream publishing. (By the way, although
blogs and wikis bear some physical resemblance, blogs only
append comments to the original posting; wikis allow the
original to be edited, regardless of who authored it.)
The most successful wiki
is
Wikipedia,
an online encyclopedia that launched in 2001; it's now
become the largest reference site on the Web. The
publication hosts millions of articles in dozens of
languages, all written collaboratively by the public. While
this experiment in content creation has sparked controversy
due to inaccuracies within some of the articles, it has also
fostered unprecedented global sharing of information.
How It Works
When you first view a wiki,
it looks like a typical web page--mostly formatted text with
images
and hyperlinks to other online resources. What makes wikis
different is that anyone with access to the wiki, which
might be anyone with Internet access, has the ability to
modify, edit or add to the content. This can be done easily
using a
web browser;
it requires no technical ability, no special software and no
knowledge of
HTML.
Content on a wiki can also be edited indefinitely, allowing
all the latest information to be added and of course,
revised.
You may be thinking that
this isn't such a good idea. What if someone decides to
delete portions of the text or just add wrong information? A
few unique features of wikis deftly deal with these issues:
- Wiki software
allows earlier versions of content to be restored.
- The history of
all the changes made to the content can be seen by
everyone--who made edits and when--revealing how the
content evolved. This transparency tends to keep wikis
"honest," because everyone knows who did what; community
censure can be a powerful force.
As with all online
information, be critical of the source. Don't accept
information at face value. With wikis, older information
tends to be more accurate as it has gone through community
review, whereas newer material may not have received
thorough scrutiny. For more on this, read our article "Online
Information--Fact or Fiction?"
 |
TRY THIS...
Write the
news
as a citizen journalist.
|
Start Your Own
A wiki can be a very useful
communication tool for families, work groups, sports clubs,
classes and for people with similar interests. You can
restrict access to your wiki to just the people you want to
participate or open it to the entire world--it's your
choice.
What can you do with it?
Here are just a few things people now do:
- Create
scrapbooks to share family
photos,
genealogy information and gossip
- Plan trips with
friends
- Collaborate on
projects with colleagues
- Create online
cookbooks
- Share class notes
with fellow students
- Write reports with
co-workers
|
|
TRY THIS...
Watch a
video
about how businesses are using wikis.
|
Like many
services on the Web, you can start your own wiki for free
and you don't need any technical skills. Choose a name for
your wiki, select a password and start writing. Then
encourage other people to participate. It's that simple. Two
services to check out are:
Now go out there and
start collaborating. Aloha!
Back to Topic Choices
 Working
with Graphics on the Web
The best designed
websites use
graphics
sparingly. Because
high-resolution
images
are complex and have a large file size, when you
convert them into an appropriate format for the Web,
they may appear less compelling. This is one of the
current limitations of the Web. Whether you are
using existing artwork or creating new graphics,
keep in mind that the demands and requirements of
online design differ from those of other media. Even
the most accomplished graphic designers may not be
aware of the specific design issues involved with
Web graphics.
Smaller Is Better
The key to creating
suitable graphics is to keep the file sizes small so
they
download
quickly. Large graphic files take a long time to
download, especially at slower modem speeds. You
don't want impatient people leaving your site before
they've had a chance to see your brilliant creation.
Keeping the
file size small does not necessarily mean that the
graphic itself must be small. The file size is
determined by the amount of information in the
image.
A large image with only a few colors can actually
have a smaller file size than a tiny graphic with
many colors. Ideally, file sizes should be between
20K and 30K each. At this size, they load almost
instantly. Larger images, such as a banner at the
top of a page, can be as large as 75K. But at this
size, the image alone can take 15 seconds to
download with a 56 Kbps modem. A good rule of thumb
is to keep the total sum of all the images on a page
at 100K or less.
Web
graphics are usually in one of two file formats:
JPEG (a compression method developed by the
Joint Photographic Experts Group, used for
photographic images) and GIF
(Graphics Interchange Format--a compression scheme
developed by CompuServe).
 JPEG
 GIF
To create
or convert your graphics to a Web format, you need
image editing software. If you are working on a
large site, you will benefit greatly from programs
designed to catalog and manage graphics and graphic
elements. Sometimes this can be done with a single
program, but usually it's better to use separate
ones. Software ranges in price from a few dollars
for
shareware
to more than $500 for professional programs like
Adobe Photoshop.
Guidelines for
Designing and Converting Graphics
Whether you use GIF
or JPEG format, here are some guidelines for working
with graphic files:
- Always
design in RGB (red, green, blue) mode at 72 dpi
(dots per inch) with an 8-bit maximum size. Many
older
computer monitors
display a maximum of 256 colors, and this is the
Web standard. The fewer colors you use, the
smaller the file size will be. For example, 8
bits gives you 256 colors to play with, while 3
bits gives you only eight colors. You'll be
surprised at what you can do with only eight to
16 colors; your readers will be pleased with the
snappy downloading time of your pages.
-
Converting existing high-resolution graphics
usually means reducing the image from 300 pixels
or more per inch to 72 pixels per inch. This can
make a big difference in the appearance of an
image, creating jagged edges, or gaps where
colors have been removed. Use techniques like
indexing and dithering to fix these problems.
Dithering or diffusion fills in missing colors
in a uniform way to make the transitions between
colors smoother. You should only dither an image
once, because the more you dither, the blurrier
the separations get between colors. In some
cases, to get a clean result you may have to
open the lower resolution GIF and touch it up,
pixel by pixel. Also, when working with
palettes, stick to either the Adaptive
Palette or the System Palette.
- If
your image contains large text, it may have
jagged edges. Try anti-aliasing, a
technique for smoothing over the jagged edges
you sometimes get when fiddling with
fonts
in digital graphics.
 Unanti-aliased
text
- For
snappier looking graphics, make your images
transparent. This entails changing the
background color to match that of the page
(which more often than not is white) so your
image appears to float on the page.
-
Back to Topic
Choices
|
Get
Plugged-In Now
Instead of
interrupting your Web surfing to download a new
player every time you need one, take some time
to install the most popular ones:
Get animated with
Shockwave,
an older, but still useful plug-in. At the
Showcase
page you'll find links to exciting "shocked"
sites.
Most websites that want to add pizzazz now use
Flash,
another popular plug-in from Macromedia. It
turns your computer into an interactive
animation machine. After you install it, visit
the
Site of the Day.
Turn your computer into a radio or television
with the
RealPlayer.
Once you install the RealPlayer, you can listen
to the latest newscasts from
National Public Radio,
CNN,
and hundreds of other sites.
From Apple Computer comes
QuickTime,
a plug-in for playing video clips on Macintosh
and PC computers. Watch movie trailers and other
multimedia with this useful little program.
|
Back to Topic Choices
Web Quiz
http://www.learnthenet.com/english/flashtest/www1.htm
Take the quiz
online and let me see and record your score when you are
finished! I must see or you will have to retake!
Back to Topic Choices |
DMS Comp App Home ~
MSD Decatur Home Page
~
Decatur
Middle School Home Page
Ann Zinyemba
Decatur Middle School
Computer Applications
5108 S. High School Rd.
Indianapolis, Indiana
46224 |
Plug-ins
are small software programs that extend the
capabilities of your browser by enabling it
to play sounds and video clips or do other
functions, such as automatically
decompressing files that you download.