Saturday, 28 February 2015

OUTPUT FIGURE 7.1 THE HALLOWEEN HOUSE HOME PAGE.

OUTPUT
  












So far, so good, Now you can add an image to the page. Suppose that you happen to have an image of a haunted house lying around on your hard drive: it would look excel-lent at the top of this web page. The image, called house. Jpg ,is in JPEG format. It’s located in the same directory as the Halloween. Html page, so adding it to the page will be easy.

Now, suppose that you want to place this image above the page heading. To do so, add an <imag> tag to file inside its own paragraph, just before the heading:

<p> <img src =”house, jpg” alt = “House of terror” /> </p>

<h1> welcome to the Halloween house of terror !!</h1>

Image, like links, don’t define their own text elements, so the <img> tag has to go inside a paragraph or heading element.

When you reload the Halloween, html page, you browser should include the haunted house image

TASK: EXERCISE 7:1 ADDING IMAGES TO A PAGE

Here’s the web page for a local haunted house that’s open every year at Halloween. Using all the excellent advice I’ve given you in the preceding six lessons, you should be able to creature a page like this one fairly easily. Here’s the HTML code for this HTML file, and figure 7.1 shows how it looks so far:

INPUT

<! DOCTYPE html PUBLIC”-//W3C //DTDXHTML 1.0 transitional//EN”

“http: //www.w3.org/TR/xhtml1/transitional.dtd”>

<Html>

<Head>

<Title> welcome to the Halloween houses of terror !! <//h1>

</Head>

<Body>

<h1> welcome to the Halloween House of Terror!! </h1>

<hr/>

<p> voted the most frightening haunted house three years in a row, the <strong> Halloween house of terror </strong> provides the ultimate in Halloween thrills. Over <strong> provides the ultimate in Halloween trills. Over <strong> 20 rooms of thrills and excitement </strong> to make your blood run cold and your hair our hours are : </p>

ADDING ALTERNATIVE TEXT TO IMAGE

Images can turn a simple text-only web page into a glorious visual feast. But what happens if someone is reading your webpage using a text-only browser? What if she has image loading turned off so that all you carefully crafted graphics appear as generic icons? All of a sudden, that visual feast doesn’t look quite as glorious.

There’s simple solution to this problem. By using the alt attribute of the <img> tag, you can substitute something meaningful in place of the on browsers that cannot display it.

In text-only browsrs, such as Lynx, graphics that are specified using the <img> tag inn the original file usually are displayed as the word IMAGE with square brackets around it. Like this: (IMAGE) for your visitors who are using text –only web browsers, or who have graphics turned off on their browsers. The alt attribute contains a string with the text you want to substitute for the graphic:
<img src = “my image. Gif” alt = “[picture of a cat]”/>

Most browsers interpret the string you include in the alt attribute as a literal string. That is, if you include an HTML tags in that string, they’ll be printed as-is rather than be in parsed and displayed as HTML code. Therefore, you can’t use whole blocks of HTML code as a replacement for an image – just a few words or phrases.

I bring up image alternatives now for good reason. Alternatives to images are optional in earlier version of HTML, but they’re mandatory in HTML 4.01 strict and XHTML 1.0 specifications. If there’s no appropriate alternative text for an image, you can simply leave it empty, like this: alt=””.

INLINE IMAGES IN HTML: THE TAG

 After you have an image ready to go, you can include t on you r web page, in line images are placed in HTML documents using the <img> tag. This tag, like the <hr> and <br> tags, has no closing tag in HTML. For XHTML, you must add an extra space and forward slash to the end of the tag to indicate that it has no closing tag.

NOTE

To use the <img> tag is src, which is the URL of the image you want to include. Paths to images are derived in the same way as the paths in the href attribute of links. So, to point to a GIF file named image. Gif in the same directory as the HTML document, you canuse the following XHTML tag:
<img src = “image – gif” />

For an image file one directory up from the current directory, use this XHTML tag:

<img src =”image .gift”/>

And so on, using the same rules as for page names in the href part of the <a> tag. You can also point to images on remote servers from the src attribute of an <img> tag, just as you can from the href attribute of a link. If you wanted to include the image example. Gif from www.example.com on your web page, you could use the following tag:

<Img src =http://www.example.com/example.gif/>

CAITOPM

Just because you can use images stored on other servers for you own we pages doesn’t mean that you should. There are a lot of legal, ethical, and technical issues involved with using images on other sites. I’ll discuss them later in this lesson.

IMAGE FORMATS JPEG

JPEG, which stands for joint photographic Experts Group(the group that developed it), is the other popular format for images on the web. JPEG (pronounced jay – peg) is actually a compression type that other file formats can use. The fil format for which it’s known is also commonly called JPEG.

JPEG was designed for the storage of photographic images, Unlike GIF images, JPEG images can include any number of colors. The style of compression the JPEG uses (the compression algorithm) works especially well for ph autographs, so files compressed using the JPEG algorithm are considerably smaller than those compressed using GIF,JPEG use a lossy compression algorithm, which means that some of the data used in the image is discarded to make the file smaller,.Lossy compression works extremely well for photographic data, but makes JPEG unsuitable for image that contain elements with sharp edges, such as logos, line art ,and type. JPEG files are supported by all major web browsers.

PNG

PNG, pronounced “ping,” was originally designed as a replacement for GIFs. It stands for Portable Network Graphics. Only the oldest browsers don’t support PNG natively. Current browsers all support PNG, and it has some important advantage over GIF (and to a lesser extent over JPEG). Like GIF, it is a not –lossy image format. No information about the image is lost when it is compressed.

It has better support for transparency ;than GIF, and supports Platte-based images (like GIF) as well as tru – color and grayscale images (like JPEG). In other words, you don’t have to worry about color usage with PNG, although limiting color usage will result in seller files. More and More sites are using the PNG format for images ,but due mainly to intertie, GIF and JPEG are still the most use do formats. For more information on PNG, see http://www.libpng,org/pub/png/, 

Friday, 27 February 2015

IMAGE FORMATS

As I just mentioned, three image formats are supported by every  major web browser: GIF, JPEG, and PNG.JPEG and GIF  format, which was necessary after Unisys invoked its patent rights on the GIF format. (The patent has since e expired). To design web pages, you must understand and be able to apply both image formats and to decide which is appropriate to use in each case.

GIF

Graphics interchange format, also known as GIF or CompuServe GIF, is the most widely used graphics format on the web today. It was developed by comp serer to fill the need for a cross – platform image format.

NOTE

GIF is pronounced jiff, like the peanut butter, not with a hard G as in gift, really – the early documentation of GIF tools says so.

The GIF format is actually two very similar image formats: GIF87, the original format, and GIF89a, which has enhancements for transparency, interlacing, and multiform GIF images that you can use for simple animations.


The GIF format is grate for logos, icons, line art, and other simple images, it doesn’t worked as well for highly detailed images because is  limited to only 256 colors, for example, photographs in GIF format tend to look grainy and blotchy. the problem is that with the limited color plate. It’s hard to create smooth color transitions. 

IMAGES ON THE WEB

  Images displayed on the web should be converted to one of the formats supported by most browsers: GIR. JPEG, of PNG, GIF and JPEG are the popular standards, and every response to some patent issues with the GIF format. IT’s superior to GIF in almost every respect, but old prowess doesn’t support it. Many other image formats are supported by some browsers and not others. You should avoid them.

Let’s assume that you already have an image you want to put on your web page. How do you get it into GIF or JPEG format so it can be viewed on your page? More image edit – king programs, such as Adobe Photoshop (http://www.adobe;com/), paint shop pro (http://www.jasc. Com/),and CorelDraw (http://www.corelcom/), will convert images to most of the popular formats. You might have to look under the option for save as or export of find the conversion option. There are also freeware and shareware programs for most platforms that do nothing but convert between image formats. Many shareware and demo versions of image editing programs are available at http;///ww.download. com /(search poor “image editors” using the software platform of your choice).

TIP

If you’re a windows user, you can download irafanview, which allows you to view images, and convert them to various formats, at http://www.infanview. Com/. It also provides a number of other image manipulation features that are useful for working with images for the web. Best of all, it’s free for non-commercial use.

To save files in GIF format, look for an option called CompuServe GIF,gif87, GIF89a, or just plain GIF. Any of them will work. If you’re saving your files as JPEG, usually the option will simply be 
JPEG.

Remember how your HTML files have to have an. Html or. Html extension to work properly? Image files have extensions too. For GIF files, the extension is. Gif. For JPEG files, the extensions are. Jpg and .jpeg.

NOTE

LESSON 7: ADDING IMAGES, COLOR, AND BACKGROUNDS.

 If you’ve been struggling to keep up with all the HTML tags I’VE been flinging at you the least couple of day, this lesson will be easier.

IN THIS LESSON

In fact, in this lesson you won’t be learning very many new HTML tags. Instead, you’ll learn about h own to add images to you pages and change the color of elements on a page. In particular. You’ll learn the following:


·         The kinds of images you can use in web pages

·         How to include images on your web page, either alone or alongside text.

·         How to use images as clickable links

·         How to set up and assign links to regions of images using client-side image maps

·         How to provide alternatives for browsers that can’t view images

·         How to change the font and background colors on you web page.

·         How to use images for tiled page backgrounds

·         How and when to use images on your web pages

·         A few tips on image etiquette.

         After this lesson, you’ll know all you need to know about adding images to your web pages.

TABLE 6.3 CSS PROPERTIES FROM LESSON 6.

PROPERTY
USES/VALUES

Text – decoration
Specifies which sort of decoration should be applied to the text. The value s are under line, oveline, line-thought, blink, and none.

Font – style
 Specifies whether text should be italicized. The three values are normal, italic, and oblique.

Font –weight
Specifies the degree to which text should been boldened. Options are Normal, bold, bolder, lighter, and 100 – 900.

Font – family
Enables you to specify the font used for text. You can choose families such as serif, sans serif, and monospace, or specific font names,. You can specify more than one font or font family as well.

Font – variant
Sets the font variant to normal or small – caps. 

Text – align
 Specifies how text is aligned: left, right, center, or Justify.

Font – size
Enables you to specify the font size in any unit   supported by CSS.


WORKSHOP

Here you are at the close of another day ( a long one!) and facing yet another workshop, today’s lesson covered a log of ground, so I’ll  try to keep the questions easy. There are a couple of exercises that focus on building some additional pages for you website. Ready?

TABLE 6.2 HTML TAGS FROM LESSON 6

   
TAGS
ATTRIBUTE
USE

<address>…..</address>

A signature for each web page; typically occurs near the bottom of each document and contains contact or copyright information.

<b>….</b>

Bold text.

<big>…</big>

Text in a larger font than the text around it.

<blink>…</blink>

Causes the enclosed text to blink (Netscape only).

<block quote>…</block quote>

A quotation longer than a few words.

<cite>..</cite>

A citation

<code>..</code>

A citation.

<dfn>..</dfn>

A definition or a term about to be defined.

<Em>..</Em>

Emphasized text.

<I>…</I>

Italic text.

<kbd>…</kbd>

Text to type in by the user.

<pre> …</pre>

Preformatted text: all spaces, tabs, and returns are retained. Text is printed in a monospaced font.

<s>…</s>

Strikethrough text. (Deprecated in HTML 4.01. ).

<Samp>..</samp>

Sample text.

<small> …</small>

Text in a smaller font that the text around it.

<strong>..</strong>

Strongly emphasized text.

<sub>..</sub> 

Subscript text.

<sup>…</sup>

Superscript text.

<tt>….</tt>

Text in typewriter font (a monospaced font such as courier).
<u>…</u>

Underlined text.

<var>…</var>

A variable name.

<span>…</span>

A generic tag used to apply styles to a particular bright of text.

<hr>

A horizontal rule line at the given position in the text. There’s no closing tag in HTML for <hr>; for XHTML, add a space and forward slash (/) at the end of the tag and its attributes (for example, <hr size = “2” width = “75%” ‘/>).


size
The thickness of the rule, in pixels. (deprecated in HTML 4.01)


Width
The width of the rule, either in exact pixels or as a percentage of page width (for example, 50%). (Deprecated in HTML 4.01.)


No shade
Displays the rule without three dimensional shading. (Deprecated in HTML 4.02).

<br>

A  line break; ;starts the next character on the next line, but doesn’t create a new paragraph or list item, there’s no closing tag in HTML for <br>; for XHTML, add a space and forward slash (/) at the end of the tag and its attributes (for example, <br clear = “left” />.

<nobr….</nobr>

Doesn’t wrap the enclosed text (nonstandard; supported by Netscape and internet explorer).

(wbr>

Wraps the text at this point only if necessary (nonstandard; supported by Netscape and internet explorer). Adds a space and forward slash at the end of the tag for XHTMO. 1.0.

<p>…/<pr>
<h1 – 6>….</j1 -6>
Align = “left”
Left- justifies the text within that paragraph or heading, (Deprecated in HTML 4.01.)


Align = “right”
Right – justifies the text within that paragraph or heading. (Deprecated in HTML 4.01)

Align “center”
Centers the text within that paragraph or heading. (Deprecated in HTML 4.01)
<div>…</div>
Align =”left”
Left-justifies all the content between the opening and closing tags. (Deprecated in HTML 4.01)


Align = “right”
Right – justifies all the content between the opening and closing tags, (Deprecated in HTML 4.01).

<center>…</center>

Centers all the content between the opening and closing tags. (Deprecated in HTML 4.01).

<font>…</font>
Size
The size of the font to change to, either from 1 to 7 (default is 3) or as a relative number using +N or –N. relative font sizes are based on the value of <base font>/ (Deprecated in HTML 4.01).


face
The names of the font to change to, as a list of fonts to choose from, (deprecated in HTML 4.01)

<Base font >
Size
The default font size on which relative font size changes are based. (deprecated in HTML 4.01) there is no closing tag HTML for <base font >; for XHTML, add a space and forward slash (/) at the end of the tag and its attributes (for example, <base font size = “-1 “ />.

  

Tuesday, 24 February 2015

OUTPUT FIGURE 6.20 THE FINAL BOOKWORM HOME PAGE, WITH ADDITIONAL ATTRIBUTES.

OUTPUT FIGURE 6.20 THE FINAL BOOKWORM HOME PAGE, WITH ADDITIONAL ATTRIBUTES.

·     





















           When should you use text- formatting attributes? The general rule that I like to follow is to use these tags only when they won’t interfere with other browsers, generally older ones. Similarly, although HTML 4.01 officially encourages web page authors to use style sheets rather than text formatting tags such as font and attributes such as align, support for style sheets still isn’t yet universal. So, for the time being, if you want to spiff up the appearance of you text, you must continue to use these tags and attributes.

·         You’ll learn more about formatting tags and attributes, as well as how to design well with them in lesson 15, “Creating Applications with Dynamic HTML and AJAX”.

SUMMARY

INPUT

  <div style = “text –align: center”

 < a n name = “top”> <h1 style = “font – variant: small – caps”<> the bookworm: a better book                    store <./h1> </a>

<Block quote>

“Old books are best ------- how tale and rhyme <br/>

Float with us down the stream of time /”br/>

Clarence Urmy, <cite> old songs age Best </cite>

</block quote>

<p> the bookworm bookshop <br/>

1345 apple wood Dr <br/>

Springfield, CA 94325 <br/>

(415) 555 – 0034 </p>

</div>

I’ve also used the style attribute to change the text in the <h1> tag to small caps. To change the font size of the address, add a style attribute to the paragraph containing the address:

INPUT