WTexp 1 To 7

INTRODUCTION TO HTML
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 contains 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.
<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.
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.
PROGRAM:-1(a)
SIMPLE HTML WEBPAGE USING HEADING ELEMENTS, LISTS AND
IMAGE TAG
Source Code:
<html>
<head>
<title>Web Development</title>
<body bgcolor="blue"
font="bold">
<h1><b>Web Technology Lab Work</b></h1>
<h1>
<b>This is H1 heading</b>
</h1>
<h2>
</h2>
<h3>
</h3>
<h4>
</h4>
<h5>
</h5>
<p
font="sans serif",font-size="14">
This is a paragraph area under which things <br>
are written about a particular matter and its content
</p>
<marquee>An example of marquee Tag</marquee><br><br>
<marquee><img src="C:\Documents and Settings\lab\Desktop\web-technology-assignment-help.jpg"

height=200 width=200></marquee>
<h4>This is unordered list</h4>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ul>
<h4>This is ordered list</h4>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
</ol>
</body>
</head>
</html>
Output:
PROGRAM:-1(b)
CREATING A TABLE IN HTML
Source Code:
<html>
<head>
<title>HTML Table Tag</title>
</head>
<body>
<table border = "4" style="width:70%" bordercolor="red" bgcolor="green" align="center"

cellpadding="10"
cellspan="20">
<p align = "center">Student Registration Details</p>

<tr bgcolor="yellow" align="center">
<th>Name</th>
<th>Father Name</th>
<th>Age</th>
<th>Roll No</th>
<th>Branch</th>
</tr>
<tr align="center">
<td>KUNAL VERMA</td>
<td>PARMANAND VERMA</td>
<td>20</td>
<td>226</td>
<td>CSE</td>
</tr>
<tr align="center">
<td>SAKSHAM SURETHIA</td>
<td>SANJAY SURETHIA</td>
<td>19</td>
<td>239</td>
<td>EEE</td>
</tr>
<tr align="center">
<td>SPARSH JAIN</td>
<td>ROHIT JAIN</td>
<td>21</td>
<td>256</td>
<td>CSE</td>
</tr>
<tr align="center">
<td>DANISH JAIN</td>
<td>FAYAZ</td>
<td>20</td>
<td>215</td>
<td>CE</td>
</tr>
<tr align="center">
<td>RAKESH</td>
<td>MOHIT KUMAR</td>
<td>20</td>
<td>101</td>
<td>ME</td>
</tr>
</table>
</body>
</html>
Output:
PROGRAM:-1(c)
REGISTRATION FORM USING ALL FORM CONTROLS
Source Code:
<html>
<body bgcolor="green">
<h2> HTML Registration Form</h2>

<form>
Full Name:<br>
<input type="text" name="name" required>
<br>
Email:<br>
<input type="text" name="email" required>
<br>
Password:<br>
<input type="password" name="password" required>
<br>
Mobile number:<br>
<input type="number" name="number" required>
<br><br>
Gender<br>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<select name="country">
<option value="India">India</option>
<option value="Pakistan">Pakistan</option>
<option value="USA">USA</option>
<option value="SriLanka">Srilanka</option>
</select> <br><br>
Programming langauge :<br>
<input type="checkbox" name="pro1" value="C++">C++<br>

<input type="checkbox" name="pro2" value="Java">Java<br>
<input type="checkbox" name="pro3" value="Python">Python<br>
Address:<br>
<textarea rows="4" cols="30"> </textarea> <br>
<input type="submit" value="Submit">
</form>
</body> </html>
Output:
PROGRAM:-1(d)
SHOWING THE USE OF FRAMES ON A WEB PAGE
Source Code:
<html>
<head>
<title>Frametag</title>
<frameset rows="100%,80%,50" frame border="8">
<frame name="1"src="simple1(a).html">
<frameset cols="50%,50%" frame border="8">
<frame name="2"src="table1(b).html">
<frame name="3"src="reg form1(c).html">
</frameset>
</head>
</html>
Output:
INTRODUCTION TO CSS
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs,variations in display for different
devices and screen sizes as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML or
XHTML.
Advantages of CSS
• CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many
Web pages as you want.
• Pages load faster − If you are using CSS, you do not need to write HTML tag attributes
every time. Just write one CSS rule of a tag and apply it to all the occurrences of that
tag. So less code means faster download times.
• Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
• 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.
• Multiple Device Compatibility − Style sheets allow content to be optimized for more
than one type of device. By using the same HTML document, different versions of a
website can be presented for handheld devices such as PDAs and cell phones or for
printing.
• Global web standards − Now HTML attributes are being deprecated and it is being
recommended to use CSS. So its a good idea to start using CSS in all the HTML pages
to make them compatible to future browsers.
Types of CSS (Cascading Style Sheet)
Cascading Style Sheet (CSS) is used to set the style in web pages which contain HTML
elements. It sets the background color, font-size, font-family, color, ..etc property of elements in
a web pages.
There are three types of CSS which are given below:
• Inline CSS
• Internal or Embedded CSS
• External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached with element is
known as inline CSS. This kind of style is specified within an HTML tag using style attribute.
Syntax:-
<element style ="….style rules….”>
Internal or Embedded CSS: This can be used when a single HTML document must be styled
uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is
embedded within the HTML file. Syntax:-
<style type = "text/css" media ="all">
Body {
background-color: linen; }
h1 {
color: maroon;
margin-left: 40px;
</style>
External CSS : An external style sheet is a separate text file with .css extension. You define all
the Style rules within this text file and then you can include this file in any HTML document
using <link> element. Syntax:-
<head>
<link type = "text/css" href ="…" media="…"/>
</head>
PROGRAM:-2(a)
SHOWING THE USE OF INLINE & INTERNAL STYLE SHEETS
Source Code:
<!DOCTYPE html>
<html>
<head>
<style>
img {
border-radius: 70%;
width:250px;
height:200px; }
</style>
</head>
<body>
<h1 style="color:green;margin-left:30px;">Technology Matters</h1>
<img src="C:\Documents and Settings\lab\Desktop\download.jpg">
</body>
</html>
Output:
PROGRAM:-2(b)
SHOWING THE USE OF EXTERNAL STYLE SHEETS
Source Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS File (style.css)
body {
background-color: powderblue;
h1 {
color: blue;
p{
color: red;
Output:
INTRODUCTION TO JAVASCRIPT
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 livelier and more interactive, with the help of JavaScript. JavaScript is also being used
widely in game development and Mobileapplication development.
JavaScript was developed by Brendan Eich in 1995, which appeared in Netscape, a popular
browser of that time.
How to Run JavaScript?
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
ofVBScript (Now deprecated) which is limited to just IE and Windows
Tools You Need
To start with, you need a text editor to write your code and a browser to display the web pages
you develop. You can use a text editor of your choice including Notepad++, Visual Studio Code,
Sublime Text, Atom or any other text editor you are comfortable with. You can use any web
browser including Google Chrome, Firefox, Microsoft Edge, Internet Explorer etc.
PROGRAM:-3
CREATING A SUB ROUTINE USING JAVASCRIPT
Source Code:
<html>
<head>
<script>
function myFunction()
alert("Hello");
</script>
</head>
<body>
<button onclick="myFunction()">Click Here</button>
</body>
</html>
Output:
PROGRAM:-4
CREATING A FORM TO PERFORM DIFFERENT ARITHMETIC
OPERATIONS ON TWO NUMBERS USING JAVASCRIPT
Source Code:
<html>
<head>
<title>Calculator</title>
<script>
function addnumber()
{
var val1=parseInt(document.getElementById("value1").value);
var ans=document.getElementById("answer")
ans.value=val1+val2;
function subtract()
ans.value=val1-val2;
function multiply()
ans.value=val1*val2;
function division()
ans.value=val1/val2;
</script>
</head>
<body bgcolor="bluegreen">
<h1>CALCULATOR</h1>
Enter Number1:
<input type="text" id="value1" value1=""/><br><br>
Enter Number2:
<input type="text" id="value2" value2=""/><br><br>
<input type="button" value="ADD" onclick="javascript:addnumber()"/>&nbsp&nbsp
<input type="button" value="SUBTRACT" onclick="javascript:subtract()"/>&nbsp&nbsp
<input type="button" value="MULTIPLY" onclick="javascript:multiply()"/>&nbsp&nbsp
<input type="button" value="DIVIDE" onclick="javascript:division()"/>&nbsp&nbsp<br><br>
Result:<input type="text" id="answer" value=""/>
</body>
</html>
Output:
Enter Two Numbers :
ADD Two Numbers :

PROGRAM:-5
CHANGING PROPERTIES OF A TEXT USING JAVASCRIPT
MOUSE EVENT HANDLERS
Source Code:
<html>
<head>
<script>
function mouseOver() {
document.getElementById("demo").style.color = "gray";
document.getElementById("demo").style.background = "blue";
document.getElementById("demo").style.fontSize = "70";
document.getElementById("demo").style.fontFamily = "Cooper Black";
function mouseOut() {
document.getElementById("demo").style.color = "black";
document.getElementById("demo").style.background = "white";
document.getElementById("demo").style.fontSize = "31";
document.getElementById("demo").style.fontFamily = "Arial";
</script>
</head>
<body>
<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Hello!</h1>
</body>
</html>
Output:
onMouseOut()
onMouseOver()
PROGRAM:6
<html>
<head>
<met charset=utf-8 />
<title>To check a number is prime or not</title>
<script>
function prime()
{
var np=" is not a prime number";
var p=" is prime number";
var c=0;
var n= parseInt(document.getElementById("t1").value);
if (n===1)
{
document.getElementById("t2").value= n+np;
}
else if(n === 2)
{
document.getElementById("t2").value= n+p;
}
else
{
for(var x = 2; x < n; x++)
{
if(n % x === 0)
{
c=c+1;
}
}
}
if(c>0)
{
document.getElementById("t2").value= n+np;
}
else
{
document.getElementById("t2").value= n+p;
}
}
</script>
</head>
<body>
Enter a number:<input type="text" name="t1" id="t1">
<input type="button" value="Check" onClick="prime()">
<input type="text" name="t2" id="t2" disabled>
</body>
</html>
Output:
PROGRAM: 7(a)
CHANGING IMAGE ON CLICKING THE BUTTON
USING JAVASCRIPT EVENT HANDLER
Source Code:
<html>
<head>
<script>
function pictureChange()
{
document.getElementById("myImage").src="https://www.shareicon.net/data/128x128/2016/09/2
1/831129_aim_512x512.png";
}
</script>
</head>
<body>
<img id="myImage" src="https://3.bp.blogspot.com/-
bovUgir_Ymw/VqU4w1ngPNI/AAAAAAAATTo/CSNdYxaFcxw/s1600/Google%2BUser%2B
Meeting%2BIcon.png" id="myImage" width="50%" height="50%">
<br>
<input type="button" id="myButton" value="Click Here" onclick="pictureChange()">
</body>
</html>
Output:
-Before Clicking
-After Clicking

WTexp 1 To 7

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

WTexp 1 To 7

Încărcat de

Drepturi de autor:

Formate disponibile

INTRODUCTION TO HTML

Elements and Tag:

HTML page structure:

• It is easy to learn and easy to use.

• Images, video and audio can be added to a web page.

• Hypertext can be added to text.

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.

• HTML is used to build a websites.

• It can be integrated with other languages like CSS, JavaScript etc.

• Large amount of code has to be written to create a simple web page.

• Security feature is not good.

<h1><b>Web Technology Lab Work</b></h1>

This is a paragraph area under which things <br>

are written about a particular matter and its content

<marquee>An example of marquee Tag</marquee><br><br>

<marquee><img src="C:\Documents and Settings\lab\Desktop\web-technology-assignment-help.jpg"

<h4>This is unordered list</h4>

<h4>This is ordered list</h4>

<title>HTML Table Tag</title>

<table border = "4" style="width:70%" bordercolor="red" bgcolor="green" align="center"

<p align = "center">Student Registration Details</p>

<h2> HTML Registration Form</h2>

<input type="text" name="name" required>

<input type="text" name="email" required>

<input type="password" name="password" required>

<input type="number" name="number" required>

<input type="radio" name="gender" value="male" checked> Male<br>

<input type="radio" name="gender" value="female"> Female<br>

<input type="radio" name="gender" value="other"> Other<br><br>

Programming langauge :<br>

<input type="checkbox" name="pro1" value="C++">C++<br>

<input type="checkbox" name="pro3" value="Python">Python<br>

<textarea rows="4" cols="30"> </textarea> <br>

<input type="submit" value="Submit">

<frameset cols="50%,50%" frame border="8">

<frame name="3"src="reg form1(c).html">

Types of CSS (Cascading Style Sheet)

• Internal or Embedded CSS

<element style ="….style rules….”>

<style type = "text/css" media ="all">

<link type = "text/css" href ="…" media="…"/>

<h1 style="color:green;margin-left:30px;">Technology Matters</h1>

<img src="C:\Documents and Settings\lab\Desktop\download.jpg">

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

CSS File (style.css)

How to Run JavaScript?

Tools You Need

<button onclick="myFunction()">Click Here</button>

<input type="text" id="value1" value1=""/><br><br>

<input type="text" id="value2" value2=""/><br><br>

<input type="button" value="ADD" onclick="javascript:addnumber()"/>&nbsp&nbsp

<input type="button" value="SUBTRACT" onclick="javascript:subtract()"/>&nbsp&nbsp

<input type="button" value="MULTIPLY" onclick="javascript:multiply()"/>&nbsp&nbsp

<input type="button" value="DIVIDE" onclick="javascript:division()"/>&nbsp&nbsp<br><br>

Result:<input type="text" id="answer" value=""/>

ADD Two Numbers :

document.getElementById("demo").style.fontFamily = "Cooper Black";

<h1 id="demo" onmouseover="mouseOver()" onmouseout="mouseOut()">Hello!</h1>

S-ar putea să vă placă și