Acidify 0 Report post Posted August 2, 2005 (edited) 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 Xisto 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. <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. <html><head><title>Xisto 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 <body background="your background image name.gif"> If you just want a background color, you would add this tag after the </head> tag: <body bgcolor="#000000" (whatever color # you want)> The background image has to be uploaded How do I add text to my page? To add text, you need to set up headers and paragraphs <h1>This is a header</h1> <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: <div align="center"><p>This will center your text</p></div> To align your text on the right you do this: <div align="right"><p>This will align your text to the right</p></div> To make your text bold you do this: <p><b>This will make your text bold</b></p> To italicize your text you do this: <p><i>This will italicize your text</i></p> To underline your text you do this: <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: <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: <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: <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. Notice from KuBi: There is no need to put so many spaces inbetween each line. One is enough. Edited August 2, 2005 by KuBi (see edit history) Share this post Link to post Share on other sites
biscuitrat 0 Report post Posted August 2, 2005 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)> 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. Share this post Link to post Share on other sites
snpclan 0 Report post Posted August 2, 2005 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 ? Share this post Link to post Share on other sites
rvovk 0 Report post Posted August 2, 2005 One important thing was forgotten here. After title in head of HTML document there should be next 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. Share this post Link to post Share on other sites
s2city 0 Report post Posted August 2, 2005 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. Share this post Link to post Share on other sites
JimiHex 0 Report post Posted August 2, 2005 very usefullsomeone can learn a lot form this tutorialthank you Share this post Link to post Share on other sites
Tyssen 0 Report post Posted August 2, 2005 One important thing was forgotten here. After title in head of HTML document there should be next 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.: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://www.w3.org/1999/xhtml/;For a more complete reference on doctypes and why they are important, check out A List Apart. Share this post Link to post Share on other sites
Saint_Michael 3 Report post Posted August 3, 2005 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. Share this post Link to post Share on other sites
electriic ink 1 Report post Posted August 3, 2005 Thought I'd pick up on a few errors made: One important thing was forgotten here. After title in head of HTML document there should be next 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:<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:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://forums.xisto.com/no_longer_exists/; Also, a simpler way of aligning text would be to do this:<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:<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 Share this post Link to post Share on other sites
skynet 0 Report post Posted August 3, 2005 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 Share this post Link to post Share on other sites
rvovk 0 Report post Posted August 3, 2005 Cmatcmextra, yes, that is the difference between XHTML and HTML. Especially in ending of tags. Share this post Link to post Share on other sites
green fairy 0 Report post Posted August 3, 2005 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 ? 168761[/snapback] 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. Share this post Link to post Share on other sites
Tyssen 0 Report post Posted August 3, 2005 <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: <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: Same for the doctype declaration, which should be before the <html> tag not the <head> one: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional //EN" "http://forums.xisto.com/no_longer_exists/;'>http://forums.xisto.com/no_longer_exists/; The <html> tag is in the XHTML doctype declaration (bottom line): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://www.w3.org/1999/xhtml/; Share this post Link to post Share on other sites
rvovk 0 Report post Posted August 3, 2005 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://forums.xisto.com/no_longer_exists/ 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://forums.xisto.com/no_longer_exists/ 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. Share this post Link to post Share on other sites
