0% found this document useful (0 votes)
19 views69 pages

APC_II_UNIT_2

The document provides an overview of HTML, including its structure, basic tags, and formatting options for web pages. It covers various HTML elements such as headings, paragraphs, tables, and formatting tags, along with examples of their usage. Additionally, it discusses attributes for tables and deprecated features in HTML5.

Uploaded by

nishtha5806
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
0% found this document useful (0 votes)
19 views69 pages

APC_II_UNIT_2

The document provides an overview of HTML, including its structure, basic tags, and formatting options for web pages. It covers various HTML elements such as headings, paragraphs, tables, and formatting tags, along with examples of their usage. Additionally, it discusses attributes for tables and deprecated features in HTML5.

Uploaded by

nishtha5806
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/ 69

HTML, XML, CSS and Programming Language

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 tell a Web browser how to structure
it to display.
Originally, HTML was developed with the intent of defining the structure of documents like
headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information
between researchers.
Now, HTML is being widely used to format web pages with the help of different tags
available in HTML language.

Basic HTML Document


In its simplest form, following is an example of an HTML document −
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>

HTML Tags
As told earlier, HTML is a markup language and makes use of various tags to format the
content. These tags are enclosed within angle braces <Tag Name>. Except few tags, most
of the tags have their corresponding closing tags. For example, <html> has its closing
tag </html> and <body> tag has its closing tag </body> tag etc.
Above example of HTML document uses the following tags −
Sr.No Tag & Description

1 <!DOCTYPE...>
This1 tag defines the document type and HTML version.

2 <html>
This tag encloses the complete HTML document and mainly comprises of
document header which is represented by <head>...</head> and document body
which is represented by <body>...</body> tags.

3 <head>
This tag represents the document's header which can keep other HTML tags like
<title>, <link> etc.

4 <title>
The <title> tag is used inside the <head> tag to mention the document title.

5 <body>
This tag represents the document's body which keeps other HTML tags like <h1>,
<div>, <p> etc.

6 <h1>
This tag represents the heading.

7 <p>
This tag represents a paragraph.

HTML Document Structure


A typical HTML document will have the following structure −
<html>
<head>
Document header related tags
</head>

<body>
Document body related tags
</body>
</html>

The <!DOCTYPE> Declaration


The <!DOCTYPE> declaration tag is used by the web browser to understand the version of
the HTML used in the document. Current version of HTML is 5 and it makes use of the
following declaration −
<!DOCTYPE html>
There are many other declaration types which can be used in HTML document depending
on what version of HTML is being used. We will see more details on this while discussing
<!DOCTYPE...> tag along with other HTML tags.

Heading Tags
Any document starts with a heading. You can use different sizes for your headings. HTML
also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one line
after that heading.
Example
<!DOCTYPE html>
<html>

<head>
<title>Heading Example</title>
</head>

<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>

</html>

Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag as shown below in the
example −
Example
<!DOCTYPE html>
<html>

<head>
<title>Paragraph Example</title>
</head>

<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>

</html>

Line Break Tag


Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags, as
there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line break, while if you miss the
forward slash character and just use <br> it is not valid in XHTML.
Example
<!DOCTYPE html>
<html>

<head>
<title>Line Break Example</title>
</head>

<body>
<p>Hello<br/>
You delivered your assignment ontime.<br/>
Thanks<br/>
Mahnaz</p>
</body>

</html>

Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
Example
<!DOCTYPE html>
<html>

<head>
<title>Centring Content Example</title>
</head>

<body>
<p>This text is not in the center.</p>

<center>
<p>This text is in the center.</p>
</center>
</body>

</html>

Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates
a line from the current position in the document to the right margin and breaks the line
accordingly.
For example, you may want to give a line between two paragraphs as in the given example
below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Horizontal Line Example</title>
</head>

<body>
<p>This is paragraph one and should be on top</p>
<hr/>
<p>This is paragraph two and should be at bottom</p>
</body>

</html>

Again <hr /> tag is an example of the empty element, where you do not need opening and
closing tags, as there is nothing to go in between them.
The <hr /> element has a space between the characters hr and the forward slash. If you
omit this space, older browsers will have trouble rendering the horizontal line, while if you
miss the forward slash character and just use <hr> it is not valid in XHTML

Nonbreaking Spaces
Suppose you want to use the phrase "12 Angry Men." Here, you would not want a browser
to split the "12, Angry" and "Men" across two lines −
An example of this technique appears in the movie "12 Angry Men."
In cases, where you do not want the client browser to break text, you should use a
nonbreaking space entity &nbsp; instead of a normal space. For example, when coding the
"12 Angry Men" in a paragraph, you should use something similar to the following code −
Example
<!DOCTYPE html>
<html>

<head>
<title>Nonbreaking Spaces Example</title>
</head>

<body>
<p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
</body>

</html>
HTML - Formatting
If you use a word processor, you must be familiar with the ability to make text bold,
italicized, or underlined; these are just three of the ten options available to indicate how text
can appear in HTML and XHTML.

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Bold Text Example</title>
</head>

<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>

</html>

Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Italic Text Example</title>
</head>

<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>

</html>

Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown
below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Underlined Text Example</title>
</head>

<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>

</html>

Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Strike Text Example</title>
</head>

<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>

</html>

Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is the
same size as the characters surrounding it but is displayed half a character's height above the
other characters.
Example
<!DOCTYPE html>
<html>

<head>
<title>Superscript Text Example</title>
</head>

<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>

</html>

Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the
same as the characters surrounding it, but is displayed half a character's height beneath the
other characters.
Example
<!DOCTYPE html>
<html>

<head>
<title>Subscript Text Example</title>
</head>

<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>

</html>

Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of
the text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Larger Text Example</title>
</head>

<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>

</html>

Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the
rest of the text surrounding it as shown below −
Example
<!DOCTYPE html>
<html>

<head>
<title>Smaller Text Example</title>
</head>

<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>

</html>

HTML - Tables
The HTML tables allow web authors to arrange data like text, images, links, other tables,
etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used to create
table rows and <td> tag is used to create data cells. The elements under <td> are regular and
left aligned by default.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Tables</title>
</head>

<body>
<tableborder="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>

<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>

</body>
</html>
Here, the border is an attribute of <table> tag and it is used to put a border across all the
cells. If you do not need a border, then you can use border = "0".

Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which
is used to represent actual data cell. Normally you will put your top row as table heading as
shown below, otherwise you can use <th> element in any row. Headings, which are defined
in <th> tag are centered and bold by default.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>

<body>
<tableborder="1">
<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>
</body>

</html>

Cellpadding and Cellspacing Attributes


There are two attributes called cellpadding and cellspacing which you will use to adjust the
white space in your table cells. The cellspacing attribute defines space between table cells,
while cellpadding represents the distance between cell borders and the content within a cell.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Cellpadding</title>
</head>

<body>
<tableborder="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>
</body>

</html>

Colspan and Rowspan Attributes


You will use colspan attribute if you want to merge two or more columns into a single
column. Similar way you will use rowspan if you want to merge two or more rows.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Colspan/Rowspan</title>
</head>

<body>
<tableborder="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<tdrowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<tdcolspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

Tables Backgrounds
You can set table background using one of the following two ways −
 bgcolor attribute − You can set background color for whole table or just for one cell.
 background attribute − You can set background image for whole table or just for one
cell.
You can also set border color also using bordercolor attribute.
Note − The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not
use these attributes.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Background</title>
</head>

<body>
<tableborder="1"bordercolor="green"bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<tdrowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<tdcolspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>

Here is an example of using background attribute. Here we will use an image available in
/images directory.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>

<body>
<tableborder="1"bordercolor="green"background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<tdrowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<tdcolspan="3">Row 3 Cell 1</td>
</tr>
</table>
</body>

</html>
This will produce the following result. Here background image did not apply to table's
header.

Table Height and Width


You can set a table width and height using width and height attributes. You can specify
table width or height in terms of pixels or in terms of percentage of available screen area.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<tableborder="1"width="400"height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>

</html>

Table Caption
The caption tag will serve as a title or explanation for the table and it shows up at the top of
the table. This tag is deprecated in newer version of HTML/XHTML.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table Caption</title>
</head>

<body>
<tableborder="1"width="100%">
<caption>This is the caption</caption>

<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>

<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>

</html>

Table Header, Body, and Footer


Tables can be divided into three portions − a header, a body, and a foot. The head and foot
are rather similar to headers and footers in a word-processed document that remain the same
for every page, while the body is the main content holder of the table.
The three elements for separating the head, body, and foot of a table are −
 <thead> − to create a separate table header.
 <tbody> − to indicate the main body of the table.
 <tfoot> − to create a separate table footer.
A table may contain several <tbody> elements to indicate different pages or groups of data.
But it is notable that <thead> and <tfoot> tags should appear before <tbody>
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>

<body>
<tableborder="1"width="100%">
<thead>
<tr>
<tdcolspan="4">This is the head of the table</td>
</tr>
</thead>

<tfoot>
<tr>
<tdcolspan="4">This is the foot of the table</td>
</tr>
</tfoot>

<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>

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

Nested Tables
You can use one table inside another table. Not only tables you can use almost all the tags
inside table data tag <td>.
Example
Following is the example of using another table and other tags inside a table cell.
<!DOCTYPE html>
<html>

<head>
<title>HTML Table</title>
</head>

<body>
<tableborder="1"width="100%">

<tr>
<td>
<tableborder="1"width="100%">
<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>
</td>
</tr>

</table>
</body>

</html>

HTML - Lists
HTML offers web authors three ways for specifying lists of information. All lists must
contain one or more list elements. Lists may contain −
 <ul> − An unordered list. This will list items using plain bullets.
 <ol> − An ordered list. This will use different schemes of numbers to list your items.
 <dl> − A definition list. This arranges your items in the same way as they are
arranged in a dictionary.

HTML Unordered Lists


An unordered list is a collection of related items that have no special order or sequence.
This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

The type Attribute


You can use type attribute for <ul> tag to specify the type of bullet you like. By default, it is
a disc. Following are the possible options −
<ul type = "square">
<ul type = "disc">
<ul type = "circle">
Example
Following is an example where we used <ul type = "square">
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ultype="square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

Example
Following is an example where we used <ul type = "disc"> −
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>

<body>
<ultype="disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

Example
Following is an example where we used <ul type = "circle"> −
<!DOCTYPE html>
<html>

<head>
<title>HTML Unordered List</title>
</head>

<body>
<ultype="circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>

</html>

HTML Ordered Lists


If you are required to put your items in a numbered list instead of bulleted, then HTML
ordered list will be used. This list is created by using <ol> tag. The numbering starts at one
and is incremented by one for each successive ordered list element tagged with <li>.
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

The type Attribute


You can use type attribute for <ol> tag to specify the type of numbering you like. By
default, it is a number. Following are the possible options −
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Example
Following is an example where we used <ol type = "1">
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<oltype="1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

Example
Following is an example where we used <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>

<body>
<oltype="I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

Example
Following is an example where we used <ol type = "i">
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<oltype="i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

Example
Following is an example where we used <ol type = "A" >
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<oltype="A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

Example
Following is an example where we used <ol type = "a">
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<oltype="a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

The start Attribute


You can use start attribute for <ol> tag to specify the starting point of numbering you need.
Following are the possible options −
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.

Example
Following is an example where we used <ol type = "i" start = "4" >
<!DOCTYPE html>
<html>

<head>
<title>HTML Ordered List</title>
</head>

<body>
<oltype="i"start="4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>

</html>

HTML Definition Lists


HTML and XHTML supports a list style which is called definition lists where entries are
listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a
glossary, list of terms, or other name/value list.
Definition List makes use of following three tags.
 <dl> − Defines the start of the list
 <dt> − A term
 <dd> − Term definition
 </dl> − Defines the end of the list
Example
<!DOCTYPE html>
<html>

<head>
<title>HTML Definition List</title>
</head>

<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>

</html>

HTML - Forms
HTML Forms are required, when you want to collect some data from the site visitor. For
example, during user registration you would like to collect information such as name, email
address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application
such as CGI, ASP Script or PHP script etc. The back-end application will perform required
processing on the passed data based on defined business logic inside the application.

There are various form elements available like text fields, textarea fields, drop-down menus,
radio buttons, checkboxes, etc.

The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>

Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes

Sr.No Attribute & Description

1 action
Backend script ready to process your passed data.

2 method
Method to be used to upload data. The most frequently used are GET and POST
methods.

3 target
Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.

4 enctype
You can use the enctype attribute to specify how the browser encodes the data
before it sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms
use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the
form of files like image, word file etc.

HTML Form Controls


There are different types of form controls that you can use to collect data using HTML form
 Text Input Controls
 Checkboxes Controls
 Radio Box Controls
 Select Box Controls
 File Select boxes
 Hidden Controls
 Clickable Buttons
 Submit and Reset Button

Text Input Controls


There are three types of text input used on forms −
 Single-line text input controls − This control is used for items that require only one
line of user input, such as search boxes or names. They are created using
HTML <input> tag.
 Password input controls − This is also a single-line text input but it masks the
character as soon as a user enters it. They are also created using HTMl<input> tag.
 Multi-line text input controls − This is used when the user is required to give details
that may be longer than a single sentence. Multi-line input controls are created using
HTML <textarea> tag.

Single-line text input controls


This control is used for items that require only one line of user input, such as search boxes
or names. They are created using HTML <input> tag.
Example
Here is a basic example of a single-line text input used to take first name and last name −
<!DOCTYPE html>
<html>

<head>
<title>Text Input Control</title>
</head>

<body>
<form>
First name: <inputtype="text"name="first_name"/>
<br>
Last name: <inputtype="text"name="last_name"/>
</form>
</body>

</html>

Attributes
Following is the list of attributes for <input> tag for creating text field.
Sr.No Attribute & Description

1 type
Indicates the type of input control and for text input control it will be set to text.

2 name
Used to give a name to the control which is sent to the server to be recognized
and get the value.
3 value
This can be used to provide an initial value inside the control.

4 size
Allows to specify the width of the text-input control in terms of characters.

5 maxlength
Allows to specify the maximum number of characters a user can enter into the
text box.

Password input controls


This is also a single-line text input but it masks the character as soon as a user enters it.
They are also created using HTML <input>tag but type attribute is set to password.
Example
Here is a basic example of a single-line password input used to take user password −
<!DOCTYPE html>
<html>

<head>
<title>Password Input Control</title>
</head>

<body>
<form>
User ID : <inputtype="text"name="user_id"/>
<br>
Password: <inputtype="password"name="password"/>
</form>
</body>

</html>

Attributes
Following is the list of attributes for <input> tag for creating password field.
Sr.No Attribute & Description

1 type
Indicates the type of input control and for password input control it will be set
to password.

2 name
Used to give a name to the control which is sent to the server to be recognized and
get the value.
3 value
This can be used to provide an initial value inside the control.

4 size
Allows to specify the width of the text-input control in terms of characters.

5 maxlength
Allows to specify the maximum number of characters a user can enter into the text
box.

Multiple-Line Text Input Controls


This is used when the user is required to give details that may be longer than a single
sentence. Multi-line input controls are created using HTML <textarea> tag.
Example
Here is a basic example of a multi-line text input used to take item description −
<!DOCTYPE html>
<html>

<head>
<title>Multiple-Line Input Control</title>
</head>

<body>
<form>
Description : <br/>
<textarearows="5"cols="50"name="description">
Enter description here...
</textarea>
</form>
</body>

</html>

Attributes
Following is the list of attributes for <textarea> tag.
Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

2 rows
Indicates the number of rows of text area box.

3 cols
Indicates the number of columns of text area box

Checkbox Control
Checkboxes are used when more than one option is required to be selected. They are also
created using HTML <input> tag but type attribute is set to checkbox..
Example
Here is an example HTML code for a form with two checkboxes −
<!DOCTYPE html>
<html>

<head>
<title>Checkbox Control</title>
</head>

<body>
<form>
<inputtype="checkbox"name="maths"value="on">Maths
<inputtype="checkbox"name="physics"value="on"> Physics
</form>
</body>

</html>

Attributes
Following is the list of attributes for <checkbox> tag.
Sr.No Attribute & Description

1 type
Indicates the type of input control and for checkbox input control it
will be set to checkbox..

2 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

3 value
The value that will be used if the checkbox is selected.

4 checked
Set to checked if you want to select it by default.

Radio Button Control


Radio buttons are used when out of many options, just one option is required to be selected.
They are also created using HTML <input> tag but type attribute is set to radio.
Example
Here is example HTML code for a form with two radio buttons −
<!DOCTYPE html>
<html>

<head>
<title>Radio Box Control</title>
</head>

<body>
<form>
<inputtype="radio"name="subject"value="maths">Maths
<inputtype="radio"name="subject"value="physics"> Physics
</form>
</body>

</html>
Attributes
Following is the list of attributes for radio button.
Sr.No Attribute & Description

1 type
Indicates the type of input control and for checkbox input control it
will be set to radio.

2 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

3 value
The value that will be used if the radio box is selected.

4 checked
Set to checked if you want to select it by default.

Select Box Control


A select box, also called drop down box which provides option to list down various options
in the form of drop down list, from where a user can select one or more options.
Example
Here is example HTML code for a form with one drop down box
<!DOCTYPE html>
<html>

<head>
<title>Select Box Control</title>
</head>

<body>
<form>
<selectname="dropdown">
<optionvalue="Maths"selected>Maths</option>
<optionvalue="Physics">Physics</option>
</select>
</form>
</body>

</html>

Attributes
Following is the list of important attributes of <select> tag −
Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

2 size
This can be used to present a scrolling list box.

3 multiple
If set to "multiple" then allows a user to select multiple items from
the menu.

Following is the list of important attributes of <option> tag −


Sr.No Attribute & Description

1 value
The value that will be used if an option in the select box box is
selected.

2 selected
Specifies that this option should be the initially selected value when
the page loads.

3 label
An alternative way of labeling options

File Upload Box


If you want to allow a user to upload a file to your web site, you will need to use a file
upload box, also known as a file select box. This is also created using the <input> element
but type attribute is set to file.
Example
Here is example HTML code for a form with one file upload box −
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<inputtype="file"name="fileupload"accept="image/*"/>
</form>
</body>

</html>

Attributes
Following is the list of important attributes of file upload box −
Sr.No Attribute & Description

1 name
Used to give a name to the control which is sent to the server to be
recognized and get the value.

2 accept
Specifies the types of files that the server accepts.

Button Controls
There are various ways in HTML to create clickable buttons. You can also create a
clickable button using <input>tag by setting its type attribute to button. The type attribute
can take the following values −
Sr.No Type & Description

1 submit
This creates a button that automatically submits a form.

2 reset
This creates a button that automatically resets form controls to their
initial values.

3 button
This creates a button that is used to trigger a client-side script when
the user clicks that button.

4 image
This creates a clickable button but we can use an image as
background of the button.
Example
Here is example HTML code for a form with three types of buttons −
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<inputtype="submit"name="submit"value="Submit"/>
<inputtype="reset"name="reset"value="Reset"/>
<inputtype="button"name="ok"value="OK"/>
<inputtype="image"name="imagebutton"src="/html/images/logo.png"/>
</form>
</body>

</html>

Hidden Form Controls


Hidden form controls are used to hide data inside the page which later on can be pushed to
the server. This control hides inside the code and does not appear on the actual page. For
example, following hidden form is being used to keep current page number. When a user
will click next page then the value of hidden control will be sent to the web server and there
it will decide which page will be displayed next based on the passed current page.
Example
Here is example HTML code to show the usage of hidden control −
<!DOCTYPE html>
<html>

<head>
<title>File Upload Box</title>
</head>

<body>
<form>
<p>This is page 10</p>
<inputtype="hidden"name="pagename"value="10"/>
<inputtype="submit"name="submit"value="Submit"/>
<inputtype="reset"name="reset"value="Reset"/>
</form>
</body>
</html>
This will produce the following result −
This is page 10
Submit Reset

CSS
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of
the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid
out, what background images or colors are used, layout designs, and variations in display
for different devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document. Most commonly, CSS is combined with the markup languages HTML
or XHTML.

Advantages of CSS
 CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many
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 it 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 a far better look to your HTML page in comparison to 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 its a good idea to start using CSS in all the HTML
pages to make them compatible to future browsers.

CSS - Syntax
A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −
 Selector − A selector is an HTML tag at which a style will be applied. This could be
any tag like <h1> or <table> etc.
 Property − A property is a type of attribute of HTML tag. Put simply, all the HTML
attributes are converted into CSS properties. They could be color, border etc.
 Value − Values are assigned to properties. For example, colorproperty can have value
either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows −


selector { property: value }

Example − You can define a table border as follows −


table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid #C00 is the value
of that property.

You can define selectors in various simple ways based on your comfort. Let me put these
selectors one by one.

The Type Selectors


This is the same selector we have seen above. Again, one more example to give a color to
all level 1 headings −
h1 {
color:#36CFFF;
}

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;
}
This rule renders the content of every element in our document in black.

The Descendant Selectors


Suppose you 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.
ulem{
color:#000000;
}

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;
}

This rule renders the content in black for every element with class attribute set to black in
our document. You can make it a bit more particular. For example −
h1.black {
color:#000000;
}

This rule renders the content in black for only <h1> elements with class attribute set
to black.

You can apply more than one class selectors to given element. Consider the following
example −
<pclass="center bold">
This para will be styled by the classes center and bold.
</p>

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;
}

This rule renders the content in black for every element with id attribute set to black in our
document. You can make it a bit more particular. For example −
h1#black {
color:#000000;
}

This rule renders the content in black for only <h1> elements with id attribute set to black.
The true power of id selectors is when they are used as the foundation for descendant
selectors, For example −
#black h2 {
color:#000000;
}
In this example all level 2 headings will be displayed in black color when those headings
will lie with in tags having id attribute set to black.
The Child Selectors
You have seen the descendant selectors. There is one more type of selector, which is very
similar to descendants but have different functionality. Consider the following example −
body > p {
color:#000000;
}
This rule will render all the paragraphs in black if they are direct child of <body> element.
Other paragraphs put inside other elements like <div> or <td> would not have any effect of
this rule.

Multiple Style Rules


You may need 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;
}
Here all the property and value pairs are separated by a semicolon (;). You can keep them
in a single line or multiple lines. For better readability, we keep them in separate lines.
For a while, don't bother about the properties mentioned in the above block. These
properties will be explained in the coming chapters and you can find complete detail about
properties in CSS References

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 −
h1, h2, h3 {
color:#36C;
font-weight: normal;
letter-spacing:.4em;
margin-bottom:1em;
text-transform: lowercase;
}
This define style rule will be applicable to h1, h2 and h3 element as well. The order of the
list is irrelevant. All the elements in the selector will have the corresponding declarations
applied to them.

You can combine the various id selectors together as shown below −


#content, #footer, #supplement {
position: absolute;
left:510px;
width:200px;
}

HTML - Style Sheet


Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or
perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the
Web since the consortium was founded in 1994.

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 (;).

Example

First let's consider an example of HTML document which makes use of <font> tag and
associated attributes to specify text color and font size −

Note − The font tag deprecated and it is supposed to be removed in a future version of
HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate
your fonts. But still for learning purpose, this chapter will work with an example using the
font tag.
<!DOCTYPE html>
<html>

<head>
<title>HTML CSS</title>
</head>

<body>
<p><fontcolor="green"size="5">Hello, World!</font></p>
</body>

</html>

We can re-write above example with the help of Style Sheet as follows −
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>

<body>
<pstyle="color:green; font-size:24px;">Hello, World!</p>
</body>

</html>

This will produce the following result −


You can use CSS in three ways in your HTML document −
 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.

External Style Sheet


If you need to use your style sheet to various pages, then its 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> tagin <head> Section.
Example
Consider we define a style sheet file style.css which has following rules −
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}
Here we defined three CSS rules which will be applicable to three different classes defined
for the HTML tags. I suggest you should not bother about how these rules are being defined
because you will learn them while studying CSS. Now let's make use of the above external
CSS file in our following HTML document −
<!DOCTYPE html>
<html>

<head>
<title>HTML External CSS</title>
<linkrel="stylesheet"type="text/css"href="/html/style.css">
</head>
<body>
<pclass="red">This is red</p>
<pclass="thick">This is thick</p>
<pclass="green">This is green</p>
<pclass="thick green">This is thick and green</p>
</body>

</html>

Internal Style Sheet


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 overrides the rules defined in an external CSS file.

Example
Let's re-write above example once again, but here we will write style sheet rules in the same
HTML document using <style> tag −
<!DOCTYPE html>
<html>

<head>
<title>HTML Internal CSS</title>

<styletype="text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>

<body>
<pclass="red">This is red</p>
<pclass="thick">This is thick</p>
<pclass="green">This is green</p>
<pclass="thick green">This is thick and green</p>
</body>

</html>
Inline Style Sheet
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.

Example
Let's re-write above example once again, but here we will write style sheet rules along with
the HTML elements using style attribute of those elements.
<!DOCTYPE html>
<html>

<head>
<title>HTML Inline CSS</title>
</head>

<body>
<pstyle="color:red;">This is red</p>
<pstyle="font-size:20px;">This is thick</p>
<pstyle="color:green;">This is green</p>
<pstyle="color:green;font-size:20px;">This is thick and green</p>
</body>

</html>
This will produce the following result −
This is red
This is thick
This is green
This is thick and green

CSS - Inclusion
There are four ways to associate styles with your HTML document. Most commonly used
methods are inline CSS and External CSS.

Embedded CSS - The <style> Element


You can put your CSS rules into an HTML document using the <style> element. This tag is
placed inside the <head>...</head> tags. Rules defined using this syntax will be applied to
all the elements available in the document. Here is the generic syntax −
<!DOCTYPE html>
<html>
<head>
<styletype="text/css"media="all">
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left:40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
It will produce the following result −
Attributes
Attributes associated with <style> elements are −
Attribute Value Description

type text/css Specifies the style sheet language as a content-type


(MIME type). This is required attribute.

media screen
tty
tv
projection
Specifies the device the document will be displayed
handheld
on. Default value is all. This is an optional attribute.
print
braille
aural
all

Inline CSS - The style Attribute


You can use style attribute of any HTML element to define style rules. These rules will be
applied to that element only. Here is the generic syntax −
<element style = "...style rules....">
Attributes
Attribute Value Description

style style rules The value of style attribute is a combination of style


declarations separated by semicolon (;).
Example
Following is the example of inline CSS based on the above syntax −
<html>
<head>
</head>

<body>
<h1style="color:#36C;">
This is inline CSS
</h1>
</body>
</html>

External CSS - The <link> Element


The <link> element can be used to include an external stylesheet file in your HTML
document.
An external style sheet is a separate text file with .css extension. You define all the Style
rules within this text file and then you can include this file in any HTML document using
<link> element.
Here is the generic syntax of including external CSS file −
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
Attributes
Attributes associated with <style> elements are −
Attribute Value Description

type Specifies the style sheet language as a content-


text css
type (MIME type). This attribute is required.

href Specifies the style sheet file having Style rules.


URL
This attribute is a required.

media screen
tty
tv
projection Specifies the device the document will be
handheld displayed on. Default value is all. This is optional
print attribute.
braille
aural
all
Example
Consider a simple style sheet file with a name mystyle.css having the following rules −
h1, h2, h3 {
color:#36C;
font-weight: normal;
letter-spacing:.4em;
margin-bottom:1em;
text-transform: lowercase;
}
Now you can include this file mystyle.css in any HTML document as follows −
<head>
<linktype="text/css"href="mystyle.css"media=" all"/>
</head>

CSS - Tables
This tutorial will teach you how to set different properties of an HTML table using CSS.
You can set following properties of a table −
 The border-collapse specifies whether the browser should control the appearance of
the adjacent borders that touch each other or whether each cell should maintain its
style.
 The border-spacing specifies the width that should appear between table cells.
 The caption-side captions are presented in the <caption> element. By default, these
are rendered above the table in the document. You use the caption-side property to
control the placement of the table caption.
 The empty-cells specifies whether the border should be shown if a cell is empty.
 The table-layout allows browsers to speed up layout of a table by using the first
width properties it comes across for the rest of a column rather than having to load
the whole table before rendering it.
Now, we will see how to use these properties with examples.

The border-collapse Property


This property can have two values collapse and separate. The following example uses both
the values −
<html>
<head>
<styletype="text/css">
table.one {border-collapse:collapse;}
table.two{border-collapse:separate;}

td.a{
border-style:dotted;
border-width:3px;
border-color:#000000;
padding:10px;
}
td.b{
border-style:solid;
border-width:3px;
border-color:#333333;
padding:10px;
}
</style>
</head>

<body>
<tableclass="one">
<caption>Collapse Border Example</caption>
<tr><tdclass="a"> Cell A Collapse Example</td></tr>
<tr><tdclass="b"> Cell B Collapse Example</td></tr>
</table>
<br/>

<tableclass="two">
<caption>Separate Border Example</caption>
<tr><tdclass="a"> Cell A Separate Example</td></tr>
<tr><tdclass="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>

The border-spacing Property


The border-spacing property specifies the distance that separates adjacent cells'. borders. It
can take either one or two values; these should be units of length.

If you provide one value, it will applies to both vertical and horizontal borders. Or you can
specify two values, in which case, the first refers to the horizontal spacing and the second to
the vertical spacing −
NOTE − Unfortunately, this property does not work in Netscape 7 or IE 6.
<style type="text/css">
/* If you provide one value */
table.example {border-spacing:10px;}
/* This is how you can provide two values */
table.example {border-spacing:10px; 15px;}
</style>

Now let's modify the previous example and see the effect −
<html>
<head>
<styletype="text/css">
table.one {
border-collapse:separate;
width:400px;
border-spacing:10px;
}
table.two{
border-collapse:separate;
width:400px;
border-spacing:10px50px;
}
</style>
</head>

<body>

<tableclass="one"border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br/>

<tableclass="two"border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>

</body>
</html>

The caption-side Property


The caption-side property allows you to specify where the content of a <caption> element
should be placed in relationship to the table. The table that follows lists the possible values.

This property can have one of the four values top, bottom, left or right. The following
example uses each value.
NOTE − These properties may not work with your IE Browser.
<html>
<head>
<styletype="text/css">
caption.top{caption-side:top}
caption.bottom{caption-side:bottom}
caption.left{caption-side:left}
caption.right{caption-side:right}
</style>
</head>

<body>

<tablestyle="width:400px; border:1px solid black;">


<captionclass="top">
This caption will appear at the top
</caption>
<tr><td> Cell A</td></tr>
<tr><td> Cell B</td></tr>
</table>
<br/>

<tablestyle="width:400px; border:1px solid black;">


<captionclass="bottom">
This caption will appear at the bottom
</caption>
<tr><td> Cell A</td></tr>
<tr><td> Cell B</td></tr>
</table>
<br/>

<tablestyle="width:400px; border:1px solid black;">


<captionclass="left">
This caption will appear at the left
</caption>
<tr><td> Cell A</td></tr>
<tr><td> Cell B</td></tr>
</table>
<br/>

<tablestyle="width:400px; border:1px solid black;">


<captionclass="right">
This caption will appear at the right
</caption>
<tr><td> Cell A</td></tr>
<tr><td> Cell B</td></tr>
</table>

</body>
</html>

The empty-cells Property


The empty-cells property indicates whether a cell without any content should have a border
displayed.

This property can have one of the three values - show, hide or inherit.
Here is the empty-cells property used to hide borders of empty cells in the <table> element.
<html>
<head>
<styletype="text/css">
table.empty{
width:350px;
border-collapse:separate;
empty-cells:hide;
}
td.empty{
padding:5px;
border-style:solid;
border-width:1px;
border-color:#999999;
}
</style>
</head>

<body>

<tableclass="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>

<tr>
<th>Row Title</th>
<tdclass="empty">value</td>
<tdclass="empty">value</td>
</tr>

<tr>
<th>Row Title</th>
<tdclass="empty">value</td>
<tdclass="empty"></td>
</tr>
</table>

</body>
</html>
It will produce the following result −
The table-layout Property
The table-layout property is supposed to help you control how a browser should render or
lay out a table.
This property can have one of the three values: fixed, auto or inherit.
The following example shows the difference between these properties.
NOTE − This property is not supported by many browsers so do not rely on this property.
<html>
<head>
<styletype="text/css">
table.auto{
table-layout:auto
}
table.fixed{
table-layout:fixed
}
</style>
</head>

<body>

<tableclass="auto"border="1"width="100%">
<tr>
<tdwidth="20%">1000000000000000000000000000</td>
<tdwidth="40%">10000000</td>
<tdwidth="40%">100</td>
</tr>
</table>
<br/>

<tableclass="fixed"border="1"width="100%">
<tr>
<tdwidth="20%">1000000000000000000000000000</td>
<tdwidth="40%">10000000</td>
<tdwidth="40%">100</td>
</tr>
</table>

</body>
</html>
It will produce the following result −
10000000000000000 10000000 100

100000000000 10000000

CSS - Lists
Lists are very helpful in conveying a set of either numbered or bullet points. This chapter
teaches you how to control list type, position, style, etc., using CSS.
We have the following five CSS properties, which can be used to control lists −
 The list-style-type allows you to control the shape or appearance of the marker.
 The list-style-position specifies whether a long point that wraps to a second line
should align with the first line or start underneath the start of the marker.
 The list-style-image specifies an image for the marker rather than a bullet point or
number.
 The list-style serves as shorthand for the preceding properties.
 The marker-offset specifies the distance between a marker and the text in the list.
Now, we will see how to use these properties with examples.
The list-style-type Property
The list-style-type property allows you to control the shape or style of bullet point (also
known as a marker) in the case of unordered lists and the style of numbering characters in
ordered lists.
Here are the values which can be used for an unordered list −
Sr.No. Value & Description

1 none
NA

2 disc (default)
A filled-in circle

3 circle
An empty circle

4 square
A filled-in square

Here are the values, which can be used for an ordered list −
Value Description Example

decimal Number 1,2,3,4,5

decimal- 01, 02, 03,


0 before the number
leading-zero 04, 05

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

I, II, III, IV,


upper-roman Uppercase Roman numerals
V

alpha, beta,
lower-greek The marker is lower-greek
gamma

lower-latin The marker is lower-latin a, b, c, d, e

upper-latin The marker is upper-latin A, B, C, D, E

hebrew The marker is traditional Hebrew numbering

armenian The marker is traditional Armenian numbering


georgian The marker is traditional Georgian numbering

cjk-
The marker is plain ideographic numbers
ideographic

hiragana The marker is hiragana a, i, u, e, o,


ka, ki

A, I, U, E, O,
katakana The marker is katakana
KA, KI

hiragana- i, ro, ha, ni,


The marker is hiragana-iroha
iroha ho, he, to

katakana- I, RO, HA,


iroha The marker is katakana-iroha NI, HO, HE,
TO
Here is an example −
<html>
<head>
</head>

<body>
<ulstyle="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ulstyle="list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<olstyle="list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<olstyle="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<olstyle="list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
It will produce the following result −
The list-style-position Property

The list-style-position property indicates whether the marker should appear inside or outside
of the box containing the bullet points. It can have one the two values −
Sr.No. Value & Description

1 none
NA

2 inside
If the text goes onto a second line, the text will wrap underneath the
marker. It will also appear indented to where the text would have
started if the list had a value of outside.

3 outside
If the text goes onto a second line, the text will be aligned with the
start of the first line (to the right of the bullet).

Here is an example −
<html>
<head>
</head>

<body>
<ulstyle="list-style-type:circle;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ulstyle="list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<olstyle="list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>

<olstyle="list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
It will produce the following result −

The list-style-image Property


The list-style-image allows you to specify an image so that you can use your own bullet
style. The syntax is similar to the background-image property with the letters url starting the
value of the property followed by the URL in brackets. If it does not find the given image
then default bullets are used.
Here is an example −
<html>
<head>
</head>

<body>
<ul>
<listyle="list-style-image:url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<ol>
<listyle="list-style-image:url(/https/www.scribd.com/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
It will produce the following result −

The list-style Property


The list-style allows you to specify all the list properties into a single expression. These
properties can appear in any order.

Here is an example −
<html>
<head>
</head>

<body>
<ulstyle="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<olstyle="list-style: outside upper-alpha;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
It will produce the following result −
The marker-offset Property
The marker-offset property allows you to specify the distance between the marker and the
text relating to that marker. Its value should be a length as shown in the following example

Unfortunately, this property is not supported in IE 6 or Netscape 7.

Here is an example −
<html>
<head>
</head>

<body>
<ulstyle="list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>

<olstyle="list-style: outside upper-alpha; marker-offset:2cm;">


<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>
It will produce the following result −
 Maths
 Social Science
 Physics
A. Maths
B. Social Science
C. Physics

XML - Overview
XML stands for Extensible Markup Language. It is a text-based markup language derived
from Standard Generalized Markup Language (SGML).

XML tags identify the data and are used to store and organize the data, rather than
specifying how to display it like HTML tags, which are used to display the data. XML is not
going to replace HTML in the near future, but it introduces new possibilities by adopting
many successful features of HTML.

There are three important characteristics of XML that make it useful in a variety of systems
and solutions −
 XML is extensible − XML allows you to create your own self-descriptive tags, or
language, that suits your application.
 XML carries the data, does not present it − XML allows you to store the data
irrespective of how it will be presented.
 XML is a public standard − XML was developed by an organization called the
World Wide Web Consortium (W3C) and is available as an open standard.

XML Usage
A short list of XML usage says it all −
 XML can work behind the scene to simplify the creation of HTML documents for
large web sites.
 XML can be used to exchange the information between organizations and systems.
 XML can be used for offloading and reloading of databases.
 XML can be used to store and arrange the data, which can customize your data
handling needs.
 XML can easily be merged with style sheets to create almost any desired output.
 Virtually, any type of data can be expressed as an XML document.

Introduction to Programming Languages


A computer is a computational device which is used to process the data under the control of
a computer program. Program is a sequence of instruction along with data.
executing the program, raw data is processed into a desired output format. These computer
programs are written in programming languages which are high level languages.
High level languages are nearly human languages which are more complex then the
computer understandable language which are called machine language, or low level
language.
Basic example of a computer program written in C programming language:
#include<stdio.h>
int main(void)
{
printf("C is a programming language");
return 0;
}
Between high-level language and machine language there are assembly language also called
symbolic machine code. Assembly language are particularly computer architecture specific.
Utility program (Assembler) is used to convert assembly code into executable machine
code. High Level Programming Language are portable but require Interpretation or
compiling toconvert it into a machine language which is computer understood.
Hierarchy of Computer language –

There have been many programming language some of them are listed below:
C Python C++
C# R Ruby
COBOL ADA Java
Fortran BASIC Altair BASIC
True BASIC Visual BASIC GW BASIC
QBASIC PureBASIC PASCAL
Turbo Pascal GO ALGOL
LISP SCALA Swift
Rust Prolog Reia
Racket Scheme Shimula
Perl PHP Java Script
CoffeeScript VisualFoxPro Babel
Logo Lua Smalltalk
Matlab F F#
Dart Datalog dbase
Haskell dylan Julia
ksh metro Mumps
Nim OCaml pick
TCL D CPL
Curry ActionScript Erlang
Clojure DarkBASCIC Assembly
Most Popular Programming Languages –
 C
 Python
 C++
 Java
 SCALA
 C#
 R
 Ruby
 Go
 Swift
 JavaScript
Characteristics of a programming Language –
 A programming language must be simple, easy to learn and use, have good readability
and human recognizable.
 Abstraction is a must-have Characteristics for a programming language in which ability
to define the complex structure and then its degree of usability comes.
 A portable programming language is always preferred.
 Programming language’s efficiency must be high so that it can be easily converted into
a machine code and executed consumes little space in memory.
 A programming language should be well structured and documented so that it is suitable
for application development.
 Necessary tools for development, debugging, testing, maintenance of a program must be
provided by a programming language.
 A programming language should provide single environment known as Integrated
Development Environment(IDE).
 A programming language must be consistent in terms of syntax and semantics.
Web Server

Advertisements

Previous Page
Next Page

Overview
Web server is a computer where the web content is stored. Basically web server is used to
host the web sites but there exists other web servers also such as gaming, storage, FTP,
email etc.
Web site is collection of web pages whileweb server is a software that respond to the request
for web resources.
Web Server Working
Web server respond to the client request in either of the following two ways:
 Sending the file to the client associated with the requested URL.
 Generating response by invoking a script and communicating with database

Key Points
 When client sends request for a web page, the web server search for the requested
page if requested page is found then it will send it to client with an HTTP response.
 If the requested web page is not found, web server will the send an HTTP
response:Error 404 Not found.
 If client has requested for some other resources then the web server will contact to the
application server and data store to construct the HTTP response.
Architecture
Web Server Architecture follows the following two approaches:
1. Concurrent Approach
2. Single-Process-Event-Driven Approach.
Concurrent Approach
Concurrent approach allows the web server to handle multiple client requests at the same
time. It can be achieved by following methods:
 Multi-process
 Multi-threaded
 Hybrid method.
Multi-processing
In this a single process (parent process) initiates several single-threaded child processes and
distribute incoming requests to these child processes. Each of the child processes are
responsible for handling single request.
It is the responsibility of parent process to monitor the load and decide if processes should
be killed or forked.
Multi-threaded
Unlike Multi-process, it creates multiple single-threaded process.
Hybrid
It is combination of above two approaches. In this approach multiple process are created
and each process initiates multiple threads. Each of the threads handles one connection.
Using multiple threads in single process results in less load on system resources.
Examples
Following table describes the most leading web servers available today:
S.N. Web Server Descriptino

1 Apache HTTP Server


This is the most popular web server in the world developed by the
Apache Software Foundation. Apache web server is an open source
software and can be installed on almost all operating systems including
Linux, UNIX, Windows, FreeBSD, Mac OS X and more. About 60%
of the web server machines run the Apache Web Server.

2. Internet Information Services (IIS)


The Internet Information Server (IIS) is a high performance Web
Server from Microsoft. This web server runs on Windows NT/2000 and
2003 platforms (and may be on upcoming new Windows version also).
IIS comes bundled with Windows NT/2000 and 2003; Because IIS is
tightly integrated with the operating system so it is relatively easy to
administer it.

3. Lighttpd
The lighttpd, pronounced lighty is also a free web server that is
distributed with the FreeBSD operating system. This open source web
server is fast, secure and consumes much less CPU power. Lighttpd can
also run on Windows, Mac OS X, Linux and Solaris operating systems.

4. Sun Java System Web Server


This web server from Sun Microsystems is suited for medium and large
web sites. Though the server is free it is not open source. It however,
runs on Windows, Linux and UNIX platforms. The Sun Java System
web server supports various languages, scripts and technologies
required for Web 2.0 such as JSP, Java Servlets, PHP, Perl, Python, and
Ruby on Rails, ASP and Coldfusion etc.

5. Jigsaw Server
Jigsaw (W3C's Server) comes from the World Wide Web Consortium.
It is open source and free and can run on various platforms like Linux,
UNIX, Windows, and Mac OS X Free BSD etc. Jigsaw has been
written in Java and can run CGI scripts and PHP programs.
Introduction to Web Server
This article provides a brief review of web servers.
This article provides a brief review of web servers.
A web server is a software program that serves web pages to web users (browsers).

A web server delivers requested web pages to users who enter the URL in a web browser.
Every computer on the internet that contains a web site must have a web server program.

The computer in which a web server program runs is also usually called a "web server". So,
the term "web server" is used to represent both the server program and the computer in
which the server program runs.

Characteristics of web servers

A web server computer is just like any other computer. The basic characteristics of web
servers are:
 It is always connected to the internet so that clients can access the web pages hosted
by the web server.
 It always has an application called "web server" running.
In short, a "web server" is a computer that is connected to the internet/intranet and has
software called "web server". The web server program will always be running in the
computer. When a user tries to access a website hosted by the web server, it is actually the
web server program that delivers the web page that the client asks for.

All web sites in the internet are hosted in web servers sitting in various parts of the world.

Is a Web Server hardware or software?

Mostly, Web server refers to the software program, that serves the clients request. But
sometimes, the computer in which the web server program is installed is also called a "web
server".
Web Server, Behind the Scenes

When I type in an URL such as http://www.ASP.NET and click on some link, I dropped into
this page.

But what happens behind the scenes to bring you to this page and make you read this line of
text.

So now, let's see what is actually happening behind the scenes.

The first you might do is, you type the http://www.asp.net/ in the address bar of your
browser and press your return key.

We could break this URL into the following two parts:


1. The protocol we will use to connect to the server (http)
2. The server name ( ASP.NET )
And the following process happens:
 The browser breaks up the URL into these parts and then it tries to communicate with
the server looking up for the server name.
 The server is identified through a unique IP address but the alias for the IP address is
maintained in the DNS Server or the Naming server.
 The browser looks up these naming servers, identifies the IP address of the server
requested and gets the site and gets the HTML tags for the web page.
 Finally it displays the HTML Content in the browser.
Where is my web server?

When you try to access a web site, you don't really need to know where the web server is
located. The web server may be located in another city or country, but all you need to do is,
type the URL of the web site you want to access in a web browser. The web browser will
send this information to the internet and find the web server. Once the web server is located,
it will request the specific web page from the web server program running in the server. The
Web server program will process your request and send the resulting web page to your
browser. It is the responsibility of your browser to format and display the web page to you.

How many web servers are needed for a web site?

Typically, there is only one web server required for a web site. But large web sites like
Yahoo, Google, MSN and so on will have millions of visitors every minute. One computer
cannot process such huge numbers of requests. So, they will have hundreds of servers
deployed in various parts of the world so that can provide a faster response.

How many web sites can be hosted in one server?

A web server can host hundreds of web sites. Most of the small web sites in the internet are
hosted on shared web servers. There are several web hosting companies who offer shared
web hosting. If you buy a shared web hosting from a web hosting company, they will host
your web site in their web server along with several other web sites for a fee.

Examples of web server applications:


1. IIS
2. Apache
Server Basics
A server in its most simple form is just a PC running software that is responsible for
coordinating some form of communication between nodes on a network. There are four
requirements for a server:

1. Computer Hardware
2. Operating System (OS)
3. Server Software
4. Connections between the devices on the network.
The hardware can be as simple as a standard desktop PC or as complex as a blade server rack
mounted in a large server farm. The minimum requirement for the OS is that it must support
networking. This may be accomplished by using Windows XP, or it may be a more complex
OS that was specifically designed for networking, like Windows 2008 Server or some
versions of Linux. It must have a software program running that "serves" something. The
final requirement is a connection to the devices that are to use the services provided by the
server. This may be done through wired, or wireless, connections.
Types of Servers

There are many types of servers that


provide services to affect every aspect
of your life in our digital world. Here
are a few of them:

Web Servers:
When you want to look at a web site
on the internet, you type in an address
and the requested site is displayed on
your screen. This is possible because
there is a computer out on the internet
that is running a program that is
watching for web site requests and
when it sees one it understands, it
retrieves the necessary files and
forwards them to your browser.
Mail Servers:
Have you ever wondered how the
email you just sent to some strange
email address knows how to get to the
desired destination? This is also done
with a server. A mail server
specializes in taking the email
address, translating it to a set of
network directions, and locating a
destination computer that will receive
the email. Once the route has been
determined the message can be
packaged up and sent on its way.
Proxy Servers:
A proxy server is responsible for the
behind the scenes details that are
required to make a network function.
Often, networks become so complex
it is difficult to keep track of all the
nodes that are connected. A proxy
server keeps track of the nodes near it
in the network and passes that
information to other servers looking
for specific computers. This makes it
possible for us to retrieve a document
from a history department computer
in the basement of a building on the
campus of Moscow State University
without ever knowing where the
document came from.
Database Servers:
This brings us to a server that makes
networking your Easy-Wire™
software possible. A database server
is a program that listens for requests
to retrieve data from, or store data to,
a particular database. This allows one
central file to contain information that
can be used in several locations
eliminating duplication and
improving efficiency.

Introduction to Database Management Systems (DBMS)

August 29, 2018 · by Muhammad Raza


4 minute read
Database refers to a collection of electronic records that could be processed to produce
useful information. The data can be accessed, modified, managed, controlled and organized
to perform various data-processing operations. The data is typically indexed across rows,
columns and tables that make workload processing and data querying efficient. There are
different types of databases: Object-oriented, Relational, Distributed, Hierarchical, Network
and others. In enterprise applications, databases involve mission-critical, security-sensitive
and compliance-focused record items that have complicated logical relationships with other
datasets and grow exponentially over time as the userbase increases. As a result, these
organizations require technology solutions to maintain, secure, manage and process the data
stored in databases. This is where Database Management System come into play.
Database Management System (DBMS) refers to the technology solution used to optimize
and manage the storage and retrieval of data from databases. DBMS offers a systematic
approach to manage databases via an interface for users as well as workloads accessing the
databases via apps. The management responsibilities for DBMS encompass the information
within databases; the processes applied to databases such as access and modification; as well
as the logical structure of the database. DBMS also facilitates additional administrative
operations such as change management, disaster recovery, compliance and performance
monitoring, among others.
In order to facilitate these functions, DBMS has the following key components:
 Software: DBMS is primarily a software system that can be considered as a
management console or an interface to interact with and manage databases. The
interfacing also spreads across real-world physical systems that contribute data to the
backend databases. The OS, networking software and the hardware infrastructure is
involved in creating, accessing, managing and processing the databases.
 Data: DBMS contains operational data, access to database records and metadata as a
resource to perform the necessary functionality. The data may include files with such as
index files, administrative information and data dictionaries used to represent data flows,
ownership, structure and relationships to other records or objects.
 Procedures: While not a part of the DBMS software, procedures can be considered as
instructions on using DBMS. The documented guidelines assist users in designing,
modifying, managing and processing databases.
 Database Languages: These are components of the DBMS used to access, modify, store
and retrieve data items from databases; specify database schema; control user access and
perform other associated database management operations. Types of DBMS languages
include Data Definition Language (DDL), Data Manipulation Language (DML),
Database Access Language (DAL) and Data Control Language (DCL).
 Query Processor: As a fundamental component of the DBMS, the Query Processor acts
as an intermediary between users and the DBMS data engine in order to communicate
query requests. When users enter an instruction in SQL language, the command is
executed from the high-level language instruction to a low-level language that the
underlying machine can understand and process to perform the appropriate DBMS
functionality. In addition to instruction parsing and translation, the Query Processor also
optimizes queries to ensure fast processing and accurate results.
 Runtime Database Manager: A centralized management component of DBMS that
handles functionality associated with runtime data, which is commonly used for context-
based database access. This component checks for user authorization to request the
query; processes the approved queries; devises an optimal strategy for query execution;
supports concurrency so that multiple users can simultaneously work on same databases;
and ensures integrity of data recorded into the databases.
 Database Manager: Unlike runtime database manager that handles queries and data at
runtime, the database manager performs DBMS functionality associated with the data
within databases. Database manager allows a set of commands to perform different
DBMS operations that include creating, deleting, backup, restore, cloning and other
database maintenance tasks. Database manager may also be used to update the database
with patches from vendors.
 Database Engine: This is the core software component within the DBMS solution that
performs the core functions associated with data storage and retrieval. A database engine
is also accessible via APIs that allow users or apps to create, read, write and delete
records in databases.
 Reporting: The report generator extracts useful information from DBMS files and
displays it in structured format based on defined specifications. This information may be
used for further analysis, decision making or business intelligence.
The following diagram demonstrates the schematic of a DBMS system:

DBMS was designed to solve the fundamental problems associated with storing, managing,
accessing, securing and auditing data in traditional file systems. Traditional database
applications were developed on top of the databases, which led to challenges such as data
redundancy, isolation, integrity constraints and difficulty in managing data access. A layer of
abstraction was required between users or apps and the databases at a physical and logical
level. By introducing a technology solution to manage databases in the form of DBMS
software, the following key benefits are realized:
 Data Security: DBMS allows organizations to enforce policies that enable compliance
and security. The databases are available for appropriate users as per organizational
policies. The DBMS system is also responsible to maintain optimum performance of
querying operations while ensuring the validity, security and consistency of data items
updated to a database.
 Data Sharing: Fast and efficient collaboration between users.
 Data Access and Auditing: Controlled access to databases. Logging associated access
activities allows organizations to audit for security and compliance.
 Data Integration: Instead of operating island of database resources, a single interface is
used to manage databases with logical and physical relationships.
 Abstraction and Independence: Organizations can change the physical schema of
database systems without necessitating changes to the logical schema that govern
database relationships. As a result, organizations can upgrade storage and scale the
infrastructure without impacting database operations. Similarly, changes to the logical
schema can be applied without altering the apps and services that access the databases.
 Uniform Management and Administration: A single console interface to perform
basic administrative tasks makes the job easier for database admins and IT users.
For data-driven business organizations, DBMS can turn into extremely complex technology
solutions that may require dedicated resources and in-house expertise. The size, cost and
performance of a DBMS varies with the system architecture and use cases, and should
therefore be evaluated accordingly. Also, a DBMS failure can incur significant losses to
organizations that fail to maintain optimal functionality of a DBMS system.
What is Data?
In simple words data can be facts related to any object in consideration.
For example your name, age, height, weight, etc are some data related to you.
A picture , image , file , pdf etc can also be considered data.
What is a Database?
Database is a systematic collection of data. Databases support storage and manipulation of
data. Databases make data management easy. Let's discuss few examples.
An online telephone directory would definitely use database to store data pertaining to
people, phone numbers, other contact details, etc.
Your electricity service provider is obviously using a database to manage billing , client
related issues, to handle fault data, etc.
Let's also consider the facebook. It needs to store, manipulate and present data related to
members, their friends, member activities, messages, advertisements and lot more.
We can provide countless number of examples for usage of databases .
Click here if the video is not accessible

What is a Database Management System (DBMS)?


Database Management System (DBMS) is a collection of programs which enables its users
to access database, manipulate data, reporting / representation of data .
It also helps to control access to the database.
Database Management Systems are not a new concept and as such had been first
implemented in 1960s.
Charles Bachmen's Integrated Data Store (IDS) is said to be the first DBMS in history.
With time database technologies evolved a lot while usage and expected functionalities of
databases have been increased immensely.
Types of DBMS
Let's see how the DBMS family got evolved with the time. Following diagram shows the
evolution of DBMS categories.

There are 4 major types of DBMS. Let's look into them in detail.
 Hierarchical - this type of DBMS employs the "parent-child" relationship of storing
data. This type of DBMS is rarely used nowadays. Its structure is like a tree with
nodes representing records and branches representing fields. The windows registry
used in Windows XP is an example of a hierarchical database. Configuration settings
are stored as tree structures with nodes.
 Network DBMS - this type of DBMS supports many-to many relations. This usually
results in complex database structures. RDM Server is an example of a database
management system that implements the network model.
 Relational DBMS - this type of DBMS defines database relationships in form of
tables, also known as relations. Unlike network DBMS, RDBMS does not support
many to many relationships.Relational DBMS usually have pre-defined data types that
they can support. This is the most popular DBMS type in the market. Examples of
relational database management systems include MySQL, Oracle, and Microsoft SQL
Server database.
 Object Oriented Relation DBMS - this type supports storage of new data types. The
data to be stored is in form of objects. The objects to be stored in the database have
attributes (i.e. gender, ager) and methods that define what to do with the data.
PostgreSQL is an example of an object oriented relational DBMS.
What is a Database?
A database is a separate application that stores a collection of data. Each database has one or
more distinct APIs for creating, accessing, managing, searching and replicating the data it
holds.
Other kinds of data stores can also be used, such as files on the file system or large hash
tables in memory but data fetching and writing would not be so fast and easy with those
type of systems.
Nowadays, we use relational database management systems (RDBMS) to store and manage
huge volume of data. This is called relational database because all the data is stored into
different tables and relations are established using primary keys or other keys known
as Foreign Keys.
A Relational DataBase Management System (RDBMS) is a software that −
 Enables you to implement a database with tables, columns and indexes.
 Guarantees the Referential Integrity between rows of various tables.
 Updates the indexes automatically.
 Interprets an SQL query and combines information from various tables.
RDBMS Terminology
Before we proceed to explain the MySQL database system, let us revise a few definitions
related to the database.
 Database − A database is a collection of tables, with related data.
 Table − A table is a matrix with data. A table in a database looks like a simple
spreadsheet.
 Column − One column (data element) contains data of one and the same kind, for
example the column postcode.
 Row − A row (= tuple, entry or record) is a group of related data, for example the data
of one subscription.
 Redundancy − Storing data twice, redundantly to make the system faster.
 Primary Key − A primary key is unique. A key value can not occur twice in one
table. With a key, you can only find one row.
 Foreign Key − A foreign key is the linking pin between two tables.
 Compound Key − A compound key (composite key) is a key that consists of multiple
columns, because one column is not sufficiently unique.
 Index − An index in a database resembles an index at the back of a book.
 Referential Integrity − Referential Integrity makes sure that a foreign key value
always points to an existing row.
MySQL Database
MySQL is a fast, easy-to-use RDBMS being used for many small and big businesses.
MySQL is developed, marketed and supported by MySQL AB, which is a Swedish
company. MySQL is becoming so popular because of many good reasons −
 MySQL is released under an open-source license. So you have nothing to pay to use
it.
 MySQL is a very powerful program in its own right. It handles a large subset of the
functionality of the most expensive and powerful database packages.
 MySQL uses a standard form of the well-known SQL data language.
 MySQL works on many operating systems and with many languages including PHP,
PERL, C, C++, JAVA, etc.
 MySQL works very quickly and works well even with large data sets.
 MySQL is very friendly to PHP, the most appreciated language for web development.
 MySQL supports large databases, up to 50 million rows or more in a table. The
default file size limit for a table is 4GB, but you can increase this (if your operating
system can handle it) to a theoretical limit of 8 million terabytes (TB).
 MySQL is customizable. The open-source GPL license allows programmers to
modify the MySQL software to fit their own specific environments.
What is Microsoft Access? A Brief Introduction for New Users
by noah | Sep 16, 2016 | MS Access | 5 comments

Microsoft Access is a type of database software that


is used to store information for reporting, referencing and analysis. With Microsoft Access,
you can analyze large amounts of data faster and more efficiently than with Excel or other
types of spreadsheets.
If you’ve been considering a database application for your business, or you’re finding that
traditional spreadsheets just aren’t cutting it anymore, Microsoft Access may be just what
you’re looking for.
Let’s explore some of the basic functions of Access and how they can help your business be
more productive.
Short Introduction to Microsoft Access
Access is most popular for its tables, forms and queries. The database tables are similar to
spreadsheets, so you shouldn’t have much trouble using the basic functions of the program.
However, it does take time to learn the full features.
When setting up a database, you may list the subject matter of each column, just as you
would with a spreadsheet, and add as many columns as you’d like. When this is completed,
each row leaves room for more data input.
One feature that users really like is that they don’t need to finalize the tables manually. Also,
Access has a query function that allows information to be combined from more than one
table, and you can even specify the conditions. This saves a lot of time because you don’t
have to look through rows and rows of information.

Drug databases and web resources play a very important role in the pharmaceutical field.
Check out this lesson to learn all about these databases and resources and how they can
benefit a pharmacist.
So Many Drugs!
There are thousands of medications available in the U.S. These medications range from
simple cough medications to more powerful medications such as chemotherapy drugs. It
would be impossible for any pharmacist to know about each and every drug available. Just
imagine you are a pharmacist and a patient or doctor asks you about a medication that is
unfamiliar to you. How can you answer questions about a drug that you do not know much
about?
Luckily for pharmacists, there are drug databases and web resources that are useful tools that
can be used to learn more about a medication or drug that may be somewhat unfamiliar to
them.

There are thousands of drugs available, and drug


databases can help pharmacists learn about drugs that
may be unfamiliar to them.
Drug Databases
Drug databases are sites where information about drugs and medications are stored, and one
of the largest (and most commonly used) drug databases is compiled by the Food & Drug
Administration (FDA). The FDA is a federal agency that oversees and controls all
medications in the U.S., which includes:
 Over-the-counter (OTC) medications
 Prescription medications
 Dietary supplements
 Vaccines
The FDA drug database includes most of the drugs they have approved in the U.S. since
1939. Best of all, this database is extremely easy to use. To search this database, you simply
need to go to the FDA drug databases website. Once you get to this website, you are able to
search the database by typing in the name of the drug or by typing in any active ingredient of
a drug.
Additionally, the FDA drug database can be used to search drugs that are currently going
through clinical trials and/or the approval process. The FDA must approve a drug before it is
legally able to be sold and used in the U.S. Therefore, drug companies must formally submit
an application to the FDA for the drug to be approved. The drugs that have not been
submitted to the FDA but not yet approved can be found in this database.

You might also like