APC_II_UNIT_2
APC_II_UNIT_2
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.
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.
<body>
Document body related tags
</body>
</html>
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>
<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 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 Angry 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>
<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>
<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.
<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>
<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.
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</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>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<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 = "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>
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>
<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.
<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.
<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.
<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.
<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.
<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.
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
<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>
<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.
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.
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.
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.
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>
<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>
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.
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
<body>
<h1style="color:#36C;">
This is inline CSS
</h1>
</body>
</html>
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.
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>
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>
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>
</body>
</html>
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
alpha, beta,
lower-greek The marker is lower-greek
gamma
cjk-
The marker is plain ideographic numbers
ideographic
A, I, U, E, O,
katakana The marker is katakana
KA, KI
<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 −
<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 −
Here is an example −
<html>
<head>
</head>
<body>
<ulstyle="list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
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>
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.
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
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.
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.
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.
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.
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.
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.
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.
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.
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
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.
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
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
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.