SlideShare a Scribd company logo
HTML &CSS 101
www.meadowsresources.com
713.352.3691
lindsey@meadowsresources.com
What is HTML
&CSS
 HTML, HyperText Markup Language, gives content structure and
meaning by defining that content as, for example, headings,
paragraphs, or images. CSS, or Cascading Style Sheets, is a
presentation language created to style the appearance of
content—using, for example, fonts or colors.
 The two languages—HTML and CSS—are independent of one
another and should remain that way. CSS should not be written
inside of an HTML document and vice versa. As a rule, HTML will
always represent content, and CSS will always represent the
appearance of that content.
Common
Terms
 Elements – A designator that define the structure and content of
objects within a page. Some of the more frequently used elements
include multiple levels of headings (identified as <h1> through
<h6> elements) and paragraphs (identified as the <p> element);
the list goes on to include the <a>, <div>, <span>, <strong>, and
<em> elements, and many more.
Common
Terms
 Tags -The use of less-than and greater-than angle brackets
surrounding an element creates what is known as a tag.Tags most
commonly occur in pairs of opening and closing tags.The content
that falls between the opening and closing tags is the content of
that element. An anchor link, for example, will have an opening
tag of <a> and a closing tag of </a>.What falls between these two
tags will be the content of the anchor link.
 OpeningTag - An opening tag marks the beginning of an element. It
consists of a less-than sign followed by an element’s name, and then
ends with a greater-than sign; for example, <div>.
 ClosingTag - marks the end of an element. It consists of a less-than
sign followed by a forward slash and the element’s name, and then
ends with a greater-than sign; for example, </div>.
Common
Terms
 Attributes - Properties used to provide additional information
about an element.The most common attributes include the id
attribute, which identifies an element; the class attribute, which
classifies an element; the src attribute, which specifies a source for
embeddable content; and the href attribute, which provides a
hyperlink reference to a linked resource.
 Attributes are defined within the opening tag, after an element’s
name. Generally attributes include a name and a value.The format
for these attributes consists of the attribute name followed by an
equals sign and then a quoted attribute value.
Demo
 The preceding code will display the text “Meadows Resources” on
the web page and will take users to
http://meadowsresources.com/ upon clicking the “Meadows
Resources” text.The anchor element is declared with the opening
<a> and closing </a> tags encompassing the text, and the
hyperlink reference attribute and value are declared with
href="http://meadowsresources.com" in the opening tag.
Demo <a href=“http://meadowsresources.com/>”Meadows Resources </a>
Element
Attribute
Tag
HTML
Document
Structure
HTML documents are plain text documents saved with an .html file
extension rather than a .txt file extension.To begin writing HTML,
you first need a plain text editor that you are comfortable using.
Sadly this does not include MicrosoftWord or Pages, as those are
rich text editors.Two of the more popular plain text editors for
writing HTML and CSS are Dreamweaver and SublimeText. Free
alternatives also include Notepad++ forWindows andTextWrangler
for Mac.
All HTML documents have a required structure that includes the
following declaration and elements: <!DOCTYPE html>, <html>,
<head>, and <body>.
HTML
Document
Structure
The document type declaration, or <!DOCTYPE html>, informs web
browsers which version of HTML is being used and is placed at the
very beginning of the HTML document. Because we’ll be using the
latest version of HTML, our document type declaration is simply
<!DOCTYPE html>. Following the document type declaration, the
<html> element signifies the beginning of the document.
HTML
Document
Structure
Inside the <html> element, the <head> element identifies the top of
the document, including any metadata (accompanying information
about the page).The content inside the <head> element is not
displayed on the web page itself. Instead, it may include the
document title (which is displayed on the title bar in the browser
window), links to any external files, or any other beneficial
metadata. All of the visible content within the web page will fall
within the <body> element.
HTML
Document
Structure
The preceding code shows the document beginning with the
document type declaration, <!DOCTYPE html>, followed directly by
the <html> element. Inside the <html> element come the <head>
and <body> elements.The <head> element includes the character
encoding of the page via the <meta charset="utf-8"> tag and the
title of the document via the <title> element.The <body> element
includes a heading via the <h1> element and a paragraph via the <p>
element. Because both the heading and paragraph are nested
within the <body> element, they are visible on the web page.
HTML
Document
Structure
When an element is placed inside of another element, also known as
nested, it is a good idea to indent that element to keep the
document structure well organized and legible. In the previous
code, both the <head> and <body> elements were nested—and
indented—inside the <html> element.The pattern of indenting for
elements continues as new elements are added inside the <head>
and <body> elements.
SelfClosing
Elements
In the previous example, the <meta> element had only one tag and
didn’t include a closing tag. Fear not, this was intentional. Not all
elements consist of opening and closing tags. Some elements
simply receive their content or behavior from attributes within a
single tag.The <meta> element is one of these elements.The
content of the previous <meta> element is assigned with the use of
the charset attribute and value. Other common self closing
elements include: <br> <embed> <hr> <img> <input> <link> <meta>
<param> <source> <wbr>
ProTip
The structure outlined here, making use of the <!DOCTYPE html>
document type and <html>, <head>, and <body> elements, is quite
common.We’ll want to keep this document structure handy, as we’ll
be using it often as we create new HTML documents.
Code
Validation
No matter how careful we are when writing our code, we will
inevitably make mistakes.Thankfully, when writing HTML and CSS
we have validators to check our work.TheW3C has built both HTML
and CSS validators that will scan code for mistakes.Validating our
code not only helps it render properly across all browsers, but also
helps teach us the best practices for writing code.
Thank you
www.meadowsresources.com
713.352.3691
lindsey@meadowsresources.com

More Related Content

What's hot (20)

Presentation on html, css
Presentation on html, css
Aamir Sohail
 
Class Intro / HTML Basics
Class Intro / HTML Basics
Shawn Calvert
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1
Lee Lundrigan
 
Hushang Gaikwad
Hushang Gaikwad
Hushnag Gaikwad
 
Web Layout
Web Layout
Shawn Calvert
 
HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2
Sharon Wasden
 
Html and css presentation
Html and css presentation
umesh patil
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
Himanshu Kumar
 
HTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
HTML & CSS Masterclass
HTML & CSS Masterclass
Bernardo Raposo
 
HTML CSS | Computer Science
HTML CSS | Computer Science
Transweb Global Inc
 
Span and Div tags in HTML
Span and Div tags in HTML
Biswadip Goswami
 
Introduction to HTML
Introduction to HTML
Ajay Khatri
 
Week 2-intro-html
Week 2-intro-html
Shawn Calvert
 
Introduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Images on the Web
Images on the Web
Shawn Calvert
 
Introduction to web design discussing which languages is used for website des...
Introduction to web design discussing which languages is used for website des...
Aditya Dwivedi
 
HTML Email
HTML Email
Shawn Calvert
 
Dhtml ppt (2)
Dhtml ppt (2)
Rai Saheb Bhanwar Singh College Nasrullaganj
 
CSS Foundations, pt 1
CSS Foundations, pt 1
Shawn Calvert
 

Viewers also liked (8)

JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
jeresig
 
UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3
Shay Howe
 
J query introduction
J query introduction
SMS_VietNam
 
Javascript basic course
Javascript basic course
Tran Khoa
 
HTML basics
HTML basics
Akhil Kaushik
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman
 
Modern Web UI - Web components
Modern Web UI - Web components
Mike North
 
Anatomy of a Progressive Web App
Anatomy of a Progressive Web App
Mike North
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
jeresig
 
UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3
Shay Howe
 
J query introduction
J query introduction
SMS_VietNam
 
Javascript basic course
Javascript basic course
Tran Khoa
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman
 
Modern Web UI - Web components
Modern Web UI - Web components
Mike North
 
Anatomy of a Progressive Web App
Anatomy of a Progressive Web App
Mike North
 
Ad

Similar to HTML and CSS Basics (20)

2 INTRO TO HTML.pptx
2 INTRO TO HTML.pptx
CHEYSERCHARRESEGATCH1
 
Empowerment Technologies Lecture 10 (Philippines SHS)
Empowerment Technologies Lecture 10 (Philippines SHS)
John Bosco Javellana, MAEd.
 
Introduction to HTML- Week 3- HTMLSyntax
Introduction to HTML- Week 3- HTMLSyntax
MohammadRafsunIslam
 
HTML Introduction
HTML Introduction
eceklu
 
Html 1
Html 1
pavishkumarsingh
 
Learn html elements and structure cheatsheet codecademy
Learn html elements and structure cheatsheet codecademy
nirmalamanjunath
 
Introduction to HTML.pptx
Introduction to HTML.pptx
VaibhavSingh887876
 
HTML/HTML5
HTML/HTML5
People Strategists
 
Html
Html
Himanshu Singh
 
Html
Html
Himanshu Singh
 
Html & Html5 from scratch
Html & Html5 from scratch
Ahmad Al-ammar
 
Html n CSS
Html n CSS
Sukrit Gupta
 
HTML - part 1
HTML - part 1
Fahad Masood
 
Web technology
Web technology
Partnered Health
 
html-basic.pdf
html-basic.pdf
rahulcoder
 
Html basic
Html basic
Viccky Khairnar
 
Html tutorial
Html tutorial
NAGARAJU MAMILLAPALLY
 
Html introduction
Html introduction
Dalia Elbadry
 
Html tutorials-infotech aus
Html tutorials-infotech aus
Nilesh Pujara
 
Html Workshop
Html Workshop
vardanyan99
 
Ad

Recently uploaded (20)

Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
Introduction to Typescript - GDG On Campus EUE
Introduction to Typescript - GDG On Campus EUE
Google Developer Group On Campus European Universities in Egypt
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0
RodrigoMori7
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 
Jeremy Millul - A Talented Software Developer
Jeremy Millul - A Talented Software Developer
Jeremy Millul
 
Improving Developer Productivity With DORA, SPACE, and DevEx
Improving Developer Productivity With DORA, SPACE, and DevEx
Justin Reock
 
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
ELNL2025 - Unlocking the Power of Sensitivity Labels - A Comprehensive Guide....
Jasper Oosterveld
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
6th Power Grid Model Meetup - 21 May 2025
6th Power Grid Model Meetup - 21 May 2025
DanBrown980551
 
Jira Administration Training – Day 1 : Introduction
Jira Administration Training – Day 1 : Introduction
Ravi Teja
 
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
vertical-cnc-processing-centers-drillteq-v-200-en.pdf
AmirStern2
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
ISOIEC 42005 Revolutionalises AI Impact Assessment.pptx
AyilurRamnath1
 
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
“State-space Models vs. Transformers for Ultra-low-power Edge AI,” a Presenta...
Edge AI and Vision Alliance
 
LSNIF: Locally-Subdivided Neural Intersection Function
LSNIF: Locally-Subdivided Neural Intersection Function
Takahiro Harada
 
FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0
RodrigoMori7
 
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Azure vs AWS Which Cloud Platform Is Best for Your Business in 2025
Infrassist Technologies Pvt. Ltd.
 
Down the Rabbit Hole – Solving 5 Training Roadblocks
Down the Rabbit Hole – Solving 5 Training Roadblocks
Rustici Software
 
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Agentic AI: Beyond the Buzz- LangGraph Studio V2
Shashikant Jagtap
 
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc Webinar - 2025 Global Privacy Survey
TrustArc
 
Mastering AI Workflows with FME - Peak of Data & AI 2025
Mastering AI Workflows with FME - Peak of Data & AI 2025
Safe Software
 
Your startup on AWS - How to architect and maintain a Lean and Mean account
Your startup on AWS - How to architect and maintain a Lean and Mean account
angelo60207
 
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
cnc-drilling-dowel-inserting-machine-drillteq-d-510-english.pdf
AmirStern2
 

HTML and CSS Basics

  • 2. What is HTML &CSS  HTML, HyperText Markup Language, gives content structure and meaning by defining that content as, for example, headings, paragraphs, or images. CSS, or Cascading Style Sheets, is a presentation language created to style the appearance of content—using, for example, fonts or colors.  The two languages—HTML and CSS—are independent of one another and should remain that way. CSS should not be written inside of an HTML document and vice versa. As a rule, HTML will always represent content, and CSS will always represent the appearance of that content.
  • 3. Common Terms  Elements – A designator that define the structure and content of objects within a page. Some of the more frequently used elements include multiple levels of headings (identified as <h1> through <h6> elements) and paragraphs (identified as the <p> element); the list goes on to include the <a>, <div>, <span>, <strong>, and <em> elements, and many more.
  • 4. Common Terms  Tags -The use of less-than and greater-than angle brackets surrounding an element creates what is known as a tag.Tags most commonly occur in pairs of opening and closing tags.The content that falls between the opening and closing tags is the content of that element. An anchor link, for example, will have an opening tag of <a> and a closing tag of </a>.What falls between these two tags will be the content of the anchor link.  OpeningTag - An opening tag marks the beginning of an element. It consists of a less-than sign followed by an element’s name, and then ends with a greater-than sign; for example, <div>.  ClosingTag - marks the end of an element. It consists of a less-than sign followed by a forward slash and the element’s name, and then ends with a greater-than sign; for example, </div>.
  • 5. Common Terms  Attributes - Properties used to provide additional information about an element.The most common attributes include the id attribute, which identifies an element; the class attribute, which classifies an element; the src attribute, which specifies a source for embeddable content; and the href attribute, which provides a hyperlink reference to a linked resource.  Attributes are defined within the opening tag, after an element’s name. Generally attributes include a name and a value.The format for these attributes consists of the attribute name followed by an equals sign and then a quoted attribute value.
  • 6. Demo  The preceding code will display the text “Meadows Resources” on the web page and will take users to http://meadowsresources.com/ upon clicking the “Meadows Resources” text.The anchor element is declared with the opening <a> and closing </a> tags encompassing the text, and the hyperlink reference attribute and value are declared with href="http://meadowsresources.com" in the opening tag.
  • 7. Demo <a href=“http://meadowsresources.com/>”Meadows Resources </a> Element Attribute Tag
  • 8. HTML Document Structure HTML documents are plain text documents saved with an .html file extension rather than a .txt file extension.To begin writing HTML, you first need a plain text editor that you are comfortable using. Sadly this does not include MicrosoftWord or Pages, as those are rich text editors.Two of the more popular plain text editors for writing HTML and CSS are Dreamweaver and SublimeText. Free alternatives also include Notepad++ forWindows andTextWrangler for Mac. All HTML documents have a required structure that includes the following declaration and elements: <!DOCTYPE html>, <html>, <head>, and <body>.
  • 9. HTML Document Structure The document type declaration, or <!DOCTYPE html>, informs web browsers which version of HTML is being used and is placed at the very beginning of the HTML document. Because we’ll be using the latest version of HTML, our document type declaration is simply <!DOCTYPE html>. Following the document type declaration, the <html> element signifies the beginning of the document.
  • 10. HTML Document Structure Inside the <html> element, the <head> element identifies the top of the document, including any metadata (accompanying information about the page).The content inside the <head> element is not displayed on the web page itself. Instead, it may include the document title (which is displayed on the title bar in the browser window), links to any external files, or any other beneficial metadata. All of the visible content within the web page will fall within the <body> element.
  • 11. HTML Document Structure The preceding code shows the document beginning with the document type declaration, <!DOCTYPE html>, followed directly by the <html> element. Inside the <html> element come the <head> and <body> elements.The <head> element includes the character encoding of the page via the <meta charset="utf-8"> tag and the title of the document via the <title> element.The <body> element includes a heading via the <h1> element and a paragraph via the <p> element. Because both the heading and paragraph are nested within the <body> element, they are visible on the web page.
  • 12. HTML Document Structure When an element is placed inside of another element, also known as nested, it is a good idea to indent that element to keep the document structure well organized and legible. In the previous code, both the <head> and <body> elements were nested—and indented—inside the <html> element.The pattern of indenting for elements continues as new elements are added inside the <head> and <body> elements.
  • 13. SelfClosing Elements In the previous example, the <meta> element had only one tag and didn’t include a closing tag. Fear not, this was intentional. Not all elements consist of opening and closing tags. Some elements simply receive their content or behavior from attributes within a single tag.The <meta> element is one of these elements.The content of the previous <meta> element is assigned with the use of the charset attribute and value. Other common self closing elements include: <br> <embed> <hr> <img> <input> <link> <meta> <param> <source> <wbr>
  • 14. ProTip The structure outlined here, making use of the <!DOCTYPE html> document type and <html>, <head>, and <body> elements, is quite common.We’ll want to keep this document structure handy, as we’ll be using it often as we create new HTML documents.
  • 15. Code Validation No matter how careful we are when writing our code, we will inevitably make mistakes.Thankfully, when writing HTML and CSS we have validators to check our work.TheW3C has built both HTML and CSS validators that will scan code for mistakes.Validating our code not only helps it render properly across all browsers, but also helps teach us the best practices for writing code.