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 100100 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 and 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> Frames Not Supported in HTML5.</p> </noframes> </body> </html>

Exercise - 3:

3 a) Write a HTML program, that makes use of article, aside, figure, figcaption, footer, header, main,nav, section, div, span tags..
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 Semantic Tags</title> </head> <body> <header> <h1>Welcome to Our Website</h1> <nav> <ul> <li><a href="#home">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header> <main> <section> <h2>About Us</h2> <p>This section gives information about the website and our mission.</p> </section> <article> <h2>Latest News</h2> <p>Stay tuned for the latest updates in the world of web development!</p> <figure> <img src="logo header.jpg" width=500 height=100 alt="News Image"> <figcaption>Image showing the latest news update.</figcaption> </figure> </article> <section> <h2>Contact Us</h2> <p>Feel free to reach out to us via the contact form below.</p> </section> <aside> <h3>Quick Links</h3> <ul> <li><a href="#privacy-policy">Privacy Policy</a></li> <li><a href="#terms">Terms of Service</a></li> </ul> </aside> </main> <footer> <p>© 2024 My Website. All rights reserved.</p> </footer> <div> <p>This is a div element used for grouping content.</p> </div> <span>This is a span element used for styling small sections of text.</span> </body> </html>
3 b) Write a HTML program, to embed audio and video into HTML web page.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Audio and Video Embedding</title> </head> <body> <h2>Embed Audio Example</h2> <audio controls> <source src="audio.mp3" type="audio/mp3"> Your browser does not support the audio element. </audio> <h2>Embed Video Example</h2> <video width="600" controls> <source src="video.mp4" type="video/mp4"> Your browser does not support the video element. </video> </body> </html>
3 c) Write a program to apply different types (or levels of styles or style specification formats) inline, internal, external styles to HTML elements. (identify selector, property and value)..
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Different Types of Styles</title>  <style> body { font-family: Arial, sans-serif; } h1 { color: blue; } p { font-size: 16px; color: green; } .highlight { background-color: yellow; } </style>  <link rel="stylesheet" href="styles.css"> </head> <body> <h1 style="color: red;">Inline CSS Example</h1>  <p>This paragraph uses internal CSS for styling.</p> <p class="highlight">This paragraph uses an external CSS class from "styles.css" file.</p> <p style="font-size: 20px; color: purple;">This paragraph uses inline CSS for specific styling.</p> </body> </html>

Exercise - 4: Selector forms

4 a) Write a program to apply different types of selector forms
i. Simple selector (element, id, class, group, universal).
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Selectors Example</title> <style> / Simple Selectors / / Element Selector / h1 { color: blue; } / ID Selector / #main-header { background-color: lightgray; } / Class Selector / .highlight { font-weight: bold; color: red; } / Group Selector / h2, p { font-family: Arial, sans-serif; } / Universal Selector / { margin: 0; padding: 0; } </style> </head> <body> <h1 id="main-header">Welcome to CSS Selectors!</h1> <p>This is a sample text.</p> <p class="highlight">This paragraph has a class "highlight".</p> <div> <p>This is a paragraph inside a div.</p> <p>This is another paragraph inside the div.</p> </div> <h2>Heading with Sibling</h2> <p>This paragraph is adjacent to the h2.</p> <p>This paragraph is a general sibling of the h2.</p> </body> </html>
4 b) Write a program to apply different types of selector forms
ii. Combinator selector (descendant, child, adjacent sibling, general sibling)
iii.Pseudo-class selector.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Selectors Example</title> <style> /* Combinator Selectors / / Descendant Selector / div, p { font-size: 18px; } / Child Selector / div > p { color: green; } / Adjacent Sibling Selector / h2 + p { font-size: 20px; } / General Sibling Selector / h2 ~ p { color: purple; } / Pseudo-class Selector / a:hover { color: green; } </style> </head> <body> <h1>Welcome to CSS Selectors!</h1> <p>This is a sample text.</p> <p>This paragraph has a class "highlight".</p> <div> <p>This is a paragraph inside a div.</p> <p>This is another paragraph inside the div.</p> </div> <h2>Heading with Sibling</h2> <p>This paragraph is adjacent to the h2.</p> <p>This paragraph is a general sibling of the h2.</p> <a href="https://kottesandeep.blogspot.com">Visit Example</a><br> <a href="https://kottesandeep.blogspot.com">My Blog</a><br> </body> </html>
4 c) Write a program to apply different types of selector forms
iv. Pseudo-element selector
v. Attribute selector
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Selectors Example</title> <style> / Pseudo-element Selector / p::first-letter { font-size: 2em; color: orange; } / Attribute Selector / a[href^="https"] { color: red; } a[href$=".com"] { color: green; } </style> </head> <body> <h1>Welcome to CSS Selectors!</h1> <p>This is a sample text.</p> <p>This paragraph has a class "highlight".</p> <div> <p>This is a paragraph inside a div.</p> <p>This is another paragraph inside the div.</p> </div> <a href="http://kottesandeep.blogspot.com/">Visit Example</a><br> <a href="https://kottesandeep.blogspot.org">Visit Example Org</a><br> <a href="https://kottesandeep.blogspot.com">My Blog</a> </body> </html>

Exercise - 5: CSS with Color, Background, Font, Text and CSS Box Model

5 a) Write a program to demonstrate the various ways you can reference a color in CSS.
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Color References</title> <style> .box { width: 300px; height: 50px; margin: 10px; text-align: center; line-height: 50px; color: white; font-weight: bold; } .named { background-color: blue; } .hex { background-color: #ff5733; } .rgb { background-color: rgb(60, 179, 113); } .rgba { background-color: rgba(255, 165, 0, 0.7); } .hsl{ background-color: hsl(120, 100%, 25%); } .hsla { background-color: hsla(300, 100%, 50%, 0.5); } </style> </head> <body> <h2>Different Ways to Reference Colors in CSS</h2> <div class="box named">Named Color (Blue)</div> <div class="box hex">Hex Color (#ff5733)</div> <div class="box rgb">RGB Color (60, 179, 113)</div> <div class="box rgba">RGBA Color (255, 165, 0, 0.7)</div> <div class="box hsl">HSL Color (120, 100%, 25%)</div> <div class="box hsla">HSLA Color (300, 100%, 50%, 0.5)</div> </body> </html>
5 b) Write a CSS rule that places a background image halfway down the page, tilting it horizontally. The image should remain in place when the user scrolls up or down.
<!DOCTYPE html> <html lang="en"> <head> <title>Tilted Background</title> <style> body { margin: 0; height: 200vh; / Making the page scrollable / } .background-image { position: fixed; top: 50%; left: 50%; width: 400px; height: 300px; background: url('bird1.png'); transform: translate(-50%, -50%) rotate(10deg); / Tilt horizontally / z-index: -1; / Keep it in the background / } </style> </head> <body> <div class="background-image"></div> <div style="padding: 50px; text-align: center;"> <h1>Scroll Down</h1> <p>This is a sample page with a tilted background image.</p> </div> </body> </html>
5 c) Write a program using the following terms related to CSS font and text:
i. font-size ii. font-weight iii. font-style
iv. text-decoration v. text-transformation vi. text-alignment
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS Font and Text Properties</title> <style> .ex1 { font-size: 20px; / Setting font size / font-weight: bold; / Making text bold / #font-style: italic; / Italicizing text / text-decoration: underline; / Underlining text / text-transform: uppercase; / Transforming text to uppercase / text-align: center; / Aligning text to center / border: 2px solid black; padding: 20px; width: 50%; margin: 20px auto; } </style> </head> <body> <div class="ex1"> This is a CSS Text Styling Example! </div> </body> </html>
5 d) Write a program, to explain the importance of CSS Box model using
i. Content ii. Border iii. Margin iv. padding
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Box Model Demo</title> <style> .box { width: 200px; / Content width / height: 100px; / Content height / background-color: lightblue; / Content background / padding: 20px; / Space inside the border / border: 5px solid darkblue; / Border surrounding the content and padding / margin: 30px; / Space outside the border */ } </style> </head> <body> <h2>CSS Box Model Demonstration</h2> <div class="box">Content Area</div> </body> </html>

Exercise - 6: Applying JavaScript - internal and external, I/O, Type Conversion

6 a)Write a program to embed internal and external JavaScript in a web page.

Remaining Programs will be updated soon

at February 09, 2025 No comments:

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

Newer Posts Older Posts Home

Subscribe to: Posts (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.