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:

More Related Content

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

Web Development basics with WordPress
Web Development basics with WordPressWeb Development basics with WordPress
Web Development basics with WordPress
Rashna Maharjan
 
wd project.pptx
wd project.pptxwd project.pptx
wd project.pptx
dsffsdf1
 
Basic css
Basic cssBasic css
Basic css
Gopinath Ambothi
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
KADAMBARIPUROHIT
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
AliRaza899305
 
CSS
CSSCSS
CSS
Akila Iroshan
 
Learn html and css from scratch
Learn html and css from scratchLearn 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)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 javascriptWeb 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.pptxIntroduction to Web Technologies PPT.pptx
Introduction to Web Technologies PPT.pptx
Kunal Kalamkar
 
Introduction to HTML-CSS-Javascript.pdf
Introduction to HTML-CSS-Javascript.pdfIntroduction 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 ScriptAn 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 basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Web Information Systems Html and css
Web Information Systems Html and cssWeb 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 DevelopmentLab#1 - Front End Development
Lab#1 - Front End Development
Walid Ashraf
 
Introduction to Cascading Style Sheets .
Introduction to Cascading Style Sheets .Introduction to Cascading Style Sheets .
Introduction to Cascading Style Sheets .
monishedustu07
 
Web Design & Development - Session 2
Web Design & Development - Session 2Web Design & Development - Session 2
Web Design & Development - Session 2
Shahrzad Peyman
 
Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3Intro to HTML 5 / CSS 3
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Css intro
Css introCss intro
Css intro
Julia Vi
 
Web Development basics with WordPress
Web Development basics with WordPressWeb Development basics with WordPress
Web Development basics with WordPress
Rashna Maharjan
 
wd project.pptx
wd project.pptxwd project.pptx
wd project.pptx
dsffsdf1
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
KADAMBARIPUROHIT
 
Introduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptxIntroduction to HTML+CSS+Javascript.pptx
Introduction to HTML+CSS+Javascript.pptx
AliRaza899305
 
Learn html and css from scratch
Learn html and css from scratchLearn 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)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 javascriptWeb 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.pptxIntroduction to Web Technologies PPT.pptx
Introduction to Web Technologies PPT.pptx
Kunal Kalamkar
 
Introduction to HTML-CSS-Javascript.pdf
Introduction to HTML-CSS-Javascript.pdfIntroduction 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 ScriptAn 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 basicsIntro to HTML and CSS basics
Intro to HTML and CSS basics
Eliran Eliassy
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
Mario Hernandez
 
Lab#1 - Front End Development
Lab#1 - Front End DevelopmentLab#1 - Front End Development
Lab#1 - Front End Development
Walid Ashraf
 
Introduction to Cascading Style Sheets .
Introduction to Cascading Style Sheets .Introduction to Cascading Style Sheets .
Introduction to Cascading Style Sheets .
monishedustu07
 
Web Design & Development - Session 2
Web Design & Development - Session 2Web Design & Development - Session 2
Web Design & Development - Session 2
Shahrzad Peyman
 

More from compengwaelalahmar (20)

week1 computer architecture and design for
week1 computer architecture and design forweek1 computer architecture and design for
week1 computer architecture and design for
compengwaelalahmar
 
ITEC229_Chapter8_new.ppt computer architecture
ITEC229_Chapter8_new.ppt computer architectureITEC229_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 desilec11_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 forilet109_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 webIntroduction 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 w8.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 webHTML 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 gHTML 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 computrsoftware architecturev2.pptx cop computr
software architecturev2.pptx cop computr
compengwaelalahmar
 
lec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.pptlec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.ppt
compengwaelalahmar
 
lecture-11-1590405846 computer architect
lecture-11-1590405846 computer architectlecture-11-1590405846 computer architect
lecture-11-1590405846 computer architect
compengwaelalahmar
 
Compiler to compiler whatsypechecking.PPT
Compiler to compiler whatsypechecking.PPTCompiler 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 comD-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.pptCamtasia 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 ll1LR_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 cpplec00-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 cppA-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 cppCS540-2-lecture1.pptgvcxc increment cpp cpp
CS540-2-lecture1.pptgvcxc increment cpp cpp
compengwaelalahmar
 
1587076798CAES you learn here here ARON.pptx
1587076798CAES you learn here here ARON.pptx1587076798CAES you learn here here ARON.pptx
1587076798CAES you learn here here ARON.pptx
compengwaelalahmar
 
Monitoring_2019_Validator how mointering
Monitoring_2019_Validator how mointeringMonitoring_2019_Validator how mointering
Monitoring_2019_Validator how mointering
compengwaelalahmar
 
week1 computer architecture and design for
week1 computer architecture and design forweek1 computer architecture and design for
week1 computer architecture and design for
compengwaelalahmar
 
ITEC229_Chapter8_new.ppt computer architecture
ITEC229_Chapter8_new.ppt computer architectureITEC229_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 desilec11_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 forilet109_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 webIntroduction 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 w8.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 webHTML 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 gHTML 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 computrsoftware architecturev2.pptx cop computr
software architecturev2.pptx cop computr
compengwaelalahmar
 
lec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.pptlec01_intr architecture com computeo.ppt
lec01_intr architecture com computeo.ppt
compengwaelalahmar
 
lecture-11-1590405846 computer architect
lecture-11-1590405846 computer architectlecture-11-1590405846 computer architect
lecture-11-1590405846 computer architect
compengwaelalahmar
 
Compiler to compiler whatsypechecking.PPT
Compiler to compiler whatsypechecking.PPTCompiler 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 comD-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.pptCamtasia 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 ll1LR_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 cpplec00-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 cppA-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 cppCS540-2-lecture1.pptgvcxc increment cpp cpp
CS540-2-lecture1.pptgvcxc increment cpp cpp
compengwaelalahmar
 
1587076798CAES you learn here here ARON.pptx
1587076798CAES you learn here here ARON.pptx1587076798CAES you learn here here ARON.pptx
1587076798CAES you learn here here ARON.pptx
compengwaelalahmar
 
Monitoring_2019_Validator how mointering
Monitoring_2019_Validator how mointeringMonitoring_2019_Validator how mointering
Monitoring_2019_Validator how mointering
compengwaelalahmar
 
Ad

Recently uploaded (20)

LDMMIA Reiki Yoga S8 Free Workshop Grad Level
LDMMIA Reiki Yoga S8 Free Workshop Grad LevelLDMMIA Reiki Yoga S8 Free Workshop Grad Level
LDMMIA Reiki Yoga S8 Free Workshop Grad Level
LDM & Mia eStudios
 
How to Manage Maintenance Request in Odoo 18
How to Manage Maintenance Request in Odoo 18How to Manage Maintenance Request in Odoo 18
How to Manage Maintenance Request in Odoo 18
Celine George
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
Strengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptxStrengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptx
SteffMusniQuiballo
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
Fatman Book HD Pdf by aayush songare.pdf
Fatman Book  HD Pdf by aayush songare.pdfFatman Book  HD Pdf by aayush songare.pdf
Fatman Book HD Pdf by aayush songare.pdf
Aayush Songare
 
LDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad UpdatesLDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad Updates
LDM & Mia eStudios
 
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
GeorgeDiamandis11
 
EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025
EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025
EUPHORIA GENERAL QUIZ FINALS | QUIZ CLUB OF PSGCAS | 21 MARCH 2025
Quiz Club of PSG College of Arts & Science
 
Black and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdfBlack and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdf
AnnasofiaUrsini
 
SEXUALITY , UNWANTED PREGANCY AND SEXUAL ASSAULT .pptx
SEXUALITY , UNWANTED PREGANCY AND SEXUAL ASSAULT .pptxSEXUALITY , UNWANTED PREGANCY AND SEXUAL ASSAULT .pptx
SEXUALITY , UNWANTED PREGANCY AND SEXUAL ASSAULT .pptx
PoojaSen20
 
Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.
jmansha170
 
Parenting Teens: Supporting Trust, resilience and independence
Parenting Teens: Supporting Trust, resilience and independenceParenting Teens: Supporting Trust, resilience and independence
Parenting Teens: Supporting Trust, resilience and independence
Pooky Knightsmith
 
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptxAnalysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Shrutidhara2
 
Nice Dream.pdf /
Nice Dream.pdf                              /Nice Dream.pdf                              /
Nice Dream.pdf /
ErinUsher3
 
How to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRMHow to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRM
Celine George
 
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptxDiptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Arshad Shaikh
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx
Arshad Shaikh
 
Hemiptera & Neuroptera: Insect Diversity.pptx
Hemiptera & Neuroptera: Insect Diversity.pptxHemiptera & Neuroptera: Insect Diversity.pptx
Hemiptera & Neuroptera: Insect Diversity.pptx
Arshad Shaikh
 
LDMMIA Reiki Yoga S8 Free Workshop Grad Level
LDMMIA Reiki Yoga S8 Free Workshop Grad LevelLDMMIA Reiki Yoga S8 Free Workshop Grad Level
LDMMIA Reiki Yoga S8 Free Workshop Grad Level
LDM & Mia eStudios
 
How to Manage Maintenance Request in Odoo 18
How to Manage Maintenance Request in Odoo 18How to Manage Maintenance Request in Odoo 18
How to Manage Maintenance Request in Odoo 18
Celine George
 
Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...Stewart Butler - OECD - How to design and deliver higher technical education ...
Stewart Butler - OECD - How to design and deliver higher technical education ...
EduSkills OECD
 
Strengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptxStrengthened Senior High School - Landas Tool Kit.pptx
Strengthened Senior High School - Landas Tool Kit.pptx
SteffMusniQuiballo
 
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
THERAPEUTIC COMMUNICATION included definition, characteristics, nurse patient...
parmarjuli1412
 
Fatman Book HD Pdf by aayush songare.pdf
Fatman Book  HD Pdf by aayush songare.pdfFatman Book  HD Pdf by aayush songare.pdf
Fatman Book HD Pdf by aayush songare.pdf
Aayush Songare
 
LDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad UpdatesLDMMIA Reiki Yoga Next Week Grad Updates
LDMMIA Reiki Yoga Next Week Grad Updates
LDM & Mia eStudios
 
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
Module 4 Presentation - Enhancing Competencies and Engagement Strategies in Y...
GeorgeDiamandis11
 
Black and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdfBlack and White Illustrative Group Project Presentation.pdf (1).pdf
Black and White Illustrative Group Project Presentation.pdf (1).pdf
AnnasofiaUrsini
 
SEXUALITY , UNWANTED PREGANCY AND SEXUAL ASSAULT .pptx
SEXUALITY , UNWANTED PREGANCY AND SEXUAL ASSAULT .pptxSEXUALITY , UNWANTED PREGANCY AND SEXUAL ASSAULT .pptx
SEXUALITY , UNWANTED PREGANCY AND SEXUAL ASSAULT .pptx
PoojaSen20
 
Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.Artificial intelligence Presented by JM.
Artificial intelligence Presented by JM.
jmansha170
 
Parenting Teens: Supporting Trust, resilience and independence
Parenting Teens: Supporting Trust, resilience and independenceParenting Teens: Supporting Trust, resilience and independence
Parenting Teens: Supporting Trust, resilience and independence
Pooky Knightsmith
 
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptxAnalysis of Quantitative Data Parametric and non-parametric tests.pptx
Analysis of Quantitative Data Parametric and non-parametric tests.pptx
Shrutidhara2
 
Nice Dream.pdf /
Nice Dream.pdf                              /Nice Dream.pdf                              /
Nice Dream.pdf /
ErinUsher3
 
How to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRMHow to Create a Stage or a Pipeline in Odoo 18 CRM
How to Create a Stage or a Pipeline in Odoo 18 CRM
Celine George
 
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptxDiptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Diptera: The Two-Winged Wonders, The Fly Squad: Order Diptera.pptx
Arshad Shaikh
 
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_HyderabadWebcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Webcrawler_Mule_AIChain_MuleSoft_Meetup_Hyderabad
Veera Pallapu
 
"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx"Hymenoptera: A Diverse and Fascinating Order".pptx
"Hymenoptera: A Diverse and Fascinating Order".pptx
Arshad Shaikh
 
Hemiptera & Neuroptera: Insect Diversity.pptx
Hemiptera & Neuroptera: Insect Diversity.pptxHemiptera & Neuroptera: Insect Diversity.pptx
Hemiptera & Neuroptera: Insect Diversity.pptx
Arshad Shaikh
 
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“