Submit Search
Upload
Intro to HTML & CSS
•
1 like
•
804 views
Colin Loretz
Follow
Slides from the Reno Collective University introduction to HTML & CSS workshop.
Read less
Read more
Technology
Design
Report
Share
Report
Share
1 of 104
Download now
Download to read offline
Recommended
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
Recommended
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
More Related Content
Similar to 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
Similar to 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
More from 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
More from 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[
Recently uploaded
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
Christopher Logan Kennedy
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
apidays
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Jago de Vreede
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
?#DUbAI#??##{{(☎️+971_581248768%)**%*]'#abortion pills for sale in dubai@
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard37
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
Zilliz
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
The Digital Insurer
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
Sandro Moreira
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
Zilliz
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Juan lago vázquez
Recently uploaded
(20)
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Spring Boot vs Quarkus the ultimate battle - DevoxxUK
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
+971581248768>> SAFE AND ORIGINAL ABORTION PILLS FOR SALE IN DUBAI AND ABUDHA...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
WSO2's API Vision: Unifying Control, Empowering Developers
WSO2's API Vision: Unifying Control, Empowering Developers
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
FWD Group - Insurer Innovation Award 2024
FWD Group - Insurer Innovation Award 2024
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
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
Download now