1 / 12

Quick Questions

Quick Questions. What does HTML stand for? What are the three main languages of the Web? What is the purpose of the <body> tags? Why do we indent different sections of our code?. Creating Web Pages (part 2). Understand how CSS works with HTML to change the appearance of a web page.

plato-vaughan
Download Presentation

Quick Questions

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. Creating Web Pages (part 2)

  3. Understand how CSS works with HTML to change the appearance of a web page. 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.

  4. CSS(Cascading Style Sheet)~<div> tags~border~ RGB value

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

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

  7. Structure of CSS • 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… body{ } A CSS property can be assigned a value using the colon : This tells the CSS what part of the web page we are styling. color: rgb(251, 133, 195); Curly brackets are used to begin and end each section of CSS. All CSS statements must end with a semicolon ;

  8. body{color:rgb(195,1,112);background-color:rgb(251,133,195);}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.

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

  10. <!DOCTYPE html><html> <head> <title>My Cool Website!</title> </head> <body> <div id=“box”> <h1>Welcome to my website!</h1> <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

  11. 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.w3schools.comto 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”.

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

More Related