Enviar pesquisa
Carregar
Intro to HTML & CSS
•
1 gostou
•
804 visualizações
Colin Loretz
Seguir
Slides from the Reno Collective University introduction to HTML & CSS workshop.
Leia menos
Leia mais
Tecnologia
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 104
Baixar agora
Baixar para ler offline
Recomendados
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
響應式網頁實作坊
響應式網頁實作坊
Chih-cheng Wang
Sensational css how to show off your super sweet
Sensational css how to show off your super sweet
karenalma
Class 3 create an absolute layout with css abs position (aptana)
Class 3 create an absolute layout with css abs position (aptana)
Erin M. Kidwell
Tao of CSS
Tao of CSS
robzonenet
CSS Extenders
CSS Extenders
Idan Gazit
Zen of WordPress
Zen of WordPress
Colin Loretz
Adobe Flex: Creating Widgets for the Desktop and Web
Adobe Flex: Creating Widgets for the Desktop and Web
Colin Loretz
Recomendados
Class 4 handout two column layout w mobile web design
Class 4 handout two column layout w mobile web design
Erin M. Kidwell
響應式網頁實作坊
響應式網頁實作坊
Chih-cheng Wang
Sensational css how to show off your super sweet
Sensational css how to show off your super sweet
karenalma
Class 3 create an absolute layout with css abs position (aptana)
Class 3 create an absolute layout with css abs position (aptana)
Erin M. Kidwell
Tao of CSS
Tao of CSS
robzonenet
CSS Extenders
CSS Extenders
Idan Gazit
Zen of WordPress
Zen of WordPress
Colin Loretz
Adobe Flex: Creating Widgets for the Desktop and Web
Adobe Flex: Creating Widgets for the Desktop and Web
Colin Loretz
Xlrays online web tutorials
Xlrays online web tutorials
Yogesh Gupta
UI 101
UI 101
Rubikal
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
Shoshi Roberts
CSS and Layout
CSS and Layout
Jussi Pohjolainen
Intro to HTML + CSS
Intro to HTML + CSS
Jamal Sinclair O'Garro
Copy & Paste Design Hacks To Take Your Blog to the Next Level
Copy & Paste Design Hacks To Take Your Blog to the Next Level
Wishpond
HTML & CSS 2017
HTML & CSS 2017
Colin Loretz
Css tips & tricks
Css tips & tricks
anubavam-techkt
Blog HTML example for IML 295
Blog HTML example for IML 295
Evan Hughes
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
Harendra Singh,BCA Third Year
Harendra Singh,BCA Third Year
dezyneecole
HTML/CSS Web Blog Example
HTML/CSS Web Blog Example
Michael Bodie
Design To Deployment
Design To Deployment
hicksdesign
Html5 ux london
Html5 ux london
Todd Zaki Warfel
01 Introduction To CSS
01 Introduction To CSS
crgwbr
Theme02
Theme02
Atleta De Taekwondo
HTML News Packages Lesson
HTML News Packages Lesson
UC Berkeley Graduate School of Journalism
CSS Basics
CSS Basics
WordPress Memphis
Dfdf
Dfdf
smitty74
Controlling Robots with Javascript, Ruby and Go
Controlling Robots with Javascript, Ruby and Go
Colin Loretz
Making Things Happen
Making Things Happen
Colin Loretz
Mais conteúdo relacionado
Semelhante a Intro to HTML & CSS
Xlrays online web tutorials
Xlrays online web tutorials
Yogesh Gupta
UI 101
UI 101
Rubikal
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
Shoshi Roberts
CSS and Layout
CSS and Layout
Jussi Pohjolainen
Intro to HTML + CSS
Intro to HTML + CSS
Jamal Sinclair O'Garro
Copy & Paste Design Hacks To Take Your Blog to the Next Level
Copy & Paste Design Hacks To Take Your Blog to the Next Level
Wishpond
HTML & CSS 2017
HTML & CSS 2017
Colin Loretz
Css tips & tricks
Css tips & tricks
anubavam-techkt
Blog HTML example for IML 295
Blog HTML example for IML 295
Evan Hughes
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
BloggingWithStyle_2008
BloggingWithStyle_2008
tutorialsruby
Harendra Singh,BCA Third Year
Harendra Singh,BCA Third Year
dezyneecole
HTML/CSS Web Blog Example
HTML/CSS Web Blog Example
Michael Bodie
Design To Deployment
Design To Deployment
hicksdesign
Html5 ux london
Html5 ux london
Todd Zaki Warfel
01 Introduction To CSS
01 Introduction To CSS
crgwbr
Theme02
Theme02
Atleta De Taekwondo
HTML News Packages Lesson
HTML News Packages Lesson
UC Berkeley Graduate School of Journalism
CSS Basics
CSS Basics
WordPress Memphis
Dfdf
Dfdf
smitty74
Semelhante a Intro to HTML & CSS
(20)
Xlrays online web tutorials
Xlrays online web tutorials
UI 101
UI 101
Implementing Awesome: An HTML5/CSS3 Workshop
Implementing Awesome: An HTML5/CSS3 Workshop
CSS and Layout
CSS and Layout
Intro to HTML + CSS
Intro to HTML + CSS
Copy & Paste Design Hacks To Take Your Blog to the Next Level
Copy & Paste Design Hacks To Take Your Blog to the Next Level
HTML & CSS 2017
HTML & CSS 2017
Css tips & tricks
Css tips & tricks
Blog HTML example for IML 295
Blog HTML example for IML 295
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
BloggingWithStyle_2008
Harendra Singh,BCA Third Year
Harendra Singh,BCA Third Year
HTML/CSS Web Blog Example
HTML/CSS Web Blog Example
Design To Deployment
Design To Deployment
Html5 ux london
Html5 ux london
01 Introduction To CSS
01 Introduction To CSS
Theme02
Theme02
HTML News Packages Lesson
HTML News Packages Lesson
CSS Basics
CSS Basics
Dfdf
Dfdf
Mais de Colin Loretz
Controlling Robots with Javascript, Ruby and Go
Controlling Robots with Javascript, Ruby and Go
Colin Loretz
Making Things Happen
Making Things Happen
Colin Loretz
Building App Themes for WordPress
Building App Themes for WordPress
Colin Loretz
Steps to Open the Reno Makerspace
Steps to Open the Reno Makerspace
Colin Loretz
Reno Collective Coworking
Reno Collective Coworking
Colin Loretz
WordCamp Las Vegas: Your App is in my WordPress
WordCamp Las Vegas: Your App is in my WordPress
Colin Loretz
WordPress as a CMS
WordPress as a CMS
Colin Loretz
50 Apps to Fuel Your Online Business
50 Apps to Fuel Your Online Business
Colin Loretz
Ignite Reno: Diagnosing Technology as a Mental Disorder
Ignite Reno: Diagnosing Technology as a Mental Disorder
Colin Loretz
Creating Your First WordPress Plugin
Creating Your First WordPress Plugin
Colin Loretz
Share an internet connection through WiFi [Mac OS X[
Share an internet connection through WiFi [Mac OS X[
Colin Loretz
Mais de Colin Loretz
(11)
Controlling Robots with Javascript, Ruby and Go
Controlling Robots with Javascript, Ruby and Go
Making Things Happen
Making Things Happen
Building App Themes for WordPress
Building App Themes for WordPress
Steps to Open the Reno Makerspace
Steps to Open the Reno Makerspace
Reno Collective Coworking
Reno Collective Coworking
WordCamp Las Vegas: Your App is in my WordPress
WordCamp Las Vegas: Your App is in my WordPress
WordPress as a CMS
WordPress as a CMS
50 Apps to Fuel Your Online Business
50 Apps to Fuel Your Online Business
Ignite Reno: Diagnosing Technology as a Mental Disorder
Ignite Reno: Diagnosing Technology as a Mental Disorder
Creating Your First WordPress Plugin
Creating Your First WordPress Plugin
Share an internet connection through WiFi [Mac OS X[
Share an internet connection through WiFi [Mac OS X[
Último
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
Rafal Los
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Safe Software
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
The Digital Insurer
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Enterprise Knowledge
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
Delhi Call girls
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
naman860154
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
debabhi2
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
Michael W. Hawkins
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
Delhi Call girls
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Delhi Call girls
Último
(20)
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
Finology Group – Insurtech Innovation Award 2024
Finology Group – Insurtech Innovation Award 2024
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
08448380779 Call Girls In Civil Lines Women Seeking Men
08448380779 Call Girls In Civil Lines Women Seeking Men
How to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
GenCyber Cyber Security Day Presentation
GenCyber Cyber Security Day Presentation
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
Intro to HTML & CSS
1.
2.
WEB 101 HTML &
CSS
3.
TOOLS OF THE TRADE
4.
CODA
5.
TEXT WRANGLER
6.
TExTMATE
7.
EXPRESSION WEB
8.
DREAMWEAVER
9.
BROWSERS the big
four
10.
BUILDING THE FOUNDATION
11.
HTML building blocks
12.
<html> html tag
13.
<html> </html>
14.
<head> head definitions
15.
<html> <head>
</head> </html>
16.
<title> page title
17.
<html> <head>
<title>Our Page</title> </head> </html>
18.
<body> document body
19.
<html> <head>
<title>Our Page</title> </head> <body> </body> </html>
20.
<!-- # -->
comments
21.
<html> <head>
<title>Our Page</title> </head> <body> <!-- code body here --> </body> </html>
22.
<p> paragraph tag
23.
<p>My paragraph</p>
24.
<br> line break
25.
<br /> line
break
26.
<p>My<br /> paragraph</p>
27.
<h1> heading tag
28.
<h2> heading tag
29.
<h3> heading tag
30.
<h4> heading tag
31.
<h5> heading tag
32.
<h1> Important
heading </h1> <h3> Less important heading </h3>
33.
<small> small font style
tag
34.
<p> Some
text <small> some smaller text </small> </p>
35.
<div> division/container tag
36.
<div> <h3>My
section</h3> <p>Lorem ipsum</p> </div>
37.
<span> inline container
38.
<p> Some<span>thing</span> </p>
39.
BUILD TIME
40.
<ul> unordered list
41.
<li> list item
42.
<ul> <li>item
1</li> <li>item 2</li> </ul>
43.
<table> table definition
44.
<thead> table header
45.
<th> table header cell
46.
<tbody> table body
47.
<tr> table row
48.
<td> table cell
49.
<tfoot> table footer
50.
<table> <thead>
<th>Name</th> <th>Price</th> </thead> <tbody> <tr> <td>Latte</td> <td>$3.95</td> </tr> </tbody> </table>
51.
NAMING CONVENTION
52.
ids
53.
singular
54.
<div id =
“intro”> Some text </div>
55.
classes
56.
many
57.
<div class =
“product”> Some text </div>
58.
SEMANTIC WEB
59.
less > MORE
60.
SELF documenting
61.
BUILD TIME
62.
ADDING STYLE
63.
stylesheets
64.
.css files
65.
selectors
66.
h2 { ...
} li { ... } p { ... } by element
67.
.products
{ ... } li.products { ... } li .products { ... } by class
68.
#intro
{ ... } div#intro { ... } div #intro { ... } by ID
69.
#intro ul.products li {
... } mix and match
70.
style options
71.
structure
72.
height 50px;
73.
width: 100px;
74.
margin: 5px 5px 5px
5px
75.
WAIT!
76.
introducing the box
model
77.
margin
padding height width
78.
padding: 5px 5px
5px 5px
79.
div {
height: 50px; width: 100px; padding: 5px 10px 5px 10px; margin: 5px 10px 5px 10px; }
80.
5px
5px 10px 10px 50px 10px 10px 100px 5px 5px
81.
HEIGHT Height + padding-top
+ padding-bottom + margin-top + margin-bottom 50px + 5px + 5px + 5px + 5px = 70px WIDTH Width + padding-left + padding-right + margin-left + margin-right 50px + 10px + 10px + 10px + 10px = 90px
82.
div {
margin: top right bottom left; } div { margin: 5px 10px 5px 10px; }
83.
Shorthand div {
margin: 5px 10px; } div { margin: 5px; }
84.
OK!
85.
BUILD TIME
86.
FLOATS
87.
div {
float: left; } div { float: right; }
88.
fonts
89.
font-family: helvetica, arial,
sans-serif;
90.
font-size:
12px;
91.
font-size:
12pt;
92.
font-size:
1em;
93.
font-size:
70%;
94.
font-weight:
bold;
95.
font-weight:
normal;
96.
text-decoration:
underline;
97.
text-decoration:
none;
98.
color
99.
color: black;
100.
color: #000000;
101.
color: #000;
102.
color: rgb(0,0,0);
103.
background-color:
black;
104.
BUILD TIME
Baixar agora