Discussion Points | Activities
Test Your Knowledge | All About
Time Codes
all about html
HTML is cool—it's a computer language that helps you make Web pages, those pages seen on the Internet. And the Standard Deviants will help you with HTML! To make an HTML document, you'll need a few things…
Click here to review everything covered in this episode of Standard Deviants TV. go!
time codes
  1. What Stuff Do I Need? 1:02:10
    1. Computer 1:02:22
    2. Text Editor 1:02:30
    3. Internet Service Provider 1:03:34
    4. WYSIWYG Editors 1:04:19
    5. Internet Browser 1:06:12
  2. Basic HTML Tags 1:06:52
    1. Underline <U> 1:07:53
    2. Italics <I> 1:08:45
    3. Head <HEAD> 1:10:55
    4. Title <TITLE> 1:11:12
    5. Body <BODY> 1:12:36
    6. Saving Files 1:13:50
    7. Line Break <BR> 1:15:56
    8. Paragraph Break <P> 1:16:13
    9. Centering <CENTER> 1:17:43
  3. Text and Backgrounds 1:18:21
    1. Heading Tag <H1> ... <H6> 1:18:28
    2. Font Size and Font Color 1:19:16
    3. Web safe colors 1:19:16
    4. Background Color 1:19:16
  4. Graphics 1:19:58
    1. Image Source Tag <IMG SRC=...> 1:21:07
    2. Graphic File Types 1:21:07
    3. Body Background Tag <BODY BACKGROUND> 1:23:15
discussionPoints
1. Hypertext is more than hyperlinks on the Web. Hypertext is another word for enhanced text, such as a caption under a picture. What non-Web examples of hypertext can you think of? What is the oldest example of hypertext you know of?

2. Visit a few of your favorite Web sites and take a look at the titles for the pages. Which sites use the <TITLE> tag? Do they use it effectively? Do you think there is a correlation between the little details such as a title and the quality of a site's design?

3. Many HTML editing programs have come a long way in their "What You See Is What You Get" (WYSIWYG) abilities. For example, instead of typing <IMG SRC=house.gif>, you can click on a button and have the program insert the image for you. In fact, in some cases you could make a Web page without looking at a single HTML tag. Do you think it's important for people using WYSIWYG editors to learn HTML first? Why or why not?

4. If you have ever used a WYSIWYG editor, what are your impressions of it? What parts of the editor made designing Web pages easier, and what problems (if any) did you run into?

5. View a few Web pages with Netscape, and then view these same pages with Internet Explorer. What differences, if any, do you notice between the two browsers?

activities
Hand Coding vs. WYSIWYG

Traditionally, writing the HTML to create a web page was done manually. You would use a text editor like Notepad, type your HTML tags in, and test the page by loading the file in a browser.

In the past few years, another way of creating web pages has emerged: What You See Is What You Get (WYSIWYG) HTML editors. WYSIWYG editors allow you to create web pages by using menu commands and icons. For example, instead of typing <BODY BGCOLOR=#FFFFFF> you might click on the background and select white from the color box.

Do WYSIWYG editors really do what they promise? What are they good at doing, and what are their limitations? Well, that's what we're going to find out.

Using a text editor like Notepad, write the HTML for a simple web page. Include a centered graphic, a colored background, and make one sentence of the text a different color from the rest. Load the page in a browser so you can see how it looks.

Now download a trial version of a WYSIWYG editor. (Macromedia Dreamweaver 3.0 is a good choice. Also, if you are using Netscape, you may be able to use Netscape Composer. Check the browser's menus).

In the WYSIWYG editor, try to make an identical version of the web page you coded by hand.
• How close can you get to the original? How long does it take?
• Allotting some time for learning the functions of the WYSIWYG editor, which way do you think would take longer, doing the HTML by hand or using an editor?

Try loading your original web page in the WYSIWYG editor. Then save the page in the editor.
• When you loaded your web page in the WYSIWYG editor, did it look any different from when you loaded in your web browser?
• After you save the page, find the "View Source" command in the editor. Did the program add any HTML? If so, do you like what it added?

So what's your opinion of WYSIWYG editors after this exercise? Do you think they make creating web pages easier, or are they more trouble than they're worth? Also, do you think knowing a little bit of HTML helped you use it?

WYSIWYG editors aren't clearly good or bad. Some people love WYSIWYG editors, and other people think they produce sloppy HTML. But if you find them useful, jump on board and use them because they can potentially save you hours of time.

testKnowledge
Click here to go to the test.



purchase soon
The prototype for HTML was invented by Tim Berners-Lee in 1989.
 
vocabulary
Background color tag — The tag that changes the background color of your page. It goes within the body tag. An example is: <BODY BGCOLOR=yellow>

Background tag — The tag that inserts a graphic as the background of your Web page. An example is: <BODY BACKGROUND= "images/ name_of_file.gif">

Body tag — The tag that shows where the body of the HTML document is. The opening body tag is <BODY> and the closing body tag is </BODY>.

Case insensitive — A computer program where it doesn't make a difference to the browser if you use uppercase or lowercase letters. HTML is case insensitive

Center tag — The tag that will center text. The opening center tag is <CENTER> and the closing center tag is </CENTER>.

Heading tag — The tag that changes the font size of important sections of your Web page. There are six variations of the heading tag: <H1>, <H2>, <H3>, <H4>, <H5>, and <H6>.

Head tag — The tag that shows where the header of the HTML document is. The opening head tag is <HEAD> and the closing head tag is </HEAD>.

HTML tag — The tag that tells the Internet browser that we're creating an HTML document. The opening HTML tag is <HTML> and the closing HTML tag is </HTML>.

Image source tag — The tag used to insert graphics on your Web page. An example is: <IMG SRC= "image_name_here.gif">

Internet browser — The software that allows you to navigate the World Wide Web, among other things.

Line break tag — The tag that tells the browser it's the end of the line and the following text should start on the line directly below. The HTML tag for a line break is <BR>.

Online — Connected to the Internet.

Paragraph break tag — The tag that tells the browser it's the end of the line and the following text should start after skipping one line. The paragraph tag is <P>.

Tag — The basic building block of HTML code.

Text editor — A software program that can edit text—essential to creating HTML documents.

Title tag — The tag that creates a title for your document. The opening title tag is <TITLE> and the closing title tag is </TITLE>. It goes between the head tags.

WYSIWYG editor — A "What You See Is What You Get" HTML editor. This type of editor lets you make a home page without having to type in all the HTML code yourself.

 
resources
You can find free Web space here:
www.Geocities.com
www.xoom.com

You can get some cool HTML info here:
www.ncsa.edu
www.hotwired.com

Lists of hexadecimal number color codes:
www.lynda.com
www.hidaho.com

    
  SDTV Home | About SDTV | Episodes & Resources
For the Classroom | Weekly Quiz | Screensavers