Web Programming Lecture 3
Index
Content
The browser does not display the html tags but interpret it. HTML Forms the building blocks of all websites. HTML Allows images and objects to be embedded. Hyper text markup language. Content will be directed to the webpage
Assignment 1
Write a html program to display Title :- Name of collegee Heading:- college program Btech Paragraph students details each paragraph Body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Name of collegee</title>
</head>
<body>
<h1>College Program Btech</h1>
<p>College name is MPSTME</p>
<p>Branch is Btech Cyber Security</p>
<p>Students details are:</p>
<p>Name: Tejas Sahoo</p>
<p>Roll No: K057</p>
<p>Year: 2nd year</p>
<p>Semester: 3</p>
</body>
</html>Assignment 1
Write a code to create a web page for car store andn display the three car details Car Image Car name in different headings their different versions with year.
<!DOCTYPE html>
<htnl lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car Store</title>
<style>
body{
font-family: Arial, Helvetica, sans-serif; }
</style>
</head>
<body>
<h1>Car Store</h1>
<h2>Porsche 911</h2>
<img src="https://files.porsche.com/filestore/image/multimedia/none/992-2nd-c2-modelimage-sideshot/thumbwhite/3944d683-19bf-11ef-812b-005056bbdc38;sI;twebp/porsche-thumbwhite.webp" alt="Porsche 911">
<p>For More information, Visit <a href="https://www.porsche.com/international/models/911/carrera-models/911-carrera/">Porsche 911</a></p>
<h3>Versions:</h3>
<ul>
<li>2020</li>
<li>2021</li>
<li>2022</li>
</ul>
<h2>GT3 RS</h2>
<img src="https://files.porsche.com/filestore/image/multimedia/none/992-gt3-rs-modelimage-sideshot/thumbwhite/d5f44326-1a15-11ed-80f5-005056bbdc38;sI;twebp/porsche-thumbwhite.webp" alt="GT3 RS">
<p>For More information, Visit <a href="https://www.porsche.com/international/models/911/carrera-models/911-carrera/">Porsche 911</a></p>
<h3>Versions:</h3>
<ul>
<li>2021</li>
<li>2022</li>
</ul>
<h2>718 Spyder RS</h2>
<img src="https://files.porsche.com/filestore/image/multimedia/none/982-718spyder-rs-modelimage-sideshot/thumbwhite/29311330-f334-11ed-8103-005056bbdc38;sI;twebp/porsche-thumbwhite.webp" alt="718 Spyder RS">
<p>For More information, Visit <a href="https://www.porsche.com/international/models/911/carrera-models/911-carrera/">Porsche 911</a></p>
<h3>Versions:</h3>
<ul>
<li>2022</li>
<li>2023</li>
</ul>
<h2>Bajaj RE Rickshaw Virar Edition</h2>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQaQfzSmRWkAnvFx_y6xWAUaKqyAUFZD0MxFA&s" alt="Bajaj RE Rickshaw Virar Edition">
<img src="https://preview.redd.it/dc-modified-auto-v0-4zog3whuzeb81.jpg?width=1080&crop=smart&auto=webp&s=b22e42e9544f9a9fe88b8b5fb967e1e7919cf345" alt="Bajaj RE Rickshaw Virar Edition">
<p>For More information, Visit <a href="https://www.bajajauto.com/re-auto/re-auto">Bajaj RE Rickshaw Virar Edition</a></p>
<h3>Versions:</h3>
<ul>
<li>2021</li>
<li>2022</li>
<li>2023</li>
</ul>
</body>Assignment 2
Write a program to open google web page from ur current local page with the help of image in the link
References](<# Web Programming Lecture 3
Index
Content
HTML Basics
HTML forms the building blocks of all websites. It allows the browser to interpret and render content such as text, images, and multimedia elements on a web page. HTML stands for HyperText Markup Language, and it structures content that is directed to the webpage.
HTML Forms
HTML allows for the embedding of images and objects, which enhances the interactivity and visual appeal of web pages. Forms in HTML are used to collect user input and can include elements such as text fields, checkboxes, radio buttons, and submit buttons.
HTML and Multimedia
HTML supports the embedding of images, videos, and other multimedia objects to create rich, interactive user experiences. This is crucial for modern web development where multimedia content is prevalent.
Assignments
Assignment 1: College Program
Write an HTML program to display the following:
- Title: Name of College
- Heading: College Program Btech
- Paragraphs: Student details
Code
%3C!DOCTYPE html%3E
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Name of College</title>
</head>
<body>
<h1>College Program Btech</h1>
<p>College name is MPSTME</p>
<p>Branch is Btech Cyber Security</p>
<p>Students details are:</p>
<p>Name: Tejas Sahoo</p>
<p>Roll No: K057</p>
<p>Year: 2nd year</p>
<p>Semester: 3</p>
</body>
</html>Assignment 2: Car Store Web Page
Write a code to create a web page for a car store and display details of three cars. Include:
- Car Image
- Car Name (in different headings)
- Different versions with year
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car Store</title>
</head>
<body>
<h1>Welcome to Our Car Store</h1>
<h2>Car 1: Ford Mustang</h2>
<img src="mustang.jpg" alt="Ford Mustang">
<h3>Versions:</h3>
<ul>
<li>Mustang GT - 2020</li>
<li>Mustang EcoBoost - 2021</li>
</ul>
<h2>Car 2: Tesla Model S</h2>
<img src="model_s.jpg" alt="Tesla Model S">
<h3>Versions:</h3>
<ul>
<li>Model S Plaid - 2022</li>
<li>Model S Long Range - 2023</li>
</ul>
<h2>Car 3: BMW 3 Series</h2>
<img src="bmw_3series.jpg" alt="BMW 3 Series">
<h3>Versions:</h3>
<ul>
<li>330i - 2019</li>
<li>340i - 2020</li>
</ul>
</body>
</html>Assignment 3: Opening Google from Local Page
Write a program to open the Google web page from your current local page with the help of an image link.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Open Google</title>
</head>
<body>
<h1>Open Google from this Page</h1>
<a href="https://www.google.com" target="_blank">
<img src="google_logo.png" alt="Google">
</a>
</body>
</html>