WT EX 1-6 Raju PDF

Page 1
HTML | Introduction
HTML stands for Hyper Text Markup Language. It is used to design web pages using
markup language. HTML is the combination of Hypertext and Markup language.
Hypertext defines the link between the web pages. Markup language is used to define the
text document within tag which defines the structure of web pages. This language is used
to annotate (make notes for the computer) text so that a machine can understand it and
manipulate text accordingly. Most of markup (e.g. HTML) languages are human readable.
Language uses tags to define what manipulation has to be done on the text.
HTML is a markup language which is used by the browser to manipulate text, images and
other content to display it in required format. HTML was created by Tim Berners-Lee in
1991. The first ever version of HTML was HTML 1.0 but the first standard version was
HTML 2.0 which was published in 1999.
Elements and Tag: HTML uses predefined tags and elements which tells the browser
about content display property. If a tag is not closed then browser applies that effect till
end of page.
HTML page structure: The Basic structure of HTML page is given below. It contain some
elements like head, title, body, etc. These elements are used to build the blocks of web
pages.
<DOCTYPE! html>: This tag is used to tells the HTML version. This currently tells that the
version is HTML 5.
<html>: This is called HTML root element and used to wrap all the code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can
be used inside the <head> element are:
 <style>
 <title>
 <base>
 <noscript>
 <script>
 <meta>
 <title>
<body>: Body tag is used to enclosed all the data which a web page has from texts to
links. All of the content that you see rendered in the browser is contained within this
element.
Example: HTML page can be created using any text editor (notepad). Then save that file
using .htm or .html extension and open that file in browser. It will get the HTML page
response.
Page 2
Features of HTML:
 It is easy to learn and easy to use.
 It is platform independent.
 Images, video and audio can be added to a web page.
 Hypertext can be added to text.
 It is a markup language.
Why learn HTML?
 It is a simple markup language. Its implementation is easy.
 It is used to create a website.
 Helps in developing fundamentals about web programming.
 Boost professional career.
Advantages:
 HTML is used to build a websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript etc.
Disadvantages:
 HTML can create only static webpages so for dynamic web page other languages
have to be used.
 Large amount of code has to be written to create a simple web page.
 Security feature is not good
Page 3
CSS | Introduction
Cascading Style Sheets, fondly referred to as CSS, is a simply designed language

intended to simplify the process of making web pages presentable. CSS allows you to
apply styles to web pages. More importantly, CSS enables you to do this independent of
the HTML that makes up each web page.
CSS is easy to learn and understood but it provides powerful control over the
presentation of an HTML document.
WHY CSS?
 CSS saves time : You can write CSS once and reuse same sheet in multiple HTML
pages.
 Easy Maintainence : To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
 Search Engines : CSS is considered as clean coding technique, which means search
engines won’t have to struggle to “read” its content.
 Superior styles to HTML : CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
 Offline Browsing : CSS can store web applications locally with the help of offline
catche.Using of this we can view offline websites.

CSS Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document.
A style rule set consists of a selector and declaration block.
Selector => h1
Declaration => {color:blue;font size:12px;}
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by semicolons.
 Each declaration includes a CSS property name and a value, separated by a colon.
For Example:
-> color is property and blue is value.
-> font size is property and 12px is value.
 A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
Page 4
EXPERIMENT NO. 1
AIM-Write HTML/JavaScript to display your CV in web browser

<html>
<head>
<link type="text/css" rel="stylesheet" href="resume.css"/>
<title>Resume</title>
</head>
<body>
<div id="header">
<div id="first_line">
<p id="name">Rajnish Kumar</p>
<a href="mailto:rajnishthakur69@gmail.com" target="_blank"><p

id="email">rajnishthakur69@gmail.com</p></a>
</div>
<div id="second_line">
<a href="https://www.linkedin.com/in/rajnish-kumar-69/" target="_blank"> <p id="linkedin">
Linkedin.com/rajnish</p></a>
<p id="contact"> 9056846226 </p>
</div>
</div>
<div class="right">
<h3>Educational Qualifications</h3>
<p>
<img src="resume.jpeg" class="profile_pic">
<table>
<tr id="heading">
<td>Qualification</td>
<td>Board</td>
<td>Percentage / Grades</td>
<td>Year</td>
</tr>
<tr>
<td>Bachelor of Technology</td>
<td>NITJ</td>
<td>7.80</td>
<td>2017-2021</td>
</tr>
<tr>
<td>Senior Secondary</td>
<td>C.B.S.E.</td>
<td>93%</td>
<td>2016</td>
</tr>
<tr>
<td>Secondary</td>
<td>C.B.S.E.</td>
<td>95%</td>
<td>2014</td>
</tr>
Page 5
</table>
</p>
<h3>PERSONAL PROJECTS</h3>
<p>
<ul type="none" >
<li id="bolding">Attendence system with face Detection (07/2019)</li>
<ul style="list-style-type:disc;">
<li>It is an attendance system which uses Machine Learning concepts
for facial detection. Marking attendance only in a fixed time slot, it
also sends an E-mail to the student and parents if he/she is absent </li>
</ul>
</ul>
</p>
<h3>CERTIFICATES</h3>
<p>
<span id="course-name" id="padd">Machine Learning using python </span>
<li>(06/2019-07/2019) </li>
</ul>
</p>
<h3>TECHNICAL SKILLS</h3>
<p>
<ul>
<li>
<span id="course-name">PROGRAMMING LANGUAGE</span>
<li> C</li>
<li> C++</li>
<li> Python</li>
</ul>
</li>
<li>
<span id="course-name">Machine Learning</span>
<li>Several ML Libraries, Basic Image Pre-processing, Algorithms: Linear Regression,
Decision Tree, Naive Bayes, KNN, SVM, K-Means Clustering,CNN
</li>
</ul>
</li>
<li>
<span id="course-name">Relevant courses</span>
<li>Data Structures </li>
Page 6
<li>OOP </li>
<li> Database Management </li>
<li> Design and Analysis of Algorithm</li>
</ul>
</li>
</ul>
</p>
<h3>INTERPERSONAL SKILLS</h3>
<p>
<ol type="1">
<li> Ability to rapidly built relationship and set up trust</li>
<li>Passionate about learning new things. </li>
<li>Enthusiastic quick learner. </li>
<li> Interest in reading and travelling.</li>
</ol>
</p>
<h3>EXTRA-CURRICULAR ACTIVITIES</h3>
<p>
<ul>
<ul>
<li>Active participant of several technical events.</li>
<li>Active member of Dramatics Club of college.</li>
</ul>
</p>
<h3>PERSONAL INFORMATION</h3>
<p>
<ul>
<li>
I’m a self-motivated, hard-working and patient person. I have ability to work with C++ and
python. Proactive with a problem-solving attitude with a keen interest in programming.
<li>
<span id="course-name">Languages Known:</span>English(Full Proficiency), Hindi(Native
Language)</li>
<li>
</p>
<h3>Declaration</h3>
<p>
I hereby declare that the details furnished above are true and correct to the best of my knowledge
and belief.</p>
</div>
Page 7
<div id="footer"></div>
</body>
</html>
Output-
Page 8
EXPERIMENT-2
AIM : Creation and Annotation of Static Web Pages using any HTML editor
DESCRIPTION:
A static web page (sometimes called a flat page or a stationary page) is a web page that is delivered to
the user's web browser exactly as stored, in contrast to dynamic web pages which are generated by a web
application.
Consequently, a static web page displays the same information for all users, from all contexts, subject to
modern capabilities of a web server to negotiate content-type or language of the document where such
versions are available and the server is configured to do so.
Metadata is data (information) about data. The <meta> tag provides metadata about the HTML
document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are
typically used to specify page description, keywords, author of the document, last modified, and other
metadata. The metadata can be used by browsers (how to display content or reload page), search engines
(keywords), or other web services. HTML5 introduced a method to let web designers take control over
the viewport (the user's visible area of a web page), through the <meta> tag.
Syntax:
<meta name=” “ content=” “>
CODE:
<html>
<head>
<title> NIT Jalandhar</title>
<link rel="stylesheet" href="nitj_site.css">
</head>
<body>
<div class="head">
<p>
<img id="logo" src="logo.png">
<h1 id="title"> Dr.B.R.Ambedkar NIT Jalandhar</h1>
</p>
</div>
<table style="background-color: yellow; width:100%; height: 50px">
<tr class="nav-bar">
<td style="padding-left: 50px;"><a href="">Home</a> </td>
<td>About NITJ </td>

Page 9
<td>Departments </td>
<td>Administration </td>
<td>Campus </td>
<td><a href="complaint_form.html" target="blank">Complaint Form</a></td>
</tr>
</table>
</body>
</html>
CSS FILE-
#title{
float:center;
margin-left:50px;
padding-top:50px;
font-family: Lobster, monospace;
font-size: 50;
color:red;
.head{
height:250px;
background-image: url('nitj.jpg');
background-repeat: no-repeat;
backface-visibility: 0.5;
background-size: 250px;
#logo{
float:right;
height:200px;
width:200px;
padding-right: 50px;
padding-top: 25px;
}
Page 10
.nav-bar{
padding:10px;
background-color: yellow;
OUTPUT-
Page 11
EXPERMIENT NO. 3
AIM-To implement form using form tags
Theory- HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name, email address,
credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI,
ASP Script or PHP script etc. The back-end application will perform required processing on the passed
data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus, radio
buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form
HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form −
 Text Input Controls

 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button
CODE-
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<form>
Name:<br>
<input type="text"/>
Gender:
<br>
<input type="radio"/>M<br>
<input type="radio"/>F
Hobbies:<br>
<input type="checkbox">Gaming
Data:<br>
<input type="date">
<input type="submit">
</form>
</body>
</html>
Page 12
OUTPUT-
Page 13
EXPERIMENT NO. 4
AIM -.Create an image map and implement hot spot area in every defined area of image
Theory-An image map is a type of User Interface where clicking on different sections of an image lead
to different results. To make an image map, you need three things:
1. an image, in an <img> element with the usemap attribute pointing to a valid on-page
image map defined in a
2. <map> element, which contains
3. one or more clickable <area> elements.
The <area> element
Each <area> element defined a clickable area within an image map. The area is defined
with the (required) shape and coords attributes. The shape attribute defines the shape of
the area (rectangle, circle, or [polygon), and the coords indicates the size placement of the
area over the image. The <area> element also defines other attributes associated
with anchor links, including href and target.
CODE-
<html>
<head>
<title>MAPS IN HTML</title>
</head>
<body>
<img src="map.gif" width="600" height="600" usemap="#indiamap" class="country">
<map name="indiamap">
<area shape="poly" coords="120,150,110,190,50,190,55,220,125,250,145,230,200,200,190,185,130,150"

href="https://en.wikipedia.org/wiki/Rajasthan" target="blank">
<area shape="poly" coords="150,105,145,110,145,125,130,140,170,140,185,115,165,102"

href="https://en.wikipedia.org/wiki/Punjab,_India" target="blank">
</map>
</body>
</html>
OUTPUT-
Page 14
ON CLICKING IN HOTSPOT AREA

Page 15
EXPERIMENT NO. 5
AIM- Implement number of frames and open link in another frame
You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not
somehow related to <frameset> tag, instead, it can appear anywhere in your document.
The <iframe> tag defines a rectangular region within the document in which the browser
can display a separate document, including scrollbars and borders. An inline frame is
used to embed another document within the current HTML document.
The src attribute is used to specify the URL of the document that occupies the inline
frame.
The <Iframe> Tag Attributes
Most of the attributes of the <iframe> tag, including name, class, frameborder, id,
longdesc, marginheight, marginwidth, name, scrolling, style, and title behave exactly
like the corresponding attributes for the <frame> tag.
CODE-
1. <html>
<head>
<title> IFRAME EXAMPLE 1</title>
</head>
<body>
<div>
<p><h1 align="left" style=""> Frame 1 </h1>
<h1 align="right"> Frame 2</h1></p>
</div>
<iframe src="links2.html"
height="500px" width="40%" align="left" style="border:4px solid orange;">
</iframe>
<iframe src="blank.html" name="target_frame"height="500px"
width="40%" align="right" style="border:4px solid orange;">
</iframe>
</body>
</html>
2. <html>
<head>
<title> LINKS OF MY SOCIAL SITES</title>

Page 16
</head>
<body>
<ol>
<li> <a href="nitj_site.html" target="target_frame"> MY NITJ </a></li>
<li> <a href="resume.html" target="target_frame">RESUME </a></li>
<li> <a href="map_cord.html" target="target_frame">INDIA MAP </a></li>
<li> <a href="complaint_form.html" target="target_frame"> COMPLAINT FORM</a></li>
</ol>
</body>
</html>
OUTPUT-
ON CLICKING 3. INDIA MAP LINK-
ON CLICKING 2. RESUME LINK-

Page 17
Page 18
EXPERIMENT NO. 6
AIM- Create Scientific calculator using JavaScript.
DESCRIPTION- JavaScript is a very powerful client-side scripting language. JavaScript is used mainly
for enhancing the interaction of a user with the webpage. In other words, you can make your webpage
more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game
development and Mobile application development.
Being a scripting language, JavaScript cannot run on its own. In fact, the browser is responsible for
running JavaScript code. When a user requests an HTML page with JavaScript in it, the script is sent to
the browser and it is up to the browser to execute it. The main advantage of JavaScript is that all modern
web browsers support JavaScript. So, you do not have to worry about whether your site visitor uses
Internet Explorer, Google Chrome, Firefox or any other browser. JavaScript will be supported. Also,
JavaScript runs on any operating system including Windows, Linux or Mac. Thus, JavaScript
overcomes the main disadvantages of VBScript (Now deprecated) which is limited to just IE and
Windows.
CODE-
1. HTML FILE-
<html>
<head>
<script language="javascript"></script>
<link rel="stylesheet" type="text/css" href="calci.css">
<script language="javascript" src="calci.js"></script>
<title> Rajnish's Calculator </title>
</head>
<body>
<form name="sci-calc">
<table class="calculator" cellspacing="0" cellpadding="1">

<tr>
<td colspan="5"><input id="display" name="display" value="0" size="28" maxlength="25"></td>
</tr>
<tr>

<td><input type="button" class="btnTop" name="btnTop" value="C"
onclick="this.form.display.value= 0 "></td>

<td><input type="button" class="btnTop" name="btnTop" value="DEL"
onclick="deleteChar(this.form.display)"></td>

<td><input type="button" class="btnTop" name="btnTop" value="="
onclick="if(checkNum(this.form.display.value)) { compute(this.form) }"></td>

<td><input type="button" class="btnOpps" name="btnOpps" value="π"
onclick="addChar(this.form.display,'3.14159265359')"></td>
Page 19

<td><input type="button" class="btnMath" name="btnMath" value="%" onclick="
percent(this.form.display)"></td>
</tr>
<tr>
<td><input type="button" class="btnNum" name="btnNum" value="7"
onclick="addChar(this.form.display, '7')"></td>

<td><input type="button" class="btnOpps" name="btnOpps" value="x&sup3"
onclick="if(checkNum(this.form.display.value)) { exp(this.form) }"></td>

<td><input type="button" class="btnMath" name="btnMath" value="/"
onclick="addChar(this.form.display, '/')"></td>
</tr>
<tr>

<td><input type="button" class="btnOpps" name="btnOpps" value="ln"
onclick="if(checkNum(this.form.display.value)) { ln(this.form) }"></td>

<td><input type="button" class="btnMath" name="btnMath" value="&#215"
onclick="addChar(this.form.display, '*')"></td>
</tr>
<tr>


<td><input type="button" class="btnOpps" name="btnOpps" value="√"
onclick="if(checkNum(this.form.display.value)) { sqrt(this.form) }"></td>
Page 20

<td><input type="button" class="btnMath" name="btnMath" value="-"
onclick="addChar(this.form.display, '-')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="&#177"
onclick="changeSign(this.form.display)"></td>

<td><input type="button" class="btnMath" name="btnMath" value="."

onclick="addChar(this.form.display, '.')"></td>
<td><input type="button" class="btnOpps" name="btnOpps" value="x²"
onclick="if(checkNum(this.form.display.value)) { square(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="+"
onclick="addChar(this.form.display, '+')"></td>
</tr>
<tr>
<td><input type="button" class="btnMath" name="btnMath" value="("
onclick="addChar(this.form.display, '(')"></td>
<td><input type="button" class="btnMath" name="btnMath" value=")"
onclick="addChar(this.form.display,')')"></td>
<td><input type="button" class="btnMath" name="btnMath" value="cos"
onclick="if(checkNum(this.form.display.value)) { cos(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="sin"
onclick="if(checkNum(this.form.display.value)) { sin(this.form) }"></td>
<td><input type="button" class="btnMath" name="btnMath" value="tan"
onclick="if(checkNum(this.form.display.value)) { tan(this.form) }"></td>
</tr>
</table>
</form>
</body>
</html>
2. CSS FILE-
*{
padding: 0;
margin: 5px;
text-align: center;
}
body {
background-color:green;
margin-left: 33%;
Page 21
margin-top: 50px;
}
.calculator {
width: 400px;
height: 350px;
background-color: #c0c0c0;
box-shadow: 0px 0px 0px 10px #666;
border: 5px solid black;
border-radius: 10px;
}
#display {
width: 360px;
height: 50px;
text-align: right;
background-color: black;
border: 3px solid white;
font-size: 20px;
left: 2px;
top: 2px;
padding-right: 2px;
color: #7fff00;
}
.btnTop{
color: white;
background-color: #6f6f6f;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnNum {
color: white;
background-color: black;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnMath {
color: white;
background-color: #ff4561;
font-size: 14px;
margin: auto;
width: 50px;
height: 25px;
}
.btnOpps {
color: white;
background-color: #ff9933;
font-size: 14px;
margin: auto;
width: 50px;
Page 22
height: 25px;
}
3. JAVASCRIPT FILE-
function addChar(input, character) {

if(input.value == null || input.value == "0")
input.value = character
else
input.value += character
}
function cos(form) {
form.display.value = Math.cos(form.display.value);
}
function sin(form) {
form.display.value = Math.sin(form.display.value);
}
function tan(form) {
form.display.value = Math.tan(form.display.value);
}
function sqrt(form) {
form.display.value = Math.sqrt(form.display.value);
}
function ln(form) {
form.display.value = Math.log(form.display.value);
}
function exp(form) {
form.display.value = Math.pow(form.display.value,3);
}
function deleteChar(input) {
input.value = input.value.substring(0, input.value.length - 1)
}
var val = 0.0;
function percent(input) {
val = input.value;
input.value = input.value + "%";
}
function changeSign(input) {
if(input.value.substring(0, 1) == "-")
input.value = input.value.substring(1, input.value.length)
else
input.value = "-" + input.value
}
Page 23
function compute(form) {
form.display.value = eval(form.display.value);
}
function square(form) {
form.display.value = eval(form.display.value) * eval(form.display.value)
}
function checkNum(str) {
for (var i = 0; i < str.length; i++) {
var ch = str.charAt(i);
if (ch < "0" || ch > "9") {
if (ch != "/" && ch != "*" && ch != "+" && ch != "-" && ch != "."
&& ch != "(" && ch!= ")" && ch != "%" && ch != "^") {
alert("invalid entry!")
return false
}
}
}
return true
}
OUTPUT-
Page 24

WT EX 1-6 Raju PDF

Uploaded by

Document Information

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

WT EX 1-6 Raju PDF

Uploaded by

Copyright:

Available Formats

Page 1

Cascading Style Sheets, fondly referred to as CSS, is a simply designed language

AIM-Write HTML/JavaScript to display your CV in web browser

<a href="mailto:rajnishthakur69@gmail.com" target="_blank"><p

<title> NIT Jalandhar</title>

<link rel="stylesheet" href="nitj_site.css">

<img id="logo" src="logo.png">

<h1 id="title"> Dr.B.R.Ambedkar NIT Jalandhar</h1>

<table style="background-color: yellow; width:100%; height: 50px">

<td style="padding-left: 50px;"><a href="">Home</a> </td>

<td>About NITJ </td>

<td><a href="complaint_form.html" target="blank">Complaint Form</a></td>

font-family: Lobster, monospace;

HTML Form Controls

 Text Input Controls

The <area> element

<img src="map.gif" width="600" height="600" usemap="#indiamap" class="country">

<area shape="poly" coords="120,150,110,190,50,190,55,220,125,250,145,230,200,200,190,185,130,150"

<area shape="poly" coords="150,105,145,110,145,125,130,140,170,140,185,115,165,102"

ON CLICKING IN HOTSPOT AREA

<title> IFRAME EXAMPLE 1</title>

<p><h1 align="left" style=""> Frame 1 </h1>

<h1 align="right"> Frame 2</h1></p>

height="500px" width="40%" align="left" style="border:4px solid orange;">

<iframe src="blank.html" name="target_frame"height="500px"

width="40%" align="right" style="border:4px solid orange;">

<title> LINKS OF MY SOCIAL SITES</title>

<li> <a href="nitj_site.html" target="target_frame"> MY NITJ </a></li>

<li> <a href="resume.html" target="target_frame">RESUME </a></li>

<li> <a href="map_cord.html" target="target_frame">INDIA MAP </a></li>

<li> <a href="complaint_form.html" target="target_frame"> COMPLAINT FORM</a></li>

ON CLICKING 3. INDIA MAP LINK-

ON CLICKING 2. RESUME LINK-

<table class="calculator" cellspacing="0" cellpadding="1">

<td><input type="button" class="btnNum" name="btnNum" value="0"

<td><input type="button" class="btnMath" name="btnMath" value="&#46;"

function addChar(input, character) {

You might also like

<td><input type="button" class="btnMath" name="btnMath" value="."