Your SlideShare is downloading. ×
0
Front-End Web
Development
Lesson 2
Agenda
● HTML Basics Review
● Images
● Intro To CSS
○ Link Tag
○ Colors
○ Fonts
● Linking To Other Pages
● Lab Time
HTML Basics Review
View template.txt
<h1></h1>
<p></p>
<a href=””></a>

<ul>
<li></li>
</ul>
HTML Basics > Images
The img tag requires the src attribute, which
tells the browser where to find the image to be
placed....
HTML Basics > Images
HTML Basics > Images
relative vs. absolute paths vs. full URL
<img src=”images/logo.png” alt=”” />
<img src=”/images/logo....
HTML Basics > Images
alt attribute
<img src=”logo.png” alt=”alternate text” />
~ file not found
~ screen readers
~ validat...
HTML Basics > Images
Three main image file formats”
.gif (“It’s pronounced ‘JIF’”)
.jpg (.jpeg)
.png
HTML Basics > Images
.jpg
~ no transparency
~ can be stored at different compression levels
~ varying amounts of "lossy-ne...
HTML Basics > Images
.gif
~ supports transparency
~ ideal for logos, icons, tiles backgrounds
HTML Basics > Images
.png
~ supports transparency
~ ideal for logos, icons, tiles backgrounds
~ preferable to .gif format
Intro to CSS
Intro to CSS
Where does CSS go?
~ inline (within the tags)
~ in the <head> (embedded)
~ in a separate file (external) ***
...
Intro to CSS
Separate File
<link rel=”stylesheet” href=”style.css” />
Intro to CSS
Inside style.css ...
p{
color: red;
font-weight: bold;
}
Intro to CSS
Colors can be specified in several ways.
~ keyword
~ hex codes
~ rgb
~ rgba
~ hsl
~ hsla
Intro to CSS
Keyword Colors ***
~ red
~ green
~ blue
*** google a list (css keyword colors)
Intro to CSS
Hex Colors
Intro to CSS
Hex Colors (BASE 16)
0123456789ABCDEF
#FFFFFF (white) -- “blinded by the light”
#000000 (black) -- “absence o...
Intro to CSS
RGB Color Values
rgb(0,0,0)
~ each value can range from 0 to 255
~ 00 to FF in base 16
Intro to CSS
RGB Color Values
rgb(0,0,0) -- black
rgb(255, 255, 255) -- white
rgb(255, 0, 0) -- red
green? blue?
Intro to CSS
RGBa Color Values
~ fourth value is called alpha
~ value between 0 and 1
~ used to determine a color’s opacit...
Intro to CSS
RGBa Color Values
rgba(0, 0, 0, .25)
~ black at 25% opacity
rgba(255, 255, 255, .80)
~ white at 80% opacity
Intro to CSS
HSL and HSLa Color Values
~ Hue
~ Saturation
~ Lightness
Explanation at W3Schools
HSL Color Picker
Code Along
Wendy G. Bite
~ About Me
~ Resume
Homework
Assignment:
Create a two-page personal website
~ About Me
~ Resume
Videos:
How the Internet Works video
Don’t Fea...
Upcoming SlideShare
Loading in...5
×

Lesson 02

156

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
156
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Lesson 02"

  1. 1. Front-End Web Development Lesson 2
  2. 2. Agenda ● HTML Basics Review ● Images ● Intro To CSS ○ Link Tag ○ Colors ○ Fonts ● Linking To Other Pages ● Lab Time
  3. 3. HTML Basics Review View template.txt <h1></h1> <p></p> <a href=””></a> <ul> <li></li> </ul>
  4. 4. HTML Basics > Images The img tag requires the src attribute, which tells the browser where to find the image to be placed. The alt attribute is a best practice. <img src=”logo.png” alt=”alternate text” />
  5. 5. HTML Basics > Images
  6. 6. HTML Basics > Images relative vs. absolute paths vs. full URL <img src=”images/logo.png” alt=”” /> <img src=”/images/logo.png” alt=””> <img src=”http://keebla.com/images/logo.jpg” alt=”” />
  7. 7. HTML Basics > Images alt attribute <img src=”logo.png” alt=”alternate text” /> ~ file not found ~ screen readers ~ validation (best practice)
  8. 8. HTML Basics > Images Three main image file formats” .gif (“It’s pronounced ‘JIF’”) .jpg (.jpeg) .png
  9. 9. HTML Basics > Images .jpg ~ no transparency ~ can be stored at different compression levels ~ varying amounts of "lossy-ness" ~ typically the best format for photos ~ balance between photo quality and file size
  10. 10. HTML Basics > Images .gif ~ supports transparency ~ ideal for logos, icons, tiles backgrounds
  11. 11. HTML Basics > Images .png ~ supports transparency ~ ideal for logos, icons, tiles backgrounds ~ preferable to .gif format
  12. 12. Intro to CSS
  13. 13. Intro to CSS Where does CSS go? ~ inline (within the tags) ~ in the <head> (embedded) ~ in a separate file (external) *** *** best practice (Why?)
  14. 14. Intro to CSS Separate File <link rel=”stylesheet” href=”style.css” />
  15. 15. Intro to CSS Inside style.css ... p{ color: red; font-weight: bold; }
  16. 16. Intro to CSS Colors can be specified in several ways. ~ keyword ~ hex codes ~ rgb ~ rgba ~ hsl ~ hsla
  17. 17. Intro to CSS Keyword Colors *** ~ red ~ green ~ blue *** google a list (css keyword colors)
  18. 18. Intro to CSS Hex Colors
  19. 19. Intro to CSS Hex Colors (BASE 16) 0123456789ABCDEF #FFFFFF (white) -- “blinded by the light” #000000 (black) -- “absence of light”
  20. 20. Intro to CSS RGB Color Values rgb(0,0,0) ~ each value can range from 0 to 255 ~ 00 to FF in base 16
  21. 21. Intro to CSS RGB Color Values rgb(0,0,0) -- black rgb(255, 255, 255) -- white rgb(255, 0, 0) -- red green? blue?
  22. 22. Intro to CSS RGBa Color Values ~ fourth value is called alpha ~ value between 0 and 1 ~ used to determine a color’s opacity 0 = completely transparent 1 = completely solid
  23. 23. Intro to CSS RGBa Color Values rgba(0, 0, 0, .25) ~ black at 25% opacity rgba(255, 255, 255, .80) ~ white at 80% opacity
  24. 24. Intro to CSS HSL and HSLa Color Values ~ Hue ~ Saturation ~ Lightness Explanation at W3Schools HSL Color Picker
  25. 25. Code Along Wendy G. Bite ~ About Me ~ Resume
  26. 26. Homework Assignment: Create a two-page personal website ~ About Me ~ Resume Videos: How the Internet Works video Don’t Fear the Internet video
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×