Quick Questions 1 What does HTML stand for

  • Slides: 12
Download presentation
Quick Questions 1. What does HTML stand for? 2. What are three main languages

Quick Questions 1. What does HTML stand for? 2. What are three main languages of the Web? 3. What is the purpose of the <body> tags? 4. Why do we indent different sections of our code?

Creating Web Pages (part 2) Spiderman ©Marvel Comics

Creating Web Pages (part 2) Spiderman ©Marvel Comics

Learning Objective: Understand how CSS works with HTML to change the appearance of a

Learning Objective: Understand how CSS works with HTML to change the appearance of a web page. Learning Outcomes: ü GOOD: Change the colours of the page background and text using CSS. ü BETTER: Use <div> tags to define and style separate areas of the page and experiment and apply different border styles to CSS boxes. ü BEST: Apply a font using Google Fonts.

K E Y W O R D S CSS (Cascading Style Sheet) ~ <div>

K E Y W O R D S CSS (Cascading Style Sheet) ~ <div> tags ~ border ~ RGB value

What is CSS? One of the main languages of the Web: þHTML þ CSS

What is CSS? One of the main languages of the Web: þHTML þ CSS þJava. Script HTML defines the content. (we covered this last lesson. ) CSS defines the appearance. Java. Script defines the behaviour.

Getting Started Before you can start styling your web page with CSS you need

Getting Started Before you can start styling your web page with CSS you need to do the following: 1. Open up your index. html page in Notepad++ 2. Create a new file in Notepad++ called… style. css Note – NO capitals here! 3. Save this into the same folder as your web page. 4. Add the line of code in bold below to the <head> section of your own web page: <head> <title>My Cool Website!</title> <link rel="stylesheet" href="style. css"> </head>

Structure of CSS is a bit different to html. Instead of open and close

Structure of CSS is a bit different to html. Instead of open and close tags it uses brackets{ } to begin and end a section. To define a style for our body we would do this… This tells the CSS what part of the web page we are styling. A CSS property can be assigned a value using the colon : body{ color: rgb(251, 133, 195); Curly brackets are used All CSS statements must } to begin and each end with a semicolon ; section of CSS.

body{ color: rgb(195, 1, 112); background-color: rgb(251, 133, 195); } YOUR TASK þ Type

body{ color: rgb(195, 1, 112); background-color: rgb(251, 133, 195); } YOUR TASK þ Type these styles into your CSS document. You can play with the RGB values to change the colours. Search online for an “RGB Colour picker” to help you.

<div> Tags <div> tags define divisions (or sections) of our page so we can

<div> Tags <div> tags define divisions (or sections) of our page so we can apply different styles to different parts. In html this looks like… <div> tags define the start and end of a section in the <body>. <div id=“box”> </div> Each <div> needs an ID so the CSS know which one we are styling. Some content would go in here. For example, paragraphs of information, pictures etc.

<!DOCTYPE html> <head> <title>My Cool Website!</title> </head> <body> <div id=“box”> <h 1>Welcome to my

<!DOCTYPE html> <head> <title>My Cool Website!</title> </head> <body> <div id=“box”> <h 1>Welcome to my website!</h 1> <p>Some info you’ve written </p> </div> </body> </html> YOUR TASK þ Add <div> tags to your web page to define a section of the html. Add the bits in bold into your own page

body{ color: rgb(195, 1, 112); background-color: rgb(251, 133, 195); } div#box{ width: 80%; margin-left:

body{ color: rgb(195, 1, 112); background-color: rgb(251, 133, 195); } div#box{ width: 80%; margin-left: 10%; background-color: rgb(253, 195, 225); } YOUR TASKS þ Give your box some style by adding the section in bold to your CSS document. þ Use www. w 3 schools. com to find out how to give your box a border (hint: put the code underneath the background colour) EXTENSION þ Apply a font to your web page using “Google Fonts”.

Quick Questions 1. What does CSS stand for? 2. What are <div> tags used

Quick Questions 1. What does CSS stand for? 2. What are <div> tags used for? 3. Give an example of a type of border style that can be applied using CSS. 4. Who managed to successfully apply a font using Google Fonts?