Ch10-SourceCode.rtf

{\rtf1\ansi\ansicpg1252\cocoartf1038\cocoasubrtf350
{\fonttbl\f0\fswiss\fcharset0 Helvetica;\f1\fnil\fcharset0 HelveticaNeue;}
{\colortbl;\red255\green255\blue255;\red0\green0\blue0;}
\margl1440\margr1440\vieww18380\viewh16080\viewkind0
\deftab720
\pard\pardeftab720

\f0\i\b\fs18 \cf0 Listing 10\'961. 
\b0 Creating an HTML Table\
\pard\pardeftab720

\i0 \cf0 <table align=center cellpadding=10>\
<tr>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
</tr>\
<tr>\
<td valign=bottom align=center>
\fs16 \

\fs18 Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
</tr>\
</table>\
\
\
\pard\pardeftab720

\f1\b\fs22 \cf2 EXERCISE \'96 CREATING AN HTML TABLE PRODUCTS PAGE\
\
\pard\pardeftab720

\f0\b0\fs18 \cf0 <table align=center cellpadding=10>\
<tr>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
</tr>\
<tr>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button\
</td>\
<td valign=bottom align=center>\
Image Here<BR/>\
Description Here<BR/>\
Price Here<BR/>\
PAYPAL Button
\fs16 \

\fs18 </td>\
\
\pard\pardeftab720

\i\b \cf0 Listing 10\'962. 
\b0 HTML Anchor Code\
\pard\pardeftab720

\i0 \cf0 <a href=\'94http://www.blogsbyheather.com\'94 target=\'94_blank\'94>Click here</a> to go visit my site,\
Blogs By Heather.\
\pard\pardeftab720

\i\b \cf0 Listing 10\'963. 
\b0 HTML Anchor Tag with mailto:\
\pard\pardeftab720

\i0 \cf0 <a href=\'94mailto:heather@blogsbyheather.com\'94 target=\'94_blank\'94>Contact me</a> for more\
information.\
\pard\pardeftab720

\i\b \cf0 Listing 10\'964. 
\b0 HTML Image Tag\
\pard\pardeftab720

\i0 \cf0 <img src=\'94http://i493.photobucket.com/albums/rr300/blogsbyheather/bbhfanbadgeglitter.gif\'94\
alt=\'94Blogs By Heather\'94 title=\'94Blogs By Heather\'94/>\
\pard\pardeftab720

\i\b \cf0 Listing 10\'965. 
\b0 HTML Anchor and Image Tags\
\pard\pardeftab720

\i0 \cf0 <a href=\'94http://www.blogsbyheather.com\'94 target=\'94_blank\'94>\
<img src=\'94http://i493.photobucket.com/albums/rr300/blogsbyheather/bbhfanbadgeglitter.gif\'94\
alt=\'94Blogs By Heather\'94 title=\'94Blogs By Heather\'94/>\
</a>\
\
\
\pard\pardeftab720

\i\b \cf0 Listing 10\'966. 
\b0 HTML Paragraph Code\
\pard\pardeftab720

\i0 \cf0 <p style="text-align: center;">\
\
\pard\pardeftab720

\i\b \cf0 Listing 10\'967. 
\b0 Setting Font Size with the Style Attribute\
\pard\pardeftab720

\i0 \cf0 <p style=\'94font-size: 10pt;\'94>\'85</p>\
\pard\pardeftab720

\i\b \cf0 Listing 10\'968. 
\b0 Setting Color with the Style Attribute\
\pard\pardeftab720

\i0 \cf0 <p style=\'94color: #cc000;\'94>\'85</p>\
\pard\pardeftab720

\i\b \cf0 Listing 10\'969. 
\b0 Floating an Image and Adding Space with the Style Attribute\
\pard\pardeftab720

\i0 \cf0 <img style=\'94float:left; padding:10px;\'94 src=\'94 http://www.socialmediaexaminer.com/images/bss11-\
badge.gif\'94\
alt=\'94Blogging Success Summit\'94 title=\'94Blogging Success Summit\'94/>\
\
\pard\pardeftab720

\f1\b\fs22 \cf2 EXERCISE \'96 ADDING AND MODIFYING CSS IN BLOGGER\
\
\pard\pardeftab720

\f0\b0\fs18 \cf0 background-image: url("http://heatherporto.TypePad.com/portobg.jpg");\
background-attachment: fixed;\
background-position: top center;\
background-repeat: no-repeat;\
\pard\pardeftab720

\fs20 \cf0 It replaces this line 
\fs18 background: $(body.background); 
\fs20 with the code below:\
\pard\pardeftab720

\b\fs18 \cf0 Body \{\
font: $(body.font);\
color: $(body.text.color);\
\pard\pardeftab720

\b0 \cf0 background-image: url("http://heatherporto.TypePad.com/portobg.jpg");\
background-attachment: fixed;\
background-position: top center;\
background-repeat: no-repeat;\
\pard\pardeftab720

\b \cf0 padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);\
$(body.background.override)\
\}\
\
\
.body-fauxcolumn-outer .cap-top \{\
position: absolute;\
z-index: 1;\
height: 400px;\
width: 100%;\
\pard\pardeftab720

\b0 \cf0 background: $(body.background);\
$(body.background.override)\
\pard\pardeftab720

\b \cf0 \}\
\
h2 \{\
margin: 0 0 1em 0;\
font: $(widget.title.font);\
color: $(widget.title.text.color);\
text-transform: uppercase;\
\pard\pardeftab720

\b0 \cf0 background: #f1eeee;\
padding:10px;\
border-top: 1px solid #333333;\
border-bottom: 1px solid #333333;\
border-left: 1px solid #333333;\
border-right: 1px solid #333333;\
\pard\pardeftab720

\b \cf0 \}\
\
.date-header span \{\
\pard\pardeftab720

\b0 \cf0 background-color: $(date.header.background.color);\
color: $(date.header.color);\
\pard\pardeftab720

\b \cf0 padding: $(date.header.padding);\
letter-spacing: $(date.header.letterspacing);\
margin: $(date.header.margin);\
\}\
\
.date-header span \{\
\pard\pardeftab720

\b0 \cf0 color: #333333;\
\pard\pardeftab720

\b \cf0 padding: $(date.header.padding);\
letter-spacing: $(date.header.letterspacing);\
margin: $(date.header.margin);\
\}\
\
\
\pard\pardeftab720

\f1\fs22 \cf2 EXERCISE \'96 ADDING AND MODIFYING CSS IN WORDPRESS\
\
\pard\pardeftab720

\f0\b0\fs18 \cf0 #content \{\
width:100%;\
max-width:960px;\
min-width:300px;\
border:0 solid #333333; /* set the border from 1 to 0 so the border wouldn\'92t show */\
background:#ffffff; /* set main blog area to white and now just the background in\
dark gray */\
margin:0 auto;\
\}\
h2.title \{\
font-size:18px; /* set new font size to 18 */\
text-shadow:1px 1px 1px #aaa;\
background:#b2c6da; /* set background of title area to a blue-gray */\
border-top:1px solid #333333; /* border, gray */\
border-bottom:1px solid #333333; /* border, gray */\
border-left:1px solid #333333; /* border, gray */\
border-right:1px solid #333333; /* border, gray */\
margin:10px 0 0;\
padding:5px; /* adding spacing */\
\}\
.sidebar h3 \{\
color:#445566;\
font-size:18px; /* set new font size to 18 */\
line-height:30px;\
text-shadow:1px 1px 1px #aaaaaa;\
background:#b2c6da; /* set background of title area to a blue-gray */\
border-top:1px solid #333333; /* border, gray */\
border-bottom:1px solid #333333; /* border, gray */\
border-left:1px solid #333333; /* border, gray */\
border-right:1px solid #333333; /* border, gray */\
margin:0;\
padding:5px; /* added spacing */\
\}\
\
\pard\pardeftab720

\f1\b\fs22 \cf2 EXERCISE \'96 ADDING AND MODIFYING CSS IN TYPEPAD\
\
\pard\pardeftab720

\f0\b0\fs18 \cf0 body \{\
background: url(\'93http://heatherporto.TypePad.com/portobg.jpg\'94);\
background-position: top center;\
background-attachment: fixed;\
background-repeat: no-repeat;\
\}\
.module-header \{\
background:# b2c6da;\
border-top: 1px solid #333333;\
border-bottom: 1px solid #333333;\
border-right: 1px solid #333333;\
border-left: 1px solid #333333;\
\}\
\
}