Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Destaque (20)
Semelhante a Lesson 02
Semelhante a Lesson 02 (20)
Mais de Gene Babon
Mais de Gene Babon (20)
Último
Último (20)
Lesson 02
- 2. Agenda ● HTML Basics Review ● Images ● Intro To CSS ○ Link Tag ○ Colors ○ Fonts ● Linking To Other Pages ● Lab Time
- 3. HTML Basics Review View template.txt <h1></h1> <p></p> <a href=””></a> <ul> <li></li> </ul>
- 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. HTML Basics > Images
- 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. HTML Basics > Images alt attribute <img src=”logo.png” alt=”alternate text” /> ~ file not found ~ screen readers ~ validation (best practice)
- 8. HTML Basics > Images Three main image file formats” .gif (“It’s pronounced ‘JIF’”) .jpg (.jpeg) .png
- 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. HTML Basics > Images .gif ~ supports transparency ~ ideal for logos, icons, tiles backgrounds
- 11. HTML Basics > Images .png ~ supports transparency ~ ideal for logos, icons, tiles backgrounds ~ preferable to .gif format
- 12. Intro to CSS
- 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. Intro to CSS Separate File <link rel=”stylesheet” href=”style.css” />
- 15. Intro to CSS Inside style.css ... p{ color: red; font-weight: bold; }
- 16. Intro to CSS Colors can be specified in several ways. ~ keyword ~ hex codes ~ rgb ~ rgba ~ hsl ~ hsla
- 17. Intro to CSS Keyword Colors *** ~ red ~ green ~ blue *** google a list (css keyword colors)
- 18. Intro to CSS Hex Colors
- 19. Intro to CSS Hex Colors (BASE 16) 0123456789ABCDEF #FFFFFF (white) -- “blinded by the light” #000000 (black) -- “absence of light”
- 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. Intro to CSS RGB Color Values rgb(0,0,0) -- black rgb(255, 255, 255) -- white rgb(255, 0, 0) -- red green? blue?
- 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. 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. Intro to CSS HSL and HSLa Color Values ~ Hue ~ Saturation ~ Lightness Explanation at W3Schools HSL Color Picker
- 25. Code Along Wendy G. Bite ~ About Me ~ Resume
- 26. Homework Assignment: Create a two-page personal website ~ About Me ~ Resume Videos: How the Internet Works video Don’t Fear the Internet video