2. Images in HTML
<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
3. Images in HTML
Start Tag Alternate text if End Tag
image doesn't
Search Path to Image Alternate appear Title Image Title
Attribute Attribute Attribute
<img src="images/full/factory.jpg" alt="factory-pic" title="Factory" />
4. IMAGE TYPES: GIFs, JPGs, PNGs
GIF Low quality, use for simple graphics
only.
JPG Photographic Imagery, Complex
patters or gradients.
Images with Alpha Transperency
PNG
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. 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. Font-Family
Font Family Property Desired Font Next Best Most General
h1 {
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
Font Stack
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. 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. 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;
}
