Download presentation
Presentation is loading. Please wait.
1
GCSE COMPUTER SCIENCE Communication 3.5 HTML and CSS
2
Introduction Watch this video to find out more about HTML and CSS.
Link:
3
Basic Structure <!DOCTYPE html> <html> <head>
This is the basic structure of a HTML document: <!DOCTYPE html> <html> <head> </head> <body> </body> </html> All of the information about the document is placed in the head section. All the content that can be seen on screen is placed in the body section. ACTIVITY Copy the structure into your books.
4
<p> This is a paragraph.</p>
HTML Tags HTML documents are structured using tags. Each HTML tag describes different document content. <p> This is a paragraph.</p> The example above uses the paragraph tag. HTML tags normally come in pairs. The first tag is the start tag and the second tag is the end tag. An opening and a closing tag together is called an element.
5
This is a worked example.
Sketching Layouts In the exam you may be asked to sketch the layout of a web page based on some HTML code. <!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> This is a worked example. Alan Turing Alan Turing Image Welcome Welcome to the Alan Turing website.
6
Activity 1 Based on the HTML shown below produce a sketch showing how each web page will appear on screen when viewed through a web browser. <!DOCTYPE HTML> <html> <head> <title>History of Computing</title> </head> <body> <h1>History of Computing</h1> <h2>Welcome</h2> <hr> <p>Welcome to the history of computing website</p> <img src=”image.jpg”> </body> </html>
7
Cascading Style Sheets
DEFINTION Cascading style sheets (CSS) are used to save time and improve consistency by controlling the formatting of multiple web pages at once. They are separate files that contain a series of rules that control the formatting of multiple web pages. <head> <title>GCSE Computer Science</title> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> index.html h1 {text-align:centre } style.css
8
Activity 2 Based on the HTML and CSS shown below produce a sketch showing how each web page will appear on screen when viewed through a web browser. HTML <!DOCTYPE HTML> <html> <head> <link rel=”stylesheet” type=”text/css” href=”style.css”> <title>GCSE Computer Science</title> </head> <body> <h1>Computer Science</h1> <h2>Introduction</h2> <img src=”image.jpg”> <p>Welcome to the Computer Science course.</p> </body> </html> CSS h1 { text-align: center } h1 { text-color: blue }
9
You will usually only need to complete the body section.
Writing Basic HTML As well as sketching the layout, you will sometimes need to write the code needed o produce a given layout. You will usually only need to complete the body section.
10
Activity 3 Old Tradition Sweets Our shop
Based on the sketch below, produce the HTML that would create this layout. <!DOCTYPE HTML> <html> <head> <title>The Sweet Shop</title> </head> <body> <h1>Old Traditional Sweets</h1> <h2>Our shop</h2> <img src=”sweets.jpg”> <ul> <li>Boiled sweets</li> <li>Fruity sweets</li> <li>Liquorice sweets</li> </ul> <hr> <p>We sell the best sweets at the lowest prices!</p> <a href=“sale.html”<Sale section</a> </body> </html> The Sweet Shop Old Tradition Sweets Our shop Boiled sweets Fruity sweets Liquorice sweets We sell the best sweets at the lowest prices! Sale section sweets.jpg (this takes you to sale.html)
Similar presentations
