Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Extension.

Similar presentations


Presentation on theme: "HTML Extension."— Presentation transcript:

1 HTML Extension

2 Exercise 3 - Hyperlinks 1 2 What are the differences between these 2 hyperlinks??

3 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

4 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?

5 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.

6 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

7 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.

8 Another way is to add the URL – hyperlink to the image
<img src="

9 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

10 Hyperlink to official website
Hyperlink to pages showing lyrics to each song Image….. List type…


Download ppt "HTML Extension."

Similar presentations


Ads by Google