Hey, I made a simple HTML tutorial. Hope you like it! I hope you don't get tired of the text... xD Lets start... 1. The Basics + Text To begin an HTML page, start with the HTML tag. Code: <html></html> The </html> tag closes the page, use at the end. That's everything we have for now, but we need more then just an empty page with no title. Next, the head of the document. Mostly where the data is stored. For now, no data is stored. Code: <head></head> You must include some tags in the <head> code, others the afflicated script doesn't work. The title of the page (displayed in the title bar of the browser) is inside an <title> tag. To display a title correctly, use the following code: Code: <html><head><title>(Yourtitlehere)</title></head> We don't close the HTML document, we need more in the document. Next, text. Start the text with an <body> on the document. Then, put <h#> in it. Here are the <h#> codes: Code: <h1> <h2> <h3> <h4> <h5> <h6> Each tag closes with an </h#>. How bigger the number, how smaller the text. Lets put the biggest in our document... Code: <html><head><title>(Yourtitlehere)</title></head> <body><h1>This is an example page</h1> This will display This is an example page on the document, exactly that big. We don't close the body tag, as we still need the body. Next, text under the <h#> tag. Just type some text, it will display normally, but if we use this: Code: <html><head><title>(Yourtitlehere)</title></head> <h1>This is an example page</h1> Hello, this is an example page. This doesn't work correct. It will display: ''Hello, this is an example page.This doesn't work correct.'' If you press Enter, HTML doesn't recognize it as a letter. That's why the tag exist. If we do: Code: <html><head><title>(Yourtitlehere)</title></head> <body><h1>This is an example page</h1> Hello, this is an example page. This does work correct. It displays this: ''Hello, this is an example page. This does work correct.'' So works the tag, but doesn't require an close! You now know text, lets go to step 2. 2. Forms Create a form with the <input> tag. Code: <input> This is an more advanced code, you will need to do several things to make it display something... 2.1 - Button To make an button, use this: Code: <input type=button value="Button"> This will display an button with the text ''Button''. Value is what the text on the button will be. You can make it anything, but you must use the "(your text here)". But, buttons can have another option! You can make them run a script, but that is explained in my JavaScript tutorial. 2.2 - Input field To make an input field, use this: Code: <input type=text> That is enough. No extra things needed. If you want to make a password field, use this: Code: <input type=password> That is enough too. This will display big dots when typing your ''password''. 2.3 - File upload If you want an user upload a file, use this code: Code: <input type=file> Now the file doesn't have an limit. To make an size limit, use: Code: <input type="hidden" name="max_file_size" value="500"> A value of 100 will allow a file up to 100kb. But, how do you upload the file? Mostly it works to press Enter while having the type-cursor in the file input field. Now you know how to let the user select a file. 2.4 - Radio buttons To create radio buttons, use: Code: <input type="radio" name="(yournamehere)"> But this will only display a radio button, nothing else. To display text before an button, use: Code: Hello! Select this <input type="radio" name="selectme"> This will display: ''Hello! Select this'' with an radio button after it. Now you learned how to make radio buttons! 2.5 - Drop-down menu To create a drop-down menu, use: Code: <select> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> You can add more options by the <option> tag. Now you know how to create a drop-down menu. I will continue in my next post.
Here's two websites which would compliment it. http://www.w3schools.com/ http://www.tizag.com/ Both have excellent tutorials on practically EVERY website publishing language.
Really good when I need to find out something (usualy PHP) and there is php.net as well for PHP but I getting off-topic. If you want, you could make one. Just make a template for the site, set up the structure and then start to fill in topics.
you're breaking the rules already. tags should be in lowercase, not upper case. don't teach if you cant follow good practice yourself.
Uppercase tags are non valid as well, a good way to test a website is by passing it through the W3C Validator: validator.w3.org/ I basically only do HTML and PHP.
Uppercase HTML works good in Webs... And it works good for my server (Easy File Management Web Server). Post Merge: [time]1266257522[/time] A page of mine that does not work (I don't get the JavaScript prompt working, it suddently stopped working ): http://validator.w3.org/check?uri=http%3A%2F%2Fflippiemp3.webs.com%2Fs%2Fmembers%2FYoshi2889%2FmanagerINDEX.htm&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.654
www.w3schools.com is the site to go on. I learned HTML there and from a huge book that had 1000 pages! Whcih included JS and C++.
By the way, your site is down. Also if your making a website you can change your url from http://something.mywebhost.com/username/indexpage.html to something with a smaller url such as http://mywebsite.nl.am for free. Use: http://freedns.afraid.org/
Nah, is my Homebrew Host down? Gonna check it, maybe something happened... EDIT: Homebrew Host works perfect here...
