SlideShare une entreprise Scribd logo
1  sur  31
Télécharger pour lire hors ligne
Web Building Blocks
HTML, CSS, and Content
Management Systems
Why Learn the Building
Blocks?
“The idea that you could make a website
and not know HTML blows my mind
because it’s like building a building and not
knowing what a brick is…You can be a CSS
wizard or you can know the basics, but you
should at least have some foundational
knowledge of what your building material is.”
- Ryan Singer,
37Signals
Building Blocks
http://bit.ly/aJWAu6
What we’ll make
Building Blocks
• Content (text, images, video)
• Structure (layout, order)
• Presentation/style (color, size, margins,
typeface)
• Behaviors (clicking, submitting forms,
dragging)
Building Blocks
Behaviors
(JavaScript)
Structure
(HTML &
CSS)
Presentation
(CSS)
Content
(HTML)
Building Blocks: HTML
Content + Structure
<!doctype html>
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>Welcome to my site.</p>
</body>
</html>
Building Blocks: HTML
html
bodyhead
title h1 p
DOM: Document Object
Model
childparent
ancestor
descendant
Building Blocks: HTML
Elements, Nodes, Tags,
Attributes, IDs, and Classes
<p id=“welcome” class=“notice”>
<span class=“first intro-word”>Welcome</span> to my site.
</p>
Building Blocks: HTML
links & images:
<a href=“this.html”>
<img src=“that.jpg” alt=“that img”>
abstract:
<div> <span>
structure:
<h1>…<h6> <p> <ul> <ol> <li> <table> <tr> <td>
emphasis:
<em> <strong>
Building Blocks: HTML
Play around!
http://bit.ly/cGI3Jk
Building Blocks: HTML
inline elements
block
elements
Building Blocks: HTML
Structure of an XHTML
Document
Building Blocks: HTML
Structure of an HTML5
Document
Building Blocks
http://bit.ly/c0B4VS
Building Blocks: CSS
Cascading Style Sheets
selector {
property: value;
}
Building Blocks: CSS
Selectors
p
.notice
#welcome
p.notice
.first.intro-word
div .notice
a:hover
#welcome .notice span
.notice, .warning
Building Blocks: CSS
Selectors: going down?
#welcome
.notice
span
Building Blocks: CSS
Inheritance
span
.notice
p .notice
#top-note
p #top-note
Building Blocks: CSS
Properties & Values
height: 100px;
width: 50%;
color: #FF0000;
background-color: #000;
font-size: 12pt;
font-family: “Times New Roman”, serif;
font-weight: bold;
text-align: center;
display: block;
float: left;
padding: 3em;
margin: 10px 20px 5px 10px;
Building Blocks: CSS
Box Model
Building Blocks: CSS
Positioning
Normal Relative/Absolute
Float
“Cleared” floats
Building Blocks
http://bit.ly/9S35oq
Building Blocks: CMS
“I don’t want to write HTML for every
minor website update.”
“Our site has too many pages to manage
them all by hand.”
“We have a bunch of content creators
who need different levels of access.”
“I’m not a programmer, and my site
needs custom functionality that HTML &
CSS alone can’t provide.”
Building Blocks: CMS
• Create content (static pages, time-stamped
posts, images, video)
• Organize content (order, categories, tags)
• Add consistent presentation/style
(templates)
• Add new functionality (plugins, extensions,
modules)
Building Blocks: CMS
WordPress
Drupal
SilverStripe
Joomla!
ExpressionEngine
opensourcecms.com
Building Blocks: CMS
Building Blocks: CMS
Building Blocks: CMS
Building Blocks: CMS
Building Blocks: CMS
Building Blocks: Resources
• Tutorials/Reference
– W3Schools: w3schools.com
– HTML Dog: htmldog.com
• Design
– A List Apart: alistapart.com
– Smashing Magazine: smashingmagazine.com
– Boxes and Arrows: boxesandarrows.com
– Pattern Tap: patterntap.com
• Tools
– Firebug (getfirebug.com), Chrome Developer Toolbar, IE
Developer Toolbar
– validator.w3.org
– TextWrangler, Notepad++, CSS Edit

Contenu connexe

Tendances

ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development47ishu
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSSAmit Tyagi
 
Asp .net web form fundamentals
Asp .net web form fundamentalsAsp .net web form fundamentals
Asp .net web form fundamentalsGopal Ji Singh
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSSSyed Sami
 
Elements of html powerpoint
Elements of html powerpointElements of html powerpoint
Elements of html powerpointAnastasia1993
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!Syahmi RH
 
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating NavigationCSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating NavigationVidya Ananthanarayanan
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation Salman Memon
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introductionshaojung
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first courseVlad Posea
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap1amitgupta
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSSAnna Cook (she/her)
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpcasestudyhelp
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptEdureka!
 

Tendances (20)

Web Development using HTML & CSS
Web Development using HTML & CSSWeb Development using HTML & CSS
Web Development using HTML & CSS
 
ppt of web designing and development
ppt of web designing and developmentppt of web designing and development
ppt of web designing and development
 
Introduction to CSS
Introduction to CSSIntroduction to CSS
Introduction to CSS
 
CSS
CSSCSS
CSS
 
Asp .net web form fundamentals
Asp .net web form fundamentalsAsp .net web form fundamentals
Asp .net web form fundamentals
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
Elements of html powerpoint
Elements of html powerpointElements of html powerpoint
Elements of html powerpoint
 
HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!HTML, CSS And JAVASCRIPT!
HTML, CSS And JAVASCRIPT!
 
CSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating NavigationCSS - Styling Links and Creating Navigation
CSS - Styling Links and Creating Navigation
 
Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 
Javascript
JavascriptJavascript
Javascript
 
Complete Lecture on Css presentation
Complete Lecture on Css presentation Complete Lecture on Css presentation
Complete Lecture on Css presentation
 
Basics of JavaScript
Basics of JavaScriptBasics of JavaScript
Basics of JavaScript
 
Web Application Introduction
Web Application  IntroductionWeb Application  Introduction
Web Application Introduction
 
Introduction to Web Programming - first course
Introduction to Web Programming - first courseIntroduction to Web Programming - first course
Introduction to Web Programming - first course
 
Presentation of bootstrap
Presentation of bootstrapPresentation of bootstrap
Presentation of bootstrap
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSS
 
Cascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) helpCascading Style Sheets (CSS) help
Cascading Style Sheets (CSS) help
 
CSS
CSSCSS
CSS
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 

Similaire à Web Building Blocks

Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter BootstrapAhmed Haque
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflowPeter Kaizer
 
Stepping into the front end: Part 1
Stepping into the front end: Part 1Stepping into the front end: Part 1
Stepping into the front end: Part 1Tahin Rahman
 
Scalable front-end architecture with Bootstrap 3 + Atomic CSS
Scalable front-end architecture with Bootstrap 3 + Atomic CSSScalable front-end architecture with Bootstrap 3 + Atomic CSS
Scalable front-end architecture with Bootstrap 3 + Atomic CSSHayden Bleasel
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Thinkful
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucksTim Wright
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...Yandex
 
How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014James Strang
 
Making Your Own CSS Framework
Making Your Own CSS FrameworkMaking Your Own CSS Framework
Making Your Own CSS FrameworkDan Sagisser
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Erin M. Kidwell
 
Jonathan Snook - Falling to pieces: the componentization of the web
Jonathan Snook - Falling to pieces: the componentization of the webJonathan Snook - Falling to pieces: the componentization of the web
Jonathan Snook - Falling to pieces: the componentization of the webTuring Fest
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Thinkful
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering PathRaphael Amorim
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookFuture Insights
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tipsChris Love
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Deepak Sharma
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX DesignersAshlimarie
 

Similaire à Web Building Blocks (20)

Intro To Twitter Bootstrap
Intro To Twitter BootstrapIntro To Twitter Bootstrap
Intro To Twitter Bootstrap
 
Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
 
Stepping into the front end: Part 1
Stepping into the front end: Part 1Stepping into the front end: Part 1
Stepping into the front end: Part 1
 
Scalable front-end architecture with Bootstrap 3 + Atomic CSS
Scalable front-end architecture with Bootstrap 3 + Atomic CSSScalable front-end architecture with Bootstrap 3 + Atomic CSS
Scalable front-end architecture with Bootstrap 3 + Atomic CSS
 
Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)Responsive Web Design (April 18th, Los Angeles)
Responsive Web Design (April 18th, Los Angeles)
 
Slow kinda sucks
Slow kinda sucksSlow kinda sucks
Slow kinda sucks
 
CE-9506_Session02
CE-9506_Session02CE-9506_Session02
CE-9506_Session02
 
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin..."Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
"Responsive Web Design: Clever Tips and Techniques". Vitaly Friedman, Smashin...
 
How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014How to dominate a free theme WCTO 2014
How to dominate a free theme WCTO 2014
 
Making Your Own CSS Framework
Making Your Own CSS FrameworkMaking Your Own CSS Framework
Making Your Own CSS Framework
 
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
Girl Develop It Cincinnati: Intro to HTML/CSS Class 4
 
Introducing Cascading Style Sheets
Introducing Cascading Style SheetsIntroducing Cascading Style Sheets
Introducing Cascading Style Sheets
 
Jonathan Snook - Falling to pieces: the componentization of the web
Jonathan Snook - Falling to pieces: the componentization of the webJonathan Snook - Falling to pieces: the componentization of the web
Jonathan Snook - Falling to pieces: the componentization of the web
 
Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)Code & Design Your First Website (Downtown Los Angeles)
Code & Design Your First Website (Downtown Los Angeles)
 
Exploring Critical Rendering Path
Exploring Critical Rendering PathExploring Critical Rendering Path
Exploring Critical Rendering Path
 
The Future is Modular, Jonathan Snook
The Future is Modular, Jonathan SnookThe Future is Modular, Jonathan Snook
The Future is Modular, Jonathan Snook
 
Css best practices style guide and tips
Css best practices style guide and tipsCss best practices style guide and tips
Css best practices style guide and tips
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
The web context
The web contextThe web context
The web context
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 

Dernier

Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfTechSoup
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17Celine George
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...Nguyen Thanh Tu Collection
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxraviapr7
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17Celine George
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?TechSoup
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational PhilosophyShuvankar Madhu
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.EnglishCEIPdeSigeiro
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptxSandy Millin
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphNetziValdelomar1
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxSaurabhParmar42
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxMYDA ANGELICA SUAN
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfYu Kanazawa / Osaka University
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfMohonDas
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxDr. Asif Anas
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxAditiChauhan701637
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxraviapr7
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfMohonDas
 

Dernier (20)

Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdfMaximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
Maximizing Impact_ Nonprofit Website Planning, Budgeting, and Design.pdf
 
How to Solve Singleton Error in the Odoo 17
How to Solve Singleton Error in the  Odoo 17How to Solve Singleton Error in the  Odoo 17
How to Solve Singleton Error in the Odoo 17
 
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
CHUYÊN ĐỀ DẠY THÊM TIẾNG ANH LỚP 11 - GLOBAL SUCCESS - NĂM HỌC 2023-2024 - HK...
 
Prescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptxPrescribed medication order and communication skills.pptx
Prescribed medication order and communication skills.pptx
 
UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024UKCGE Parental Leave Discussion March 2024
UKCGE Parental Leave Discussion March 2024
 
How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17How to Show Error_Warning Messages in Odoo 17
How to Show Error_Warning Messages in Odoo 17
 
What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?What is the Future of QuickBooks DeskTop?
What is the Future of QuickBooks DeskTop?
 
Philosophy of Education and Educational Philosophy
Philosophy of Education  and Educational PhilosophyPhilosophy of Education  and Educational Philosophy
Philosophy of Education and Educational Philosophy
 
Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.Easter in the USA presentation by Chloe.
Easter in the USA presentation by Chloe.
 
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
2024.03.23 What do successful readers do - Sandy Millin for PARK.pptx
 
Presentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a ParagraphPresentation on the Basics of Writing. Writing a Paragraph
Presentation on the Basics of Writing. Writing a Paragraph
 
CAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptxCAULIFLOWER BREEDING 1 Parmar pptx
CAULIFLOWER BREEDING 1 Parmar pptx
 
Patterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptxPatterns of Written Texts Across Disciplines.pptx
Patterns of Written Texts Across Disciplines.pptx
 
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdfP4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
P4C x ELT = P4ELT: Its Theoretical Background (Kanazawa, 2024 March).pdf
 
Diploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdfDiploma in Nursing Admission Test Question Solution 2023.pdf
Diploma in Nursing Admission Test Question Solution 2023.pdf
 
Ultra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptxUltra structure and life cycle of Plasmodium.pptx
Ultra structure and life cycle of Plasmodium.pptx
 
In - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptxIn - Vivo and In - Vitro Correlation.pptx
In - Vivo and In - Vitro Correlation.pptx
 
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdfPersonal Resilience in Project Management 2 - TV Edit 1a.pdf
Personal Resilience in Project Management 2 - TV Edit 1a.pdf
 
Education and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptxEducation and training program in the hospital APR.pptx
Education and training program in the hospital APR.pptx
 
HED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdfHED Office Sohayok Exam Question Solution 2023.pdf
HED Office Sohayok Exam Question Solution 2023.pdf
 

Web Building Blocks

Notes de l'éditeur

  1. Pillars of the web; getting content up and managing content
  2. signal vs. noise; not entirely true, but greater understandings of our media is always a good thing!
  3. simple, clean, something to build on.
  4. browsers have defaults (as we shall see), but we usually want to modify those defaults
  5. structure vs. layout. brief overview of JS
  6. content, things going “inside” other things, hierarchy
  7. DOM (structure) vs. syntax (XML, etc.) ‘traversal’
  8. elements vs. nodes. opening and closing tags. IDs vs classes
  9. add h2, ul, li, button
  10. span and <a> vs div and <p>
  11. <div id=“header”>a site</div> <div id=“nav”>my nav</div> <div class=“article”>article text</div> <div id=“footer”>copyright</div> in w3schools
  12. <header>a site</header> <nav>my nav</nav> <article>article text</article> <footer>copyright</footer> in w3schools
  13. default browser style
  14. simple syntax! complex stylesheets. browser issues. http://www.w3schools.com/css/tryit.asp?filename=trycss_default
  15. elements classes ids element.class class.class descendants pseudo-selectors multiple descendants multiple selectors
  16. we can only go right to left (down the tree) though browsers match right-to-left! inheritance! (cascading)
  17. span { color: red; } .notice {color: green;} p .notice {color: yellow;} #top-note {color: blue;} p #top-note {color: orange;}
  18. measuring units (px, pt, em, %) color hex font stacks inline vs block box model
  19. and when you put it all together…
  20. themes and add-ons