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 Mister Moosi.</h3>

<h4>I am <b>7</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 Mister Moosi.

I am 7 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. Save your .html file

Create a new file in your text editor.

Save the empty file as focus2.html in your Focus 2 project folder.

Check - use your File Explorer to look at your file in your folder. If it has a browser icon, you have probably been successful!

3. Basic Structure

In your focus2.html file, type the basic structure of every web page on planet Earth:

4. Adding content

Your webpage content eg text, images, videos, go into the body section of your .html file

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
 

Challenge

Can you figure out how to:

  1. include an image of an omlette in your webpage using the <img> tag
  2. create an ordered list of 4 list items for the ingredients. Use the <ol> and <li> tags
  3. embed a Youtube video of someone making an omlette into your webpage
  4. 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.
  5. 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 organised