<!-- NOTE: This is the "Lessons" page for the EASY HTML TUTORIAL. For
more information, please see http://www.Layhands.com/EasyHtmlTutorial. -->
<!-- Basic Web pages should begin with the HTML tag and end with
the /HTML tag (at the bottom of the Web page). -->
<HTML>
<!-- The HEAD section is used for various things such as JavaScript
code, but you should at least have a TITLE tag in the HEAD section.
The title will be displayed in the browser's title bar. -->
<HEAD>
<TITLE>Easy HTML Tutorial - Browser Results</TITLE>
</HEAD>
<!-- All of the design of your Web page goes in the BODY section.
For some options to use in the BODY tag, see
http://www.htmlhelp.com/reference/html40/html/body.html. -->
<BODY>
<!-- Ignore these 3 lines of code for now. They are here so that the
"Browser Results" page will have a description at the top of it. -->
NOTE: This is the "Browser Results" page for the EASY HTML TUTORIAL.
For more information, please see http://www.Layhands.com/EasyHtmlTutorial.
<P> <P>
Lesson 1: This is normal text.
<!-- Since we didn't use any tags in Lesson 1, the browser will
display the words, "This is normal text," as ordinary text. -->
<P>
Lesson 2: This is normal text. <H1>This is a heading.</H1> This is normal text.
<!-- H1 is a "start" tag because it tells your browser to start
making a large heading. All of the text after the H1 tag will be
in the heading, until the "end" tag (/H1) is encountered. -->
<P>
Lesson 3:
<H1 ALIGN="CENTER">This is a centered heading.</H1>
<H2 ALIGN="CENTER">This is a smaller heading.</H2>
<H3 ALIGN="CENTER">This is an even smaller heading.</H3>
<P>
Lesson 4: This is normal text. <FONT SIZE="+2">This is bigger text.</FONT>
<P>
Lesson 5: This is normal text. <FONT SIZE="-2">This is smaller text.</FONT>
<P>
Lesson 6: This is normal text. <FONT COLOR="GREEN">This is green text.</FONT>
<!-- For more colors, see
http://www.htmlhelp.com/reference/html40/values.html#color. -->
<P>
Lesson 7: This is normal text. <FONT COLOR="BLUE" SIZE="+7">This is blue and huge!</FONT>
<P>
Lesson 8: This is normal text. <B>This is bold text.</B>
<P>
Lesson 9: This is normal text. <I>This is in italics.</I>
<P>
Lesson 10: This is normal text. <B><I>This is bold and italics together.</I></B>
<!-- This shows that you can combine tags. The "start" tags
are B and I (in that order), so they should be closed off in
the order of /I and /B. This is my usual method when I want
certain words to stand out. -->
<P>
Lesson 11: This is normal text. <I><B>This is bold and italics together.</B></I>
<!-- In this example the "start" tags are I and B (in that order),
so they should be closed off in the order of /B and /I. -->
<P>
Lesson 12: This is normal text. <!-- This is called a "comment," which is invisible in your browser. -->
<P>
Lesson 13: Hello world
<!-- Most Web browsers will ignore all but the first space
between "Hello" and "world." -->
<P>
Lesson 14: Hello world
<!-- The ("Non-Breaking SPace") forces the browser to
display a space. -->
<P>
Lesson 15:
This is line 1.
This is line 2.
<!-- Notice that all of the text ends up on the same line in the Web
browser, even though it was typed on different lines. -->
<P>
Lesson 16:
This is line 1.<BR>This is line 2.
<!-- The BR ("line BReak") tag tells the Web browser to go to the next
line. There is no /BR tag. -->
<P>
Lesson 17:
This is line 1.
<BR>
This is line 2.
<!-- This looks just like the previous lesson in a Web browser, but it
is easier to read in your code. -->
<P>
Lesson 18:
This is line 1.
<BR><BR><BR>
This is line 2.
<!-- Some browsers will ignore all but the first BR tag. Other browsers
will display several blank lines. This is why it is wise to test your
Web pages in different browsers (such as Internet Explorer, Firefox,
Netscape, Opera, etc.) if possible. -->
<P>
Lesson 19:
This is line 1.<P>This is line 2.
<!-- The P ("Paragraph") tag tells the browser to skip an extra line.
The /P tag is optional (I personally never use it). -->
<P>
Lesson 20:
This is line 1.
<P>
This is line 2.
<!-- This looks just like the previous lesson in a Web browser, but it
is easier to read in your code. -->
<P>
Lesson 21:
This is line 1.
<P>
<P>
<P>
This is line 2.
<!-- Most Web browsers will ignore all but the first P tag. That's why
this ends up looking like the previous lesson in a Web browser. -->
<P>
Lesson 22:
This is line 1.
<P> <P>
This is line 2.
<!-- This is my usual method for skipping 2 blank lines because it
works in most Web browsers. -->
<P>
Lesson 23: <HR>
<!-- The HR ("Horizontal Rule") tag creates a horizontal line.
There is no /HR tag. -->
<P>
Lesson 24:
<DIV ALIGN="CENTER">
This is centered.
</DIV>
<P>
Lesson 25:
<BLOCKQUOTE>
This is indented.
</BLOCKQUOTE>
<P>
Lesson 26:
<BR>
My favorite leisure-time activities are:
<UL>
<LI>Snow skiing
<UL>
<LI>In the U.S.
<LI>In other countries
</UL>
<LI>Swimming
<LI>Reading
</UL>
<!-- The UL ("Unordered List") tag creates "bulleted" lists.
Use the LI ("List Item") tag for each item in the list.
The /LI tag is optional (I personally never use it).
Notice that lists can be "nested" inside of other lists. -->
<P>
Lesson 27:
<BR>
My favorite leisure-time activities are:
<OL>
<LI>Snow skiing
<UL>
<LI>In the U.S.
<LI>In other countries
</UL>
<LI>Swimming
<LI>Reading
<OL TYPE="a">
<LI>Christian books
<LI>Westerns
<LI>Spy novels
</OL>
</OL>
<!-- The OL ("Ordered List") tag creates "bulleted" lists using
numbers. Again, the /LI tag is optional (I personally never use it).
Notice that the second OL tag is not indented. This demonstrates
that Web browsers don't care how your code is indented, but your
code will be easier for you to read if you indent it. Also, notice
that the second OL tag has a TYPE attribute. If you put TYPE="a"
then the list will use lowercase letters. TYPE="A" will use uppercase
letters. TYPE="i" will use lowercase Roman numerals. TYPE="I" will
use uppercase Roman numerals. -->
<P>
Lesson 28:
<BR>
<IMG SRC="Border_Left.jpg">
<!-- This is how to display a picture. In this example,
the Border_Left.jpg file needs to be in the same directory
as the Web page which is displaying the picture. There is
no /IMG tag. -->
<P>
Lesson 29:
<BR>
<IMG SRC="http://www.Layhands.com/EasyHtmlTutorial/Border_Left.jpg">
<!-- This is how to display a picture which is located somewhere
on the Internet. -->
<P>
Lesson 30:
<BR>
<IMG SRC="Border_Left.jpg" ALT="This picture has been stretched"
WIDTH="400" HEIGHT="20" BORDER="5">
<!-- This shows how to change the width and height of a picture,
and add a border around it. If you hold your mouse pointer over
the picture (in a Web browser) then the message, "This picture
has been stretched," will pop up. -->
<P>
Lesson 31: Here is <A HREF="JohnnysWebsite1.htm">Johnny's Website</A>.
<!-- The A ("Anchor") tag creates a link to another Web page. In
this example, the JohnnysWebsite1.htm file needs to be in the same
directory as the Web page which is displaying the link. -->
<P>
Lesson 32: Here is <A HREF="http://www.Layhands.com/EasyHtmlTutorial/JohnnysWebsite1.htm"
TARGET="abc">Johnny's Website</A>.
<!-- This is how to create a link to a Web page which is located
somewhere on the Internet. The TARGET attribute causes the link to
open up in a new browser window. You can put any word in the TARGET
attribute, which gives the new browser window its own unique "name."
If you use that same name in the TARGET attribute of a different link,
then it will re-use that new browser window. If you use a different
name in the TARGET attribute of a different link, then the link will
open up a brand new browser window. -->
<P>
Lesson 33:
<TABLE BORDER="1">
<TR>
<TD>1</TD>
<TD>22222222</TD>
</TR>
<TR>
<TD>333</TD>
<TD>4</TD>
</TR>
</TABLE>
<!-- Tables allow you to be very creative in your Web pages.
The TR ("Table Row") tag starts a new row in the table. The TD
("Table Data") tag creates a new cell in that row of the table.
Every row in the table must have the same number of TD tags
because every row will have the same number of cells. Notice
that the Web browser automatically resizes each row and column
based on the data in each cell. If you change the BORDER attribute
to 0 instead of 1 (or just delete the BORDER attribute) then you'll
have a borderless table. -->
<P>
Lesson 34:
<TABLE BORDER="1" WIDTH="100%">
<TR>
<TD>1</TD>
<TD>22222222</TD>
</TR>
<TR>
<TD>333</TD>
<TD>4</TD>
</TR>
</TABLE>
<!-- This is exactly the same as the previous lesson, except
that this time the TABLE tag has a WIDTH attribute. The WIDTH
attribute tells the Web browser how wide the table should be.
In this lesson, the width of the table is 100% of the width of
the browser window. Resize your browser window, and the table
size will be adjusted automatically. If you use WIDTH="100" (in
other words, if you delete the % sign) then the width of the table
will be 100 "pixels" (the width of 100 dots on the screen). -->
<P>
Lesson 35:
<TABLE BORDER="1">
<TR>
<TD ALIGN="CENTER" COLSPAN="3">This cell takes up 3 columns.</TD>
</TR>
<TR>
<TD>1st column.</TD>
<TD>2nd column.</TD>
<TD>3rd column.</TD>
</TR>
</TABLE>
<!-- In a table, you can make one cell take up more than one column
by using the COLSPAN attribute. -->
<P>
Lesson 36:
<TABLE BORDER="1">
<TR>
<TD VALIGN="CENTER" ROWSPAN="3">This cell takes up 3 rows.</TD>
<TD>1st row, 2nd column.</TD>
</TR>
<TR>
<TD>2nd row, 2nd column.</TD>
</TR>
<TR>
<TD>3rd row, 2nd column.</TD>
</TR>
<TR>
<TD>4th row, 1st column.</TD>
<TD>4th row, 2nd column.</TD>
</TR>
</TABLE>
<!-- In a table, you can make one cell take up more than one row
by using the ROWSPAN attribute. -->
<P>
Lesson 37:
<DIV ALIGN="CENTER">
<TABLE BORDER="5" BGCOLOR="YELLOW" CELLSPACING="7" CELLPADDING="10">
<TR>
<TD WIDTH="200" VALIGN="BOTTOM">
This is normal text. <FONT COLOR="BROWN">This is brown text.</FONT>
</TD>
<TD>
My favorite things to do are:
<BR>
<UL>
<LI>Snow skiing
<LI>Swimming
<LI>Reading
</UL>
</TD>
</TR>
<TR>
<TD ALIGN="CENTER">
<IMG SRC="Border_Left.jpg">
</TD>
<TD VALIGN="TOP">
<A HREF="JohnnysWebsite1.htm" TARGET="NewWindow">Johnny's Website</A>
</TD>
</TR>
</TABLE>
</DIV>
<!-- This table is centered in the browser window, and it has a
yellow background. Notice that each cell in a table can contain
virtually any HTML code. A cell can even contain a whole new
table! This allows you to be very creative when you make Web pages.
The TR and TD tags can have WIDTH and BGCOLOR and BACKGROUND and
ALIGN and VALIGN ("Vertical Alignment") attributes, among others. -->
<P>
<!-- At the top of this Web page we have an HTML tag and a BODY
tag (in that order), so we need to close those tags at the bottom
of this Web page using the /BODY and /HTML tags (in that order).
Notice that these tags don't display anything in the Web browser. -->
</BODY>
</HTML>