lilpjer
2012-01-11 01:12:33
Here is a short tutorial on HTML (part 1) Feel free to go along and do this yourself. If you need any help PM me. I also have this in a text file and an example project I did.
Computer Programming 1 Lessons:
Project 1
JavaScript is a programming language. It is used to tell a computer what to do. Specifically, JavaScript is the client side programming language used on web pages. Client Side Languages like JavaScript send their script to your computer to run, rather than running off of the server. PHP is an example of a Server Side Language.
Before we can begin to program in JavaScript, we need several tools to make it run.
First is a web browser. You can use FireFox, Internet Explorer, Safari, Chrome or Opera. However, each browser is slightly different. Just to be safe, be sure to view your web pages in multiple browsers.
Second is a text editor. Notepad is a simple text editor built into all Windows based machines, and it does a great job. Notepad++ is a more complex text editor, in that it adds color and formatting to your code to make it easier to write and edit. DreamWeaver is even more complex and should be used with caution as it may add code and edit on its own, bulking up your project with hundreds of extra lines. Word is also a text editor, but in order to use it effectively, you must always Save As… and choose .txt format. Also, Microsoft products tend to use their own type of symbols called Smart Quotes, none of which transfer into HTML or .txt format and will always give errors.
Third is HTML. HTML stands for Hyper Text Markup Language, the primary language all web sites are built upon. In order to program in JavaScript, you will need a simple text editor, create an HTML document, input the Script sections, then view the output in the Web Browser. This may seem like many steps, but when done correctly, creates programs that will run on Windows, Mac, Linux, even cell phones.
Open a simple text document using Notepad or Notepad++. Go to File -> Save. Make the title of your document template.html (no spaces or capital letters). Set the location either the Desktop or your USB stick.
HTML is a simple language. It uses two type of tags, single and paired, to create a variety of effects. Lets practice creating the basic form called a Template using paired tags.
Notice that the second tag with the same name always has a / in front of the name. This indicates that this tag is now closing. Also notice that the HTML tags are not indented, but everything inside of them is. HTML is the Parent of HEAD, BODY, ADDRESS also called the Children. By indenting Children inside of Parents, it becomes very easy to edit code and track where the tags start and end. This is called Clean Code. Use it ALWAYS!!!
Place the above code into the template.html. Save it again to your desktop or USB stick. This is the basic framework for all of your projects from here on out.
The HEAD section is used to hold three different things for web sites: the TITLE, SCRIPTS and CSS. Lets add a TITLE to our project.
Notice it gets indented one more time, indicating the Parent Child relationship. Also note that the TITLE is on a single line. Single lines are used mostly for small pieces of code rather than whole sections like the HEAD has. The TITLE in the HEAD will get displayed in the bar at the top of the program running it.
Open your template.html. Insert the
The BODY section is used to hold everything you want to have appear on the screen, including HTML, SCRIPTS and CSS. Lets add some text into our BODY.
This text will come out simple and plain. We will learn more HTML in a few minutes to change its appearance.
The ADDRESS section is a section that is not used on large web sites, but is still used on small web pages. It holds contact and copyright information for the page and usually displays its contents in italics.
The HR is your first single tag. It does not need to be closed. It creates a horizontal line that acts as a separator across the page. © is called a Screen Command, a command that accesses a specific character not on the keyboard. In this case, it will make the copyright symbol, a c inside of a circle.
Now lets save our document and open it using a web browser. What does it look like? Is your TITLE in the right place? How about your ADDRESS? Is it in italics?
Boring? Lets spice it up a little.
In the BODY tag, lets add some color features:
Save our document. Refresh the web browser. Note the color change of both the text and the background. The TEXT and BGCOLOR are called Attributes. All HTML tags can take attributes that produce a variety of effects. CSS allows even more customization of the HTML tags to create style schemes.
Lets learn a few more HTML Paired Tags. Back inside the BODY section of project1.html, lets add some more text after the Hello World Line:
Save and refresh your page. What happened?
HTML does not understand when you hit the Enter key in an English text section. In order to force the computer to Break the lines, use the HTML Single Tag command of
Save and refresh your page. Does it look better now? Notice that we used a double
At the end of your paragraph, you do not need a <br /> any more. Paragraphs in HTML automatically leave an extra line break at the end.
Lets add some emphasis on the rhyming words in our paragraph by making them bold
Save and refresh your page. That is the basic idea on how HTML works with single and paired tags. HTML and CSS have many more commands. You will learn more commands as they pertain to particular lessons. If you want to know more about how to make web sites, consider taking Introduction to Web Design or ROP Web Design.
Add more stuff on to it to learn more
Your VERY FIRST try should look something like this:
Lesson 2– You're first java script
In your HTML, you can put a script in 3 different spots: the HEAD, the BODY, and Externally.
Regardless of where you put it, the HTML requires a paired tag.
Always remember to use clean code. Indent the SCRIPT tags inside of the section they are in.
Indent the content of the SCRIPT appropriatly.
How to identify Scripting Language.
In order to use JavaScript, a parameter must be added to the open SCRIPT tag.
If you were learning a different scripting language that goes into HTML, you would see a different name inside of the quotes.
External Scripts are where your script is so large, or being designed by someone else,
that you would not actually type it into your template. Instead, you would type it into a seperate Notepad document, saved with a .js instead of .html. To call the External Script, you would modify the paired SCRIPT tag.
Some older browsers and cell phones do not have JavaScript. There are a variety of tools you would need to use if you were ever to program for those viewers that would disable JavaScript and place alternative content on the screen.
Your First Command
inside the SCRIPT section, you cannot use HTML. You cannot use English. You can only use JavaScript commands. Anything else will give you an error and freeze your program. Be careful to cloze all open commands, quotes, parenthesis, etc., because this can also cause your program to crash.
Open your blank template. Remember, your blank template should just have the HTML, HEAD, BODY, and ADRESS sections with minimal content (see project 1 before the poem.) Once your template is open, Save As… and use the name project2.html. Now you can safely edit Project 2 without affecting either Project1 or your template.
Inside of the BODY section, add the following code:
Enter this into the BODY section of your template. Save and refresh your browser. This should look almost identical to the first part of Project 1.
Your first command is the document.write. This is the command to allow the computer to take the English (INPUT) inside the quotes and OUTPUT it to the screen/web page. document.write is a special command that uses the document object, part of Object Oriented Programming, which we will learn more about later.
The paranthesis are used to hold all of the information that the document.write needs to work with, and is called a parameter (Similar to the HTML parameters).
English does not work inside JavaScript, but these English sentences appear in quotes so that the computer works with the information as an item rather than English.
Also note that the line ends with a;. Nearly every line in JavaScript ends with a ;. Which ends the command.
History: The Hello World program has been used by pogrammers over the world for 50 years on all sorts of devices, from computers, cell phones, calculators, and digital watches, using every programming langyage, to test the ability to accept INPUT and produce OUTPUT. Now that you have made the Hello World program as your second project, you too are pat of this large group of programmers. Welcome to the club.
Accessing External JavaScript
In order to have your web page call an external Java Script, you must first make a new document. Open a blank document in notepad (or notepad++). Enter the following line.
document.write("Hello World from an External Script");
Save as external2.js.
Go into project2.html. Add the following line in the body after your </script> but before the </body>:
Note that this is also a paired tag and should be indented appropriately for being inside the BODY section. Save and refresh the browser. Do you see the new line? You can use external JavaScripts to run whole programs, not just a single line. This is an efficent way to design large scale projects where several programmers collaborate on a common project.
Go into the first script. Inside the quotes for the Hello World, add an
Heres an example of project 2
tell me if you like it :) :D
P.S. When you post a thread etc. on a forum and you want to edit it to make it look cool your using HTML :P
Computer Programming 1 Lessons:
Project 1
JavaScript is a programming language. It is used to tell a computer what to do. Specifically, JavaScript is the client side programming language used on web pages. Client Side Languages like JavaScript send their script to your computer to run, rather than running off of the server. PHP is an example of a Server Side Language.
Before we can begin to program in JavaScript, we need several tools to make it run.
First is a web browser. You can use FireFox, Internet Explorer, Safari, Chrome or Opera. However, each browser is slightly different. Just to be safe, be sure to view your web pages in multiple browsers.
Second is a text editor. Notepad is a simple text editor built into all Windows based machines, and it does a great job. Notepad++ is a more complex text editor, in that it adds color and formatting to your code to make it easier to write and edit. DreamWeaver is even more complex and should be used with caution as it may add code and edit on its own, bulking up your project with hundreds of extra lines. Word is also a text editor, but in order to use it effectively, you must always Save As… and choose .txt format. Also, Microsoft products tend to use their own type of symbols called Smart Quotes, none of which transfer into HTML or .txt format and will always give errors.
Third is HTML. HTML stands for Hyper Text Markup Language, the primary language all web sites are built upon. In order to program in JavaScript, you will need a simple text editor, create an HTML document, input the Script sections, then view the output in the Web Browser. This may seem like many steps, but when done correctly, creates programs that will run on Windows, Mac, Linux, even cell phones.
Open a simple text document using Notepad or Notepad++. Go to File -> Save. Make the title of your document template.html (no spaces or capital letters). Set the location either the Desktop or your USB stick.
HTML is a simple language. It uses two type of tags, single and paired, to create a variety of effects. Lets practice creating the basic form called a Template using paired tags.
<html>
<head>
</head>
<body>
</body>
<address>
</address>
</html>Notice that the second tag with the same name always has a / in front of the name. This indicates that this tag is now closing. Also notice that the HTML tags are not indented, but everything inside of them is. HTML is the Parent of HEAD, BODY, ADDRESS also called the Children. By indenting Children inside of Parents, it becomes very easy to edit code and track where the tags start and end. This is called Clean Code. Use it ALWAYS!!!
Place the above code into the template.html. Save it again to your desktop or USB stick. This is the basic framework for all of your projects from here on out.
The HEAD section is used to hold three different things for web sites: the TITLE, SCRIPTS and CSS. Lets add a TITLE to our project.
<head>
<title>My First Project</title>
</head>Notice it gets indented one more time, indicating the Parent Child relationship. Also note that the TITLE is on a single line. Single lines are used mostly for small pieces of code rather than whole sections like the HEAD has. The TITLE in the HEAD will get displayed in the bar at the top of the program running it.
Open your template.html. Insert the
<title><head>The BODY section is used to hold everything you want to have appear on the screen, including HTML, SCRIPTS and CSS. Lets add some text into our BODY.
<body>
Hello World. This is my First HTML program.
</body>This text will come out simple and plain. We will learn more HTML in a few minutes to change its appearance.
The ADDRESS section is a section that is not used on large web sites, but is still used on small web pages. It holds contact and copyright information for the page and usually displays its contents in italics.
<address>
<hr />
©2011, Your Name Here
</address>The HR is your first single tag. It does not need to be closed. It creates a horizontal line that acts as a separator across the page. © is called a Screen Command, a command that accesses a specific character not on the keyboard. In this case, it will make the copyright symbol, a c inside of a circle.
Now lets save our document and open it using a web browser. What does it look like? Is your TITLE in the right place? How about your ADDRESS? Is it in italics?
Boring? Lets spice it up a little.
In the BODY tag, lets add some color features:
<body text="magenta" bgcolor="lemonchiffon">Save our document. Refresh the web browser. Note the color change of both the text and the background. The TEXT and BGCOLOR are called Attributes. All HTML tags can take attributes that produce a variety of effects. CSS allows even more customization of the HTML tags to create style schemes.
Lets learn a few more HTML Paired Tags. Back inside the BODY section of project1.html, lets add some more text after the Hello World Line:
<body>
Hello World. This is my First HTML program.
I wanna be the very best
Like no one ever was
To catch them is my real test
To train them is my cause
</body>Save and refresh your page. What happened?
HTML does not understand when you hit the Enter key in an English text section. In order to force the computer to Break the lines, use the HTML Single Tag command of
<br />: <body>
Hello World. This is my First HTML program.<br /><br />
I wanna be the very best<br />
Like no one ever was<br />
To catch them is my real test<br />
To train them is my cause<br />
</body>Save and refresh your page. Does it look better now? Notice that we used a double
<br /> <body>
Hello World. This is my First HTML program.<br /><br />
<p>I wanna be the very best<br />
Like no one ever was<br />
To catch them is my real test<br />
To train them is my cause</p>
</body>At the end of your paragraph, you do not need a <br /> any more. Paragraphs in HTML automatically leave an extra line break at the end.
Lets add some emphasis on the rhyming words in our paragraph by making them bold
<b><i><u><p>I wanna be the very <b>best</b><br />
Like no one ever <b>was</b><br />
<u>To</u> catch <i>them</i> is my real <b>test</b><br />
<u>To</u> train <i>them</i> is my <b>cause</b></p>Save and refresh your page. That is the basic idea on how HTML works with single and paired tags. HTML and CSS have many more commands. You will learn more commands as they pertain to particular lessons. If you want to know more about how to make web sites, consider taking Introduction to Web Design or ROP Web Design.
Add more stuff on to it to learn more
Your VERY FIRST try should look something like this:
<html>
<title>Hello World pokemon</title>
<center><head>This Is my first HTML project</head>
<body text="008000" bgcolor=ADD8E6>
Hello world This is my first HTML program.<br/><br />
<p>I wanna be the very <b>best</b><br />
Like no one ever <b>was</b><br />
<u>To</u> catch <i>them</i> is my real <b>test</b><br />
<u>To</u> train <i>them</i> is my <b>cause</b></p>
<p>I will travel across the <b>land</b><br />
Searching far and <b>wide</b><br />
<u>Each</u> Pokemon to <b>understand</b><br />
<u>The</u> Power that's <b>inside</b><br /></p>
<p>Pokemon, its you and <b>me</b><br />
I know it's my <b>destiny</b><br />
Pokemon, oh, you're my best <b>friend</b><br />
<u>Pokemon</u>, a heart so <b>true</b><br />
<u>Our</u> courage will push us <b>through</b><br /></p>
</center>
<body>
<address>
<hr />
©2012, your name
</address
></html>Lesson 2– You're first java script
In your HTML, you can put a script in 3 different spots: the HEAD, the BODY, and Externally.
Regardless of where you put it, the HTML requires a paired tag.
<script>
JavaScript code goes here
</script>Always remember to use clean code. Indent the SCRIPT tags inside of the section they are in.
Indent the content of the SCRIPT appropriatly.
How to identify Scripting Language.
In order to use JavaScript, a parameter must be added to the open SCRIPT tag.
<script type"text/javascript">
JavaScript code goes here
</script>If you were learning a different scripting language that goes into HTML, you would see a different name inside of the quotes.
External Scripts are where your script is so large, or being designed by someone else,
that you would not actually type it into your template. Instead, you would type it into a seperate Notepad document, saved with a .js instead of .html. To call the External Script, you would modify the paired SCRIPT tag.
<script type="text/javascript" src="yourfile.js"></script>Some older browsers and cell phones do not have JavaScript. There are a variety of tools you would need to use if you were ever to program for those viewers that would disable JavaScript and place alternative content on the screen.
Your First Command
inside the SCRIPT section, you cannot use HTML. You cannot use English. You can only use JavaScript commands. Anything else will give you an error and freeze your program. Be careful to cloze all open commands, quotes, parenthesis, etc., because this can also cause your program to crash.
Open your blank template. Remember, your blank template should just have the HTML, HEAD, BODY, and ADRESS sections with minimal content (see project 1 before the poem.) Once your template is open, Save As… and use the name project2.html. Now you can safely edit Project 2 without affecting either Project1 or your template.
Inside of the BODY section, add the following code:
<body>
<script type="text/java script">
document.write("Hello World! This is my first JavaScript Code!");
</script>
</body>Enter this into the BODY section of your template. Save and refresh your browser. This should look almost identical to the first part of Project 1.
Your first command is the document.write. This is the command to allow the computer to take the English (INPUT) inside the quotes and OUTPUT it to the screen/web page. document.write is a special command that uses the document object, part of Object Oriented Programming, which we will learn more about later.
The paranthesis are used to hold all of the information that the document.write needs to work with, and is called a parameter (Similar to the HTML parameters).
English does not work inside JavaScript, but these English sentences appear in quotes so that the computer works with the information as an item rather than English.
Also note that the line ends with a;. Nearly every line in JavaScript ends with a ;. Which ends the command.
History: The Hello World program has been used by pogrammers over the world for 50 years on all sorts of devices, from computers, cell phones, calculators, and digital watches, using every programming langyage, to test the ability to accept INPUT and produce OUTPUT. Now that you have made the Hello World program as your second project, you too are pat of this large group of programmers. Welcome to the club.
Accessing External JavaScript
In order to have your web page call an external Java Script, you must first make a new document. Open a blank document in notepad (or notepad++). Enter the following line.
document.write("Hello World from an External Script");
Save as external2.js.
Go into project2.html. Add the following line in the body after your </script> but before the </body>:
...
</script>
<script type="text/javascript" src="external2.js"></script
</body>Note that this is also a paired tag and should be indented appropriately for being inside the BODY section. Save and refresh the browser. Do you see the new line? You can use external JavaScripts to run whole programs, not just a single line. This is an efficent way to design large scale projects where several programmers collaborate on a common project.
Go into the first script. Inside the quotes for the Hello World, add an
<br />Heres an example of project 2
<html>
<head>
<title>My First Project</title>
</head>
<body>
<script type="text/javascript" >
//Here is my first command.
document.write("<center>Hello World! This is my first JavaScript Code!</center><br />");
document.write("<center><font color=\"red\"> I wanna be the very best</center></font><br />")
document.write("<center><font color=\"red\"> Like no one ever was</center></font><br />");
document.write("<center><font color=\"red\"> To catch them is my real test</center></font><br />");
document.write("<center><font color=\"red\"> To train them is my cause</center></font><br />");
</script>
<script type="text/javascript" src="external2.js"></script>
<script>
//document.write("Pokemon, its you and me<br />");
//document.write("I know it's my destiny<br />");
//document.write("Pokemon, oh, you're my best friend<br />");
//document.write("Pokemon, a heart so true<br />");
//document.write("Our courage will push us through<br />");
//Oompa Loompa Doopidy doo
/* Oompa
<center><img src="oompa.jpg" width="200" height="150"></center>
*/
</script>
</body>
</center>
</div>
<script language="JavaScript">
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>
<center><img src="Snorlax.png" width="200" height="150"></center>
<address><center>© 2012 by name
</address>
</html>tell me if you like it :) :D
P.S. When you post a thread etc. on a forum and you want to edit it to make it look cool your using HTML :P