TRICKY TAGS IN HTML CLASS PERSENTATION YR 11

TAGS

1. Tricky Tags HTML – Lesson 2

2. Tricky Tags State the correct tag for a heading of the biggest size Describe why you would use different size headings Mild: Medium: 26/09/2019

3. What we are learning today Learning Objective How does using advanced tags help make a better website? Success Criteria Define layout Describe how using images enhances your website Explain the advantages of using links in your web page

4. Recap from last week Last week we looked at the following tags: <h1> - <h6>, <title>, <p>, and < br > What do these tags do?

5. Introducing tables Why would we use tables in our webpages? Could we control the layout of our pages using tables?

6. Tables Tables are a great way to show information easier to the users. A table in HTML uses three different tags: <table> To create the table < tr > To make a table row < th > & <td> To create a table heading and to make table data

7. Table Example

8. Task 1 – Create a table Open the webpage you was working on last week in notepad++ and Google Chrome. Add a heading called “Things to do in New Zealand” Create a table and put in information about different activities you can do in New Zealand

9. Add a table lines Alter your table tag to look like this: < table  border ="1 "> The number changes thickness of the border.

10. Images Images are used to add depth to your website. It allows the users to see what you are describing. The image tag is a special kind of tag which is self closing. This means that you do not need a closing tag. The tag for an image looks like this: < img >

11. Image anatomy The image tag has different attributes. Attributes are objects that help HTML describe the picture. < img src =“balloon.jpg” alt =“A picture of balloons” /> The picture to be displayed The text to be displayed if the picture does not load

12. Adding a picture

13. Task 2 – Adding an image Add a couple of images to your web page to show the users the different activities they can do in New Zealand (Pictures can be found in the same folder as your webpage) Extension: Can you add the images to your table?

14. Hyperlinks A hyperlink is a piece of text or image that a user can click on to go to another website. A link is created by using the <a> tag. This a nchors a link to your web page. < a href =“http://google.com”>Click here</a> The website to link to

15. Hyperlinks

16. Task 3 – Add a hyperlink Add a link to another website with more information about New Zealand in it. Think about your target audience

17. Choosing colours https:// www.w3schools.com/html/html_colors.asp