Enviar búsqueda
Cargar
Intro to HTML & CSS
•
1 recomendación
•
804 vistas
Colin Loretz
Seguir
Slides from the Reno Collective University introduction to HTML & CSS workshop.
Leer menos
Leer más
Tecnología
Diseño
Denunciar
Compartir
Denunciar
Compartir
1 de 104
Descargar ahora
Descargar para leer sin conexión
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
Más contenido relacionado
Similar 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
Similar 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
Más 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
Más 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
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
Martijn de Jong
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
lior mazor
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
wesley chun
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Remote DBA Services
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Neo4j
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Edi Saputra
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
The Digital Insurer
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Product Anonymous
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
MIND CTI
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
jfdjdjcjdnsjd
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
The Digital Insurer
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Boston Institute of Analytics
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
Principled Technologies
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
Gabriella Davis
Último
(20)
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
GenAI Risks & Security Meetup 01052024.pdf
GenAI Risks & Security Meetup 01052024.pdf
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Manulife - Insurer Innovation Award 2024
Manulife - Insurer Innovation Award 2024
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
presentation ICT roal in 21st century education
presentation ICT roal in 21st century education
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
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
Descargar ahora