HTML: Topic Pages

Open Topic Files in Notepad

Go to File > Open or use the folder icon …

Click and drag from below the page files, up to the top page file so they’re all selected, then [Enter] or click on Open.

You will now see the pages in Notepad…

Navbar

Copy the following code (CTRL+C).

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

Go to the first topic page/tab and click in the top empty area…

Paste the 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

Check Navbar

Save it. It should look like this…

Click on each link, making sure they work, and coming backing to the first topic page again.

Copy Navbar to Other Pages

Select the navbar code and copy (CTRL+C)…

Go to the other topic pages and paste it in the same empty area at the top (CTRL+V).

Save all your pages using the multiple save button…

Click around your pages using the navbar.

Topic Headings (H2)

For each topic page, use the Scroll Wheel on the mouse and scroll down so you are focused on the page content…

Select this heading tag: <H2>

Copy it (CTRL+C). Then for each topic page (not home), do the following:

1. Paste at the beginning of the topic heading text.

2. Paste it at the end of the topic heading text.
3. Click in the ending tag, before the “H” and add the closing slash / which should make both tags turn purple.

Save all the changes on the topic pages…

In Chrome, refresh/reload your pages.

You should see each section’s heading like this…

Bulleted Lists (UL)

Go to your first topic page and go down to the lists…

Select and copy this tag for Unordered Lists: <UL>

1. Paste at the top, before the main list starts.
2. Paste on the empty line, before the sublist.
3. Paste 2x at the end of the list.
4. Add the closing slash / for both of the last 2 UL tags.

Go to the other topic pages and repeat the steps above.

Then Save all and take a look at your pages.

Side Photos

Copy the following image tag code:
<IMG src="images/name V.jpg" width="200" align="right">

1. Go to the first topic page and paste it after the H2 and before the lists

2. Double-click on the word name and type the one-word name for your topic page/image files.

Repeat for the other topic pages: paste after the page heading and change the name…

	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

Then Save All and see that they all show up like this…

Bottom Photos

Select and copy the following tags:
<CENTER>
<IMG src="images/name H.jpg" width="500">
</CENTER>

For each topic page, paste it after the paragraph, before the bottom </DIV>.

Change the “name” to match the topic word.

	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 all and your pages should look like this…

Get your pages checked off.