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, cssPresentation on html, css
Presentation on html, css
Aamir Sohail
 
Class Intro / HTML Basics
Class Intro / HTML BasicsClass Intro / HTML Basics
Class Intro / HTML Basics
Shawn Calvert
 
HTML/CSS Lecture 1
HTML/CSS Lecture 1HTML/CSS Lecture 1
HTML/CSS Lecture 1
Lee Lundrigan
 
Hushang Gaikwad
Hushang GaikwadHushang Gaikwad
Hushang Gaikwad
Hushnag Gaikwad
 
Web Layout
Web LayoutWeb Layout
Web Layout
Shawn Calvert
 
HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2HTML Lecture Part 1 of 2
HTML Lecture Part 1 of 2
Sharon Wasden
 
Html and css presentation
Html and css presentationHtml and css presentation
Html and css presentation
umesh patil
 
Dynamic HTML (DHTML)
Dynamic HTML (DHTML)Dynamic HTML (DHTML)
Dynamic HTML (DHTML)
Himanshu Kumar
 
HTML CSS Basics
HTML CSS BasicsHTML CSS Basics
HTML CSS Basics
Mai Moustafa
 
HTML & CSS Masterclass
HTML & CSS MasterclassHTML & CSS Masterclass
HTML & CSS Masterclass
Bernardo Raposo
 
HTML CSS | Computer Science
HTML CSS | Computer ScienceHTML CSS | Computer Science
HTML CSS | Computer Science
Transweb Global Inc
 
Span and Div tags in HTML
Span and Div tags in HTMLSpan and Div tags in HTML
Span and Div tags in HTML
Biswadip Goswami
 
Introduction to HTML
Introduction to HTMLIntroduction to HTML
Introduction to HTML
Ajay Khatri
 
Week 2-intro-html
Week 2-intro-htmlWeek 2-intro-html
Week 2-intro-html
Shawn Calvert
 
Introduction of Html/css/js
Introduction of Html/css/jsIntroduction of Html/css/js
Introduction of Html/css/js
Knoldus Inc.
 
Images on the Web
Images on the WebImages 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...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 EmailHTML Email
HTML Email
Shawn Calvert
 
Dhtml ppt (2)
Dhtml ppt (2)Dhtml ppt (2)
Dhtml ppt (2)
Rai Saheb Bhanwar Singh College Nasrullaganj
 
CSS Foundations, pt 1
CSS Foundations, pt 1CSS Foundations, pt 1
CSS Foundations, pt 1
Shawn Calvert
 

Viewers also liked (8)

JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
jeresig
 
UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3
Shay Howe
 
J query introduction
J query introductionJ query introduction
J query introduction
SMS_VietNam
 
Javascript basic course
Javascript basic courseJavascript basic course
Javascript basic course
Tran Khoa
 
HTML basics
HTML basicsHTML basics
HTML basics
Akhil Kaushik
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 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 componentsModern Web UI - Web components
Modern Web UI - Web components
Mike North
 
Anatomy of a Progressive Web App
Anatomy of a Progressive Web AppAnatomy of a Progressive Web App
Anatomy of a Progressive Web App
Mike North
 
JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)JavaScript Libraries (Kings of Code)
JavaScript Libraries (Kings of Code)
jeresig
 
UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3UI Design with HTML5 & CSS3
UI Design with HTML5 & CSS3
Shay Howe
 
J query introduction
J query introductionJ query introduction
J query introduction
SMS_VietNam
 
Javascript basic course
Javascript basic courseJavascript 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 EventHTML5 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 componentsModern Web UI - Web components
Modern Web UI - Web components
Mike North
 
Anatomy of a Progressive Web App
Anatomy of a Progressive Web AppAnatomy 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.pptx2 INTRO TO HTML.pptx
2 INTRO TO HTML.pptx
CHEYSERCHARRESEGATCH1
 
html.pptx class notes to prepare html completly
html.pptx class notes to prepare html  completlyhtml.pptx class notes to prepare html  completly
html.pptx class notes to prepare html completly
mamathapragada
 
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
johnmngoya1
 
HTML Notes And Some Attributes
HTML Notes And Some AttributesHTML Notes And Some Attributes
HTML Notes And Some Attributes
HIFZUR RAHMAN
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
clement swarnappa
 
html (1) (1).pptx for all students to learn
html (1) (1).pptx for all students to learnhtml (1) (1).pptx for all students to learn
html (1) (1).pptx for all students to learn
aveshgopalJonnadula
 
Web Design & Development - Session 2
Web Design & Development - Session 2Web Design & Development - Session 2
Web Design & Development - Session 2
Shahrzad Peyman
 
Html (hypertext markup language)
Html (hypertext markup language)Html (hypertext markup language)
Html (hypertext markup language)
Resty Jay Galdo
 
Html and Css Student Education hub point.pptx
Html and Css Student Education hub point.pptxHtml and Css Student Education hub point.pptx
Html and Css Student Education hub point.pptx
AbenezerTefera2
 
Chapter-5.pptx introduction to HTML and CSS
Chapter-5.pptx introduction to HTML and CSSChapter-5.pptx introduction to HTML and CSS
Chapter-5.pptx introduction to HTML and CSS
jbmohamad54321
 
Week-1_PPT_WEBAPPS-done.pptx
Week-1_PPT_WEBAPPS-done.pptxWeek-1_PPT_WEBAPPS-done.pptx
Week-1_PPT_WEBAPPS-done.pptx
JuvyIlustrisimo
 
Tech Winter Break - GDG on Campus - PIET
Tech Winter Break - GDG on Campus - PIETTech Winter Break - GDG on Campus - PIET
Tech Winter Break - GDG on Campus - PIET
khushi15250705
 
Day1-HTML-CSS some basic css and html.pdf
Day1-HTML-CSS some basic css and html.pdfDay1-HTML-CSS some basic css and html.pdf
Day1-HTML-CSS some basic css and html.pdf
enasashri12
 
HTML & CSS.ppt
HTML & CSS.pptHTML & CSS.ppt
HTML & CSS.ppt
vaseemshaik21
 
Introduction to HTML.pptx
Introduction to HTML.pptxIntroduction to HTML.pptx
Introduction to HTML.pptx
VaibhavSingh887876
 
GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1
Heather Rock
 
Web development (html)
Web development (html)Web development (html)
Web development (html)
AliNaqvi131
 
Html
HtmlHtml
Html
Himanshu Singh
 
Html
HtmlHtml
Html
Himanshu Singh
 
Lesson A.1 - Introduction to Web Development.docx
Lesson A.1 - Introduction to Web Development.docxLesson A.1 - Introduction to Web Development.docx
Lesson A.1 - Introduction to Web Development.docx
MarlonMagtibay3
 
html.pptx class notes to prepare html completly
html.pptx class notes to prepare html  completlyhtml.pptx class notes to prepare html  completly
html.pptx class notes to prepare html completly
mamathapragada
 
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
WEBSITE DEVELOPMENT,HTML is the standard markup language for creating Web pag...
johnmngoya1
 
HTML Notes And Some Attributes
HTML Notes And Some AttributesHTML Notes And Some Attributes
HTML Notes And Some Attributes
HIFZUR RAHMAN
 
Web Concepts - an introduction - introduction
Web Concepts - an introduction - introductionWeb Concepts - an introduction - introduction
Web Concepts - an introduction - introduction
clement swarnappa
 
html (1) (1).pptx for all students to learn
html (1) (1).pptx for all students to learnhtml (1) (1).pptx for all students to learn
html (1) (1).pptx for all students to learn
aveshgopalJonnadula
 
Web Design & Development - Session 2
Web Design & Development - Session 2Web Design & Development - Session 2
Web Design & Development - Session 2
Shahrzad Peyman
 
Html (hypertext markup language)
Html (hypertext markup language)Html (hypertext markup language)
Html (hypertext markup language)
Resty Jay Galdo
 
Html and Css Student Education hub point.pptx
Html and Css Student Education hub point.pptxHtml and Css Student Education hub point.pptx
Html and Css Student Education hub point.pptx
AbenezerTefera2
 
Chapter-5.pptx introduction to HTML and CSS
Chapter-5.pptx introduction to HTML and CSSChapter-5.pptx introduction to HTML and CSS
Chapter-5.pptx introduction to HTML and CSS
jbmohamad54321
 
Week-1_PPT_WEBAPPS-done.pptx
Week-1_PPT_WEBAPPS-done.pptxWeek-1_PPT_WEBAPPS-done.pptx
Week-1_PPT_WEBAPPS-done.pptx
JuvyIlustrisimo
 
Tech Winter Break - GDG on Campus - PIET
Tech Winter Break - GDG on Campus - PIETTech Winter Break - GDG on Campus - PIET
Tech Winter Break - GDG on Campus - PIET
khushi15250705
 
Day1-HTML-CSS some basic css and html.pdf
Day1-HTML-CSS some basic css and html.pdfDay1-HTML-CSS some basic css and html.pdf
Day1-HTML-CSS some basic css and html.pdf
enasashri12
 
GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1GDI Seattle Intro to HTML and CSS - Class 1
GDI Seattle Intro to HTML and CSS - Class 1
Heather Rock
 
Web development (html)
Web development (html)Web development (html)
Web development (html)
AliNaqvi131
 
Lesson A.1 - Introduction to Web Development.docx
Lesson A.1 - Introduction to Web Development.docxLesson A.1 - Introduction to Web Development.docx
Lesson A.1 - Introduction to Web Development.docx
MarlonMagtibay3
 
Ad

Recently uploaded (20)

Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Dancing with AI - A Developer's Journey.pptx
Dancing with AI - A Developer's Journey.pptxDancing with AI - A Developer's Journey.pptx
Dancing with AI - A Developer's Journey.pptx
Elliott Richmond
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0
RodrigoMori7
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Data Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any ApplicationData Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any Application
Safe Software
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
How to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptxHow to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptx
Version 1 Analytics
 
“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...“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
 
Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...Bridging the divide: A conversation on tariffs today in the book industry - T...
Bridging the divide: A conversation on tariffs today in the book industry - T...
BookNet Canada
 
Domino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use CasesDomino IQ – What to Expect, First Steps and Use Cases
Domino IQ – What to Expect, First Steps and Use Cases
panagenda
 
Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.Introduction to Internet of things .ppt.
Introduction to Internet of things .ppt.
hok12341073
 
Dancing with AI - A Developer's Journey.pptx
Dancing with AI - A Developer's Journey.pptxDancing with AI - A Developer's Journey.pptx
Dancing with AI - A Developer's Journey.pptx
Elliott Richmond
 
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdfHow Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
How Advanced Environmental Detection Is Revolutionizing Oil & Gas Safety.pdf
Rejig Digital
 
FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0FCF- Getting Started in Cybersecurity 3.0
FCF- Getting Started in Cybersecurity 3.0
RodrigoMori7
 
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Integration of Utility Data into 3D BIM Models Using a 3D Solids Modeling Wor...
Safe Software
 
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
National Fuels Treatments Initiative: Building a Seamless Map of Hazardous Fu...
Safe Software
 
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | BluebashMCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
MCP vs A2A vs ACP: Choosing the Right Protocol | Bluebash
Bluebash
 
7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf7 Salesforce Data Cloud Best Practices.pdf
7 Salesforce Data Cloud Best Practices.pdf
Minuscule Technologies
 
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...Your startup on AWS - How to architect and maintain a Lean and Mean account J...
Your startup on AWS - How to architect and maintain a Lean and Mean account J...
angelo60207
 
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOMEstablish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Establish Visibility and Manage Risk in the Supply Chain with Anchore SBOM
Anchore
 
Data Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any ApplicationData Virtualization: Bringing the Power of FME to Any Application
Data Virtualization: Bringing the Power of FME to Any Application
Safe Software
 
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyesEnd-to-end Assurance for SD-WAN & SASE with ThousandEyes
End-to-end Assurance for SD-WAN & SASE with ThousandEyes
ThousandEyes
 
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to KnowWhat is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
What is Oracle EPM A Guide to Oracle EPM Cloud Everything You Need to Know
SMACT Works
 
Oracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI FoundationsOracle Cloud Infrastructure AI Foundations
Oracle Cloud Infrastructure AI Foundations
VICTOR MAESTRE RAMIREZ
 
DevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical PodcastDevOps in the Modern Era - Thoughtfully Critical Podcast
DevOps in the Modern Era - Thoughtfully Critical Podcast
Chris Wahl
 
Soulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate reviewSoulmaite review - Find Real AI soulmate review
Soulmaite review - Find Real AI soulmate review
Soulmaite
 
How to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptxHow to Detect Outliers in IBM SPSS Statistics.pptx
How to Detect Outliers in IBM SPSS Statistics.pptx
Version 1 Analytics
 
“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...“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
 

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.