Good afternoon class!
We will be using this space to discuss this week's lesson. If you noticed the postings on the pgrocer.net website, she requests 2 assignments to be turned in. I am looking to only collect the "Assignment on images and tables". I will be covering frames in class next week.
Please be sure to reference the Tables and Images section of the "XHTML sample code" page. Remember, your goal is to always validate strict, but transitional validation is also acceptable. Transitional just happens to be a more lenient form of validation. Be sure to reference the appropriate code references from the "XHTML sample code" page as you move along. The key is to compare the tag usage. If you notice, several of the "strict" validation references use CSS as opposed to in-line style references.
I will be in and out of the Blog throughout the day and I will be checking it throughout the week as well. I highly encourage you to interact with one another so post away!!
Subscribe to:
Post Comments (Atom)
47 comments:
Okay, I will start work on the assignment today and look at the samples on the pgrocer.net website. If I'm stuck today, I will come and post on this website. I will let you know how I did today.
Jessica Lappin
For the assignment on tables and images, can anyone tell me how many web pages we need to make? Thanks
Hi Folks...Nan here....
Natalie, I can easily see this going into a second page. I think I will let it flow to another page and just link them back and forth.
Upon closer examination of the required elements...this will definitely be a multi-page site. Note the last bullet "Have links between your pages...."
Thanks, I guess I'll just see how it goes when I start working on it
Hi, I believe that some of the requirements will require a separate web page. For example the requirements for using background images, etc. would seem to lead us to needing a separate web page. Thanks
I finally managed to get into this blog, never having done it before. I'll have to see the samples but I would guess more than one page.
Rita
Also, as we find sources for images, backgrounds, etc. we can post them here...to share.
Be sure to search for copyright free images too or I'm going to use as many of mine as I can.
Yes...."copyright free"...very important. I have things of my own that I use too...less complicated. Photos, etc.
Today, I looked at the table codes and how to figure out the codes. It was little hard to figure the codes first but I figured it out. I already created two tables, one without borders and other with borders and cell padding. I'm going work on more this week to figure the codes to put the images on the page. Thanks!
Hello Everyone! First off, I'm very happy to see you posting away. Keep up the great work!
I received a question via email asking what columnspan and rowspan was, and how do they function?
To see examples of this in use, you may want take a look at the source code within the following link: http://www.pgrocer.net/Cis44/XHTML/tables/CISF03X.html.
Notice that after the table is initialized, th colspan="6"> is used. This indicates that the row should span 6 colomns. I.E. "MRS. GROCER'S SCHEDULE - OFFICE: K112" spans across the following columns/column headings: HOURS, MONDAY,TUESDAY, WEDNESDAY, THURSDAY, and FRIDAY. The same idea follows for the rowspan function, whereas the rowspan would span the indicated number of rows as opposed to columns.
I hope this helps!
Please remember to post your questions/comments to the blog rather than just email me directly. Posting will not only help answer questions that others may have, but it will also help everyone learn from one another as you progress through the assignments.
I have some sites for reference such as they are:
http://www.htmlgoodies.com/
and I love color so I have two:
http://www.hypergurl.com/colormatch.php
http://www.geocities.com/SiliconValley/Network/2397/
I was thinking about the requirement that specified that we need to provide a way (set of links) to move through all the pages we create for the homework.
Would it be acceptable to create a page that contains a 'Table of Contents'. This would be a table, though it wouldn't have to be, that contained links and descriptions to all of the other pages that I create. Then on each page, I would just have a link to go to the table of contents page and from there you can navigate to the other pages.
Most web sites have a navigation bar or section on all of their pages, and this idea of creating a table of contents page is similar to that. Perhaps when we learn about frames, this table of contents can be included in with all of the other pages I create.
Rose, please let me know if this would be acceptable to you.
Thanks,
Bret
Hi, I'm working on the assignment and I'm getting know how to do some parts of the assignments to create the web page, but I'm little confused on some parts:
Use an image that you create,
Find a bar or line image somewhere on the Web and use it.
Post a source for images, background and bars or lines on the del.icio.us site. Do we need to tell we used this on del.icio.us on the page like compare with MLA format for English or Reaserch papers?
Let me know how do this. I just want to make sure I do this right way.
Thanks,
Jessica Lappin
Bret - That would be just fine.
Jessica - Great questions! My answers are below:
1) You may create an image using "paint". Start >> All Programs >> Accessories >> Paint
2) An example of where you may go to find a bar/line image is http://freewarefiles.com/category/web_graphics/lines.php
3) You don't need to worry about the del.icio.us site just yet. You may post your resources on the blogger.com website for the time being.
Rose
Looks Like most everyone else is a bit ahead of me on coding for this hmwk. I missed the "image you create" as I was thinking of simply using my photos. I can make something up in one of my graphics pgm.
What is the difference between using a JPEG & a GIF in HTML? I save all my images as JPEGs and can make them any size.
To learn a bit more about .gif vs. .jpg, you should go to: http://www.siriusweb.com/tutorials/gifvsjpg/ or search additional websites that might have some more insight.
Rita - as for image size within html, you can specify the height and width within the image tag.
I'll check the sirus site out. I was able to log in this time.
I have a question this time. I had this problem with the last hmwk also. I am using Internet Exp. and the hex colors don't seem to want to display for me. I have to use the word as in "red" etc which I find limiting to say the least. Is is due to IE? Or is it something I have set up in my profile? Is anyone else having this problem? Thanks.
A few more questions -
I know how to link within a page and to other pages if they are online, but how do I link between mine if they don't have a web address? And I'm also very confused about the delicious site if someone could give me a quick walkthrough I don't know exactly how to use it and do I need to create an account? Thanks very much!
Hi folks...
I sure appreciate some of the nice links that are being posted. Thanks everyone!
I have been working on this and checking my validation every now and then, and finding it hard to get a strict validation, particularly if I wander into too much inline formatting. I know the W3C is pushing us more to CSS, and much has happened since I studied coding in 2000...so I am working to put as much as possible into CSS styles. Sometimes, my inline coding just gets rejected (stuff that I thought was standard and kind of innocuous)and I go over it making sure I did it correctly, and I thought I did, but alas. The standard is changing fast though, right? I suppose if I use transitional, it would get accepted faster, but I am really aiming for strict validation. Is anyone else encountering this?
Rita:
I too have "IE Issues". My IE is old...IE5, because you cannot get a recent one for OSX, so I have to use IE5, which switches over to the OS9 side. So, I will put my site on my flash drive and put it on a Dell laptop, to see how it looks on a newer IE.
Natalie, first off, both your web pages need to "ive" in the same folder.
Second, set up an area in the linking to webpage(page 2) so page one has a spot to link to. Page 1 needs an anchor.
Third, set up a link on page 1 using your file name for page 2
being sure to keep your .html extension on it. This is my file name:
CIS44-3HA-HW2_RMcLaughlin.html
Be sure to use the correct linking code. The pgrocer site for links shows the html you need.
hope this helps.
Let me know.
Rita
Thanks Nan, it appears we're both on at the same time! I too am having some trouble getting strick validation. I keep missing tiny things like<> :)
Natalie, I believe Rose said in a previous post we can skip the delicious site right now.
I've looked at it and of course first site there I clicked on was XXX :(. Not too happy! We would have to register to use. It appears to be a huge on-line sharing of bookmarks site.
Rita
Rita,
You are a photographer, right? So, you are used to jpgs. Are you using Photoshop?....you can optimize or Save for Web from there, and the optimization function will open. Choose 4-up, to display the original and 3 other versions of the image. Then you can select one, and play with settings.
Gifs are frequently used for "non-continuous color" images, meaning simple flat color/fewer colors...perhaps simple illustration or an icon or something kind of cartooney. But nothing is carved in stone - it varies a lot. If you optimize though....just keep your original intact...Optimization degrades the image, ...with the intention of getting a smaller file size (which makes for faster load on a page). What's gone is gone for good, so don't save on top of your original!
NAN - Thanks for the tip. I'll try it. In the past I was always having trouble emailing my digital photos due to size. :(
I found a site: it said in general to use gifs for illustrations, clipart & images with large areas of flat color, use jpgs for photos & images w/continous tones. gifs only have 216 colors available to them and dither the color.
Rita
http://www.webwitchery.com/articles/format/
Hi,
I spent about 45 minutes today validating the web pages I created. I finally was able to get all of my pages to validate as strict.
Much of the time when I had a problem where I used an html approach that wouldn't validate, I was able to find an example on pgrocer.net to use to help me find a css equivalent.
I also had to use Google a few times. If you need to know how to align an image, a search string like (don't use the quotes) 'css img align center' would generate a set of links that generally descrbe how to do what I wanted to do.
I also found a pocket reference for html and xhtml and one for css at borders. They cost around $12 each but so far they were worth the price.
I hope this helps. I gained confidence once I was able to get the first few pages to validate as strict.
Bret
Hi,
For part of the homework we are suppose to post the urls for some of the images we found or used.
It is a long story, but several years ago I took a drawing class and found this site that contains images for Drawings and Paintings by Vincent Van Gogh. For my final project for the class I recreated Van Gogh drawing called Sien's Mother's House.
I used an image of this drawing for my background image. Even if you are not into art, you'd be amazed by this site (the note on blogger.com says you can use the anchor html tag, I hope it works).
Vincent Van Gogh Gallery
It might seem strange but I also used Google Maps to create an image and then used it as the icon for a link to an external web site. What I did was entered the address of our house near the ocean in Marshfield MA and then
used the 'print screen' support on the key board and supported by windows to put the image on the clip board.
Then I used a program called Paint.net that is free program similar to 'Paint Shop' to just keep a portion screen print for my image. The Paint application that comes with Windows works as well (Vista's version is better than XP's, because it support formats other than .bmp bitmap files). But paint doesn't have near the options
as Paint.net.
I also used an image from pgrocer.net.
Finally, I found a web site that has icons that you can use for a number of purposes. I used on icon from the site
Icon Images
to replace the standard unordered
list bullet with a larger blue globe.
I had a lot of fun with this assignment.
A added links to the pages with the images I used that will take you to site where I found the images. I added a link to a specific book on Amazon.com.
Just go to Amazon, search
for the book and once you find it, copy the url from the address and use it as the href. Be careful because sometimes the url will have a & which won't validate. You have to change the & to & and then the html will validate as strict. I found the solution to this problem using Google.
The one thing I did that I got the most enjoyment from was from the web page with Van Gogh's drawing as
my background image, I added a link to youtube.
So when you click the link and you are online, youtube will come up and automatically start the music from Don McLean's song "Starry Starry Night", which is a sad
but beautiful song about Vincent Van Gogh's life. The Video is a number of images of paintings
by Vincent Van Gogh that change to match the lyrics from the song.
I used to think that building a web page for fun meant that I had to create all of the content. But by including links to other sites that you find interesting you can create a web site that provides enjoyment because it lets you think and talk about the things that interest you. And if you place your web site online
the people's whose web sites you link to benefit as well. The search engines take into account how many other web sites reference a web site. The larger the number, the higher the other web site(s) ranking is and the more likely people searching for something will find the web sites you link to. And by linking to other sites, the people who created those sites get the credit they deserve for their hard work.
Sorry this is soooo long. Just try to have fun. It really is amazing what we all have access to on the
web.
Bret
Bret - I bought a couple of books from Borders also, but the HTML one doesn't seem to match. The book I borrowed from the library does and I'm going to try to get it from Amazon.com.
I have to say your newest web page sounds neat & I'd like to see all our finished projects at the end of our course.
Rita
Rose, I am having a difficult time creating a line with an icon to use to travel from page to page. I am cutting & pasting from the examples and mine still don't work correctly.
The icon shows up, but cannot be clicked on and my address line shows up and can be clicked on.
Oh yes, the whole thing validates too.
I have noticed the samples don;t all work either. At least not on my PC.
Rita
Thanks for the help again.
I think I'm just about done so here are the sources I've used so far:
http://www.t0.or.at/spiral23/spiral.htm
http://freewarefiles.com/category/web_graphics/lines.php
http://www.halloween-online.com/pumpkin-carving.jpg
Hello Rita,
If you take a look at the source code on http://www.pgrocer.net/Cis44/XHTML/images/moreimX.html, you should see that the image code lives within the link tags (i.e. < img style="border: none" width="50" height="50" src="CISa.gif"
alt="CISa" />).
Does this help?
Rose
Let's try this again.... My previous post converted the image code into a link rather than posting the a href code along with the image code. If this second attempt does the same thing, just reference the pgrocer.net webpage I included in my previous post.
Here we go..... (<)a href="bigimX.html">(<)img style="border: none" width="50" height="50" src="CISa.gif"
alt="CISa" />(<)/a>
Note: I tried again and it won't let me post so I am placing parenthesis around the < to try to trick it. I may be stating the obvious, but just to avoid any confusion, please be sure that you don't actually use the parenthesis in your code.
Greetings,
I have some links to add here:
http://www.webpagebackground.com/
http://www.allfreebackgrounds.com/bars.html
http://speckyboy.com/2008/03/04/top-40-free-icon-resources-for-web-designers-updated-speckyboy/
I found a nice background on the first one. Also, I sometimes use things from Illustrator, or just take an image I have and reduce and optimize.
Rose, thanks! your explanation did the trick. I got it to work this am. Now I don't have much left to master. :)
Rita
James posed a good question to me via email so I am posting my response to share with everyone. In HW #4, there is a requirement to "Find a bar or line image somewhere on the Web and use it". What I had used in the past included things from the following website: http://freewarefiles.com/category/web_graphics/lines.
Please post any additional online bar/line references here to share with others.
Thanks!
Rose
Thanks for the help with bar or line image. I will try it tonight and make another post after.
Here are the links for the websites that I used for my images:
http://adus.imageg.net/graphics/product_images/pADIDAS1-4530841_pattern_t132.jpg
http:\\www.adidas.com
I have links that both work on IE6 but they dont both work on IE7. It is very weird. The pages were created on a computer with IE7. It seems like IE7 has some issues or there is something that is missing. Any ideas.
Rita I have had issues with colors and stuff displaying in IE6 but not IE7. I think IE7 has some issues.
Hi,
I'm running IE 7 on Vista and I also have Firefox installed. While the colors don't always look the same I was able to get the colors that I expected with IE 7.
In case you want to experiment with creating images and can't affort Photo Shop; I mentioned earlier that there is an open source program with similar features to photo shop called paint.net. I'm certainly not an expert with this program but it does seem to have a lot of features.
You can download it from Paint.Net. Just to make it clear, I haven't used it a lot but I installed this several months ago when I was looking at Photo Shop and didn't want to spend that much money since I was just trying to understand how these products work.
Bret
Bret & James - I have Vista & I am also using IE7. WHich tells its own tale. :( I also have Photoshop which I bought a few years ago. I just love Photoshop.
I should try my pages on our PC w/Firefox to see if the hex colors display but what with the homework taking quite a bit of my time I just haven't had the energy to try! :(
This assignment was interesting. I am enjoying getting more acclimated to CSS. I tried to put just about all my formatting that way, because I found that when I tried to validate, I could not get a strict validation over stuff like aligning an image within the page.
I was a bit befuddled in the beginning. I had HTML back in 2000, but things have evolved so much. In 2003 I studied print layout, really got into InDesign (worked doing page layout) and realized the huge discrepancy in typeface control...something you USED to not be able to get with plain old HTML. BUT....then as I've rediscovered web layout, with CSS, it is wonderful to learn that I CAN control things more. I love it!
I want to share some information about tables and formats.
http://robertdenton.org/reference/css-tables-tutorial.html
http://www.tizag.com/cssT/border.php
Interesting images
http://www.animationlibrary.com/
http://www.thegardenhelper.com
this is a great place to go for codes, css and color.
www.webmonkey.com
Post a Comment