vujsa 0 Report post Posted February 27, 2005 HTML 102 - Web Design For BeginnersMore Basic HTML WritingThis will be part two of a multi-part HTML tutorial.Please don't post advanced HTML replies to this article.This tutorial is specifically written for beginning HTML writers.Requirements:Software: Web Browser, HTML Editor.Knowledge: HTML 101 - Web Design For Beginners.Skills: Ability to press the keys on the keyboard.So you have read and understood HTML 101 - Web Design For Beginners and you want to learn more.So far we have talked about a very basic web page. Black on white and a link or two. Not very interesting. So next well add images and later talk about page formating.Just to review, let's look at our basic code.Our basice web page from HTML 101: <HTML> <HEAD> <TITLE> Here is my first web page! </TITLE> </HEAD> <BODY> <CENTER> My First Page.<BR> </CENTER> More text here.<BR> <A HREF="http://forums.xisto.com/ Text</A><BR> <A HREF="https://www.paypal.com/de/webapps/mpp/home here yo go to PayPal!</A><BR> </BODY></HTML> Now to add an image like a photo, logo, or banner; we'll use the image search tag.Example: <IMG SRC="foo.com/images/image102.jpg; The <IMG> tag is another one of the very few tags that does not need a closing tag.Here is our image in our basic HTML code: <HTML> <HEAD> <TITLE> Here is my first web page! </TITLE> </HEAD> <BODY> <CENTER> My First Page.<BR> </CENTER> More text here.<BR> <A HREF="http://forums.xisto.com/ Text</A><BR> <A HREF="https://www.paypal.com/de/webapps/mpp/home here yo go to PayPal!</A><BR> <IMG SRC="foo.com/images/image102.jpg; </BODY></HTML> Now if "image102.jpg" is a photo of your family or favorite car, the code above is geat; but if you have a banner, you'll need to associate a link with the image.Using an anchor tag <A> to create a link allows text to be linked by placing the text between the opening and closing anchor tags. <A>text</A>.Instead of placing text between the tags, place an <IMG> tag between the tags.Example: <A HREF="http://www.foo.com/ SRC="foo.com/images/image102.jpg; Now clicking the image takes you to http://www.foo.com/. Okay, that is everything you need to know in order to create a usable web page.But the page will continue to be pretty boring. Let's dress it up a little.The first thing you'll need to do, if you haven't already is change that page title."Here is my first web page!" is a very nice title but something a little more descriptive about the content of your web page would be better.The text between the <TITLE></TITLE> tags is the text that shows up in the upper left corner of the browser window next to the browser's icon.This is also the same title displayed on the tabs if multiple browser windows or browser tabs are open.Next thing to look at is that <BODY> tag.Here is where much of the pages formating is defined.Here is a list of basic <BODY> tag attributes: TEXT -> Color of normal text; TEXT="BLACK" LINK -> Color of a text link; LINK="BLUE" ALINK -> Color of an active link; ALINK="RED" VLINK -> Color of a visited link; VLINK="PURPLE" BGCOLOR -> Color of the pages background; BGCOLOR="WHITE" BACKGROUND -> Background image; BACKGROUND="foo.com/images/background.jpg; Let's add that to our code. <HTML> <HEAD> <TITLE> HTML For Beginners Test Page </TITLE> </HEAD> <BODY TEXT="BLACK" LINK="BLUE" ALINK="RED" VLINK="PURPLE" BGCOLOR="WHITE" BACKGROUND="http://foo.com/images/background.jpg; <CENTER> My First Page.<BR> </CENTER> More text here.<BR> <A HREF="http://forums.xisto.com/ Text</A><BR> <A HREF="https://www.paypal.com/de/webapps/mpp/home here yo go to PayPal!</A><BR> <IMG SRC="http://foo.com/images/image102.jpg; </BODY></HTML> Now if background.jpg was a real file, it would appear in the background; instead the background will just be the BGCOLOR "WHITE".Now, let's say that you wanted to have a black background, then black text wouldn't show up. So change the color of the text in the <BODY> tag.Example: <BODY TEXT="YELLOW" LINK="BLUE" ALINK="RED" VLINK="PURPLE" BGCOLOR="BLACK"> Note that the background image was left out.But what if you just wanted to change your text color temporarily. Maybe for a red description.We'll use the <FONT> tag to change the color of our text temporerily.Example: <FONT COLOR="RED">Here Is My Red Description!</FONT> The <FONT> tag like the <BODY> tag also has several attributes.Here are the basic <FONT> tag attributes: COLOR -> Color of the text; COLOR="YELLOW" SIZE -> Size of the text; SIZE="4" FACE -> The font of the text; FACE="ARIAL" * A note about the size attribute:There are several methods for assigning the size of the font. I've seen SIZE="+1", SIZE="1", and SIZE=1 all used. Different guides suggest different methods. I suggest a number in quotes.Yor text can be formated with several additional tags other than the <FONT> tag.Here are the basics: <B></B> -> Bold Text<I></I> -> Italic Text<U></U> -> Underlined TextOkay, just one more item this in the tutorial.The <IMG> tag has a few attributs that you'll need to know. HEIGHT -> Height of the image; HEIGHT="100" (100 pixels) WIDTH -> Width of the image; WIDTH="140" (140 pixels) Example: <IMG SRC="http://foo.com/images/image102.jpg HEIGHT="100" WIDTH="140"> Try to keep the size ratio the same as the original. like 5 X 7 = 50 X 70 or 100 X 140.Now put it all together and see what happens. Let me know if you have trouble.Happy coding, vujsa Share this post Link to post Share on other sites
rachelwase 0 Report post Posted June 16, 2005 Once again, thanks for taking the time to put this together. I really like that it's easy to understand and use. Before reading your tutorials I really didn't have a clue what HTML even was! Share this post Link to post Share on other sites
h3lium 0 Report post Posted August 10, 2005 wow, nice tutorial, found some useful things i didn't know. it's because of people like you that the internet is such a great to place to look to for knowledge. Share this post Link to post Share on other sites
HabMania 0 Report post Posted July 12, 2007 Very Confusing=] Share this post Link to post Share on other sites
sparkx 0 Report post Posted July 12, 2007 Very nice tutorial. I couldn't have said it better myself. I think of two types of tags, not just tags you close and tags you dont need to close. I think of them rather as tags that require no extra data. For example an <img> tag needs no extra data (outside of the tag) so there is no need to close it, but tags like <center> apply to something not inside the tag itself, therefore it needs to be ended. Reply to SonicHabbo: This is as basic as it gets. Even the font tag has been simplified. I would post the standard way for <font> tags, but no advanced HTML replys.Again Very Good,Sparkx Share this post Link to post Share on other sites
Sten 0 Report post Posted July 13, 2007 nice tutorial but lol i no all html pretty much so its a bit pointless for me.i like to use xhtml, mainly because for tags with no closing tag, u use a "/" at the end. (omg i had to copy and paste the slash from notepad to put it in here, when i pressed it i got the stupid search thing down the bottom in firefox).like: <img src="img.gif" alt="image" width="100" height="100" name="image" /> but anyway, if i were a beginner it would be a great help! Share this post Link to post Share on other sites
FirefoxRocks 0 Report post Posted July 13, 2007 (edited) I think that this is a good tutorial back in HTML 3.2, however I would recommend some changes to this. For a beginner, this would help them create their first page, but it would be easier to learn XHTML right from the start. All HTML/XHTML elements and attributes are to be in lowercase letters, not uppercase. The <img> tag needs a closing tag as well as an alt attribute, so it looks like this: <img src="http://forums.xisto.com/no_longer_exists/404.png; alt="My favourite car or whatever" /> The alt attribute is to provide alternate information in case the picture won't load, pictures are disabled, your visitor is blind, etc. The <br> element is a self-closing element also, so instead of <br>, try <br />. All of those attributes mentioned with the body are depreciated, although still valid in HTML/XHTML transitional, they shouldn't be used. All of those can be substituted in using CSS styles. Same with the <font> element, never use <font>!! <u> is a depreciated element, try this instead: <span style="text-decoration:underline"> Those are some of the newer XHTML stuff, other than that, your tutorial is quite helpful for beginners! For other helpful resources, check out W3Schools. Edited November 29, 2009 by FirefoxRocks (see edit history) Share this post Link to post Share on other sites
