Suche senden
Hochladen
Intro to HTML & CSS
•
1 gefällt mir
•
804 views
Colin Loretz
Folgen
Slides from the Reno Collective University introduction to HTML & CSS workshop.
Weniger lesen
Mehr lesen
Technologie
Design
Melden
Teilen
Melden
Teilen
1 von 104
Jetzt herunterladen
Downloaden Sie, um offline zu lesen
Empfohlen
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
Empfohlen
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
Weitere ähnliche Inhalte
Ähnlich wie 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
Ähnlich wie 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
Mehr von 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
Mehr von 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[
Kürzlich hochgeladen
Slack Application Development 101 Slides
Slack Application Development 101 Slides
praypatel2
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
The Digital Insurer
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
giselly40
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Igalia
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
Enterprise Knowledge
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
RTylerCroy
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Malak Abu Hammad
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
vu2urc
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
Maria Levchenko
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Antenna Manufacturer Coco
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Drew Madelung
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
Anna Loughnan Colquhoun
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
Earley Information Science
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
sudhanshuwaghmare1
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Radu Cotescu
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer 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
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
Kürzlich hochgeladen
(20)
Slack Application Development 101 Slides
Slack Application Development 101 Slides
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
CNv6 Instructor Chapter 6 Quality of Service
CNv6 Instructor Chapter 6 Quality of Service
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
🐬 The future of MySQL is Postgres 🐘
🐬 The future of MySQL is Postgres 🐘
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
Histor y of HAM Radio presentation slide
Histor y of HAM Radio presentation slide
Handwritten Text Recognition for manuscripts and early printed texts
Handwritten Text Recognition for manuscripts and early printed texts
What Are The Drone Anti-jamming Systems Technology?
What Are The Drone Anti-jamming Systems Technology?
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Data Cloud, More than a CDP by Matt Robison
Data Cloud, More than a CDP by Matt Robison
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
EIS-Webinar-Prompt-Knowledge-Eng-2024-04-08.pptx
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
Driving Behavioral Change for Information Management through Data-Driven Gree...
Driving Behavioral Change for Information Management through Data-Driven Gree...
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
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
Jetzt herunterladen