HTML 2

​Do now:

1. Log in​

2. Go to class notebook

3. To to Autumn Term> HTML L2 > Complete Do Now

​Do now ANSWERS

Homework





New HW + 10 points

​Big Question

​How do we add images to our HTML code?

How do we add Hyperlinks to our HTML code?​

​

​

Extra Challenge​:

What is CSS?​

​

​Key words: ​hyperlink, source, URL, tag, debugging, attributes

​

​

​

Multiple Choice

What does HTML stand for

• HyperText Markup Protocol
• HyperText Markup Language
• HighText Markup Language
• Hyperlink Text Markup Language

Multiple Choice

What does a tag look like in HTML?

• ()()

• ###

• / / /

• < >

Multiple Choice

What is the tag for the largest heading in HTML?

• <h1>

• <h3>

• <h6>

• <h8>

Multiple Choice

What needs to be in a closing tag?

• /

• ?

• ##

• %

Multiple Choice

the tag for a paragraph is..

• <ul>

• <h1>

• <p>

• <ol>

​Debug(verb)

​de-bug

The process of identifying and removing errors from computer hardware or software.​

​

​

"every designer has a different debug method"​

​

​

​https://www.youtube.com/watch?v=salY_Sm6mv4

​Debugging Example

​Debugging Example

​There is an error on line 4 because...



I would add/change X so that....






This code would still work but...

​Debugging Example

​There is an error on line 4 because...
There isn't a closing tag, causing an error


I would add/change line 4 so that....
the tag closes and the errors online 4 and 6 end




This code would still work but...
this is bad practice and would be hard to maintain in the future

​Adding images

​1. We need to download a suitable image. (ideally jpg)
2. We need to upload this image to trinket (sign up for trinket.
3. This is the code needed to insert your image. Notice how it does not have an end tag. This is called a self-closing tag.
Example:
<img src="pizza.jpg">

​Adding images

​1. We need to download a suitable image. (ideally jpg)
2. We need to upload this image to trinket (sign up for trinket.
3. This is the code needed to insert your image. Notice how it does not have an end tag. This is called a self-closing tag.
Example:
<img src="pizza.jpg" alt = "picture of pizza">

​Adding images

​1. We need to download a suitable image. (ideally jpg)
2. We need to upload this image to trinket (sign up for trinket.
3. This is the code needed to insert your image. Notice how it does not have an end tag. This is called a self-closing tag.
Example:
<img src="pizza.jpg" alt = "picture of pizza"
width = 200>

​Demo

​https://trinket.io/html

​

​Demo

​https://trinket.io/html

​

​Go to class notebook:

Complete Activity 1​

​Demo

https://trinket.io/html/61b217ca12

​Debug

​Go to class notebook:

Complete Activity 2

​Activity 3:

​ Create a new HTML page that includes the following:

A title on the page

A paragraph that explains what this page is about

A list of what you think are the top 5 best chocolates in the Celebrations box.

1 nomination for which chocolate you think should be removed, and why.

Images on the page of the chocolates.

Links to information about Celebrations.​

Your name at the bottom of the page.

Use the cheat sheet to help you.

​https://www.w3schools.com/css/tryit.asp?filename=trycss_default