This basic HTML activity is designed to practice what you have learned in the first weeks of learning this subject. You will create HTML pages in Notepad++ that will link together as a 4-page web site.
You have 30 minutes to complete this activity.
Creating the template:
- Open Notepad++ [or Notepad if you don't have Notepad++]
- Create a new HTML document with the correct tags. Include everything you've learnt so far [i.e. !DOCTYPE html, head, title, body, h1, etc]. Don't add any content between each tag yet - just include all the correct opening and closing tags.
Adding the navigation [as links]:
Based on what you learned about links last week, add the following "navigation" [links] inside your 'body' tag but above your heading [h1] tag.
Now seperate this navigation section by using the <nav> tag before and the </nav> tag after these links.
Save your template:
- Save this document as "index.html" - make sure you use lower case!
- Copy the html code you placed in this document and paste it into a new Notepad++ document - do this two more times until you have 3 new pages [a total of 4 pages including your "index.html" page].
- Save these 3 new pages individually, naming them "about", "movies" and "contact" - all in lower case!
Adding the content:
Go ahead now and open all 4 pages and add some content to each page. For example:
- In the 'Movies' page you might like to add a "Movies I like" heading, talk a bit about your favourites and then add links to your favourite movie web sites.
- In the 'About' page you might like to add a few paragraphs about who you are, what you like doing, any hobbies you have, favourite things, sports, games you play, colours, people you follow etc.
- In the 'Contact' page you might like to place a few links on how people can contact you. For example, via Facebook, Twitter, Instagram, Linked-In etc. You can place your contact details on this page, since this page will not go live and no one other than your teacher will be able to view or read this page.
Note: No images are required for this exercise. We will be looking at placing images inside a HTML document this week.
Stand tall. You're nearly there!
And to finish:
- Save all of your work.
- All 4 pages should be saved and stored in a folder called "4 page site - your name".
- Zip your work and have it sent through to your teacher via a post in Edmodo.com
If you want an extra challenge and time permits, try placing the 4 navigation links into a horizontal table on all 4 pages. Use the appropriate table tags we covered last week and aim for consistency on all 4 pages.
That's it. Well done!