|
Thursday, July 19, 2007
Testing out Clipmarks
Tuesday, June 5, 2007
Finish those javascript pages!
You should be finishing 2 javascript pages.
The first with any javascript from my webpage
http://www.mhsstudents.org/randall/javascript/examples.htm
The second page should have images that change in some way. Check out the links at the bottom of my webpage for some ideas.
The first with any javascript from my webpage
http://www.mhsstudents.org/randall/javascript/examples.htm
The second page should have images that change in some way. Check out the links at the bottom of my webpage for some ideas.
Friday, June 1, 2007
June 1
The end is near!!!
Please bring in your books on Monday. We do not have class on Tuesday as it is a day 1.
Next Wednesday and Thursday is all the time we have left.
Please complete 2 javascript "pages" by then. Upload them in a javascript folder.
Use the following tutorial to help you. http://www.webmonkey.com/webmonkey/98/03/index0a.html
You will need to create one with ro
tating images.
Remember there are javascripts that are in the main page and those with the suffix .js that reside in the same directory as you html page.
What is AJAX? Please research and let me know what you find!
Please bring in your books on Monday. We do not have class on Tuesday as it is a day 1.
Next Wednesday and Thursday is all the time we have left.
Please complete 2 javascript "pages" by then. Upload them in a javascript folder.
Use the following tutorial to help you. http://www.webmonkey.com/webmonkey/98/03/index0a.html
You will need to create one with ro
tating images.
Remember there are javascripts that are in the main page and those with the suffix .js that reside in the same directory as you html page.
What is AJAX? Please research and let me know what you find!
Tuesday, May 29, 2007
Finish CSS .....Start JavaScript
If you have not finished last Friday's assignment please do so.
Then do assigned readings.
You should be able to tell me the difference between java and javascript and what the file extension is for a separate javascript file.
Then your can go to http://www.mhsstudents.org/randall/javascripts/examples.html and start working on this assignment
Then do assigned readings.
You should be able to tell me the difference between java and javascript and what the file extension is for a separate javascript file.
Then your can go to http://www.mhsstudents.org/randall/javascripts/examples.html and start working on this assignment
Thursday, May 24, 2007
CSS Navigation Buttons
If you have finished the CSS project with a row of images on the right please upload it to your multi css folder.It is time to move on.
Lets create some css navigation.
http://mhsstudents.org/randall/cssnav/buttonnav.html
Here is a document with the css and html I used. This also includes links to the 2 image files needed for this project.
Next let's work with this menu
http://www.cssdrive.com/index.php/examples/exampleitem/dashed_vertical_menu/
Then read the following pages in the Javascript Book
8-11 and 16-21
Lets create some css navigation.
http://mhsstudents.org/randall/cssnav/buttonnav.html
Here is a document with the css and html I used. This also includes links to the 2 image files needed for this project.
Next let's work with this menu
http://www.cssdrive.com/index.php/examples/exampleitem/dashed_vertical_menu/
Then read the following pages in the Javascript Book
8-11 and 16-21
Tuesday, May 22, 2007
Friday, May 18, 2007
May 18
Working with FTP software
Together we will download SmartFTP software and install in on our D drive.
FTP software allows you to seamlessly transfer files between your computer and a host or server computer.
Here is a link to a document with Smart FTP Instructions
We will work on Floating images using CSS. Use the tutorial at http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
Create one css file and then one html file. Use your thumbnail images from your html tables assignment. Be sure to copy your thumbnail images to an image folder in your css folder. Upload your css file and your new html file to the css folder.
I started with one of my aboutme pages and here are the results.
I started with http://mhsstudents.org/randall/csslessons/aboutme.htm
Then http://mhsstudents.org/randall/csslessons/aboutme3.htm
Then http://mhsstudents.org/randall/multicss/aboutme8.htm
And Finally
http://mhsstudents.org/randall/multicss/fruitmulti.htm
Here is the css for the final work.
body{margin-right: 100px;
margin-left: 100px;
}
h2{ font-style: italic;
}
h1 {text-align: center; text-transform : uppercase; color:yellow; background-color:#9f0;
}
p{ color :#00cc00; font-size:22px;
margin-top: 0; }
.highlight {
background-color : #fcd9c5;
}
.underline {text-decoration : underline;
}
.floatright { float: right; margin: 0 0 10px 10px; clear: right;
}
Together we will download SmartFTP software and install in on our D drive.
FTP software allows you to seamlessly transfer files between your computer and a host or server computer.
Here is a link to a document with Smart FTP Instructions
We will work on Floating images using CSS. Use the tutorial at http://css.maxdesign.com.au/floatutorial/tutorial0407.htm
Create one css file and then one html file. Use your thumbnail images from your html tables assignment. Be sure to copy your thumbnail images to an image folder in your css folder. Upload your css file and your new html file to the css folder.
I started with one of my aboutme pages and here are the results.
I started with http://mhsstudents.org/randall/csslessons/aboutme.htm
Then http://mhsstudents.org/randall/csslessons/aboutme3.htm
Then http://mhsstudents.org/randall/multicss/aboutme8.htm
And Finally
http://mhsstudents.org/randall/multicss/fruitmulti.htm
Here is the css for the final work.
body{margin-right: 100px;
margin-left: 100px;
}
h2{ font-style: italic;
}
h1 {text-align: center; text-transform : uppercase; color:yellow; background-color:#9f0;
}
p{ color :#00cc00; font-size:22px;
margin-top: 0; }
.highlight {
background-color : #fcd9c5;
}
.underline {text-decoration : underline;
}
.floatright { float: right; margin: 0 0 10px 10px; clear: right;
}
Wednesday, May 16, 2007
May 16th
All students should now be working on your multi css project.
One css file, 4 html pages all with a common theme. You need to include a horizontal menu at the bottom linking all the pages together.
Freshman - Juniors will need to add a picture to each page. Go to
Use this site to help you http://css.maxdesign.com.au/floatutorial/tutorial0101.htm
One css file, 4 html pages all with a common theme. You need to include a horizontal menu at the bottom linking all the pages together.
Freshman - Juniors will need to add a picture to each page. Go to
Use this site to help you http://css.maxdesign.com.au/floatutorial/tutorial0101.htm
May 14
Everyone should have their movie embedded in a file and uploaded to your folder.
Seniors should be working fast and furious to complete a 4 page css site.
One css file for the formatting of 4 html pages.
These pages should have a common theme. There should be a horizontal menu (you have an older handout) linking all pages together.
Seniors should be working fast and furious to complete a 4 page css site.
One css file for the formatting of 4 html pages.
These pages should have a common theme. There should be a horizontal menu (you have an older handout) linking all pages together.
Thursday, May 10, 2007
Wednesday, May 9, 2007
May 10
We will be finishing viewing the last of the movies today.
You must "embed" your movie in a web page.
Here's mine London, New York and Tokyo
Send me an email to let me know when this is done.
I will also introduce you to Picasa. A Google product used to organise and fix image files. Files to practice can be found at http://home.comcast.net/~christine.randall/camera/pix.htm
You must "embed" your movie in a web page.
Here's mine London, New York and Tokyo
Send me an email to let me know when this is done.
I will also introduce you to Picasa. A Google product used to organise and fix image files. Files to practice can be found at http://home.comcast.net/~christine.randall/camera/pix.htm
Monday, May 7, 2007
May 7
We need to see the rest of those movies!
I have created a CSS make-up sheet for those of you who need extra help.
Download a basic template http://www.mhsstudents.org/randall/csslessons/internalstylesheettemplate.html
See my example
http://www.mhsstudents.org/randall/csslessons/aboutme.htm
These will also help
http://www.mhsstudents.org/randall/csslessons/aboutme2.htm
http://www.mhsstudents.org/randall/csslessons/aboutme3.htm
Next is the columns CSS
http://www.mhsstudents.org/randall/csslessons/fruitcolumn.html View the source and read the handout I have created to give this a try.
Those of you who have moved on to external CSS and finished the first assignment. You should create a 4 page project with pictures that float to the right or left.
Try to create one on your own.
You must include one scanned image!
You must use the menu css did from the handout I gave you.
http://css.maxdesign.com.au/floatutorial/tutorial0101.htm
Save this in a folder called cssmax
I have created a CSS make-up sheet for those of you who need extra help.
Download a basic template http://www.mhsstudents.org/randall/csslessons/internalstylesheettemplate.html
See my example
http://www.mhsstudents.org/randall/csslessons/aboutme.htm
These will also help
http://www.mhsstudents.org/randall/csslessons/aboutme2.htm
http://www.mhsstudents.org/randall/csslessons/aboutme3.htm
Next is the columns CSS
http://www.mhsstudents.org/randall/csslessons/fruitcolumn.html View the source and read the handout I have created to give this a try.
Those of you who have moved on to external CSS and finished the first assignment. You should create a 4 page project with pictures that float to the right or left.
Try to create one on your own.
You must include one scanned image!
You must use the menu css did from the handout I gave you.
http://css.maxdesign.com.au/floatutorial/tutorial0101.htm
Save this in a folder called cssmax
Friday, May 4, 2007
May 4
Using a scanner.
Click here for scanning tips
Looking for a scanner? Read this article
Then we will check out your movies!
Click here for scanning tips
Looking for a scanner? Read this article
Then we will check out your movies!
Wednesday, May 2, 2007
May 2
Attention seniors: Panther Vision is looking for pictures from your 8th grade year through senior year. These pictures will be used for a video collage that will air prior to graduation. Please submit your pictures to Mr. Ciavola or Mr. Heckman no later than May 4th.
The Freshman/Sophomore semi-formal is scheduled for Friday, May 18th. You must pay your class dues before you are able to purchase tickets. See a class officer for more details.
Auditions for the MHS Jazz Ensemble will take place on Monday, May 7. Students interested in auditioning must sign up in Room 170 or see Mr. Piazza for more details. Bass and guitar players are in high demand.
Best Buddies meeting, Thursday, May 3rd at 2:00 p.m. in room 230. All members should attend to plan May’s activity.
Attention seniors: Turn in your All-Nighter registration forms to Mrs. Buckley in Room 322 by Friday, May 4th to be eligible to enter the raffle for great prizes. Get your slide show photos in by May 11! See Mrs. Buckley for more information.
All BPA members who plan to attend nationals must pick up 2 permission slips in the Business Office by Monday and have them for the mandatory parent and student meeting Monday night at MHS at 7:00 p.m.
The Freshman/Sophomore semi-formal is scheduled for Friday, May 18th. You must pay your class dues before you are able to purchase tickets. See a class officer for more details.
Auditions for the MHS Jazz Ensemble will take place on Monday, May 7. Students interested in auditioning must sign up in Room 170 or see Mr. Piazza for more details. Bass and guitar players are in high demand.
Best Buddies meeting, Thursday, May 3rd at 2:00 p.m. in room 230. All members should attend to plan May’s activity.
Attention seniors: Turn in your All-Nighter registration forms to Mrs. Buckley in Room 322 by Friday, May 4th to be eligible to enter the raffle for great prizes. Get your slide show photos in by May 11! See Mrs. Buckley for more information.
All BPA members who plan to attend nationals must pick up 2 permission slips in the Business Office by Monday and have them for the mandatory parent and student meeting Monday night at MHS at 7:00 p.m.
Tuesday, May 1, 2007
May 2
I would just like to remind everyone that at three minutes and four seconds after 2 AM on the 6th of May this year, the time and date will be: 02:03:04 05/06/07.
We are going to finish our movies and this is a time to share with the rest of the class.
Next we have to return to CSS
Use my handout to make a css file and 2 webpages that usee the css for their decoration.
I have made 2 examples using files I had already created.
http://www.mhsstudents.org/randall/multicss/mrsr.htm http://www.mhsstudents.org/randall/multicss/mrsm.htm
http://www.mhsstudents.org/randall/multicss/firstfruit.htm
http://www.mhsstudents.org/randall/multicss/secondfruit.htm
http://www.w3schools.com/css/default.asp Is a great place for css tutorials
We are going to finish our movies and this is a time to share with the rest of the class.
Next we have to return to CSS
Use my handout to make a css file and 2 webpages that usee the css for their decoration.
I have made 2 examples using files I had already created.
http://www.mhsstudents.org/randall/multicss/mrsr.htm http://www.mhsstudents.org/randall/multicss/mrsm.htm
http://www.mhsstudents.org/randall/multicss/firstfruit.htm
http://www.mhsstudents.org/randall/multicss/secondfruit.htm
http://www.w3schools.com/css/default.asp Is a great place for css tutorials
Wednesday, April 25, 2007
April 26
Finish your movies!
http://www.morguefile.com/ is a site with an amazing collection of free free high resolution digital stock photography for either corporate or public use. Thanks to David for this great site!
Here is a site that has an audacity tutorial. You can use this if you wish to learn how to edit soundfiles http://www.edhsonline.org/other/audacity/
Now you have add your movie to an html document and upload to your folder....this may take some time as the files are large. Here's mine http://mhsstudents.org/randall/movies/
http://www.morguefile.com/ is a site with an amazing collection of free free high resolution digital stock photography for either corporate or public use. Thanks to David for this great site!
Here is a site that has an audacity tutorial. You can use this if you wish to learn how to edit soundfiles http://www.edhsonline.org/other/audacity/
Now you have add your movie to an html document and upload to your folder....this may take some time as the files are large. Here's mine http://mhsstudents.org/randall/movies/
Tuesday, April 24, 2007
April 25
Nice job yesterday with your Picture slideshows using Movie Maker.
Please bring in a CD or mp3 player that can connect to the PC. We are going to use Audacity to add music to your movie. Those who dare can also record naration! If you made a quick movie yesterday why not create another? It's 2 weeks till Mother's day....how about making an Mother's day slide show instead of buying one of those generic boring Mother's day cards!
Please bring in a CD or mp3 player that can connect to the PC. We are going to use Audacity to add music to your movie. Those who dare can also record naration! If you made a quick movie yesterday why not create another? It's 2 weeks till Mother's day....how about making an Mother's day slide show instead of buying one of those generic boring Mother's day cards!
April 24
Welcome back from vacation. Sounds as if everyone had a good one. Great job in "Guys and Doll" Stephen!
Today we will start working with Movie Maker 2. I will give you a hand out that has directions for your first project.
You will need 12 pictures. Bring them in on a flash drive, a CD or even your camera. If you have then on the Internet at a site you can access from school that would be even better.
Today we will start working with Movie Maker 2. I will give you a hand out that has directions for your first project.
You will need 12 pictures. Bring them in on a flash drive, a CD or even your camera. If you have then on the Internet at a site you can access from school that would be even better.
Thursday, April 19, 2007
Thursday, April 12, 2007
April 13
I am still looking for something fun for Friday 13th!
Try and make an animated text image for your websites
http://www.3dtextmaker.com/cgi-bin/3dtext.pl
Try and make an animated text image for your websites
http://www.3dtextmaker.com/cgi-bin/3dtext.pl
April 12
Start a new css page.
Include all the minimal requirements for a correctly formatted web page.
Use the handout to create an menu that would be located at the bottom of the page.
Whatever else you include is up to you.
If you finish this return to your previous css page.
http://www.mhsstudents.org/randall/csslessons/fruitcolumn.html
Include all the minimal requirements for a correctly formatted web page.
Use the handout to create an menu that would be located at the bottom of the page.
Whatever else you include is up to you.
If you finish this return to your previous css page.
http://www.mhsstudents.org/randall/csslessons/fruitcolumn.html
Wednesday, April 11, 2007
April 11
Make sure you have uploaded the last assignment to your csslessons folder.
There are few terms you should know
selector
element
property
value
inherited
css
Please continue researching ways to decorate your page.
Here's my latest
http://www.mhsstudents.org/randall/csslessons/fruitcolumn.html
Notice the links, addition of a picture and the list as well as the dash border
There are few terms you should know
selector
element
property
value
inherited
css
Please continue researching ways to decorate your page.
Here's my latest
http://www.mhsstudents.org/randall/csslessons/fruitcolumn.html
Notice the links, addition of a picture and the list as well as the dash border
Monday, April 9, 2007
April 10
Please finish your adaptation of
http://www.mhsstudents.org/randall/csslessons/pageone.htm
We are now going to work with columns
Go to http://www.mhsstudents.org/randall/csslessons/columnpage.htm
Use mine as your template but edit the page to have your colors, your text, your text formatting.....notice I have a background image.
Can you give the page a different background?
You can use the handout reference guide
Another great CSS tutorial can be found at http://webdesign.about.com/od/css/Cascading_Style_Sheets.htm
http://www.mhsstudents.org/randall/csslessons/pageone.htm
We are now going to work with columns
Go to http://www.mhsstudents.org/randall/csslessons/columnpage.htm
Use mine as your template but edit the page to have your colors, your text, your text formatting.....notice I have a background image.
Can you give the page a different background?
You can use the handout reference guide
Another great CSS tutorial can be found at http://webdesign.about.com/od/css/Cascading_Style_Sheets.htm
Sunday, April 8, 2007
April 9
Please finish your Google Pages website.
It must be a minimum of 3 pages.
Email the website address to christine.randall@gmail.com
Continue working on css
Today we will discuss <div> and <span> tags
You need to create a css folder in your folder at mhsstudents.org
You must put your css document in that folder by the end of class.
The css should include coding for text...include color, align, indent, font, text-transform, text-decoration, set margins for the page.
Use http://www.mhsstudents.org/randall/csslessons/pageone.htm if you need to copy and example
It must be a minimum of 3 pages.
Email the website address to christine.randall@gmail.com
Continue working on css
Today we will discuss <div> and <span> tags
You need to create a css folder in your folder at mhsstudents.org
You must put your css document in that folder by the end of class.
The css should include coding for text...include color, align, indent, font, text-transform, text-decoration, set margins for the page.
Use http://www.mhsstudents.org/randall/csslessons/pageone.htm if you need to copy and example
Tuesday, April 3, 2007
April 3
Continue with CCS and formatting text.
1.Change hyperlink values using css
2.Add background color to your text
3.Change the size of your text
4.Change text to bold and Italics
5.Change spacing of text
6.Insert borders below the text
Here are tutorials to help.
http://www.htmlcenter.com/tutorials/tutorials.cfm/55/CSS/
http://www.echoecho.com/csstext.htm
http://wendypeck.com/css101.html
http://freecsstutorial.com/fct-csstext.htm
If you are looking for text why not pick a department in school and create new html for their course descriptions. One page for each course.
1.Change hyperlink values using css
2.Add background color to your text
3.Change the size of your text
4.Change text to bold and Italics
5.Change spacing of text
6.Insert borders below the text
Here are tutorials to help.
http://www.htmlcenter.com/tutorials/tutorials.cfm/55/CSS/
http://www.echoecho.com/csstext.htm
http://wendypeck.com/css101.html
http://freecsstutorial.com/fct-csstext.htm
If you are looking for text why not pick a department in school and create new html for their course descriptions. One page for each course.
Monday, April 2, 2007
Sunday, April 1, 2007
April 2
CSS
If you read Chapter 7 in you text book you will a detailed explanation of CSS
Cascading Style Sheets.
The newest standards require html to be the code for the content and CSS will take on the responsibility or decorating your page. Coding for CSS can be within the html body but most often is in the head section of your page.
You can also write individual css files when you want your styles to apply to several webpages in one site
CSS Order
A browser style sheet….all browsers have default style sheets. These are common to all white background, black text in Times New Roman, blue links and purple visited links.
A user style sheet ….a view of the a website has the ability to change the settings on the browser of their computer. You can change your browser’s default text font and size and even color
Author style sheets the person who develops the webpage controls the look of the page using < style> </style> tags
Html….if you code design information into your webpage …this will dominate all of the above.
CCS….1.html
2 author creating style
3 user style settings in browser-
4 default settings in browser.
Why use CSS?
Author created style sheets
Are easy to maintain, one change can change several areas of your site or even several pages
Take less code so the file size is smaller
Work better with other media such as cell phones and web page readers for the blind
When used properly advanced CSS with give you more control over the design of the page
You first need a selector . The selector selects the elements in html that will be affected by the rule set. This is everything up to but not including the {
h1
h2
p
are examples of selectors....look familiar? These are also the opening tags in your html coded pages
Next you need the declaration block
h1{…}
h2{…}
p{…}
are examples of selectors with declaration blocks
Next you will need declarations in the declaration blocks
h1{ text-align: center;}
h2{ font-style: italic; }
p{color: maroon; }
Please be very careful with the placement of the colon and the semi-colon
Go to http://www.w3schools.com/css/css_examples.asp
And then to Text “select the color of text”
You can practice the text CSS styles
Assignment
Create a basic web page following the requirements below.
Do not format the text, alignment or color.
Your page should have the following elements:
• Document Declaration for transitional above the opening html
• html,head,title, body tags
• A level one heading that includes your name.
• A short paragraph describing something interesting about yourself
• A level two heading saying something like "My Favorite Places on the Internet"
• A paragraph describing the things you like to do on the Internet
• Save it as me.htm in new folder called csslessons
Now create css and locate it between <style> </style> which are located in the head tags
Create css for the selectors h1, h2 and p.
h1 should be centered h2 italicized and p maroon colored text
Use the tutorial at http://www.w3schools.com/css/css_examples.asp to help you.
You can have multiple declarations for a selector
h1{text-align: center; font-style: italic; color: maroon;} Give it a try!
save this page as aboutme.htm in your csslessons folder
If you read Chapter 7 in you text book you will a detailed explanation of CSS
Cascading Style Sheets.
The newest standards require html to be the code for the content and CSS will take on the responsibility or decorating your page. Coding for CSS can be within the html body but most often is in the head section of your page.
You can also write individual css files when you want your styles to apply to several webpages in one site
CSS Order
A browser style sheet….all browsers have default style sheets. These are common to all white background, black text in Times New Roman, blue links and purple visited links.
A user style sheet ….a view of the a website has the ability to change the settings on the browser of their computer. You can change your browser’s default text font and size and even color
Author style sheets the person who develops the webpage controls the look of the page using < style> </style> tags
Html….if you code design information into your webpage …this will dominate all of the above.
CCS….1.html
2 author creating style
3 user style settings in browser-
4 default settings in browser.
Why use CSS?
Author created style sheets
Are easy to maintain, one change can change several areas of your site or even several pages
Take less code so the file size is smaller
Work better with other media such as cell phones and web page readers for the blind
When used properly advanced CSS with give you more control over the design of the page
You first need a selector . The selector selects the elements in html that will be affected by the rule set. This is everything up to but not including the {
h1
h2
p
are examples of selectors....look familiar? These are also the opening tags in your html coded pages
Next you need the declaration block
h1{…}
h2{…}
p{…}
are examples of selectors with declaration blocks
Next you will need declarations in the declaration blocks
h1{ text-align: center;}
h2{ font-style: italic; }
p{color: maroon; }
Please be very careful with the placement of the colon and the semi-colon
Go to http://www.w3schools.com/css/css_examples.asp
And then to Text “select the color of text”
You can practice the text CSS styles
Assignment
Create a basic web page following the requirements below.
Do not format the text, alignment or color.
Your page should have the following elements:
• Document Declaration for transitional above the opening html
• html,head,title, body tags
• A level one heading that includes your name.
• A short paragraph describing something interesting about yourself
• A level two heading saying something like "My Favorite Places on the Internet"
• A paragraph describing the things you like to do on the Internet
• Save it as me.htm in new folder called csslessons
Now create css and locate it between <style> </style> which are located in the head tags
Create css for the selectors h1, h2 and p.
h1 should be centered h2 italicized and p maroon colored text
Use the tutorial at http://www.w3schools.com/css/css_examples.asp to help you.
You can have multiple declarations for a selector
h1{text-align: center; font-style: italic; color: maroon;} Give it a try!
save this page as aboutme.htm in your csslessons folder
Thursday, March 29, 2007
March 30
You can work on your Google Pages for the first 30 minutes of class.
We are then going to start cascading style sheets.
CSS
Cascading Style Sheets.
The newest standards require html to be the code for the content and CSS will take on the responsibility or decorating your page. Coding for CSS can be within the html body but most often is in the head section of your page.
You can also write individual css files when you want your styles to apply to several webpages in one site
CSS Order
A browser style sheet….all browsers have default style sheets. These are common to all white background, black text in Times New Roman, blue links and purple visited links.
A user style sheet ….a view of the a website has the ability to change the settings on the browser of their computer. You can change your browser’s default text font and size and even color
Author style sheets the person who develops the webpage controls the look of the page using < style> </style> tags
Html….if you code design information into your webpage …this will dominate all of the above.
CCS….1.html
2 author creating style
3 user style settings in browser-
4 default settings in browser.
Why use CSS?
Author created style sheets
Are easy to maintain, one change can change several areas of your site or even several pages
Take less code so the file size is smaller
Work better with other media such as cell phones and web page readers for the blind
When used properly advanced CSS with give you more control over the design of the page
You first need a selector . The selector selects the elements in html that will be affected by the rule set. This is everything up to but not including the {
h1
h2
p
are examples of selectors
Next you need the declaration block
h1{…}
h2{…}
p{…}
are examples of selectors with declaration blocks
Next you will need declarations in the declaration blocks
h1{ text-align: center;}
h2{ font-style: italic; }
p{color: maroon; }
You can have multiple declarations for a selector
h1{text-align: center; font-style: italic; color: maroon;}
Go to http://www.w3schools.com/css/css_examples.asp
And then to Text “select the color of text”
You can practice the text CSS styles
Assignment
Create a basic web page following the requirements below.
Do not format the text, alignment or color. Your paragraphs should have 5 sentences
Your page should have the following elements:
• Your name as a level one header
• "About me" as a level two header
• A short paragraph describing something interesting about yourself
• a level two heading saying something like "My Favorite Things on the Internet"
• A paragraph describing the things you like to do on the Internet
• Save it as aboutme.htm
Now create css and locate it between in the head tags
Create css for the text in h1, h2 and p. Use the tutorial at http://www.w3schools.com/css/css_examples.asp to help you.
We are then going to start cascading style sheets.
CSS
Cascading Style Sheets.
The newest standards require html to be the code for the content and CSS will take on the responsibility or decorating your page. Coding for CSS can be within the html body but most often is in the head section of your page.
You can also write individual css files when you want your styles to apply to several webpages in one site
CSS Order
A browser style sheet….all browsers have default style sheets. These are common to all white background, black text in Times New Roman, blue links and purple visited links.
A user style sheet ….a view of the a website has the ability to change the settings on the browser of their computer. You can change your browser’s default text font and size and even color
Author style sheets the person who develops the webpage controls the look of the page using < style> </style> tags
Html….if you code design information into your webpage …this will dominate all of the above.
CCS….1.html
2 author creating style
3 user style settings in browser-
4 default settings in browser.
Why use CSS?
Author created style sheets
Are easy to maintain, one change can change several areas of your site or even several pages
Take less code so the file size is smaller
Work better with other media such as cell phones and web page readers for the blind
When used properly advanced CSS with give you more control over the design of the page
You first need a selector . The selector selects the elements in html that will be affected by the rule set. This is everything up to but not including the {
h1
h2
p
are examples of selectors
Next you need the declaration block
h1{…}
h2{…}
p{…}
are examples of selectors with declaration blocks
Next you will need declarations in the declaration blocks
h1{ text-align: center;}
h2{ font-style: italic; }
p{color: maroon; }
You can have multiple declarations for a selector
h1{text-align: center; font-style: italic; color: maroon;}
Go to http://www.w3schools.com/css/css_examples.asp
And then to Text “select the color of text”
You can practice the text CSS styles
Assignment
Create a basic web page following the requirements below.
Do not format the text, alignment or color. Your paragraphs should have 5 sentences
Your page should have the following elements:
• Your name as a level one header
• "About me" as a level two header
• A short paragraph describing something interesting about yourself
• a level two heading saying something like "My Favorite Things on the Internet"
• A paragraph describing the things you like to do on the Internet
• Save it as aboutme.htm
Now create css and locate it between in the head tags
Create css for the text in h1, h2 and p. Use the tutorial at http://www.w3schools.com/css/css_examples.asp to help you.
Wednesday, March 28, 2007
March 28th
You should upload your frames page TODAY.
Please check out the domain extensions
http://www.computeruser.com/resources/dictionary/noframes/nf.domains.html
code for framesetpage http://www.mhsstudents.org/randall/teachers/
Please check out the domain extensions
http://www.computeruser.com/resources/dictionary/noframes/nf.domains.html
code for framesetpage http://www.mhsstudents.org/randall/teachers/
Tuesday, March 27, 2007
March 27
By now you should have published a frames project to your folder in mhsstudents.org.
Your menu page of your frames project should link to at least 4 pages or external sites.
Have you found a good domain name?
Go to http://www.goddady.comand create a good domain name.
You should look on the Internet to find out what is a domain name? A host or server? A server IP address.
What is the function of Interic? http://www.internic.net/
Where can you host your website? If you have Comcast or Verizon you have server space.
What is ftp software?
A free version called Smart FTP is available from Smart FTP
Your menu page of your frames project should link to at least 4 pages or external sites.
Have you found a good domain name?
Go to http://www.goddady.comand create a good domain name.
You should look on the Internet to find out what is a domain name? A host or server? A server IP address.
What is the function of Interic? http://www.internic.net/
Where can you host your website? If you have Comcast or Verizon you have server space.
What is ftp software?
A free version called Smart FTP is available from Smart FTP
Friday, March 23, 2007
March 23
I'm back.
Today I want you to check your grades.
You can access these grades at http://home.comcast.net/~christine.randall/grades/
You will need to log in with your name and your ID-YOG
Christine Randall 5555-05 Capitals count!
Angelo, Dan and Robert. Since I have you in 2 classes you will need to put a G at the end of your last name.
Today we will tie up loose ends,
Document Type Declaration Read about Document Type Declaration at http://en.wikipedia.org/wiki/Document_Type_Declaration
Download and save a text file with Document Type Declarations from http://mhsstudents.org/randall/declaration.html View the source and copy it to a text file. Save this where you can always find it. Document type declaration is entered before the opening html tag...believe it or not!
Meta Tags Read about Meta tags at http://en.wikipedia.org/wiki/Meta_tagGenerate code for Meta tags at http://vancouver-webpages.com/META/mk-metas.html
Today I want you to check your grades.
You can access these grades at http://home.comcast.net/~christine.randall/grades/
You will need to log in with your name and your ID-YOG
Christine Randall 5555-05 Capitals count!
Angelo, Dan and Robert. Since I have you in 2 classes you will need to put a G at the end of your last name.
Today we will tie up loose ends,
Document Type Declaration Read about Document Type Declaration at http://en.wikipedia.org/wiki/Document_Type_Declaration
Download and save a text file with Document Type Declarations from http://mhsstudents.org/randall/declaration.html View the source and copy it to a text file. Save this where you can always find it. Document type declaration is entered before the opening html tag...believe it or not!
Meta Tags Read about Meta tags at http://en.wikipedia.org/wiki/Meta_tagGenerate code for Meta tags at http://vancouver-webpages.com/META/mk-metas.html
Tuesday, March 20, 2007
March 21
Sorry I am out once again. I promise I will be back for the block on Friday. In the meantime please continue to work on you frames pages. By the end of this class you should have uploaded via ftp://www.mhsstudents.org both of your tables pages. The color version and the grayscale or sepia version.
You should also have finished and uploaded a frames page. Four files are needed, the frameset, the menu page and 2 main pages. Check the previous blog entry for links to my frames pages. Just a reminder... the reference to top in the frameset is the top or side menu. The reference to main is the place where the main content of you site is visable.
Now you need to create a tables page without borders. This is done in the frameset file. Go to http://www.echoecho.com/htmlframes04.htmfor help creating a frames page without borders.
Can you create a directory like mine? http://www.mhsstudents.org/randall/teachers ? I know you can be creative and develop your own idea...perhaps a photo album.....or a team roster click a name and the frame reveals the player.
Jason!!! go to http://www.mhsstudents.org/jason/forjason.html and use this to help you set up your favorite author page.
You should also have finished and uploaded a frames page. Four files are needed, the frameset, the menu page and 2 main pages. Check the previous blog entry for links to my frames pages. Just a reminder... the reference to top in the frameset is the top or side menu. The reference to main is the place where the main content of you site is visable.
Now you need to create a tables page without borders. This is done in the frameset file. Go to http://www.echoecho.com/htmlframes04.htmfor help creating a frames page without borders.
Can you create a directory like mine? http://www.mhsstudents.org/randall/teachers ? I know you can be creative and develop your own idea...perhaps a photo album.....or a team roster click a name and the frame reveals the player.
Jason!!! go to http://www.mhsstudents.org/jason/forjason.html and use this to help you set up your favorite author page.
Thursday, March 15, 2007
March 16
I can't leave html without showing you frames. At one time they were to pinical of website design!
There is a minimum of 3 files required
.....frameset
.....frame top or sidebar
.....frame main for the chosen file
The frameset page controls how the 2(or more) frames will be displayed.
Go to http://www.mhsstudents.org/randall/framesetrow.html and you will see a frames page set in rows.
Go to http://www.mhsstudents.org/randall/framesetcol.html and you will see a frames page set in columns.
Create your own.
You can do red white and blue, white top, blue page and red page for the main pages.
Or Dark Green, Light Green and a white top....Sort of St. Patrick's Day Theme!
make a directory called frames in your folder.
3 files will be located there.
More info can be found at
http://www.htmlcodetutorial.com/frames/frames_famsupp_5.html
There is a minimum of 3 files required
.....frameset
.....frame top or sidebar
.....frame main for the chosen file
The frameset page controls how the 2(or more) frames will be displayed.
Go to http://www.mhsstudents.org/randall/framesetrow.html and you will see a frames page set in rows.
Go to http://www.mhsstudents.org/randall/framesetcol.html and you will see a frames page set in columns.
Create your own.
You can do red white and blue, white top, blue page and red page for the main pages.
Or Dark Green, Light Green and a white top....Sort of St. Patrick's Day Theme!
make a directory called frames in your folder.
3 files will be located there.
More info can be found at
http://www.htmlcodetutorial.com/frames/frames_famsupp_5.html
Monday, March 12, 2007
March 12, 2007
Hello everyone!
Sorry I had to miss today due to a family crisis....I'd much rather be in school!
Let's finish all work on tables today and then we can move on. I can see a few of you applauding as you read this is the end of tables!
Please help your neighbor. If you are finished before the others help someone else!
(Jason if you can continue to work on the table tutorial please do so. go to http://www.mhsstudents.org/jason/forjason.html save this file and play around with it.)
You are to create a colorful table page for your theme. Similar to http://www.mhsstudents.org/randall/colorfruits.html It must have links to the larger graphics and the thumbnails are in a table. Position the table data cell. This is called nested tables.
When this is done upload your page to mhsstudents.org using ftp://www.mhsstudents.org
Be careful to only upload into your folder. Yours will have a name that relates to your theme. Make sure your images and your thumbnails are in your image folder.
Now let's make another version. I chose to go grayscale.http://www.mhsstudents.org/randall/grayfruits.html. I used Irfanview to make a gray thumbnail of each color thumbnail.
Notice how I made my address hyperlinked. This anchor tag a href="mailto:christine.randall@gmail.com" will cause the user's computer to open the default mail program. Upload your second version.
Please spend the last 10-15 minutes looking for a "How'd they do that site!" We will check those out tomorrow!
Sorry I had to miss today due to a family crisis....I'd much rather be in school!
Let's finish all work on tables today and then we can move on. I can see a few of you applauding as you read this is the end of tables!
Please help your neighbor. If you are finished before the others help someone else!
(Jason if you can continue to work on the table tutorial please do so. go to http://www.mhsstudents.org/jason/forjason.html save this file and play around with it.)
You are to create a colorful table page for your theme. Similar to http://www.mhsstudents.org/randall/colorfruits.html It must have links to the larger graphics and the thumbnails are in a table. Position the table data cell. This is called nested tables.
When this is done upload your page to mhsstudents.org using ftp://www.mhsstudents.org
Be careful to only upload into your folder. Yours will have a name that relates to your theme. Make sure your images and your thumbnails are in your image folder.
Now let's make another version. I chose to go grayscale.http://www.mhsstudents.org/randall/grayfruits.html. I used Irfanview to make a gray thumbnail of each color thumbnail.
Notice how I made my address hyperlinked. This anchor tag a href="mailto:christine.randall@gmail.com" will cause the user's computer to open the default mail program. Upload your second version.
Please spend the last 10-15 minutes looking for a "How'd they do that site!" We will check those out tomorrow!
Wednesday, March 7, 2007
March 7
Continue to work on your tables.
We will use tables to design the structure of the webpage
http://home.comcast.net/~christine.randall/fruits/tablelayout1.html
http://home.comcast.net/~christine.randall/fruits/tablelayout2.html
View the source and save it to your computer.
Now work with this file and customize it to make it your own
Possibilites include 2 rows on the top with one large area underneath....1 row across the top and 3 columns under.
You can now incorporate your "theme page" into a tables page.
Change the colors. Remember to use color scheme sites from previous classes
We will use tables to design the structure of the webpage
http://home.comcast.net/~christine.randall/fruits/tablelayout1.html
http://home.comcast.net/~christine.randall/fruits/tablelayout2.html
View the source and save it to your computer.
Now work with this file and customize it to make it your own
Possibilites include 2 rows on the top with one large area underneath....1 row across the top and 3 columns under.
You can now incorporate your "theme page" into a tables page.
Change the colors. Remember to use color scheme sites from previous classes
Tuesday, March 6, 2007
March 6
Continue to work on tables.
http://www.htmlcodetutorial.com/tables/index_famsupp_27.html
Is a great tutorial
Today we will cover rowspan and colspan
Add a gif background to your table
http://www.htmlcodetutorial.com/tables/index_famsupp_27.html
Is a great tutorial
Today we will cover rowspan and colspan
Add a gif background to your table
Friday, March 2, 2007
March 2
If you have not uploaded your first web page, and images in an image folder to Geocities please do so now. If you cannot accomplish this see me.
I want you to have your site in our mhsstudents.org site (a paid hosting service) and a free hosting service Geocities
Please finish your theme site with thumbnails.
You must include in your img tags the size of the images. Whenever you include images you should always include image sizes.
Why can't I just make my html code change the large image to a thumbnail size you ask.
Resizing images with an image editor to thumbnails will reduce the size of the file. Just entering image size code does not. The goal is to have you page load as quickly as possible. When you have smaller image file sizes this will happen.
Once you have finished this page print the code page. Use the comment tag to include you name in the heading of your page. Please pass this in.
Now we will start tables.
I am going to try an online tutorial for this activity go to
http://www.tubetorial.com/code-tables-html/
Follow the instructions (the pause button is on the lower left corner of the movie)
Please name your file "tables.html"
Bring your books in on Monday. We will be working on chapter 16 page 227 "Tables"
I want you to have your site in our mhsstudents.org site (a paid hosting service) and a free hosting service Geocities
Please finish your theme site with thumbnails.
You must include in your img tags the size of the images. Whenever you include images you should always include image sizes.
Why can't I just make my html code change the large image to a thumbnail size you ask.
Resizing images with an image editor to thumbnails will reduce the size of the file. Just entering image size code does not. The goal is to have you page load as quickly as possible. When you have smaller image file sizes this will happen.
Once you have finished this page print the code page. Use the comment tag to include you name in the heading of your page. Please pass this in.
Now we will start tables.
I am going to try an online tutorial for this activity go to
http://www.tubetorial.com/code-tables-html/
Follow the instructions (the pause button is on the lower left corner of the movie)
Please name your file "tables.html"
Bring your books in on Monday. We will be working on chapter 16 page 227 "Tables"
Tuesday, February 27, 2007
February 28th
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
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
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)