Class 7: HTML continued: Images, Tables, Frames

Class 7: several important reminders and information.

There is probably too much information here for your attention span, but try to forge through to find not only a summary of last week’s information, but the info you will need for this week. Read this page “diagonally” if you need to.

REMEMBER to include all of the technical requirements

Your web site MUST contain these technical details: ALL WRITTEN IN HTML in simple text (no editing software. For CSS or Java, talk to me first.) Do NOT host your site online (it’a question of copyright).

- different fonts (la police du texte)

- different sizes of lettering,

- different colors

- tables,

- at least one list (ordered or numbered)

- images

- varied layout of text and images (not exactly the same thing on each page)

- internal links (anchors to places inside the same page)

- external links (to a new page AND to a new URL)

- at least 3 distinct web pages (in English with original content) linked together

- at least one other function (or productive TAG).

- navigational tools and logic

Keep your pages simple, so that everything works. Test it on several different computers before handing it in on the last day of the semester (3^rd/ 4^th May : NO late websites accepted).

In addition, the content is worth 50%. So, you must write at least 50-100 words per page of original content. Copying is tempting, but DON’T DO IT. Also, a list of simple words is also not considered “written text”.

As a note : behind the scenes of HTML

What do the acronyms HTML and HTTP stand for? Who created these and when? (this was from the first part of the class… the history of the internet)

Behind every website is a programming language in a code which gives instructions to the computer. You can see this with any webpage. Go to the top menu bar and open ‘Display’ (affichage), then -->’source’. This will open a window with the CODE. On some pages this is complicated, and the programmers have used special software (do you know any?) but in fact the basic HTML code is quite easy and accessible to anyone, with a little patience and rigour.

NECESSARY vocabulary to learn: What are the following? (if you don’t know already, look these words up at home!)

Pointed brackets Slash (forward slash) Back-slash Colon Equal sign Quotation marks Number sign CODE (as in the code YOU write) Attribute

Space Bold Italic Font Align (right, left or center) Desktop Color code Tutorial Tag

Reviewing and continuing HTML

Here are some things we did in class last week:

Paragraphs: (when you want to start a new section or « aller à la ligne »)

http://www.davesite.com/webstation/html/chap03.shtml

Aligning: this function has changed recently. You can use either the new CSS style or old “Depreciated” forms or the DIV tag. http://www.w3.org/TR/html401/present/graphics.html or http://www.faqs.org/docs/htmltut/_DIV_ALIGN.html

Font Attributes: look for how to write bold, italic and underlined text as well as for “citations”.

http://www.yourhtmlsource.com/text/textformattinglist.html

Inserting color:

Colors in HTML are represented by a series of numbers (or by the basic names for colors such as Red, Yellow, etc, but you have more variety with the color codes).

For some color codes, try: http://www.immigration-usa.com/html_colors.html. There are MANY sites with color codes!! Google the keywords color code HTML (or similar keywords)

Color for Text. The text is called FONT (or “basefont” to apply to the entire webpage). For simple instructions, follow this tutorial: http://www.echoecho.com/htmltext.htm. Make sure to click on the READ MORE button at the bottom of the page.

Background color is also interesting to add. This added to your code inside the TAG as what we call an “attribute”. So, write inside the BODY tag the added attribute of bgcolor (all of this is INSIDE the pointed brackets).

body bgcolor=”color code”

NEW HTML:

Inserting images in general

Images add interest and excitement to your Web pages, and they are fairly easy to add. You can do this by clicking on the right mouse and saving the image in your own folder.

There are numerous file formats for computer graphics, though the most common for websites are GIF and JPG.

- The standard format that can display within a web page is GIF or Graphics Interchange Format. The GIF compresses the picture information (reduces the file size) and translates it to binary code that can be sent over the Internet. GIF compression is most effective on graphics that have contiguous areas of solid color, and compression is even greater when the color is continuous in the horizontal direction. GIF images have the feature of defining a color to be "transparent" so images can appear to have non-rectangular boundaries. They can also be saved in the "interlaced" format so that when you see a web page, the images start to appear soon and "dissolve" to the final image.

- The other file format used on the web is JPEG (named after the Joint Photographic Expert Group that designed this format). JPEG compression is very effective for photographic images where the colors can vary spatially over short distances. JPEG offers some dramatic compression in filesize, sometimes by a factor of 10 (e.g. a 1500 kb file reduced to 150 kb), which may be at a trade-off for some image quality. JPEG images do not have the ability to have transparency.

If you want to use an image for the background, use the “background” attribute in the BODY tag. Remember to slide the pointed bracket over to make room for the attribute INSIDE the tag.

body background="filename.gif" (here, pointed brackets should be present but are not due to the blog format)

For any image, you must give the EXACT location of the file and the precise name, e.g. body background="C:\Documents and Settings\MmeBays\Bureau\ HTML page/gray_fabric.gif"

Hint: keep ALL of your images in the folder you began called YOURNAME_WEBSITE. This will allow any computer to find them easily.

Try the tutorial for backgrounds: http://www.echoecho.com/htmlbackgrounds02.htm

Use an image created for the background or if you don’t like the mosaic effect, you will need to use the NO-REPEAT function in CSS.

ADD PICTURES

Now start adding images by following the instructions given on this page:

http://www.yourhtmlsource.com/myfirstsite/basicimages.html (scroll down the page!)

The TAG for images is img src=”imagefile.gif”

You can insert images that are already on the web by giving the URL of the image. Don’t forget that to read these, the computer has to be connected to the internet.

img src="http://www.echoecho.com/rainbow.gif"

To find this address, right click to find the Properties of the image and copy the Emplacement.

There are three other attributes that you can include width, height, and alt. The width and height attributes tell the browser how big the image is. This allows the Web page to render more quickly, as the browser can allocate space for the image and then move on to the rest of the page while the image downloads.

To change the size of the images

http://www.mediacollege.com/internet/html/image-tag.html

http://www.yourhtmlsource.com/images/furtherattributes.html

ALT is a description that will replace the image when it is not there. You can write img alt=”horses running” scr=”horses.gif”

Remember, you must have an image ready to insert before you begin this chapter.

TABLES are a good way to put images on your page. First, insert the table, then insert the image as the content of the table. You can even make the border of the table invisible…

Here’s the beginning: http://www.w3schools.com/html/html_tables.asp

More advanced tables: http://www.yourhtmlsource.com/tables/advancedtables.html (you can also check out their basic tables page).

FRAMES: many of you want to do frames in your pages. Great. Here are some references

http://www.yourhtmlsource.com/frames/

------------------------------------------------------

HOMEWORK: BE INDEPENDENT AND WORK ON YOUR WEBPAGE!

Look through the tutorials given (or find other ones in French if you need) and build your website.

Other relatively simple tutorials about basic HTML and many different functions:

http://werbach.com/barebones/barebones.html

http://www.htmldog.com/guides/htmlbeginner/

http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html

http://www.w3.org/MarkUp/Guide/

BE RIGOROUS!!! PUNCTUATION AND SPACES COULD CHANGE YOUR CODE.

DON’T FORGET TO SAVE YOUR WORK INTO YOUR FILE OR ONTO YOUR OWN “FLASH” or “THUMB” DRIVE (clef USB).