Scratch
archived forums
#1 2010-12-20 14:27:03
- ProgrammingFreak
- Scratcher
- Registered: 2010-09-04
- Posts: 1000+
HTML Lessons
Here are some HTML lessons to get you started in the language!
Easy Tags
Tags are like commands in HTML. I will show you with an example.
Right-Click your browser anywhere on the page. A menu should pop up. Go to
tghe button that says 'View Source'. A window should pop up with lots of code on it!
Its okay, you don't have to understand all this right now.
But look at a line of code. It will 99.99% always have something like this: < insert text >
When a line of text has a < and > with something in between, that is considered a 'TAG'.
So lets make our first HTML file!
1. Open up your favorite text editor
2. Copy the below code:Code:
<HTML> <HEAD> <title>Hello World!</title> </HEAD> <BODY> <h1>Hello!</h1> <p>Hello World!</p> </BODY> </HTML>3. Paste it in the text editor.
Now lets walk through this and I'll explain:Code:
<HTML>You have to have this in every HTML document. This tells the computer that the following code is a HTML document. This is a beginning tag.
Code:
<HEAD>This tells the computer that the following code is in the HEAD category. This includes things like titles and such.
Code:
<title>Hello World!</title>This tells the computer to set the title of the webpage to Hello world. If you notice there are 2 tags. The <title> tag is a beginning tag. </title> is a closing tag. A closing tag tells the computer that this is the end of something, in this case, the title.
Code:
</HEAD>As you may have noticed, the </HEAD> tag is a closing one. Just like the </title> , but it tells the computer that this is the end of the HEAD section.
Code:
<BODY>This tells the computer that the following code is in the BODY category. This includes the main part of the document.
Code:
<p>Hello World</p>This writes text on to the page. You will notice the starting and ending tag of p (paragraphs).
Code:
<h1>Hello!</h1>This writes large text onto the page. You will notice the starting and ending tag of h1 (header 1). To make text like this just a tiny smaller you can change the 1 to 2. This can be changed from h1 - h6.
Code:
</BODY>As you may have noticed, the </BODY> tag is a closing one. Just like the </title> , but it tells the computer that this is the end of the BODY section.
Code:
</HTML>As you may have noticed, the </BODY> tag is a closing one. It tells the computer that this is the end of the HTML document.
4. Now save the document as 'hello.html'. Open it up in the browser and you can see what you have done! Congratulations! You have made your first HTML document!
Last edited by ProgrammingFreak (2010-12-20 15:23:12)
Offline
#3 2010-12-20 14:31:09
- ProgrammingFreak
- Scratcher
- Registered: 2010-09-04
- Posts: 1000+
Re: HTML Lessons
OK! So do you want me to create a "File" just for you or just have some lessons here?
Offline
#5 2010-12-20 14:41:14
#6 2010-12-20 15:23:38
#7 2010-12-20 15:27:34
- ScratchReallyROCKS
- Scratcher
- Registered: 2009-04-22
- Posts: 1000+
Re: HTML Lessons
I know HTML pretty well. I coded the whole Chrono Wars website (chronowars.srrcollab.site40.net).
Offline
#8 2010-12-21 17:45:00
#9 2010-12-22 05:45:43
Re: HTML Lessons
Look at this little app 
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <title>Tech Support</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <form> <select onchange="this.form.prob.value=this.options[this.selectedIndex].innerHTML;this.form.solu.value=this.options[this.selectedIndex].value"> <option value="" selected>Select from Drop Down List</option> <option value="Plug in the Computer">No Power</option> <option value="Turn on the Monitor">Screen is Dark</option> </select><br> <br> <table> <tr> <td valign="top">Problem:</td> <td><textarea name="prob" rows="3" cols="30">Select from Drop Down List</textarea></td> <td valign="top">Solution:</td> <td><textarea name="solu" rows="3" cols="30"></textarea></td> </tr> </table> </form> </body> </html>
Try it out
OB6160
Offline
#10 2010-12-22 05:47:00
Offline