Dr. K. Sandeep

Associate Professor & HOD,
Department of Information Technology,
Dhanekula Institute of Engineering & Technology

FULL STACK DEVELOPMENT I

Syllabus

Exercise - 1:

1a. Write a HTML program, to explain the working of lists. Note: It should have an ordered list, unordered list, nested lists and ordered list in an unordered list and definition lists.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Lists</title> </head> <body> <h1>Working of Lists in HTML</h1> <h2>1. Ordered List</h2> <p>An ordered list (numbered list) is created using the <code><ol></code> tag. Here is an example:</p> <ol> <li>First Item</li> <li>Second Item</li> <li>Third Item</li> </ol> <h2>2. Unordered List</h2> <p>An unordered list (bulleted list) is created using the <code><ul></code> tag. Here is an example:</p> <ul> <li>Apple</li> <li>Banana</li> <li>Cherry</li> </ul> <h2>3. Nested Lists</h2> <p>A nested list is a list within another list. You can nest both ordered and unordered lists.</p> <ol> <li>Fruits <ul> <li>Orange</li> <li>Grapes</li> </ul> </li> <li>Vegetables <ul> <li>Carrot</li> <li>Spinach</li> </ul> </li> </ol> <h2>4. Ordered List Inside an Unordered List</h2> <p>This is an example of an ordered list inside an unordered list:</p> <ul> <li>Animals <ol> <li>Lion</li> <li>Tiger</li> <li>Elephant</li> </ol> </li> <li>Birds <ol> <li>Eagle</li> <li>Parrot</li> </ol> </li> </ul> <h2>5. Definition List</h2> <p>A definition list is used to display a list of terms and their definitions. It is created using the <code><dl></code>, <code><dt></code>, and <code><dd></code> tags.</p> <dl> <dt>HTML</dt> <dd>A markup language used to create web pages.</dd> <dt>CSS</dt> <dd>A stylesheet language used to describe the presentation of a document written in HTML.</dd> <dt>JavaScript</dt> <dd>A programming language used to create interactive effects within web browsers.</dd> </dl> </body> </html>
1b. Write a HTML program, to explain the working of hyperlinks using tag and href, target Attributes.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Hyperlinks</title> </head> <body> <h1>Working of Hyperlinks in HTML</h1> <p>Hyperlinks are created using the <code><a></code> tag. The <code>href</code> attribute defines the URL of the page the link goes to. You can also use the <code>target</code> attribute to specify where the link will open. Here are some examples:</p> <h2>1. Basic Hyperlink</h2> <a href="https://kottesandeep.blogspot.com/">Visit Blogspot</a> <h2>2. Link to a Specific Section on the Same Page</h2> <a href="#section1">Go to Section 1</a> <h2>3. Hyperlink with target Attribute</h2> <p>The <code>target="_blank"</code> attribute opens the link in a new tab:</p> <a href="https://kottesandeep.blogspot.com/" target="_blank">Open Example.com in a new tab</a> <h2>4. Hyperlink to an Email Address</h2> <p>You can also create a link that opens the user's email client:</p> <a href="mailto:someone@gmail.com">Send Email</a> </body> </html>
1c. Write a HTML program, in such a way that, rather than placing large images on a page, the preferred technique is to use thumbnails by setting the height and width parameters to something like to 100*100 pixels. Each thumbnail image is also a link to a full sized version of the image. Create an image gallery using this technique
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Gallery with Thumbnails</title> </head> <body> <h1>Image Gallery</h1> <p>Click on any thumbnail to view the full-size image.</p> <div class="gallery"> <a href="images/image1.jpg" target="_blank"> <img src="images/image1_thumb.jpg" alt="Image 1"> </a> <a href="images/image2.jpg" target="_blank"> <img src="images/image2_thumb.jpg" alt="Image 2"> </a> <a href="images/image3.jpg" target="_blank"> <img src="images/image3_thumb.jpg" alt="Image 3"> </a> <a href="images/image4.jpg" target="_blank"> <img src="images/image4_thumb.jpg" alt="Image 4"> </a> </div> </body> </html>

Exercise - 2:

2 a&b. Write a HTML program, to explain the working of tables by preparing a timetable. (Note: Use tag to set the caption to the table & also use cell spacing, cell padding, border, rowspan, colspan etc.)..
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Timetable</title> </head> <body> <h1>Weekly Timetable</h1> <table border="1" cellspacing="5" cellpadding="10"> <caption>Student's Weekly Schedule</caption> <tr> <th>Day/Time</th> <th>9:00 to 9:50</th> <th>9:50 to 10:40</th> <th>10:40 to 10:50</th> <th>10:50 to 11:30</th> <th>11:30 to 12:20</th> <th>12:20 to 01:10</th> </tr> <tr> <td>Monday</td> <td>SE</td> <td>OS</td> <td rowspan="6">Break</td> <td>P&S</td> <td>OT</td> <td>PE</td> </tr> <tr> <td>Tuesday</td> <td>DBMS</td> <td>SE</td> <td>sports</td> <td>SE</td> <td>OS</td> </tr> <tr> <td>Wednesday</td> <td colspan="2">Break</td> <td colspan="3">Full Stack Lab</td> </tr> <tr> <td>Thursday</td> <td>Computer OS</td> <td>PE</td> <td>Music</td> <td>DBMS</td> <td>P&S</td> </tr> <tr> <td>Friday</td> <td>P&S</td> <td>OT</td> <td>OS</td> <td>DBMS</td> <td>sports</td> </tr> <tr> <td>Saturday</td> <td>P&S</td> <td>OT</td> <td>OS</td> <td>DBMS</td> <td>sports</td> </tr> </table> </body> </html>
2c. Write a HTML program, to explain the working of forms by designing Registration form. (Note: Include text field, password field, number field, date of birth field, checkboxes, radio buttons, list boxes using <select>&<option> tags, <text area> and two buttons ie: submit and reset. Use tables to provide a better view).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Registration Form</title> </head> <body> <h1>Registration Form</h1> <form action="#" method="POST"> <table border="1" cellspacing="10" cellpadding="5"> <tr> <td>Full Name:</td> <td><input type="text" name="fullname" required></td> </tr> <tr> <td>Password:</td> <td><input type="password" name="password" required></td> </tr> <tr> <td>Age:</td> <td><input type="number" name="age" required></td> </tr> <tr> <td>Date of Birth:</td> <td><input type="date" name="dob" required></td> </tr> <tr> <td>Gender:</td> <td> <input type="radio" name="gender" value="male"> Male <input type="radio" name="gender" value="female"> Female </td> </tr> <tr> <td>Interests:</td> <td> <input type="checkbox" name="interest" value="sports"> Sports<br> <input type="checkbox" name="interest" value="music"> Music<br> <input type="checkbox" name="interest" value="reading"> Reading </td> </tr> <tr> <td>Country:</td> <td> <select name="country"> <option value="USA">USA</option> <option value="India">India</option> <option value="UK">UK</option> <option value="Australia">Australia</option> </select> </td> </tr> <tr> <td>Message:</td> <td><texarea name="message" rows="4" cols="50"></texarea></td> </tr> <tr> <td colspan="2"> <input type="submit" value="Submit"> <input type="reset" value="Reset"> </td> </tr> </table> </form> </body> </html>
2d. Write a HTML program, to explain the working of frames, such that page is to be divided into 3 parts on either direction. (Note: first frame image, second frame paragraph, third frame, hyperlink. and also make sure of using "no frame " attribute such that frames to be fixed.)
<html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Frames Example</title> </head> <body> <frameset cols="30%, 40%, 30%"> <frame src="2a.html" name="imageFrame"> <frame src="2b.html" name="textFrame"> <frame src="2C.html" name="linkFrame"> </frameset> <noframes> <p>Your browser does not support frames. Please use a modern browser.</p> </noframes> </body> </html>

Remaining Programs will be updated soon

at December 10, 2024

Email This BlogThis!Share to X Share to Facebook Share to Pinterest

No comments:

Post a Comment

Newer Post Older Post Home

Subscribe to: Post Comments (Atom)

My Profile

Total Pageviews

Search This Blog

Creative Commons License

This work is licensed under a Creative Commons Attribution 4.0 International License.

Powered by Blogger.