SlideShare uma empresa Scribd logo
1 de 31
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

Mais conteúdo relacionado

Mais procurados

THe Evolution of Web Design
THe Evolution of Web DesignTHe Evolution of Web Design
THe Evolution of Web Design
coachhahn
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
bethanygfair
 
Cross Site Scripting
Cross Site ScriptingCross Site Scripting
Cross Site Scripting
Ali Mattash
 

Mais procurados (20)

Introduction to php
Introduction to phpIntroduction to php
Introduction to php
 
JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)JavaScript - Chapter 13 - Browser Object Model(BOM)
JavaScript - Chapter 13 - Browser Object Model(BOM)
 
Front-End Web Development
Front-End Web DevelopmentFront-End Web Development
Front-End Web Development
 
Introduction to asp.net
Introduction to asp.netIntroduction to asp.net
Introduction to asp.net
 
THe Evolution of Web Design
THe Evolution of Web DesignTHe Evolution of Web Design
THe Evolution of Web Design
 
Cross Site Scripting ( XSS)
Cross Site Scripting ( XSS)Cross Site Scripting ( XSS)
Cross Site Scripting ( XSS)
 
Brief History of JavaScript
Brief History of JavaScriptBrief History of JavaScript
Brief History of JavaScript
 
Ppt of web development
Ppt of web developmentPpt of web development
Ppt of web development
 
Developing an ASP.NET Web Application
Developing an ASP.NET Web ApplicationDeveloping an ASP.NET Web Application
Developing an ASP.NET Web Application
 
Web Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo FadojutimiWeb Development and Web Development technologies - Temitayo Fadojutimi
Web Development and Web Development technologies - Temitayo Fadojutimi
 
Java Server Pages(jsp)
Java Server Pages(jsp)Java Server Pages(jsp)
Java Server Pages(jsp)
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSS
 
What is JavaScript? Edureka
What is JavaScript? EdurekaWhat is JavaScript? Edureka
What is JavaScript? Edureka
 
Introduction to Web Technology
Introduction to Web TechnologyIntroduction to Web Technology
Introduction to Web Technology
 
VB.NET:An introduction to Namespaces in .NET framework
VB.NET:An introduction to  Namespaces in .NET frameworkVB.NET:An introduction to  Namespaces in .NET framework
VB.NET:An introduction to Namespaces in .NET framework
 
Asp.net.
Asp.net.Asp.net.
Asp.net.
 
Java Servlets
Java ServletsJava Servlets
Java Servlets
 
Web development | Derin Dolen
Web development | Derin Dolen Web development | Derin Dolen
Web development | Derin Dolen
 
Cross Site Scripting Defense Presentation
Cross Site Scripting Defense Presentation Cross Site Scripting Defense Presentation
Cross Site Scripting Defense Presentation
 
Cross Site Scripting
Cross Site ScriptingCross Site Scripting
Cross Site Scripting
 

Semelhante a Web Building Blocks

Web design-workflow
Web design-workflowWeb design-workflow
Web design-workflow
Peter Kaizer
 
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
Erin M. Kidwell
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Deepak Sharma
 

Semelhante a 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)
 
Intro to HTML & CSS
Intro to HTML & CSSIntro to HTML & CSS
Intro to HTML & CSS
 
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
 
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892
 
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
 
The web context
The web contextThe web context
The web context
 

Último

Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
ciinovamais
 
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdfVishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
ssuserdda66b
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
QucHHunhnh
 

Último (20)

Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Fostering Friendships - Enhancing Social Bonds in the Classroom
Fostering Friendships - Enhancing Social Bonds  in the ClassroomFostering Friendships - Enhancing Social Bonds  in the Classroom
Fostering Friendships - Enhancing Social Bonds in the Classroom
 
Activity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdfActivity 01 - Artificial Culture (1).pdf
Activity 01 - Artificial Culture (1).pdf
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...Making communications land - Are they received and understood as intended? we...
Making communications land - Are they received and understood as intended? we...
 
Sociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning ExhibitSociology 101 Demonstration of Learning Exhibit
Sociology 101 Demonstration of Learning Exhibit
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Application orientated numerical on hev.ppt
Application orientated numerical on hev.pptApplication orientated numerical on hev.ppt
Application orientated numerical on hev.ppt
 
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
Explore beautiful and ugly buildings. Mathematics helps us create beautiful d...
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
Google Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptxGoogle Gemini An AI Revolution in Education.pptx
Google Gemini An AI Revolution in Education.pptx
 
Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdfVishram Singh - Textbook of Anatomy  Upper Limb and Thorax.. Volume 1 (1).pdf
Vishram Singh - Textbook of Anatomy Upper Limb and Thorax.. Volume 1 (1).pdf
 
Graduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - EnglishGraduate Outcomes Presentation Slides - English
Graduate Outcomes Presentation Slides - English
 
Unit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptxUnit-IV; Professional Sales Representative (PSR).pptx
Unit-IV; Professional Sales Representative (PSR).pptx
 
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdfUGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
UGC NET Paper 1 Mathematical Reasoning & Aptitude.pdf
 
1029-Danh muc Sach Giao Khoa khoi 6.pdf
1029-Danh muc Sach Giao Khoa khoi  6.pdf1029-Danh muc Sach Giao Khoa khoi  6.pdf
1029-Danh muc Sach Giao Khoa khoi 6.pdf
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 

Web Building Blocks

Notas do Editor

  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