Let's begin with some HTML and CSS snippets.
Putting content on your page
Open this link in a new tab: Alpacas Code
Keep it open! We are going to be using HTML
to make it look way better.
CodePen shows us our code on the left,
and the output on the right:
We will use code to make our output look like this
Add <h1>
and </h1>
tags to make the Alpacas
heading big and bold.
<h1>Alpacas</h1>
<h1>
says "start the heading here"
</h1>
says "end the heading here"
Now use <h2>
tags to make Alpaca Hair
and Habitat
big.
<h2>Alpaca Hair</h2>
h1
is the biggest heading
h2
is the second biggest heading
h3
is the third biggest heading
h6
is the smallest heading
Now use <p>
tags to split up your paragraphs.
<p>
An alpaca is a domesticated species of
South American camelid. It resembles a
small llama in appearance.
</p>
Put a <p>
before each paragraph,
and a </p>
after each paragraph.
Find the word Wikipedia
in your code.
Turn it into a link using a
tags, like this:
<a>Wikipedia</a>
Then add the href
attribute to the opening tag.
<a href="#">Wikipedia</a>
This turns the link blue, but we need another step to make it clickable.
We tell the link where to go when it's clicked using href
.
Find your opening <a>
tag. Add in the href
and link.
<a href="http://en.wikipedia.org/wiki/Alpaca">Wikipedia</a>
The only part we added was:
href="http://en.wikipedia.org/wiki/Alpaca"
Add an img
tag to the very bottom of your code:
<img src="#" height="100">
src
stands for "source"
Replace the #
with a link to an image online.
height
is the height of the image
This is optional, it is the height in pixels.
Find an image online, and copy the link to it.
Replace the #
as the src
value, using paste:
<img src="http://place.com/photo.jpg" height="100">
Find and add at least 2 more images.
Your own output window should now look like this:
Let's begin with some HTML and CSS snippets.