Learning Intentions
To understand: the links between the HTML code and its effect on the webpage. (C) |
Success Criteria
You will amend some text using HTML code parameters and write some HTML code of your own. You will also use your knowledge of attributes to modify a basic webpage layout |
Task 1: Copy & paste in the HTML code in this website
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
then click on submit to check out the webpage. Remember to take screen shots of your code as you go through the lesson and explain what you have been doing
<html>
< head>
<title>Text attributes & alignment</title>
</head>
< body>
<body bgcolor=aqua>
<h1> My webpage will be fabulous and the whole world will view it. </h1>
<p> <H2>All my friends will be impressed.</H2></p>
<p>I will be very happy with this outcome</p>
</body>
</html>
Task 2: Adding attributes (Font) Complete at least 1 of these changes
The sentence “All my friends…” need to be centred using the opening tag <CENTER> & the closing tag </CENTER>.
Note the American spelling.
The word “happy”needs to be emboldened. Use the tags< B> & </B>
The word“impressed” needs to be underlined. Use the <U> tag, remember to add the closing tag.
Task 3: Adding attributes (Font) – Adding a horizontal line
A horizontal line can be used to separate your main heading from the rest of the page.
HTML code
Horizontal
<HR>
Task 4: Adding attributes – You are going to create an ordered list (numbers 1, 2, 3, etc) copy this code into a notepad file and save it as "list.HTML" - To be EB try and type the code in.
HTML code
<html>
<head>
<title>
Lists
</title>
</head>
<body>
<body bgcolor=silver>
<font face=”Comic Sans MS”>
<H1> List of My Favourite Foods </H1> <BR>
<OL>
<Li> Pepperoni Pizza
<Li> Chicken Korma
<Li> Sweet & Sour Chicken
<Li> Doner Kebab
<Li> Big Mac
<Li> Chocolate
</OL>
</font>
</body>
</html>
To make a list with bullet points you need to change the <OL> tag to <BL> and the </OL> tag to </BL>.
Extension– Create your own favourite TV program list. Change your code to show that you can use a horizontal line to separate the title and align your text both in the centre and to the right. Make any changes you like to the background.
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
then click on submit to check out the webpage. Remember to take screen shots of your code as you go through the lesson and explain what you have been doing
<html>
< head>
<title>Text attributes & alignment</title>
</head>
< body>
<body bgcolor=aqua>
<h1> My webpage will be fabulous and the whole world will view it. </h1>
<p> <H2>All my friends will be impressed.</H2></p>
<p>I will be very happy with this outcome</p>
</body>
</html>
Task 2: Adding attributes (Font) Complete at least 1 of these changes
The sentence “All my friends…” need to be centred using the opening tag <CENTER> & the closing tag </CENTER>.
Note the American spelling.
The word “happy”needs to be emboldened. Use the tags< B> & </B>
The word“impressed” needs to be underlined. Use the <U> tag, remember to add the closing tag.
Task 3: Adding attributes (Font) – Adding a horizontal line
A horizontal line can be used to separate your main heading from the rest of the page.
HTML code
Horizontal
<HR>
Task 4: Adding attributes – You are going to create an ordered list (numbers 1, 2, 3, etc) copy this code into a notepad file and save it as "list.HTML" - To be EB try and type the code in.
HTML code
<html>
<head>
<title>
Lists
</title>
</head>
<body>
<body bgcolor=silver>
<font face=”Comic Sans MS”>
<H1> List of My Favourite Foods </H1> <BR>
<OL>
<Li> Pepperoni Pizza
<Li> Chicken Korma
<Li> Sweet & Sour Chicken
<Li> Doner Kebab
<Li> Big Mac
<Li> Chocolate
</OL>
</font>
</body>
</html>
To make a list with bullet points you need to change the <OL> tag to <BL> and the </OL> tag to </BL>.
Extension– Create your own favourite TV program list. Change your code to show that you can use a horizontal line to separate the title and align your text both in the centre and to the right. Make any changes you like to the background.