Why Do We Use Css With HTML

2)))) what is a tag? Explain tags with example?
An HTML tag is a code that describes how a Web page is formatted. HTML tags are defined by
the characters < and >.
a)<div>
The <div> tag defines a division or a section in an HTML document.
<div id="contentinfo">
<p>Welcome to our website. We provide tutorials on various subjects.</p>
</div>
b)span
A <span> element used to color a part of a text:
<p>My mother has <span style="color:blue">blue</span> eyes.</p>
c)head
The <head> element is a container for all the head elements.
The <head> element can include a title for the document, scripts, styles, meta
information, and more.
The following elements can go inside the <head> element:
 <title> (this element is required in an HTML document)

 <style>
 <base>
 <link>
 <meta>
 <script>
 <noscript>
 <html>
 <head>
 <title>HTML div Tag</title>

 <link rel="stylesheet" href="style2.css">
 </head>
d)style:
The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a
browser.
Each HTML document can contain multiple <style> tags.
<style>
h1 {color:red;}
p {color:blue;}
</style>
e)table:
The <table> tag defines an HTML table.
An HTML table consists of the <table> element and one or more <tr>, <th>,

and <td> elements.
The <tr> element defines a table row, the <th> element defines a table
header, and the <td> element defines a table cell.
<table border="1" cellpadding="5" cellspacing="5">

<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
f)link:
The <link> tag defines a link between a document and an external resource.
The <link> tag is used to link to external style sheets.
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
4) Why do we use css with html?
The main benefit in CSS, is that it manages to separate the style from the
content on your web page.
- You may want to change the way the HTML output looks. The best way to
do that is with a Cascading Style Sheet (CSS), Font family, type size,
colors,and other styles can be controlled with CSS for each kind of element .
The CSS Box Model

CSS, "box model" is used for designing and layout.
The CSS box model is a box that wraps around every HTML element. It consists
of: margins, borders, padding, and the actual content.
Margin
Border
padding
content
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 surrounds 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.
Example
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
Width and Height of an Element

In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.
Assume we want to style a <div> element to have a total width of 350px:
Example
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Here is the math:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right
border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border +
bottom border + top margin + bottom margin
Note for old IE: Internet Explorer 8 and earlier versions, include padding and
border in the width property. To fix this problem, add a <!DOCTYPE html> to
the HTML page.
Alert Dialog Box

An alert dialog box is mostly used to give a warning message to the users.
For example, if one input field requires to enter some text but the user does
not provide any input, then as a part of validation, you can use an alert box
to give a warning message.
Eg; alert ("This is a warning message!");
From material confirm:
It displays a dialog box with two buttons: OK and Cancel
Prompt Dialog Box

The prompt dialog box is very useful when you want to pop-up a text box to
get user input. Thus, it enables you to interact with the user. The user
needs to fill in the field and then click OK.
HTTP (Hypertext Transfer Protocol) is the set of rules for transferring files
(text, graphic images, sound, video, and other multimedia files) on the World
Wide Web. HTTP is an application protocol that runs on top of
the TCP/IP suite of protocols
Parameters remain in browser history because they are part of the Parameters are not
URL saved in browser
history.
GET requests are re-executed but may The browser usually alerts the
not be re-submitted to server if the HTML user that data will need to be
is stored in the browser cache. re-submitted.
Easier to hack for script kiddies More difficult to hack
Yes, only ASCII

characters allowed. No
restrictions. Binary data is also
allowed
GET method should not be used when sending POST method used when
passwords or other sensitive information. sending passwords or other
sensitive information.
Can be cached Not cached

 Attributes provide additional information about an element
 Attributes specified in name/value pairs like: name="value"
 The language is declared with the lang attribute. <html lang="en-US">
 a title attribute is added to the <p> element. The value of the title

attribute will be displayed as a tooltip when you mouse over the
paragraph:
<p title="I'm a tooltip">
Size Attributes
HTML images are defined with the <img> tag.
The filename of the source (src), and the size of the image (width and height)
are all provided as attributes:
<img src="w3schools.jpg" width="104" height="142">
href Specifies the (web address) for a link
id Specifies a unique id for an element
src Specifies the (web address) for an image
style Specifies an CSS style for an element
title Specifies extra information about an element

The <hr> tag defines a thematic break in an HTML page, and is most often
displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML
page:
The <head> element is a container for metadata. HTML metadata is data about
the HTML document
<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
<head> A container for all the head elements (title, scripts, styles, meta informati
<h1> to <h6> Defines HTML headings
<hr> Defines a thematic change in the content
The HTML <pre> Element

The HTML <pre> element defines preformatted text.
The text inside a <pre> element is displayed in a fixed-width font (usually

Courier), and it preserves both spaces and line breaks:
<pre>
My Bonnie lies over the ocean.
My Bonnie lies over the sea.
My Bonnie lies over the ocean.
Oh, bring back my Bonnie to me.

</pre>
Output is same with spaces. If <p> is used instead of <pre> the output is it
combines and no spaces are there.
 <h2 style="color:red;">I am red</h2>
<h2 style="color:blue;">I am blue</h2> using style attribute
 <body style="background-color:powderblue;"> for total document color

is changed
 The font-family property defines the font to be used for an HTML
element
<h1 style="font-family:verdana;">This is a heading</h1>
 The font-size property defines the text size for an HTML element:
<h1 style="font-size:300%;">This is a heading</h1>
 The text-align property defines the horizontal text alignment for an
HTML element
<h1 style="text-align:center;">Centered Heading</h1>
Example:----<body>
<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
o/p:--- This text is bold
This text is italic
This is subscript and superscri
 The HTML <strong> element defines strong text, with added semantic
"strong" importance.(same as bold)
<strong>This text is strong</strong>
 The HTML <em> element defines emphasized text, with added semantic
importance.(same as italic)
<em>This text is emphasized</em>
 The HTML <small> element defines smaller text:
<h2>HTML <small>Small</small> Formatting</h2>
 The HTML <mark> element defines marked or highlighted text:
<h2>HTML <mark>Marked</mark> Formatting</h2>
 The HTML <del> element defines deleted (removed) text.
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
Output:- The del element represents deleted (removed) text.
My favorite color is blue red.
 The HTML <ins> element defines inserted (added) text.
<p>My favorite <ins>color</ins> is red.</p>
My favorite color is red.
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text

<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
 The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
Output: WWF's goal is to: “Build a future where people live in harmony with nature.”
 The HTML <blockquote> element defines a section that is quoted from

another source.
<p>Here is a quote from WWF's website:</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>
Output: For 50 years, WWF has been protecting the future of nature. The
world's leading conservation organization, WWF works in 100 countries and is
supported by 1.2 million members in the United States and close to 5 million
globally.
 The HTML <abbr> element defines an abbreviation or an acronym.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

1948.</p>
Output: The WHO was founded in 1948.
Here when you place cursor over WHO it shows World Health Organization.
 The HTML <address> element defines contact information

(author/owner) of a document or an article.
<p>The HTML address element defines contact information (author/owner) of

a document or article.</p>
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
Output: The HTML address element defines contact information (author/owner) of a
document or article.
Written by John Doe.

Visit us at:
Example.com
Box 564, Disneyland
USA
 The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
Output: This line will be written from right to left
(apears in reverse manner.)
Rtl means right to left
HTML Quotation and Citation Elements
Tag Description
<abbr> Defines an abbreviation or acronym
<address> Defines contact information for the author/owner of a document
<bdo> Defines the text direction

<blockquote> Defines a section that is quoted from another source
<cite> Defines the title of a work
<q> Defines a short inline quotation
 You can add comments to your HTML source by using the following
syntax:

 An inline CSS uses the style attribute of an HTML element.
<h1 style="color:blue;">This is a Blue Heading</h1>
 An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within

a <style> element:
<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>
 An external style sheet is used to define the style for many HTML pages.
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
An external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
 The CSS border property defines a border around an HTML element:
Example
p {
border: 1px solid powderblue;
}
output:This is a heading
This is a paragraph.
 The CSS padding property defines a padding (space) between the text
and the border:
Example
p {
padding: 30px;
}
output: This is a heading
The CSS margin property defines a margin (space) outside the border:
Example
p {
margin: 50px;
}
 To define a specific style for one special element, add an id attribute to

the element:
<html>
<head>
<style>
#p01 {
color: blue;
</style>
</head>
<body>
<p id="p01">I am different.</p>
</body>
</html>
 To define a style for a special type of elements, add a class attribute to

the element:
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>
<p class="error">I am different.</p>
<p class="error">I am different too.</p>
</body>
</html>
 <tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
Cell that spans two columns using colspan

Name Telephone
Bill Gates 55577854 55577855
 <tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
Cell that spans two rows using rowspan:

Name: Bill Gates
55577854
Telephone:
55577855
 <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Output: Coffee
 Tea
 Milk
With bullets is called unordered list.we use <ul> tag and for data<li>
 <ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
For ordered list we use <ol>

For list styles in <ul> attribute is <ul style=”list-style-type:circle”>
For list styles in <ol> attribute is <ol type=”1”>
 <dl>----description list
 <dt>----description term in dl
 <dd>----defines description in dl
Example: <dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
 For block of content styling can be done by using <div> element
 For a particular text in single row to give color we use span.
<h1>My <span style="color:red">Important</span> Heading</h1>
IFRAMES:
An iframe is used to display a web page within a web page.
<iframe src="URL"></iframe>
<iframe src="demo_iframe.htm" height="200" width="300"></iframe>(height and
width)
<iframe src="demo_iframe.htm" style="border:none;"></iframe>(By default, an
iframe has a border around it.remove it by adding border none)
The HTML <script> Tag
The <script> tag is used to define a client-side script (JavaScript).
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
*******example:--<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">This is a demonstration.</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
Output:- My First JavaScript
JavaScript can change the content of an HTML element:

Click Me!--buttton
This is a demonstration.
--------------wen u click on button the text changes to Hello javascript
To change colr and size of text we use
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
</script>
-----------------------------------------------------------------------------
The <form> Element

HTML forms are used to collect user input.
***********<input type="text"> defines a one-line input field for text input:
Example: <form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">

</form>
Output: First name:

Last name:
*************radio button
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
****************form action
<body>
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
The Action Attribute

The action attribute defines the action to be performed when the form is
submitted.
The common way to submit a form to a server, is by using a submit button.
Normally, the form is submitted to a web page on a web server.
<form action="action_page.php">
The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used
when submitting the forms:
<form action="action_page.php" method="get">
or:
<form action="action_page.php" method="post">
If the form submission is passive (like a search engine query), and without
sensitive information.
When you use GET, the form data will be visible in the page address:
If the form is updating data, or includes sensitive information (password).
POST offers better security because the submitted data is not visible in the page
address.
The Name Attribute

To be submitted correctly, each input field must have a name attribute.

Why Do We Use Css With HTML

Uploaded by

Why Do We Use Css With HTML

Uploaded by

2)))) what is a tag? Explain tags with example?

A <span> element used to color a part of a text:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

The <head> element is a container for all the head elements.

The following elements can go inside the <head> element:

 <title> (this element is required in an HTML document)

 <title>HTML div Tag</title>

Each HTML document can contain multiple <style> tags.

The <table> tag defines an HTML table.

An HTML table consists of the <table> element and one or more <tr>, <th>,

<table border="1" cellpadding="5" cellspacing="5">

The <link> tag is used to link to external style sheets.

4) Why do we use css with html?

The CSS Box Model

Explanation of the different parts:

Width and Height of an Element

Here is the math:

The total width of an element should be calculated like this:

The total height of an element should be calculated like this:

Alert Dialog Box

From material confirm:

It displays a dialog box with two buttons: OK and Cancel

Prompt Dialog Box

Easier to hack for script kiddies More difficult to hack

Yes, only ASCII

Can be cached Not cached

 a title attribute is added to the <p> element. The value of the title

href Specifies the (web address) for a link

id Specifies a unique id for an element

src Specifies the (web address) for an image

style Specifies an CSS style for an element

title Specifies extra information about an element

<html> Defines the root of an HTML document

<body> Defines the document's body

<h1> to <h6> Defines HTML headings

<hr> Defines a thematic change in the content

The HTML <pre> Element

The text inside a <pre> element is displayed in a fixed-width font (usually

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.

 <h2 style="color:red;">I am red</h2>

<h2 style="color:blue;">I am blue</h2> using style attribute

 <body style="background-color:powderblue;"> for total document color

<p><b>This text is bold</b></p>

o/p:--- This text is bold

This text is italic

 The HTML <mark> element defines marked or highlighted text:

<p>The del element represents deleted (removed) text.</p>

<p>My favorite color is <del>blue</del> red.</p>

Output:- The del element represents deleted (removed) text.

My favorite color is blue red.

 The HTML <ins> element defines inserted (added) text.

<p>My favorite <ins>color</ins> is red.</p>

HTML Text Formatting Elements

<b> Defines bold text

<em> Defines emphasized text

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

 The HTML <q> element defines a short quotation.

Browsers usually insert quotation marks around the <q> element

 The HTML <blockquote> element defines a section that is quoted from

<p>Here is a quote from WWF's website:</p>

 The HTML <abbr> element defines an abbreviation or an acronym.

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

Output: The WHO was founded in 1948.

 The HTML <address> element defines contact information

<p>The HTML address element defines contact information (author/owner) of

Written by John Doe.<br>

Box 564, Disneyland<br>

Written by John Doe.