HTML Club

For those of you currently in Mark Eastburn’s after school science clubs on hypertext markup language (HTML) and cascading style sheets (CSS), here is a template to make your own web page, based on all of the HTML tags and CSS labels that we learned. All you need to do is copy this code with command+C and paste into your CodePen with command+V.

HERE IS THE HTML:

<html>
<link type=”text/css” rel=”stylesheet” href=”swebsite.css”/>
<head>
<title>My Website</title>
</head>
<body>
<div id=”logo”>
<h1>
Welcome to My Website
</h1>
</div>

<table id=”table1″>
<th colspan=”2″>
<h3>I really like ___.</h3>
</th>
<tr>
<td><img id=”pony” src=”http://upload.wikimedia.org/wikipedia/commons/thumb/6/6a/Shetland_Pony_on_Belstone_Common,_Dartmoor.jpg/1280px-Shetland_Pony_on_Belstone_Common,_Dartmoor.jpg”></td>
<td><img id=”STEMkids” src=”http://www.ed.gov/sites/default/files/stem-photo_0.jpg”/></td>
</tr>
<tr>
<td>
<div class=”links”><a href=””>To learn more about ________, click here!</a></div>
</td>
<td>
<div class=”links”>To learn more about ________, click here!</div>
</td>
</tr>
</table>

<h2>Here are some cool activities that were built with Scratch, a programming language developed by MIT.</h2>

<div class=”scratch”>
<iframe allowtransparency=”true” width=”600″ height=”497″ src=”http://scratch.mit.edu/projects/embed/35241312/?autostart=false” frameborder=”0″ allowfullscreen></iframe>
</div>

<div class=”scratch”>
<iframe allowtransparency=”true” width=”600″ height=”497″ src=”http://scratch.mit.edu/projects/embed/12778537/?autostart=false” frameborder=”0″ allowfullscreen></iframe>
</div>

<h2>Here is another game that I like</h2>

<div class=”otherGames”>
<iframe src=”http://www.freeonlinegames.com/embed/21869″ width=”640″ height=”530″ frameborder=”no” scrolling=”no”></iframe>
</div>

<h2>Do you like videos?</h2>
<h2>Here are some of my favorites!</h2>

<div class=”video”>
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/4TS-Sp1y9Lc” frameborder=”0″ allowfullscreen></iframe>
</div>
</body>

</html>

STOP AND PASTE HTML!

HERE IS THE CSS:

body {
/*background-color:#33CC44;*/
/*background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/65/Робот_Aldebaran_NAO_H25.jpg)*/
}

#logo {
width:40%;
border:2px solid black;
background-color:#9999EE;
margin:auto;
}

h1 {
font-size:40px;
text-align:center;
color:black;
line-height:10px;
}

h2 {
text-align:center;
}

p {
text-align:center;
}

a:hover {
text-decoration:none;
color:red;
}

a:link {
text-decoration:none;
}

a {
text-decoration:none;
color:#6600CC;
}
#table1, th, td {
margin:auto;
border: 1px solid black;

}
#pony {
height:250px;
}

#STEMkids {
height:250px;
}

h3 {
margin:auto;
}

.links {
font-size:15px;
border:3px solid black;
font-family:serif;
font-weight:bold;
text-align:center;
background-color:#9999EE;
width:150px;
height:50px;
background-color:pink;
border-radius:5px;
margin:auto;
margin-bottom:2px;
}

.scratch {
margin-left: 25%;
}

.otherGames {
margin-left: 25%;
}

.video {
margin-left: 25%;
}

STOP AND PASTE CSS!