Loading...
HOME
 |
Basic Html (for Us Kids) | ||
Discussion by Acidify with 23 Replies.
Last Update: May 17, 2006, 8:19 am | |||
 |
|||
 |
 |
|
 |
 |
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
 |
|
|
What is HTML? HTML (hypertext markup language) is computer language that is used to webpages. It can be confusing to understand for some of us kids. HTML pages are text files that has of HTML tags (they can place the text or images whereever you want to place it), and text you can place between the tags so the text willshow up on your page when you put it on the WWW. Tags are instructions that tell your browser what to show on ya website. They break up your webpage into basic sections. All tags start with a < (left bracket) and end with a > (right bracket).
If you are a starter you need 4 tools An editor to save your html or website in or just for htm notes such as notepad.You also need webspace in which trap17 will provide to you.You also most likely will need graphics.And the last thing is ideas because you dont want you site to be like everyone else.
how to set up ya page basic page setup is easy. You can copy and paste this code into your editor and just add your own stuff in between the <body> and </body> tags:
this tag only works in the IE browser. Netscape will ignore the tag, showing a regular background instead. CSS gives you more freedom with backgrounds but this is a html tourial and were not gonna go into css untill my next tourials maybe.
<head>
<title>Your page title goes here</title>
</head>
<body>
---Everything that appears on your page will be entered here---
</body>
</html>
Here is a more exciting page.
<head>
<title>trap17 is great</title>
<style type="text/css">
body { background-color: #33ccff; }
h1 {font-family: arial, verdana;
color: 6600ff }
p {font-family: arial, verdana;
color: 6600ff }
</style>
</head>
<body>
<div align="center"><h1>Max's Page</h1></div>
<div align="center"><p>My name is ----. I'm
pet poodle. This is my first and probably my last web page.</p></div>
<div align="center"><img src="max.jpg" width="161" height="195" alt="Max"></div>
</body>
</html>
Now the page begins with <html> and ends with </html>.These are the tags they begin and even with.The head tag has the title of your page, and between the <body> tag and the </body> tag is where you put all the text and images and stuff that will appear on your page. tags must always be nesting. For example, <b><u><Hello</u></b> is correct, <b><u><Hello</b></u> is not. basic tags are covered in the HTML sections of this page.
how to add image background To add a background image to your page, you need to add this tag after the </head> tag, remember that you can use a .gif or a .jpg, you just have to change the filename in the code if you use a .jpg
If you just want a background color, you would add this tag after the </head> tag:
How do I add text to my page? To add text, you need to set up headers and paragraphs
You can align your paragraphs this way, the default is aligned left:
<p>You write your text here</p>
Now To center your text you do this:
To align your text on the right you do this:
To make your text bold you do this:
To italicize your text you do this:
To underline your text you do this:
In order to make a line break you need to add this tag wherever you want to return to the next line: <br>. You can use this tag to make vertical spaces between images, and it works just like the enter key on your keyboard.
For example, to write an address:
123 Any Street<br>
Anywhere, Any State 12345</p>
A <br> tag does not need a closing tag
You can wrap your text around an image like this:
Text wrapping with forced line breaks to form paragraphs:
If you want to change the font for just a portion of your text you can override your style sheet by adding this code:
<font face="your font" size="your size #" color="#your color number">your text goes here</font>
All of the text in between <font> and </font> will be changed, but the text before and after this tag will be the default font that you set up in the basefont tag.
I will add more advanced html tourials.I might add another later or probly in a few days so study this one because its more to come.I might also add a css tourial but I am not sure.
[note=KuBi] There is no need to put so many spaces inbetween each line. One is enough.[/note]
If you are a starter you need 4 tools An editor to save your html or website in or just for htm notes such as notepad.You also need webspace in which trap17 will provide to you.You also most likely will need graphics.And the last thing is ideas because you dont want you site to be like everyone else.
how to set up ya page basic page setup is easy. You can copy and paste this code into your editor and just add your own stuff in between the <body> and </body> tags:
this tag only works in the IE browser. Netscape will ignore the tag, showing a regular background instead. CSS gives you more freedom with backgrounds but this is a html tourial and were not gonna go into css untill my next tourials maybe.
CODE
<html><head>
<title>Your page title goes here</title>
</head>
<body>
---Everything that appears on your page will be entered here---
</body>
</html>
Here is a more exciting page.
CODE
<html><head>
<title>trap17 is great</title>
<style type="text/css">
body { background-color: #33ccff; }
h1 {font-family: arial, verdana;
color: 6600ff }
p {font-family: arial, verdana;
color: 6600ff }
</style>
</head>
<body>
<div align="center"><h1>Max's Page</h1></div>
<div align="center"><p>My name is ----. I'm
pet poodle. This is my first and probably my last web page.</p></div>
<div align="center"><img src="max.jpg" width="161" height="195" alt="Max"></div>
</body>
</html>
Now the page begins with <html> and ends with </html>.These are the tags they begin and even with.The head tag has the title of your page, and between the <body> tag and the </body> tag is where you put all the text and images and stuff that will appear on your page. tags must always be nesting. For example, <b><u><Hello</u></b> is correct, <b><u><Hello</b></u> is not. basic tags are covered in the HTML sections of this page.
how to add image background To add a background image to your page, you need to add this tag after the </head> tag, remember that you can use a .gif or a .jpg, you just have to change the filename in the code if you use a .jpg
CODE
<body background="your background image name.gif">If you just want a background color, you would add this tag after the </head> tag:
CODE
<body bgcolor="#000000" (whatever color # you want)>QUOTE
The background image has to be uploadedHow do I add text to my page? To add text, you need to set up headers and paragraphs
CODE
<h1>This is a header</h1>CODE
<p>This is a paragraph.anyway to let you know a little more about headers, a header is kinda like a title. You can have less important headers named h2, h3, h4, h5, and h6. You can change the header font, font color, font size, etc. by using style sheets.</p>You can align your paragraphs this way, the default is aligned left:
<p>You write your text here</p>
Now To center your text you do this:
CODE
<div align="center"><p>This will center your text</p></div>To align your text on the right you do this:
CODE
<div align="right"><p>This will align your text to the right</p></div>To make your text bold you do this:
CODE
<p><b>This will make your text bold</b></p>To italicize your text you do this:
CODE
<p><i>This will italicize your text</i></p>To underline your text you do this:
CODE
<p><u>This will underline your text</u></p>In order to make a line break you need to add this tag wherever you want to return to the next line: <br>. You can use this tag to make vertical spaces between images, and it works just like the enter key on your keyboard.
For example, to write an address:
CODE
<p>trap smithz<br>123 Any Street<br>
Anywhere, Any State 12345</p>
A <br> tag does not need a closing tag
You can wrap your text around an image like this:
CODE
<p><img src="turtle1.gif" width="75" height="50" alt="turtle" align="left">Adding your text here will wrap your text around your graphic, with your graphic on the left and your text aligned to the left of the graphic.</p>Text wrapping with forced line breaks to form paragraphs:
CODE
<p><img src="turtle1.gif" width="75" height="50" alt="turtle" align="left">Adding your text here will wrap your text around your graphic, with your graphic on the left and your text aligned to the left of the graphic.<br clear="all"><br> This is a new paragraph.</p>If you want to change the font for just a portion of your text you can override your style sheet by adding this code:
<font face="your font" size="your size #" color="#your color number">your text goes here</font>
All of the text in between <font> and </font> will be changed, but the text before and after this tag will be the default font that you set up in the basefont tag.
I will add more advanced html tourials.I might add another later or probly in a few days so study this one because its more to come.I might also add a css tourial but I am not sure.
[note=KuBi] There is no need to put so many spaces inbetween each line. One is enough.[/note]
It might be best if you explain what a lot of the tags do. The <p> tag starts a paragraph. The <style> tags add CSS to your page (Cascading Style Sheets) which improves your design with special tags without unnecessary hassle.
The <body bgcolor="#000000" (whatever color # you want)>
[CODE]
body { background-color: #33ccff; }
Also, you don't need to put a p (paragraph) tag in front of your italic or bold tags as that will form a seperate paragraph for just that snippet of text you wanted emphasized. I prefer using <em> to <i>, however.
Lastly, it's bad design to use <font face="your font" size="your size #" color="#your color number">your text goes here</font> simply because browsers may interpret it differently. It can be done through CSS as you've demonstrated and that's the preferred method of altering text.
The <body bgcolor="#000000" (whatever color # you want)>
CODE
part can be implemented in the stylesheet like this (I copied your example). Make sure you use hexadecimal codes (an example would be #000000 which will give your text or background a black color. You can find a list of these online.[CODE]
body { background-color: #33ccff; }
Also, you don't need to put a p (paragraph) tag in front of your italic or bold tags as that will form a seperate paragraph for just that snippet of text you wanted emphasized. I prefer using <em> to <i>, however.
Lastly, it's bad design to use <font face="your font" size="your size #" color="#your color number">your text goes here</font> simply because browsers may interpret it differently. It can be done through CSS as you've demonstrated and that's the preferred method of altering text.
Thank you guys. I am sort of a newbie at HTML and that helped me a lot. do you know any other sites for HTML ?
One important thing was forgotten here. After title in head of HTML document there should be next code:
This code will actually define what encoding you will be using on your site and browser will pick automaticlly from what have you encoded. I have choosen encoding 1250 Middle European which will suit from special characters in text for Slovenian Language. There should be list of all available encoding on the net, list is also available in the browser (Firefox - View - Coding....). It is important to write down head of HTMl document correctly, cause it depends on it if website content will be displayed as it should be.
CODE
<meta http-equiv="content-type" content="text/html;charset=windows-1250"/>This code will actually define what encoding you will be using on your site and browser will pick automaticlly from what have you encoded. I have choosen encoding 1250 Middle European which will suit from special characters in text for Slovenian Language. There should be list of all available encoding on the net, list is also available in the browser (Firefox - View - Coding....). It is important to write down head of HTMl document correctly, cause it depends on it if website content will be displayed as it should be.
Nice tutorial, pretty much covers all the basics. There are literally millions of tutorials available on the internet regarding HTML and all the other coding types.
very usefull
someone can learn a lot form this tutorial
thank you
someone can learn a lot form this tutorial
thank you
QUOTE (rvovk)
One important thing was forgotten here. After title in head of HTML document there should be next code:CODE
<meta http-equiv="content-type" content="text/html;charset=windows-1250"/>And before your <head> tag, it is important to have a doctype declaration, e.g.:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
For a more complete reference on doctypes and why they are important, check out A List Apart.
its a useful tut but it has been done on here before a good suggestion would be to provide some links to get people started even quicker on some more html stuff.
Thought I'd pick up on a few errors made:
If people are gonna be using the code he wrote (and thus using the langauge he wrote it in) it should be like this instead:
Same for the doctype declaration, which should be before the <html> tag not the <head> one:
"http://www.w3.org/TR/html4/loose.dtd">
Also, a simpler way of aligning text would be to do this:
<p align="right"> Right Aligned </p>
Additionally, putting the align tag in an image doesn't change whether it shows in the middle, left or right hand side of a page. Doing this probably ends up devalidating your code. Please test your scripts before printing them. If you want centre aligned images, this is the code to use:
You must include the alt="" tag in an <img> tag.
Other than that a good tutorial entering people into the world of html
QUOTE (rvovk)
One important thing was forgotten here. After title in head of HTML document there should be next code:CODE
<meta http-equiv="content-type" content="text/html;charset=windows-1250"/>If people are gonna be using the code he wrote (and thus using the langauge he wrote it in) it should be like this instead:
CODE
<meta http-equiv="content-type" content="text/html;charset=windows-1250">Same for the doctype declaration, which should be before the <html> tag not the <head> one:
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN""http://www.w3.org/TR/html4/loose.dtd">
Also, a simpler way of aligning text would be to do this:
CODE
<p align="center"> Centre Aligned </p><p align="right"> Right Aligned </p>
Additionally, putting the align tag in an image doesn't change whether it shows in the middle, left or right hand side of a page. Doing this probably ends up devalidating your code. Please test your scripts before printing them. If you want centre aligned images, this is the code to use:
CODE
<p align="center"><img src="bla.jpg" alt=""></p>You must include the alt="" tag in an <img> tag.
Other than that a good tutorial entering people into the world of html
Altough this is so basic, Never know there's something I can learned from here ^^. I'm usually using frontpage to edit html it easier than using notepad, because I can preview the page before I save it. Thanks anyway
Cmatcmextra, yes, that is the difference between XHTML and HTML. Especially in ending of tags.
QUOTE (snpclan)
Thank you guys. I am sort of a newbie at HTML and that helped me a lot. do you know any other sites for HTML ?There are a lot of sites for html. I suggest you search at google or something to see what you can find. Here are some of the sites where I learned how to do html:
webmonkey.com
w3schools.com
w3.org
htmlprimer.com
echoecho.com
pageresource.com
2kweb.net
If you want to learn html real good you could of course also consider buying a book, if you think that sounds easier.
respect
QUOTE (cmatcmextra)
CODE
<meta http-equiv="content-type" content="text/html;charset=windows-1250"/>If people are gonna be using the code he wrote (and thus using the langauge he wrote it in) it should be like this instead:
CODE
<meta http-equiv="content-type" content="text/html;charset=windows-1250">If you're going to correct people, make sure the corrections you make are actually right.
Rvovk has a / at the end of his meta http-equiv tag cos he's coding for an XHTML doctype, not an HTML one.
Same goes for the example I posted:
QUOTE (cmatcmextra)
Same for the doctype declaration, which should be before the <html> tag not the <head> one:CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN""http://www.w3.org/TR/html4/loose.dtd">
The <html> tag is in the XHTML doctype declaration (bottom line):
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
So to clear things out. Correct empty HTML 4.01 document consists of this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your title</title>
<meta name="title" content="Your title" >
<meta http-equiv="content-type" content="text/html;charset=windows-1250">
</head>
<body>
</body>
</html>
Correct empty XHTML 1.0 Transitional documentconsist of this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Your title</title>
<meta name="title" content="Your title" />
<meta http-equiv="content-type" content="text/html;charset=windows-1250"/>
</head>
<body>
</body>
</html>
I think this should validate with no problem, there can be also keywords, favicons and other meta tags added.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Your title</title>
<meta name="title" content="Your title" >
<meta http-equiv="content-type" content="text/html;charset=windows-1250">
</head>
<body>
</body>
</html>
Correct empty XHTML 1.0 Transitional documentconsist of this code:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Your title</title>
<meta name="title" content="Your title" />
<meta http-equiv="content-type" content="text/html;charset=windows-1250"/>
</head>
<body>
</body>
</html>
I think this should validate with no problem, there can be also keywords, favicons and other meta tags added.
QUOTE (Tyseen)
Rvovk has a / at the end of his meta http-equiv tag cos he's coding for an XHTML doctype, not an HTML one.Yes I know that but this tutorial is called Basic Html so I pointed out that there should be no forward slash before the closing bracket. He also said that that xhtml tag should go after the <head> tag in an html document.
I wrote the html 4.01 doctype declaration pointing out that this one should go before the html tag and unlike xhtml, not the head tag and also implied that no attributes were necessary inside the <html> tag.
Okay? Also, just incase people are still unclear about the structure of either html or xhtml documents, rvovk's set it out for us in the previous post
Nice tutorial it is even easy enough for me to understand, but I am still way too lazy to write my own HTML I use a web authoring program called NVU so I do not have to spend all that time to get the same result .
.
QUOTE (cmatcmextra)
He also said that that xhtml tag should go after the <head> tag in an html document.No, no-one has said that in this thread. Fair enough you were trying to bring the thread back around to HTML, but you should've explained why you were making the corrections as the only people who would find this tutorial useful are the ones who know absolutely nothing about X/HTML and therefore would be likely to end up using a combination of both if they didn't understand properly what the differences were. Then again, rvovk and I should've explained what we were doing better too. Could've saved us all a bit of typing (although it doesn't hurt the credit count
).
A great tutorial. Now you just need to make: Basics on php =D. Anywho, tutorials like these helped me out allot when i was a beginner at html.
Also, you forgot the part about the Meta Tags:
<META NAME="author" CONTENT="You Name"> -- Use this to give credict to the author of the site
<META NAME="robots" CONTENT="SETTING">
* NONE --tells the search engine to ignore the website completly
* ALL -- tells the search engine that they are welcomed to search all pages
* NOFOLLOW -- tells the search engine to index the page, but any other links on the page are not explored
* NOINDEX -- tells the search engine to explore links on the page, but no index the page
<META HTTP-EQUIV="refresh" CONTENT="0; url=homepage.html"> -- Redirects the page to the page set in 0 seconds
<META HTTP-EQUIV="refresh" CONTENT="0"> -- Refreshes the page repeatedly
Also, you forgot the part about the Meta Tags:
QUOTE
<META NAME="keywords" CONTENT="Keywords about your site go here"> --Just as it says<META NAME="author" CONTENT="You Name"> -- Use this to give credict to the author of the site
<META NAME="robots" CONTENT="SETTING">
* NONE --tells the search engine to ignore the website completly
* ALL -- tells the search engine that they are welcomed to search all pages
* NOFOLLOW -- tells the search engine to index the page, but any other links on the page are not explored
* NOINDEX -- tells the search engine to explore links on the page, but no index the page
<META HTTP-EQUIV="refresh" CONTENT="0; url=homepage.html"> -- Redirects the page to the page set in 0 seconds
<META HTTP-EQUIV="refresh" CONTENT="0"> -- Refreshes the page repeatedly
a very helpful thread and it was very informative to me , thanks for this psot its really good, nice one??
its good someone is helping others with the simpiler problems, thank you for this its a great eelp to me and others1
its good someone is helping others with the simpiler problems, thank you for this its a great eelp to me and others1
The tutorial is pretty nice, its basic and easy to learn. But for people who can shell out a few hundred, then you should go with dreamweaver which is a what you see what you get type of program. Its really powerful and all you have to do is drag and type stuff. It will even let you upload you're webpage to your server. you can also go to Dynamic drive and check out some special effects and useful stuff for your website
Wow that tutorial is pretty good. If you have just started with the website and HTML world start with that tutorial and move your way up. Thats what i did. Well actually at my school there is a class called web creation and it only teaches html and it pretty much teaches you everything about html and covers all of it. If you are intrested ask around your school if they have such a program and belive me that class really does help
I have heard about frontpage, though I stay away from it due to my bias against Microsoft - and the fact that I run Linux . I use ZDE, which I guess is the same sort of thing. A good site that I used a little when learning HTML is http://www.echoecho.com/htmlbasics.htm, which has a pretty good explaination. Later I also discovered http://www.tizag.com, which is a real good place not only for HTML but for other languages aswell...
Good luck
. I use ZDE, which I guess is the same sort of thing. A good site that I used a little when learning HTML is http://www.echoecho.com/htmlbasics.htm, which has a pretty good explaination. Later I also discovered http://www.tizag.com, which is a real good place not only for HTML but for other languages aswell...Good luck
|
|
|
|
|
|
| Reply / Comment | New Discussion / Topic | Share / Bookmark | E-Mail a Friend |
Similar Topics:
Help! Php Or Just Html?
A Twist On Basic Authentification
How To Create A Good Website With H...
Hi All, As i signed up today I thought that I should help people on making there websites better and more suffisticatedToday I am just going to show you how to make a very simple website.
But first I shall show you what the main tags you will be using meen.
You will be usin ...more
 Tutorials Must Be Approved Just like in the other tut section (4)
|
(26) How To: Change Your Website's Index File a simple trick using .htaccess 
|
Visual Basic - HTML Editor(demo)
How to make Children's Pants (basic)
Simple Science Projects For Kids
(Teaching Handwriting)(Teaching Penmanship)(Teaching Handwriting to Kids)
How to write a simple java program in 5 minutes
Math Help : Teaching Children Discrete Mathematics
Colors
Artisteer Template Software for HTML - Artisteer Wordpress Theme - Artisteer for Blogger
