Jobs 2025 - 2026: INPUT

Showing posts with label INPUT. Show all posts

Tuesday, 10 March 2015

INPUT

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

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

<Html>

<Head>

<Title> the really cool music page </title>

</Head>

<h1> the really cool Music page </h1>

<p> select the type of music you want to hear, <br/>

You/ll go to a list of songs that you can select from. </p>

<p>

<area shape =”rect” cords “101, 113, 165, 134”

ADDING IMAGES, COLOR,AND BACKGROUNDS OUTPUT

At the bottom of the page, add your images using <img> tags:

INPUT

OUTPUT FIGURE 7.13 THE BASIC PAGE, WITH NO ICONS.

Figure 7.14 shows the result.

OUTPUT FIGURE 7.14 THE BASIS PAGE WITH ICONS.

TASK: EXERCISE 7.2: USING NAVIGATION ICONS.

Now you can create a simple page that uses images as links. When you have a set of related web pages, it’s usually helpful to create a consistent navigation scheme that is used on all of the pages.

This example shows you how to create a set of icons that are used to navigate through a linear st of pages. You have three icons in GIF format: one for forward, one for back, and a third to enable the visitors to jump to the top – level contents page.

First, you’ll write the THML structure to support the icons. Here, the page itself isn’t very important, so you can just include a shell page:

INPUT

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

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

<Html >

<Head >

<title> Motorcycle Maintenance: Removing spark plugs </title>

<h1> removing spark plugs</h1>

<p> removing spark plugs </h1>

<p> (include some info about spark plugs here) </p>

<hr/>

</body>

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

WRAPPING TEXT NEXT TO IMAGES:

Including an image inside a line works fine if you have only line one line of text. One aspect of inline images that I’ve sneakily avoided mentioning so far is that inHTML2.0 this alignment worked only with a single line of text. If you had multiple lines of text and you included an image in the middle of it, all the tent around the image (except for the one line) would appear above and below that image.

What if you want text to flow around an image? Using HTML2.0, you couldn’t. You were restricted to just as single line of text on either side of the image, which limited the kinds of dressings you could do.

To get around this HTML 2.0 , limitation Netscape defined two new value for the align attribute of the <img tag: left and right. These new values were incorporated into HTML 3.2 and are now supported b all current browsers.

Align =”left” and align=”right”

Align =”left” aligns an image with the left margin, and align =”right” aligns an image with the right margin. However, these attributes also cause any text that follows the image to be displayed in the space to the right or left of that image, depending on the margin alignment:

INPUT

<h1> Mystery tulip Murderer strikes </h1>

<p> someone, or something, or something, is killing the tulips of new south Haverford, Virginia. Residents of this small town are shocked and dismayed by the senseless vandalism that has struck their tiny town. </p>

INPUT

INPUT

<h2> Middle of text and line aligned, arrow varies: </h2>

Align: top

Align: text top

<h2> to of text and line aligned, arrow varies: </h2>

Align: absolute middle

Align : middle

<j2> top of text and line aligned, arrow varies: </h2>

Align: baseline / Bottom

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

IMAGE AND TEXT

In the preceding exercise, you put an inline images on a page with text below it. You also an include an image inside a line of text. In fact, this is what the pharase”inline image” actually means – it’s in a line of text.

To include images inside a line of text, just add the <img> tag inside an element tag (<h>, <p>,

<address>,and so on), as in the following line:

<h2> <img src =”house. Jpg” alt = “house of terror”/> the Halloween house of terror!! </h2>

FIGURE 7.4

THE HALLOWEEN HOUSE PAGE WITH AN IMAGE INSIDE THE HEADING.

The image doesn’t have to be large, and it doesn’t have to be at the beginning of the text. You can include an image anywhere in a block of text, as in the following:

INPUT

ADDING IMAGES, COLOR, AND ABCKGROUNDS INPUT

INPUT

<p> img src =”house. Jpg” alt = “house of terror” />

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

Figure 7.3 shows how the page looks in a browser. The two images are adjacent to each other, as you would expect.

OUTPUT

FIGURE 7.3 MULTIPLE IMAGES.

Saturday, 28 February 2015

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>

INPUT

<div style = “text –align: center”

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

“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

INPUT

<p><a href =”# contents”> back to contents </a> || <a href =” # top”> back to top M</a> </p>

</hr>

Last updated: 11 –Jan – 2006 <br/>

</address>

</body>

</html>

Now you have some headings, some text, some topic, and some links, which form the basis for an excellent web page. With most of the content in place, now you need to

· Consider what other links you might want t create or what other features you might want to add to this page.

For example, the introductory section has a note about the four cats owned by the book store, although our didn’t plan for them in the original organization, you could easily create web pages describing each cat (and showing pictures)) and then link them back to this page, one link (and one page) per cat.

INPUT

<hr/>

Last updated: 11-Jan -2006 <br/>

Webmaster: Laura Lemay

< a href = “mailto :Lemay @ bookworm. Com”> Lemay @ bookworm. Com </> <br />

Figure 6.19show,s the signature at the bottom portion of the page as well as the upcoming events section.

Reviewing what you’ve ;got Here’s the HTML code for the page so far:

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

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

<Html>

<Head>

<Title>the bookworm bookshop</title>

</Head>

<Body>

INPUT

<a name =”recent”><h2> recent titles (as of 11-jan -2006) </H2></a></1i>

<u1>

<1i>Sandra bellwether, <a href=”belladonna.html.”>

<1i>Sandra bellwether,<cite> </a></Li>

<cite>20-minute meals for one</cite></a></1i>

<li>Maxwell burgess,<a href=”legion.html”>

<cite>legion of thunder</cite>M</a><1i>

<cite>banquet’s ghost<?cite></cite></1i>

</u1>

<p>< href=”#contents”>back to contents </a>||<a href+”#top”>back to top<?a></p>

<hr/>

Note that I put the <cite tag inside the link tag<a>. I could have just as easily put it outside the anchor tag; character style tags can go just about anywhere. But as I mentionedince before, be careful not to overlap tags. Your browser might not be able to understand what’s going on, and it’s invalid. In other words, don’t do the following:

CREATING THE DESCRIPTION OF THE BOOKSTORE

Now you come to the first descriptive subheading on the page, which you've added already. This section gives a description of the bookstore. After the heading (shown in the first line of the following e example). I've arranged the description to include a list of features to make them stand out from the text better:

INPUT

<a name=”about”<h2> about the bookworm bookshop </h2></a>

<p> since 1933, the bookworm bookshop has offered rare and hard-to-find titles for the discerning reader. The bookworm offers :< /p>

<u1>

<1i> friendly, knowledge able, and courteous held</1i>

<1i>free coffee and juice for our customers </1i>

<1i> a well-l\lit reading room so you can “try before you buy” </1i>

</u1>

Add a note about the hours the store is open and emphasize the actual numbers:

INPUT

ADDING THE TABLE OF CONTENTS

THE page you’re creating will require a lot of scrolling to get from the top to the bottom. One nice enhancement is to add a small table clicks one of the links in the table of contents, he’ll automatically jump to the section that’s of most interest to him. Because you've created the anchors already, it’s easy to see where the links will take you.

You already have the heading for the table of contents. You just need to add the bulleted list and a horizontal rule, and then create the links to the other sections on the page. The code looks like the following:

INPUT

<a name=”contents”> <h2>contents</h2></a>

<u1>

<1i><a href=”#about”>about the book work bookshop</a></1i>

<1i><a href=”#recent titles</a></1i>

<1i><a href=”#upcoming”>events</a></1i>

</u1>

<hr/>

Figure 6.16 shows an example of the introductory portion of the bookworm bookshop page as it appears in a browser.

ADDING CONTENT

Now begin adding the content. You’re undertaking a literary endeavor, so starting the page with a nice quote about old books would be a nice touch. Because you’re adding a quote, you can use the <block quote> tag to make it stand out as such. Also, the name of the poem is a citation, so use <cite> there, too.

Insert the following code on the line after the level 1 heading:

INPUT

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

Float with us down the stream of tike!”<br/>

-Clarence Urmy, <cite>old songs are best</cite>

</block quote>

Immediately following the quote, add the address for the bookstore. This is a simple paragraph with the lines separated by line breaks, like the following:

INPUT

BEGINNING WITH A FRAMEWORK

Next, create the framework that all HTML files must include: the document structuring commands, a title, and some initial headings. Note that the title is descriptive bust short; you can save the longer title for the <h2> element in the body of the text. The four <h2> subheadings help you define the four main sections you’ll on your web page:

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

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

<Html>

<Head>

<Title>the bookworm bookshop</title>

</Head>

<Body>

<h1> the bookworm: a better bookshop</h2>

<h2>recent titles (as of 11-jan. 2003)</h2>

<h2>upcoming events</h2>

</body>

</html>

Each of the headings you’ve placed on your page marks the beginning of a particular section. You’ll create an anchor at each of the topic headings so that you can jump from section to section with ease. The anchor names are simple: top for the main heading; contents for the table of contents; and about, recent, and upcoming for the three subsections on the page. The revised code looks like to following with the anchors in place:

INPUT

ALIGNING BLOCKS OF ELEMENTS

A slightly more flexible method of aligning text elements is to use the <div>(division)tag. <div> includes several attributes, which are listed in appendix B. among these attributes is a align (deprecated in HTML 4.01), which align elements to the left, right, or center just as it does for headings and paragraphs. Unlike using alignments in individually mends, however, <div> is used surround a block of HTML tags of any kind, and it affects all the tags and text inside the opening and closing tags. Two advantage of div over the align attribute follows.

You need to use <div> only once, rather than including align repeatedly in several different tags.

Ø <div> can be used to align anything (headings, <h2 align =”left”> <a href=”who.html”>who we are</a></h2> paragraphs, quotes, images, tables, and so on); the align attribute is available on only alimited number of tags.

To align a block of HTML code, surround it with opening and closing <div> tags, and then include the align attribute in the opening tag, as in other tags, align can have the value left, right, or center:

<h1 align=”left”> serendipity products </h1>

<h2><a href=”contacts.html”> how to reach us </a></h2>

</div>

All the HTML between the two <div> tags will be aligned according to the value of the align attribute. If individual align attributes appear in headings or paragraphs inside the <div>, those values will override the global <div> setting.

Jobs 2025 - 2026

Pages

Tuesday, 10 March 2015

INPUT

Saturday, 7 March 2015

ADDING IMAGES, COLOR,AND BACKGROUNDS OUTPUT

TASK: EXERCISE 7.2: USING NAVIGATION ICONS.

Tuesday, 3 March 2015

OUTPUT FIGURE 7.9 LINEAR BREAK TO A CLEAR MARGIN.

OUTPUT FIGURE 7.8 TEXT AND IMAGES ALIGNED.

WRAPPING TEXT NEXT TO IMAGES:

Monday, 2 March 2015

INPUT

OUTPUT Figure 7.5 IMAGE CAN GO ANYWHERE IN TEXT.

IMAGE AND TEXT

ADDING IMAGES, COLOR, AND ABCKGROUNDS INPUT

Saturday, 28 February 2015

TASK: EXERCISE 7:1 ADDING IMAGES TO A PAGE

Tuesday, 24 February 2015

INPUT

INPUT

INPUT

Monday, 23 February 2015

INPUT

OUTPUT FIGURE 6.16 THE TOP SECTION OF THE BOOKWORM BOOKSHOP PAGE.

ADDING THE TABLE OF CONTENTS

ADDING CONTENT

BEGINNING WITH A FRAMEWORK

Friday, 20 February 2015

ALIGNING BLOCKS OF ELEMENTS