Home Work-2

CAP305: Web Programming

SUBMITTED TO: Narinder Kaur

SUBMITTED BY:SURENDRA MCA 3nd SEM ROLL NO- D3804A15 REGD NO- 10806601

Part-A

1. What are lists enumerate ordered and unordered lists using appropriate example Answer: Unordered Lists An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. Example : <ul> <li>Coffee</li> <li>Milk</li> </ul>

Here is how it looks in a browser:

•Coffee •Milk Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc.

Ordered Lists An ordered list is also a list of items. The list items are marked with numbers.

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. Example: <ol> <li>Coffee</li> <li>Milk</li> </ol>

Here is how it looks in a browser:

1.Coffee 2.Milk Inside a list item you can put paragraphs, line breaks, images, links, other lists, etc. 2. Explain the different types of hyperlink, image as a hyperlink etc Answer: A hyperlink is a reference in a document to an external or internal piece of information. EXTERNAL HYPERLINK: Hyperlink is a link on a page that connects you to another spot on the page, a seperate page, or another website. An external hyperlink is a hyperlink that connects you to another website. INTERNAL HYPERLINK: An internal hyperlink is a link which points to a particular part of a page. This can be useful in long pages with lots of sub-sections. For example, the links at the top of this page are internal links pointing to each sub-heading.

Internal hyperlinks require an anchor tag with the "name" attribute like so:

<a name="part2">Part 2</a>

Create an anchor like this at the place in the page you want to link to. It doesn't matter if there is anything between the open and close tags.

Then create a hyperlink which refers to this anchor with a hash (#) like so:

<a href="#part2">Go To Part 2</a>

This assumes that the name anchor is on the same page as the hyperlink. To link to an anchor on a separate destination page, simply create a normal link with the anchor name appended to the file name like so:

<a href="page1.html#part2">Go To Page 1, Part 2</a> IMAGE AS EXTERNAL HYPERLINK: <html> <title>welcome </title> <body bgcolor="green"> <a href=" D:\WALLPAPERS\GREAT INDIANS\IMG_0228.jpg">india</a> </body> </html>

3. tag.

Using appropriate example show the working and various attributes of <marquee>

Answer:
Attributes of the <marquee> tag of IE Attributes behavior direction width height Description Specifies how the marquee should scroll. Valid values are: "scroll", "alternate", or "slide." The default value is "scroll." Specifies the direction the marquee should scroll. Valid values are: "left", "right", "up", and "down." The default value is "right." Specifies the width of the marquee, in px or % units. Specifies the height of the marquee, in px or % units.

scrollAmount Specifies the amount in pixels the marquee should scroll each time it's redrawn (see scrollDelay). The default value is "6". scrollDelay trueSpeed loop Specifies the amount in milliseconds between times the marquee is redrawn. Default value is "85". Specifies whether the marquee should catch up with any skipped cycles. The default value is "false." Specifies the number of times the marquee should repeat itself when it reaches the end of the message. The default value is "infinite."

EXAMPLE OF MARQUEE: <html> <body> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=ALTERNATE BGColor=red>This is an example of an alternating marquee...</MARQUEE></FONT> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SCROLL BGColor=yellow LOOP=3>This is an example of a scrolling marquee...</MARQUEE></FONT> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SLIDE BGColor=yellow>This is an example of a sliding marquee...</MARQUEE></FONT></body>

<FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SCROLL DIRECTION=RIGHT BGColor=yellow>This is an example of a marquee scrolling to the right...</MARQUEE></FONT> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SCROLL DIRECTION=RIGHT BGColor=yellow>This is an example of a marquee scrolling to the right...</MARQUEE></FONT> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE BEHAVIOR=SCROLL HEIGHT=25 WIDTH=300 BGColor=yellow>This is an example of a scrolling marquee</MARQUEE></FONT> <FONT SIZE="4" FACE="courier" COLOR=blue><MARQUEE WIDTH=100% BEHAVIOR=SCROLL HSPACE=15 VSPACE=25 BGColor=yellow>This is an example of a scrolling marquee</MARQUEE></FONT> </html>

Part-B

1. With the help of suitable example write the steps to create thumbnails and their use in web programming. Answer: Step 1: Save your picture as a JPEG file.

Step 2: Upload your picture to your site, and copy down the URL for the picture file. In Step 4, simply insert this URL in place of the text reading "pictureURL."

Step 3: Access the HTML source code for the page you want to add a thumbnail to. Even if you're using a specialty program for easier, user-friendly web page editing, you should still be able to get at the raw HTML code. Depending on the web production software you're using, accessing the source code requires different steps. In most programs you can press "F1" to access the help menu for further guidance.

Step 4: Type in the following HTML code, replacing the words "pictureURL" with the exact URL of the picture you are using: <a href="pictureURL" target="_blank"> <img src="pictureURL" alt="Resized JPEG graphic" title="Click to view full-sized image" border="1" width="200" height="200" hspace="10" /></a>

Step 5: Save the page and view it to see your new thumbnail image and associated full-sized picture link. The thumbnail will be 200 pixels by 200 pixels using the code in Step 4; if you want a different-sized thumbnail, simply fill in different values under the width and height sections of the code. 2. How can we insert an image with a specific width & height inside a web page? Answer: The img tag is used to insert an image in a web page in HTML.

The src attribute tells the browser where the image file is located. Similar to the <a>, the url can be absolute or relative. Usually, the file is relative. For example, if you have an image that is saved as "someimage.jpg" in a directory called "myimages", the image link code would be <img src="myimages/someimage.jpg" width="#" height="#" alt="some text" />.

The width and height attributes are necessary for 2 reasons:

First, most browsers, if not all, will either display the image in its original size or guess what the width and height are, which you may not want. For example, if you have an image with a width of 500 pixels and a height of 400 pixels, but you want the image appear as having a width of 250 pixels and height of 200 pixels, most browsers will display the image with the original width and height or 500px by 400px. Also, not specifying the width and height can lead to the web page downloading slower than if they were specified.

Second, it is necessary to include the alt tag in order for the code to be W3C XHTML standards compliant. <html>

<head> <title>WebDevelopment</title> </head> <body> <p> <img src="image.jpg" width="80px" height="80px" alt="some text" /> </p> </body> </html> 3. Create a web page which shows the role of BR, BLINK and FONT tags. Answer:
<HTML> <HEAD> <TITLE>Text Extensions</TITLE> </HEAD> <BODY> <H1>Using Netscape's &lt;FONT&gt; Tag</H1> <HR> <FONT SIZE=7>This text uses a font size of 7.</FONT><BR> <FONT SIZE=6>This text uses a font size of 6.</FONT><BR> <FONT SIZE=5>This text uses a font size of 5.</FONT><BR> <FONT SIZE=4>This text uses a font size of 4.</FONT><BR> <FONT SIZE=3>This text uses a font size of 3 (normal).</FONT><BR> <FONT SIZE=2>This text uses a font size of 2.</FONT><BR> <FONT SIZE=1>This text uses a font size of 1.</FONT><BR> <HR> <FONT SIZE=7>Y</FONT>ou can mix and match sizes: <BR> Here at Shyster & Son Brokerage, you'll see your investments

<FONT SIZE=7>s<FONT SIZE=6>h<FONT SIZE=5>r<FONT SIZE=4>i <FONT SIZE=3>n<FONT SIZE=2>k</FONT> while our commissions <FONT SIZE=4>g<FONT SIZE=5>r<FONT SIZE=6>o<FONT SIZE=7>w!</FONT> </BODY> </HTML>