Scribd
Upload
2K views

Web Application Class XI Unit 2 Notes

web app notes class 11

Uploaded by

parmarshivansh06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2K views

Web Application Class XI Unit 2 Notes

web app notes class 11

Uploaded by

parmarshivansh06
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

Web Application (Code-803)

UNIT - 2
WEBSITE DEVELOPMENT USING HTML AND CSS
What is Website?
A website is a collection of web pages which contains the information about the
particular organization or institution or any product. It contains the related content
that is identified by a common domain name and published on any one web server.
Few examples of such websites are bing.com, studykeeda.in, wikipedia.org, google.com,
amazon.com etc.

Languages used for website development


The most common programming languages used to develop websites are:
HTML(HyperText Markup Language), JavaScript, Cascading Style Sheets and PHP:
Hypertext Preprocessor. Some of these can be used as an extension of the
existing languages but some can be used entirely separate from the other
languages to create a dynamic or static website.

Types of Websites: Static and dynamic website


Static website
A static website is stored on the web server in the format that has to be sent to a
client web browser. It is mainly coded in Hypertext Markup Language (HTML)
and Cascading Style Sheets (CSS) to control the appearance of the website. These
are non-interactive websites which are only used to display the same information to
all visitors. If any changes are to be made then website owner can do it.It is a
manual process to edit the text, photos and other content and may require basic
website design skills and software. After the changes again it is published on the
same domain. Website containing the basic information or a brochure website are
often come under this category as these websites contains the present pre-defined,
static information to the user.
Dynamic website
A dynamic website is one that changes or customizes itself frequently and
automatically. Server-side dynamic pages are generated "on the fly" by computer
code that produces the HTML (CSS are responsible for appearance and thus, are
static files). There are a wide range of software systems, such as CGI, Java
Servlets and Java Server Pages (JSP), Active Server
Pages and ColdFusion (CFML) that are available to generate dynamic web systems
and dynamic sites. Various web application frameworks and web template
systems are available for general-use programming
languages like Perl, PHP, Python and Ruby to make it faster and easier to create
complex dynamic websites.

Visit Us www.studykeeda.in
Q: What is Notepad and where do I get it?
A: Notepad is the default Windows text editor. On most Windows systems, click your
Start
button and choose Programs then Accessories. Its icon is a little blue notebook.
Select (in the preferences window) Plain text instead of Rich text and
then select Ignore rich text commands in HTML files. This is very important because if
you don’t do this HTML codes probably won’t work.

What is an Html File?


Ans: The documents themselves are plain text files with special “tags” or codes that a
web browser uses to interpret and display information on your computer screen.
 HTML stands for Hyper Text Markup Language
 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension

How to Create HTML File with example


Open your text editor and type the following text:

<html>
<head>
<title>My First Webpage</title>
</head>
<body>
This is my first homepage.
<b>This text is bold</b>
</body>
</html>

1. Save the file as mypage.html.


2. Start your Internet browser.
3. Select Open (or Open Page)in the File menu of your browser. A dialog box
will appear.
4. Select Browse (or Choose File) and locate the html file you just created -
mypage.html - select it and click Open.
5. Now you should see an address in the dialog box, for example
C:\MyDocuments\
6. mypage.html.
7. Click OK, and the browser will display the page.

How many type of heading in html

Visit Us www.studykeeda.in
Ans : Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading
while <h6> defines the smallest.
<h1>………………..</h1>

<h2>………………..</h2>

<h3>………………..</h3>

<h4>………………..</h4>

<h5>………………..</h5>

<h6>………………..</h6>

which tag we used for create horizontal line in web page?


Ans: <hr> tag we used for create horizontal line in our web page.

Paragraphs
Paragraphs are defined with the <p> tag. Think of a paragraph as a block of text.
You can use the align attribute with a paragraph tag as well.

Line Breaks
The <br> tag is used when you want to start a new line, but don’t want to start a new
paragraph. The <br> tag forces a line break wherever you place it. It is similar to
single spacing in a document.
Note:- The <br> tag has no closing tag.

Horizontal Rule
The <hr> element is used for horizontal rules that act as dividers between sections,
like this:
The horizontal rule does not have a closing tag. It takes attributes such as align and
width.

Other HTML tags


<abbr> -> Defines an Abbreviation
<address> -> Defines an address element
<cite> -> Defines citation
<blockquote> -> Defines a long quotation
<em> -> Defines a emphasized text
<sup> -> Defines a superscripted text
<sub> -> Defines a subscripted text

Visit Us www.studykeeda.in
Important Full Forms
W3C =>World Wide Web Consortium
CSS => Cascading Style Sheets
HTML => Hyper Text Markup Language
HTTP => Hyper Text Transfer Protocol
Current version of HTML is HTML5
Current Version of CSS is CSS3

Important Question wise notes


1: What are the pre requisites to learn the basics of HTML?
Ans : Prerequisites to learn basics of HTML is need a text editor, such as Notepad and an
Internet browser, such as Internet Explorer or Netscape Navigator.

2: How do you define a HTML file?


Ans: The documents themselves are plain text files with special “tags” or codes that a
web browser uses to interpret and display information on your computer screen.
 HTML stands for Hyper Text Markup Language
 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension

3: What is the tag for making a comment?


Ans: The comment tag is used to insert a comment in the HTML source code. A
comment can be placed anywhere in the document and the browser will ignore
everything inside the brackets. You can use comments to write notes to yourself, or write
a helpful message to someone looking at your source code.
Tag for comment is <!-- and -->.

4: What dose <cite> and <pre> tag mean?


Ans: <cite> tag defines the citation and <pre> tag defines preformatted text.

5: What is the syntax to define background color in HTML?


Ans: Syntax to define the background color is <body bgcolor=”red”>

6: Explain the procedure to view source code in Mozilla Firefox, Google Chrome
&Internet Explorer?
Ans: To view the source code for this page, in your browser window, select View and
then select Source.

7: List out any three popular web browsers?


Ans: Chrome, Mozila Firefox, Internet Explorer.

Visit Us www.studykeeda.in
8: What do you mean by an anchor tag?
Ans: The <a> anchor tag to create a link to another document or web page.
There are two types of linking in HTML- Internal and External.
Internal Linking
A webpage is linked within the same web page. It is done by using an absolute path or
relative path of a link. The internal link name is followed by the hash sign(#).By
assigning an
id to refer section of the webpage, which is referred to as an internal link to the same
page.
Syntax:
<a name= “#Text” ></a>
<a hreaf=”#Text”></a>
External Linking
The Anchor Tag and the “href” Attribute
An anchor can point to any resource on the Web: an HTML page, an image, a sound
file, a movie, etc.
The syntax of creating an anchor:
<a href=“url”>Text to be displayed</a>

9: How do you insert an image and create a table in the HTML page?
Ans: We used tag for insert the image in web page are
<img src=”image_name.jpg”>
Tag for create the table are
<table width=”50%” border=”1” cellpadding=”2”>

<thead>
<th>Name</th>
<th>Mobile</th>
</thead>
<tr>
<td>Preeti</td>
<td>9250566452</td>
</tr>
</table>

10: What is the tag to insert a single line break?


Ans: <br>

11: What does W3C stand for?


Ans: World Wide Web Consortium

12: Fill in the blanks

Visit Us www.studykeeda.in
(a) Word processors like Microsoft word should be avoided.
(b) The <body> tells the web browser how to display the page
(c) <code>is the tag used for defining the Sample computer code
(d) Acronym for HTTP Hyper Text Transfer Protocol.
(e) Acronym for HTML Hyper Text Markup Language.

Practical Work:

Coding

<html>
<head><title> My page </title></Head><body>
<H1><U>ADMISSSION ENQUIRY FORM </u></h1>
<form method=”post” action= "maoilto:[email protected]"><b>Name
</b><Input type=”text” name="st_name"><br>
<b>Gender </b>
<input type=”radio” name="gender" value="Male"> Male
<input type=”radio” name="gender" value="Female"> Female <Br>

Visit Us www.studykeeda.in
<b>E- mail </B><Input type=Text Name ="email"><br>
SELECT SUBJECTS: <BR>
<input type=”checkbox” value="Science"> Science <Input type=”checkbox”
value="Commerce"> Commerce <Input type=”checkbox” value="Arts"> Arts
<br>
Comment<Br>
<textarea name="comment" Rows=5 cols=50></textarea><br>
<input type=”submit” value ="Send">
<input type=”reset” value ="Clear">
</form>
</body>
</html>

Section 2 CSS

1. Why do we use CSS? What are its basic advantages?


Cascading Style Sheets (CSS) describe how documents are presented on screens,
in print. Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various
attributes for the HTML tags. Using CSS, you can specify a number of style
properties for a given HTML element. Each property has a name and a value,
separated by a colon (:). Each property declaration is separated by a semi-colon (;).
Advantages of CSS are:
 CSS saves time – You can write CSS once and then reuse same sheet in
multipleHTML pages. You can define a style for each HTML element and
apply it to asmany Web pages as you want.
 Pages load faster – If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply to all the
occurrences of that tag. So less code means faster download times.
 Easy maintenance – To make a global change, simply change the style, and
all elements in all the web pages will be updated automatically.
 Superior styles to HTML – CSS has a much wider array of attributes than
HTML so you can give far better look to your HTML page in comparison of
HTML attributes.
 Multiple Device Compatibility – Style sheets allow content to be optimized
for more than one type of device. By using the same HTML document,
different versions of a website can be presented for handheld devices such as
PDAs and cell phones or for printing.
 Global web standards – Now HTML attributes are being deprecated and it is
being recommended to use CSS. So it’s a good idea to start using CSS in all
the HTML pages to make them compatible to future browsers.

2. What are the ways in which you can use CSS in your HTML document?
Ans: We can use CSS in three ways in your HTML document:
 External Style Sheet – Define style sheet rules in a separate .css file and

Visit Us www.studykeeda.in
then include that file in your HTML document using HTML <link> tag.
 Internal Style Sheet – Define style sheet rules in header section of the HTML
document using <style> tag.
 Inline Style Sheet – Define style sheet rules directly along with the HTML
elements using style attribute. Let’s see all the three cases one by one with
the help of suitable examples.

3. What are inline style sheets?


Ans: You can apply style sheet rules directly to any HTML element using style attribute of the
relevant tag. This should be done only when you are interested to make a particular change in
any HTML element only. Rules defined inline with the element overrides the rules defined in an
external CSS file as well as the rules defined in <style> element.
Code example of inline style sheet
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style=“color:red;”>This is red</p>
<p style=“font-size:20px;”>This is thick</p>
<p style=“color:green;”>This is green</p>
<p style=“color:green;font-size:20px;”>This is thick and green</p>
</body>
</html>

4. How are internal style sheets used?


Ans: If you want to apply Style Sheet rules to a single document only then you can include those
rules in header section of the HTML document using <style> tag.
Rules defined in internal style sheet override the rules defined in an external CSS
file.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type=“text/css”>
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}

Visit Us www.studykeeda.in
</style>
</head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is thick</p>
<p class=“green”>This is green</p>
<p class=“thick green”>This is thick and green</p>
</body>
</html>

5. Does the use of CSS saves time?


Ans: Yes CSS saves time.

6. How are external style sheets used?


Ans: If you need to use your style sheet to various pages, then it’s 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.
First create css file
.red{
color: red;
}
.thick{
font-size:20px;
}
.green{
color:green;
}
Save file as style.css and include this file into your html file

HTML file example with including external style sheet.


<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel=“stylesheet” type=“text/css”href=“/html/stml/style.css”>
</head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is
thick</p>
<p class=“green”>This is green<p>
<p class=“thick green”>This is thick and green</p>
</body>
</html>

7. State difference between inline, internal & external style sheets?

Visit Us www.studykeeda.in
Ans:
External Style Sheet – Define style sheet rules in a separate .css file and
then include that file in your HTML document using HTML <link> tag.
Internal Style Sheet – Define style sheet rules in header section of the HTML
document using <style> tag.
Inline Style Sheet – Define style sheet rules directly along with the HTML
elements using style attribute.

8. Why are universal and type selectors used?


The Universal Selectors
Rather than selecting elements of a specific type, the universal selector quite simply
matches the name of any element type :
{
color: #000000;
}
Types of Selectors we used are

1. The Descendant Selectors


want to apply a style rule to a particular element only when it lies inside
a particular element. As given in the following example, style rule will apply to <em>
element only when it lies inside <ul> tag.
ul em {
color: #000000;
}
2. The Class Selectors
You can define style rules based on the class attribute of the elements. All the
elements having that class will be formatted according to the defined rule.
.black {
color: #000000;
}
3. The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.
#black {
color: #000000;
}

4. The Child Selectors


You have seen descendant selectors. There is one more type of selectors which is
very similar to descendants but have different functionality.
body > p {
color: #000000;
}
5. The Attribute Selectors
You can also apply styles to HTML elements with particular attributes. The style rule
below will match all input elements that has a type attribute with a value of text:

Visit Us www.studykeeda.in
input[type=“text”]{
color: #000000;
}

9. What do we do when we have to apply style rule to a particular element only


when it lies inside a particular element?
Ans : When we have to apply style rule to particular element we just mention that particular
attribute with is value like below
 p[lang=“fr”] - Selects all paragraph elements whose lang attribute has a value
ofexactly “fr”.
 p[lang =“fr”] - Selects all paragraph elements whose lang attribute contains
the word“fr”.
 p[lang=“en”] - Selects all paragraph elements whose lang attribute contains
values that are exactly
Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors with a
comma as given in the following example:

10. Explain the id selector.


Ans:
We can define style rules based on the id attribute of the elements. All the elements
having that id will be formatted according to the defined rule.
Eg. below
#black {
color: #000000;

11.Can we define multiple style rules?


Ans: To define multiple style rules for a single element. You can define
these rules to combine multiple properties and corresponding values into a single
block as defined in the following example:
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

12. What are the rules to override any style sheet?


Ans: CSS override rules are:-
 Any inline style sheet takes highest priority. So, it will override any rule defined
in<style>...</style> tags or rules defined in any external style sheet
file.
 Any rule defined in <style>...</style>tags will override rules defined in any
external style sheet file.
 Any rule defined in external style sheet file takes lowest priority and rules

Visit Us www.studykeeda.in
defined in this file will be applied only when above two rules are not
applicable.

13. How are the color codes represented in a style sheet?


CSS Colors - Hex Codes
A hexadecimal is a 6 digit representation of a color. The first two digits(RR)
represent a red value, the next two are
are represent the blue value(BB).
CSS Colours - Short Hex Codes
This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at
an equivalent six-digit value; For example: #6A7 becomes #66AA77.
CSS Colours - RGB Values
This colour value is specified using the RGB( ) property. This property takes three
values, one each for red, green, and blue. The value can be an integer between 0
and 255 or a percentage.

14. How do we select a background attachment?


<table style=“background
background-position:100px;”>
<tr><td>
Background image positioned 100 pixels away from the left.
</td></tr>
</table>
RGB() property of color so it is recommended
background-image:url(/https/www.scribd.com/images/pattern1.gif);”>

15. Can we set the text direction? If yes then how?


Ans: Yes we can set text direction. Eg. Below
<p style=“direction:rtl;”>
This text will be renedered from right to left </p>

16. Is RGB() property supported by all browsers?


Ans: No, All the browsers do not support not to use it.

6. Fill in the blanks:


(a) External CSS Defines style sheet rules in a separate .css file and then include
that file in your HTML document using HTML <link> tag.
(b) The text-transform property is used to create a small-caps effect
(c) A cascading style sheet file will have extension as .CSS and it will be
included in HTML files using <link> tag.
(d) Each property declaration is separated by a semicolon .

Visit Us www.studykeeda.in

You might also like