Remember, this assignment has a strict set of required elements.
Once the site is working, you need to create:
We will learn about graphic creation later in the semester. For now, there are a couple of things to know about pictures and Web sites; standard graphic formats and placement of images
Graphic files must be compressed to make them small enough to be practical on the Web. This is so important that browsers will not display uncompressed graphics. Currently there are two standard formats for graphics compression on the Web - gif and jpeg*.
gif is used for simple graphics such as logos and solid drawings. It only allows the use of 256 colors and is best for smaller, uncomplicated images. Files use the .gif extension.
jpeg is used for more complex images such as photographs and larger files. It allows the full color palate. Files use the .jpg extension.
All graphics files we use will be one of these two formats. What's the difference?
We used to use the <p> tag to align images. For instance, code might have looked like this:
You also had the option of getting a sort of text wrapping by using the align attribute in the img tag. For instance:
A graphics that has text flowing to the left.
Note that paragraphs would continue to appear until the bottom of the
graphics or you used <br clear="left">
Which puts the text here.
This is just a quick idea about images if you want to start working with them. But be aware that all placement is now handled by CSS, and we'll get to that when we explore the box model.
Lets put some graphics in our home page. We'll start with the same graphic to follow the workflow for taking a Photoshop file to the web. Then you will be free to place your own pictures there.
Un-compress it, and we will then flatten, export, save in our directory, link and synchronize it.
There are some more esoteric HTML tags to understand in order to make you site findable, more flexible for CSS and more interesting. They include:
Monday, March 28, 2011 11:07 AM