WDD Implementation Flashcards
Complete the missing Tags
~~~
<html>
<head>
<1>This is shown in the tab<2>
</head>
<body>
This is where the main content of the page goes!
</body>
</html>
~~~
1 = <title> 2 = </title>
Complete the missing Tags
~~~
<html>
<head>
<title>This is shown in the tab</title>
</head>
<1>
This is where the main content of the page goes!
<2>
</html>
~~~
1 = <body> 2 = </body>
Complete the missing Tags
~~~
<html>
<1>
<title>This is shown in the tab</title>
<2>
<body>
This is where the main content of the page goes!
</body>
</html>
~~~
1 = <head> 2 = </head>
Complete the missing Tags
~~~
<1>
<head>
<title>This is shown in the tab</title>
</head>
<body>
This is where the main content of the page goes!
</body>
<2>
~~~
1 = <html> 2 = </html>
Write a line of HTML to create a large which heading says Bob’s Disco
<h1> Bob's Disco</h1>
What HTML tags would you used to create a paragraph?
<p></p>
Write HTML to create an external hyperlink to www.w3schools.com with the text Find out more
<a href="www.w3schools.com">Find out more</a>
1) Explain what this would this code do?<a href="www.bbc.co.uk">BBC Homepage</a>
2)What type of addressing has been used below?
1) The code would create an external hyperlink which could take you to the BBC webpage
2)Absolute Addressing
1) Explain what this would this code do?<a href="about.html">Find out about us!</a>
2)What type of addressing has been used below?
1) The code would create an internal hyperlink which could take you to the about webpage
2)Relative Addressing
Write HTML to create an internal hyperlink to the staff.html with the text Info about staff. The staff page is in a folder called people
<a href="people/staff.html">Info about staff</a>
Show what this could would look like on a webpage<a href="about.html">Find out about us!</a>
Find out about us!
What does this code do?
`<head>
<link></link>
</head>`
The <link> tag is used to link to external CSS files.
Write the HTML to display an image of a photo at a size of 100 pixels by 100 pixels. The filename is “photo.png”
<img src='photo.png' width="100" height="100"> .
All graphic files for a website are stored in a folder called ‘images’ this folder is stored in the same file/location as the webpages.
Write the HTML to display the car.png image
<img src='images\car.png' >
What does controls do in video/audio tags?
controls: adds play, pause, volume controls
Write HTML code to play a MP3 audio file called “music” on a web page. The file is saved in the same folder as the webpage
<audio controls>
<source src="music.mp3" type="audio/mpeg">
</audio>
Write HTML code to play a MP3 audio file called “song1” on a web page. The file is saved in a folder called music, which is stored in the location as the webpage
<audio controls>
<source src="music/song1.mp3" type="audio/mpeg">
</audio>
Write HTML code to play a MP4 video file called “advert” on a web page. The file is saved in the same folder as the webpage. The video should be 320 pixels by 240 pixels.
<video width="320" height="240" controls>
<source src="advert.mp4" type="video/mp4"></video>
Write HTML code to play a MP4 video file called “bob” on a web page. The file is saved in a folder called interviews, which is stored in the location as the webpage
<video controls>
<source src="interviews/bob.mp4" type="video/mp4"></video>
What would the HTML below produce?
<ol>
<li>Rod</li>
<li>Jane</li>
<li>Fred</li>
</ol>
- Rod
- Jane
- Fred
Write HTML to create the output shown below?
1. un
2. deux
3. trois
<ol>
<li>un</li>
<li>deux</li>
<li>trois</li>
</ol>
Write HTML to create:
- Fish
- Cat
- Dog
<ul> <li>Fish</li> <li>Cat</li> <li>Dog</li> </ul>
What would the HTML below produce?
<ul>
<li>Apples</li>
<li>Bannanas</li>
<li>Oranges</li>
</ul>
- Apples
- Bannanas
- Oranges
Write a CSS rule to make all paragraphs Arial with a size of 14px.
Solution
p {
font-family: “Arial”;
font-size: 14px;
}
Write a CSS rule to make the largest heading have a Times New Roman font, a 20px in size.
h1 {
font-family: “Times New Roman”;
font-size: 20px;
}
Describe what this CSS rule would do?
p {
font-family: “Arial”;
font-size: 20px;
}
The rule would make the text for paragraphs display as Arial and 20px in size.
What would this CSS rule do?
h1 {
color: red;
}
Change the colour of h1 headings red.
Write a CSS rule to change the text of all paragraphs green
p {
color: green;
}
Describe what this CSS rule would do?
h2 {
text-align: center;
}
The rule would align all h2 elelment to the center of the webpage
Write a CSS rule to display the largest heading at the right of the screen
h1 {
text-align: right;
}
Describe what this CSS rule would do?
body {
background-color: lightblue;
}
The rule would give the page a light blue background colour.
Describe what this CSS rule would do?
p {
background-color: yellow;
}
The rule would make all paragraph elements have a yellow background colour.
Write a CCS rule to give all of your webpage a black background
body {
background-color: black;
}
Write a CSS rule to give all h2 headings a orange background and the text to show in the center of the page
p {
background-color: yellow;
text-align: center;
}
What would this CSS rule do?
img { height : 100px;
width : 100px}
Resize all images to 100 by 100 pixels
Write a CSS rule to resize all images to 300 wide and 200 tall
img { height : 200px;
width : 300px}
Write a CSS rule the show elements in the “new” class with blue text and a green background.
.new {
color: blue;
background-color: green;
}
Write a CSS rule for the “update” id selector so it has blue text and a green background.
#update {
color: blue;
background-color: green;
}- What symbol is is used in CSS to show an element with the id.
- What symbol is is used in CSS to show an element with the class.
- #
- .
What are the Advantages of an external CSS:
CSS rules are applied to multiple pages to create consistency.
Changes to CSS styles need only be made once and will be applied to all linked pages
Can improve load times because the CSS file need only be downloaded once
From the code below identify the following.
1) class 2) ID 3) value 4) property
body{
font-family:Arial;
}
#section1{
color:red;
}
.menu{
text-align:center;
}
1) menu
2) section1
3) Arial, red, center
4) font-family, color, text-align
