Html and Css

Presentation

•

Computers

•

12th Grade

•

Easy

Ben Dobson

Used 38+ times

FREE Resource

87 Slides • 19 Questions

Have you installed notepad ++?

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.

What is HTML..

Ask a student...

What is a mark-up language?

Ask a student...

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)

Open Ended

Most html tags come pairs. What would be the closing tag for opening tag <html> ?

Type response here

</html>

Most html tags come pairs. What would be the closing tag for opening tag ?

What does the title element do?

Open Ended

What does the title element do?

Type response here

Changes the word/name that appears on a tab in a browser

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

Open Ended

What problems would occur for the web page creator if they didn't use meta tags?

Type response here

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

Open Ended

What happens when you go from h1..to h7?

Type response here

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 .

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.

Open Ended

Describe what the <p> element does and contrast that to the <br> element. Why is <br> element slightly unusual?

Type response here

Open Ended

This line of html can display an image.

What do src, alt, height, and width attributes do? What must be present to make the image appear on the web page?

Type response here

- 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

What is the difference between an Html element and an html attribute?

Open Ended

What is the difference between a html element and an html attribute?

Type response here

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.

Open Ended

What is an anchor <a> tag? what attribute must it have to work properly and what does this attribute specify?

Type response here

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

Open Ended

What do <ul> and <ol> tags represent? What is the difference between them?

What is a <li> tag?

Type response here

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

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

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

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…….

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

Open Ended

Write the html style attribute code to set an

h1 tag with heading "Big Heading" with purple text

Type response here

<h1 style="color:purple;">Big heading</h1>

Open Ended

Write html for a paragraph tag with the text "paragraph" to be outlined with a dashed box with color green

Type response here

<p style="border-style:dashed;border-color:green;">Paragraph</p>

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

Type response here

<ol style="font-family:Arial;" >

<li>Dog</li>

<li>Cat</li>

<li>Mouse</li>

</ol>

Why is it useful to have a separate file (from your html file) that specifies style?

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

These are called css style elements (either when directly as attribute of element or in external file)

Open Ended

Why is useful to have a separate file (from your html file) that specifies style?

Type response here

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

Open Ended

What html do you need to link and use an external css file? (And between what tags does it need to be?)

Type response here

<head>

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

Type response here

h3 {

color:#0000ff;

}

Then save the file and refresh you html page in your browser.
Can you see the changes in colour of the text?

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

Type response here

.intro {

color:purple;

}

<div class="intro">
</div>

Open Ended

Describe the difference between element based style code and css "classes" (and div elements/tags) .

Type response here

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?

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.

Type response here

#paragraph1 {

color:blue;

}
html...
<p id="paragraph1">Id test</p>

Open Ended

Describe what advantage using id attributes and css #idname code gives you.

Type response here

but not on the syllabus...

100

101

102

103

104

105

106

Show answer

Auto Play

Slide 1 / 106

SLIDE

Similar Resources on Wayground

100 questions

TRANSIENTS

Lesson

•

KG - University

101 questions

TM Joint

Lesson

•

University

102 questions

Cycle 1- Cycle 2 General Mathematics

Lesson

•

11th Grade

100 questions

MATHEMATICS IN THE MODERN WORLD

Lesson

•

University

102 questions

Las comunidades autónomas de España

Lesson

•

11th Grade

102 questions

English 4

Lesson

•

University

103 questions

EPCC US History

Lesson

•

University

98 questions

Electric Theory

Lesson

•

12th Grade

Popular Resources on Wayground

15 questions

Fractions on a Number Line

Quiz

•

3rd Grade

20 questions

Equivalent Fractions

Quiz

•

3rd Grade

25 questions

Multiplication Facts

Quiz

•

5th Grade

29 questions

Alg. 1 Section 5.1 Coordinate Plane

Quiz

•

9th Grade

$fractions$

22 questions

fractions

Quiz

•

3rd Grade

11 questions

FOREST Effective communication

Lesson

•

20 questions

Main Idea and Details

Quiz

•

5th Grade

20 questions

Context Clues

Quiz

•

6th Grade

Discover more resources for Computers

20 questions

-AR -ER -IR present tense

Quiz

•

10th - 12th Grade

22 questions

El Imperfecto

Quiz

•

9th - 12th Grade

20 questions

SSS/SAS

Quiz

•

9th - 12th Grade

20 questions

verbos reflexivos en español

Quiz

•

9th - 12th Grade

14 questions

Making Inferences From Samples

Quiz

•

7th - 12th Grade

23 questions

CCG - CH8 Polygon angles and area Review

Quiz

•

9th - 12th Grade

8 questions

Momentum and Collisions

Lesson

•

9th - 12th Grade

28 questions

Ser vs estar

Quiz

•

9th - 12th Grade

Html and Css

​Have you installed notepad ++?

Why are we learning this?A) Its on the syllabus and there are question asking you to write html in the examB) You might want to use HTML as part of your project.C) Many programming jobs involve at least some web programming.

​What is HTML..

Ask a student...

What is a mark-up language?

Ask a student...

​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)

​</html>

​What does the title element do?

Changes the word/name that appears on a tab in a browser

​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

​​White board up. describe 1) How are html elements normally defined?2) Describe what the following elementsHTML,head,body,title,meta,h1....h6 do and how you might use them .

- 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

What is the difference between an Html element and an html attribute?

​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.

What do <ul> and <ol> tags represent? ListsWhat 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 ).

White board up the following HTML elements:

​CSS is called Cascading Style Sheets….as

​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

​<h1 style="color:purple;">Big heading</h1>

​<p style="border-style:dashed;border-color:green;">Paragraph</p>

​<ol style="font-family:Arial;" >

​These are called css style elements (either when directly as attribute of element or in external file)

​h3 {

​Then save the file and refresh you html page in your browser.Can you see the changes in colour of the text?

​

​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?

#paragraph1 {

​but not on the syllabus...

Similar Resources on Wayground

Popular Resources on Wayground

Discover more resources for Computers

Have you installed notepad ++?

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.

What is HTML..

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)

</html>

What does the title element do?

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

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 .

- 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

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.

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 ).

CSS is called Cascading Style Sheets….as

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

<h1 style="color:purple;">Big heading</h1>

<p style="border-style:dashed;border-color:green;">Paragraph</p>

<ol style="font-family:Arial;" >

These are called css style elements (either when directly as attribute of element or in external file)

h3 {

Then save the file and refresh you html page in your browser.
Can you see the changes in colour of the text?

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?

but not on the syllabus...