HTML Extension
Exercise 3 - Hyperlinks 1 2 What are the differences between these 2 hyperlinks??
Hyperlinks to different pages Create 2 new notepads (Save them as .htm) Add the text in each box to each notepad with the hyperlink at the bottom. Take a screenshot of the notepad like I have here – add this to your powerpoint Add a screenshot of each internet page – again add to your powerpoint
Exercise 4 You can display bulleted or numbered lists. For bulleted lists: The <UL> tag starts the list and </UL> ends it Individual items start with the <LI> tag. Open a new notepad and copy in the code on the right Take a screenshot of the notepad and the browser. <h1>Bulleted List</h1> <p>We have the following pets in our house:</p> <UL> <LI>A dog called shep <LI>A terrapin called Terry <LI>A rabbit called Pudding </UL> What is missing from these tags?
Different styles of bullet points <html> <body> <h2>Unordered List with Disc Bullets</h2> <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> Circles Discs Squares Exercise 5 Create all 3 lists in notepad using the list style as shown in the box Take a screenshot of each of these bullet pointed lists in notepad and in a browser Label your lists to show what type it is.
Exercise 2: Other types of lists How do we write this list? Task 3 Research how to create a ordered list and a description list Take screenshots and add them to the powerpoint Add labels to your screenshots
Exercise 6: Images <HTML> <HEAD> <HEAD> <TITLE>Image</TITLE> </head> <BODY> <H1> Three Cliffs Bay</H1> <img src="3CliffsBay.jpg"> </BODY> Create a New folder called Images Create a new notepad named ‘Images.htm’ (save it in the folder Images) Find an image of a landscape. Save the picture as a JPEG in the folder Add the following code to the notepad.
Another way is to add the URL – hyperlink to the image <img src="http://www.st-georgescofe.co.uk/wp-content/uploads/2011/02/Star.jpg">
Challenge!! With your song page, add the following: A Main page showing a list of the Artist/Band songs in an Album and other Albums A hyperlink to each song with the lyrics (formatted like the first one you did) An a saved image of the Artist/Band on the main page Add an image from the web of the album covers A hyperlink to an official artist/band website Save all of this in a separate folder in HTML named Song Project Attach the Main page and a separate page(with song lyrics on it) that has an image on it
Hyperlink to official website Hyperlink to pages showing lyrics to each song Image….. List type…