HTML (Hyper Text Markup Language)


When we create HTML, we will use Word Pad.

In order to transfer to an HTML file, all you have to do is add .html to the title when you save.

Here are some of the codes you need to know:

<html> tells your computer that you are going to use HTML codes
<title> tells you computer what to have at the top of your browser
</title> ends the title
<body> tells your computer that the information to appear in your web browser is beginning
</body> ends the body
<center> centers text or images
</center> ends the centering
<h1> a large text
<h2> a little smaller text
<br> inserts a line break
<i> italicises text
</i> ends the italics
<b> bolds the text
</b> ends the bold
<font color=red> makes the font color red
<font size=+1> makes your font size one step bigger
</font> switches the font color and size back to normal
<hr> adds in a line that goes horizontally through your web browser
<a href= "http://www.website.com"> text to appear on screen </a> adds a hyperlink
<img src= "./picturetitle.jpg" width = 432 height = 72 border = 2> inserts a picture
<embed src="./titleofrecording.wav" width="0" height="0" autostart="true"></embed> inserts a recording that begins automatically
<embed src="./titleofrecording.mp3" width="200" height="50" autostart="false"></embed> inserts a recording that begins when you decide
<body background= "./titleofyourbackgroundpage.jpg"> inserts a picture to the background of your page
<body bgcolor=blue> makes the background color of your page as you specify
<marquee behavior="scroll" direction="left">Your left scrolling marquee text goes here</marquee> - you can also try changing the direction

Table Codes:
A table with two columns, and two rows:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<tr>
</table>

A table with three columns, two rows:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 3</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 2, cell 3</td>
</tr>
</table>

A table with two columns, one row:
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
</table>

Frame Code:
When you enter a frame code, one page should look like this:
<html>
<head>
<title>Title of your Webpage goes here</title>
</head>
<frameset cols = "25%, *">
<noframes>
<body>Nothing is required here.</body>
</noframes>
<frame src ="./name of website to appear on left.html" />
<frame src ="./name of website to appear on right.html" />
</frameset>
</html>
Then you will have two other websites that people actually see when they go to your frame page.
You can also change the percent above from 25% to 50% or 75%, etc. if you want to change how the pages first come up.

Textbox Codes:
<textarea rows="5" cols="20">
If you have a lot of information to include, you may want to include a textbox.
This way, your text is all together in one spot and does not go on and on down the page.
You can even scroll up and down to get to other information.
</textarea>

<textarea rows="7" cols="50">
If you want to make the textbox bigger or smaller, change the numbers.
If you have a lot of information to include, you may want to include a textbox.
This way, your text is all together in one spot and does not go on and on down the page.
You can even scroll up and down to get to other information.
</textarea>

JavaScript - a simple function
Try this out at http://www.w3schools.com/js/js_examples.asp

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Mr. Ward";
}
</script>
</head>
<body>
<p>When you click "Answer", the answer will appear.</p>
<p>Who is your computer teacher?</p>
<button onclick="myFunction()">Answer</button>
<p id="demo"></p>
</body>
/html>