Make Pages Instructions
User Manual: Pdf
Open the PDF directly: View PDF 
.
Page Count: 4
THE PARTS OF A WEB PAGE
<head>
<title>Page title</title>
</head>
<!doctype html>
Says the file is
an HTML file
Closes the HTML file
Header: Defines the
page title and
links to scripts and
style sheets
Body: All of the visible
page content
</html>
<body>
<h1>Heading title</h1>
<p>Here’s the content for
the first paragraph.</p>
<p>Here’s one more!</p>
</body>
<html>
CONSTELLATIONS
SOURCE CODE
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Constellations</title>
<link rel="stylesheet" href="styles/
main.css">
</head>
</html>
<body>
<h1 id="name">Your constellation name
goes here!</h1>
<div id="description-box">
<p id="my-description">Tell us
something interesting about your
constellation</p>
</div>
<canvas id="canvas"></canvas>
<p class="myparagraph">What I like
about the Teen Tech Club is ...</p>
<footer>
<p>Name:<br/> Age:<br/> City:</p>
</footer>
</body>
<script src="./scripts/stars.js"></
script>
<script src="scripts/main.js"></script>
https://codepen.io/ibmstem4girls/pen/QqGWoL
HTML PAGE
<canvas>
<p>
<footer>
<body><body>
<h1>
<p> <div>
MAKE A NEW PAGE
SAMPLE LAYOUT 1
<h>
<p>
<p>
include a link to an
external page or
image using <a>
<p>
or
<footer>
<img>
Use one of the sample layouts or come up with your own!
You can fork a copy of this pen to get started: https://codepen.io/ibmstem4girls/pen/QqGWoL
Hint: If you’re creating your own layout, try sketching it out on paper first before you start writing
your code.
SAMPLE LAYOUT 2
<img> or video
<img> or video
include a link to an
external page using
<a>
<p> <p>
<h>
<footer>
<img>
MAKE ANOTHER NEW PAGE
RESOURCES
Use one of the sample layouts to create a page about something that you find
interesting. Or you can try to copy the layout of a page you like.
After you create this new page, add a link to the first page you created. And
on that first page, add a link to this new page. Can you put the links into a
navigation bar?
Use your own creativity to create more pages or add more elements to the
pages you’ve created!
https://w3schools.com (especially the CSS/HTML tutorials and reference docs)
https://codepen.io/ibmstem4girls
https://github.com/ibmstem4girls/make-pages/blob/master/Worksheet
