lets know about browser, web servers and its type

Before we look at the another concepts used to build Websites it is important to consider the Different ways in which people access the web And clarify some terminology

Browsers

People access websites using software called a web browser. Popular examples include Firefox, Internet Explorer, Safari, Chrome, and Opera. In order to view a web page, users might type a web address into their browser, follow a

Link from another site, or use a bookmark. Software manufacturers regularly release new versions of browsers with new features and supporting new additions to languages. It is important, however, to remember that many computer owners will not be running the latest versions of these browsers. Therefore you cannot rely on all visitors to your site being able to use the

Latest functionality offered in all browsers.

Web Servers

When you ask your browser for a web page, the request is sent across the Internet to a special computer known as a web server which hosts the website. Web servers are special computers that are constantly connected to the Internet, and are optimized to send web pages out to people who request them.

A Web server is a program that uses HTTP (Hypertext Transfer Protocol) to serve the files that form Web pages to users, in response to their requests, which are forwarded by their computers' HTTP clients. Dedicated computers and appliances may be referred to as Web servers as well.

The process is an example of the client/server model. All computers that host Web sites must have Web server programs. Leading Web servers include Apache (the most widely-installed Web server), Microsoft's Internet Information Server (IIS) and nginx (pronounced engine X) from NGNIX. Other Web servers include Novell's NetWare server, Google Web Server (GWS) and IBM's family of Domino servers

Web servers often come as part of a larger package of Internet- and intranet-related programs for serving email, downloading requests for File Transfer Protocol (FTP) files, and building and publishing Web pages. Considerations in choosing a Web server include how well it works with the operating system and other servers, its ability to handle server-side programming, security characteristics, and the particular publishing, search engine and site building tools that come with it.

The Main Purpose of a Web Server

A web server’s main purpose is to store web site files and broadcast them over the internet for you site visitor’s to see. In essence, a web server is simply a powerful computer that stores and transmits data via the internet. When someone visits a web page on your site their browser communicates with your web server, sending and receiving information that ultimately dictates what appears on the visitor’s computer screen. Thus, the main purpose of a web server is to store and transfer web site data upon the request of a visitor’s browser.

Why Are Web Servers Needed?

Without web servers the internet as we know it would cease to exist. Web servers are an integral part of the way the internet works. The web hosting industry is simply used to lease out web servers, providing average business owners and individuals with the opportunity to use high-tech servers that make it possible to expand their outreach to the entire world. Without rental web servers the internet would be a fraction of the size it is today, as most web site owners can afford to buy their own web server in cash.

Web servers are the gateway between the average individual and the world wide web, yet surprisingly web hosting plans start at only a couple of dollars per month. Now that you’re familiar with web servers you can begin shopping for a quality web hosting plan without the usual confusion that most novices experience.

 Some big companies run their own web servers, but it is more common to use the services of a web hosting company who charge a fee to host your site.

There are many type of server available.

-Shared Hosting

Shared Hosting is widely used as “Web Server”. It’s usually way cheaper than its dedicated counterpart. Basically, you’re getting an account into the host control panel, thus allowing multiple website to run on a SINGLE server. This solution is mostly used for web development, blogging and or personal websites (low traffic). It doesn’t scale very well if you need additional resources (limited hardware) and you could be affected by noisy neighbors; businesses overselling hardware and/or other user using too much resources on the server, affecting your overall performance.

-VPS/Cloud Server

Cloud servers are based on virtualization technology. In simple terms, you get a fraction (CPU, RAM, and Storage) of a clustered infrastructure. These “Virtual Machines” can independently host their own operating system, creating a virtual private environment/server. These systems cost a fraction of the price of a Dedicated Server, because, again, you’re sharing with multiple users. This VPS/Cloud is scalable, allowing users to scale up their infrastructure and resources (CPU, RAM, and Storage), on-demand. This solution is also mostly used for web development, blogging, personal websites, e-commerce and web applications.

-Dedicated Server

A dedicated server or Bare Metal Server is a physical server. With a dedicated server you control all of the server’s resources (CPU, RAM, and Storage) and you won’t be affected by noisy neighbor. This type of solution is robust and particularly useful for large websites (High Traffic, ecommerce), intranet, virtualization/private cloud (VPS/Containers), etc. They usually cost more than Cloud /VPS, but offer a better performance/$ ratio if the extra performance is required.

Summarize what we explained here

A Server, in general, is a piece of software running on a machine that serves client’s requests (Through any protocol, Tcp, HTTP… ) , those requests could be calculating a value, retrieving some data, inserting some data, deleting some data, or anything you can think about. The returned data could be represented in many ways, most commonly XML, JSON, HTML.

A Web Server is not different at all, it is more specialized to serve web pages (HTML content, javascript, css, or anything related), through HTTP protocol.

Devices

People are accessing websites on an increasing range of devices including desktop computers, laptops, tablets, and mobile phones. It is important to remember that various devices have different screen sizes and some have faster connections to the web than others.

Screen readers

Screen readers are programs that read out the contents of a computer screen to a user. They are commonly used by people with visual impairments. In the same way that many countries have legislation that require public buildings to be accessible to those with disabilities, many laws have also been passed that require websites be accessible to those with disabilities. Throughout this book you will see several references to screen readers.

 These notes will help ensure that the sites you create are accessible to people who use such software. It is interesting to note that technologies similar to those employed by screen readers are also being used in other areas where people are unable read a screen, such as when they are driving or jogging.

if you like my post then you can subscribed my blogger on right side bar area by putting your email address and hit subscribed button to get connected with my blogger. you can also like my blogger using Facebook button on right sidebar just bellow the email subscription.

Thanks for your time....

how to make list in web pages

How to make List in HTML

There are lots of occasions when we

need to use lists. HTML provides us with

three different types:

Ordered lists

Ordered lists  are lists where each item in the list is numbered. For example, the list might be a set of steps for a recipe that must be performed in order, or a legal contract where each point needs to be identified by a section number.

Unordered lists

Unordered lists are lists that begin with a bullet point (rather than characters that indicate order).

Definition lists

 Definition lists are made up of a set of terms along with the

Definitions for each of those terms.

First of all we see how to make Order list

Ordered Lists

<ol>

The ordered list is created with the <ol> element.

<li>

Each item in the list is placed between an opening <li> tag and a closing </li> tag. (The li stands for list item.) Browsers indent lists by default. Sometimes you may see a type attribute used with the <ol> element to specify the type of numbering (numbers, letters, roman numerals and so on). It is better to use the CSS liststyle- type property. which we cover later.

Example:

<ol>

<li>Chop potatoes into quarters</li>

<li>Simmer in salted water for 15-20

minutes until tender</li>

<li>Heat milk, butter and nutmeg</li>

<li>Drain potatoes and mash</li>

<li>Mix in the milk mixture</li>

</ol>

Result

Unordered List

<ul>

The unordered list is created with the <ul> element.

<li>

Each item in the list is placed between an opening <li> tag and a closing </li> tag. (The li

stands for list item.)

Browsers indent lists by default. Sometimes you may see a type attribute used with the <ul>

element to specify the type of bullet point (circles, squares, diamonds and so on).

<ul>

<li>1kg King Edward potatoes</li>

<li>100ml milk</li>

<li>50g salted butter</li>

<li>Freshly grated nutmeg</li>

<li>Salt and pepper to taste</li>

</ul>

Result

Definition Lists

<dl>

The definition list is created with the <dl> element and usually consists of a series of terms and their definitions. Inside the <dl> element you will usually see pairs of <dt> and <dd> elements.

<dt>

This is used to contain the term being defined (the definition term).

<dd>

This is used to contain the definition. Sometimes you might see a list where there are two terms used for the same definition or two different definitions for the same time

<dl>

<dt>Sashimi</dt>

<dd>Sliced raw fish that is served with

condiments such as shredded daikon radish or

ginger root, wasabi and soy sauce</dd>

<dt>Scale</dt>

<dd>A device used to accurately measure the

weight of ingredients</dd>

<dd>A technique by which the scales are removed

from the skin of a fish</dd>

<dt>Scamorze</dt>

<dt>Scamorzo</dt>

<dd>An Italian cheese usually made from whole

cow's milk (although it was traditionally made

from buffalo milk)</dd>

</dl>

Result

Nested List

You can put a second list inside an <li> element to create a sublist or nested list. Browsers display nested lists indented further than the parent list. In nested unordered lists, the browser will usually change the style of the bullet point too.

<ul>

<li>Mousses</li>

<li>Pastries

<ul>

<li>Croissant</li>

<li>Mille-feuille</li>

<li>Palmier</li>

<li>Profiterole</li>

</ul>

</li>

<li>Tarts</li>

</ul>

Result

Example List

<html>

<head>

<title>Lists</title>

</head>

<body>

<h1>Scrambled Eggs</h1>

<p>Eggs are one of my favourite foods. Here is a

recipe for deliciously rich scrambled eggs.</p>

<h2>Ingredients</h2>

<ul>

<li>2 eggs</li>

<li>1tbs butter</li>

<li>2tbs cream</li>

</ul>

<h2>Method</h2>

<ol>

<li>Melt butter in a frying pan over a medium

heat</li>

<li>Gently mix the eggs and cream in a bowl</li>

<li>Once butter has melted add cream and eggs</li>

<li>Using a spatula fold the eggs from the edge of

the pan to the center every 20 seconds (as if

you are making an omelette)</li>

<li>When the eggs are still moist remove from the

heat (it will continue to cook on the plate

until served)</li>

</ol>

</body>

</html>

if you want to get more understanding see my video on this topic
by clicking on How to make list in HTML video

If you like my bloger don't forget to give me the feedback.Thanks for your time.

how to insert image in web page

Use of <img> tageTML

To add an image into the page you need to use an <img> element. This is an empty element (which means there is no closing tag). It must carry the following two attributes:

lets discuss its attributes.

src

first one is src stands for source.Where your image is located. This attribute tells the browser where it can find the image file. This will usually be a relative URL pointing to an image on your own site.

put your image and html in same folder. its help you and browser as well to locate url easily.  

alt

This provides a text description of the image which describes the image if you cannot see it.

title

You can also use the title attribute with the <img> element to provide additional information about the image. Most browsers will display the content of this attribute in a tootip when the user hovers over the image.

The text used in the alt attribute is often referred to as alt text. It should give an accurate description of the image content so it can be understood by screen reader software (used by people with visual impairments) and search engines. If the image is just to make a page look more attractive (and it has no meaning, such as a graphic dividing line), then the alt attribute should still be used  but the quotes should be left empty.

Hieght and width of image

You will also often see an <img> element use two other attributes that specify its size:

height

This specifies the height of the image in pixels.

width

This specifies the width of the image in pixels. Images often take longer to load than the HTML code that makes up the rest of the page. It is, therefore, a good idea to specify the size of the image so that the browser can render the rest of the text on the page while leaving the right amount of space for the image that is still loading.

The size of images is increasingly being specified using CSS rather than HTML.

 Where to place image in your code

Where an image is placed in the code will affect how it is displayed. 

1: before a paragraph

The paragraph starts on a new line after the image.

2: inside the start of a paragraph 

The first row of text aligns with the bottom of the image.

 3: in the middle of a paragraph

The image is placed between the words of the paragraph that it appears in.

---

class attribute in HTML

What is Class attribute and how it use in HTML?
Today I will tell you the use of class attribute in html.
So let’s start.....

Class Attribute

Every HTML element can also carry a class attribute. Sometimes, rather than uniquely identifying one element within a document, you will want a way to identify several elements as being different from the other elements on the page. If you want to make change in one paragraph like style color etc not affected the whole page just these particular paragraphs then you have to use class attribute for achieving this purpose. Then use this class name in css languages to make it different from other.

 For example, you might have some paragraphs of text that contain information that is more important than others and want to distinguish these elements, or you might want to differentiate between links that point to other pages on your own site and links that point to external sites. To do this you can use the class attribute. Its value should describe the class it belongs to. In the example on the left, key paragraphs have a class attribute whose value is important.

Mostly class attribute used in div tag to separate the text format using css. by using class attribute inside div tag we are able to change the particular paragraph to give it specific format like color, background , text color which is different to the sounding paragraphs.

The class attribute on any element can share the same value. So, in this example, the value of important could be

Used on headings and links, too.

By default, using these attributes does not affect the presentation of an element. It will only change their appearance if there is a CSS rule that indicates it should be displayed differently.

In this example, CSS has been applied to make elements with a class attribute whose value is important uppercase and elements with a class attribute whose value is admittance red

If you would like to indicate that an element belongs to several classes, you can separate class names with a space.

use of Doctype HTML and their use

Why we use <!DOCTYPE html>

use of doc type in html is as following!!!

Definition and Usage

The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag.

The <!DOCTYPE> declaration is not an HTML tag/element; it is an instruction to the web browser about what version of HTML the page is written in.

In HTML 4.01, the <!DOCTYPE> declaration refers to a DTD, because HTML 4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

HTML5 is not based on SGML, and therefore does not require a reference to a DTD.

Tip: Always add the <!DOCTYPE> declaration to your HTML documents, so that the browser knows what type of document to expect.

We use it Because there have been several versions of HTML, each web page should begin with a DOCTYPE declaration to tell a browser which version of HTML the page is using (although browsers usually display the page even if it is not included). We will therefore be including one in each example for the rest of the book. As you will see when we come to look at CSS and its box model on page 316, the use of a DOCTYPE can also help the browser to render a page correctly. Because XHTML was written in XML, you will sometimes see pages that use the XHTML strict DOCTYPE start with the optional XML declaration. Where this is used, it should be the first thing in a document. There must be nothing before it, not even a space.

Example
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

i hope you will understand the use of doctype in html . if you did follow my blogger for more tutorials of HTML. Thanks for your valuable time.