HTML and CSS
Presentation
•
Education
•
9th - 12th Grade
•
Practice Problem
•
Hard
Tiffany Jones
Used 42+ times
FREE Resource
20 Slides • 0 Questions
1
HTML and CSS
2
HTML Tags
What are HTML Tags?
HTML tags are simple instructions that tell a web browser how to format text. You can use tags to format italics, line breaks, objects, bullet points, and more.
These tags live in the HTML (or the Hypertext Markup Language) of every webpage. Put, HTML is the language of web pages.
3
HTML Elements
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end tag.
4
The declaration is not an HTML tag. It is an "information" to the browser about what document type to expect.
HTML Tags
Defines a comment.
The comment tag is used to insert comments in the source code. Comments are not displayed in the browsers.
<!--This is a comment. Comments are not displayed in the browser-->
5
The <body> tag defines the document's body.
The <body> element contains all the contents of an HTML document, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
Note: There can only be one <body> element in an HTML document.
<a>
HTML Tags
The <a> tag defines a hyperlink, which is used to link from one page to another.
The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
<a href="https://www.w3schools.com">Visit W3Schools.com!</a>
6
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
Note: Only use one <h1> per page - this should represent the main heading/subject for the whole page.
<br>
HTML Tags
The <br> tag inserts a single line break.
The <br> tag is useful for writing addresses or poems.
The <br> tag is an empty tag which means that it has no end tag.
7
HTML Tags
The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
8
Metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, scripts, and other meta information.
Metadata
Data about Data
9
The <html> tag represents the root of an HTML document.
The <html> tag is the container for all other HTML elements (except for the <!DOCTYPE> tag).
<html>
The <hr> tag defines a thematic break in an HTML page (e.g. a shift of topic).
The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.
<hr>
HTML Tags
10
HTML Tags
<li>
12
HTML Tags
<link>
The <link> tag defines the relationship between the current document and an external resource.
The <link> tag is most often used to link to external style sheets or to add a favicon to your website.
The <link> element is an empty element, it contains attributes only.
13
HTML Attributes
What are HTML Attributes?
HTML attributes are special words used inside the opening tag to control the element's behavior. HTML attributes are a modifier of a HTML element type.
14
HTML Tags
<p>
The <p> tag defines a paragraph.
Browsers automatically add a single blank line before and after each <p> element.
15
HTML Tags
<script>
The <script> tag is used to embed a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
16
CSS
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all at once
External stylesheets are stored in CSS files
17
A CSS rule consists of a selector and a declaration block.
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
18
CSS Selectors
What is a CSS Selector?
A CSS selector selects the HTML element(s) you want to style.
CSS selectors are used to "find" (or select) the HTML elements you want to style.
19
The class selector selects HTML elements with a specific class attribute.
To select elements with a specific class, write a period (.) character, followed by the class name.
Class
The id selector uses the id attribute of an HTML element to select a specific element.
The id of an element is unique within a page, so the id selector is used to select one unique element!
To select an element with a specific id, write a hash (#) character, followed by the id of the element.
Id
CSS Selectors
20
#para1 {
text-align: center;
color: red;
}
Id
.center {
text-align: center;
color: red;
}
Class
HTML and CSS
Show answer
Auto Play
Slide 1 / 20
SLIDE
Similar Resources on Wayground
15 questions
Reviewing Simplifying Rational Expressions by Factoring
Presentation
•
9th - 12th Grade
15 questions
Negation in French
Presentation
•
9th - 12th Grade
15 questions
Trigonometry Review
Presentation
•
9th - 12th Grade
11 questions
Must and Mustn't
Presentation
•
9th - 12th Grade
15 questions
Naming Covalent Compounds
Presentation
•
9th - 12th Grade
15 questions
Math 3 EOC Review
Presentation
•
9th - 12th Grade
15 questions
Arithmetic Sequences
Presentation
•
9th - 12th Grade
15 questions
Redox Reactions
Presentation
•
9th - 12th Grade
Popular Resources on Wayground
25 questions
The Ultimate College Knowledge Quiz
Quiz
•
8th Grade
20 questions
Math Review
Quiz
•
3rd Grade
15 questions
Fast food
Quiz
•
7th Grade
20 questions
Math Review
Quiz
•
6th Grade
20 questions
Context Clues
Quiz
•
6th Grade
20 questions
Inferences
Quiz
•
4th Grade
19 questions
Classifying Quadrilaterals
Quiz
•
3rd Grade
20 questions
Figurative Language Review
Quiz
•
6th Grade
Discover more resources for Education
10 questions
Fact Check Ice Breaker: Two truths and a lie
Quiz
•
5th - 12th Grade
40 questions
Math Large Group Session 1
Quiz
•
9th - 12th Grade
20 questions
Algebra 1 Review
Quiz
•
9th Grade
20 questions
Math 1 EOC Review
Quiz
•
9th Grade
10 questions
Logos
Quiz
•
6th - 9th Grade
14 questions
Attributes of Linear Functions
Quiz
•
9th - 12th Grade
100 questions
NC Biology EOC Review
Quiz
•
9th - 10th Grade
9 questions
NC Math 1 EOC Review Non-Calculator
Quiz
•
9th Grade