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)

IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
Rose Cultivation Practices by Kushal Lamichhane.pdf
Rose Cultivation Practices by Kushal Lamichhane.pdfRose Cultivation Practices by Kushal Lamichhane.pdf
Rose Cultivation Practices by Kushal Lamichhane.pdf
kushallamichhame
 
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGYHUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
DHARMENDRA SAHU
 
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
 
How to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time OffHow to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time Off
Celine George
 
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
 
How to Manage Allocations in Odoo 18 Time Off
How to Manage Allocations in Odoo 18 Time OffHow to Manage Allocations in Odoo 18 Time Off
How to Manage Allocations in Odoo 18 Time Off
Celine George
 
THE CHURCH AND ITS IMPACT: FOSTERING CHRISTIAN EDUCATION
THE CHURCH AND ITS IMPACT: FOSTERING CHRISTIAN EDUCATIONTHE CHURCH AND ITS IMPACT: FOSTERING CHRISTIAN EDUCATION
THE CHURCH AND ITS IMPACT: FOSTERING CHRISTIAN EDUCATION
PROF. PAUL ALLIEU KAMARA
 
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
 
Dashboard Overview in Odoo 18 - Odoo Slides
Dashboard Overview in Odoo 18 - Odoo SlidesDashboard Overview in Odoo 18 - Odoo Slides
Dashboard Overview in Odoo 18 - Odoo Slides
Celine George
 
SEM II 3202 STRUCTURAL MECHANICS, B ARCH, REGULATION 2021, ANNA UNIVERSITY, R...
SEM II 3202 STRUCTURAL MECHANICS, B ARCH, REGULATION 2021, ANNA UNIVERSITY, R...SEM II 3202 STRUCTURAL MECHANICS, B ARCH, REGULATION 2021, ANNA UNIVERSITY, R...
SEM II 3202 STRUCTURAL MECHANICS, B ARCH, REGULATION 2021, ANNA UNIVERSITY, R...
RVSPSOA
 
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
 
AR3201 WORLD ARCHITECTURE AND URBANISM EARLY CIVILISATIONS TO RENAISSANCE QUE...
AR3201 WORLD ARCHITECTURE AND URBANISM EARLY CIVILISATIONS TO RENAISSANCE QUE...AR3201 WORLD ARCHITECTURE AND URBANISM EARLY CIVILISATIONS TO RENAISSANCE QUE...
AR3201 WORLD ARCHITECTURE AND URBANISM EARLY CIVILISATIONS TO RENAISSANCE QUE...
Mani Sasidharan
 
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
EduSkills OECD
 
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based EducatorDiana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda
 
LDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-inLDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-in
LDM & Mia eStudios
 
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptxRai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Rai dyansty Chach or Brahamn dynasty, History of Dahir History of Sindh NEP.pptx
Dr. Ravi Shankar Arya Mahila P. G. College, Banaras Hindu University, Varanasi, India.
 
A Brief Introduction About Jack Lutkus
A Brief Introduction About  Jack  LutkusA Brief Introduction About  Jack  Lutkus
A Brief Introduction About Jack Lutkus
Jack Lutkus
 
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
 
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdfForestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
ChalaKelbessa
 
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
IDSP(INTEGRATED DISEASE SURVEILLANCE PROGRAMME...
SweetytamannaMohapat
 
Rose Cultivation Practices by Kushal Lamichhane.pdf
Rose Cultivation Practices by Kushal Lamichhane.pdfRose Cultivation Practices by Kushal Lamichhane.pdf
Rose Cultivation Practices by Kushal Lamichhane.pdf
kushallamichhame
 
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGYHUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
HUMAN SKELETAL SYSTEM ANATAMY AND PHYSIOLOGY
DHARMENDRA SAHU
 
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
 
How to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time OffHow to Create Time Off Request in Odoo 18 Time Off
How to Create Time Off Request in Odoo 18 Time Off
Celine George
 
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
 
How to Manage Allocations in Odoo 18 Time Off
How to Manage Allocations in Odoo 18 Time OffHow to Manage Allocations in Odoo 18 Time Off
How to Manage Allocations in Odoo 18 Time Off
Celine George
 
THE CHURCH AND ITS IMPACT: FOSTERING CHRISTIAN EDUCATION
THE CHURCH AND ITS IMPACT: FOSTERING CHRISTIAN EDUCATIONTHE CHURCH AND ITS IMPACT: FOSTERING CHRISTIAN EDUCATION
THE CHURCH AND ITS IMPACT: FOSTERING CHRISTIAN EDUCATION
PROF. PAUL ALLIEU KAMARA
 
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
 
Dashboard Overview in Odoo 18 - Odoo Slides
Dashboard Overview in Odoo 18 - Odoo SlidesDashboard Overview in Odoo 18 - Odoo Slides
Dashboard Overview in Odoo 18 - Odoo Slides
Celine George
 
SEM II 3202 STRUCTURAL MECHANICS, B ARCH, REGULATION 2021, ANNA UNIVERSITY, R...
SEM II 3202 STRUCTURAL MECHANICS, B ARCH, REGULATION 2021, ANNA UNIVERSITY, R...SEM II 3202 STRUCTURAL MECHANICS, B ARCH, REGULATION 2021, ANNA UNIVERSITY, R...
SEM II 3202 STRUCTURAL MECHANICS, B ARCH, REGULATION 2021, ANNA UNIVERSITY, R...
RVSPSOA
 
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
 
AR3201 WORLD ARCHITECTURE AND URBANISM EARLY CIVILISATIONS TO RENAISSANCE QUE...
AR3201 WORLD ARCHITECTURE AND URBANISM EARLY CIVILISATIONS TO RENAISSANCE QUE...AR3201 WORLD ARCHITECTURE AND URBANISM EARLY CIVILISATIONS TO RENAISSANCE QUE...
AR3201 WORLD ARCHITECTURE AND URBANISM EARLY CIVILISATIONS TO RENAISSANCE QUE...
Mani Sasidharan
 
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
Trends Spotting Strategic foresight for tomorrow’s education systems - Debora...
EduSkills OECD
 
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based EducatorDiana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda - A Wauconda-Based Educator
Diana Enriquez Wauconda
 
LDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-inLDMMIA Bonus GUEST GRAD Student Check-in
LDMMIA Bonus GUEST GRAD Student Check-in
LDM & Mia eStudios
 
A Brief Introduction About Jack Lutkus
A Brief Introduction About  Jack  LutkusA Brief Introduction About  Jack  Lutkus
A Brief Introduction About Jack Lutkus
Jack Lutkus
 
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
 
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdfForestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
Forestry Model Exit Exam_2025_Wollega University, Gimbi Campus.pdf
ChalaKelbessa
 
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“