WDD Implementation Flashcards

1
Q

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>

~~~

A
1 = <title> 2 = </title>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

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>

~~~

A
1 = <body> 2 = </body>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

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>

~~~

A
1 = <head> 2 = </head>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

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>
~~~

A
1 = <html> 2 = </html>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

Write a line of HTML to create a large which heading says Bob’s Disco

A
<h1>  Bob's Disco</h1>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

What HTML tags would you used to create a paragraph?

A
<p></p>
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Write HTML to create an external hyperlink to www.w3schools.com with the text Find out more

A

<a href="www.w3schools.com">Find out more</a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

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?

A

1) The code would create an external hyperlink which could take you to the BBC webpage
2)Absolute Addressing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

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?

A

1) The code would create an internal hyperlink which could take you to the about webpage
2)Relative Addressing

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

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

<a href="people/staff.html">Info about staff</a>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

Show what this could would look like on a webpage
<a href="about.html">Find out about us!</a>

A

Find out about us!

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

What does this code do?
`<head>

<link></link>

</head>`

A

The <link> tag is used to link to external CSS files.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

Write the HTML to display an image of a photo at a size of 100 pixels by 100 pixels. The filename is “photo.png”

A

<img src='photo.png' width="100" height="100"> .

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

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

A

<img src='images\car.png' >

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

What does controls do in video/audio tags?

A

controls: adds play, pause, volume controls

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

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

A

<audio controls>

<source src="music.mp3" type="audio/mpeg">

</audio>

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

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

A

<audio controls>

<source src="music/song1.mp3" type="audio/mpeg">

</audio>

18
Q

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.

A

<video width="320" height="240" controls>
<source src="advert.mp4" type="video/mp4">
</video>

19
Q

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

A

<video controls>
<source src="interviews/bob.mp4" type="video/mp4">
</video>

20
Q

What would the HTML below produce?

<ol>
<li>Rod</li>
<li>Jane</li>
<li>Fred</li>
</ol>

A
  1. Rod
  2. Jane
  3. Fred
21
Q

Write HTML to create the output shown below?
1. un
2. deux
3. trois

A

<ol>
<li>un</li>
<li>deux</li>
<li>trois</li>
</ol>

22
Q

Write HTML to create:

  • Fish
  • Cat
  • Dog
A
<ul>
  <li>Fish</li>
  <li>Cat</li>
  <li>Dog</li>
</ul>
23
Q

What would the HTML below produce?

<ul>
<li>Apples</li>
<li>Bannanas</li>
<li>Oranges</li>
</ul>

A
  • Apples
  • Bannanas
  • Oranges
24
Q

Write a CSS rule to make all paragraphs Arial with a size of 14px.

A

Solution
p {
font-family: “Arial”;
font-size: 14px;
}

25
Q

Write a CSS rule to make the largest heading have a Times New Roman font, a 20px in size.

A

h1 {
font-family: “Times New Roman”;
font-size: 20px;
}

26
Q

Describe what this CSS rule would do?
p {
font-family: “Arial”;
font-size: 20px;
}

A

The rule would make the text for paragraphs display as Arial and 20px in size.

27
Q

What would this CSS rule do?
h1 {
color: red;
}

A

Change the colour of h1 headings red.

28
Q

Write a CSS rule to change the text of all paragraphs green

A

p {
color: green;
}

29
Q

Describe what this CSS rule would do?
h2 {
text-align: center;
}

A

The rule would align all h2 elelment to the center of the webpage

30
Q

Write a CSS rule to display the largest heading at the right of the screen

A

h1 {
text-align: right;
}

31
Q

Describe what this CSS rule would do?
body {
background-color: lightblue;
}

A

The rule would give the page a light blue background colour.

32
Q

Describe what this CSS rule would do?
p {
background-color: yellow;
}

A

The rule would make all paragraph elements have a yellow background colour.

33
Q

Write a CCS rule to give all of your webpage a black background

A

body {
background-color: black;
}

34
Q

Write a CSS rule to give all h2 headings a orange background and the text to show in the center of the page

A

p {
background-color: yellow;
text-align: center;
}

35
Q

What would this CSS rule do?
img { height : 100px;
width : 100px}

A

Resize all images to 100 by 100 pixels

36
Q

Write a CSS rule to resize all images to 300 wide and 200 tall

A

img { height : 200px;
width : 300px}

37
Q

Write a CSS rule the show elements in the “new” class with blue text and a green background.

A

.new {
color: blue;
background-color: green;
}

38
Q

Write a CSS rule for the “update” id selector so it has blue text and a green background.

A
#update {
  color: blue;
  background-color: green;
}
39
Q
  1. What symbol is is used in CSS to show an element with the id.
  2. What symbol is is used in CSS to show an element with the class.
A
  1. #
  2. .
40
Q

What are the Advantages of an external CSS:

A

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

41
Q

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;
}

A

1) menu
2) section1
3) Arial, red, center
4) font-family, color, text-align