Reminder....Fonts that are best used for webpages
If you create a font tag as below the browser will default to it's native serif font
< font face=Georgia, Times New Roman, Serif.>
If you create a font tag as below the browser will default to it's native sans serif font
< font face=Verdana, Arial, Sans >
We need to start a new file, a clean slate so to speak
Think of a theme, mine was fruits!
Create a folder use your theme as the name
Create an image foder in your theme folder
Save 6 images that all relate in the images folder
Create thumbnails for all of these images.
These thumbnails must be 125 pixels wide.
Save them in the images folder
Find a background image (seach for background images)
Save it in the image folder
Create a file with a row of 6 thumbnails linking to larger pictures!
You must include the images sizes and alt tag in the img src tags.
This page will have a background image <body background="images/filename">
http://www.htmlcodetutorial.com/images/_IMG.html info on image tags
http://home.comcast.net/~christine.randall/fruits my "fruit" page
Tuesday, February 27, 2007
Sunday, February 25, 2007
Working with thumbnails
Welcome Back!
First of all you will need to install Irfanview on your D drive.
1. Search for "Irfanview download" I'm not going to tell you where to find it...you should try and do this yourself.
2. Download and install the program
Please check your sites and clean up any coding problems.
Update you sites for good color combinations. Look at the Feb 15th posting for color scheme sites.
Check the fonts. You should have sans serif fonts for the body text. Serif fonts such as Times New Roman are great for titles. Feb 15th has information on websafe fonts.
Now remove all of your image links.
Open Ifranview and create thumbnails for each picture. The largest side of your thumbnail should be no more than 125 pixels. Check http://www.ibdhost.com/help/optimize/thumb.php for more information.
You should make a row of 5 thumbnails (include height and width in your image tags) and link them so the larger image will open when you click each thumbnail. This means you will need to ftp your new index file....all the thumbnails and the larger images.
First of all you will need to install Irfanview on your D drive.
1. Search for "Irfanview download" I'm not going to tell you where to find it...you should try and do this yourself.
2. Download and install the program
Please check your sites and clean up any coding problems.
Update you sites for good color combinations. Look at the Feb 15th posting for color scheme sites.
Check the fonts. You should have sans serif fonts for the body text. Serif fonts such as Times New Roman are great for titles. Feb 15th has information on websafe fonts.
Now remove all of your image links.
Open Ifranview and create thumbnails for each picture. The largest side of your thumbnail should be no more than 125 pixels. Check http://www.ibdhost.com/help/optimize/thumb.php for more information.
You should make a row of 5 thumbnails (include height and width in your image tags) and link them so the larger image will open when you click each thumbnail. This means you will need to ftp your new index file....all the thumbnails and the larger images.
Friday, February 16, 2007
February 16, 2007
Clean up your site!
All images are in a folder called “images” notice lowercase
Rename all your 2 word images to word_word
The main page is called index.html (this is your best one!)
All of your tags open and close
Make sure all of your image locations refer to “images”
Make sure all of your 2 word images are “word_word”
Make sure all of your images are .jpg or .gif files
Upload using FTP….File Transfer Protocol
Go to ftp://mhsstudents.org
Login with mhsmom password is Periodg2
Find your folder…..create an images sub folder
Copy and paste index.html to your folder
Copy and paste your pictures to your images folder
Check your site
http://www.mhsstudents.org/yourname
All images are in a folder called “images” notice lowercase
Rename all your 2 word images to word_word
The main page is called index.html (this is your best one!)
All of your tags open and close
Make sure all of your image locations refer to “images”
Make sure all of your 2 word images are “word_word”
Make sure all of your images are .jpg or .gif files
Upload using FTP….File Transfer Protocol
Go to ftp://mhsstudents.org
Login with mhsmom password is Periodg2
Find your folder…..create an images sub folder
Copy and paste index.html to your folder
Copy and paste your pictures to your images folder
Check your site
http://www.mhsstudents.org/yourname
Wednesday, February 14, 2007
Work form February 15th
Align pictures with html.
Make a row of pictures
Give your pictures borders
Align your pictures left and right with hspace and vspace
Consider the size of the picture in pixels.
Remember good coding will include th height and width in pixels of each picture
It’s considered good html manners to include alt text and the image dimensions in pixels
<img src="images/mycoolpic.gif" alt="description" width="pixels" height="pixels"/>
<img src="images/mycoolpic.gif" alt="My Cool Picture" width="150" height="100"/>
by the way. We should have name the folder for images "images" with all lower case.
Get in the habit of naming all files and folders with lowercase
Get in the habit of using an underscore to combine 2 word file names
example..........mycoolpic.gif or my_cool_pic.gif.....do not use my cool pic.gif
Use the following sites for info
http://www.theinternetdigest.net/archive/websafefonts.html Websafe Fonts
http://pagetutor.com/ Tutorial to help with html
http://www.w3schools.com/html/ Tutorial to help with html
http://www.echoecho.com/html.htm Tutorial to help with html
http://www.tizag.com/htmlTTutorial to help with html
http://www.htmlgoodies.com/tutorials/getting_started/ Tutorial to help with html
http://www.web-source.net/html_codes_chart.htm Chart to help you with html (remember to use all lowercase)
http://www.visibone.com/colorlab/ Visibone Color Lab
http://www.pagetutor.com/colorpicker/index.html Color Picker
http://wellstyled.com/tools/colorscheme2/index-en.html Color Scheme Generator
http://www.steeldolphin.com/color_scheme.html Color Scheme Generator
http://www.download.com/IrfanView/3000-2192-10021962.html Download Irfanview
http://www.tucows.com/get/194967_75076 Download Irfanview
http://msdn2.microsoft.com/en-us/library/ms997636.aspx#winxpicons_intro Creating your own icons
http://www.webdevelopersjournal.com/articles/favicon.html Create your own favicon
http://www.icon-maker.com/ use easy icon maker for 15 days
Make a row of pictures
Give your pictures borders
Align your pictures left and right with hspace and vspace
Consider the size of the picture in pixels.
Remember good coding will include th height and width in pixels of each picture
It’s considered good html manners to include alt text and the image dimensions in pixels
<img src="images/mycoolpic.gif" alt="description" width="pixels" height="pixels"/>
<img src="images/mycoolpic.gif" alt="My Cool Picture" width="150" height="100"/>
by the way. We should have name the folder for images "images" with all lower case.
Get in the habit of naming all files and folders with lowercase
Get in the habit of using an underscore to combine 2 word file names
example..........mycoolpic.gif or my_cool_pic.gif.....do not use my cool pic.gif
Use the following sites for info
http://www.theinternetdigest.net/archive/websafefonts.html Websafe Fonts
http://pagetutor.com/ Tutorial to help with html
http://www.w3schools.com/html/ Tutorial to help with html
http://www.echoecho.com/html.htm Tutorial to help with html
http://www.tizag.com/htmlTTutorial to help with html
http://www.htmlgoodies.com/tutorials/getting_started/ Tutorial to help with html
http://www.web-source.net/html_codes_chart.htm Chart to help you with html (remember to use all lowercase)
http://www.visibone.com/colorlab/ Visibone Color Lab
http://www.pagetutor.com/colorpicker/index.html Color Picker
http://wellstyled.com/tools/colorscheme2/index-en.html Color Scheme Generator
http://www.steeldolphin.com/color_scheme.html Color Scheme Generator
http://www.download.com/IrfanView/3000-2192-10021962.html Download Irfanview
http://www.tucows.com/get/194967_75076 Download Irfanview
http://msdn2.microsoft.com/en-us/library/ms997636.aspx#winxpicons_intro Creating your own icons
http://www.webdevelopersjournal.com/articles/favicon.html Create your own favicon
http://www.icon-maker.com/ use easy icon maker for 15 days
Work from February 13th
Using HTML to “Decorate” your page
Font
<font face="font name">...</font>
http://www.theinternetdigest.net/archive/websafefonts.html (link to info on web safe fonts)
<font face="times new roman">This text will be displayed using Times New Roman. </font>
<font face="arial">Here is some text using Arial font face... </font>
<font face="arial,helvetica,sans-serif">Your computer will attempt to display this visible text using first the Arial font and then, if this is not available, using Helvetica. If neither Arial nor Helvetica is available then the computer will resort to the final choice, sans-serif.</font>
Font Size
<font size="font size">...</font>
...into your <font> tag where font size equals any number from 1 to 7 (3 is the normal size)
<font size="4">Your visible text goes here and will look like this.</font>
Alternately you can use <font size= “+1”> This will bump up text from the default size 3 to size 4
Font Color
<font color="font color">...</font>
<font color="#008000">Your green text goes here.</font>
Inserting an image
It’s considered good html manners to include alt text and the image dimensions in pixels
<img src="images/mycoolpic.gif" alt="description" width="pixels" height="pixels"/>
<img src="images/mycoolpic.gif" alt="My Cool Picture" width="150" height="100"/>
Float the Image within the text while aligning the picture left or right
<img src="images/mycoolpic.gif" align="position" hspace="pixels" vspace="pixels"/>
<p>...some text... <img src="images/mycoolpic.gif" align="left" hspace="20" vspace="30"/> ...some more text...</p>
This will add a border to your picture <img src="images/mycoolpic.gig" border="5"></a>
Horizontal Line
<hr
size="pixels" width="pixels or percentage" align="left, center or right" color="color definition" noshade/>
<hr width="50%" align="left">
<hr size="5" color="purple">
Best way to align text put this info with the <p> tag
<p style="text-align: center;"> <p style=”text-align: justify;”> All text will All text in here will be centered justify</p </p>
<p style="text-align: right;">All text in here will be right aligned.</p>
No need for align:left at that is the default
http://www.ironspider.ca/index.htm
Font
<font face="font name">...</font>
http://www.theinternetdigest.net/archive/websafefonts.html (link to info on web safe fonts)
<font face="times new roman">This text will be displayed using Times New Roman. </font>
<font face="arial">Here is some text using Arial font face... </font>
<font face="arial,helvetica,sans-serif">Your computer will attempt to display this visible text using first the Arial font and then, if this is not available, using Helvetica. If neither Arial nor Helvetica is available then the computer will resort to the final choice, sans-serif.</font>
Font Size
<font size="font size">...</font>
...into your <font> tag where font size equals any number from 1 to 7 (3 is the normal size)
<font size="4">Your visible text goes here and will look like this.</font>
Alternately you can use <font size= “+1”> This will bump up text from the default size 3 to size 4
Font Color
<font color="font color">...</font>
<font color="#008000">Your green text goes here.</font>
Inserting an image
It’s considered good html manners to include alt text and the image dimensions in pixels
<img src="images/mycoolpic.gif" alt="description" width="pixels" height="pixels"/>
<img src="images/mycoolpic.gif" alt="My Cool Picture" width="150" height="100"/>
Float the Image within the text while aligning the picture left or right
<img src="images/mycoolpic.gif" align="position" hspace="pixels" vspace="pixels"/>
<p>...some text... <img src="images/mycoolpic.gif" align="left" hspace="20" vspace="30"/> ...some more text...</p>
This will add a border to your picture <img src="images/mycoolpic.gig" border="5"></a>
Horizontal Line
<hr
size="pixels" width="pixels or percentage" align="left, center or right" color="color definition" noshade/>
<hr width="50%" align="left">
<hr size="5" color="purple">
Best way to align text put this info with the <p> tag
<p style="text-align: center;"> <p style=”text-align: justify;”> All text will All text in here will be centered justify</p </p>
<p style="text-align: right;">All text in here will be right aligned.</p>
No need for align:left at that is the default
http://www.ironspider.ca/index.htm
Subscribe to:
Comments (Atom)