---------------------------------------------- "HTML From The Ground Up" ---------------------------------------------- C/O :: Dr4g of DynamicHell Development Team ---------------------------------------------- http://dynamichell.org | irc.dynamichell.org ---------------------------------------------- --------------- Introduction:: --------------- HTML is a language which consists of 'tags' It is not a programming language, however it is a scripting language. HTML stands for HyperText Markup Language And it is used all over the internet, it is the language used to create websites. It turns scripting tags, into objects that appear on a screen(website). The Following is basic HTML document, whihc i will explain all setions of. The general syntax for a tag is Insert stuff here you see the relevance of the / in the second tag? It lets the computer know where to begin and end its tag(function). <--- Lets the computer know its a HTML document. <--- Head is the 'behind the scenes section, Predefined things are inserted in here <--- This lets the comp know the head tag has ended <--- The body tag is the 'vual' part of the document. This is where all the work is done on the page. Everything you see on the website, is inserted into here Using Various Tags :) <--- End of body tag, end of scripting <--- LEts the computer know its the End of the HTML Document. ----------------------------- Creating our HTML Document:: ----------------------------- So far we have our standard structure of our HTML Document. Now i will show you how to create a .htm or .html file. Commonly, everyone does their HTML coding in Notepad. So the standard file externsion is .txt, however, we want it.html right? so instead of clicking save. We go to 'save as' the filename should be 'something' or 'something.txt' now edit that to, 'helloworld.html' and change the 'save as type' from text document to 'All Files' now that will let the computer know its changing from a .txt to .html successfully However, make sure u change the 'save as type' to all files as, if you don't then it will save it as 'helloworld.html.txt' (still a txt file) Now you shoudl be able to click on your file and it will open with your Web Browser. Now that we have created our first HTML document. You will like to edit it(obviously) So close down your text editor and right click on the HTML you just created and open with notepad. I will begin by showing a few kewl tags :o) --------------- The

Tag:: --------------- For now, all these tags will be inserted into the tag.

This stands for paragraph, and when your putting text onto your site, this is a good method of doing it. I will also show you how to align your text on the page.

Hello Worlld This is my First HTML Document :D w00t

------------------ The Tag:: ------------------ You can also use the tag to display text and set alot of properties to it. Example: Hello World Note, normalally colors are defined with HEX Values. Like Follows. #FFFFFF - White #000000 - Black However, simple colors (red) can be written in text. and i have used it for ease of use :) This command will have red text, font size 5 and be aligned right on the screen. Some Text Based Tags. text here - Makes your text bold ! text here - Makes your text italic ! text here - Makes your text underlined ! If you use

then after you have closed your tags. And do another

It will take a new line. However, if you use font, it will not. The following command is probably one of the most useful commands there is :)
Meaning Line Break. So if we done Hello World
Newline
w00t
The Output will be: Hello World Newline w00t See how useful that was ? :) Okay so we know how to align text and change the color of it. -------------- HyperLinks:: -------------- we want to know how to make these Links we see everywhere. It is actually very simple. Do not be concerned about the meaning of this command, Just how to use it :) Click Me This will appear as a clickable Link on your screen. Which wil take you to www.dynamichell.org Creating Email Hyperlinks & Adding a Subject This is done the same way as a normal HREF however, we add something called a mailto: so it knows its an email link and not a hyperlink to another HTML document Exmaple: <-- No ending tag needed. You should now have. ..... If you would like to have a nice image as your background, then change bgcolor.. to Changing the Title Changeing the Title of your HTML Document. inside insert the following. Hello World This is my HTML Title Check it out now on your browser :) Inserting Images Now youve probably been wondering how do we insert these images weve been seeing. Very simple...observe. <-- No Closing Tag Either. Align is explanitory Src = the location of the file wether on your computer or an internet address If you wish to have spaces between your images the following would work. Things are sorta making sense how we design a website using text links and images :) Recap ! Okay so now we know how to change text properties,(size,color..etc) Algin our text, make new lines. Insert images and Create Hyperlinks. The Following is a sum-up of all the topics i have covered so far. The tags me vary a bit form the exmaples i have showen you, there are many ways of doing things in HTML. This is My Test Page

Hello World

If you would like pizza then click Here

If you would like fries click Here



This is Underlined This is Bold> This is Italic



Broken Links? Report Creating an Image Link Now you have text based links and normal images. How can we join these so were able to click on images instead of text based links :) Example: Now you can see its an IMaGe within a Hyperlink :) You may have noticed i inserted a border tag. That is, as default, when an image is inserted into a hyperlink, It adds a border to it, so i was setting it to 0 to take it away :o) Creating Page Anchors Page anchers are easy and fun! Also very handy if you have long pages. As i have described at the start of thsi tutorial. there are many ways to do things in HTML, i do the following In my This will be on a certain location on your page which you want the anchor to go to. Then say your creating a link to go to the 'Tutorial' Section on your site. you would do the following. This, once clicked, would take you to wherever the
You can also add a background by doing this. Forms with Email Sending. The following is code for inputting data into text boxes, and emailing it to someone. Example:
Enter Your Username

Enter Your email address

Enter Your Password

Try editing this to your email address and youll see that the 'name' tag will be displayed in your email document. Username Emailadd Pass. Tables Tables can either be very easy or very fucking hard to remember ! Took me a while but i got the hang of it eventually. Okay a table consists of 's and 's TD creates a new column(or cell), From left to right. TD creates a new row. Example:
Insert your HTML Code Here Bot these 'cells' are on the same line
This is a new line now due to the new TR
there are many ways to arrange data in tables. Play about with it :) This is a simple example, it can get very complex with all the tags if you have a Table within a table...etc So code indentation(tabbing) like the above is very important so you dont lost track of where you are in the tags :o) EOF I hope you enjoyed reading this as much as i enjoyed writing it :) www.dynamichell.org Thanks... Dr4g