HTML Tags and Formatting Elements

APOORVA FILE
EXPERIMENT 1
Create a HTML file for displaying a webpage with following Tags. The file should contain a brief
description about all these tags:
• Bold • Text color

• Italics • Headings
• Underline • Background Color
• Alignment • Line break
• Paragraph • Pre
<!DOCTYPE html>
<html>
<title>APOORVA E-Comm</title>
<body bgcolor="#AEE8F0">
<h1 align="CENTER" style="background-color:#EC99EA;">APOORVA E COMMERCE LAB</h1>
<p><b><u><i>INTRODUCTION TO HTML AND FEATURES OF HTML.</i></u></b></p>
<p> HTML stands for HyperText Markup Language. It is used to design web pages using a markup
language. HTML is the combination of Hypertext and Markup language.
</p>
<br>


<pre>
HTML is easy to learn and easy to use
HTML is platform-independent.
HTML is markup language
</pre>

<hr>
<font size="2"
face="times new roman"
color="black">
APOORVA
</font>
</body>
</html>
EXPERIMENT 2
Design a Web Page of your CV with headings as Objective, educational qualification, achievements,
strengths, hobbies and personal details.
Apply following specifications:
• Insert a horizontal line after every above-mentioned heading (Eg. Insert horizontal line once
objectives are complete)
• Set any light color as page background. Bold and underline every heading
• Insert your image on left side of web page Use heading tag to specify the headings
• After every heading is over put a horizontal line
• Use pre tag for Educational Qualification
• Use Base font tag for all the text
<!DOCTYPE html>
<html>
<head>
<title>Apoorva CV</title>
<basefont face="arial" >
</head>
<body bgcolor="#B6F1A7">
<img src="apoorva.jpg" width="100" height="100">
<h2><b>Apoorva Dutt</b></h2>
<p>sharmaapoorva354@gmail.com | 91+9811173933 | Delhi</p>
<br>
<hr>
<h3><b><u>Objectives</u></b></h3>
<p>Secure a responsible career opportunity to fully utilize my training and skills, while making a
significant contribution to the success of the company.
.</p>
<br>
<hr>
<h3><b><u>Educational Qualifications</u></b></h3>
<pre>
Completion of 10<sup>th</sup> - 2017
* Marks - 90%
Completion of 10+2 - 2019
* Marks - 89%
</pre>
<hr>
<br>
<h3><b><u>Achievements</u></b></h3>
<p> Worked as a marketing intern in ANAR B2B app </p>
<p> Worked as an operational intern in UMID foundation</p>
<hr>
<br>
<h3><b><u>Strengths</u></b></h3>
<p><ul>
<li>Good Listener</li>
<li>Active Leadership</li>
<li>Self Motivated </li>
</ul>
<hr>
<h3><b><u>Personal Information:</u></b></h3>
<p>A young, determined hard and smart working person. I believe in task based roles and complete
ownership of work.</p>
<hr>
<br>
<h3><b><u>Hobbies</u></b></h3>
<p><ol>
<li>Watching Movies</li>
<li>Cooking</li>
</ol>
<hr>
<br>
<h3><b><u>Declaration</b></u></h3>
<p>
I hereby declare that the details furnished above are true and correct to the best of my knowledge and
belief.</p>
<br>
<img src="signature.jpg" width="150" height="100">
</body>
</html>
EXPERIMENT 3
Design a Web Site with the name as HTML tutorial with following specifications:
• Make following hyperlinks (i.e. 5 different web pages):
• Formatting Styles and Headings: Include Bold, italics, Underline, Strike, Subscript, superscript
and all six types of headings
• Font Styles and Images: Font and Basefont tag, Image tag
• Anchor: Internal (linking within page) and External (linking with other documents) links
• Marquee: Move text, image and hyperlink other tags: br, hr, pre, p
Include following specifications:

• In all these web pages only mention about use, attributes apply them. Insert a background image
on home page
• Make all the topics as hyperlinks and go to some other page for description
• Insert a marquee showing HTML Tutorial as moving text. Use different font style for different
topics
• On every page, make a hyperlink for going back to home page.
<!DOCTYPE html>
<html>
<head>
<title>HTML Tutorial</title>
</html>
<body style="height: 100%; background-size: cover; background:url('123.jpg') no-repeat fixed; font-
family:Verdana;">
<h1 align="center">Welcome to HTML Tutorials<hr></h1>
<p>Here you will learn about HTML tutorial.<br></p>
<h4 style="background-color: #DFEB62;">Lets first start with <u>WHAT IS HTML.</u></h4>
<p>HTML stands for Hyper Text Markup Language. HTML is the standard markup language for Web
pages. HTML elements are the building blocks of HTML pages.
<br><br>
Why to Learn HTML?
HTML was developed with the intent of defining the structure of documents like headings, paragraphs,
lists, and so forth to facilitate the sharing of scientific information between researchers.
HTML is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain.I will list down some of the key
advantages of learning HTML:
Create Web site - You can create a website or customize an existing web template if you know HTML
well.
Become a web designer - If you want to start a carrer as a professional web designer, HTML and CSS
designing is a must skill.
Learn other languages - Once you understands the basic of HTML then other related technologies like
javascript, php, or angular are become easier to understand.
<br><br>
Applications of HTML
As mentioned before, HTML is one of the most widely used language over the web. I'm going to list few
of them here:
Web pages development - HTML is used to create pages which are rendered over the web. Almost every
page of web is having html tags in it to render its details in browser.
Internet Navigation - HTML provides tags which are used to navigate from one page to another and is
heavily used in internet navigation.
</p>
<h3>Navigate to these as per your requirement.</h3>
<ul>
<li><b><a href="https://www.cs.kent.ac.uk/teaching/10/modules/CO/3/32/FIT_Chapters/
Chapter04/BasicHTMLTags.htmlstyle="color:#D715BC;"></b>Basic Tags</a></li>
<li><b><a href="https://www.w3schools.com/html/html_attributes.asp html"
style="color:#D715BC;"></b>Attribute Tags</a></li>
<li><b><a href="https://www.javatpoint.com/html-tags" style="color:#D715BC;"></b>Advanced
Tags</a></li>
</ul>
<br>
<hr>
<footer style="background-color: #EAF58C; padding: 10px; text-align: center; color: black; width:
100%; position: fixed; left: 0; bottom: 0;">
<p><i>©Apoorva Dutt</i><br>
Learn more <a href="file:///C:/Users/Apoorva/Desktop/apoorva%20cv.html"
style="color:#D715BC;"><b>About Me</b></a>
</p>
</footer>
</body>
</html>
EXPERIMENT 4
Write a HTML code to print the following lines in same manners:
<!doctype html>
<html>
<head> APOORVA DUTT </head>
<body>
<table border="1">
<tr>
<td>
<p>In mathematics, a quadratic equation is a polynomial equation of the second degree.The general form
is</p>
<p><center><b>ax<sup>2</sup>+bx+c=0</center></b></p>
<p> where !=0 (for if a=0, the equation becomes a linear equation) </p>
</td>
</tr>
<tr>
<td>
<p><u>"CHEMICAL EQUATION"</u></p>
<p><b>4H<sub>3</sub>PO<sub>3</sub>=3H<sub>3</sub>PO<sub>4</sub>+PH<sub>3</sub></
b></p>
<p>and other expression as </p>
<p><b>P<sub>new</sub>=P<sub>old</sub>+X<sup>2</sup>-Y<sup>accost</sup></b></p>
</td>
</tr>
</table>
</body>
</html>
EXPERIMENT 5
Create a nested list as follows:
Computer System
1. Input Devices
i. Keyboard
ii. Mouse
iii.Joystic
iv. Scanner
a. Flat Bed Scanner
b. Hand held Scanner
2. Output Devices
i. Monitor
a. LCD
b. CRT
ii. Printer
a. Impact Printer
b. Non-Impact Printer
Apply following parts:
• Insert an image of computer on
top right corner of web page
Display a marquee displaying
“Input and Output Devices”
• Use different font styles and
colors for Input and Output
Devices Insert horizontal line
after Input Devices are over
• Use bold, italics and underline in
heading
<html>
<title>APOORVA DUTT </title>
<body bgcolor="#F3B1E8">
<b><i><u><h1>Computer System</h1></b></i></u>
<p align="right"><IMG
SRC="https://media.gcflearnfree.org/content/55e0730c7dd48174331f5164_01_17_2014/
whatisacomputer_desktop_computers.jpg"ALIGN=
"RIGHT" HEIGHT = "200px" WIDTH ="200PX"></p>
<br>
<marquee width="100%" behavior="scroll" bgcolor="#C994E5">
Input and Output Devices
</marquee>
<ol>
<font face="Times New Roman" size="5"> <b><i><u><li>Input Devices</li></b></i></u></font>
<dl><font face="Arial" size="2">
<dt>(i) Keyboard</dt>
<dt>(ii) Mouse</dt>
<dt>(iii) Joystick</dt>
<dt>(iv) Scanner</dt>
<dd>(a) Flat Bed Scanner</dd>
<dd>(b) Hand Held Scanner</dd>
</dl></font>
<hr>
<br>
<font face="Times New Roman" size="4"><b><i><u><li>Output Devices</li></b></i></u></font>
<dl><font face="Arial" size="2">
<dt>(i) Monitor</dt>
<dd>(a) LCD</dd>
<dd>(b) CRT</dd>
<dt>(ii) Printer</dt>
<dd>(a) Impact printer</dd>
<dd>(b) Non Impact Printer</dd>
</dl></font>
</ol>
<hr>
</body>
</html>
EXPERIMENT 6
Create a HTML webpage which display the following list.
Apply following parts:
• Put horizontal line before newspaper & magazine
• Apply heading tag and underline for fruits & vegetables and newspaper & magazine
• Apply italics for fruits, vegetables, newspaper and magazine
• Apply a background color
• Insert marquee tag displaying “Newspapers and Magazines”
<html>
<title>APOORVA</title>
<body bgcolor="#8f9ccd ">
<h1 align=”left”><u>Fruits And Vegetable</h1></u>
<ol>
<i><li>Vegetable</i></li>
<ul>
<li>Onion</li>
<li>Tomato</li>
<li>Radish</li>
<li>Potato</li>
<li>Carrot</li>
</ul>
<i><li>Fruits</i></li>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Watermelon</li>
<li>Mango</li>
<li>Grapes</li>
</ul>
</ol>
<hr>
<marquee><h1><center><u>Newspaper and Magazines</h1></centre></u></marquee>
<ul>
<i><li>Newspaper</i></li>
<ol>
<li>Times of India</li>
<li>Hindustan Times</li>
<li>Navbharat Times</li>
<li>Punjab Kesari</li>
<li>Dainik Jagran</li>
</ol>
<i><li>Magazines</i></li>
<ol>
<li>Aeon Magazine</li>
<li>Business Times</li>
<li>The Week</li>
</ol>
</ul>
<hr>
</body>
</html>
EXPERIMENT 7
Design the table as follows:
Font:14 (Titles)
Font:12(Marks Subheadings)
Font:10 (Otherwise)
<!DOCTYPE html>
<html>
<head>Reports of student</head>
<body>
<font size="14">
<table border="1":align="center">
<thead>
<tr>
<th rowspan="2"><b>Roll Number</th></b>
<th rowspan="2"><b>Name</th></b>
<th rowspan="2"><b>Course</th></b>
<th colspan="3"><b>Marks</th></b>
</font>
</tr>
<tr><font size="12">
<td><i>Internal</td></i>
<td><i>External</td></i>
<td><i>Total</td></i>
</thead>
</font>
<tbody>
<font size="10"><center>
<tr>
<td>02234</td>
<td>Apoorva</td>
<td>BCOM</td>
<td>24</td>
<td>66</td>
<td>90</td>
</tr>
</font></center>
<font size="10">
<tr>
<td>02334</td>
<td>Riya</td>
<td>BCOM</td>
<td>25</td>
<td>70</td>
<td>75</td>
</tr>
</font>
</body>
</html>
EXPERIMENT 8
Design tables as follows:
Font:14 (IP University Courses)
Font: 12 (Otherwise)
<head>
<title>APOORVA</title>
<style>
td { text-align:center; font-size: 12px; }
</style>
</head>
<body>
<table border = "1" style="border-collapse:collapse;">
<tr style=font-size:14px;>
<th colspan = "6">IP University Courses</TH>
</tr>
<tr>
<td colspan = "3" width = "150px"><i>Graduate</i></td>
<td colspan = "3" width = "150px"><i>Post Graduate</i></td>
</tr>
<tr>
<td WIDTH = "10px">BBA</td>
<td>BCOM</td>
<td>BTech</td>
<td>MBA</td>
<td>MCA</td>
<td>MTech</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>100</td>
<td>100</td>
<td>200</td>
<td>50</td>
</tr>
</table>
</body>
</html>
EXPERIMENT 9
Design following HTML form. Also add hobbies- cricket, badminton, table tennis.
<!DOCTYPE html>
<html>
<head>
<title>APOORVA DUTT</title>
</head>
<body>
<h2>Registration Form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your name:</label><br>
<input type="text" name="name"></br>
<label>Enter your middle name:</label><br>
<label>Enter your last name:</label><br>
<label>Enter your Email ID:</label><br>
<input type="email" name="email"><br>
<br><label>Select your gender:</label><br>
<input type="radio" id="gender" name"gender" value"male"/>Male<br>
<input type="radio" id="gender" name"gender" value"female"/>Female<br/>
<input type="radio" id="gender" name"gender" value"otehrs"/>Others<br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<br>Hobbies<br>
<input type="checkbox" id="cricket" name="cricket" value="cricket"/>
<label for="cricket">Cricket</label><br>
<input type="checkbox" id="badminton" name="badminton" value="badminton"/>
<label for="badminton">Badminton</label><br>
<input type="checkbox" id="table-tennis" name="table-tennis" value="table-tennis"/>
<label for="table-tennis">Table-Tennis</label><br>
<br> <label>Enter your password:</label><br>
<input type="password" name="pass"><br>
<label>Confirm your password:</label><br>
<input type="password" name="pass"><br>
<br><input type="submit" value="Sign-Up">
</fieldset>
</form>
</body>
</html>

HTML Tags and Formatting Elements

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Tags and Formatting Elements

Uploaded by

Copyright:

Available Formats

APOORVA FILE

• Bold • Text color

• After every heading is over put a horizontal line

• Use pre tag for Educational Qualification

• Use Base font tag for all the text

Include following specifications:

• On every page, make a hyperlink for going back to home page.

Apply following parts:

• Put horizontal line before newspaper & magazine

• Apply italics for fruits, vegetables, newspaper and magazine

• Apply a background color

• Insert marquee tag displaying “Newspapers and Magazines”

You might also like