Activity: Learn HTML

home library gallery activity death by...? easter egg hunt illustration learn HTML biography guestbook egress		Learn HTML Web design really isn't hard if you know HTML, or HyperText Markup Language. HTML is what's behind every web page, and it's basically just a collection of text codes that tell the browser how to view an otherwise ordinary text document. Sounds too simply stated? Well, yes. HTML can get very complicated if you're doing advanced design, but for all intents and purposes, it's just extra text that happens to make the main text look a little snazzy. If you don't believe me, read the tutorial-and-template-in-one that I've written below for those of you who are new to HTML. <!--You're looking at what makes a web page work. Most of what you see here is code you can find in any web page, simply by viewing the source behind it. Study the codes directly below.--> <HTML> <HEAD> <TITLE>Example of title bar text.</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080"> <!--All the codes above are required in any web page. Example text can be changed, and so can the 6-digit alphanumerics found in the quotation marks within the BODY tag. The alphanumerics is hex code for color; they determine the amount of red, green, and blue used. In #AABBCC, A=red, B=green, and C=blue. The least amount is 00, and the full amount is FF.--> <!--Text between these symbols are COMMENTS that are never seen on the actual page.--> <!--But how about body copy that DOES get seen?--> <H1>Learn HTML</H1> <H2>Learn HTML</H2> <H3>Learn HTML</H3> <H4>Learn HTML</H4> <H5>Learn HTML</H5> <H6>Learn HTML</H6> Text formatting in HTML is actually pretty easy. The lines of text above, for example, are enclosed in HEADLINE tags. HEADLINE tags come in the sizes shown above and basically emphasize the text they enclose in bold and/or italics. <P> Regular body text is separated by paragraphs, as shown directly above with the P (for paragraph) tag. You can further manipulate text using the P tag by simply adding the "align" parameter. For example: <P align=center>This text is centered. <P align=right>And this text is right-aligned. <P>But sometimes, all you need is a line break, in which case we use BR for BREAK: <BR>This is a line break. <BR>This is another line break. <P>Other times, you may want to set off a block of text apart from the rest of the copy. In this case, you'd use the following code: <BLOCKQUOTE>Anything within these tags is indented on both sides and set apart from the rest of the text. These are great for quotes and poetry.</BLOCKQUOTE> <P>What if you want to set the type and size of the font used? In this case, we use the following code:<BR> <font face="verdana, sans-serif" size=2 color="#ff0000">This text will appear in Verdana or another sans-serif font, size 2 of 7 sizes, and in red.</font> <P>Or you can make text in bold or italics, like so:<BR> <B>This text is in bold.</B><BR> <I>This text is italicized.</I><BR> <B><I>This text is both in bold and italics. </I></B> <P>Other text formatting codes:<BR> <U>This text is underlined.</U><BR> <S>This text is struck out.</S><BR> Superscript:<SUP>This text is written up higher, or "superscripted".</SUP><BR> Subscript:<SUB>This text is written down lower.</SUB> <P>Where could you use the last two?<BR> 10<SUP>2</SUP>=100 and H<SUB>2</SUB>O, for example. <P>What if you wanted bulleted lists? Then, you'd use the following code: <UL><!--This begins the bulleted list--> <LI>This is the first item on the list. <LI>Second item. <LI>Third item. <LI>Fourth item. <LI>Etc... </UL><!--This ends the list--> For numbered lists, you'd simply change the beginning and end tags. <OL><!--This begins the numbered list--> <LI>This is the first item on the list. <LI>Second item. <LI>Third item. <LI>Fourth item. <LI>Etc... </OL><!--This ends the list--> Just remember that the U stands for the "unordered" list, and that the O stands for the "ordered" list. <P>If you want to get complicated, you can combine the lists and created a list within a list, like I did for my site navigation links. Below is an example. <OL><!--This begins the numbered list--> <LI>This is the first item on the list. <UL><!--This begins the bulleted list within it--> <LI>This is the first item of the first item on the list. <UL><!--This begins another bulleted list within the bulleted list--> <LI>This is the first item of the first item of the first item on the list. <LI>Second item of the first item's first item. <LI>Third item, etc. <LI>Fourth item, etc. <LI>Etc... </UL><!--This ends the inner bulleted list--> <LI>Second item. <LI>Third item. <LI>Fourth item. <LI>Etc... </UL><!--This ends the outer bulleted list--> <LI>Second item. <LI>Third item. <LI>Fourth item. <LI>Etc... </OL><!--This ends the numbered list--> <P>There's another type of list, but it's rarely used. It's called a definition list, and here's what it looks like: <DL><!--This begins the definition list--> <DT>This is the term. <DD>This is the definition. <!--Open the doors and see all the people! Sorry, I couldn't resist that. ;o) --> </DL><!--This ends the list--> <P>Okay, okay... but all of this text formatting stuff doesn't interest you, right? You don't care about text and lists; you want to know about how to make links and images. <P>Links are easy. They use the following code:<BR> <A HREF="http://www.yahoo.com">This is a link to Yahoo.</A> <P>Images are handled in the following way:<BR> <IMG SRC="http://members.aol.com/aprilmartinez/aprilogo.gif" ALT="alternate text can be placed here" WIDTH="88" HEIGHT="31"> <P>It's a good idea to define the width and height of an image within the tag so that the page loads slightly faster. <P>And what if you wanted to create image links? Simple. You combine the two.<BR> <A HREF="http://members.aol.com/aprilmartinez"> <IMG SRC="http://members.aol.com/aprilmartinez/aprilogo.gif" ALT="alternate text can be placed here" WIDTH="88" HEIGHT="31" BORDER=1></A> <P>The BORDER parameter within the image tag in this case defines the size of the border that appears around the image when it's linked to another page. <P>That's all fine and dandy, you say, but how can I control where my images go? Well... you can use the align parameter again; you can use it almost anywhere, within HEADLINE tags for an example. OR, you can use them within DIV tags: <DIV align=center>Centered text or images.</div> <P>For more control, you can use TABLES. If you're new to HTML, TABLES will be hard to master, so you really have to be sharp and look at how the code shapes the actual table.<P> <TABLE BORDER=1><!--This starts the table with a visible border with a width size of 1--> <TR><!--This begins a table row--> <TD><!--This begins a table cell within that row. D actually stands for DATA.--> This will be the top left cell. </TD><!--This ends the table cell--> <TD> This is the top right cell. </TD> </TR><!--This ends the table row--> <TR> <TD> Bottom left cell. </TD> <TD> Bottom right cell. </TD> </TR> </TABLE><!--This ends the table--> <P>In more advanced design, you can use the TABLE's parameters to add color to the cells or to make the borders invisible. It's best to study other people's techniques and then play around with the code yourself until you're comfortable with it. <P>Go on... try it. Click the button to view all the code you've just read in action. After you've done that and closed the window, change any of the code and/or text above and click the button again to see how your changes affect how the page is viewed. Good Luck! </BODY> </HTML> <!--And don't forget! The codes directly above are required, too.--> Ť back to activity main
Copyright © 1999-2000 by April Martinez - All rights reserved. Any reuse, reproduction, or retransmission of this protected material is prohibited.