5.2.3 Be able to use HTML and CSS to construct web pages Learning Objectives: 5.2.3 Be able to use HTML and CSS to construct web pages
Cascading Style Sheets Cascading style sheets (CSS) are used to save work and improve consistency by controlling the formatting of multiple web pages. They are separate files that contain a series of rules that control the formatting of multiple web pages. Complete task 12.3.
Setup Create a new document in Notepad++ and save it as stylesheet.css in your Practice Website folder. Open your index.html and page2.html web pages and add the blue line between the <head> tags on each page. <head> <title>My webpage</title> <link rel="stylesheet" type="text/css" href=“stylesheet.css"> </head>
Save your changes and view your web pages in your browser. Styling Headings Add the style below to your new file, it will change the font of all headings that use the <h1> tag. h1 { font-family: “Arial”; } Save your changes and view your web pages in your browser. Add another style to set the font of the headings that use the <h2> tag.
Hex Colour Codes Hexadecimal numbers are used to represent colours in css. Use this website to choose a suitable colour for your h1 style. Add your chosen colour to your h1 style like the example below. h1 { font-family: “Arial”; color: #3333CC; } Save your changes view the web pages in your browser. Complete tasks 12.5 and 12.11.
Background Colour Add a new style to set the background colour of your pages. body { background-color: #00ff00; } Save your changes view the web pages in your browser. Complete tasks 12.5 and 12.11.
Add a div tag to one of your pages using the example shown below. Div Tags Div tags are containers that allow the formatting of blocks within a web page. Add a div tag to one of your pages using the example shown below. <div id=“mydiv”>This is a div.</div> Complete task 12.16.
Formatting Div Tags Add the following rule to your style sheet and save it. #mydiv { width: 200px; height: 50px; background-color: #00ff00; } Save your changes view the web page in your browser.
Sketching Layouts Alan Turing Welcome In the exam you may be asked to sketch the layout of a web page based on some HTML code. This is a worked example <!DOCTYPE HTML> <html> <head> <title>Alan Turing</title> </head> <body> <h1>Alan Turing</h1> <img src=”alan.jpg”> <hr> <h2>Welcome</h2> <p>Welcome to the Alan Turing website.</p> </body> </html> Alan Turing Alan Turing Image Welcome Welcome to the Alan Turing website. Complete task 12.17.