1.introduction
What you'll be making
Before we ask you to write a bunch of code, we think it's helpful for you to see exactly what you'll be making in this project.
Check out the
index.htm
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body><h1>YEAH SANDWICHES</h1>
<img src="http://bit.ly/RhrMEn" />
<p>I like eggs.</p>
<p>And ham!</p>
<p>But mostly sandwiches.</p>
</body>
</html>
2.Every house needs a frame
Your webpage is blank as the day it was born! Let's add five things:
Check out the
index.html file and the Result tab for an example—we've made our very own webpage.index.htm
<!DOCTYPE html>
<html>
<head>
<title>Result</title>
</head>
<body><h1>YEAH SANDWICHES</h1>
<img src="http://bit.ly/RhrMEn" />
<p>I like eggs.</p>
<p>And ham!</p>
<p>But mostly sandwiches.</p>
</body>
</html>
2.Every house needs a frame
An HTML page is sort of like a house: it needs a certain number of essential structures in order to work.
Just like a house, an HTML page needs a frame. In this case, your frame is made of
Just like a house, an HTML page needs a frame. In this case, your frame is made of
<!DOCTYPE>, <html>, <head>, and <body> tags.
Instructions
- The
<!DOCTYPE>tag - Your
<html>tags - Your
<head>tags <title>tags (with any title you like!) between your head tags- Your
<body>tags
3.It's better with a header
Your webpage could use an
<h1> header between the body tags to let everyone know that the page is about you.
Instructions
Create an
<h1> tag inside your body tags. Between your opening <h1> and closing </h1> tags, type your name for all to see!
4.Tell us about yourself
Your page is coming along, but it's not telling us much yet.
You could use a paragraph or two telling your readers what your interests are, what you do for a living, how much you love learning HTML, and so on.
You could use a paragraph or two telling your readers what your interests are, what you do for a living, how much you love learning HTML, and so on.
Instructions
Insert three
Insert an
Add at least two links to your webpage. You can turn an
image or a bit of text into a link; you can even turn part of the text
inside your
Check out the Hint if you've forgotten how the
<p> tags after your <h1> tag (but before your closing </body> tag!). Write a little bit about yourself in each of the three paragraphs. You can say whatever you want! It's your webpage.
5.A picture's worth a thousand words
Nice work! Your page is still looking a bit spare, though. Better add an image or two to spruce things up a bit.
Remember, to insert an image from the web you will need to right-click and select "Copy image URL." Then use this URL in your
Remember, to insert an image from the web you will need to right-click and select "Copy image URL." Then use this URL in your
<img> tag.
Instructions
<img> tag between your <body> tags. Feel free to put it anywhere! (We think it'd look best after your <h1> tag, but before your <p> tags.) You can make the src attribute point to any image you like.
6.Link me!
Great! There's only one problem: your webpage is like a
house with no doors. There's no way to get in or out! We'll fix that by
adding a couple of links.
Once you successfully add your links and hit Run, you've finished! Revel in the glory of your newly created webpage.
If it still looks a little basic to you, don't worry. We'll soon teach you CSS to make your webpages look sharp!
Once you successfully add your links and hit Run, you've finished! Revel in the glory of your newly created webpage.
If it still looks a little basic to you, don't worry. We'll soon teach you CSS to make your webpages look sharp!
Instructions
<p> tags into a link!Check out the Hint if you've forgotten how the
<a> tag works.
Comments
Post a Comment