HTML Basic

Here, I will tell you about the basics of page making. It all starts with HTML...

HTML:: HyperText Markup Language. In other words, all those tags and attributes that make your page work.
Tags:: A command that is used by the browser in the prosess of displaying web pages. HTML tags are inclosed in brackets.
EX: <</plaintext>tag>. Some tags require a closing tag. EX: <plaintext><</plaintext>tag>...<plaintext><</plaintext>/tag> <dt>Attributes: <dd>Most tags in HTML have attributes that specify additional information to the browser. Many tags can have more than one attribute. For Example, <plaintext><</plaintext>HR> is a tag that puts a line (horizontal rule) on your page. <hr> <plantext><</plaintext>HR WIDTH="60%">: This tag would create a line that is only 60% as wide as the page. <hr width="60%"> <plaintext><</plaintext>HR WIDTH="60%" AIGN="left">: This tags creates a line that is 60% wide and starts on the left side of the page. <hr width="60%" align="left"> <dt>Text:<dd>In the sence of HyperText, text includes all the text, graphics, images, links, and whatever else you put on your page. <dt>Browser:<dd>A browser the the software that translates the HTML tags and text into what you see on your screen. <HR></dl> <A NAME="page"><HR></a> <table border="0" width="100%"> <tr><td align="left"> <DT><blackface><h3>Structure Tags</h3></blackface></td> <td align="right"><a href="#start">^Top^</a> </td></tr></table> <HR> <dl> These tags are required on every HTML page. Structure tags include: <dt><plaintext><</plaintext>HTML>.....<plaintext><</plaintext>/HTML> <dd>Incloses the entire page. <plaintext><</plaintext>HTML> is the first tag on your page. It lets the browser know that this is a HTML page. <pliantext><</plaintext>/HTML> is the last tag on your page and it lets the browser know that the page is complete. <dt><plaintext><</plaintext>HEAD>.....<plaintext><</plaintext> /HEAD><dd>Includes introductory information about your page.The Head tag may seen useless in creating a HTML page because it has no practial use, although it does have technical applications that we won't get into here. <dt><plaintext><</plaintext>TITLE>.....<plaintext><</plaintext>/TITLE><dd>This tag defines the title of your page. The title is what shows up in the status bar at the bottom of your page. The Title tags are nested inbetween the Head tags. <dt><plaintext><</plaintext>BODY>.....<plaintext><</plaintext>/BODY><dd>Everything that you want people to see must be contained between the BODY tags. The body tag also sets the style of your page. The sidebar tags always come before the body tags. Attributes of the body tag. <dt>BGCOLOR <dd>Sets the background color for your page. The format is a hex number or the predefined <a href="/justforwebtv/info/colorcodes.html">color codes </a> <dt>TEXT <dd>Sets the text color. Same format as the BGCOLOR tag. <dt>LINK <dd>Sets the color of your links. Again, same format. <dt>VLINK <dd>Sets the color fo the links that you have already visited. Same format. <dt>BACKGROUND <dd>This is where you put the address of the background for your page, if you use one. </dl> There are more attributes for the body tag, but this is Basic HTML. You can find more attributes for this tag under <a href="http://developer.webtv.net/authoring/html/">WebTV HTML.</a> The most basic page: <plaintext><</plaintext>HTML> <plantext><</plaintext>HEAD> <plaintext><</plaintext>Title>Your Title...<plaintext><</plaintext>/TITLE> <plaintext><</plaintext>/HEAD> <plaintext><</plaintext>BODY> .... All the stuff you put on your page....... <plaintext><</plaintext>/BODY> <plaintext><</plaintext>/HTML> This is just enough code to make a page work. This would work....However, all you would see is the line: ..... All the stuff you put on your page....... <table border="0" bgcolor="grey" Width="100%"> <th> TIP:</TH><TR><TD> If you save this file now, you can copy it each time you make a new page and you won`t have to retype the sturcture tags. You can cut and paste it from here.</td></tr></table> <form> <input type=button value="Click-N-Paste" onClick="javascript:this.form.txt.focus();this.form.txt.select();"> <textarea id="txt" autoactivate rows="12" cols="44" bgcolor="navyblue" cursor="white" usestyle> <HTML> <HEAD> <TITLE>Just4WebTV</TITLE> </HEAD> <BODY BGCOLOR="" BACKGROUND="" TEXT="" LINK="" VLINK=""> I Love WebTV! </BODY> </HTML> </textarea> </form> Be sure to add <a href="/justforwebtv/info/colorcodes.html">color codes </a>between the "". The BACKGROUND="" attribute is where you put the address of your background file, if you want to use one. EX:<plaintext><</plaintext>BODY background="/justforwebtv/images/bg.gif" text="black" Link="red" Vlink="blue"> This is most of the BODY tag from this page. <hr invertborder> Click below to learn more about the stucture tags. Be sure to hit the back botton to return to my pages. <hr> <a href="http://developer.webtv.net/authoring/html/">[HTML]</a> <a href="http://developer.webtv.net/authoring/html/head.html">[HEAD]</a> <a href="http://developer.webtv.net/authoring/html/title.html">[TITLE]</a> <a href="http://developer.webtv.net/authoring/html/body.html">[BODY]</a> <HR> <hr><a name="links"><hr></a> <table border="0" width="100%"><tr><td align="left"> <blackface><H3>ANCHORS</H3></BLACKFACE> </td> <td align="right"> <a href="#start"> ^Top^</a></td></tr></table> <hr> Anchors are what lets you link pages together. If you have more than one page, then you have to link them together, or else, people will come to your home page and never see your other pages.Also, if you want to put some links to other peoples pages, or just to some of the places like you like to go, anchors are what you need. To make an anchor, you need to know the address of the page you are linking to. The code for an anchor is `A`. There are different kinds of anchors and different attributes for the anchor tag. Now, if you just want a link to another page, the code is: <hr> <plaintext><</plaintext>A HREF="http://XXXXXXXXXXX">LINK NAME<plaintext><</plaintext>/A> <hr> In this example XXXXXXXX is the address of the page that you are linking to. LINK NAME is whatever you want to call the link. If it is a link to a page that you made about your friends then you could name the link `FRIENDS`. You can name it anything, that is just an example. <hr>TARGETS<hr> Making links within a page takes a little more work.To link to a different place on the same page, you must first make a anchor for the link to look for. That is done by using an anchor tag with the NAME attribute. And it looks like this: <hr> <plaintext><</plaintext>A NAME="XXXX">Target Name<plaintext><</plaintext>/a> <hr> The XXXXX is whatever you want to call the link. Put the anchor whereever you want the link to go to. It will not show up on your page like a clickable link, but you will know that it is there. Now, to link to the anchor that you just made, you use the HREF attribute of the anchor tag and use the `#` before the address. Like this: <hr> <plaintext><</plaintext>A HREF="#XXXX">Link name<plaintext><</plaintext>/A> <hr> <a name="images"><hr inverborder></a> <table border="0" width="100%"><tr><td align="left"> <blackface>Images</blackface></td><td align="right"><a href="#start">^TOP^</a> </td></tr></table> <hr> It is easy to add images to your pages. All you need is the IMG (image) tag. There are lots of attributes for the IMG tag. Attributes that can resize your image, align your image, and more! You can really change your image with this tag. <table width="100%" border="10" bgcolor="gray"> <th>IMPORTANT TIP:</th> <tr><td>Images use a lot more memory space than text or HTML code. The larger the image file is, the longer it will take to load. I hate long dowdloads! Also, if you use a lot of images, expecialy animated gifs, make sure you use HEIGHT and WIDTH tags! That way, the browser can leave space for your images and load the rest of your page much quicker! </td></tr></table> <center>Attribuets for the IMG tag</center> <dl> <dt>SRC (sorce) <dd>This is where you put the address for the image. EX:<plaintext><</plaintext>IMG SRC="..image addy..">. Don't forget the ""! <dt>HEIGHT <dd>This tag will set the height of your image. The format is: HEIGHT="XX". The XX can be the number of pixels or a percentage of the page height. If you want it to be a percentage, use the'%', lie this "XX%". EX:<plaintext><</plaintext>IMG SRC="ADDRESS" HEIGHT="200"> Or: <plaintext><</plaintext>IMG SRC="ADDRESS" HEIGHT="50%"> <dt>WIDTH <dd>Want to guess what this one does? Use the same format as the HEIGHT tag. 'Nuff said. <TABLE BORDER="0" BGCOLOR="grey" WIDTH="100%"> <th>IMPORTANT TIP:</th><tr><td> Always use HEIGHT and WIDTH tags for your images as this will let your page load faster!</TD></TR></TABLE> <dt>ALIGN <DD>Defines the alignment of an image in relation to surrounding text. <HR> Values for the ALIGN tag: <dl><dt>ALIGN="BOTTOM" <DD>Aligns surrounding text with the bottom of the image. <DT>ALIGN="CENTER" <DD>Aligns surrounding text with the center of the image. <DT>ALIGN="LEFT" <DD>Draws the image as a left-flush "floating image," with text flowing around it. <DT>ALIGN="MIDDLE" <DD>Aligns surrounding text with the middle of the image. <DT>ALIGN="RIGHT" <DD>Draws the image as a right-flush "floating image," with text flowing around it. <DT>ALIGN="TOP" <dd>Aligns surrounding text with the top of the image. </DL> <dt>BORDER <DD>This tag put a border around your image. The format is: BORDER="XX" where "XX" is the size of the border in pixels. EX: <plaintext><</plaintext>IMG SRC="ADDRESS" BORDER="5"> <DT>TRANSPARENCY <DD>Defines the transparency of an image, allowing the background to show through the image. Values range from 0 to 100 (Invisable). <TABLE BORDER="0" BGCOLOR="grey" Width="100%"> <th>Tip:</th><tr><td> You may want to use a transparency value of 50 for which WebTV uses to make Web pages load faster</td></tr></table> Ex:<plaintext><</plaintext>IMG SRC="url" TRANSPARENCY="50"> </dl> <HR> You can use an image as an anchor or link. This is very easy to do, just put the IMG tag inside the Anchor tag. Like this: <plaintext><</plaintext>A HREF="LINK-ADDRESS"> <plaintext><</plaintext>IMG SRC="IMAGE-ADDRESS"> <plaintext><</plaintext>/A> See, I told you it was easy! <HR> Now for some fun! <img src="/justforwebtv/images/i_watch_webtv.gif"> <plaintext><</plaintext>img src="/justforwebtv/images/i_watch_webtv.gif"> <hr> <img src="/justforwebtv/images/i_watch_webtv.gif" height="80"> <plaintext><</plaintext>img src="/justforwebtv/images/i_watch_webtv.gif" height="80"> <hr><img src="/justforwebtv/images/i_watch_webtv.gif" height="80" width="300"> <plaintext><</plaintext>img src="/justforwebtv/images/i_watch_webtv.gif" height="80" width="300"> <hr><img src="/justforwebtv/images/i_watch_webtv.gif" border="20"> <plaintext><</plaintext>img src="/justforwebtv/images/i_watch_webtv.gif" border="20"> <hr><img src="/justforwebtv/images/i_watch_webtv.gif" TRANSPARENCY="70"> <plaintext><</plaintext>img src="/justforwebtv/images/i_watch_webtv.gif" transparency="70"> <hr><img src="/justforwebtv/images/i_watch_webtv.gif" height="40" width="200" border="30" transparency="50"> <plaintext><</plaintext>img src="/justforwebtv/images/i_watch_webtv.gif" height="40" width="200" border="30" transparency="50"> I am sure that you can see how powerful the IMG tag can be! There is <a href="http://developer.webtv.net/authoring/html/img.html">more attributes for the IMG tag</a> but, that should get you started. <center><hr><a href="/justforwebtv/paradise.html" transition="slideleft"><img src="/justforwebtv/images/box.gif" height="70" width="70" border="10" transparency="50" align="center"></a> And now, click this image for a brief intermistion. Don't worry, you will be brought right back here! You won't want to miss this! It wil blow you away! ...</center> And here's the code! <plaintext><</plaintext>a href="/justforwebtv/paradise.html" transition="slideleft"><plaintext><</plaintext>img src="/justforwebtv/images/box.gif" height="70" width="70" border="10" transparency="50" align="center"> <Plaintext><</plaintext>/a> <a name="sounds"><hr></a> <table border="0" width="100%"><tr><td> <blackface>Sounds</blackface></td><td align="right"><a href="#start">^TOP^</a> </td></tr></table> <hr>You can put songs on you page that start playing as soon as they finish loading. You can also have links to songs that will play when you click on them. <table border="10" width="100%" bgcolor="grey"> <th>IMPORTANT TIP:</TH> <TR><TD>Song files can be very big. The bigger the file, the longer it will take to load. Always put the code for the song at the end of your page. That way your page can load before the song loads. This will help your page load faster! Oh yeah, I hate long downloads! </td></tr><table> <hr> The tag for adding a song to your page is <plaintext><</plaintext>BGSOUND> This tag inserts a background sound or "soundtrack" in a Web page. Designed to play on initial load. <hr> <blackface>Attributes for the BGSOUND tag</blackface> <dl> <dt>SRC <dd>Defines a URL for a sound file that will play in a Web page. EX:<plaintext><</plaintext>BGSOUND SRC="url"> <dt>LOOP <dd>Defines the number of times a sound will loop when activated in a Web page. If LOOP="-1" or if LOOP="infinite" is defined, the sound will loop indefinitely. EX:<plaintext><</plaintext>BGSOUND SRC="url" LOOP="3"> EX:<plaintext><</plaintext>BGSOUND LOOP="INFINITE" SRC="URL of song"> </dl> <hr> To make a link to a sound file, just use the address of the file in an Anchor tag. EX:<plaintext><</plaintext>A HREF="URL of song"> XXX<plaintext><</plaintext>/a> The XXX is whatever you want the link to be. It could be text, like the name of the song. Or, it could be an image by using the IMG tag! <hr>There are <a href="http://developer.webtv.net/authoring/html/embed.html">other ways to add music or sounds to your page</a> but, this is the easiest way. <hr>There are many places to find songs files on the internet. There are some on the <a href="links.html#music">links</a> page. <a name="text"><hr></a> <table border="0" width="100%"><tr><td align="left"> <blackface>Text</blackface></td><td align="right"><a href="#start">^TOP^</a> </td></tr></table> <HR> There will be times when you will want to change the size, color, or style of you text. There are a lot of ways that you can change your text. Some examples: <plaintext> ... </plaintext> Italics <plaintext> ... </plaintext> Bold <plaintext> ... </plaintext> Underline <plaintext><BLACKFACE>...</BLACKFACE></plaintext> <blackface>Blackface</blackface> <plaintext><BIG> ... </BIG></plaintext> <big>Big</big> <plaintext> ... </plaintext> Small <plaintext><S> ... </S></plaintext> <s>Strike</s> <plaintext> ... </plaintext> subscript <plaintext> ... </plaintext> Superscript Just a few of the tags that will change your text! You can use more than one tag at a time. BOLD ITALICS UNDERLINED ITALCS BOLD UNDERLINED ITALICS <TABLE bgcolor="grey" border="10" Width="100%"> <th>IMPORTANT TIP:</TH> <TR><TD>If you use more than one tag at a time, they must be nested. If you use an I tag followed by a B tag, you must close the B tag first then close the I tag. EX: <plaintext>TEXT</plaintext> </td></tr></table> <HR> The most important tag for changing your text is the FONT tag. It looks like this: <plaintext> ... </plaintext> The FONT tag defines that enclosed text will display in a certain font size, color, or style. Attributes of the FONT tag: <dl> <dt>COLOR <dd>Defines a color for your text.It can be specified either as hexadecimal color values or as <a href="/justforwebtv/info/colorcodes.html">predefined color names</a>. EX: <plaintext>...</plaintext> <dt>EFFECT <DD>Defines an effect for a font. </DL><Values for the EFFECT tag: <dl> <DL> <dt>EMBOSS <DD>Draws the text so that it seems pressed into the surface of the page. Try this one on buttons with a BLACKFACE tag. <DT>RELIEF <DD>Draws the text so that it seems raised from the surface of the page. <DT>SHADOW <DD>Draws the text with a shadow cast down and to the right of the text. I like this one with <a href="http://developer.webtv.net/authoring/html/hr.html">HEADLINE</a> tags EX: <plaintext>...</plaintext> </dl> <dt>SIZE <DD>Defines the size of the font. Values range from 1 to 7 and can be set with the "+" or "-" characters in front to specify a difference relative to the current font size. EX: <plaintext>...</plaintext> EX: <plaintext>...</plaintext> <DT>TRANSPARENCY <DD>Defines the transparency of a font, allowing the background to show through the text. Values range from 0 (fully opaque) to 100 (fully transparent). EX: <plaintext>...</plaintext> </dl> <hr>You can use more than one attribute in the same FONT tag. EX: <plaintext> ... </plaintext> As long as you only use one FONT tag, no mater how many attributes you use, you only need one close tag! EX: <plaintext> ... </plaintext> Always nest your tags! <HR> <center> <a href="#start">^Top^</a></center><hr> <center> Here is a place where you can try different attributes!  <center> <a href="http://leader.linkexchange.com/1/X1389433/clickle" target="_top"><img width=468 height=60 border=0 ismap alt="" src="//leader.linkexchange.com/3/X1389433/showle?"></a> <a href="http://leader.linkexchange.com/3/X1389433/clicklogo" target="_top"><img src="//leader.linkexchange.com/3/X1389433/showlogo?" width=468 height=16 border=0 ismap alt=""></a> </center>  <center> <table border="2" bgcolor="#666666"> <tr><td align=center> <form name="testbed"> <input type=button value="Click-N-Paste" onClick="javascript:this.form.txt.focus();this.form.txt.select();"> <textarea id="txt" cols=50 rows=17 name="stn" bgcolor="SKYBLUE" text="MIDNIGHTBLUE" cursor=navyblue nohighlight autoactivate> <HTML> <TITLE></TITLE> <BODY BGCOLOR="" TEXT="" LINK="" VLINK="" BACKGROUND=""> <HR> <A HREF=""> </A> <HR WIDTH="70%"> <IMG SRC="" HEIGHT="" WIDTH="" TRANSPARENCY=""> <BGSOUND SRC="" LOOP=""> </body> </html> </textarea></center> </tr></td></table> <bgsound src="//www.oocities.org/justforwebtv/sounds/genius.mid" loop="infinite"> </body></html>