boat

Focus 6

fundamental web design

Intro to CSS

How can we make our web pages attractive?

So far we have been looking at html tags to put HTML content into the <body> section of our webpage.

Let's create a new section where we will put CSS, the language for styling web pages.

<style>

h1{

color:red;

font-size:40px;

}

</style>

Task

Follow these steps to create a webpage about Tokyo in Japan.

1. Get organised

First, let's set up a project folder called Tokyo Project.

2. Set up

 

Download this webpage and save it in your project folder.

 

Download these 4 images and save them in your project folder.

 
Open the webpage file in a text editor eg Notepad++ or Sublime Text
 
Open the webpage file in a web browser eg Chrome.
 
Can you splitscreen your browser window and text editor?

3. Video task

Watch the video and let's start to style the webpage. Can you see how to include CSS in a webpage?

Extension

 
In the <style> section, style the body tag to have a background-color of lightgray

body{

background-color:lightgray;

}


 
In the <style> section, add this style to p elements:

  • font-size:14px;
 
Style h1 elements as follows:

  • font-family:arial;
  • font-size:36px;
 
Style img elements as follows:

  • border-radius:15px;
  • margin:14px;
 
Do some research and replace all of the XXXX with the correct information.
 
Replace the list of 3 recommendations with your own ideas.
 
Embed a Youtube video about Tokyo where indicated.
 
Record this script:

Here are some useful phrases you can use in Tokyo.

  • Oishi means Delicious
  • Sayonara means Goodbye
  • Ikura des ka means How much is it?
  • Ureshii means Happy
  • Doko des ka means Where?

Export it as a mp3 file into your project folder

.
 
Research the html audio tag and put your mp3 file into your webpage.

<audio controls>

<source src = "" type = "">

</audio>

Research

Do some research on the following tags. Can you figure out how to incorporate them into your webpage?

Also, think about how to style them... you could create some new classes...

<del></del>

<meter></meter>

<progress></progress>

<details></details>

<datalist></datalist>

SUBMISSION

Submit your project folder as instructed by your tutor.

Tags

browser file tags body save h1 html h4 folder structure refresh image organisedexport embed

W3 SCHOOLS

Sample result

Tokyo-1

Tokyo-2

Tokyo-3

Tokyo-4
x