Introduction to Web Design

The term "Internet" is a generalization that covers thousands of interconnected

networks around the world based on very different technologies. The networks differ in
almost any possible network specific parameter such as transmission medium,
geographical size, number of nodes, transmission speed, throughput, reliability etc.
In other hand we can say that Internet is a network of networks.
World Wide Web (known as "WWW', "Web" or "W3") : Tim Berners-Lee invented
the World Wide Web in 1989, The World Wide Web is not synonymous with the
Internet.
The World Wide Web is the universe of network-accessible information, an embodiment of human
knowledge.
In contrast, the World Wide Web is a global collection of documents and other resources, linked by hyperlinks
and uniform resource identifier.

A site or website is a set of related web pages located under a single domain name, typically produced by a
single person or organization. For examples [Link], [Link], [Link], [Link] etc.

Web Application:
The applications which will provide services over the web are called web applications.
Eg: [Link], [Link] etc.

Every web application contains 2 main components

1. Front-End
2. Back-End

1) Front-End:

The term “front-end” refers to the user interface .

Front end development manages everything that users visually see first in their browser or application.

developers who are responsible for the look and feel of a site is called Front end developers.

We can develop Front-End content by using the following technologies:

HTML, CSS ,JavaScript, [Link], Angular JS etc.

HTML: HyperText Markup Language

Every web application should contain HTML. i.e HTML is the mandatory technology for web development.
It represents structure of web page

CSS: Cascading Style Sheets

It is optional technology; still every web application contains CSS.
The main objective of CSS is to add styles to the HTML Pages like colors, fonts, borders etc.

Java Script:
JavaScript is a lightweight, cross-platform and interpreted scripting language.
The main objective of Java Script is to add functionality to the HTML Pages. ie to add dynamic nature to
the HTML Pages.

Static Response vs Dynamic Response:

If the response is not varied from time to time and person to person then it is considered as static response.
e.g.: Login page of gmail
home page of [Link] etc.

If the response is varied from time to time and person to person then it is considered as dynamic response.
Eg inbox page of gmail
Eg: welcome page of any internet banking. Etc.

2) Back End:
back-end” means the server, application and database that work behind the scenes to deliver information to
the user.

It is the technology used to decide what to show to the end user on the Front-End.
i.e. Backend is responsible to generate required response to the end user, which is displayed by the Front-
End.

In order to make the server, application, and database communicate with each other, back-end developers
uses server-side languages like PHP, Ruby, Python, Java, and .Net to build an application, and tools like
MySQL, Oracle, and SQL Server to find, save, or change data and serve it back to the user in front-end
code.

Responsive Web design :

Responsive Web design is the approach that suggests that design and development should respond to the
user's behavior and environment based on screen size, platform and orientation.

Responsive web design makes your web page look good on all devices.
 Editors
Text editors are used to create and modify web pages. HTML ,css , JavaScript etc. codes can be
written in any text editors including the notepad. Some of the popular text editors are given below:
 Notepad
 Notepad++
 Sublime Text Editor etc.

Notepad: Notepad is a basic text editor included with all versions of Microsoft Windows, you can use
this editor for creating simple documents or for creating web pages and any kind of file with given
extension.

To open Notepad, select the Start Windows logo Start button button and then
type Notepad in the search box. Select Notepad from the results.

Another way to open notepad in windows operating system:

step1: press windows key+r to open run dialogue box.

step2: in run dialogue box write notepad and press enter key/ok button.
after that you will get the notepad application.

=>Default extension of notepad file is .txt

=>ctrl+s To save file

Notepad++: Notepad++ is a free source code editor and Notepad replacement that
supports several languages. Notepad++ is written in C++. It supports tabbed editing,
which allows working with multiple open files in a single window. The project's name
comes from the C increment operator.

Official website of notepad++ is [Link]

To download notepad++ using the following link:

For 32 bit system-

[Link]
plus/releases/download/v7.9.1/[Link]

For 64 bit system-

[Link]
plus/releases/download/v7.9.1/[Link]
Sublime text editor:
Sublime Text is a code editor software program that allows you to be able to write
code efficiently. Here you can do all that you want within the coding process, and it
has a solid number of plugins and packages to customize the platform directly to your
needs.
Sublime Text 3 is the current version of Sublime Text.
To download sublime text use the [Link] link.
Sublime Text may be downloaded and evaluated for free, however a license must
be purchased for continued use. There is currently no enforced time limit for the
evaluation.
 HTML BASIC
HTML stands for HyperText Markup language.

This is the most basic building block of every web application, Without using
HTML we cannot build web applications.
 HTML is not a case sensitive.
Example:

<html>
or
<HTML>
or
<HtMl> all these are same effect.

 File extension of html file is .html or .htm

What are required software to create and run the html code.

1) Text Editor e.g. notepad, notepad++ etc.

2) Web browser e.g firefox, chrome IE etc...

How to run a html code:

Step1: Create a html file ( extension of file should be .html or .htm)

Step2: Right click on the html file and select open with notepad or any text editor.

Step3: Write HTML code in the file and save it.

Step4: To run html code right click on the html file and open with any web browser.
Now you will see the output in the browser.

Strcutre of HTML Page:

Every HTML page contains two parts
1. Head part
2. Body part
Head contains meta data like title of the page, keywords etc.
Body contains actual content.
Basic Syntax of HTML code.
<html>
<head>
<title>demo</title>
</head>
<body >
Actual content goes here

</body>
</html>

Heading in HTML:
There are six heading tag available in html. In other word we can say HTML supports 6 heading
tags.

<h1>Heading level 1</h1>

<h2>Heading level 2</h2>
<h3>Heading level 3</h3>
<h4>Heading level 4</h4>
<h5>Heading level 5</h5>
<h6>Heading level 6</h6>

From the above output it is clear that <h1> is the highest and <h6> is the lowest heading.

Paragraph tag: <p>:

We can use this tag to represent paragraph of text.
<p> This is first paragraph </p>
case-1:
<p>This is First Line
This is Second Line
This is Third Line
This is Four Line
</p>

Total Data will come in a single line, because we are using only one paragraph tag.
Case-2:
<p>This is First Line</p>
<p>This is Second Line</p>
<p>This is Third Line</p>
<p>This is Fourth Line</p>

Output will come in 4 lines

case-3:
<p>This is First Line</p><p>This is Second Line</p>
Output will come in 2 lines

<u> tag: this tag is used to underline a text.

<u> this text is underline</u>

Output: this text is underline

<img> tag:
In HTML, you can embed an image into a web page using the <img> tag.
When you use this tag, you insert the image URL or address or path. You should
also provide other details such as width, height, and alternative text.

Alternative text is the text that is displayed in the event that your image can't be
displayed. It is useful in the event that someone views your website with images
disabled in their web browser.

Example:
<img src=”[Link]” height=”100” width=”100” alt=”pic of cat” />
<sup> tag: This tag is used to write superscript in a web page.

HTML CODE:

X ²

<sub> tag: This tag is used to write subscript in a web page.

HTML Code:

H₂O

<pre> tag

The HTML <pre> tag is used to specify pre formatted texts. Texts within
<pre>....... </pre> tag is displayed in a fixed-width font. Usually it is displayed in Courier
font. It maintains both space and line break.

Example:
<html>
<head>
<title>demo</title>
</head>
<body >
<pre>
Amhara bihta,
 Near iit Main gate
District-patna
</pre>

</body>
</html>

Output
Amhara bihta,
Near iit Main gate
District-patna

<hr> tag : It draw a horizontal line to separate the content in a web page. It is also
called a Horizontal Rule in HTML.

Attribute name Description

Width This attribute is used to specify the width of
a horizontal rule
Size This attribute is used to specify the height
(thickness) of a horizontal rule
Color This attribute is used to control the display
color of a horizontal rule
align This attribute is used to control the
horizontal alignment of a horizontal rule
noshade This attribute is used to change the display
of a horizontal rule form the default 3D style
to a flatter 2D style.

HTML Strikethrough

<strike> tags is used for deleted text.

The content of strikethrough tags would appear with a horizontal line(strikethrough) over the text.
Example:

<p>Price of Laptop is <strike>Rs. 29000 </strike> Rs 27000</p>

Output: Price of Laptop is Rs. 29000 Rs 27000

Alternatives to HTML Strikethrough Text

There are two alternatives you may use instead of the <strike> tags. Both of them look the same
in the output, but convey different semantic meaning:

To show that a certain part of text is deleted, use <del>.

In other cases, use <s>.

Example:
<p>My favorite fruit is <del>mango </del> Apple</p>
Output:
My favorite fruit is mango Apple

Example-2:
<p><s>My car is blue.</s></p>
Output: My car is blue.

<a> tag (or anchor tag): This tag is used to creates a hyperlink to web pages, files, email
addresses, locations in the same page etc.
for example
Suppose you wanted to link to the home page of nielit. The web address is:
[Link] You have to code the link like this:

<a href="[Link] of NIELIT</a>

Output:

Homepage of NIELIT
When you click on the above hypertext you will be redirected to home page of NIELIT.

Attribute name Description

href Specifies the URL of a page that the link
goes to.
target Specifies the default browsing context to
load the URL into. Only to be used when the
href attribute is present.
Possible values:

_blank, _self, _top, _parent , frame_name

HTML Comment:

Comment is used to enhance the readability and understandability of the code. HTML comments
are visible to anyone that views the page source code.
<!--this text is ignored/not displayed by the browser-->
Example:
<html>
<head>
<title>demo of html</title>
</head>
<body>
<h1>Hello</h1> <!- -h1 is the highest heading tag in html- ->
</body>
</html>
Output: only hello will be displayed on the web browser.

<br> tag in html:

<br > tag is used for line break.
this tag is also called empty tag(because <br> tag does not have its closing tag)

you can close this tag as <br />.

<html>
<head>
<title>demo of html</title>
</head>
<body>
hello<br>world
</body>
</html>

output:
hello
world
Note: In HTML indentation is not important but tags are important.

Bold and Italic:

legacy tags:
<b> for bold
<i> for italic
These are old (Legacy)html tags and not recommended to use.
Eg <p><b><i>This is First Line</i></b></p>
advanced tags:
We can use the following HTML 5 advanced tags for bold and italic
<strong> for strong text(bold)
<em> for emphasis (italic)
Eg
<p><strong><em>This is Second Line</em></strong></p>

how to set background image in html:

====================================

<html>

<head>

<title>demo</title>

</head>

<body background="[Link]">

</body>

</html>

Realtive Address of image:

background="image/[Link]"

Absolute Address of image:

"C:\Users\nielit\Desktop\O Level 1st sem sptember 2020 to jan 2021\image\[Link]"

=>marquee tag in html:
marquee is a scrolling piece of text/image displayed either horizontal or vertical direction.
By default, content found within the <marquee> tag will scroll from right to left.

<html>
<head>
<title>demo of html</title>
</head>
<body>
<marquee direction="right" loop="2" behavior="alternate">welcome to
nielit</marquee>
</body>
</html>
loop attribute in marquee tag is used to specify the how many times to loop.
default is infinite times.

Code for space in html:

&nbsp; this code is used for space in html.

example:
<html>
<head>
<title>demo of html</title>
</head>
<body>
hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp
;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;world
</body>
</html>

output:
hello world

how to write symbol in html:

[Link]
[Link]
[Link]

Char Dec Hex Entity Name

∀ 8704 2200 &forall; FOR ALL
example:
<html>
<head>
<title>demo of html</title>
</head>
<body>
&forall; &#8704; &#x2200;
</body>
</html>
output:
for all symbol three times.
Important Symbol:
&reg;

®
&copy; ©
&lt; <
&gt; >
&nbsp; space

LIST IN HTML:
HTML lists allow web developers to group a set of related items in lists.

There are two type of list available in html.

1. Ordered List
2. Unordered list
ordered list:
1. Long term course
2. short term course
3. project training
HTML code:
<html>
<head>
<title>demo html</title>
</head>
<body>
<ol type="1">
<li>Long term course</li>
<li>short term course</li>
<li>project training</li>
</ol>
</body>
</html>

type="1" =>1., 2., 3., .......

type="A" =>A., B., C., .......
type="a" =>a., b., c., .......
type="i" =>i., ii., iii., .......
type="I" =>I., II., III.,.............

example2:

1. Long term course

A. adhns
B. o Level
2. short term course
I. php
II. java
3. project training

HTML Code:
<html>
<head>
<title>demo html</title>
</head>
<body>
<ol type="1" >
<li>Long term course
 <ol type="A">
<li>adhns</li>
<li>o Level</li>
</ol>
</li>
<li>short term course
<ol type="I">
<li>php</li>
<li>java</li>
</ol>

</li>
<li>project training</li>
</ol>
</body>
</html>

Unordered LIST:

 Long term course

 adhns
 o Level
 short term course
 php
 java
 project training

HTML CODE:

<html>
<head>
<title>demo html</title>
</head>
<body>
<ul >
<li>Long term course
<ul type="square">
<li>adhns</li>
<li>o Level</li>
</ul>
</li>
<li>short term course
<ul type="disc">
<li>php</li>
<li>java</li>
</ul>
</li>
<li>project training</li>
</ul>
</body>
</html>

Table in HTML: Table is a collection of row and column.

Table cells which act as column headers or row headers should use the <th> (table header)

A caption can be added to a table using the <caption> element.

The CAPTION element is only permitted immediately after the TABLE start tag. A TABLE
element may only contain one CAPTION element.
Example:
A B
C D
E F

HTML CODE:
<html>
<head>
<title>demo html</title>
</head>

<body>
<table border="1">
<tr>
<td>A</td>
<td>B</td>
</tr>

<tr>
<td>C</td>
<td>D</td>
</tr>

<tr>
<td>E</td>
<td>F</td>
 </tr>

</table>
</body>
</html>

Column merge in a table:

A
B C

HTML CODE:
<html>
<head>
<title>demo</title>
</head>
<body>
<table border="1">
<tr>
<td colspan="2" align="center">A</td>
</tr>

<tr>
<td>B</td>
<td>C</td>
</tr>
</table>
</body>
</html>
Row merge in a table:
B
A
C
<html>
<head>
<title>demo</title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>
</body>
</html>

align attribute in table:

align="left"
align="right"
align="center"
valign attribute in table:

valign="top"
valign="middle"
valign="bottom"

cellpadding attribute:
it is distance between cell wall and content of a table.
cellspacing attribute: it is space between two cell.

<dl> tag(description list): This tag is used to define list of definition.

This tag is used with <dt> and <dd> tag.
<dt> :define term
<dd>: define definition
Example:
<html>
<head>
<title></title>
</head>
<body>
<dl>
<dt>RAM</dt>
<dd>Random-access memory (or simply RAM) is the memory or information
storage in a computer that is used to store running programs and data for the
programs. Data (information) in the RAM can be read and written quickly in
order.
</dd>
<dt>Rom</dt>
<dd>Read-only memory (ROM) is a type of non-volatile memory used in computers
and other electronic devices.
</dd>
</dl>
</body>
</html>
OUTPUT:
RAM
Random-access memory (or simply RAM) is the memory or information storage
in a computer that is used to store running programs and data for the programs.
Data (information) in the RAM can be read and written quickly in order.
Rom
Read-only memory (ROM) is a type of non-volatile memory used in computers
and other electronic devices.
Form in HTML
An HTML form is used to collect user input. The user input is most often sent to a server for processing.

We can create Html form by using <form> tag.

Syntax:
<form class="" action="" method="">
.....
</form>

Within the form to collect end user input, we have to use <input> tag.
This <input> tag will play very important role in form creation.

syntax: <input type="" name="" value=""/>

type attribute can be used to specify the type of input end user has to provide. The main important types
are:
text
email
password
color
submit
checkbox
radio
file
etc
name attribute represents the name of input tag. By using this name, in the next target page we can
access end user provided input value.
value attribute represents default value will be displayed in the form.

Eg
<input type="text" name="username" value="Enter User Name"/>
<input type="email" name="mailid" value=""/>
<input type="password" name="pwd" value=""/>
<input type="checkbox" name="course" value=""/>
<input type="radio" name="married" value=""/>

To provide default value it is highly recommended to use placeholder attribute because end user is not
required to delete default value while entering data.
Eg: <input type="text" name="username" placeholder="Enter User Name"/>
HTML FORM Example:
HTML CODE:

<html>
<head>
<title>demo of html form</title>
</head>
<body>
<form method="post" action="[Link]">
<table border="1" cellspacing="0" align="center" height="700"
width="60%"cellpadding="10">
<tr>
<td>choose color:<font color="red">*</font></td>
<td><input type="color" name="colorpick" required/></td>
</tr>
<tr>
<td>Enter Name:<font color="red">*</font></td>
<td><input type="text" name="uname" placeholder="Enter Name" required
maxlength="30" pattern="[a-z A-z]{2,30}"/></td>
</tr>
<tr>

<td>enter mobile number:</td>

<td><input type="text" size="1" value="+91"
disabled="disabled"/>&nbsp;&nbsp;&nbsp;<input type="text" pattern="[0-9]{10}"
required/></td>
</tr>
<tr>
<td>Enter password:</td>
<td><input type="password" name="pwd" required pattern="[a-zA-z$@0-
9]{5,15}"/></td>
</tr>

<tr>
<tr>
<td>how many car do you have?</td>
<td><input type="number" name="car" required/></td>
</tr>
<tr>

<tr>
<td>enter email</td>
<td><input type="email" name="email" required/></td>
</tr>
<tr>

<tr>
<td>date of birth</td>
<td><input type="date" name="dob1" required/></td>
</tr>

<tr>
<td>gender:</td>
<td><input type="radio" name="gender" value="M" >Male
<input type="radio" name="gender" value="F"
checked="checked">Female<br></td>
</tr>
<tr><td>hobby : </td>
<td><input type="checkbox" checked="checked"/>cricket<br>
<input type="checkbox" />music<br>
<input type="checkbox" />internet surfing</td>
</tr>
<tr><td>select state:</td>
<td><select name="state">
<option value="-1">--Select--</option>
<option value="35">Andaman and Nicobar Islands</option>
<option value="28">Andhra Pradesh</option>
<option value="12">Arunachal Pradesh</option>
<option value="18">Assam</option>
<option value="10" selected="selected">Bihar</option>
<option value="4">Chandigarh</option>
<option value="22">Chhattisgarh</option>
<option value="26">Dadra and Nagar Haveli</option>
<option value="25">Daman and Diu</option>
<option value="7">Delhi</option>
<option value="30">Goa</option>
<option value="24">Gujarat</option>
<option value="6">Haryana</option>
<option value="2">Himachal Pradesh</option>
<option value="1">Jammu and Kashmir</option>
<option value="20">Jharkhand</option>
<option value="29">Karnataka</option>
<option value="32">Kerala</option>
<option value="37">Ladakh</option>
<option value="31">Lakshadweep</option>
<option value="23">Madhya Pradesh</option>
<option value="27">Maharashtra</option>
<option value="14">Manipur</option>
<option value="17">Meghalaya</option>
<option value="15">Mizoram</option>
<option value="13">Nagaland</option>
<option value="21">Odisha</option>
<option value="34">Puducherry</option>
<option value="3">Punjab</option>
<option value="8">Rajasthan</option>
<option value="11">Sikkim</option>
<option value="33">Tamil Nadu</option>
<option value="36">Telangana</option>
<option value="16">Tripura</option>
<option value="9">Uttar Pradesh</option>
 <option value="5">Uttarakhand</option>
<option value="19">West Bengal</option>

</select></td>
</tr>

<tr><td>dob</td>
<td><select name="dd">
<option value="">DD</option>
<option value="01">01</option>
</select>
<select name="mm">
<option value="">MM</option>
<option value="1">january</option>
<option value="2">february</option>
<option value="3">march</option>
</select>
<select name="yyyy">
<option value="">YYYY</option>
<option value="1990">1990</option>
</select>
</td>
</tr>

<tr><td>address</td>

<td><textarea rows="10" cols="30" name="address">MR.</textarea></td>

</tr>
<tr><td>upload image</td><td><input type="file" name="image" /> </td>
</tr>

<tr align="center">
<td colspan="2"><input type="submit" name="submit" value="submit form" />
<input type="reset" name="reset" value="clear" /> </td>
</table>
</form>
[Link]
<a href="[Link]" target="_blank"></a>
</body>
</html>

What is the difference between GET and POST method?

Both GET and POST method is used to transfer data from client to server in HTTP protocol .

GET POST
Form data sent using this method will Form data sent using this method will
be displayed in the URL. not be displayed in the URL.
This method is not secure, because of This method is secure, because of
security we can not send sensitive security we can send sensitive
information like password with this information like password with this
method. method.
Only text data we can send using this With this method we can send any
method. type of data.
Only limited amount of data we can Any amount of data we can send
send using this method. using this method.

Frame in html:
HTML frames are used to divide your browser window into multiple sections where
each section can load a separate HTML document. 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. The <frameset>
tag defines, how to divide the window into frames. The rows attribute of <frameset>
tag defines horizontal frames and cols attribute defines vertical frames. Each frame is
indicated by <frame> tag and it defines which HTML document shall open into the
frame.

Code [Link]
<html>
<head>
<title>frame example</title>
</head>
<frameset rows="20%,80%" framespacing="0" frameborder="0">
<frame src="[Link]" name="top" noresize="noresize" />
<frameset cols="20%,80%">
<frame src="[Link]" name="left" noresize="noresize"/>
<frame src="[Link]" name="right" />
</frameset>

<noframes>
<body> your browser does not support frame</body>
</noframes>
</frameset>
</html>
Code of [Link]
<html>
<head>
<title>demo</title>
</head>
<body bgcolor="yellow">
<h1 align="center">NIELIT PATNA CENTRE</h1>
</body>
</html>
Code of [Link]

<html>
<head>
<title>demo</title>
</head>
<body bgcolor="">
<h1> about us page</h1>
</body>
</html>
Code of [Link]

<html>
<head>
<title>demo</title>
</head>
<body bgcolor="red">
<ul>
<li><a href="[Link]" target="right">HOME</a></li>
<li><a href="[Link]" target="right">about us</a></li>
<li><a href="[Link]" target="right">notice</a></li>
</ul>
</body>
</html>
Code of [Link]

<html>
<head>
<title>demo</title>
</head>
<body bgcolor="">
<h1> welcome to nielit patna</h1>
</body>
</html>
Code of [Link]

<html>
<head>
<title>demo</title>
</head>
<body bgcolor="">
<h1> this is latest news page</h1>
</body>
</html>
Output:

===========================END OF HTML============================
Following is the Complete list of HTML Tag for reference only. (All tag is not in your
syllabus) . Following table is taken from [Link]

Tag name Description

<!-- --> This tag is used to apply comment in an HTML document.

<!DOCTYPE> This tag is used to specify the version of HTML

<a> It is termed as anchor tag and it creates a hyperlink or link.

<abbr> It defines an abbreviation for a phrase or longer word.

<acronym> It defines acronym for a word. (Not supported in HTML5)

<address> It defines the author's contact information of the HTML article

<applet> It defines an embedded Java applet. (Not supported in HTML5)

<area> It defines the area of an image map.

<article> It defines the self-contained content.

<aside> It defines content aside from main content. Mainly represented as

sidebar.

<audio> It is used to embed sound content in HTML document.

<b> It is used to make a text bold.

<base> This tag defines the base URL for all relative URL within the
document.

<basefont> This tag is used to set default font, size and color for all elements of
document. (Not supported in HTML5)

<bdi> This tag is used to provide isolation for that part of text which may
be formatted in different directions from its surrounding text.

<bdo> It is used to override the current text direction.

<big> This tag is used to make font size one level larger than its
surrounding content. (Not supported in HTML5)

<blockquote> It is used to define a content which is taken from another source.

<body> It is used to define the body section of an HTML document.

<br> It is used to apply single line break.

<button> It is used to represent a clickable button

<canvas> It is used to provide a graphics space within a web document.

<caption> It is used to define a caption for a table.

<center> It is used to align the content in center. (Not supported in

HTML5)

<cite> It is used to define the title of the work, book, website, etc.

<code> It is used to display a part of programming code in an HTML

document.

<col> It defines a column within a table which represent common

properties of columns and used with the <colgroup> element.

<colgroup> It is used to define group of columns in a table.

D
<data> It is used to link the content with the machine-readable translation.

<datalist> It is used to provide a predefined list for input option.

<dd> It is used to provide definition/description of a term in description

list.

<del> It defines a text which has been deleted from the document.

<details> It defines additional details which user can either view or hide.

<dfn> It is used to indicate a term which is defined within a

sentence/phrase.

<dialog> It defines a dialog box or other interactive components.

<dir> It is used as container for directory list of files. (Not supported in

HTML5)

<div> It defines a division or section within HTML document.

<dl> It is sued to define a description list.

<dt> It is used to define a term in description list.

<em> It is used to emphasis the content applied within this element.

<embed> It is used as embedded container for external file/application/media,

etc.
F

<fieldset> It is used to group related elements/labels within a web form.

<figcaption> It is used to add a caption or explanation for the <figure> element.

<figure> It is used to define the self-contained content, and s mostly refer as

single unit.

<font> It defines the font, size, color, and face for the content. (Not
supported in HTML5)

<footer> It defines the footer section of a webpage.

<form> It is used to define an HTML form.

<frame> It defines a particular area of webpage which can contain another

HTML file. (Not supported in HTML5)

<frameset> It defines group of Frames. (Not supported in HTML5)

<h1> to It defines headings for an HTML document from level 1 to level 6.

<h6>

<head> It defines the head section of an HTML document.

<header> It defines the header of a section or webpage.

<hr> It is used to apply thematic break between paragraph-level

elements.
<html> It represents root of an HTML document.

<i> It is used to represent a text in some different voice.

<iframe> It defines an inline frame which can embed other content.

<img> It is used to insert an image within an HTML document.

<input> It defines an input field within an HTML form.

<ins> It represent text that has been inserted within an HTML document.

<isindex> It is used to display search string for current document. (Not

supported in HTML5)

<kbd> It is used to define keyboard input.

<label> It defines a text label for the input field of form.

<legend> It defines a caption for content of <fieldset>

<li> It is used to represent items in list.

<link> It represents a relationship between current document and an

external resource.
M

<main> It represents the main content of an HTML document.

<map> It defines an image map with active areas.

<mark> It represents a highlighted text.

<marquee> It is used to insert the scrolling text or an image either horizontally

or vertically. (Not supported in HTML5)

<menu> It is used for creating a menu list of commands.

<meta> It defines metadata of an HTML document.

<meter> It defines scalar measurement with known range or fractional value.

<nav> It represents section of page to represent navigation links.

<noframes> It provides alternate content to represent in browser which does not

support the <frame> elements. (Not supported in HTML5)

<noscript> It provides an alternative content if a script type is not supported in

browser.

<object> It is used to embed an object in HTML file.

<ol> It defines an ordered list of items.

<optgroup> It is used to group the options of a drop-down list.

<option> It is used to define options or items in a drop-down list.

<output> It is used as container element which can show result of a

calculation.

<p> It represents a paragraph in an HTML document.

<param> It defines parameter for an <object> element

<picture> It defines more than one source element and one image element.

<pre> It defines preformatted text in an HTML document.

<progress> It defines the progress of a task within HTML document.

Q
<q> It defines short inline quotation.

<rp> It defines an alternative content if browser does not supports ruby

annotations.

<rt> It defines explanations and pronunciations in ruby annotations.

<ruby> It is used to represent ruby annotations.

S
<s> It render text which is no longer correct or relevant.

<samp> It is used to represent sample output of a computer program.

<script> It is used to declare the JavaScript within HTML document.

<section> It defines a generic section for a document.

<select> It represents a control which provides a menu of options.

<small> It is used to make text font one size smaller than document?s base
font size.

<source>> It defines multiple media recourses for different media element such
as <picture>, <video>, and <audio> element.

<span> It is used for styling and grouping inline.

<strike> It is used to render strike through the text. (Not supported in

HTML5)

<strong> It is used to define important text.

<style> It is used to contain style information for an HTML document.

<sub> It defines a text which displays as a subscript text.

<summary> It defines summary which can be used with <details> tag.

<sup> It defines a text which represent as superscript text.

<svg> It is used as container of SVG (Scalable Vector Graphics).

T

<table> It is used to present data in tabular form or to create a table within

HTML document.

<tbody> It represents the body content of an HTML table and used along with
<thead> and <tfoot>.

<td> It is used to define cells of an HTML table which contains table data

<template> It is used to contain the client side content which will not display at
time of page load and may render later using JavaScript.

<textarea> It is used to define multiple line input, such as comment, feedback,

and review, etc.

<tfoot> It defines the footer content of an HTML table.

<th> It defines the head cell of an HTML table.

<thead> It defines the header of an HTML table. It is used along with

<tbody> and <tfoot> tags.

<time> It is used to define data/time within an HTML document.

<title> It defines the title or name of an HTML document.

<tr> It defines the row cells in an HTML table

<track> It is used to define text tracks for <audio> and <video> elements.

<tt> It is used to define teletype text. (Not supported in HTML5)

U

<u> It is used to render enclosed text with an underline.

<ul> It defines unordered list of items.

<var> It defines variable name used in mathematical or programming

context.

<video> It is used to embed a video content with an HTML document

<wbr> It defines a position within text where break line is possible.

 CSS NOTES

What is css
Cascading Style Sheets (CSS) is a language designed for describing the appearance
of documents written in a markup language such as HTML.

INCLUDING CSS IN A DOCUMENT

You can include CSS in a document in four ways:
1) Including an Embedded Style Sheet

➤ CSS can be included in a document by using embedded style

sheets, which are included between <style> and </style> tags
directly in an HTML document. These tags must appear
between the <head> and </head> tags.

<style type=”text/css”>
body {
font-size:15px ;
}
</ style >

2)External Style Sheets

➤ CSS can be included in its own document and linked to an HTML document by
using the
<link> element.

<link rel=”stylesheet” type=”text/css” href=”[Link]” />

inline styles:
➤ CSS declarations can be applied directly to an element in an HTML
document by using inline styles with the style attribute.

<body style=”font-size:2cm ;”>

import rule of css
➤ CSS can be imported from within either an embedded or linked style sheet by
using an @import rule.

<style type=”text/css”>
@import url([Link]);
</ style >

CSS Comments:
Comment text gives the web author the ability to add notes to a project so he can
recall why he did something in a certain way or to mark the sections of a document.

CSS supports multiline comments that begin with a

forward slash and an asterisk (/*) and terminate with an
asterisk and a forward slash (*/):
<style type=’text/css’>
/*
body, td {
color: blue;
}
*/
</style>

Older browsers simply ignores any CSS rules defined inside the HTML comments.

<style type=’text/css’>
<!-- body, td {
color: blue;
}
-->
</style>

Css also support single line coment like “//”.

For e.g. <style type=’text/css’>
body, td {
//color: blue; only this line is commented.
 font-size:2cm;
}

Selectors:
In CSS, a selector is the HTML element or elements to which a CSS rule is applied.
Grouping Selectors:

When more than one selector appears in the same rule, they are said to be
grouped. You can group multiple selectors together in a single rule by
providing a comma after each selector.

e.g1:
p, h1, h2, h3, h4, h5
{
font-family: Arial;
color: black;
}
In this example an Arial font and black text is applied to <p>, <h1>, <h2>, <h3>,
<h4> and <h5> elements.

CLASS SELECTORS:
The class name selector begins with a dot, followed by the class name itself, which
you choose.
<style type=”text/css”>
.planet {
margin: 10px 0;
padding: 20px 20px 20px 200px;
border: 1px solid #FFF;
background-position: 20px 20px;
background-repeat: no-repeat;
}
</style>
<div class=”planet”>
<h2>Jupiter</h2>
</div>
ID Selectors:
ID selectors are unique identifiers; an ID is meant to be unique, defined once per
document. To reference an ID, you precede the ID name with a hash mark (or
pound sign, #).

<style type=”text/css”>
#jupiter {
background-image: url([Link]);
}
</style>
<div id=”jupiter”>
<h2>Jupiter</h2>
</div>

THE UNIVERSAL SELECTOR:

The universal selector tells the CSS interpreter to apply the CSS rule to
all elements in the document. e.g:

*{
font-family: Algerian;
font-size:20px;
}
This rule is applied to all elements contained in the document.

Contextual/DESCENDANT SELECTORS:
In CSS, descendant means an element that is a child, grandchild,
great grandchild, and so on, of another element. Descendant
selectors apply style based on whether one element contains
another. e.g:
.planet h2 {
font-size:
18px;
margin-top:
0;
}
<div class=”planet” id=”jupiter”>
<h2>Jupiter</h2>
<p>Jupiter is the fifth planet from the sun </p>
<a href=”[Link] about nielit patna.</a>
</div>

<div class=”planet”>
<table>
<tr>
<td>
<h2> Some header text </h2>
</td>
</tr>
</table>
</div>
Both hierarchies are valid for the div h2 descendant selector.

Child selectors OR Direct Child Selectors:

Child selectors apply only to immediate children of the element. It uses the greater
than sign (>) to show the relationship between the two elements.
.planet > h2 {
font-size: 18px;
color:red;
}
<div class=”planet”>
<h2> welcome
1</h1> <table>
<tr>
<td>
<h2> welcome 2 </h2>
</td>
</tr>
</table>
<h2> welcome 3
</h2> </div>

In the above example only welcome1 ,welcome 3 are affected. Here welcome 2 is
not the direct child of div tag.
Attribute selectors:
Attribute selectors are used to apply style sheet declarations based
on the presence of attributes or attribute values of an HTML
element.
Attribute Selector: Presence of an Attribute

[attr]
Represents an element with an attribute name of attr.

This syntax for attribute selectors is:

<style>
input[name] {
border: 2px dashed red;
}
</style>
<body>
<input name=”email” type=”text” size=”25” />
</body>

Select by Attribute Value

[attr=value]
Represents an element with an attribute name of attr and whose value is
exactly "value".
<style>
input[name=”ema
il”] { border: 2px
dashed red;
}
</style>
<body>
<input name=”email” type=”text” size=”25” />
</body>

CSS [attribute~="value"] Selector

[attr~=value]
Represents an element with an attribute name of attr whose value is a
whitespace-separated list of words, one of which is exactly "value".

EXAMPLE:
<style>
h1[rel~="external"] {
color: red;
}
</style>
<body>
<h1 rel="friend external sandwich">Attribute
Space Separated</h1> </body>

CSS [attribute|="value"] Selector

[attr|=value]
 Represents an element with an attribute name of attr. Its value can be exactly
“value” or can begin with “value” immediately followed by “-” It can be used
for language subcode matches.

Example:
<style>
h1[rel|="frie
nd"] {
color: red;
}
</style>
<body>
<h1 rel="friend-external-sandwich">Attribute
Dash Separated</h1> </body>

Selection Based on Attribute Values That Begin with a String

[attr^=value]
Represents an element with an attribute name of attr and whose value is
prefixed by "value". In other hand
The [attribute^="value"] selector is used to select elements whose attribute
value begins with a specified value.

Example:

<style>
h1[align^="cen"]
{
color: red;
}
</style>
<body>
<h1 align=”center”>Attribute Dash Separated</h1>
</body>
Selection Based on Attribute Values That End with a String.

[attr$=value]
Represents an element with an attribute name of attr and whose value is
suffixed by "value". In other hand
The [attribute$="value"] selector is used to select elements whose attribute
value ends with a specified value.

<style>
h1[align^="er"]
{
color: red;
}
</style>
<body>
<h1 align=”center”>Attribute Dash Separated</h1>

<h1 align=”left”>Attribute Dash Separated</h1>

</body>

The above example selects all elements with a class attribute value that ends
with "test"

Selection Based on Attribute Values That Contain a String

[attr*=value]
 Represents an element with an attribute name of attr and whose value contains
at least one occurrence of string "value" as substring.

<style>
h1[class*="gpr"]
{
color: red;
}
</style>
<body>
<h1 class=”testdemo”>welcome to patna center</h1>

<h1 class=”msgprint”>welcome to nielit patna center</h1>

</body>

The above example selects all elements with a class attribute value that
contains "gpr".

All CSS Font Properties

Property value Description
font "font-style font- Sets all the font properties in one declaration,
variant font-weight
font-size font- The properties that can be set, are (in order):
family" "font-style font-variant font-weight font-size font-
family"
font-
Font name Specifies the font family for text
family
font-size Length || Percent Specifies the font size of text
font-style normal|italic|oblique Specifies the font style for text
font- normal | small-caps Specifies whether or not a text should be displayed
variant
Initial value: normal in a small-caps font
font- normal | bold | Specifies the weight of a font
weight bolder | lighter |
100 | 200 | 300 |
400 | 500 | 600 |
700 | 800 | 900
Initial value: normal
Unit Abbreviation Description

Unit Abbreviation Description

In Inches
cm Centimeters
mm Millimeters
pt Points, 1 point is equal to 1/72th of an
inch
pc Picas, 1 pica is equal to 12 points
px Pixels, relative to the viewing device,
for example, a computer monitor.
em Relative to the font-size of the element
(2em means 2 times the size of the
current font)

The text-decoration Property:

Property Value
text-decoration none | [ underline || overline || line-through || blink ] |
Initial value: none
BACKGROUND COLORS and IMAGES.
Property value description
background- Color|| transparent The background-color property is
color used to specify a solid background
color.
Background- <uri> The background-image property
image allows you to reference a URL.
Background- repeat | repeat-x | repeat-y | no- A background is tiled vertically
repeat repeat and horizontally.
The background-repeat property
offers control over this. The
repeat-x keyword limits tiling to
the horizontal or x-axis.
repeat-y keyword limits tiling to
the vertical or yaxis.
repeat keyword tiles the image in
both the x-axis and the y-axis.
The no-repeat keyword turns off
tiling altogether.
Background- [[ <percentage> | <length> | left The background-position property,
position | center | right] as its name implies, allows you to
[<percentage> | <length> | top | control the placement of the
center |bottom]] background.
Background- scroll | fixed use the background-attachment
attachment property to control whether a
background image scrolls
with the content of a web page
background- length|Percent|cover|contain Sets the width and height of the
size background image. The first value
sets the width, the second value
sets the height. If only one value is
given, the second is set to "auto".

background <’background-color’> || The background property combines

<’background-image’> || each of the individual background
<’background-repeat’> properties into a single property
|| <’background-attachment’> ||
<’background-position’>
Eg:

body {
background-color: red;
background-image: url([Link]);
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background: #CCC url([Link]) repeat-x fixed top right;
background-size:100% 100%;
background-size: 80px 60px;
}

The Box Model: Controlling Margins, Borders, Padding, Width,

and Height:
The CSS box model is a collection of properties that defi ne the
amount of space around an element, its dimensions, its
margins, its borders, and padding between the content of the
element and the borders.
 MARGINS:
The margin property applies space outside the box, between the box and the
browser window, or between the box and the other elements in the document.
PROPERTY VALUE
margin [ <length> | <percentage> | auto ]
margin-top <length> | <percentage> | auto
margin-right
margin-bottom
margin-left

Shorthand property of margins:

Box model shorthand properties are always specified in a clockwise order, from the
top: top, right, bottom, and left.

For example: margin: 70px 100px 50px 100px; (margin: top, right, bottom,left)
Means top margin=70px, right margin=100px and bottom margin=50px and left
margin=100px.

margin: 70px 100px 50px; (margin: top, right and left, bottom).
margin: 70px 100px; (margin: top and bottom, right and left).
margin: 70px; (sets all four sides of an element’s margin to the same value i.e 70
px).

BORDERS:
Borders appear between the margin and padding in the box model. Borders put lines
around boxes.

Property Possible value

Border-top-width
Border-right-width thin | medium | thick | <length>
Border-bottom-width
Border-left-width
Border-width
border-top-style border-right- none | hidden |
style border-bottom-style dotted | dashed
border-left-style border-style | solid | double
| groove | ridge
| inset | outset
border-top-color border-right-
color border-bottom-color <color>
border-left-color border-color
border-top border-right
border-bottom border- <border-width> || <border-style> ||
left border <color>
Border-radius border-top-left-radius length|%
border-top-right-radius border-bottom-
right-radius border-bottom-left-radius

Shorthand property of Border:

border-width: 70px 100px 50px 100px; (border-width: top, right, bottom,left)
Means top border width=70px, right border width =100px and bottom border width
=50px and left border width=100px.

border-width: 70px 100px 50px; (border-width: top, right and left, bottom).
border-width: 70px 100px; (border-width: top and bottom, right and left).
border-width: 70px; (sets border width of all four sides of an element’s to the same
value i.e 70 px).

border-style: solid dashed solid dashed; (border-style: top, right, bottom,left)

Means top border style=solid, right border style=dashed and bottom border
style=solid and left border style=dashed.

border-style: solid dashed solid; (border-style: top, right and left, bottom).
border-style: solid dashed; (border-style: top and bottom, right and left).
border-style: solid; (sets border style of all four sides of an element’s to the same
value i.e solid).

border-color: red green blue yellow; (border-color:

top, right, bottom,left)
Means top border color=red, right border color=green, bottom border color=blue
and left border color=yellow.

border-color: red blue green; (border-color: top, right and left,

bottom). border-color: red blue; (border-color: top and bottom,
right and left). border-color: red; (sets border color of all four sides
of an element’s to the same value i.e red).

border-radius: 10px 15px 10px 15px; (border-radius: top-left, top-

right, bottom-right,bottom-left)
Means top-left border radius=10px, top-right border radius=15px, bottom-right
border radius=10px and bottom-left border radius=15px.

border-radius: 10px 10px 15px; (border-radius: top-left, top-right and

bottom-left, bottom-right). border-radius: 10px 10px; (border-radius:
top-left and bottom-right, top-right and bottom-left). border-radius:
10px; (sets border radius of all four corner of an element’s to the same
value i.e 10px).

PADDING:
Padding is the space between the content of an element and its borders.

Property Possible value

padding-top
padding-right
padding- <length> | <percentage>
bottom
padding-left
padding
Shorthand property of padding:
padding: 70px 100px 50px 100px; (padding: top, right, bottom,left)
Means top padding=70px, right padding=100px and bottom padding=50px and left
padding=100px.

padding: 70px 100px 50px; (padding: top, right and left, bottom).
padding: 70px 100px; (padding: top and bottom, right and left).
padding: 70px; (sets padding for all four sides of an element’s to the same value i.e
70 px).

THE LIST-STYLE-IMAGE PROPERTY:

you can use the list-style-image property to

change the marker used for list items.
list-style-image: <uri>
| none; for ex: <html>
<head>
<title>list
demo</title> <style
type=”text/css”>
li {
list-style-image: url([Link]);
}
</style>
</head>
<body>
<h1>List Style Image</h1>
<ul>
<li>List markers 1</li>
<li>list marker 2</li>
</ul>
</body>
</html>
THE LIST-STYLE-TYPE PROPERTY
The list-style-type property changes the style of the bullet or format
of the number that precedes each list item.

Property Possible value

list-style-type disc | circle | square | decimal | decimal-
leading-zero | lower-roman | upper-roman |
lower-greek | lower-latin | upper-latin |
armenian | georgian | none.

Initial value for unordered list: disc

Initial value for unordered list: decimal

THE CURSOR PROPERTY:

Property Possible value

cursor [<uri> ,]* [ auto | crosshair |
default | pointer | move | e-resize |
ne-resize | nw-resize | n-resize |
se-resize | sw-resize | s-resize | w-
resize | text | wait | help | progress
]
Ex: cursor:url([Link]), url([Link]
auto; cursor:move;

VISUAL EFFECTS:

Property Possible value

overflow
overflow-x
visible | hidden | scroll | auto
overflow-y

FLOATING CONTENT:
float property is used to put content side-by-side in a web pages.
Property Possible value
float
left | right | none
Initial value: none

[Link]
[Link] is a css framework.
how to download [Link] .
Download [Link] from this link: [Link]
[Link] is free to use. No license is necessary.
color in [Link] :
w3-color: this class is used to change the background color.
w3-text-color: this class is used to change the color of a text.
Example:
<html>
<head>
<title>css</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<h1 class="w3-yellow">NIELIT PATNA CENTER</h1>
</body>
</html>
Example-2:
<html>
<head>
<title>css</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<h1 class="w3-yellow w3-text-red">NIELIT PATNA CENTER</h1>
</body>
</html>
Output:
Background color is yellow and text color in red.
Button in [Link] framework.
<html>
<head>
<title>[Link] example</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<input type="button" value="SUBMIT" class="w3-button w3-blue w3-xlarge"/>
</body>
</html>

Button size in [Link]:

w3-tiny
w3-small
w3-medium
w3-large
w3-xlarge
w3-xxlarge
w3-xxxlarge
Border of button:
<html>
<head>
<title>[Link] example</title>
<link href="[Link]" rel="stylesheet" type="text/css" >
</head>
<body>
<input type="button" value="SUBMIT" class="w3-button w3-blue w3-border w3-
border-red w3-round-xxlarge"/>
</body>
</html>
Following class is used to round the button:
w3-round
w3-round-large
w3-round-xlarge
w3-round-xxlarge
Example:
<html>
<head>
<title>[Link] example</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<button class="w3-button w3-block w3-yellow">Home</button>
<input type="button" class="w3-button w3-block w3-blue"
value="HOMEPAGE"/>
<a href="[Link] class="w3-button w3-yellow w3-round-
xxlarge">google</a>
<button class="w3-button w3-circle w3-yellow">A</button>
</body>
</html>
[Link] tables:

<html>
<head>
<title>[Link] example</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<table class="w3-table w3-striped w3-border w3-border-red">
<tr>
<td>roll</td>
<td>name</td>
<td>marks</td>
</tr>
<tr>
<td>1</td>
<td>abcd</td>
<td>67</td>
</tr>
<tr>
<td>2</td>
<td>vbvbvb</td>
<td>90</td>
</tr>
<tr>
<td>2</td>
<td>vbvbvb</td>
<td>90</td>
</tr>
</table>
</body>
</html>
Example2:
<html>
<head>
<title>[Link] example</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<table class="w3-table w3-striped w3-border w3-border-red w3-hoverable ">
<tr class="w3-hover-red">
<td>roll</td>
 <td>name</td>
<td>marks</td>
</tr>
<tr class="w3-hover-blue">
<td>1</td>
<td>abcd</td>
<td>67</td>
</tr>
<tr class="w3-hover-green">
<td>2</td>
<td>vbvbvb</td>
<td>90</td>
</tr>
<tr class="w3-hover-blue">
<td>2</td>
<td>vbvbvb</td>
<td>90</td>
</tr>
</table>
</body>
</html>
class="w3-center"
class="w3-right-align"
class="w3-left-align"
Example:
<html>
<head>
<title>[Link] example</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<table class="w3-table w3-striped w3-border w3-border-red w3-hoverable ">
<tr class="w3-hover-red">
<td>roll</td>
<td >name</td>
<td>marks</td>
</tr>
<tr class="w3-hover-blue">
<td>1 fdhgfhdgfdh </td>
<td >abcdjghg fgjggdj</td>
<td>67</td>
</tr>
<tr class="w3-hover-green">
<td>2 hgjhgjfhgfh</td>
<td>vbvbvb</td>
<td>90</td>
</tr>
<tr class="w3-hover-blue">
<td>2</td>
 <td>vbvbvb</td>
<td>90</td>
</tr>
</table>
</body>
</html>

font in [Link]:

by default font size is 15px.

default font is verdana

<h1></h1> 36px
<h2></h2> 30px
<h3></h3> 24px
<h4></h4> 20px
<h5></h5> 18px
<h5></h5> 18px
<h6></h6> 16px

<html>
<head>
<title>[Link] example</title>
<link href="[Link]" rel="stylesheet" type="text/css" >

<style>
h1{
font-size:45px;
}
</style>
</head>
<body>
<p class="w3-xxxlarge">welcome to nielit</p>
</body>
</html>
class="w3-tiny"
class="w3-small"
class="w3-medium"
class="w3-large"
class="w3-xlarge"
class="w3-xxlarge"
class="w3-xxxlarge"
class="w3-jumbo"

[Link] CONTAINER:
<html>
<head>
<title>[Link] example</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<div class="w3-container w3-yellow">
welcome to nielit patna

</div>
</body>
</html>

w3-container class add 16px padding in left and right side.

ex:
<html>
<head>
<title>[Link] example</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<div class="w3-panel w3-leftbar w3-yellow w3-border-green ">
<p>welcome to nielit patna</p>

</div>
hello
</body>
</html>

w3-panel class add 16px margin to top and bottom, and 16px padding to left
and right in a html element.
w3-leftbar
w3-rightbar
w3-topbar
w3-bottombar

GRID SYSTEM IN [Link]:

<html>
<head>
<title>[Link] example</title>

<link href="[Link]" rel="stylesheet" type="text/css" >

</head>
<body>
<div class="row">
<div class="w3-yellow w3-col s12 m4 l4">
 A
</div>

<div class="w3-green w3-col s12 m4 l4">

B
</div>

<div class="w3-blue w3-col s12 m4 l4">

C
</div>
</div>
</body>
</html>
 JAVASCRIPT
 JavaScript is a client side scripting language.
 extension of JavaScript file is .js
 JavaScript is a case sensitive scripting language.
 JavaScript can be written inside html page.
 JavaScript and Java are completely different languages, both in concept and
design.
 JavaScript code will be written inside <script></script> tag in a html page.

How to include external JavaScript code in a html page.

<html>
<head>
<title>demo</title>
<script src="[Link]" type="text/javascript"></script>
</head>
<body>

</body>
</html>

Q: write a JavaScript code such that when mouse is over a moving text then it
stop moving and when mouse is out from the moving element then it is start
moving again.
CODE:
<html>
<head>
<title>demo</title>
</head>
<body>
<marquee onmouseover="[Link]();" onmouseout="[Link]()">nielit patna
center</marquee>
</body>
</html>
onmouseover: This javascript event will be executed when mouse is over an
html element.
onmouseout: this javascript event will be executed when mouse is going out of
an html element.
Function in javascript:
A function is a block of code that performs a specific task.
A function is declared using the function keyword.
Syntax:
function function_name()
{
//block of code to be executed.

Example:
<html>
<head>
<title>demo</title>
<script>
 function fun1()
{
alert("nielit");
}
</script>
</head>
<body>
<input type="button" value="click here" onclick="fun1()" />
</body>
</html>

The return statement can be used to return the value to a function call.
The return statement denotes that the function has ended. Any code after return is
not executed.

Q:write a javascript code to add two number using javascript and display
the result using alert box.
<html>
<head>
<title>demo</title>
<script>
function fun1()
{
n1=parseInt([Link]("box1").value);
n2=parseInt([Link]("box2").value);
//alert("value of n1="+n1+"value of n2="+n2);
 sum=n1+n2;
alert("result="+sum );

</script>
</head>
<body>
enter 1st num<input type="text" id="box1" />
enter 2nd num<input type="text" id="box2" />
<input type="button" value="click here" onclick="fun1()" />
</body>
</html>

Q:write a javascript code to add two number using javascript and display
the result into text box.
<html>
<head>
<title>demo</title>
<script>
function fun1()
{
n1=parseInt([Link]("box1").value);
n2=parseInt([Link]("box2").value);
//alert("value of n1="+n1+"value of n2="+n2);
 sum=n1+n2;
[Link]("box3").value=sum;

</script>
</head>
<body>
enter 1st num<input type="text" id="box1" />
enter 2nd num<input type="text" id="box2" />
<input type="button" value="click here" onclick="fun1()" /><br />
result<input type="text" id="box3" />
</body>
</html>

Q:write a javascript code to add two number using javascript and display
the result inside H1 tag.

<html>
<head>
<title>demo</title>
<script>
function fun1()
{
n1=parseInt([Link]("box1").value);
n2=parseInt([Link]("box2").value);
 //alert("value of n1="+n1+"value of n2="+n2);
sum=n1+n2;
[Link]("result").innerHTML="result ="+sum;

</script>
</head>
<body>
enter 1st num<input type="text" id="box1" />
enter 2nd num<input type="text" id="box2" />
<input type="button" value="click here" onclick="fun1()" /><br />

<h1 id="result"></h1>
</body>
</html>

Form validation in javascript:

<html>
<head>
<title>demo</title>
<script>
function fun1()
{
 n1=[Link]("box1").value;
n2=[Link]("box2").value;
n1_final=[Link]();
n2_final=[Link]();
if(n1_final=="")
{
alert("name field cannot be left blank");
return false;
}
else if(n1_final.length<2)
{
alert("name is too small, enter valid name");
return false;
}
else if(n1_final.length>20)
{
alert("name is too big, enter valid name");
return false;
}
else if(n2_final=="")
{
alert("mobile number can not left blank");
return false;
}
else if(n2_final.length!=10)
 {
alert("enter 10 digit valid mobile number");
return false;

</script>
</head>
<body>
<form method="post" action="[Link]">
enter name<input type="text" id="box1" /><br>
enter mobile<input type="text" id="box2" maxlength="10"/>
<input type="submit" value="click here" onclick="return fun1()" /> <br />
</form>
<h1 id="result"></h1>
</body>
</html>

Comparison operator or relational operator in javascript.

== Equal to
!= Not equal to
< Less than
> greater than
<= Less than or equal to
>= Greater than or equal to

CONFIRM BOX IN JAVASCRIPT:

The confirm() method displays a dialog box with a specified message, along
with an OK and a Cancel button.

syntax:confirm(message);
This method return true if user click on ok button, and return false if user click
on cancel button.
Example:
<html>
<head>
<title>demo</title>
<script>
function fun1()
{
n1=[Link]("box1").value;
n2=[Link]("box2").value;

res=confirm("are you sure");

if(res==true)
 {
return true;
}
else
{
return false;
}

</script>
</head>
<body>
<form method="post" action="[Link]">
enter name<input type="text" id="box1" /><br>
enter mobile<input type="text" id="box2" maxlength="10"/>
<input type="submit" value="click here" onclick="return fun1()" /> <br />
</form>
</body>
</html>

isNaN(): This function is used to check whether a given value is number or not.

This function return true if value is not a number, and return false if value is a
number.
Example:
<html>
<head>
<title>demo</title>
<script>
function fun1()
{
n1=[Link]("box1").value;

if(isNaN(n1)==true)
{

alert("this text box contain character.");

return false;
}
else
{
alert("this text box contain number only.");
return false;

</script>
</head>
<body>
<form method="post" action="[Link]">
enter number<input type="text" id="box1" maxlength="10"/>
<input type="submit" value="click here" onclick="return fun1()" /> <br />
</form>
</body>
</html>
 AngularJS
 AngularJS is a JavaScript framework.
 AngularJS is open source( it is completely free).
 It was developed in 2009 by Misko Hevery and Adam Abrons.
To download AngularJS:

Visit the website: [Link]

and click on download angularjs button.

Or you can use the AngularJS CDN: [Link]

How to include AngularJS in a web page:

<html>

<head>

<title>demo</title>

<script src="[Link]

</head>

<body>

</body>

</html

OR
<html>

<head>

<title>demo</title>

<script src="[Link]" type="text/javascript"></script>

</head>

<body>

</body>

</html>
Q: write a Code such that when a user type in the text box same is displaying on
the web page simultaneously using JavaScript.
<html>

<head>

<title>angularJS</title>

<script src="[Link]"></script>

<script>

function view()

var a=[Link]("box1").value;

[Link]("d").innerHTML=a;

</script>

</head>

<body>

enter NAme<input type="text" id="box1" onkeyup="view()"/>

<h1 id="d"> </h1>

</body>

</html>

Q: write a Code such that when a user type in the text box same is displaying on
the web page simultaneously using AngularJS.

<html>

<head>

<title>angularJS</title>

<script src="[Link]
</head>

<body>

<div ng-app="">

enter Name<input type="text" ng-model="name" />

<h1>{{name}} </h1>

</div>

</body>

</html>

Explanation:

<div ng-app=””>…</div> indicates that AngularJS script is used inside this tags.

<script src="[Link]

adds AngularJS framework into your current application/page.

“ng-model = “name” binds the inputted value from HTML control to

“name”.

{{name}} is synchronized with the “name” in ng-model="name"

{{name}}: displays the value of “name”.

Expression in AngularJS
Syntax:

{{expression}}

 Expressions are used to bind application data to HTML.

 Expressions are written inside double curly braces for example {{ expression}}.
 {{expression}} can calculate the value of the expression, and show the result.

Example:

<html>

<head>

<title>angularJS</title>

<script src="[Link]"></script>
</head>

<body >

<div ng-app="">

<h1> {{2+3+4}}</h1>

</div>

</body>

</html>

Output:

9 will be display inside h1 tag.

Example2:

<html>

<head>

<title>angularJS</title>

<script src="[Link]"></script>

</head>

<body >

<div ng-app="">

<h1> {{“hello”+”world”}}</h1>

</div>

</body>

</html>

Output:

Hello world will be display inside h1 tag.

Example3: write a code to add two number using AngularJS, input is taken from the html form.

<html>

<head>

<title>angularJS</title>
<script src="[Link]"></script>

</head>

<body ng-app="">

<div ng-init="">

first number<input type="text" ng-model="n1"/><br />

second number<input type="text" ng-model="n2"/>

<h1> {{(n1-0)+(n2-0)}}</h1>

</div>

</body>

</html>

Alternate Method:

<html>

<head>

<title>angularJS</title>

<script src="[Link]"></script>

</head>

<body ng-app="">

<div >

first number<input type="number" ng-model="n1"/><br />

second number<input type="number" ng-model="n2"/>

<h1 ></h1>

</div>

</body>

</html>

ng-bind directive:
this directive is used to replace the content of an html element with the value of given variable or
expression.

Example:

<html>

<head>

<title>angularJS</title>

<script src="[Link]"></script>

</head>

<body ng-app="">

<div >

first number<input type="number" ng-model="n1"/><br />

second number<input type="number" ng-model="n2"/>

<h1 ng-bind="n1+n2"></h1>

</div>

</body>

</html>

Output:

After addition of the text box content result will be displayed inside H1 tag.

===============END OF AngularJS=================