HTML CSS PHP Notes

What is HTML?
HTML is a language for describing web pages.
 HTML stands for Hyper Text Markup Language

 HTML is not a programming language, it is a markup language
 A markup language is a set of markup tags
 HTML uses markup tags to describe web pages
HTML Tags
HTML markup tags are usually called HTML tags
 HTML tags are keywords surrounded by angle brackets like <html>

 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start tag, the second tag is the end tag
 Start and end tags are also called opening tags and closing tags
HTML Documents = Web Pages
 HTML documents describe web pages

 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
The purpose of a web browser (like Internet Explorer or Firefox) is to read HTML
documents and display them as web pages. The browser does not display the HTML
tags, but uses the tags to interpret the content of the page:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
 The text between <html> and </html> describes the web page
 The text between <body> and </body> is the visible page content
 The text between <h1> and </h1> is displayed as a heading
 The text between <p> and </p> is displayed as a paragraph
HTML Element Syntax
 An HTML element starts with a start tag / opening tag

 An HTML element ends with an end tag / closing tag
 The element content is everything between the start and the end tag
 Some HTML elements have empty content
1
 Empty elements are closed in the start tag
 Most HTML elements can have attributes
Hyperlinks, Anchors, and Links
In web terms, a hyperlink is a reference (an address) to a resource on the web.
Hyperlinks can point to any resource on the web: an HTML page, an image, a sound
file, a movie, etc.
An anchor is a term used to define a hyperlink destination inside a document.
The HTML anchor element <a>, is used to define both hyperlinks and anchors.
We will use the term HTML link when the <a> element points to a resource, and the
term HTML anchor when the <a> elements defines an address inside a document..
An HTML Link
Link syntax:
<a href="url">Link text</a>
The start tag contains attributes about the link.
The element content (Link text) defines the part to be displayed.
Note: The element content doesn't have to be text. You can link from an image or any
other HTML element.
The href Attribute
The href attribute defines the link "address".
This <a> element defines a link to W3Schools:
<a href="http://www.w3schools.com/">Visit W3Schools!</a>
HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
2
Heading Elements
<h1>Largest Heading</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>
Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em>

<strong>This text is strong</strong>
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b>

<i>This text is italic</i>
Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>

<a href="http://www.example.com/"><img src="URL" alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>
A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
3
Definition list
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
Forms
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">

<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60" cols="20"></textarea>
</form>
4
Entities
< is the same as <

> is the same as >
© is the same as ©
Other Elements

<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
HTML Images
HTML images are defined with the <img> tag.
<img src="w3schools.jpg" width="104" height="142" />
Color Names Supported by All Browsers
The list below is a complete list of the color names supported by all major browsers.
You can click on a color name (or a hex value) to view the color as the background-
color along with different text colors.
The HTML <font> Tag
With HTML code like this, you can specify both the size and the type of the browser
output :
<p>
<font size="2" face="Verdana">
This is a paragraph.
</font>
</p>
<p>
<font size="3" face="Times">
This is another paragraph.
</font>
</p>
5
Font Attributes
Attribute Example Purpose
size="number" size="2" Defines the font size
size="+number" size="+1" Increases the font size
size="-number" size="-1" Decreases the font size
face="face-name" face="Times" Defines the font-name
color="color-value" color="#eeff00" Defines the font color
color="color-name" color="red" Defines the font color
Forms
A form is an area that can contain form elements.
Form elements are elements that allow the user to enter information (like text fields,
text area fields, drop-down menus, radio buttons, checkboxes, etc.) in a form.
A form is defined with the <form> tag.
<form>
.
input elements
.
</form>
Input
The most used form tag is the <input> tag. The type of input is specified with the type
attribute. The most commonly used input types are explained below.
Text Fields
Text fields are used when you want the user to type letters, numbers, etc. in a form.
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
How it looks in a browser:
First name:
Last name:
6
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of
choices.
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" /> Female
</form>
Male
Female
Note that only one option can be chosen.
Checkboxes
Checkboxes are used when you want the user to select one or more options of a
limited number of choices.
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
I have a bike:
I have a car:
I have an airplane:
The Form's Action Attribute and the Submit Button
When the user clicks on the "Submit" button, the content of the form is sent to the
server. The form's action attribute defines the name of the file to send the content to.
The file defined in the action attribute usually does something with the received input.
<form name="input" action="html_form_submit.asp" method="get">
7
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Submit
Username:
If you type some characters in the text field above, and click the "Submit" button, the
browser will send your input to a page called "html_form_submit.asp". The page will
show you the received input.
HTML Comments
Comments can be inserted in the HTML code to make it more readable and
understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this:

The Image Tag and the Src Attribute
In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only and it has no
closing tag.
To display an image on a page, you need to use the src attribute. Src stands for
"source". The value of the src attribute is the URL of the image you want to display
on your page.
The syntax of defining an image:
<img src="url" />
The URL points to the location where the image is stored. An image named "boat.gif"
located in the directory "images" on "www.w3schools.com" has the URL:
http://www.w3schools.com/images/boat.gif.
The browser puts the image where the image tag occurs in the document. If you put
an image tag between two paragraphs, the browser shows the first paragraph, then the
image, and then the second paragraph.
8
The Alt Attribute
The alt attribute is used to define an "alternate text" for an image. The value of the alt
attribute is an author-defined text:
<img src="boat.gif" alt="Big Boat" />
The "alt" attribute tells the reader what he or she is missing on a page if the browser
can't load images. The browser will then display the alternate text instead of the
image. It is a good practice to include the "alt" attribute for each image on a page, to
improve the display and usefulness of your document for people who have text-only
browsers.
Definition Lists
A definition list is not a list of single items. It is a list of items (terms), with a
description of each item (term).
A definition list starts with a <dl> tag (definition list).
Each term starts with a <dt> tag (definition term).
Each description starts with a <dd> tag (definition description).
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
Here is how it looks in a browser:
Coffee
Black hot drink
Milk
White cold drink
Inside the <dd> tag you can put paragraphs, line breaks, images, links, other lists, etc.
HTML Line Breaks
Use the <br /> tag if you want a line break (a new line) without starting a new
paragraph:
<p>This is<br />a para<br />graph with line breaks</p>
9
The <br /> element is an empty HTML element. It has no end tag.
<br> or <br />
In XHTML, XML, and future versions of HTML, HTML elements with no end tag
(closing tag) are not allowed.
The HTML Style Attribute
The purpose of the style attribute is:
To provide a common way to style all HTML elements.
Styles was introduced with HTML 4, as the new and preferred way to style HTML
elements. With HTML styles, styles can be added to HTML elements directly by
using the style attribute, or indirectly by in separate style sheets (CSS files).
You can learn everything about styles and CSS in our CSS tutorial.
In our HTML tutorial we use the style attribute to introduce you to HTML styles.
HTML Style Examples
style="background-color:yellow"
style="font-size:10px"
style="font-family:Times"
style="text-align:center"
Deprecated Tags and Attributes
In HTML 4, some tags and attributes are defined as deprecated. Deprecated means
that they will not be supported in future versions of HTML and XHTML.
These tags and attributes should be avoided:
Tags Description
<center> Defines centered content

<font> and <basefont> Defines HTML fonts
<s> and <strikeout> Defines strikeout text
<u> Defines underlined text

Attributes Description
align Defines the alignment of text
10
bgcolor Defines the background color
color Defines the text color
Background Color
<body style="background-color:yellow">
The style attribute defines a style for the <body> element.
The new style attribute makes the "old" bgcolor attribute obsolete.
Font Family, Color and Size
<p style="font-family:courier new; color:red; font-size:20px">
The style attribute defines a style for the <p> element.
The new style attribute makes the old <font> tag obsolete.
Text Alignment
<h1 style="text-align:center">
The style attribute defines a style for the <h1> element.
Tables
Tables are defined with the <table> tag. A table is divided into rows (with the <tr>
tag), and each row is divided into data cells (with the <td> tag). The letters td stands
for "table data," which is the content of a data cell. A data cell can contain text,
images, lists, paragraphs, forms, horizontal rules, tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
</tr>
<tr>
</tr>
</table>
11
Tables and the Border Attribute
If you do not specify a border attribute the table will be displayed without any
borders. Sometimes this can be useful, but most of the time, you want the borders to
show.
To display a table with borders, you will have to use the border attribute:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
<big> Defines big text

<em> Defines emphasized text
<i> Defines italic text
<small> Defines small text
<strong> Defines strong text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<s> Deprecated. Use <del> instead
<strike> Deprecated. Use <del> instead
<u> Deprecated. Use styles instead
Citations, Quotations, and Definition Tags

Tag Description
<abbr> Defines an abbreviation

<acronym> Defines an acronym
<address> Defines an address element
<bdo> Defines the text direction
<blockquote> Defines a long quotation
<q> Defines a short quotation
<cite> Defines a citation
<dfn> Defines a definition term
12
Static web page
A static web page is one that does not change its appearance, layout or content once it
has been loaded.
A page consisting entirely of HTML with no JavaScript or embeded content is static.
Dynamic web page
A dynamic web page is a web page that displays different content each time it's
viewed. For example, the page may change with the time of day, the user that
accesses the webpage, or the type of user interaction. There are two types of dynamic
web pages.
Client-Side Scripting
Web pages that change in response to an action within that web page, such as a mouse
or a keyboard action, use client-side scripting.
Client-side scripts generate client-side content. Client-side content is content that's

generated on the user's computer rather than the server. In these cases, the user's web
browser would download the web page content from the server, process the code
that's embedded in the web page, and then display the updated content to the user.
Scripting languages such as JavaScript and Flash allow a web page to respond to
client-side events.
Server-Side Scripting
Web pages that change when a web page is loaded or visited use server-side scripting.
Server-side content is content that's generated when a web page is loaded. For
example, login pages, forums, submission forms, and shopping carts, all use server-
side scripting since those web pages change according to what is submitted to it.
Scripting languages such as PHP, ASP, ASP.NET, HTML, ColdFusion and Perl allow
a web page to respond to submission events.
java Script
JavaScript is a scripting language developed by Netscape Communications

Corporation. It is simple to learn, easy to use, general purpose scripting languages.
JavaScript is commonly used in web pages to improve the design, validate forms,
detect browsers, create cookies, and much more which helps in making the web pages
interactive and powerful. JavaScript is supported by all the major web browsers such
as Internet Explorer, Mozilla etc.
13
Introduction to Cascading Style Sheet(CSS)
CSS is just a way of formatting the web page layout, text, fonts, images, and almost
everything you put on the web page. There are various ways to include styles in our
document. We can make use of the STYLE tag which is placed in the HEAD portion
of our document and defines styles for tags which appear elsewhere. Styles are
normally saved in external .css files. External style sheets enable you to change the
appearance and layout of all the pages in our web site, just by editing one single CSS
file. We can also define a style for each HTML element and apply it to all the required
web pages. To make a change globally, simply change the style and all elements in
the web site will be updated automatically.
Syntax :
selector { property : value }
Where, selector is the HTML element/tag, the property is the attribute, and
each property can take a value.
body { color : blue }
Linking External CSS
External CSS are advised to use in situations where we want to apply the same style
in a number of pages. An external CSS is same as other text file with the
extension .css. Each web page is linked to the style sheet using the <link> tag. The
<link> tag is written inside the head section of the HTML page.
<head>
<link rel=”stylesheet” type=”text/css”
href=”filename.css” />
</head>
Example
Style.css
body { background-color : yellow }
java Script
JavaScript is a scripting language developed by Netscape Communications

Corporation. It is simple to learn, easy to use, general purpose scripting languages.
JavaScript is commonly used in web pages to improve the design, validate forms,
detect browsers, create cookies, and much more which helps in making the web pages
interactive and powerful. JavaScript is supported by all the major web browsers such
as Internet Explorer, Mozilla etc.
<script type=”text/javascript”>
Document.write(“Welcome”);
</script>
function display()
14
{
alert(“Welcome”)
}
style.css
/********************************Main
page***********************************/
#wrapper
{
width:1024px;
height:768px;
background-color:silver;
}
*
{
margin:0px;
}
#header
{
height:150px;
width:1024px;
background-color:black;
}
#message
{
height:30px;
width:1024px;
background-color:purple;
}
#leftcontent
{
height:1024px;
width:120px;
background-color:olive;
float:left;
}
#footer
{
height:30px;
width:1024px;
background-color:black;
}
.message-font
{
font-size:24px;
font-family:serif;
color:white;
}
15
/****************************End Main page***************************/
/***************************start Menu***************************************/
#menu
{
height:30px;
width:1024px;
}
#menu ul
{
margin:0px;
padding:0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
background-color:#999999;
color:#FFFFFF;
border-color:#FFFFFF;
margin-left:auto;
}
#menu li
{
display:block;
position:relative;
list-style-type:none;
float:left;
text-align:center;
height:30px;
width:150px;
border:1px solid white;
}
#menu ul li a
{
border:blue;
color:white;
text-decoration:blink;
line-height:2;
}
#menu ul ul
{
position:absolute;
top:30px;
visibility:hidden;
}
#menu ul li:hover ul
{
visibility:visible;
}
16
Index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Main page</title>
<link href="css/css.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="message">
<marquee class="message-font">Welcome in Bussness</marquee>
</div>
<div id="menu">
<ul>
<li><a href="#">Master</a>
<ul>
<li><a href="book_details.html">Book Details</a></li>
<li><a href="party_details.html">Party Details</a></li>
<li><a href="distributor_details.html">Distributors</a></li>
<li><a href="employee_details.html">Employee</a></li>
<li><a href="salary_detail.html">Salary Detail</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Purchase</a>
<ul>
<li><a href="purchase.html">Purchase</a></li>
<li><a href="purchase_return.html">Purchase Return</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Sale</a>
<ul>
<li><a href="sale.html">Sale</a></li>
<li><a href="sale_return.html">Sale Return</a></li>
</ul>
</li>
</ul>
<ul>
<li><a href="#">Report</a>
<ul>
<li><a href="book_report.html">Book Report</a></li>
<li><a href="party_report.html">Party</a></li>
<li><a href="distributor_report.html">Distributor</a></li>
</ul>
17
</li>
</ul>
<ul>
<li><a href="#">Help</a>
<ul>
<li><a href="#">About Site</a></li>
<li><a href="#">User Help</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
18

HTML CSS PHP Notes

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML CSS PHP Notes

Uploaded by

Copyright:

Available Formats

What is HTML?

HTML is a language for describing web pages.

 HTML stands for Hyper Text Markup Language

HTML markup tags are usually called HTML tags

 HTML tags are keywords surrounded by angle brackets like <html>

HTML Documents = Web Pages

 HTML documents describe web pages

<h1>My First Heading</h1>

<p>My first paragraph</p>

HTML Element Syntax

 An HTML element starts with a start tag / opening tag

Hyperlinks, Anchors, and Links

In web terms, a hyperlink is a reference (an address) to a resource on the web.

An anchor is a term used to define a hyperlink destination inside a document.

<a href="url">Link text</a>

The start tag contains attributes about the link.

The element content (Link text) defines the part to be displayed.

The href Attribute

The href attribute defines the link "address".

This <a> element defines a link to W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!</a>

HTML Basic Document

<em>This text is emphasized</em>

<b>This text is bold</b>

Links, Anchors, and Image Elements

<a href="http://www.example.com/">This is a Link</a>

<form action="http://www.example.com/test.asp" method="post/get">

<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">

<textarea name="Comment" rows="60" cols="20"></textarea>

&lt; is the same as <

HTML images are defined with the <img> tag.

<img src="w3schools.jpg" width="104" height="142" />

Color Names Supported by All Browsers

The HTML <font> Tag

A form is an area that can contain form elements.

A form is defined with the <form> tag.

How it looks in a browser:

How it looks in a browser:

Note that only one option can be chosen.

How it looks in a browser:

The Form's Action Attribute and the Submit Button

<form name="input" action="html_form_submit.asp" method="get">

<input type="submit" value="Submit" />

How it looks in a browser:

Comments are written like this:

The Image Tag and the Src Attribute

In HTML, images are defined with the <img> tag.

The syntax of defining an image:

<img src="url" />

<img src="boat.gif" alt="Big Boat" />

A definition list starts with a <dl> tag (definition list).

Each term starts with a <dt> tag (definition term).

Each description starts with a <dd> tag (definition description).

<dd>White cold drink</dd>

Here is how it looks in a browser:

HTML Line Breaks

<p>This is<br />a para<br />graph with line breaks</p>

<br> or <br />

The HTML Style Attribute

The purpose of the style attribute is:

To provide a common way to style all HTML elements.

< is the same as <