|
- 1. Open Sublime and build a webpage by adding:
<html>
<head>
<title>Maya's Page </title>
</head>
<body>
This is my page
</body>
</html>
to an empty file. Save it with a .html extension.
- Add an headline to the page:
<h1>This is Maya's Page </h1>
- Add an image, with an explanation.
Use
<img src="http://www.images.com/havenese.jpg">
This is a picture of a Havanese, my favorite kind of Dog.
- Make the most important word in the explanation red.
Use:
<font color="red"> this word </font>
This is a picture of a Havanese, my favorite kind of Dog.
- Add a link to your favorite site, use:
<a href = "http://www.netflix.com"> Link to Netflix </a>
Add an explanation why you like the site.
- Add a button:
<button onClick = "DO_STUFF">ShowIt</button>
and a label.
<p id="theLabel">This is My Label!</p>
- Now you are ready to write your first JavaScrpt code!
Between <script> tags, add a function called showIt:
<script>
function showIt() {
}
</script>
- Make the function change theLabel to say "Hello." Use:
document.getElementById("theLabel").innerHTML = "Hello! I am alive!";
- Run the function when the button is clicked by adding:
onClick = "showIt();"
to the Button. Test that everything is working. If so, you have JavaScript code!
- Change the background color of the page using :
document.body.style.backgroundColor = "lightblue";
- Add an input field.
<input type="text" size=50 id="inputField" value="You say...">
When the button is clicked, have the function take whatever the user has typed in the input field and show it on the label with:
document.getElementById("theLabel").innerHTML = "You said: " + document.getElementById("inputField").value
Thats it! You can customize this page as much as you like, then show it to your friends to admire
|
|
