Jobs 2025 - 2026: NOTE

Showing posts with label NOTE. Show all posts

Thursday, 12 March 2015

CHANGING BACKGROUND COLOR OF A PAGE.

To change a page’s background color decide what color you want and then add the bgcolor attribute to the<body> tag .the <body> tag, in case you’ve forgotten, is the tag that surrounds all the content of your HTML file. <head> contains the title, and <body> contains almost averting else. Bgcolor is an HTML extension introduced by Netscape in the 1.1 version of the browser and incorporated into HTML 3.2.

To use color numbers for backgrounds, you enter the value of the bgcolor attribute of the <body> tag (the hexadecimal number you found in the preceding section) in quotation marks. They look like the following:

<body bgcolor = “#ffffff”>

<body bgcolor=”#934c8”>

To use color names, simply use the name of the color as the value to bgcolor:

<body bgcolor =”white”>

<body bgcolor=”green”>

NOTE

Some browsers enable you to indicate color numbers without the leading hash sign (#). Although this method might seem more convenient, it’s incompatible with many other browsers.

Tuesday, 10 March 2015

THE USEMAP ATTRIBUTE

After you’ve created your <map> tag and defined the regions of your image using <area> tags, the next step is to associate the map with the image. To do so, the use map attribute of the <img> tag is used. The map name that you specified using the name attribute of the <map> tag, preceded by a #, should be used as the value of the use map attribute, as shown in this example:

NOTE

The value assigned to use map is a standard URL. This is why map name has pound symbol (#) in front of it. As with links to anchors inside a we page, the pound symbol tells the browser to took for map name in the current web page, if you have a very complex image map, however, you can store it in a separate HTML file and reference it using a standard URL.

TASK: EXERCISE 7.3: A CLICKABLE JUKEBOX

Let’s take a look at how to create a client – side image map for a real image. In this example you’ll define clickable regions on an image of a jukebox. The image you’ll be using appears in g figure 7.24.

FIGURE 7.24 The jukebox image.

First, define the regions that will be clickable on the is image. There are six rectangular buttons with musical categories on them, a center area that looks like

a house, and a circle with a question mark inside it. Figure 7.25 shows regions on the image.

Now that you know where the various regions are, you need to find the exact coordinates of the areas as they appear in your image. You can use a mapping program like map edit, oir you can do it manually. If you try it manually, it’s helpful to keep in mind that most image – editing programs display the X and Y coordinate of the image when you move the mouse over it.

FIGURE 7.25 The jukebox with areas defined.

Getting image coordinates from the browser.

DEFINING A POLYGON

Figure 7.21 shows the x, y coordinates of a polygon region. These values are based on their positions from the upper – left corner of the image, which is coordinate 0,0. the first. Number in the coordinate pair indicates the X value and defines the number of pixels from the extreme left of the image. The second number in the pair indicates the y measurement and defines the number of pixels from the top the image.

NOTE

The 0,0 origin is in the upper = left corner of the image, and positive y is down.

Getting the coordinates for a polygon.

Defining a circle

Figure 7.22 shows how to get the coordinates for circles. Here you note the coordinates for the centre point of the circle and the radius, in pixels. The center point of the circle is defined as they x, y coordinate from the upper – corner of the image.

Defining rectangle

Figure 7.23 shows how to obtain coordinates for rectangle regions. Note the x, y coordinates for the upper – left and lower – right corners of the rectangle.

The <map> and <area> tags.

If you’re creating your image map manually and you’ve written down all off the coordinates for your regions and the URLs they’ll point to, you can include this information in the client – side image map tags on a web page. To include a client – side image map inside a \n HTML document, use the<map> tag, which looks like the following:

Tuesday, 3 March 2015

FIGURE 7.11 IMAGES USED AS LINKS HAVE A BORDER AROUND THEM.

FIGURE 7.11 IMAGES USED AS LINKS HAVE A BORDER AROUND THEM.

You can change the width of the border around the image by using the border attribute to <img>. The border attribute was a Netscape extension that became part of HTMl 3.2, but it’s been deprecated in HTML 4.01 n favor of style sheets. This attribute takes a number, which is the width of the border in pixels. Border = “0” hides the border entirely. This configuration is ideal for image links that actually look like clickable buttons, as shown in figure. 7.12.

NOTE

Including borders around images that are links has really fallen out of favor with most web designers. not turning them off can make you r design look very dated.

FIGURE 7.12 IMAGES THAT LOOK LIKE BUTTONS:

OUTPUT: FIGURE: 7.10 THE UPPER EXAMPLE DOESN’T HAVE IMAGE SPACING, AND THE LOWER EXAMPLE DOES.

OUTPUT:

FIGURE: 7.10 THE UPPER EXAMPLE DOESN’T HAVE IMAGE SPACING, AND THE LOWER EXAMPLE DOES.

NOTE

With cascading style sheets, you can control image borders, space included around images, and how text flows around images. You can also use CSS to control the properties of elements of all kinds, so I’m going to cover them in lesson 7

IMAGES AND LINKS

Can an image serve as a link? Sure it can! If you include an <img> tag inside a link tag (<a>), that image serves as a ink itself:

IMAGE AND LINKS

Can an image serve as link? Sure it can! If you include an <img> tag inside a link tag (<a>), that image serves as link itself:

TIP

OUTPUT FIGURE 7.9 LINEAR BREAK TO A CLEAR MARGIN.

OUTPUT

FIGURE 7.9 LINEBREAK TO A CLEAR MARGIN.

ADJUSTINGTHE SPACE AROUND IMAGES

With the capability to wrap text around an image, you also might want to add some space between the image and the text the at surrounds it. The vspace and hspace attributes (introduced in HTML 3.2) enable you to make these adjustments. Both take values in pixels; space controls the space above and below the image, and hospice controls the space tot he left and the right. Note that the amount of space you specify is added on both sides of the image. For example, if you use hspace =”10”, 10 pixels of space we will be added on both the left and right sides of the image.

NOTE

OUTPUT FIGURE 7.8 TEXT AND IMAGES ALIGNED.

OUTPUT FIGURE 7.8 TEXT AND IMAGES ALIGNED.

STOPPING TEXT WRAPPING

What if you want to stop filling in the space and start the next line underneath the image? A normal line break won’t do it; it just breaks the line to the current margin alongside the image’s new paragraph also continues wrapping the \e text alongside the image. To stop wrapping text next to an image, use a line break tag (<br>) with the after the end of the image (all the way to the margin).

The clear attribute can have one of three values:

Left

Break to an empty left margin, for left – aligned images.

Right

OUTPUT Figure 7.5 IMAGE CAN GO ANYWHERE IN TEXT.

OUTPUT

Figure 7.5 IMAGE CAN GO ANYWHERE IN TEXT.

TEXT AND IMAGE ALIGNMENT

In these examples, the bottom of the image and the bottom of the text match up. The <img> tag also includes the ling attribute, which enables you to align the top or bottom of the image with the surrounding text or other images in the line.

NOTE

The align attribute for the <img> tag is deprecated in HTML 4.01 in favor of using style sheet attributes. You’ll learn more about style sheets in Lesson 9, “creating layouts with CSS”.

Standard html defines three basic value for align:

Align =”top”

Aligns the top of the image with the topmost part of the line(which may be the top of the text or the top of another image)

Align =”middle”

Aligns the center of the imager with the middle of the line (usually the baseline of the line of text, not the actual middle of the line).

Align = “bottom”

Aligns the bottom of the image with the bottom of the line of text.

HTML 3.2 provides two other values: left and right. These values are discussed in the next section, “wrapping text Next to Images.”

Figure 7.6 shows the Robert bridges poem from the previous section with the world image unaligned, the sun image aligned to the top of the line, the star image aligned to the middle, and the atom aligned to the bottom of the text.

INPUT

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:

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

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:

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.

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

HORIZONTAL RULES

The <hr> tag, which has no closing tag in HTML and no text associated with it, creates a horizontal line on the page. Rule line has are used to visually separate sections of a web page-just before headings, for example, or to separate body text from a list of items.

Closing empty elements

The <hr> tag has no closing tag in HTML. To convert this tag to XHTML. To convert this tag to XHTML and to ensure compatibility with html browsers, and a space and a forward slash to the end of tag:

<HR/>

If the horizontal line has attributes associated with it, the forward slash still appears at the end of the tag, as shown in the following:

The following input snows a rule line and a list as you would write it in XHTML1.0

Input

<hr/>

<h2> to do on Friday</h2>

<u1>

<1i>do 1audry</1i>

<1i> send FedEx with pictures</1i>

<1i>have 1unch with Mollie</1i>

<1i> read email</1i>

</u1>

<hr/>

Figure 6.6 shows how they appear in a browser.

OUTPUT

FIGURE 6.6 SHOWS HOW THEY APPEAR IN A BROWSER.

ATTRIBUTES OF THE <HR> TAG

In HTML 2.0, the <hr> tag is just as you see it, with no closing tag or attributes. However, HTML 3.2 introduced several attributes to the <hr> tag that give you greater control over the appearance of the line drawn by <hr>tag that give you greater control over the appearance of the line drawn by <hr>.all these attributes have been deprecated in favor of style sheets in the HTML 4.01 specification.

NOTE

Although presentation attributes such as size, width, and align are still supported in HTML 4.0, style sheets are now the recommended way to control a page’s appearance.

The size attribute indicates the thickness, in pixels, of the rule line. The default is 2, and this also is the smallest that you can make the rule line. Figure 6.7 shows the sample rule line thicknesses created with the following code:

INPUT

<h2>2 pixels </h2>

<h2> 4 pixels</h2>

<h2> 8 pixels </h2>

<h2> 16 pixels </h2>

OUTPUT

FIGURE 6.7 EXAMPLES OF RULE LINE THICKNESSES.

NOTE

Of the tags in this list, all except <dfn> are part of the official HTML2.0 recommendation. <dfn> was added in the HTML 3.2 recommendation. They’re all still valid in the XHTML 1.0 recommendation.

HTML 4.01 introduced two additional logical style tags that are most useful for audio browsers. A graphical browser, such as nets cape or internet explorer, won’t display them and differently. When an audio browsers reads content included within one for these tags, however, each letter is spoken individually. For example, fox is pronounced F-O-X rather than fox.

These tags also use opening and closing sides and affect the text within. The following are new tags:

<abbr> this tag indicates the abbreviation of a word, as in the following:

<p> use the standard two-letter state abbreviation

(such as <abbr>CA</abbr> for California)</p>

<acronym> similar to the <abbr>tag, <acronym> designates a word formed by combining the initial letters of several words, as in the following example:

<p>Jonathan learned his great problem-handling skills from <acronym> STEPS</acronym>(simply tackle each problem seriously)</p>

Got all these tags memorized now? Good! There will be a pop quiz at the end of the day. The following code snippets demonstrate each of the logical style tags, and figure 6.1illustrates how all the tags are displayed.

INPUT

MAILTO

The mailto URL is used to send electronic mail. If the browser supports mailto URLs, when a link that contains one is selected, the browser will prompt you for a subject and the body of the mail message, and send that message to the appropriate address when you’re done. Depending on how the user’s browser and email client are configured, mailto links might not work at all for them.

The mailto URL is different from the standard URL form. It looks like the following:

mailto:internet-e-mail-address

here’s an example:

mailto:lmmay@1ne.com

NOTE

If your email address includes a percent sign (%), you’ll have to use the escape character %25 instead. Percent signs age special characters to URLs.

Unlike the other URLs described here, the mailto URL works strictly on the client side. The mail to link just tells the browser to compose an email message to the specified address. It’s up to the browser to figure out how that should happen. Most browsers will also let you add a default subject to the email by including it in the URL like this:

mailto:lemay@1ne>com?subject=hi there!

When the user clicks on the link, most browsers will automatically stick Hi there! In the subject of the message. Some even support putting body text for the email message in the link like this:

mailto:lemay@1ne.com?subject=Hi there!&body text.

USENET NEWSGROUPS

Usenet was URLs have one of two forms:

News:name-of=-newsgroup

News:message-id

The first form is used to read an enter nets group, such as c9omp.infosystems. www.authorisng .html or alt. gothic. if your browser supports Usenet news URLs (either directly or through a newsreader). It’ll provide you with a list of available articles in that newsgroup.

The second form enables you to retrieve a specific news article. Each news article has a unique ID, called a message ID, which usually looks something like the following:

ANONYMOUS FTP

FTP URLs are used to point to files located on FTP servers-usually anonymous FTP servers; that is, the ones that allow you to log in using anything y mouse as the login ID and your email address as the password. FTP URLs also follow the standard URL form, as shown in the following examples:

ftp://ftp.foo.fom/home/foo

ftp://ftp.foo.com/home/foo/homepage.html

because you can retrieve either a file or a directory list with FTP, the restrictions on whether you need a trailing slash at the end of the URL aren’t the same as with HTTP the first URL here retrieves a listing of all the files in the foo directory. The second URL retrieves and parses the file homepage. html in the foo directory.

NOTE

Navigating FTP servers using a web browser can often be much slower than navigating them using FTP it self because the browser doesn’t the connection open. Instead, it opens the the connection, finds the file or directory listing, displays the listing, and then closes down the FTP connection .if you select a link to open a file or another directory in that listing, the browser constructs a new FTP URL from the items you selected response the FTP connection by using the new UR, gets the next directory or file, and closes it exactly which file you want to retrieve rather than for when you want to browse an archive.

Although your browser uses FTP to fetch the file, if it’s an HTML file, your browser will display it just as it would were it fetched using the HTTP protocol. Web browsers don’t care how they get files. As long as they can recognize the files as HTML, either because the server explicitly says that the file is HTML or by the file’s extension, browsers will parse and display that file as an HTML file. If they don’t recognize it as an HTML file, no big deal. Browsers can either display the file if they know what kind of file it is or just save the file to disk.

NON-ANONYMOUS FTP

ABSOLUTE PATH NAMES

ABSOLUTE PATH NAMES

You can also specify the link to another page on your local system by using an absolute pathname.

Absolute pathnames point to files based on their absolute locations on the file system. Whereas relative pathnames point to the page to which you want to link by describing its location relative to the current page, absolute pathnames point to the page by starting at the top level of your directory hierarchy and working downward through all the intervening directories to reach the file.

Absolute path names always begin with a slash, which is the way they’re differentiated from relative pathnames. Following the slash are all directories in the path from the top level to the file you are linking.

NOTE

To has different meanings, depending only how you’re publishing your HTML files. If you’re just linking to files on your local disk, the top is the top of your file system (/on UNIX, or the disk name on a Macintosh or PC). When you’re publishing files using a web server, the top is the directory where the files served by the web server are stored, commonly Referred to as the document root., you’ll learn more about absolute pathnames and web servers in Lesson 18, “putting your site Online.”

Table 5.2 shows some examples of absolute pathnames and what they mean.

TABLE 5.2 absolute path names

path name	means
Href=”/u1/1emay /file.html”	File. Html is located in the directory /u1/1emay (typically on UNIX systems).
Href=”d/files/html/file.htm”	File, htm is located on the D: disk in the directories files/html (on DOS systems).
Href=”hard%20disk%201/html files/file.html”	File.html is located is located on the disk hard disk 1, in the folder HTML files (typically on Macintosh systems).

USING RELATIVE OR ABSOLUTE PATHNAMES?

LINKING LOCAL PAGES USING RELATIVE AND ABSOLUTE PATHNAMES

LINKING LOCAL PAGES USING RELATIVE AND ABSOLUTE PATH NAMES

The example in the preceding section shows how to link together pages that are contained in the same folder or directory on your local disk (local pages). This section continues that thread, linking pages that are still on the local disk but might be contained in different directories or folders on that disk.

NOTE

Folders and directories are the same thing, but they’re called different namesdepending on whether you’re on Macintosh, windows, or UNIX. I’ll simply call them directories from now on to make your life easier.

When you specify just the filename of a linked file within quotation marks, as you did earlier, the browser looks for that file in the same directory as the current file. This is true even if both the current file and the file being linked to are on a server somewhere else on the internet; both files are contained in the same directory on that server. It is the simplest form of a relative path name.

Relative path names point to files based on their locations relative to the current file. They can include directory names, or they can point to the path you would take to navigate to that file if you started at the current directory or folder. A path name might, for example, include directions to go up two directory levels and then go down two other directories to get to the file.

To specify relative path names in links, you must use-style paths regardless of the system you actually have, you therefore separate directory or folder names with forward slashes (/)., and use two dots to refer generically to the directory above the current one(…).

Table 5.1 shows some examples of relative pathnames and where they lead.

TABLE 5.1 relative path names

Path name means

path name	means
Href=”file.html”	File. Html is located in the current directory.
Href-“files/file.html”	File.html is located in the directory called files (and the files directory is located in the current directory).
Href=”files/more files/file.html”	File.html is located in the more files directory, which is located in the files directory, which is located in the current directory.
Href=”…/file.html”	File.html is located in the directory one level up from the current directory (the parent directory).
Href=”../../files/file.html”	File. Html is located two directory levels up, in the directory files.

HTML DOES NOT DESCRIBE PAGE LAYOUT

When you’re working with a word processor or page layout program, style are not just named elements of a page-they also include formatting information such as the font size and style, indentation, underlining, and so on. So, when you write some text that’s supposed to be a heading, you can apply the heading style to it, and the program automatically formats that paragraph for you in the correct style.

HTML doesn’t go this far. For the most part, HTML doesn’t say anything about how a page looks when it’s viewed. HTML tag just indicate that an element is a heading or a list; they say h nothing about who that heading or list is to be formatted. So, as with the magazine example and the layout person who formats your article, the layout person’s job is to decide how big the heading should be and what font it should be in. the only thing you have to worry about is marking which section is supposed to be a heading.

NOTE

Jobs 2025 - 2026

Pages

Thursday, 12 March 2015

CHANGING BACKGROUND COLOR OF A PAGE.

Tuesday, 10 March 2015

THE USEMAP ATTRIBUTE

Monday, 9 March 2015

DEFINING A POLYGON

Tuesday, 3 March 2015

FIGURE 7.11 IMAGES USED AS LINKS HAVE A BORDER AROUND THEM.

OUTPUT: FIGURE: 7.10 THE UPPER EXAMPLE DOESN’T HAVE IMAGE SPACING, AND THE LOWER EXAMPLE DOES.

OUTPUT FIGURE 7.9 LINEAR BREAK TO A CLEAR MARGIN.

OUTPUT FIGURE 7.8 TEXT AND IMAGES ALIGNED.

Monday, 2 March 2015

OUTPUT Figure 7.5 IMAGE CAN GO ANYWHERE IN TEXT.

Saturday, 28 February 2015

INLINE IMAGES IN HTML: THE TAG

Friday, 27 February 2015

IMAGE FORMATS

IMAGES ON THE WEB

Monday, 16 February 2015

HORIZONTAL RULES

Sunday, 15 February 2015

NOTE

Thursday, 12 February 2015

MAILTO

ANONYMOUS FTP

Monday, 9 February 2015

ABSOLUTE PATH NAMES

LINKING LOCAL PAGES USING RELATIVE AND ABSOLUTE PATHNAMES

Tuesday, 3 February 2015

HTML DOES NOT DESCRIBE PAGE LAYOUT