HTML and CSS
Presentation
•
Education
•
9th - 12th Grade
•
Practice Problem
•
Hard
Tiffany Jones
Used 46+ 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
Bien Dit 1 Chapter 3.1
Presentation
•
9th - 12th Grade
14 questions
John Adams' Presidency
Presentation
•
9th - 12th Grade
14 questions
Forms of Linear Equations
Presentation
•
9th - 12th Grade
14 questions
Second conditional
Presentation
•
9th - 12th Grade
15 questions
How to Make a Program for Theater Productions
Presentation
•
9th - 12th Grade
15 questions
Physical and Chemical Changes
Presentation
•
9th - 12th Grade
15 questions
Dictionary Skills
Presentation
•
9th - 12th Grade
15 questions
Demonstrative adjectives
Presentation
•
9th - 12th Grade
Popular Resources on Wayground
24 questions
PBIS-HGMS Day 10
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Review 3
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
15 questions
HCS SCI 05 Summer School Assessment 3 Review
Quiz
•
5th Grade
35 questions
Lufkin Road Middle School Student Handbook & Policies Assessment
Quiz
•
7th Grade
18 questions
Geo 11.3 Area of Circles and Sectors
Quiz
•
9th - 11th Grade