<html>and the closing tag is
Save your file and refresh the page in the browser.
You should now see My Title written in big letters at the top of the page.
You can change the text to something else, save it, and refresh it to see the change. Just make sure you don't delete any <or> symbols.
Next you can try changing the size and boldness of the title. If you change the 1s inside the tags to 2s, so they look like this
<h2> and </h2> and save it, and then refresh your browser, you will see that the size changes.
These are called "Headers" and there are 7 levels, h1 through h7. Try several and find one that you like. Also, keep in mind that it might look a little different in a different browser.
Now I'm going to add a list of my favorite animals. You can copy my list and then change it. Make sure you put this after the
</h2>, but before the
First I am going to put a title. I want it smaller than the main title, so I'm going to use
</h3> before and after it.
To start my list I start with
<ul>. This stands for "unordered list". That means a list with bullets. If I want a numbered list, I would put an
<ol> at the beginning instead of a
<ul>. If you want to change it to a numbered list instead of just the bullets, make sure you change both u's to o's.
After that you will see I have a
<li>. This stands for List Item. I will put this tag before every item on my list. Then it will have a bullet or number in front of it and it will start on a new line.
Here's my list
No web site would be complete without some pictures. Normally you would copy the pictures to the same server as the page, but for this we will just link directly to a picture somewhere on the web.
Copy the code from the box below. Put it after the closing
/ul tag but before the
/body tag. We will change it to display your own picture next.
Save and reload the page, you should see a picture of a polar bear
Now find a link to a picture you want to display (make sure the address ends in .png or .jpg) and replace everything inside the quotation marks after src= with your address.The
width="300"tells the page to show the picture 300 pixels wide. If you don't specify a width or height it will display at the actual picture size. You can also specify the height of the image like
width="300" height="300"and it will display the image square, but it will squish the picture out of proportion (see the second picture below). If you specify only height or only width it will size it in the same proportion as the original.
Now copy the code a second time and paste it on the line below the first one
Notice when you save and refresh it, the pictures are side by side (unless they are too wide to both fit). HTML ignores returns and multiple spaces. If you want to go to a new line you have to use a "break" tag. Just put
<br> between the two image tags and it will put the second picture below the first.
Most web pages have links to other pages. Now we'll add one. Copy and paste the text below after your images, but before the
Save and reload the page, you should see a link to a web page.
Now replace the link inside the quotation marks with a link to a page you want, and change the text that says "Polar Bears International" with a description of the page you linked to.
target="_blank" tells the browser to open the link in a new tab.
Now we need to make the page prettier. We do this using CSS. CSS goes between the
</head> tags. The
</style> tags tell the browser that everything between is a styling instruction.
Copy the text inside the box below between the
</head> tags on your page. Save and refresh the browser.
When you save and refresh you will see I have made your page really ugly. The "color:red" set the text color as red. The "background-color:yellow" set the background color to yellow, "font-family:Courier" made the font Courier. The "font-size:14px" made the text 14 pixels high. Look at the link below to find color names that you can use instead of the ugly ones I chose.Color Names
Font names are a little trickier. There are some that work on most computers, but if you choose an unusual one it might work on your browser, but not on other peoples. Here's a few common ones: Times, Georgia, Arial, Verdana, Courier, Palatino, Impact. Some may not work, it depends on the computer. You can specify up to three like this...
font-family:Impact, Arial, Courier It will use the first one that is installed.
One last thing. Notice that in the tab at the top of the browser your page just has the file name (which is probably myPage.html if you followed the instructions in step 1). Lets change that. Copy the following after the
<head> tag, but before the
<style> tag. This will set the text in the tab to "New Name". Now change it to whatever you want.