Scribd
Upload
20 views14 pages

CAP214CA1

The document outlines an academic assignment for a web programming course, detailing various HTML implementations such as marquee, datalist, dropdown, combo box, and subscript. It also includes examples of HTML code for frames, a student registration form, and explanations of inline frames and targeting in frames. The assignment was allotted on February 12, 2021, and is due on February 22, 2021.

Uploaded by

mehedi.mgt2019
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
20 views14 pages

CAP214CA1

The document outlines an academic assignment for a web programming course, detailing various HTML implementations such as marquee, datalist, dropdown, combo box, and subscript. It also includes examples of HTML code for frames, a student registration form, and explanations of inline frames and targeting in frames. The assignment was allotted on February 12, 2021, and is due on February 22, 2021.

Uploaded by

mehedi.mgt2019
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

LOVELY PROFESSIONAL UNIVERSITY

Course code: CAP214 Course Title: Fundamental of Web


Programming
Course Instructor: Rajeev Kanday

Academic Task No: 01 Academic Task Title: Assignment 01

Date of Allotment: 12 Feb 2021 Date of Submission: 22 Feb 2021

Students Roll no: RQ2015B49 Students Reg. no: 12006879

1.Showing the code for implementation of marquee, data list, dropdown,


combo, sub.
MARQUEE:
<!DOCTYPE html>
<html>

<head>
<title>HTML marquee Tag</title>
</head>

<body>
<marquee>This is basic example of marquee</marquee>
</body>

</html>
DATALIST:
<!DOCTYPE html>
<html>
<body>

<h1>The datalist element</h1>

<form action="/action_page.php" method="get">


<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>

</body>
</html>

DROPDOWNLIST:

<head>
<title>DropDown List</title>
</head>
<body>
<h4>Seven Wonders of the world</h4>
<form>
<select name = "dropdown">
<option value = "taj" selected>Taj Mahal</option>
<option value = "china">Great Wall of China</option>
<option value = "chirst" required>Christ the Redeemer Satue</option>
<option value = "machu" disabled>Machu Picchu</option>
<option value = "chichen">Chichen Itza</option>
<option value = "colossem">The Roman Colosseum</option>
<option value = "petra">Petra</option>
</select>
</form>
</body>

COMBO BOX:
<html>
<head>
</head>
<body>
<label for=”Programming Language”>Choose a Language:</label>
<select name=”Programming Language id=”Programming Language”>
<option value="Select">Select....</option>
<option value="java">Java</option>
<option value="html">HTML</option>
<option value="C++">C++</option>
<option value="sap">SAP</option>
</select>
</body>
</html>
SUBSCRIPT:
<p>This text contains <sub>subscript</sub> text.</p>

2. HTML CODE FOR FRAMES

<!DOCTYPE html>
<html>
<html>
<frameset cols="*,*">
<frame src="frame1.html">
<frameset rows="*,*">
<frame src="frame2.html">
<frameset cols="*,*">
<frame src="frame3.html">
<frame src="frame4.html">
</frameset>
</frameset>
</frameset>

</html
Example:
3.STUDENTS REGISTRATION FORM

<html>
<head>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<form action="#" name="StudentRegistration" onsubmit="return(validate());">

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center"


cellspacing="2">

<tr>
<td colspan=2>
<center><font size=4><b>Student Registration Form</b></font></center>
</td>
</tr>
<tr>
<td>Name</td>
<td><input type=text name=textnames id="textname" size="30"></td>
</tr>

<tr>
<td>Father Name</td>
<td><input type="text" name="fathername" id="fathername"
size="30"></td>
</tr>
<tr>
<td>Postal Address</td>
<td><input type="text" name="paddress" id="paddress" size="30"></td>
</tr>

<tr>
<td>Personal Address</td>
<td><input type="text" name="personaladdress"
id="personaladdress" size="30"></td>
</tr>

<tr>
<td>Sex</td>
<td><input type="radio" name="sex" value="male" size="10">Male
<input type="radio" name="sex" value="Female" size="10">Female</td>
</tr>
<tr>
<td>City</td>
<td><select name="City">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>
</tr>

<tr>
<td>Course</td>
<td><select name="Course">
<option value="-1" selected>select..</option>
<option value="B.Tech">B.TECH</option>
<option value="MCA">MCA</option>
<option value="MBA">MBA</option>
<option value="BCA">BCA</option>
</select></td>
</tr>

<tr>
<td>District</td>
<td><select name="District">
<option value="-1" selected>select..</option>
<option value="Nalanda">NALANDA</option>
<option value="UP">UP</option>
<option value="Goa">GOA</option>
<option value="Patna">PATNA</option>
</select></td>

</tr>

<tr>
<td>State</td>
<td><select Name="State">
<option value="-1" selected>select..</option>
<option value="New Delhi">NEW DELHI</option>
<option value="Mumbai">MUMBAI</option>
<option value="Goa">GOA</option>
<option value="Bihar">BIHAR</option>
</select></td>
</tr>
<tr>
<td>PinCode</td>
<td><input type="text" name="pincode" id="pincode" size="30"></td>
</tr>
<tr>
<td>EmailId</td>
<td><input type="text" name="emailid" id="emailid" size="30"></td>
</tr>

<tr>
<td>DOB</td>
<td><input type="text" name="dob" id="dob" size="30"></td>
</tr>
<tr>
<td>MobileNo</td>
<td><input type="text" name="mobileno" id="mobileno" size="30"></td>
</tr>
<tr>
<td><input type="reset"></td>
<td colspan="2"><input type="submit" value="Submit Form" /></td>
</tr>
</table>
</form>
</body>
</html>
EXAMPLE:
4.Explain inline Frames in HTML with example code. Also describe the
concept of targeting in frames.
Inline Frames:
Inline Frames are a great implementation of the frames idea — they allow you to open new
pages inside main pages, without the many problems brought about by classic-style frames.
Inline or “floating” frames are ones which appear on a page, much like an image or a table
would. This allows you to open completely separate pages in the middle of your pages.
So now, I have two pages being displayed on one page, without the restrictions of the usual
frameset stuff. The code for inline frames is very easy, and very similar to the <img> element.
To get that page to display, I wrote
<iframe src="../examples/inlineframes1.html" width="80%" height="110"> </iframe>
Very, very easy really. The iframe element sets up some space for the new content, and the src
attribute specifies the address of the inlined file. If you wanted to use a page from another
website, you could just put in its full URL, starting with the “http://” part.
The width and height of the frame are denoted as either pixel values or percentages. You do need
a closing </iframe> tag, even though you'd imagine it's un-needed, so don’t forget it. Anything
you put between the tags will appear to browsers who can’t do iframes
If you have multiple iframes on the same page you can have them interacting, by sending
commands between them, just like normal frames.
Again, this is basically the same method of interlinking you’ve learned in basic frames. You
simply give your iframes a name attribute, and then add the appropriate target="name" to the
link. So, the code would go something like this:
<iframe src="left.html" name="left"></iframe>
<iframe src="right.html" name="right"></iframe>
Then in left.html, add target="right" to the link. Easy. And if it’s not, you should probably have a
look back over the first frames tutorial. If you want to set up this effect, you will need to create a
blank html file to sit in the right iframe waiting to change — you cannot leave the src empty.

All Atributes:
There are a load of attributes you can use on your inline frames, and they are:

scrolling="no"
if the framed page is too big for the dimensions you've specified a scrollbar will appear. This
attribute will stop this from happening.
frameborder="0"
setting the border to 0 gets rid of it, allowing the page to seamlessly integrate with your main
page. Possible values are 1 (yes) and 0 (no), you cannot give it a bigger border.
marginwidth="x"
adds some spacing between the iframe’s side borders and the page inside it.
marginheight="x"
adds some spacing between the iframe’s top and bottom borders and the page inside it. Any
value you give marginwidth and marginheight will be added to any margins you’ve applied to
the inner pages themselves.
align="right"
like the image attribute, this will affect how the text around the frame aligns itself.
hspace="x"
sets a margin of white space around the iframe to the sides.
vspace="x"
sets a margin of white space to the top and bottom of the iframe, pushing it away from other page
elements.
Most of these attributes can be replaced with appropriate CSS, for borders and spacing.
Example:
<!DOCTYPE html>
<html>
<body>

<h1>The iframe element</h1>

<iframe src="https://www.lpu.in" title="Lovely Professional university">


</iframe>

</body>
</html>

Concept of Targeting in Frames:Certainly by now we all understand how a link works in a


regular HTML document. Point, click, and presto, a new document appears in the browser
window. Frames, however, operate under a different set of protocols. When hyperlinks in framed
documents are selected, the browser may update just the frame containing the hyperlink, a
different frame, a set of frames, or even the entire window. Thus, when a hyperlink is selected,
some or all parts of the browser window may change, depending on parameters specified in the
link.
As I metioned earlier, linking between frames is the result of the ability to target certain frames
through your HTML coding. Compared to the details of creating a layout document for your
frames, targeting is a snap. The most difficult part of designating targets is deciding how you
want the information to flow and how the architecture of the site should be designed.

Frames are targeting with regular A HREF commands as an attribute specified within the anchor
tag command. As long as you have indicated frame names in your layout document, you can
easily program these target links. If you have not assigned names to your frames, return to your
main frame layout document and name each frame so that you can specify them in your
programming. The target attribute functions like this:
<a href=document.html target="frame name">Link</a>
The targeting frame name may be either an explicit name assigned to frames in layout
documents, such as the frame name "bottom" appearing in layout document a.html above, or
what is called an implicit name, which is determined by the frame's relationship to other frames.
Implicit names are reserved words beginning with an underscore (_) and contained within
quotation marks. Some of these are listed below:
_self
Directs the browser to update the frame containing the selected hyperlink. This is
the default target if no target is specified at all.
_parent
Directs the browser to update the parent frame if the frame containing the
hyperlink is a child frame, otherwise has the same effect as _self.
_top
Directs the browser to update the entire window, regardless of the current frame
layout. If you are providing a link to another framed document or a web site
outside of your own, this specification is desired. This way, the user can leave the
confines of your frames to view the other page on the full screen without the
distortion of resizing it will undergo to fit inside your frames.

EXAMPLE

An example of targeting in HTML programming:

<head>
<title>X</title>
</head>
<body>
<h1>X</h1>
<a href=yz.htm target=bottom>YZ</a>
<a href=zy.htm target=bottom>ZY</a>
</body>
</html>

You might also like