boat

Focus 2

fundamental web design

Basic tag review

So, we know that we can use a text editor to type HTML - Hypertext Markup Language. If we save the file as a .html file, a web browser can understand what to do with it!

Text Editor

<html>

<body>

<h1>Hello!</h1>

<br>

<h2>It is nice to see you!</h2>

<h3>My name is Nguyen Le.</h3>

<h4>I am <b>15</b> years old.</h4>

<h5>I like sushi...</h5>

<h6>... and tea!</h6>

<p>I live in <u>Viet Nam</u></p>

<img src = "images/vnam.jpg"/>

</body>

</html>

web browser

Hello!


It is nice to see you!

My name is Nguyen Le.

I am 15 years old.

I like sushi...
... and tea!

I live in Viet Nam.

Task

Follow these steps to make create an online recipe:

1. Get organised

First, let's set up a project folder for Focus 2. Create the following folder structure in your root Web Design:

2. Download and Save

Download focus-2.html and save it in your Focus 2 project folder. Open it with a text editor and a browser.

3. Adding content

Your webpage content eg text, images, videos, go into the body section of your web document

Using your knowledge of HTML TAGS, can you recreate this webpage.

Note:

  • Use the <i> tag to make text italic
  • Use the <b> tag to make text bold
  • Use the <u> tag to make text underlined
 

   5 Challenges

 
include an image of an omlette in your webpage using the <img> tag
 
create an ordered list of 4 list items for the ingredients. Use the <ol> and <li> tags
 
embed a Youtube video of someone making an omlette into your webpage
 
Change the style of any element in your webpage eg you could change the color of the text of the heading or the background color of the body section etc.
 
Figure out how to link the word ingredients to this URL: https://www.tescolotus.com/home

SUBMISSION

Submit your project folder as instructed by your tutor.

W3 SCHOOLS

Tags

browser file tags body save h1 html h4 h2 structure refresh h3 organisedelements