SlideShare a Scribd company logo
HTML & CSS
Jan Janoušek
Sources
• HTML:
• http://htmldog.com/reference/htmltags/
• http://www.w3schools.com/tags/
• http://www.w3.org/TR/html5/
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element
• …
• CSS:
• http://www.w3schools.com/css/default.asp
• http://www.w3schools.com/cssref/
• https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
• http://tympanus.net/codrops/css_reference/
• …
Structural tags
• html
• head
• body
• div
• span
Meta Information
• DOCTYPE
• title
• link
• meta
• style
Text formating
• p - paragraph
• h1, h2, h3, h4, h5, and h6 - heading
• strong / b – strong / bold
• em / i – emphasis/italic
• blockquote
• cite
• code
• pre – preformatted text
• br - line break
• hr - horizontal rule
• sub, sup – subscript/superscript
• …
Links and images
• a
• href – hrypertext reference
• target (_blank, _self, _top, _parent)
• rel (nofollow, noreferrer, help, alternate, etc.)
• …
• img - image
• src - source
• alt – alternative text
• width
• height
• …
Lists
• ul – unondered list
• ol – ordered list
• li – list item
• dl – description list
• dt – defines term
• dd – defines description
Tables
• table
• tr – table row
• td – table data cell
• rospan, colspan
• th – table header cell
• tbody – table body
• thead – table head
• tfoot – table footer
• caption
• …
Forms
• Form
• action, method, enctype
• input
• type, name
• textarea
• select
• option
• optgroup
• button
• label
• for
• fieldset
• …
Scripts & Styles
• script
• src
• type
• <script type="text/javascript" src="somescript.js"></script>
• <script type="text/javascript">…</script>
• style
• type
• <style type="text/css">…</style>
• link
• href
• rel – relationship
• type
• <link rel="stylesheet" type="text/css" href="default.css" />
CSS
• In-line
• Internal
• External
Selectors
• Patterns used to select the element(s) you want to style
• Element type – div, p, span, ….
• HTML attributes – ID (#_ _ _), class (._ _ _)
• Attribute selectors – [attr], [attr=value], [attr^=value], …
• Universal selectors - *
• Pseudo classes - :hover, :link, :focus, …
• Combinators
• div p - descendant
• div > p - child
• input + p - adjacent sibling
• input ~ span - general sibling
• More in CSS3
Properties
• color
• background-color
• border
• font-size
• float
• position
• width / height
• padding
• margin
• …. many others
Values
• Size
• px
• %
• em
• ex
• pt
• vh, vw
• pc, cm, mm, in.
• Color
• #ff0000
• #f00
• red
• rgb(255,0,0)
• rgb(100%,0%,0%)
• rgba(255, 255, 255, 0.5)
Developer tools – „F12 tools“
https://www.codecademy.com/en/tracks/web
Task of the day
go throught tutorial:
Ad

Recommended

GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
GDG On Campus NBNSCOE Web Workshop Day 1 : HTML & CSS
udaymore742
 
Introduction to Web Development.pptx
Introduction to Web Development.pptx
GDSCVJTI
 
Introduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Introduction to Web Development.pptx
Introduction to Web Development.pptx
Alisha Kamat
 
Workshop 2 Slides.pptx
Workshop 2 Slides.pptx
DaniyalSardar
 
gdg Introduction to HTML-CSS-Javascript.pptx
gdg Introduction to HTML-CSS-Javascript.pptx
saurabh45tiwari
 
Introduction to HTML-CSS-Javascript.pptx
Introduction to HTML-CSS-Javascript.pptx
deepak37877
 
Web development basics (Part-1)
Web development basics (Part-1)
Rajat Pratap Singh
 
Web Development basics with WordPress
Web Development basics with WordPress
Rashna Maharjan
 
wd project.pptx
wd project.pptx
dsffsdf1
 
Basic css
Basic css
Gopinath Ambothi
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
KADAMBARIPUROHIT
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
AliRaza899305
 
CSS
CSS
Akila Iroshan
 
Learn html and css from scratch
Learn html and css from scratch
Mohd Manzoor Ahmed
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
Introduction to Web Technologies PPT.pptx
Introduction to Web Technologies PPT.pptx
Kunal Kalamkar
 
Introduction to HTML-CSS-Javascript.pdf
Introduction to HTML-CSS-Javascript.pdf
DakshPratapSingh1
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Intro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Introduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Web Information Systems Html and css
Web Information Systems Html and css
Artificial Intelligence Institute at UofSC
 
Lab#1 - Front End Development
Lab#1 - Front End Development
Walid Ashraf
 
Introduction to Cascading Style Sheets .
Introduction to Cascading Style Sheets .
monishedustu07
 
Web Design & Development - Session 2
Web Design & Development - Session 2
Shahrzad Peyman
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Css intro
Css intro
Julia Vi
 
hne human computer of eork sicew das.ppt
hne human computer of eork sicew das.ppt
compengwaelalahmar
 
bxe vary very signed computer se sad.ppt
bxe vary very signed computer se sad.ppt
compengwaelalahmar
 

More Related Content

Similar to HTML-CSS.pptx computer architect design v (20)

Web Development basics with WordPress
Web Development basics with WordPress
Rashna Maharjan
 
wd project.pptx
wd project.pptx
dsffsdf1
 
Basic css
Basic css
Gopinath Ambothi
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
KADAMBARIPUROHIT
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
AliRaza899305
 
CSS
CSS
Akila Iroshan
 
Learn html and css from scratch
Learn html and css from scratch
Mohd Manzoor Ahmed
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
Introduction to Web Technologies PPT.pptx
Introduction to Web Technologies PPT.pptx
Kunal Kalamkar
 
Introduction to HTML-CSS-Javascript.pdf
Introduction to HTML-CSS-Javascript.pdf
DakshPratapSingh1
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Intro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Introduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Web Information Systems Html and css
Web Information Systems Html and css
Artificial Intelligence Institute at UofSC
 
Lab#1 - Front End Development
Lab#1 - Front End Development
Walid Ashraf
 
Introduction to Cascading Style Sheets .
Introduction to Cascading Style Sheets .
monishedustu07
 
Web Design & Development - Session 2
Web Design & Development - Session 2
Shahrzad Peyman
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Css intro
Css intro
Julia Vi
 
Web Development basics with WordPress
Web Development basics with WordPress
Rashna Maharjan
 
wd project.pptx
wd project.pptx
dsffsdf1
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
KADAMBARIPUROHIT
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
AliRaza899305
 
Learn html and css from scratch
Learn html and css from scratch
Mohd Manzoor Ahmed
 
Code &amp; design your first website (3:16)
Code &amp; design your first website (3:16)
Thinkful
 
Web front end development introduction to html css and javascript
Web front end development introduction to html css and javascript
Marc Huang
 
Introduction to Web Technologies PPT.pptx
Introduction to Web Technologies PPT.pptx
Kunal Kalamkar
 
Introduction to HTML-CSS-Javascript.pdf
Introduction to HTML-CSS-Javascript.pdf
DakshPratapSingh1
 
An Overview of HTML, CSS & Java Script
An Overview of HTML, CSS & Java Script
Fahim Abdullah
 
Intro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Introduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Lab#1 - Front End Development
Lab#1 - Front End Development
Walid Ashraf
 
Introduction to Cascading Style Sheets .
Introduction to Cascading Style Sheets .
monishedustu07
 
Web Design & Development - Session 2
Web Design & Development - Session 2
Shahrzad Peyman
 

More from compengwaelalahmar (20)

hne human computer of eork sicew das.ppt
hne human computer of eork sicew das.ppt
compengwaelalahmar
 
bxe vary very signed computer se sad.ppt
bxe vary very signed computer se sad.ppt
compengwaelalahmar
 
week1 computer architecture and design for
week1 computer architecture and design for
compengwaelalahmar
 
ITEC229_Chapter8_new.ppt computer architecture
ITEC229_Chapter8_new.ppt computer architecture
compengwaelalahmar
 
lec11_CSS.pptx web page description desi
lec11_CSS.pptx web page description desi
compengwaelalahmar
 
ilet109_2.pptx web designer web page for
ilet109_2.pptx web designer web page for
compengwaelalahmar
 
Introduction to CSS.pptx web for web web
Introduction to CSS.pptx web for web web
compengwaelalahmar
 
8.haft design web designer web for web w
8.haft design web designer web for web w
compengwaelalahmar
 
HTML 3 - Stiller for December design web
HTML 3 - Stiller for December design web
compengwaelalahmar
 
HTML 1 - Girf desigcomp web design web g
HTML 1 - Girf desigcomp web design web g
compengwaelalahmar
 
software architecturev2.pptx cop computr
software architecturev2.pptx cop computr
compengwaelalahmar
 
lec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.ppt
compengwaelalahmar
 
lecture-11-1590405846 computer architect
lecture-11-1590405846 computer architect
compengwaelalahmar
 
Compiler to compiler whatsypechecking.PPT
Compiler to compiler whatsypechecking.PPT
compengwaelalahmar
 
D-lr-parsing compiler how to compiler com
D-lr-parsing compiler how to compiler com
compengwaelalahmar
 
Camtasia Getting Started Guide how to design.ppt
Camtasia Getting Started Guide how to design.ppt
compengwaelalahmar
 
LR_Parser compiler how to compiler lr1 ll1
LR_Parser compiler how to compiler lr1 ll1
compengwaelalahmar
 
lec00-outline.PPT cpp compiler how to cpp
lec00-outline.PPT cpp compiler how to cpp
compengwaelalahmar
 
A-overview.pptbb cpp introduction how cpp
A-overview.pptbb cpp introduction how cpp
compengwaelalahmar
 
CS540-2-lecture1.pptgvcxc increment cpp cpp
CS540-2-lecture1.pptgvcxc increment cpp cpp
compengwaelalahmar
 
hne human computer of eork sicew das.ppt
hne human computer of eork sicew das.ppt
compengwaelalahmar
 
bxe vary very signed computer se sad.ppt
bxe vary very signed computer se sad.ppt
compengwaelalahmar
 
week1 computer architecture and design for
week1 computer architecture and design for
compengwaelalahmar
 
ITEC229_Chapter8_new.ppt computer architecture
ITEC229_Chapter8_new.ppt computer architecture
compengwaelalahmar
 
lec11_CSS.pptx web page description desi
lec11_CSS.pptx web page description desi
compengwaelalahmar
 
ilet109_2.pptx web designer web page for
ilet109_2.pptx web designer web page for
compengwaelalahmar
 
Introduction to CSS.pptx web for web web
Introduction to CSS.pptx web for web web
compengwaelalahmar
 
8.haft design web designer web for web w
8.haft design web designer web for web w
compengwaelalahmar
 
HTML 3 - Stiller for December design web
HTML 3 - Stiller for December design web
compengwaelalahmar
 
HTML 1 - Girf desigcomp web design web g
HTML 1 - Girf desigcomp web design web g
compengwaelalahmar
 
software architecturev2.pptx cop computr
software architecturev2.pptx cop computr
compengwaelalahmar
 
lec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.ppt
compengwaelalahmar
 
lecture-11-1590405846 computer architect
lecture-11-1590405846 computer architect
compengwaelalahmar
 
Compiler to compiler whatsypechecking.PPT
Compiler to compiler whatsypechecking.PPT
compengwaelalahmar
 
D-lr-parsing compiler how to compiler com
D-lr-parsing compiler how to compiler com
compengwaelalahmar
 
Camtasia Getting Started Guide how to design.ppt
Camtasia Getting Started Guide how to design.ppt
compengwaelalahmar
 
LR_Parser compiler how to compiler lr1 ll1
LR_Parser compiler how to compiler lr1 ll1
compengwaelalahmar
 
lec00-outline.PPT cpp compiler how to cpp
lec00-outline.PPT cpp compiler how to cpp
compengwaelalahmar
 
A-overview.pptbb cpp introduction how cpp
A-overview.pptbb cpp introduction how cpp
compengwaelalahmar
 
CS540-2-lecture1.pptgvcxc increment cpp cpp
CS540-2-lecture1.pptgvcxc increment cpp cpp
compengwaelalahmar
 
Ad

Recently uploaded (20)

Publishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke Warner
Brooke Warner
 
BINARY files CSV files JSON files with example.pptx
BINARY files CSV files JSON files with example.pptx
Ramakrishna Reddy Bijjam
 
2025 June Year 9 Presentation: Subject selection.pptx
2025 June Year 9 Presentation: Subject selection.pptx
mansk2
 
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Rajdeep Bavaliya
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
Overview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo Slides
Celine George
 
FIRST DAY HIGH orientation for mapeh subject in grade 10.pptx
FIRST DAY HIGH orientation for mapeh subject in grade 10.pptx
GlysdiEelesor1
 
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Restu Bias Primandhika
 
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
ChristinaFortunova
 
BUSINESS QUIZ PRELIMS | QUIZ CLUB OF PSGCAS | 9 SEPTEMBER 2024
BUSINESS QUIZ PRELIMS | QUIZ CLUB OF PSGCAS | 9 SEPTEMBER 2024
Quiz Club of PSG College of Arts & Science
 
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
Sourav Kr Podder
 
Wax Moon, Richmond, VA. Terrence McPherson
Wax Moon, Richmond, VA. Terrence McPherson
TerrenceMcPherson1
 
Sustainable Innovation with Immersive Learning
Sustainable Innovation with Immersive Learning
Leonel Morgado
 
What are the benefits that dance brings?
What are the benefits that dance brings?
memi27
 
Capitol Doctoral Presentation -June 2025.pptx
Capitol Doctoral Presentation -June 2025.pptx
CapitolTechU
 
Measuring, learning and applying multiplication facts.
Measuring, learning and applying multiplication facts.
cgilmore6
 
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Pragya - UEM Kolkata Quiz Club
 
Exploring Ocean Floor Features for Middle School
Exploring Ocean Floor Features for Middle School
Marie
 
The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
How to Manage Multi Language for Invoice in Odoo 18
How to Manage Multi Language for Invoice in Odoo 18
Celine George
 
Publishing Your Memoir with Brooke Warner
Publishing Your Memoir with Brooke Warner
Brooke Warner
 
BINARY files CSV files JSON files with example.pptx
BINARY files CSV files JSON files with example.pptx
Ramakrishna Reddy Bijjam
 
2025 June Year 9 Presentation: Subject selection.pptx
2025 June Year 9 Presentation: Subject selection.pptx
mansk2
 
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Paper 109 | Archetypal Journeys in ‘Interstellar’: Exploring Universal Themes...
Rajdeep Bavaliya
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
Overview of Employee in Odoo 18 - Odoo Slides
Overview of Employee in Odoo 18 - Odoo Slides
Celine George
 
FIRST DAY HIGH orientation for mapeh subject in grade 10.pptx
FIRST DAY HIGH orientation for mapeh subject in grade 10.pptx
GlysdiEelesor1
 
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Basic English for Communication - Dr Hj Euis Eti Rohaeti Mpd
Restu Bias Primandhika
 
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
FEBA Sofia Univercity final diplian v3 GSDG 5.2025.pdf
ChristinaFortunova
 
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
SPENT QUIZ NQL JR FEST 5.0 BY SOURAV.pptx
Sourav Kr Podder
 
Wax Moon, Richmond, VA. Terrence McPherson
Wax Moon, Richmond, VA. Terrence McPherson
TerrenceMcPherson1
 
Sustainable Innovation with Immersive Learning
Sustainable Innovation with Immersive Learning
Leonel Morgado
 
What are the benefits that dance brings?
What are the benefits that dance brings?
memi27
 
Capitol Doctoral Presentation -June 2025.pptx
Capitol Doctoral Presentation -June 2025.pptx
CapitolTechU
 
Measuring, learning and applying multiplication facts.
Measuring, learning and applying multiplication facts.
cgilmore6
 
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Battle of Bookworms 2025 - U25 Literature Quiz by Pragya
Pragya - UEM Kolkata Quiz Club
 
Exploring Ocean Floor Features for Middle School
Exploring Ocean Floor Features for Middle School
Marie
 
The Man In The Back – Exceptional Delaware.pdf
The Man In The Back – Exceptional Delaware.pdf
dennisongomezk
 
How to Manage Multi Language for Invoice in Odoo 18
How to Manage Multi Language for Invoice in Odoo 18
Celine George
 
Ad

HTML-CSS.pptx computer architect design v

  • 1. HTML & CSS Jan Janoušek
  • 2. Sources • HTML: • http://htmldog.com/reference/htmltags/ • http://www.w3schools.com/tags/ • http://www.w3.org/TR/html5/ • https://developer.mozilla.org/en-US/docs/Web/HTML/Element • … • CSS: • http://www.w3schools.com/css/default.asp • http://www.w3schools.com/cssref/ • https://developer.mozilla.org/en-US/docs/Web/CSS/Reference • http://tympanus.net/codrops/css_reference/ • …
  • 3. Structural tags • html • head • body • div • span
  • 4. Meta Information • DOCTYPE • title • link • meta • style
  • 5. Text formating • p - paragraph • h1, h2, h3, h4, h5, and h6 - heading • strong / b – strong / bold • em / i – emphasis/italic • blockquote • cite • code • pre – preformatted text • br - line break • hr - horizontal rule • sub, sup – subscript/superscript • …
  • 6. Links and images • a • href – hrypertext reference • target (_blank, _self, _top, _parent) • rel (nofollow, noreferrer, help, alternate, etc.) • … • img - image • src - source • alt – alternative text • width • height • …
  • 7. Lists • ul – unondered list • ol – ordered list • li – list item • dl – description list • dt – defines term • dd – defines description
  • 8. Tables • table • tr – table row • td – table data cell • rospan, colspan • th – table header cell • tbody – table body • thead – table head • tfoot – table footer • caption • …
  • 9. Forms • Form • action, method, enctype • input • type, name • textarea • select • option • optgroup • button • label • for • fieldset • …
  • 10. Scripts & Styles • script • src • type • <script type="text/javascript" src="somescript.js"></script> • <script type="text/javascript">…</script> • style • type • <style type="text/css">…</style> • link • href • rel – relationship • type • <link rel="stylesheet" type="text/css" href="default.css" />
  • 12. Selectors • Patterns used to select the element(s) you want to style • Element type – div, p, span, …. • HTML attributes – ID (#_ _ _), class (._ _ _) • Attribute selectors – [attr], [attr=value], [attr^=value], … • Universal selectors - * • Pseudo classes - :hover, :link, :focus, … • Combinators • div p - descendant • div > p - child • input + p - adjacent sibling • input ~ span - general sibling • More in CSS3
  • 13. Properties • color • background-color • border • font-size • float • position • width / height • padding • margin • …. many others
  • 14. Values • Size • px • % • em • ex • pt • vh, vw • pc, cm, mm, in. • Color • #ff0000 • #f00 • red • rgb(255,0,0) • rgb(100%,0%,0%) • rgba(255, 255, 255, 0.5)
  • 15. Developer tools – „F12 tools“