boat

Focus 3

fundamental web design

HTML Symbols, D✐ngbats, Smil😍ys and Em🌜jis!

We can also include cute symbols in our webpages. These can help us to make pages look more interesting and fun. An interesting page is a page that people want to visit! Here are some common symbols that are used in web design:

©

Go to the W3 Schools website to explore html symbols!
This is how to include them in your webpage:

  1. Find a symbol that you want in the W3 Schools webpage eg ⛄
  2. Click the Try It button on the right side of the page.
  3. Find the HTML code for the symbol for example ⛄
  4. Include the code in your HTML for example:

Text editor

<p>Yesterday, I built a &#9924; and it was a <i>lot</i> of fun!</p>

<p>I really &#9829; it!</p>

Web browser

Yesterday, I built a ⛄ and it was a lot of fun!

I really ♥ it!

Task

You will create a story using text and HTML symbols, emojis etc. Here is an exemplar from Book in Thailand:

Follow these steps and recreate a web-based story for small children using HTML symbols.

1. Get organised

First, let's set up a project folder for Focus 3. 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 focus3.html in your Focus 3 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 focus3.html file, type the basic structure of every web page on planet Earth:

4. Create a web-based story using HTML symbols

In your Focus 3 folder, create a new web document called focus3.html

Using html symbols, write a story.

  • Your story should be at least 10 sentences long.
  • Using the <h1> tag, give your story a title.
  • Using the <h3> tag, put your name at the top of the story.
  • Using <p> tags for each sentence, write your story!

5. Tricky challenge I

Can you figure out how to do this:

Play this mp3 audio file from your webpage in an audio player.

Don't forget to save the audio file in your project folder.

6. Tricky challenge II

Record your voice and save it as a .mp3 file or a .wav file.

Include your audio in your webpage.

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