Scribd
Upload
7 views

HTML & CSS Practical 2

The document provides a series of practical HTML exercises, including creating HTML documents with various elements such as formatting, lists, images, links, tables, and semantic tags. It also includes a student registration form with input controls like text boxes, dropdowns, radio buttons, and checkboxes, along with JavaScript for form submission. Each exercise demonstrates different aspects of HTML and web design principles.

Uploaded by

No Name
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
7 views

HTML & CSS Practical 2

The document provides a series of practical HTML exercises, including creating HTML documents with various elements such as formatting, lists, images, links, tables, and semantic tags. It also includes a student registration form with input controls like text boxes, dropdowns, radio buttons, and checkboxes, along with JavaScript for form submission. Each exercise demonstrates different aspects of HTML and web design principles.

Uploaded by

No Name
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Practical List

HTML

1. Create an HTML document with following formatting – Bold, Italics, Underline, Colors, Headings,
Title, Font and Font Width, Background, Paragraph, Line Breaks, Horizontal Line, marquee text.

<!DOCTYPE html>
<html>
<head>
<title>Basics of HTML by Minnick</title>
<marquee><h1>Understanding the Basics of HTML</h1></marquee>
<style>
h1{
color:red;
font-size:40px;
font-family:"Times New Roman", Times, serif;
text-align:center;
background-color:gold;
}
</style>
</head>
<body>
<p>
Webpages are created using <b>Hypertext Markup Language (HTML)</b>, which is an
authoring language used to create documents for the web. HTML consists of a set of special
instructions called <b>tags</b> to define the structure and layout of content in a webpage.
A browser reads the HTML tags to determine how to display the webpage
content on a screen. Because the HTML tags define or “mark up” the content on the
webpage, HTML is considered a <b>markup language</b> rather than a traditional
programming language. HTML has evolved through several versions from the initial public
release of HTML 1.0 in 1989 to the current version, HTML5. Each version has
expanded the capabilities of the language.
</p>
<h3 style="color:orange"><u>HTML Elements and Attributes</u></h3>
<p>
A webpage is a text file that contains both content and HTML tags and is saved as an HTML
document. HTML tags mark the text to define how it should appear when viewed in a
browser. HTML includes dozens of tags that describe the structure of webpages and create
links to other content. For instance, the HTML tags &lt;nav&gt; and &lt;/nav&gt; mark the
start and end of a navigation area, while &lt;html&gt; and &lt;/html&gt; indicate the start
and end of a webpage. An <b>HTML element</b> consists of everything from the start tag
to the end tag, including content, and represents a distinct part of a webpage such as a
paragraph or heading. For example, &lt;title&gt; Webpage Example &lt;/title&gt; is an HTML
element that sets the title of a webpage. In common usage, when web designers say “Use a
p element to define a paragraph,” or something similar, they mean to use a starting
&lt;p&gt; tag to mark the beginning of the paragraph and an ending &lt;/p&gt; tag to mark
the end of the paragraph.
<br>
<br>
You can enhance HTML elements by using <b>attributes</b>, which define additional
characteristics, or properties, of the element such as the width and height of an image. An
attribute includes a name, such as width, and can also include a value, such as 300px,
which sets the width of an element in pixels. Attributes are included within the element’s,
start tag.
<br>
<br>
HTML combines tags and descriptive attributes that define how a document should appear
in a web browser. HTML elements include headings, paragraphs, hyperlinks, lists, and
images. Most HTML elements have a start tag and an end tag and follow the same rules, or
<b>syntax</b>, which determine how the elements should be written so they are
interpreted correctly by the browser. These HTML elements are called paired tags and use
the syntax <i>&lt;start tag&gt; content &lt;/end tag&gt;</i>, which has the following
meaning:
<br>
<ul>
<li>HTML elements begin with a start tag, or opening tag, such as &lt;title&gt;.</li>
<li>HTML elements finish with an end tag, or closing tag, such as &lt;/title&gt;.</li>
<li>Content is inserted between the start and end tags.</li>
</ul>
Some HTML elements are void of content. They are called <b>empty</b>, or <b>void</b>,
tags. Examples of empty tags are &lt;br&gt; for a line break and &lt;hr&gt; for a horizontal
line, or rule. The syntax for empty tags is <i>&lt;tag&gt;</i>.
<hr>
</p>
</body>
</html>
2. Create an HTML document with Ordered and Unordered lists.

<!DOCTYPE html>
<html>
<head>
<h3>Decisions To Make When Creating Your Next Webpage</h3>
</head>
<body>
<ol>
<li>Plan the website</li>
<ol type="a">
<li>Identify the purpose of the website.</li>
<li>Identify the users of the website.</li>
<li>Recognize the computing environments of the users.</li>
<li>Design a wireframe and a site map.</li>
</ol>
<li>Choose the design components.</li>
<ol type="a">
<li>Identify possible graphics for the website.</li>
<li>Determine the types of navigation tools and typography to use.</li>
<li>Select a color scheme.</li>
<li>Consider accessibility.</li>
</ol>
<li>Select a webpage authoring tool.</li>
<ol type="a">
<li>Review available authoring tools. Some examples of such tools are:</li>
<ul>
<li>Notepad,</li>
<li>Notepad++,</li>
<li>Sublime,</li>
<li>Programmer’s Notepad,</li>
<li>TextEdit and</li>
<li>TextWrangler</li>
</ul>
<li>Determine an authoring tool to use to create the webpages.</li>
</ol>
<li>Create a basic HTML webpage.</li>
<ol type="a">
<li>Insert the basic HTML tags.</li>
<li>Indent some elements to improve readability.</li>
<li>Add content to the webpage.</li>
<li>Save the file as an HTML document.</li>
<li>Display the webpage in a browser.</li>
</ol>
</ol>
</body>
</html>
3. Create an HTML document demonstrating use of images in webpages (including images as logos,
cell data in a table, background of a table, clickable icons, etc).

<!DOCTYPE html>
<html>
<head>
<title>Images in Webpages</title>
<style>
/* Style for the table */
table {
width: 100%;
border-collapse: collapse;
background-image: url('table-background.jpg');
}
th, td {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
th {
background-color: #f2f2f2;
}
/* Style for the clickable icon */
.icons {
display:flex;
justify-content:space-between;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Logo -->
<img src="logo.png" alt="Logo" style="width: 150px;">
<!-- Table with image background -->
<table>
<tr>
<th>Product</th>
<th>Image</th>
<th>Types of Food Items</th>
</tr>
<tr>
<td>Produce</td>
<td><img src="product1.png" alt="Product 1" style="width: 100px;"></td>
<td>carrots,celery,corn,lettuce,potatoes,tomatoes,apples,bananas,oranges,
strawberries</td>
</td>
</tr>
<tr>
<td>Meat/Fish/Poultry</td>
<td><img src="product2.png" alt="Product 2" style="width: 100px;"></td>
<td>chicken,ground beef, ham, hot dogs, lunch meat, pork chops, roast, tuna, turkey,
lobster</td>
</td>
</tr>
<tr>
<td>Canned Goods</td>
<td><img src="product3.png" alt="Product 3" style="width:100px;"></td>
<td>egg noodles, jam/jelly, macaroni, pancake mix, pancake syrup, peanut butter, pizza
sauce, rice, spaghetti, tomato sauce</td>
</tr>
</table>
<!-- Clickable icons -->
<div class="icons">
<img src="buy-now.png" alt="Icon 2" onclick="alert('Buy Product?')">
<img src="add-to-cart.png" alt="Icon 1" onclick="alert('Add Product to Cart?')">
</div>
</body>
</html>
4. Create an HTML document to demonstrate Internal and External linking.

5. Create an HTML document to display the following table:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<table>

<tr>

<th colspan="4">Seminar</th>

</tr>

<tr>

<th>Day</th>

<th>

<table>

<tr>

<th colspan="2">Schedule</th>

</tr>
<tr>

<th>StartTime</th>

<th>EndTime</th>

</tr>

</table>

</th>

<th>Topic</th>

</tr>

<tr>

<td>Monday</td>

<td>8:00 AM 5:00 PM</td>

<td>

<table>

<tr>

<td>Introduction to HTML Tags</td>

</tr>

<tr>

<td>Important HTML Tags</td>

</tr>

</table>

</td>

<tr>

<td>Tuesday</td>

<td>

<table>

<tr><td>8:00 AM 11:00 AM</td></tr>

<tr><tr><td>11:00 AM 2:00 PM</td></tr>

<tr><td>2:00 PM 5:00 PM</td></tr>

</table>

</td>

<td>
<table>

<tr><td>CSS-1</td></tr>

<tr><td>JavaScript-1</td></tr>

</table>

</td>

</tr>

<tr>

<td>Wednesday</td>

<td>8:00 AM 12 Noon</td>

<td>JavaScript-2</td>

</tr>

<tr>

<td>Thursday</td>

<td>

<table>

<tr><td>8:00 AM 12 Noon</td></tr>

<tr><td>1:00 PM 3:00 PM</td></tr>

</table>

</td>

<td>

<table>

<tr><td>Jquery</td></tr>

<tr><td>Valedictory</td></tr>

</table>

</td>

</table>

</body>

</html>
6. Create an HTML page demonstrating the following semantic tags:
a) Header
b) Nav
c) Main
d) Section
e) Footer
f) Details
g) Summary
h) Figure
i) Figure caption

<!DOCTYPE html>

<html>

<head>

<title>Creative Design</title>

</head>

<body>

<header>

<img src="logo1.png">

</header>

<nav>

<ul>

<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>

<li><a href="#">Services</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

<main>

<section>

<h2>About Us</h2>

<p>This is the main content section of the webpage.</p>

</section>

<section>

<h2>Services</h2>

<p>Our services include:</p>

<ul>

<li>Web Development</li>

<li>Graphic Design</li>

<li>Digital Marketing</li>

</ul>

</section>

</main>

<figure>

<img src="image.png" alt="A beautiful image">

<figcaption>Created by @Anonymous</figcaption>

</figure>

<details>

<summary>Click to know more about the creator.</summary>

<ul>

<li>Instagram @nooneknowswho</li>

<li>Facebook @nooneknowswho</li>

</ul>

</details>
<footer>

<p>Contact us at: [email protected]</p>

</footer>

</body>

</html>

7. Create a student registration form using HTML which has the following controls:
a) Text Box
b) Text Area
c) Dropdown box
d) Option/radio buttons
e) Check boxes
f) Reset and Submit button

On pressing the Submit button, a message “Form submitted” should be displayed.

<!DOCTYPE html>

<html>

<head>

<h2>Student Registeration Form for Career Counselling</h2>

<script type="text/javascript">

function msg(){

alert("Form Submitted");

</script>

</head>

<body>

<form>

<label for="fname">First Name:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Last Name:</label><br>

<input type="text" id="lname" name="lname"><br>

<label for="RollNum">Roll Number:</label><br>

<input type="text" id="RollNum" name="RollNum"><br><br>

<label for="Course">Course:</label>

<select name="Course" id="Course">

<option value="B.A.(Programme)">B.A.(Programme)</option>

<option value="B.Sc.(Hons.)Comp.Sc.">B.Sc.(Hons.)Comp.Sc.</option>

<option value="B.Sc.(Hons.)Maths">B.Sc.(Hons.)Maths</option>

<option value="B.A.(Hons.)English">B.A.(Hons.)English</option>

<option value="B.A.(Hons.)Economics">B.A.(Hons.)Economics</option>

<option value="B.A.(Hons.)Geography">B.A.(Hons.)Hindi</option>
<option value="B.A.(Hons.)Hindi">B.A.(Hons.)Hindi</option>

<option value="B.A.(Hons.)Pol Sc.">B.A.(Hons.)Pol Sc.</option>

<option value="B.A.(Hons.)History">B.A.(Hons.)History</option>

<option value="B.A.(Hons.)Music">B.A.(Hons.)Music</option>

<option value="B.A.(Hons.)Psychology">B.A.(Hons.)Psychology</option>

<option value="B.A.(Hons.)Sanskrit">B.A.(Hons.)Sanskrit</option>

<option value="B.A.(Hons.)Sociology">B.A.(Hons.)Sociology</option>

<option value="B.A.(Hons.)Philosophy">B.A.(Hons.)Philosophy</option>

<option value="Multi Media & Mass Comm.">Multi Media & Mass Comm.</option>

<option value="B.Com(Hons.)">B.Com(Hons.)</option>

</select>

<br>

<p>Semester:</p>

<input type="radio" id="SemI" name="Semester" value="Semester I">

<label for="SemI">Semester I</label><br>

<input type="radio" id="SemII" name="Semester" value="Semester II">

<label for="SemII">Semester II</label><br>

<input type="radio" id="SemIII" name="Semester" value="Semester III">

<label for="SemIII">Semester III</label><br>

<input type="radio" id="SemIV" name="Semester" value="Semester IV">

<label for="SemIV">Semester IV</label><br>

<input type="radio" id="SemV" name="Semester" value="Semester V">

<label for="SemV">Semester V</label><br>

<input type="radio" id="SemVI" name="Semester" value="Semester VI">

<label for="SemVI">Semester VI</label><br>

<input type="radio" id="SemVII" name="Semester" value="Semester VII">

<label for="SemVII">Semester VII</label><br>

<input type="radio" id="SemVIII" name="Semester" value="Semester VIII">

<label for="SemVIII">Semester VII</label><br>

<p>Career you are interested in (you may choose more than one option):</p>

<input type="checkbox" id="CA/CMA/CS" name="Career" value="CA/CMA/CS">


<label for="CA/CMA/CS">CA/CMA/CS</label><br>

<input type="checkbox" id="UPSC" name="Career" value="UPSC">

<label for="UPSC">UPSC</label><br>

<input type="checkbox" id="Actuarial Science" name="Actuarial Science" value="Actuarial


Science">

<label for="Actuarial Science">Actuarial Science</label><br>

<input type="checkbox" id="Data Science/Data Analyst" name="Career" value="Data


Science/Data Analyst">

<label for="Data Science/Data Analyst">Data Science/Data Analyst</label><br>

<input type="checkbox" id="Finance and Investment Analyst" name="Career"


value="Finance and Investment Analyst">

<label for="Finance and Investment Analyst">Finance and Investment Analyst</label><br>

<input type="checkbox" id="Journalism and Mass Communication" name="Career"


value="Journalism and Mass Communication">

<label for="Journalism and Mass Communication">Journalism and Mass


Communication</label><br>

<input type="checkbox" id="Law" name="Career" value="Law">

<label for="Law">Law</label><br>

<input type="checkbox" id="Fine Arts/Visual Arts/Performing Arts" name="Career"


value="Fine Arts/Visual Arts/Performing Arts">

<label for="Fine Arts/Visual Arts/Performing Arts">Fine Arts/Visual Arts/Performing


Arts</label><br>

<input type="checkbox" id="Economics and Statistics" name="Career" value="Economics


and Statistics">

<label for="Economics and Statistics">Economics and Statistics</label><br>

<input type="checkbox" id="Environmental Science" name="Career" value="Environmental


Science">

<label for="Environmental Science">Environmental Science</label><br>

<input type="checkbox" id="Human Resource Management" name="Career" value="Human


Resource Management">

<label for="Human Resource Management">Human Resource Management</label><br>

<input type="checkbox" id="Not Sure" name="Career" value="Not Sure.">

<label for="Not Sure">Not Sure</label><br>

<label for="Any Other">Any Other:</label>


<textarea id="Any Other" name="Career" rows="2" cols="50"></textarea><br><br>

<label for="Comments">Any specific question you would like to ask your counsellor?</label>

<textarea id="Comments" name="Comments" rows="4" cols="50">

</textarea><br><br>

<input type="submit" value="SUBMIT" onclick="msg()"/><br><br>

<input type="reset" value="RESET">

</body>

</html>

You might also like