Skill Course : Basic Web Designing

What is Web Design?

 Web is a system of interconnected documents that are accessed

through the internet.
 It is a huge network of information that allows people to share and
access documents, images, videos, and other multimedia content.
 World Wide Web, which is also known as a Web
 Ex: [Link], [Link]
Design :
 Design" refers to the process of creating and planning the
construction or arrangement of something with a specific purpose
 Web design refers to the design of websites that are displayed on the
internet.
 A website([Link]) is a collection of web pages(cse,ece,mech_).
 A web page may contain texts, graphics, sounds, animations, and
movies
 A web designer works on the appearance(colors, font, and images
used) and layout(how information is structured and categorized)
 Web Design involves the use of hypertext markup language (HTML)
and cascading style sheets (CSS)
[Link] of Internet

 January 1, 1983 is considered the official birthday of the

Internet(Tim Berners).
 Internet is a global network that connects billions of computers
across the world with each other and to the World Wide Web.
 It uses standard internet protocol suite (TCP/IP) to connect
billions of computer users worldwide.
 It is set up by using cables such as optical fibers and other
wireless and networking technologies.
 At present, internet is the fastest mean of sending or
exchanging information and data between computers across the
world.
Ex:
Applications of internet
[Link] and Social Networking
 These platforms allow people to connect and interact with friends,
family, and colleagues across the globe.
Ex:
Communication :messaging, email, voice and video calls.
Social networking platforms : Facebook, Twitter, Instagram, and
LinkedIn.
[Link] Retrieval :
 Search engines like Google and Bing make it easy to access vast
amounts of information
[Link] Shopping:
Ex:Amazon, flipkart, myntra
[Link] Banking and Finance:
 Internet banking and financial services allow users to manage their
accounts, pay bills, transfer funds, and invest online
[Link] and Media:
 Streaming services for movies, TV shows, music, and gaming have
become popular entertainment options.
f. Education and E-Learning:
 The internet has transform education through e-learning platforms,
online courses, and virtual classrooms
[Link]:
 Health-related information, resources, and patient records can be
accessed and managed online
2. What is World Wide Web
 The World Wide Web is abbreviated as WWW and is commonly
known as the web.
 The WWW was developed by CERN (European library for Nuclear
Research) in 1989.
 WWW is a collection of websites
 Ex:[Link], [Link],
How the World Wide Web Works?
 The Web works as per the internet's basic client-server format as
shown in the following image.
 The web servers store and transfer web pages or information to user's
computers on the network when requested by the users

Components of the Web:

There are 3 components of the web:
1. Uniform Resource Locator (URL):
 It is used to indicate the location of a web resource to access the web
pages.
[Link] Transfer Protocol (HTTP):
 HTTP, is a messaging protocol that allows web browsers to
communicate with web servers
[Link] Text Markup Language (HTML):
 Defines the structure, organisation and content of a webpage.
[Link] pages
 A web page is a document that is displayed on web browser
such as Firefox, Google Chrome and Microsoft Edge
 Web pages can contain various types of content, such as text,
images, videos, forms, links, and more
How does a Web Page Work?
 A simple web page is created using HTML, which is a markup
language.
 The browser sends the request for a page or a file via an HTTP
request.
 The HTTP is the Hypertext Transfer Protocol, a network protocol
that allows transferring hypermedia documents over the internet
between a browser and server

 Once the request reaches the server, the HTTP server accepts the
request, finds the requested page, and
 Sends it back to the browser through the HTTP response.
 If a server is unable to find the requested page, it returns a 404
response.
Types of a Web page
There are mainly two types of a Web page based on
functionality:
a) Static Webpage
b) Dynamic Webpage
a)Static Webpage
 Static webpages are those webpages that cannot be modified
or altered by the client.
 Users can only load the page and read the information but
cannot perform any change on the page.
 A static webpage is generally made up of HTML and CSS only.
b)Dynamic Webpage:
 Dynamic webpages are those webpages that can be modified
or altered by the client
i)Server-Side Dynamic Webpage:
 These web pages are created using Server-side scripting.
 These pages are changed when they are visited or viewed.
 Some examples of server-side pages are login pages, submission
forms, shopping carts, etc.
 Various scripting languages such as PHP(Hypertext Preprocessor),
[Link](Active Server Pages), JSP(JavaServer Pages.), etc., can be
used for server-side scripting.
ii)Client-side Dynamic Webpage:
 These web pages are created using Client-side scripting.
 These pages get changed in response to actions that occur within that
page, such as mouse or keyboard action.
 Scripting languages such HTML ,CSS ,JavaScript, etc., can be
used for client-Side scripting.
[Link]

 A website is a collection of many web pages, and web pages are

digital files that are written using HTML(HyperText Markup
Language).
 It consists of more than one webpage.
 To develop a website, developers need more skills and more time
compared to a webpage
 A website is accessed through its domain name
 Ex: 1. [Link]
 2.[Link]
[Link] Browser

 Web Browser is an Application program that displays a World wide

web document
 It provides an interface between the server and the client
 The Web browser requests the server for the web documents and
services
 A web browser is a program that uses websites to search the internet
for information
 The web browser is installed on the client’s computer.
 Examples of Web browsers are Mozilla Firefox, Google Chrome, and
Internet Explorer.
6. Web servers

 A web server is a program ,the computer that provide services

to other programs called client.
 The web server gets HTTP requests and sends HTTP
responses.
 The web server is responsible for connecting websites and web
browsers.
 Web servers provide an area to store and organize the pages of
the website.
 Components of web server architecture- hardware, operating
system software, and Web server software.
 An example of a Web Server is Apache Server.
[Link] Protocols
 Protocols is set of rules
 A protocol is simply a standard for enabling the connection,
communication, and data transfer between two places on a network.
a)HTTP
 HTTP stands for Hypertext Transfer Protocol
 HTTP, is a messaging protocol that allows web browsers to
communicate with web servers
b) HTTPS
 HTTPS stands for Hypertext Transfer Protocol over Secure Socket
Layer.
 HTTPS (HTTP Secure) is a secure version of HTTP that uses
encryption to protect data transmission
c)FTP
 FTP stands for File Transfer Protocol.
 It is used to transfer files across the Internet.
[Link] principles involved in developing a web site

[Link] a Purpose and Plan:

 A user needs a reason to visit an application and that’s why your
website should clearly explain
 Your website and each page of it should have a purpose and clear
specification that what it does
[Link]:
 Make your website simple and try to display one detail at a time for
getting the individual attention of each part.
 Don’t overload the information at home page on your website.
 Include white spaces in your design
c. Simple Navigation:
 Navigation organizes your complete website and guides a user to
move around your application.
[Link] Hierarchy:
 Visual hierarchy is the arrangement of elements in order of
importance
 This is done either by size, colour, whitespace, and style
[Link]:
 Implement security measures to protect your website and user data.
 Use HTTPS, keep software up to date, and follow best practices for
data handling.
[Link] Golden rules of web designing

[Link] on the message:

 If the goal of your web page is to convey information (brand stories,
special offers, announcements, etc.),
 Then focusing on the clarity of your message is of utmost
importance.
ii. Keep your layout neat:
 A good web design layout should provide balanced flow of
information
 Some common examples of bad web layout include:
a. Fonts are too small or difficult to read.
b. Text is underlined without a link.
[Link] should be easy to remember:
 One of the most common mistakes in website design is
choosing a proper domain name.
 Your domain name should be easy to remember and
easy to spell.
[Link] should work on multiple browsers:
 Today, there are various Internet browsers that people
prefer to use.
 Thus, it becomes requirement that your website be able
to load on any browser
 Ex:Internet Explorer, Firefox,Google Chrome.
[Link] it easy to navigate:
 Making your website easy to navigate is a crucial aspect
of user experience
HTML

 HTML means Hypertext Markup Language. In 1960 Ted

Nelson introduced Hypertext.
 Hypertext is defined as the arrangement of information inside a
database
 A markup language is a computer language that
uses tags to define elements
 The most common markup language used is HTML
 HTML is a scripting language which is used to create web
pages.
 It consists of tags and its attributes used to format web pages
 A website([Link]) is a collection of web
pages(cse,ece,mech_).
 A web page may contain texts, graphics, sounds,
animations, and movies.
 Web pages are developed with the help of a language called
Hyper Text Markup Language(HTML).
 It is also a language of Internet.
1)Standard HTML Document Structure
i)<html> :
 Every HTML code must be enclosed between basic HTML
tags.
 It begins with <html> and ends with </html> tag.
ii)<head> :
 The head tag comes next which contains all the header
information of the web page.
 These informations are enclosed within head tag which opens
with <head> and ends with </head>
iii) <title> :
 We can mention the title of a web page using the <title> tag.
 The tag begins with <title> and ends with </title>
iv)<body> :
 The body tag contains the actual body of the page which will
be visible to all the users.
 This opens with <body> and ends with </body>
Example:

 Step 1: Open Notepad

 Step 2: Write Some HTML

<html>
<head>
<title>Example1</title>
</head>
<body>
<h1>Web Technologies</h>
</body>
</html>
Step 3: Save the HTML Page
Save the file on your computer.
Select File > Save as in the Notepad menu
Step 4: View the HTML Page in Your Browser

Output:
 Week-1:Explain basic tags

Tag:a tag is a keyword assigned to a piece of information

<>=Opening tag
</>=Closing tag
Types:
[Link] tag [Link] breaks [Link]
iv. bold tag [Link] [Link] tag
vii. horizontal line
[Link] tag:-
 These tags help us to write paragraph statements in a
webpage.
 They start with the <p> tag and ends with </p>.
Example:

<html>
<title> Hello World </title>
<body>
<p>
The department of computer science and engineering was
established in 2007. The department offers a four year degree
program in Computer Science and Engineering with an annual
intake of 180 students and two years [Link] P.G. program in
Computer Science started in the year 2012 with an annual
intake of 18 students.
</p>
</body>
</html>
Output:
[Link] breaks:<br>

 The HTML <br> element produces a line break in text.

 It is useful for writing a poem or an address
 The <br> tag is an empty tag which means that it has no
end tag.
Example:
html>
<title> Hello World </title>
<body>
<p>Hi this is ttolearn <br>
here you will learn about all basics about html<br>
ohhh wait not only html, we will cover all programming
languages</p>
</body>
</html>
Output:
[Link]

 Heading tags are one of the most used tag in html.

 HTML is having six levels of heading that are
commonly used.

 There are 6 levels of heading tags

<h1>,<h2>,<h3>,<h4>,<h5>,<h6>
 The largest heading tag is <h1>
<html>
<head>
<title>headings</title>
</head>
<body>
<h1> Hello World</h1>

<h2> Hello World</h2>

<h3> Hello World</h3>

<h4> Hello World</h4>

<h5> Hello World</h5>

<h6> Hello World</h6>

</body>
</html>
Output:
iv. bold tag
 This tag is used for implement bold effect on the text.
Syntax:
<b>………………</b>

<html>
<title> Hello World </title>
<body>
<h1><b>computer science engineering</b></h1>
</body>
</html>
Output:
[Link]
 This implements italic effects on the text.
 Syntax:
 <i>….</i>
 Ex:
<html>
<title> Hello World </title>
<body>
<i>computer science engineering</i>
</body>
</html>
Output:
[Link] tag
 This tag is used to link two HTML pages, this is
represented by <a>
Syntax:
 <a href=“path of the file”>some text</a>
Ex:
<html>
<title> Hello World </title>
<body>
<a href="[Link]">heading tag</a>
</body>
</html>
Output:
vii. horizontal line(<hr>):
 The <hr> tag is used to break the page into various
parts, creating horizontal margins with help of a
horizontal line.
 This is also an empty tag which means that it has no
end tag.
 Syntax:<hr>
<html>
<head>
<title>Gayatri Vidya Parishad College of Engineering(A)</title>
</head>
<body>
<h1> Gayatri Vidya Parishad College of Engineering(A) </h1>
<p>
Computer Science and Engineering<br>
Electronics and Communications Engineering <br>
Electrical and Electronics Engineering<br>
</p>
<hr>
<p>
Mechanical Engineering<br>
Civil Engineering<br>
</p>
<hr>
</body>
</html>
 A table is an arrangement of data in rows and columns.
 An HTML table is defined with the “table” tag
Ex: <table>………………</table>

 Each table row is defined with the “tr” tag.

Ex:<tr>…………………</tr>

 A table header is defined with the “th” tag.

Ex:<th>…………………….</th>

 A table data/cell is defined with the “td” tag

Ex:<td>………………………….</td>
Example-1:
<html>
<head>
<title> table1</title>
</head>
<body>
<table border="2">
<tr>
<th>heading1</th>
<th>heading2</th>
<th>heading3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
Output:
Ex-2:
<html>
<body>

<h1>DEPT OF COMPUTER SCIENCE AND ENGINEERING</h1>

<h2>2018-2022 PLACEMENTS</h2>
<h3>Total Number of Students Placed: 130</h3>
<h3>Total Number of Placement Offers: 330</h3>

<table border=1 bgcolor = "yellow" style="width:50%">

<tr>
<th>[Link]</th>
<th>Company Name</th>
<th>Selected Count</th>
<th>Package</th>
</tr>
<tr>
<td>1</td>
<td>AMAZON</td>
<td>1</td>
<td>44LPA</td>
</tr>
<tr>
<td>3</td>
<td>WIPRO</td>
<td>75</td>
<td>3.5LPA</td>

</table>
</body>
</html>
HTML <!DOCTYPE>

 HTML <!DOCTYPE> tag is used to inform the

browser about the version of HTML used in the
document.
 It is called as the document type declaration (DTD).
 Technically <!DOCTYPE > is not a tag/element, it
just an instruction to the browser about the
document type.
 Syntax
<!DOCTYPE html>
Cellspacing:
 cellspacing Attribute is used to specify the space between the cells.
 The cellspacing attribute is set in terms of pixels
Syntax:
<table cellspacing="pixels">
<caption> Tag:
 The caption tag is used to specify the caption of a table.
 This tag will be inserted just after the <table> tag.
 Only one caption can be specified for one table.
 It is by default aligned to the center.

Syntax:

<caption >sometext</caption>
<html>
<head>
<title>
HTML table cellspacing Attribute
</title>
</head>

<body>
<h1>CSE</h1>

<h2>HTML table cellspacing Attribute</h2>

<table border="1"
cellspacing="15">
<caption>Author Details</caption>

<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
<td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>

</html>
Output:
Rowspan
 The row span attribute is for merging rows
Synatx:
<tag rowspan=“number:>some text</tag>

Ex1:

<html>
<head>
<title>rowspan</title>
</head>
<body>
<h1>The td rowspan attribute</h1>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

</body>
</html>
Output:
Ex2:

<html>
<head>
<title>HTML rowspan Attribute</title>

</head>

<body>

<h2>HTML rowspan Attribute</h2>

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>

<th rowspan="3">REC</th>
</tr>
<tr>
<td>Arun</td>
<td>24</td>
</tr>
<tr>
<td>Priya</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Output:
colspan
 The colspan attribute is for merging columns

Syntax:
<tag colspan=“number”> some text </tag>

Ex1:
<html>
<head>
<title>colspan</title>
</head>
<body>
<h1>The td colspan attribute</h1>

<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>

</body>
</html>
Output:
Ex2:
<!DOCTYPE html>
<html>
<head>
<title>colspan2</title>
</head>
<body>

<h1>The th colspan attribute</h1>

<table border="2">
<tr>
<th colspan="2">Monthly Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>

</body>
</html>
Output:
Cell Padding

 Cellpadding Attribute is used to specify the space between the

cell content and cell wall.
Syntax:
<table cellpadding="pixels">
Ex:
<!DOCTYPE html>
<html>
<head>
<title>
HTML table cellpadding Attribute
</title>
</head>
<body>
<h1>Cell Padding</h1>
<table border="1"
cellpadding="15">
<caption>Author Details</caption>

<tr>
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>
<tr>
 <td>BITTU</td>
<td>22</td>
<td>CSE</td>
</tr>
<tr>
<td>RAM</td>
<td>21</td>
<td>ECE</td>
</tr>
</table>
</body>

</html>
Output:
 Images, bg color
 The “img” tag is used to add images on a webpage
 The “img” tag is an empty tag, which means that it has no
end tag.
Syntax :
 <img src="url" alt="some_text">
src:
 src stands for source.
 src attribute specifies the path (URL) to the image
alt:
 Alt stands for alternate text
 If the image cannot be displayed then the alt attribute acts
as an alternative description for the image
Ex:
<html>

<head>
<title>Image</title>
</head>

<body>
<h1>Gayatri Vidya Parishad College of Engineering(A)</h1>
<img src = "C:\Users\Pc\Downloads\[Link]" alt = “Logo" >
</body>

</html>
Output:

 Gayatri Vidya Parishad College of Engineering

Set image height and width
<html>

<head>
<title>Image</title>
</head>

<body>
< h1>Gayatri Vidya Parishad College of Engineering(A )</h1>
<img src = " C:\Users\Pc\Downloads\[Link] " alt = “Logo"
width="300" height="300">
</body>

</html>
[Link] color adding in html

Syntax:
<Body bgcolor=“colorname ">
Ex:

<html>
<head>
<title>headings</title>
</head>
<body bgcolor="blue">
<h1> Hello World</h1>
<h2> Hello World</h2>
<h3> Hello World</h3>
<h4> Hello World</h4>
<h5> Hello World</h5>
<h6> Hello World</h6>
</body>
</html>
Output:
 Week 5(d).Text Color
Syntax:
<tag name style="color:colorname;">

Example:

<html>
<head>
<title>headings</title>
</head>
<body>
<h1 style="color:yellow;"> Hello World</h1>
<h2 style="color:red;"> Hello World</h2>
<h3> Hello World</h3>
<h4> Hello World</h4>
<h5> Hello World</h5>
<h6> Hello World</h6>
</body>
</html>
Output:
5(e).Border Color

Syntax:
<tagname style="border: pixel solid colorname;">
Example:
<html>
<head>
<title>headings</title>
</head>
<body>
<h1 style="border: 2px solid red;"> Hello World</h1>
<h2 style="border: 2px solid blue;"> Hello World</h2>
<h3> Hello World</h3>
<h4> Hello World</h4>
<h5> Hello World</h5>
<h6> Hello World</h6>
</body>
</html>
Output:
[Link] :Example
<html>
<head>
<title>table ex4</title>
</head>
<body>
<h1>DEPT OF COMPUTER SCIENCE AND ENGINEERING</h1>
<table border=1 bgcolor = "yellow" style="width:50%">
<tr>
<th>[Link]</th>
<th>Company Name</th>
<th>Selected Count</th>
<th>Package</th>
</tr>
<tr>
<td>1</td>
<td>AMAZON</td>
<td>1</td>
<td>44LPA</td>

</tr>
<tr>
<td>3</td>
<td>WIPRO</td>
<td>75</td>
<td>3.5LPA</td>
</tr>

</table>
</body>
</html>
Output:
5.(f)Table alignment
Syntax:

<table align="left | right | center">

Example:
<html>
<head>
<title> Table alignment</title>
</head>
<body>
<h1>DEPT OF COMPUTER SCIENCE AND ENGINEERING</h1>
<table border=“1” align="right" bgcolor = "yellow" style="width:50%">

<tr>
<th>[Link]</th>
<th>Company Name</th>
<th>Selected Count</th>
<th>Package</th>
</tr>
<tr>
<td>1</td>
<td>AMAZON</td>
<td>1</td>
<td>44LPA</td>

</tr>
<tr>
<td>3</td>
<td>WIPRO</td>
<td>75</td>
<td>3.5LPA</td>

</table>
</body>
</html>
Output:
 Week-6:List
What is a list?
 Lists are used to group together related pieces of
information.
 All lists may contain one or more list elements.
 Ex: a)A shopping list
b)people’s names

 The three list types

i)ul : An unordered list.

ii)ol : An ordered list.

iii)dl : A definition list.

 i)An unordered list

 Unordered lists are also called unnumbered lists.

 The Unordered list elements are used to represent a
list of items.

 Syntax:
 <ul>…………………….</ul>

 Each list item starts with the “li” tag

 Example-1

<html>
<head>
<title>UL</title>
</head>
<body>
<h2>Grocery list</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Output:
Example-2:
Circle : Sets the list item marker to a circle

<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<h2>Grocery list</h2>

<ul style="list-style-type:circle">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>
Output:
ii)Ordered Lists
 Ordered lists are also called sequenced or numbered
lists.

 Syntax:
 <ol>…………………………………..</ol>

 Each list item starts with the “li” tag

Ex-1
<html>
<head>
<title>OL</title>
</head>
<body>

<h2>Grocery List</h2>

<ol>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>

</body>
</html>
Ouput:
Ex-2:The list items will be numbered with uppercase
letters
<html>
<body>
<head>
<title>
<h2>Ordered List with Letters</h2> <title>
</head>

<ol type=“A” start=“6”>

<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>

</body>
</html>
Output:
iii)dl : A definition list

 A definition list is a list of terms, with a description of

each term.
 The <dl> tag defines the description list.
 Syntax:<dl>………….</dl>

 the <dt> tag defines the term name.

Ex:<dt>Coffee</dt>

 the <dd> tag describes each term

Ex:<dd>500gms</dd>
<html>
<body>

<h2>A Description List</h2>

<dl>
<dt>Coffee</dt>
<dd>- 500 gms</dd>
<dt>Milk</dt>
<dd>- 1 ltr Tetra Pack</dd>
</dl>

</body>
</html>
Output:
 Forms
 HTML Forms are required when you want to collect some
data from the site visitor(client).

 An HTML form contains different kind of information such

as username, password, contact number, email id etc.

 Syntax:

 <form >………………………………..</form>
Input Element in HTML Forms :

i)Text Field in HTML Forms

ii)Password Field in HTML Forms
iii)Text area in an HTML Form
iv)Radio Buttons in HTML Form
v)Checkboxes in HTML Form
vi)File select boxes in HTML Forms
vii) Select Boxes in HTML Forms
viii)Reset And Submit Buttons
i)Text Field in HTML Forms

 The text field is a one line input field allowing the user to
input text.
 Text Field input controls are created using the “input”
element with a type attribute having value as “text”.

 They are created using HTML <input> tag.

 Ex:
 <input type = "text" name = "first_name" />
Ex:

<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>
Output:
ii)Password Field in HTML Forms

 It works exactly as text, but the content is not displayed to

the screen, instead an * is used.
 They are also created using HTML <input>tag but type
attribute is set to password.

 Syntax:
 <input type = "password" name = "password" />
Ex:
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>

</html>
Output:
iii)Text area in an HTML Form :

 Text Area is a multiple line text input control which

allows user to provide a description or text in multiple
lines.
 A Text Area input control is created using the
“textarea” element.

 Syntax:
 <textarea>…………………………</textarea>
Ex:

<html>

<head>
<title>Multiple-Line Input Control</title>
</head>

<body>
<form>
Description : <br>
<textarea rows = “6" cols = “40" name = "description">
Enter description here...
</textarea>
</form>
</body>

</html>
Output:
[Link] Buttons in HTML Form

 Radio Buttons are used to let the user select exactly one
option from a list of predefined options.
 Radio Button input controls are created using the “input”
element with a type attribute having value as “radio”.

Ex:
 <input type = "radio" name = "subject" value = “string or
number">
Ex:

<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<b>SELECT SUBJECT</b>
<br>
<input type = "radio" name = "subject" value = “HTML"> HTML
<input type = "radio" name = "subject" value = “C"> C
<input type = "radio" name = "subject" value = “DS"> DS
</form>
</body>

</html>
Output:
[Link] in HTML Form

 Checkboxes are used to let the user select one or more

options from a pre-defined set of options.
 Checkbox input controls are created using the “input”
element with a type attribute having value as “checkbox”.
Ex:
<input type = "checkbox" name = "subject" value =
“HTML">HTML
Ex:

<html>
<head>
<title>Check Box Control</title>
</head>
<body>
<form>
<b>SELECT SUBJECTS</b>
<br>
<input type = "checkbox" name = "subject" value = “HTML"> HTML
<input type = "checkbox" name = "subject" value = “C"> C
<input type = "checkbox" name = "subject" value = “DS"> DS
</form>
</body>

</html>
Output:
 VI)File select boxes in HTML Forms

 File select boxes are used to allow the user to select a

local file and send it as an attachment to the web
server.

Ex:

 <input type="file" name="upload" id="fileselect">

Ex:

<html>
<head>
<title>file</title>
</head>
<body>
<h3>Example of a File Select Box</h3>

<form>
<input type="file" name="upload" id="fileselect">
</form>
</body>
</html>
Output:
[Link] Boxes in HTML Forms

 Select boxes are used to allow users to select one or

more than one option from a pull-down list of options.

 Select boxes are created using two elements which are

“select” and “option”.
Ex:
<html>
<head>
<title>select box</title>
</head>
<body>
<h3>Example of a Select Box</h3>
<form>
Country:
<select name="country" id="country">
<option value="India">India</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Australia">Australia</option>
</select>

</form>
</body>
Output:
viii)Reset And Submit Buttons :

 The Submit Button allows the user to send the form data to
the web server.
 The Reset Button is used to reset the form data and use the
default values.
Ex:
Submit:
<input type="submit" value="Submit">

Reset:
<input type="reset" value="Reset">
Ex:
<html>
<head>
<title>reset and submit</title>
</head>
<body>
<h3>Example of a Submit And Reset Button</h3>
<form action=“[Link]" method="post" id="users">
<b>username</b>
<input type="text" name="username" id="Username">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Output:
 Frames

 HTML frames are used to divide your browser window

into multiple sections
 A collection of frames in the browser window is known
as a frameset.
 To use frames on a page we use <frameset> tag instead
of <body> tag.

Syntax:
 < frame src = “path" >
 Example-1

<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">

<frame src="D:\[Link]" >

<frame src="D:\[Link]"">
<frame src="D:\[Link]"">

</frameset>
</html>
Output:
 Example-2
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="25%,50%,25%">
<frame src="D:\[Link]" >
<frameset rows="25%,25%">
<frame src="D:\[Link]">
<frame src="D:\[Link]">
</frameset>
<frame src="D:\[Link]">

</frameset>
</html>
Output:
 Example-3
<html>
<head>
<title>Frame tag</title>
</head>
<form>
<frameset cols="25%,25%" >
<frame src="D:\[Link]" >

<frameset rows="25%,25%">
<frame src="D:\[Link]">

<frameset cols="25%,25%">
<frame src="D:\[Link]">

<frame src="D:\[Link]">
</frameset>
</frameset>
</frameset>
</form>
</html>
Output:
HTML5

 HTML5, or HyperText Markup Language 5, is the

latest version of the HTML
 It is the fifth and final major HTML version
 HTML5 introduced several new features
Examples:
1)abbr tag
2)Audio Tag
3)Video Tag
4)HTML Footer Tag
5) Mark Tag
1)abbr tag

 HTML <abbr> tag is used to represent an

abbreviation of a longer word
Ex: www, HTML, HTTP
Syntax:
<abbr title="HyperText Markup language">HTML</abb
r>
Ex:
<html>
<head>
<title>Abbreviation Tag</title>
</head>
<body>
<h2>Abbreviation tag example</h2>
<p><b>mouse over the content and see the
abbreviation</b></p>
<abbr title="Hyper Text Transfer protocol">HTTP</abbr>
<br>
<abbr title="Centeral Processing
Unit">CPU</abbr>
</body>
</html>
Output:
[Link] Tag

 The <audio> tag is used to insert an audio into an

HTML webpage.
Syntax:
<audio controls>
<source src="sample.mp3" type="audio/mp3">
</audio>
Ex:
<html>
<head>
<title>Audio Tag</title>
</head>
<body>
<p><b>Audio Sample</b></p>

<audio controls>
<source src="D:\Dhoni.mp3" type="audio/mp3">

</audio>

</body>
</html>
Output:
[Link] Tag

 The <video> tag is used to embed video content in a

document, such as a movie clip or other video
streams
Syntax:
<video>
<source src="sample.mp4" type=“video/mp4">
</video>
Ex:
<html>
<head>
<title>Video Tag</title>
</head>
<body>
<p><b>Video Sample</b></p>

<Video controls>
<source src="D:\Dhoni1.mp4" type=“video/mp4">

</Video>

</body>
</html>
Output:
[Link] Footer Tag

 HTML <footer> tag contains information about its

containing elements for example:
 Syntax:
 <footer>……………….</footer>

 author information
 contact information
 copyright information
 sitemap
 back to top links
 related documents etc.
Ex:
<html>
<head>
<title>Footer</title>
</head>
<body>
<footer>
<p>
<address> Sams Teach Yourself HTML, CSS &
JavaScript Web Publishing in One Hour a
Day
</address>
</p>
<p>Contact information:
<a href="international@[Link]">international@[Link]</a>.
</p>
<p>author information:Jennifer</p>
<p>Edition:7th Edition</p>
</footer>
</body>
</html>
Output:
[Link] Tag

 HTML <mark> tag is used to highlight the some text

part inside of another element such as paragraph
Syntax:
 <mark>write your content here....</mark>
Ex:
<html>
<head>
<title>Gayatri Vidya Parishad College of Engineering(A)</title>
</head>
<body>
<h1>Gayatri Vidya Parishad College of Engineering(A) </h1>
<p>
<mark>Computer Science and Engineering</mark><br>
Electronics and Communications Engineering <br>
Electrical and Electronics Engineering<br>
</p>
<hr>
<p>
<mark>Mechanical Engineering</mark><br>
Civil Engineering<br>
</p>
<hr>
</body>
</html>
Output:
 CSS
 CSS stands for Cascading Style Sheets.
 Cascading Style Sheet(CSS) is used to set the style
in web pages that contain HTML elements.
 It sets the background color, font-size, font-
family, color, … etc property of elements on a web
page.
1)Levels of Style Sheets:
 There are three types of CSS which are given below:

i. Inline CSS
ii. Internal or Embedded CSS
iii. External CSS
i. Inline CSS

 Inline CSS contains the CSS property in the body section

attached with element is known as inline CSS.
Ex:
<html>
<head>
<title>Inline CSS</title>
</head>

<body>
<p style = "color:blue; font-size:50px;
font-style:italic; text-align:center;">
Gayatri Vidya Parishad of Engineering(A)
</p>
</body>
</html>
Output
ii. Internal or Embedded CSS
 The internal style sheet is used to add a
unique style for a single document.

 It is defined in <head> section of the HTML page

inside the <style> tag.
<html>
<head>
<title>Internal CSS</title>
<style>
.main {

text-align:center;
}
.rit{
color:blue;
font-size:50px;
font-weight:bold;
}
.cse{
font-style:bold;
font-size:30px;
}
</style>
</head>
<body style="background-color:yellow;">>
<div class = "main">
<div class ="rit">Gayatri Vidya Parishad Collage of
Engineering(Autonomous)</div>

<div class ="cse">

Minors in Computer Science and Engineering
</div>
</div>
</body>
</html>
Output
 iii. External CSS

 If you need to use your style sheet to various pages,

then its always recommended to define a common
style sheet in a separate file.

 A cascading style sheet file will have extension

as .css and it will be included in HTML files using
<link> tag.
 link tag is used to link the external style sheet with the
html webpage.
 href attribute is used to specify the location of the
external style sheet file
Ex: [Link]
body {
background-color:blue;
}
.main {
text-align:center;
}
.rit{
color:blue;
font-size:50px;
font-weight:bold;
}
.cse{
font-style:bold;
font-size:30px;
}
 [Link]

<html>
<head>
<link rel="stylesheet"
href="C:/Users/Pc/OneDrive/Desktop/[Link]"/>
</head>
<body style="background-color:green;">
<div class = "main">
<div class ="rit">Gayatri Vidya Parishad College of
Engineering(Autonomous)</div>

<div class ="cse">

Minors in Computer Science and Engineering
</div>
</div>
</body>
</html>
Output
Week11:CSS Box Model
 The CSS box model is a container that contains multiple properties
including borders, margin, padding, and the content itself.
 It is used to create the design and layout of web pages.
Diagram:
Ex:
<head>
<title>CSS Box Model</title>
<style>
.main
{
font-size:30px;
font-weight:bold;
Text-align:center;
}
.gfg
{
margin-left:50px;
border:50px solid blue;
width:300px;
height:200px;
text-align:center;
padding:50px;
}
.gfg1
{
font-size:40px;
font-weight:bold;
color:black;
margin-top:60px;
background-color:blue;
}
.gfg2
{
font-size:20px;
font-weight:bold;
background-color:white;
}
</style>
</head>
<body>
<div class = "main">CSS Box-Model Property</div>
<div class = "gfg">
<div class = "gfg1">Gayatri Vidya Parishad College of Engineering(A)</div>
<div class = "gfg2">Minors in CSE</div>
</div>
</body>
</html>
Output:
Week-12:Explain Java Script

 JavaScript is a scripting language written into an HTML page to make it

more interactive
 It is mainly used to manipulate images, form validation and change
content dynamically
 The HTML <script> tag is used to specify a client-side script
 Java Scripts can be placed inside the body or the head section
 Syntax:
<script>……………..</script>
JavaScript can be used to:
 Client-side validation
 Dynamic drop-down menus
 Displaying data and time
 Displaying clocks
Ex-1:
<html>
<body>
<script>
[Link]("Hello World!")
</script>
</body>
</html>
 The text/javascript is the content type that provides
information to the browser about the data.
 The [Link]() function is used to display
dynamic content through JavaScript.
Output:
JavaScript Variable

 Variables are Containers for Storing Data

 There are two types of variables in JavaScript : local variable and

global variable
 There are some rules while declaring a JavaScript variable (also
known as identifiers).
1. Name must start with a letter (a to z or A to Z), underscore( _ ), or
dollar( $ ) sign.
2. JavaScript variables are case sensitive, for example x and X are
different variables
Ex:
<html>
<body>
<script>
var x = 10;
var y = 20;
var z=x+y;
[Link](z);
</script>
</body>
</html>

Output:30
JavaScript local variable
 A JavaScript local variable is declared inside block or function.
 It is accessible within the function or block only.

<html>
<body>
<script>
function a()
{
var data=100;//local variables
[Link](data);
}
function b()
{
var data=300; //local variables
[Link](data);
}
a();//calling JavaScript function
b();
</script>
</body>
</html>
Output:
 100 300
 JavaScript global variable
 A JavaScript global variable is accessible from any
function.
 A variable i.e. declared outside the function or
declared with window object is known as global
variable.
Ex:
<html>
<body>
<script>
var data=45;
function a()
{
[Link](data);
}
function b()
{

[Link](data);
}
a();//calling JavaScript function
b();
</script>
</body>
</html>
Output:
 45 45
Ex:
<html>
<body>
<script>
var x = 10;
var y = 20;
var z=x+y;
[Link](z);
</script>
</body>
</html>
Function

 A function is a set of statements that take inputs, do some

specific computation, and produce output
 JavaScript functions are used to perform operations.
 We can call JavaScript function many times to reuse the code.
There are mainly two advantages of JavaScript functions.
1. Code reusability: We can call a function several times so it
save coding.
2. Less coding: It makes our program compact. We don’t need to
write many lines of code each time to perform a common task.
Ex-1:
<html>
<body>
<script>
function msg(){
alert("hello! this is message");
}
</script>
<input type="button" onclick="msg()" value="call
function"/>
</body>
</html>
Output:
Ex-2:
<html>
<head>
<title>Functions!!!</title>
<script>
function myFunction()
{
[Link]("This is a simple function.<br />");
}
myFunction();
myFunction();
myFunction();
</script>
</head>
<body>
</body>
</html>
Output:
Ex3:JavaScript Function Arguments
<html>
<body>
<script>
function getcube(number){
alert(number*number*number);
}
</script>
<form>
<input type="button" value="click" onclick="getcube(4)"/>
</form>
</body>
</html>
Output:64
Ex 3:Operators
<html>
<body>
<script type = "text/javascript">
var a = 20;
var b = 10;
var c=30;
var linebreak = "<br />";

result = a + b;
[Link](result);
[Link](linebreak);

result = a - b;
[Link](result);
[Link](linebreak);
result = a * b;
[Link](result);
[Link](linebreak);

result = a / b;
[Link](result);
[Link](linebreak);

result = a % b;
[Link](result);
[Link](linebreak);
result = a + b + c;
[Link](result);
[Link](linebreak);

result = ++a;
[Link](result);
[Link](linebreak);

result = --b;
[Link](result);
[Link](linebreak);

</script>

</body>
</html>
Output:
Logical operator
 JavaScript supports the following logical operators −
 Assume variable A holds 10 and variable B holds 20, then −

[Link]. Operator & Description

&& (Logical AND)
If both the operands are non-
1 zero, then the condition
becomes true.
Ex: (A && B) is true.
|| (Logical OR)
If any of the two operands are
2 non-zero, then the condition
becomes true.
Ex: (A || B) is true.
! (Logical NOT)
Reverses the logical state of its
operand. If a condition is true,
3
then the Logical NOT operator
will make it false.
Ex: ! (A && B) is false.
<html>
<head>
<title>Logical Operators</title>
</head>
<body>
<script>

var a = 10;
var b = 20;
var c=30;
var linebreak = "<br>";

[Link]("(a && b) => ");

result = (a<b && a<c);
[Link](result);
[Link](linebreak);
[Link]("(a || b) => ");
result = ((a<b || a<c));
[Link](result);
[Link](linebreak);

[Link]("!(a && b) => ");

result = (!(a < b));
[Link](result);
[Link](linebreak);

</script>

</body>
</html>
Output:
 (a && b) => true
(a || b) => true
!(a && b) => false