Html and Css
Presentation
•
Computers
•
12th Grade
•
Easy
Ben Dobson
Used 38+ times
FREE Resource
87 Slides • 19 Questions
1
2
Have you installed notepad ++?
3
4
5
6
7
8
Why are we learning this?
A) Its on the syllabus and there are question asking you to write html in the exam
B) You might want to use HTML as part of your project.
C) Many programming jobs involve at least some web programming.
9
10
11
12
13
What is HTML..
Ask a student...
14
What is a mark-up language?
Ask a student...
15
A system of formatting text and images.
It comes from "marking up" a manuscript prior
to being laid out by typesetters
(with physical metal-type blocks)
16
17
18
19
20
21
22
Open Ended
Most html tags come pairs. What would be the closing tag for opening tag <html> ?
23
</html>
Most html tags come pairs. What would be the closing tag for opening tag ?
24
25
26
27
What does the title element do?
28
Open Ended
What does the title element do?
29
Changes the word/name that appears on a tab in a browser
30
According to HTML 5 (current) stand all valid html pages must have a title tag inside of a head tag.
But browsers will still generally render non-standard html.
But you really should use as it's unprofessional to show file name in the tab
31
32
Open Ended
What problems would occur for the web page creator if they didn't use meta tags?
33
Search engines would not be able to identify what the web site is about, so they could not index it properly. So it would be difficult to find using a search engine
34
35
36
Open Ended
What happens when you go from h1..to h7?
37
38
White board up.
describe
1) How are html elements normally defined?
2) Describe what the following elements
HTML,head,body,title,meta,h1....h6 do and how you might use them .
39
White board up.
describe
1) How are html elements normally defined?
In pair of tags.
2) Describe what the following elements
HTML (defines a file as being html),head (defines the non-visual head of an html file) ,title (sets title hint of html tab),meta (a variety of information about an html file for example title, description,author),body(defines the main visible part of an html file) h1....h6 (header text of decreasing size) do and how you might use them.
40
41
42
Open Ended
Describe what the <p> element does and contrast that to the <br> element. Why is <br> element slightly unusual?
43
44
45
Open Ended
This line of html can display an image.
<img src="Dog.jpg" alt="Picture of Dog" height="200px" width="200px">
What do src, alt, height, and width attributes do? What must be present to make the image appear on the web page?
46
- src identifies the path/file name to the image
The image file must be on the computer.
-alt display alternative text if image does not load, will be spoken if accessibility settings are set
-height/width are height and width of the image
47
What is the difference between an Html element and an html attribute?
48
Open Ended
What is the difference between a html element and an html attribute?
49
Html elements define components of a web page encoded by an html tag; attributes specify additional information about a component.
Attributes belong to an element.
50
51
Open Ended
What is an anchor <a> tag? what attribute must it have to work properly and what does this attribute specify?
52
A link, or a piece of hypertext.
The href (hypertext reference) is the required attribute of the html tag. It points to place the link should go to.
The browser will do an HTTP get request for the href page.
It will then display that page when it receives the html for that page from the web server pointed to by the href
53
54
55
56
Open Ended
What do <ul> and <ol> tags represent? What is the difference between them?
What is a <li> tag?
57
What do <ul> and <ol> tags represent? Lists
What is the difference between them?
<ol> are numbered (or have some other ordering system, a,b,c or i, ii. via the type attribute)
<ul> bullets points (or some other similar device via list-style-type attribute ).
What is a <li> tag? a list element enclosed by either <ul></ul? or <ol></ol> tags
58
White board up the following HTML elements:
Describe what
p , br, img, a, ol, ul
do and how you would use them
Also explain the difference between an element and a tag and an attribute with an example
59
p. Paragraph; line space after.
br line break
img, image, needs image file source (src) as attribute
a anchor/hypertext element, must have a src attribute which is the target
ol, ordered list (numbers/letters) ul unordered list (bullet points etc.) Li list element, contained within of ol or ul element
Element : item of html made with 2 enclosing tags. Attribute extra data/information for/about an element
60
61
62
63
64
65
66
67
68
69
CSS is called Cascading Style Sheets….as
You can specify the style for an element in multiple ways and there are rules governing which rule is then used…the term cascading refers to rules governing which style property will apply…….
70
71
Alter your h1,h2,h3 elements so they read like this
The save and refesh your browser to check that the style has been altered in the way you would expect
72
Open Ended
Write the html style attribute code to set an
h1 tag with heading "Big Heading" with purple text
73
<h1 style="color:purple;">Big heading</h1>
74
Open Ended
Write html for a paragraph tag with the text "paragraph" to be outlined with a dashed box with color green
75
<p style="border-style:dashed;border-color:green;">Paragraph</p>
76
Open Ended
Write html with a style attribute for an ordered list that uses Arial font family and has 3 items in the list of your choice
77
<ol style="font-family:Arial;" >
<li>Dog</li>
<li>Cat</li>
<li>Mouse</li>
</ol>
78
Why is it useful to have a separate file (from your html file) that specifies style?
79
So you can write the content of the web page once...but
1) be able to alter the look of it without changing the content
2) Have multiple styles for example for a mobile app or for visually impaired people
3) Although an additional http request is needed to get the css file, most browsers will use browser caching to store css, so only on 1st visit is this needed
80
These are called css style elements (either when directly as attribute of element or in external file)
81
Open Ended
Why is useful to have a separate file (from your html file) that specifies style?
82
So you can write the content of the web page once...but
1) be able to alter the look of it without changing the content
2) Have multiple styles for example for a mobile app or for visually impaired people
3) Although an additional http request is needed to get the css file, most browsers will use browser caching to store css, so only on 1st visit is this needed
83
Open Ended
What html do you need to link and use an external css file? (And between what tags does it need to be?)
84
<head>
<link rel="stylesheet" type="text/css" href="myCssfileElementTagsWithClassesAndIDs.css">
</head>
85
Open Ended
What css code would you write in an external css file to make all h3 tags have blue text using the hexidecimal colour coding
86
h3 {
color:#0000ff;
}
87
Then save the file and refresh you html page in your browser.
Can you see the changes in colour of the text?
88
Open Ended
Write the code you in an external css file to create a css "class" to make an "intro" section of an html page have purple text. Include the html tag you would need as well
89
.intro {
color:purple;
}
<div class="intro">
</div>
90
Open Ended
Describe the difference between element based style code and css "classes" (and div elements/tags) .
91
92
After you altered the css file and html file save both and refresh your browser.
Do you see the text in the lists change colour as expected?
93
Open Ended
Write the html you need to write and the css code in an external file to use an id attribute to change the text of a paragraph with id "paragraph1" to be blue.
94
#paragraph1 {
color:blue;
}
html...
<p id="paragraph1">Id test</p>
95
Open Ended
Describe what advantage using id attributes and css #idname code gives you.
96
97
but not on the syllabus...
98
99
100
101
102
103
104
105
106
Show answer
Auto Play
Slide 1 / 106
SLIDE
Similar Resources on Wayground
99 questions
M1.5 NATIONAL ARTIST VISUAL ARTS
Presentation
•
12th Grade
103 questions
Sp4H Reflexives
Presentation
•
11th - 12th Grade
97 questions
R2.2 How Fast?
Presentation
•
12th Grade
97 questions
Civil Rights
Presentation
•
12th Grade
104 questions
Angiosperms
Presentation
•
11th Grade
103 questions
Musculoskeletal
Presentation
•
KG
99 questions
Continuity and Unity of Life
Presentation
•
10th - 12th Grade
Popular Resources on Wayground
11 questions
Hallway & Bathroom Expectations
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Assessment 2
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
12 questions
2026 TAP Technology in the Classroom
Presentation
•
Professional Development
15 questions
HCS SCI 05 Summer School Assessment 2 Review
Quiz
•
5th Grade
15 questions
HCS SCI 04 Summer School Review 2
Quiz
•
4th Grade
59 questions
Geometry Unit 3 Review
Quiz
•
9th - 12th Grade
14 questions
FAST ELA READING SMAPLE TEST MATERIALS
Passage
•
3rd Grade