Skip to content

CS202 - Fundamentals of Front End Development

6 Topics 24 Posts
  • 0 Votes
    2 Posts
    420 Views
    zaasmiZ

    11bf63b2-4d58-4470-bda8-51c1f310223e-image.png dab411a1-d5e6-4659-9246-4db1fb98ac14-image.png 0ba639b3-6c8c-4dbc-8d14-9d91a17e1f73-image.png e0d4f9ce-f6d1-4fee-ad85-fa9acaf07bb7-image.png 11cabe36-55d7-4de3-834d-e597b298ae75-image.png e999b982-4d2b-4ff8-80aa-4ca7e970da20-image.png 45bb2cdb-cae1-4a24-8cdb-1c3552d8e24b-image.png

  • 0 Votes
    2 Posts
    266 Views
    zaasmiZ
    <!DOCTYPE html> <html> <head> <title>cs202-assignment-1-solution</title> <style> body{ background: #40E0D0; } h1 { text-align: center; } .im1c { height: 150px; width: 350px; } .center { display: block; margin-left: auto; margin-right: auto; width: 50%; } table, th, td { border: 1px solid black; text-align: center; } </style> </head> <body> <h1>HTML (Hyper Text Markup Language)</h1> <div class="im1c center" ><img class="im1c center" src="im1.jpg"></div> <h3>Introduction</h3> <p>HTML stands for hyper text markup language.It is standerd markup language used to create the web pages along with CSS and Javascript.</p> <ol> <li>HTML Docoument</li> <li>HTML Elements</li> <li>HTML headings and paragraphs</li> <li>HTML formating Elements</li> </ol> <table style="width:70%; margin-left:15%; "> <tr> <th>TOPIC</th> <th>DISCRIPTION</th> <th>Interner links</th> </tr> <tr> <td><b>HTML DOCUMENTS</b></td> <td> <li>All html documents must started with <!DOCTYPE html></li> <li>The html being itself along with <html> and ends with </html> </li> <li>The visible pasrt html documents is <Body> tag</li></td> <td><a href="#">click here for details</a></td> </tr> <tr> <td><b>HTML ELEMENTS</b></td> <td>AN HTML element usausly with a starting tag and the ending tag</td> <td><a href="#">click here for details</a></td> </tr> <tr> <th rowspan="2">HTML Headding & paragraphs</th> <td>AN HTML element usausly with a starting tag and the ending tag</td> <td><a href="#">click here for details</a></td> </tr> <tr> <td>AN HTML element usausly with a starting tag and the ending tag</td> <td><a href="#">click here for details</a></td> </tr> <tr> <td><b>HTML Formatting Elements</b></td> <td> <li>blod text</li> <li>important text </li> <li>marked text</li> <li>small text </li> <li>deletd text</li> <li>inserted text </li> <li>subscript text </li> <td><a href="#">click here for details</a></td> </tr> </table> </body> </html>

    Solution 100%

    <!DOCTYPE html> <html> <body style="background-color:Turquoise; width:100% ; height:50%"> <h1 align="center">HTML (Hyper Text Markup Language) Basics</h1> <center> <img src="D:\CS202\HTML.jpg" alt="HTML" width="200" height="200"> </center> <p> <h2>Introduction </h2><br> HTML stands for Hyper Text Markup Language. It is the standard markup language used to create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology used to create web pages, as well as to create user interfaces for mobile and web applications. Web browsers can read HTML files and render them into visible or audible web pages. HTML basics include the following: <ol> <li>HTML Documents</li> <li>HTML Elements</li> <li>HTML Headings and Paragraphs</li> <li>HTML Formatting Elements</li> </ol> </p> <center> <table border="1"> <tr> <th>Topic </th> <th> Description </th> <th> Internet Links </th> </tr> <tr> <th> HTML Documents </th> <td> <ul> <li>All HTML documents must start with a type declaration: &lt!DOCTYPE html&gt </li> <li>The HTML document itself begins with and ends with &lthtml&gt and ends with &lt/html&gt </li> <li>The visible part of the HTML document is between &ltbody&gt and &lt/body&gt tags.</li> </ul> </td> <td> <a href="https://www.w3schools.com/html/html_basic.asp"> Click Here For Details... </a> </td> </tr> <tr> <th> HTML Elements </th> <td> An HTML element usually consists of a start tag and an end tag, with the content inserted in between them. </td> <td> <a href="https://www.w3schools.com/html/html_elements.asp"> Click Here For Details... </a> </td> </tr> <tr> <th rowspan="2">HTML Headings & Paragraphs </th> <td>HTML headings are defined with the &lt h1 &gt to &lt h6 &gt tags.</td> <td> <a href="https://www.w3schools.com/html/html_headings.asp"> Click Here For Details... </a> </td> </tr> <tr> <td>HTML paragraphs are defined with the &lt p &gt tag. </td> <td> <a href="https://www.w3schools.com/html/html_headings.asp"> Click Here For Details... </a> </td> </tr> <tr> <th> HTML Formatting element </th> <td> <ul> <li>Bold text </li> <li>Important text </li> <li>Emphasized text </li> <li>Marked text </li> <li>Small text </li> <li>Deleted text </li> <li>Inserted text </li> <li>Subscriptstext </li> </ul> </td> <td> <a href="https://www.w3schools.com/html/html_formatting.asp"> Click Here For Details... </a> </td> </table> </center> </body> </html>
  • 0 Votes
    5 Posts
    159 Views
    zareenZ

    @zareen said in CS202 GDB1 Solution and discussion:

    Use AJAX

    AJAX is a technique for creating fast and dynamic web pages. AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.

  • 0 Votes
    6 Posts
    173 Views
    zareenZ

    Check Solution Result

  • 0 Votes
    3 Posts
    143 Views
    zareenZ

    Solution Idea Code

    <html> <head> <title>CS202 Assignment no 2</title> <style> body{ padding:0; margin:0; width:100%; } #mynav{ background-color:black; height:80px; } #mynav a:link, a:visited { background-color: red; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } #mynav a:hover, a:active { background-color: black; } #firstimage img{ width:100%; height:600px; fill:cover; margin: 0px auto; } #serviceheading{ padding-top:10px; padding-bottom:10px; } #serviceheading h2{ text-align:center; } .servicesection{ width:32%; float:left; padding-left:5px; margin-bottom:5px; } .servicesection img{ width:15%; height:100px; padding-left:80px; margin:2px; } .servicesection h2{ margin: 5px 20px; } #banner1{ background-color:#21E6E0; } #banner2{ background-color:#F91912; } #banner3{ background-color:#58F912; } #myfooter{ width:99%; margin-top:5px; background-color:black; float:left; padding-bottom:100px; } #footer1{ width:41%; margin-left:5px; float:left; } #footer1 h3{ color:Red; padding-left:150px; } #footer1 p{ color:white; } #footer2{ width:41%; margin-left:90px; float:left; } #footer2 h4{ color:green; font-size:25px; } #btn{ background-color:#F91912; } #btn:hover{ background-color:green; } </style> </head> <body> <form action=""> <div id="mynav"> <a href="Home.html">Home</a> <a href="service.html">Service</a> <a href="about.html">About</a> <a href="contactus.html">Contact us</a> </div> <div id="firstimage"> <img src="banner.jpg" alt="Banner Image"> </div> <div id="serviceheading"> <h2>Service</h2> <div class="servicesection" id="banner1"> <img src="camera.PNG" alt="Banner Image"> <h2>Photgraphy</h2> <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div class="servicesection" id="banner2"> <img src="video.PNG" alt="Banner Image"> <h2>VideoGraphy</h2> <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div class="servicesection" id="banner3"> <img src="web.PNG" alt="Banner Image"> <h2>Web Design</h2> <p> orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p> </div> <div id="myfooter"> <div id="footer1"> <h3>About Us</h3> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop </p> </div> <div id= "footer2"> <h4>Contact Us</h4><br> <input type="text" placeholder="name"><br><br> <input type="text" placeholder="Email Addres"><br><br> <textarea rows="4" cols="50"> </textarea><br><br> <button id="btn"> Press Me</button> </div> </div> </form> </body> </html> cs202 assignment solution with internal css in head section.html Displaying cs202 assignment solution with internal css in head section.html.
  • 0 Votes
    6 Posts
    167 Views
    zareenZ

    Solution Code

    <!DOCTYPE html> <html> <head> <style> #nav { display:block; padding:5px; border-width:0.5px; width:500px; } </style> <title></title> </head> <body style="background-color:powderblue; align: center;"> <center> <img src="Student_support_system.jpg"> <form> <table > <tr> <td> Student Name: </td> <td> <input type="text" name="stdname"> </td> </tr> <tr> <td> Roll No: </td> <td> <input type="text" name="rollno"> </td> </tr> <tr> <td> Mobile No: </td> <td> <input type="text" name="mobileno"> </td> </tr> <tr> <td>Choose type of Problem:</td> <td> <input type="radio" name="issue" checked> Email realted Issue<br> <input type="radio" name="issue" > LMS related Issue<br> <input type="radio" name="issue" > Password related Issue<br> <input type="radio" name="issue" > Exam related Issue<br> <input type="radio" name="issue" > Result related Issue<br> <input type="radio" name="issue" > Other </td> </tr> <tr> <td>Comments:</td> <td><input type="text" multiple name="Comments" style="width: 300px; height:100px;"> </td> </tr> <tr> <br> <td></td> <td > <input type="submit" style="width:100px;" value="Submit" style="";></td> </tr> </table> </form> </center> </body> </html>