HTML: Home Page

Getting Started

Starting Folder

Go to your folders…

Go to the COMP 8 shortcut on the left …

Then go into the HTML project folder.

There are 6 topics with given text & photos:

Go into the folder for the topic you want to do.

Open home page in Chrome

Go into the folder for the topic you want to do.

Double-click on the home file to see it in Chrome.

The home page will look something like this…

Bookmark the page. It should be showing like this…

Open home page in Notepad++

Right-click on the home file, and Edit in Notepad++.

You may have to right-click 2x on it to see the “Notepad++” option…

It will look something like this…

Pin to taskbar

Right-click on the program icon in the taskbar

Website Heading

Go to the home page tab in NP. The website heading text is near the top.

1. Select the biggest heading tag: <H1>
2. Copy it (CTRL+C).
3. Then click before the website heading text.
4. Paste (CTRL+V).

5. Click after the website heading text and paste (CTRL+V).

6. Click inside the closing tag and add the slash / so they both turn purple.

7. Save (CTRL+S) or the save button. This turns the page tab from red to blue.

8. In Chrome, you will need to refresh/reload (F5) to see the changes.

Your website heading should be big like this…

Home Page Link

Copy the following link tag:
<A href="home.html">

Paste it on the line before your website heading.

Add the closing </A> tag after your website heading. Click inside it, make sure they both turn purple.

Save your page and see how it looks in Chrome. You should now see the page heading underlined. If you hover over it, your cursor will turn to a hand. Click on it (you won’t go anywhere but it should not give you an error message).

Links to Topic Pages

Copy the following code (CTRL+C).

<LI><A href="page1.html">topic1</A>
<LI><A href="page2.html">topic2</A>
<LI><A href="page3.html">topic3</A>
<LI><A href="page4.html">topic4</A>

Paste it after the heading code (CTRL+V).

Change Link Text

Change the topic text for each topic. Select the topic text from the table below for your website category and copy it (CTRL+C). Double-click on the matching topic word in the code to select it, and paste (CTRL+V) to replace it.

	Animated Movies	Film Series	Pop Singers
1	Despicable Me	Avengers	Ariana Grande
2	Frozen	Bourne	Bruno Mars
3	The Incredibles	The Hunger Games	Ed Sheeran
4	Up	Lord of the Rings	Taylor Swift

	Rock Bands	TV Shows	Video Games
1	Coldplay	Brooklyn Nine-Nine	Fortnite
2	Imagine Dragons	Friends	Minecraft
3	Queen	The Good Place	Roblox
4	U2	Modern Family	Super Smash Bros

Link to Page File

Change the page text to match topic file names as shown below…

	Animated Movies	Film Series	Pop Singers	Rock Bands	TV Shows	Video Games
1	despicable	avengers	ariana	coldplay	brooklyn	fortnite
2	frozen	bourne	bruno	imagine	friends	minecraft
3	incredibles	hunger	ed	queen	good	roblox
4	up	rings	taylor	u2	modern	smash

Save it and take a look at your page. Test out all the links in the list to make sure they work.

You can click on the website heading link on each topic page to go back to the home page.

Ordered List

Select this tag for Ordered Lists: <OL>

Copy it (CTRL+C). Then:

1. Paste it (CTRL+V) before your list.
2. Paste it (CTRL+V) after your list.
3. Add the closing slash / so they both turn purple.

Save and make sure you now have a numbered list…

Pictures

Starting Code

Copy this code…

<IMG src="images/name1 V.jpg" height="180">
<IMG src="images/name2 V.jpg" height="180">
<IMG src="images/name3 V.jpg" height="180">
<IMG src="images/name4 V.jpg" height="180">

Paste it after the list…

File Names

Change the image name to match the topic using the table below as reference. Double-click on name for each IMG tag and type in the one-word name for the topics.

	Animated Movies	Film Series	Pop Singers	Rock Bands	TV Shows	Video Games
1	despicable	avengers	ariana	coldplay	brooklyn	fortnite
2	frozen	bourne	bruno	imagine	friends	minecraft
3	incredibles	hunger	ed	queen	good	roblox
4	up	rings	taylor	u2	modern	smash

Save and take a look. Make sure the pictures show up.

Center Pictures

1. Select and copy the center tag: <CENTER>
2. Paste it before and after the IMG tags, add the closing slash /.

Get your home page checked off.