Week 03Images and Typography
Images in HTML<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
Images in HTMLStart Tag                                             Alternate text if                           End Tag   ...
IMAGE TYPES: GIFs, JPGs, PNGsGIF           Low quality, use for simple graphics              only.JPG           Photograph...
Background Images in CSS          HTML                                CSS                               Browser<body>     ...
Background Images in CSS          HTML                                CSS                               Browser<body>     ...
Font-Family   Font Family Property   Desired Font       Next Best   Most Generalh1 {             font-family: "Trebuchet M...
Embedding Fonts      CSS@font-face {    font-family: coolfont;    src: url(fonts/coolfont.ttf),   url(fonts/coolfont.eot);...
Embedding Fonts      CSS                                                     give the font a@font-face {                  ...
Embedding Fonts                                                .OTF and .TTF fonts                                        ...
Embedding Fonts                                                   paths to the font files, in      CSS                    ...
Embedding Fonts      CSS - without IE code...@font-face {    font-family: coolfont;    src: url(fonts/coolfont.ttf);}p {  ...
Resetting Default CSS Styles      CSS* {      vertical-align: baseline;      font-weight: inherit;      font-family: inher...
Styling Links w/ Pseudo-classes      CSSa:link {    color: blue;    text-decoration: none;    }a:visited {    color: light...
Styling Links w/ Pseudo-classes      CSSa:link {    color: blue;    text-decoration: none;    }a:visited {                ...
Styling Links w/ Pseudo-classes      CSSa:link {                        Unvisited Link    color: blue;    text-decoration:...
Upcoming SlideShare
Loading in...5
×

ID01 Week 3

1,106

Published on

Images and Typography

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

  • Be the first to like this

No Downloads
Views
Total Views
1,106
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ID01 Week 3

    1. 1. Week 03Images and Typography
    2. 2. Images in HTML<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
    3. 3. Images in HTMLStart Tag Alternate text if End Tag image doesnt Search Path to Image Alternate appear Title Image Title Attribute Attribute Attribute <img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
    4. 4. IMAGE TYPES: GIFs, JPGs, PNGsGIF Low quality, use for simple graphics only.JPG Photographic Imagery, Complex patters or gradients. Images with Alpha TransperencyPNG
    5. 5. Background Images in CSS HTML CSS Browser<body> body { background-color: grey; <div id="box"> } This sentence is the intro to this <p>This sentence is the intro to this p { paragraph. paragraphs. </p> font-size: 14px; </div> color: white; text-align: center;</body> margin-top: 30px; } #box { height: 300px; width: 400px; border: 2px solid green; background-image: url(../images/factory2.jpg); }
    6. 6. Background Images in CSS HTML CSS Browser<body> body { background-color: grey; <div id="box"> } This sentence is the intro to this <p>This sentence is the intro to this p { paragraph. paragraphs. </p> font-size: 14px; </div> color: white; text-align: center;</body> margin-top: 28px; } #box { height: 300px; width: 400px; border: 2px solid green; background-image: url(../images/factory2.jpg); }
    7. 7. Font-Family Font Family Property Desired Font Next Best Most Generalh1 { font-family: "Trebuchet MS", Helvetica, sans-serif; } Font Stack
    8. 8. Embedding Fonts CSS@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;}
    9. 9. Embedding Fonts CSS give the font a@font-face { simple name font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;}
    10. 10. Embedding Fonts .OTF and .TTF fonts work with all browsers CSS but Internet Explorer@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;} .EOT format required for Internet Explorer Use.
    11. 11. Embedding Fonts paths to the font files, in CSS a font folder.@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf), url(fonts/coolfont.eot);}p { font-family: coolfont, arial, sans-serif;}
    12. 12. Embedding Fonts CSS - without IE code...@font-face { font-family: coolfont; src: url(fonts/coolfont.ttf);}p { font-family: coolfont, arial, sans-serif;}
    13. 13. Resetting Default CSS Styles CSS* { vertical-align: baseline; font-weight: inherit; font-family: inherit; font-style: inherit; font-size: 100%; border: 0 none; outline: 0; padding: 0; margin: 0; }
    14. 14. Styling Links w/ Pseudo-classes CSSa:link { color: blue; text-decoration: none; }a:visited { color: lightBlue; text-decoration: none; }a:hover { color: white; background-color: yellow; text-decoration: none; }a:active { color: blue; text-decoration: none; }
    15. 15. Styling Links w/ Pseudo-classes CSSa:link { color: blue; text-decoration: none; }a:visited { PSEUDO-CLASSES color: lightBlue; text-decoration: none; }a:hover { color: white; background-color: yellow; text-decoration: none; }a:active { color: blue; text-decoration: none; }
    16. 16. Styling Links w/ Pseudo-classes CSSa:link { Unvisited Link color: blue; text-decoration: none; }a:visited { Visited Link color: lightBlue; text-decoration: none; }a:hover { Mouse Over Link color: white; background-color: yellow; text-decoration: none; }a:active { Selected Link color: blue; text-decoration: none; }
    1. A particular slide catching your eye?

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

    ×