Unit-1

1)Details about web browser

Ans- Web Browser is an application software that allows us to view and explore information on the web.
User can request for any web page by just entering a URL into address bar.

Web browser can show text, audio, video, animation and more. It is the responsibility of a web browser
to interpret text and commands contained in the web page.

Earlier the web browsers were text-based while now a days graphical-based or voice-based web
browsers are also available

Architecture

There are a lot of web browser available in the market. All of them interpret and display information on
the screen however their capabilities and structure varies depending upon implementation. But the
most basic component that all web browser must exhibit are listed below:

 Controller/Dispatcher
 Interpreter
 Client Programs

Controller works as a control unit in CPU. It takes input from the keyboard or mouse, interpret it and
make other services to work on the basis of input it receives.

Interpreter receives the information from the controller and execute the instruction line by line. Some
interpreter are mandatory while some are optional For example, HTML interpreter program is
mandatory and java interpreter is optional.

Client Program describes the specific protocol that will be used to access a particular service. Following
are the client programs tat are commonly used:

 HTTP
 SMTP
 FTP
 NNTP
 POP

There are four leading web browsers – Internet Explorer, Google Chrome, Mozilla Firefox and Safari,
but there are many others browsers available.
Internet Explorer-Internet Explorer (IE) is a product from software giant Microsoft. This is the most
commonly used browser in the universe. This was introduced in 1995 along with Windows 95 launch
and it has passed Netscape popularity in 1998.

Google Chrome-This web browser is developed by Google and its beta version was first released on
September 2, 2008 for Microsoft Windows. Today, chrome is known to be one of the most popular web
browser with its global share of more than 50%.

Mozilla Firefox-Firefox is a new browser derived from Mozilla. It was released in 2004 and has grown to
be the second most popular browser on the Internet.

Safari-Safari is a web browser developed by Apple Inc. and included in Mac OS X. It was first released as
a public beta in January 2003. Safari has very good support for latest technologies like XHTML, CSS2 etc.

2)Font properties with example

Ans-

Property Description Example

Font This property is used as <p style = “font: italic small-caps

shorthand to specify a number bold 15px georgia;"ok>
of other font properties.

Font family <style type="text/css">

This property is used to change
p{
the face of a font.
font-family: "Times New
Roman", Times, serif;
}
p{
font-family: Arial, Helvetica,
sans-serif;
}
</style>
Font color <style type="text/css">
This property is used to specify
h4 {
the color of text
color: red;
}
h5 {
color: #9000A1;
}
h6 {
color: rgb(0, 220, 98);
}
</style>
Font size <style type="text/css">
This property is used to increase
p{
or decrease the size of a font
font-size: 120%;
}
p{
font-size: 10px;
}
p{
font-size: large;
}
</style>
Font style This property is used to make a <style type=”text/css”>
font italic or oblique. p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
Font variant This property is used to create a <style type=”text/css”>
small-caps effect. p.small {
font-variant: small-caps;
}
</style>
Font weight This property is used to increase <style type=”text/css”>
or decrease how bold or light a p.normal {
font appears. font-weight: normal;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 900;
 }
</style>

3)Table tags and explain examples

Ans-

4)CSS box module and fig

Ans- All HTML elements can be considered as boxes. In CSS, the term "box model" is used when
talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins,
borders, padding, and the actual content. The image below illustrates the box model:
Explanation of the different parts:

Content – The content of the box, where text and images appear

Padding – Clears an area around the content. The padding is transparent

Border – A border that goes around the padding and content

Margin – Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

5)Different level of style sheet

Ans- The 3 different level of style sheet are:-

 Inline CSS-Inline CSS contains the CSS property in the body section attached with element is
known as inline CSS. This kind of style is specified within an HTML tag using the style attribute
Example:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>

 Internal/ Embedded CSS-This can be used when a single HTML document must be styled
uniquely. The CSS rule set should be within the HTML file in the head section i.e the CSS is
embedded within the HTML file.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 External CSS-External CSS contains separate CSS file which contains only style property with the
help of tag attributes (For example class, id, heading, … etc). CSS property written in a separate
 file with .css extension and should be linked to the HTML document using link tag. This means
that for each element, style can be set only once and that will be applied across web pages.
Example:
<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”styles.css”>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

6)Web Server and Internet

Ans- Web Server

Internet

The Internet is a vast network that connects computers all over the world. Through the Internet, people
can share information and communicate from anywhere with an Internet connection.

History of internet

 The first workable prototype of the internet came in the late 1960s with the creation of
ARPANET, or the advanced research projects agency network. Originally funded by the U.S.
Department of defense.
 The internet evolved from basic idea of arpanet for interconnecting computers.
 Initially research organization and universities used it to share and exchange the information.
 In 1980 ,internet available for commercial purpose.

Basic services provided by the internet

 Electronic mail
 File Transfer protocol
 Telnet
 Usenet news
 HTTP-Hyper text Transfer protocol
 Transmission control protocol(TCP)

Uses of internet

 Entertainment
 Education
  Social networking
 Cashless transactions
 Online business (E-commerce)

Search Engines

 Google
 Microsoft bing
 Yahoo
 Baidu
 YouTube

7)Selector and types of selector

Ans- Selector is a pattern of elements and other terms that tell the browser which HTML elements
should be selected to have the CSS property values inside the rule applied to them.

Types of selector

 Element selector- The element selector selects HTML elements based on the element name (or
tag) for example p, h1, div, span, etc.

Example:
p{
Text-align: center;
Color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
Text-align: center;
Color: blue;
}
</style>
</head>
<body>
<p id=”para1”>Hello Javatpoint.com</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

 Class Selector-The class selector selects HTML elements with a specific class attribute.

In the example below, all HTML elements with class=”center” will be red and center-aligned:
 Example:
Center {
Text-align: center;
Color: red;
}
<!DOCTYPE html>
<html>
<head>
<style>
.center {
Text-align: center; color: red;
}
</style>
</head>
<body>
<h1 class=”center”>Red and center-aligned heading</h1>
<p class=”center”>Red and center-aligned paragraph.</p>
</body>
</html>

You can also specify that only specific HTML elements should be affected by a class.

In the example below, only <p> elements with class=”center” will be center- aligned:

Example:

p.center

Text-align: center;

Color: red;

<!DOCTYPE html>

<html>

<head>

<style> p.center {

Text-align: center;

Color: red;

}
</style>

</head>

<body>

<h1 class=”center”>This heading will not be affected</h1>

<p class=”center”>This paragraph will be red and center- aligned.</p>

</body>

</html>

 Id selector-The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element should be unique within a page, so the id selector is used to select one
unique element

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

The style rule below will be applied to the HTML element with id="para1":

All the elements having that id will be formatted according to the defined rule.

Example:
#para1
{
Text-align: center;
Color: red;
}
<!DOCTYPE html>
<html>
<head>
<style> #para1 {
Text-align: center;
Color: red;
}
</style>
</head>
<body>

<p id=”para1”>Hello World!</p>

 <p>This paragraph is not affected by the style.</p>

</body>
</html>

 Grouping selector-The grouping selector selects all the HTML elements with the same style
definitions

Look at the following CSS code (the h1, h2, and p elements have the same style definitions):

Example:

h1 {

Text-align: center;

Color: red;

h2 {

Text-align: center;

Color: red;

p{

Text-align: center;

Color: red;

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

h1, h2, p {

Text-align: center;

Color: red;

<!DOCTYPE html>

<html>

<head>

<style> p.center {
Text-align: center; color: red;

p.large {

font-size: 300%;

</style>

</head>

<body>

<h1 class=”center”>This heading will not be affected</h1>

<p class=”center”>This paragraph will be red and center- aligned.</p>

<p class=”center large”>This paragraph will be red, center- aligned, and in a large

Font-size.</p>

</body>

</html>

8) What is html and define

Ans- HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to
develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first
standard HTML specification which was published in 1995.

 HTML 4.01 was a major version of HTML and it was published in late 1999.
 Though HTML 4.01 version is widely used but currently we are having HTML-5 version which is
an extension to HTML 4.01, and this version was published in 2012.

HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web
Pages.

 Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus,
the link available on a webpage is called Hypertext.
  As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-
up" a text document with tags that will tell a Web browser on how to structure it to display

HTML is a MUST for students as well as working professionals to become a great Software Engineer
specially when they are working in Web Development Domain. Here some of the key advantages of
learning HTML:

1. Create Web site - You can create a website or customize an existing web template if you
know HTML well.
2. Become a web designer - If you want to start a carrier as a professional web designer,
HTML and CSS designing is a must skill.
3. Learn other languages - Once you understands the basic of HTML then other related
technologies like javascript, php, or angular are become easier to understand.

9)Applications of html
Ans- HTML is one of the most widely used language over the web. here going to list few of them

 Web pages development - HTML is used to create pages which are rendered over the web.
Almost every page of web is having html tags in it to render its details in browser.
 Internet Navigation - HTML provides tags which are used to navigate from one page to another
and is heavily used in internet navigation.
 Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs, desktop or
laptops owing to responsive design strategy.
 Offline support- HTML pages once loaded can be made available offline on the machine without
any need of internet.
 Game development- HTML5 has native support for rich experience and is now useful in gaming
development arena as well.

10)List properties with example

Ans- The CSS list properties allow you to:

 Set different list item markers for ordered lists

 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items