 HTML 102 - Web Design For Beginners, More Basic HTML Writing |
Free Web Hosting > Computers & Tech > How-To's and Tutorials > Programming > HTML, XML and other Markup Languages|
|
|
|
  |
 Feb 27 2005, 12:31 AM
Post
#1
|
|
|
Absolute Newbie  Group: Admin Posts: 887 Joined: 20-February 05 From: Indianapolis, Indiana, USA (Midwest) Member No.: 2,714  |
HTML 102 - Web Design For Beginners
More Basic HTML Writing This 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: [/tab]Software: Web Browser, HTML Editor. [tab]Knowledge: HTML 101 - Web Design For Beginners. [/tab]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: 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://www.astahost.com">Sample Text</A><BR> <A HREF="http://www.paypal.com">Click 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: CODE <IMG SRC="http://www.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: 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://www.astahost.com">Sample Text</A><BR> <A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR> <IMG SRC="http://www.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: CODE <A HREF="http://www.foo.com"><IMG SRC="http://www.foo.com/images/image102.jpg"></A><BR> Now clicking the image takes you to 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:
Let's add that to our code. CODE <HTML> Now if background.jpg was a real file, it would appear in the background; instead the background will just be the BGCOLOR "WHITE".<HEAD> <TITLE> HTML For Beginners Test Page </TITLE> </HEAD> <BODY TEXT="BLACK" LINK="BLUE" ALINK="RED" VLINK="PURPLE" BGCOLOR="WHITE" BACKGROUND="http://www.foo.com/images/background.jpg"> <CENTER> My First Page.<BR> </CENTER> More text here.<BR> <A HREF="http://www.astahost.com">Sample Text</A><BR> <A HREF="http://www.paypal.com">Click here yo go to PayPal!</A><BR> <IMG SRC="http://www.foo.com/images/image102.jpg"> </BODY> </HTML> 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: CODE <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: CODE <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:
[tab]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:
Okay, just one more item this in the tutorial. The <IMG> tag has a few attributs that you'll need to know.
Example: CODE <IMG SRC="http://www.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 |
 |
 
|
 Jun 16 2005, 04:28 AM
Post
#2
|
|
|
Newbie [ Level 2 ]  Group: Members Posts: 12 Joined: 16-June 05 Member No.: 6,272 |
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!
|
|
|
|
|
Aug 10 2005, 07:03 PM
Post
#3
|
|
|
Newbie [ Level 2 ] Group: Members Posts: 10 Joined: 10-August 05 Member No.: 7,750 |
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.
|
|
|
|
|
Jul 12 2007, 09:40 AM
Post
#4
|
|
|
Newbie [ Level 1 ] Group: Members Posts: 4 Joined: 12-July 07 Member No.: 23,310 |
Very Confusing=]
|
|
|
|
|
Jul 12 2007, 03:29 PM
Post
#5
|
|
|
Sparkx  Group: [HOSTED] Posts: 346 Joined: 11-October 06 From: Dana Point, CA, USA Member No.: 16,496 |
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 |
|
|
|
|
Jul 13 2007, 06:51 AM
Post
#6
|
|
|
Oh come on Mrs. B! Group: Members Posts: 648 Joined: 6-June 07 From: Tasmania, Australia Member No.: 22,422 |
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: CODE <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! |
|
|
|
|
Jul 13 2007, 11:09 PM
Post
#7
|
|
|
Super Member Group: [HOSTED] Posts: 660 Joined: 12-July 06 From: Ontario, Canada Member No.: 14,464 |
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: HTML <img src="http://www.foo.com/images/image102.jpg" 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: HTML <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 my Web Development Portal or W3Schools. 
|
|
|
|
|
Similar Topics
| Topics | Topics | |
|---|---|---|
|
|
|
|
Lo-Fi Version | Time is now: 8th September 2008 - 11:29 AM |