Analysis of algorithm and data structure

In the last post I told you about data structures and algorithms. In this post we will see how can we do the analysis of algorithm. I write all my posts are in question and answer format I hope you can understand what I am trying to explain to you but if anyone have any doubts/question please do ask it in comments column and in case if you like my posts please share it on Facebook or tell your friends about it.
What is an algorithm? An algorithm is a step-by-step instruction to a given problem
.
Why do we do analysis of algorithm? Suppose we want to go from city A to city B. There are many ways of doing this: by flight,by bus, by train and also by cycle. Depending on the availability and convenience we choose the one which suits us. Similarly in computer science there can be many algorithms there can be many algorithms that exist for solving the same problem(for example sorting algorithm has lot of algorithms like insertion sort, selection sort, quick sort and many more). Algorithm analysis help us determine which of them is efficient in terms of time and space consumed.

What are the goals of analyzing and algorithm? The goal of analysis of algorithm is to compare algorithms/solutions mainly in terms of running time but also in terms of other factors(e.g memory, developer's effort etc).

What is running time analysis? It is the process to determine how processing time increases as the size of the problem(input size) increases. Input size is the number of elements in the input and depending on the problem type the input may be of different types.

How to compare algorithms? If we express running time of a given algorithm as a function of input size n(i.e, f(n) ) we can compare these different functions corresponding to running time and this kind of comparison is independent of machine time,programming style etc.
What is rate of growth? The rate at which running time increases as the function of input is called rate of growth.
What are different type of analysis?There are three different type of analysis and these are:
1.worst case analysis:

• defines the input for which algorithm takes huge time
• input is the one for which algorithm runs slower.

2. best case analysis:

• defines the input for which algorithm takes the lowest time
• Input is the one for which algorithm runs the fastest.

3. Average case analysis:

• provides the prediction about running time of algorithm.
• Assumes that input is random.

 So what is complexity of an algorithm? The complexity of a algorithm is a f(n) which measures the time and space used by an algorithm in terms of its input size n.

Time complexity

How long does this sorting program run? It possibly takes a very long time on large inputs (that is many strings) until the program has completed its work and gives a sign of life again. Sometimes it makes sense to be able to estimate the running time before starting a program. Nobody wants to wait for a sorted phone book for years! Obviously, the running time depends on the number n of the strings to be sorted. Can we find a formula for the running time which depends on n?
Having a close look at the program we notice that it consists of two nested for-loops. In both loops the variables run from 0 to n, but the inner variable starts right from where the outer one just stands. An if with a comparison and some assignments not necessarily executed reside inside the two loops. A good measure for the running time is the number of executed comparisons. In the first iteration n comparisons take place, in the second n-1, then n-2, then n-3 etc. So 1+2+...+n comparisons are performed altogether. According to the well known Gaussian sum formula these are exactly 1/2·(n-1)·n comparisons. Figure 2.8 illustrates this. The screened area corresponds to the number of comparisons executed. It apparently corresponds approx. to half of the area of a square with a side length of n. So it amounts to approx. 1/2·n².

How does this expression have to be judged? Is this good or bad? If we double the number of strings to be sorted, the computing time quadruples! If we increase it ten-fold, it takes even 100 = 10² times longer until the program will have terminated! All this is caused by the expression n². One says: Sorting by minimum search has quadratic complexity. This gives us a forefeeling that this method is unsuitable for large amounts of data because it simply takes far too much time.
So it would be a fallacy here to say: “For a lot of money, we'll simply buy a machine which is twice as fast, then we can sort twice as many strings (in the same time).” Theoretical running time considerations offer protection against such fallacies.
The number of (machine) instructions which a program executes during its running time is called its time complexity in computer science. This number depends primarily on the size of the program's input, that is approximately on the number of the strings to be sorted (and their length) and the algorithm used. So approximately, the time complexity of the program “sort an array of n strings by minimum search” is described by the expression c·n².
c is a constant which depends on the programming language used, on the quality of the compiler or interpreter, on the CPU, on the size of the main memory and the access time to it, on the knowledge of the programmer, and last but not least on the algorithm itself, which may require simple but also time consuming machine instructions. (For the sake of simplicity we have drawn the factor 1/2 into c here.) So while one can make c smaller by improvement of external circumstances (and thereby often investing a lot of money), the term n², however, always remains unchanged.

The O-notation

In other words: c is not really important for the description of the running time! To take this circumstance into account, running time complexities are always specified in the so-called O-notation in computer science. One says: The sorting method has running time O(n²). The expression O is also called Landau's symbol.
Mathematically speaking, O(n²) stands for a set of functions, exactly for all those functions which, “in the long run”, do not grow faster than the function n², that is for those functions for which the function n² is an upper bound (apart from a constant factor.) To be precise, the following holds true: A function f is an element of the set O(n²) if there are a factor c and an integer number n₀ such that for all n equal to or greater than this n₀ the following holds:

f(n) ≤ c·n².

The function n² is then called an asymptotically upper bound for f. Generally, the notation f(n)=O(g(n)) says that the function f is asymptotically bounded from above by the function g.
A function f from O(n²) may grow considerably more slowly than n² so that, mathematically speaking, the quotient f / n² converges to 0 with growing n. An example of this is the function f(n)=n. However, this does not hold for the function f which describes the running time of our sorting method. This method always requires n² comparisons (apart from a constant factor of 1/2). n² is therefore also an asymptotically lower bound for f. This f behaves in the long run exactly like n². Expressed mathematically: There are factors c₁ and c₂ and an integer number n₀ such that for all n equal to or larger than n₀ the following holds:

c₁·n² ≤ f(n) ≤ c₂·n².

So f is bounded by n² from above and from below. There also is a notation of its own for the set of these functions: Θ(n²).
Figure  contrasts a function f which is bounded from above by O(g(n)) to a function whose asymptotic behavior is described by Θ(g(n)): The latter one lies in a tube around g(n), which results from the two factors c₁ and c₂.

Figure 2.9. The asymptotical bounds O and Θ

Thereby we can estimate the order of magnitude of the method used; in general, however, we cannot make an exact running time prediction. (Because in general we do not know c, which depends on too many factors, even if it can often be determined experimentally.
Frequently the statement is found in the manual that an operation takes “constant time”. By this it is meant that this operation is executed with a constant number of machine instructions, independently from the size of the input. The function describing the running time behavior is therefore in O(1). The expressions “linear time” and “logarithmic time” describe corresponding running time behaviors: By means of the O-notation this is often expressed as “takes time O(n) and O(log(n))”, respectively.
Furthermore, the phrase “expected time” O(g(n)) often appears in the manual. By this it is meant that the running time of an operation can vary from execution to execution, that the expectation value of the running time is, however, asymptotically bounded from above by the function g(n).
Back to our sorting algorithm: A runtime of Θ(n²) indicates that an adequately big input will always bring the system to its knees concerning its running time. So instead of investing a lot of money and effort in a reduction of the factor c, we should rather start to search for a better algorithm.
To give an example, we read on the manual page of array in the section “Implementation” that the method sort() of arrays implements the known Quicksort algorithm whose (expected) complexity is O(n·log(n)) which (seen asymptotically) is fundamentally better than Θ(n²). This means that Quicksort defeats sorting by minimum search in the long run: If n is large enough, the expression c₁·n·log(n) certainly becomes smaller than the expression c₂·n², independently from how large the two system-dependent constants c₁ and c₂ of the two methods actually are; the quotient of the two expressions converges to 0. (For small n, however, c₁·n·log(n) may definitely be larger than c₂·n²; indeed, Quicksort does not pay on very small arrays compared to sorting by minimum search.)
Now back to the initial question: Can we sort phone books with our sorting algorithm in acceptable time? This depends, in accordance to what we said above, solely on the number of entries (that is the number of inhabitants of the town) and on the system-dependent constant c. Applied to today's machines: the phone book of Saarbrücken in any case, the one of Munich maybe in some hours, but surely not the one of Germany. With the method sort() of the class array, however, the last problem is not a problem either.

Space complexity

The better the time complexity of an algorithm is, the faster the algorithm will carry out his work in practice. Apart from time complexity, its space complexity is also important: This is essentially the number of memory cells which an algorithm needs. A good algorithm keeps this number as small as possible, too.
There is often a time-space-tradeoff involved in a problem, that is, it cannot be solved with few computing time and low memory consumption. One then has to make a compromise and to exchange computing time for memory consumption or vice versa, depending on which algorithm one chooses and how one parameterizes it.

Continue Reading

Video tag in HTML5

In the last post I told how to optimize images? and what are the major image file formats that are supported by leading browsers. After reading that post you may be thinking what if I want to post a video rather than an image can I do that with the help of HTML?. Are there any video formats just like image file formats? The answer to all these question lies in this post.
We all watch videos on you tube and and admire them but what exactly a video is composed of? In general we can say that a video has some graphics/pictures and a certain audio pertaining to that particular video.

I will first tell you how you can put a video on your page with the help of new HTML5 element called <video> element and then I will talk about different video formats. I know I am discussing this a lot ahead but it is very similar to image element, so I decided to tell this after image element. Let's have a first look of <video> element:

<video src="video/myvideo.mp4" width="500" height="400" controls autoplay poster="firstimage/jpg"></video>

If you analyze the above code you will find many similarity between <image> element and <video>element. Like <image>element it also have 'src','width' and 'height' attributes. You already know about these attributes but let's understand their meaning in context of <video>element.

width and height attributes: The width and height attributes set the width and height of the
video display area (also known as the “viewport”). If you specify a poster, the poster image will be scaled to the width and height youspecify. The video will also be scaled, but will maintain its aspect ratio (e.g., 4:3 or 16:9), so if there’s extra room on the sides, or the top and bottom, the video will be letter‑boxed or pillar‑boxed to fit into the display area size. You should try to match the native dimensions of the video if you want the best performance (so the browser doesn’t have to scale in real time). 
src: The src attribute is just src attiribute of <image> element src - it is a url that tells the browser where to find the source file.
controls: It's a Boolean attribute. What is a Boolean attribute? A attribute that has no value is called Boolean attribute. It is either there or not. If it is there, then the Browser will add its 
built in controls to the video display. The controls vary by browsers, so check out each browser to see what they look like.
autoplay: The autoplay Boolean attribute tells the browser to start playing the video as soon
as it has enough data.
poster: The browser will typically display one frame of the video as a “poster” image to represent the video. If you remove the autoplay attribute, you’ll see this image displayed before you click play. It’s up to the browser to pick which frame to show; often, the browser will just show the first frame of the video…which is often black. If you want to show a specific image, then it’s up to you to create an image to display, and specify it by using the poster attribute.
preload: The attribute preload is typically used for fine-grained control over how video loads
for optimization purposes. Most of the time, the browser chooses how much video to load,
based on things like whether autoplay is set and the user’s bandwidth. You can override
this by setting preload to “none” (none of the video is downloaded until the user “plays” it), “metadata” (the video metadata is downloaded, but no video content), or “auto”
to let the browser make the decision.

Lets' now take a look at video formats. So what is a video format? Think about it this way: a video file contains two parts, a video part and an audio part, and each part is encoded (to reduce size and to allow it to be played back more efficiently) using a specific encoding
type. That encoding, for the most part, is what no one can agree on—some browser makers are enamored with H.264 encodings, others really like VP8, and yet others like the open source alternative, Theora. And to make all this even more complicated, the file that holds the video and audio encoding (which is known as a container) has its own format with its own name.

What is a container? A container is a file format that's used to package up the data video,audio and meta data information.

What is a codec? A codec is a software used to encode or decode a specific encoding of video or audio.

 We will be looking at three major video formats and these are :
1. Mp4 container :Mp4 video format contains H.264 video encoding and AAC audio encoding files for encoding video and audio. H.264 is licensed by MPEG-LA group. There are more more than one kind H.264; each is known as profile. Mp4/H.264 is supported by
Safari and IE9+. You may find support in some versions of chrome.
2. WebM container: WebM video format contains Vp8 video encoding and vorbis audio encoding. WebM was designed by google to work with Vp8 encoded videos WebM/Vp8 is supported by Firefox, Chrome, and Opera. You will find WebM formatted videos with .webm extension
3.Ogg container: Ogg video format contains Theora video encoding and Vorbis audio encoding. Theora is an open source codec. Video encoded with Theora are usually contained in Ogg file wilth .ogv extension. Ogg/Theora is supported by Firefox, Chrome and opera.

That was all for this post in the next post we will write a program to display video on our web page and how to use our video element so that it is accessed by all major browsers.
 

Continue Reading

How to optimize images

In the last post I discussed about <image> tag and its different attributes .We even made a program in which we used <image> tag to showcase our awesome pic of Eiffel tower in our program. But what an image really? An image is a collection of pixels.

So what is a pixel?
A pixel is the smallest picture element containing information that makes up all digital images.
A pixel is the building block of a digital image and typically a photo contains pixels that are made up from 24-bit pixels. Basically, this means that each pixel can be made up from 8 bits of red, blue and green colour information. The 8 bits from each primary colour is actually 256 individual tones or hues, which can be combined into a pixel that can be any 1 of around 16.7 Million different colours.
When it comes to viewing a photo on your computer screen you are also viewing pixels. Your computer screen is made up of it's own pixels and a typical screen size is 1024 x 768 (786432 pixels) or just under 0.8 Megapixels. A computer screen can usually display either 16 bit or 24 bit colour and as we just mentioned 24 bit is ~16.7M colours. Computer screens generally display at 96dpi (dots per inch)
.
What is an image format?Image file formats are standardized means of organizing and storing digital images. Image files are composed of digital data in one of these formats that can be rasterized for use on a computer display or printer. An image file format may store data in uncompressed, compressed, or vector formats. Once rasterized, an image becomes a grid of pixels, each of which has a number of bits to designate its color equal to the color depth of the device displaying it.

What are image file sizes? Image file size is positively correlated to the number of pixels in an image and the color depth, or bits per pixel, of the image. Images can be compressed in various ways, however. Compression uses an algorithm that stores an exact representation or an approximation of the original image in a smaller number of bytes that can be expanded back to its uncompressed form with a corresponding decompression algorithm. Considering different compressions, it is common for two images of the same number of pixels and color depth to have a very different compressed file size. Considering exactly the same compression, number of pixels, and color depth for two images, different graphical complexity of the original images may also result in very different file sizes after compression due to the nature of compression algorithms. With some compression formats, images that are less complex may result in smaller compressed file sizes. This characteristic sometimes results in a smaller file size for some lossless formats than lossy formats. For example, graphically simple images (i.e. images with large continuous regions like line art or animation sequences) may be losslessly compressed into a GIF or PNG format and result in a smaller file size than a lossy JPEG format.

So what are image compressions?
There are two types of image file compression algorithms: lossless and lossy.
Lossless compression algorithms reduce file size while preserving a perfect copy of the original uncompressed image. Lossless compression generally, but not exclusively, results in larger files than lossy compression. Lossless compression should be used to avoid accumulating stages of re-compression when editing images.
Lossy compression algorithms preserve a representation of the original uncompressed image that may appear to be a perfect copy, but it is not a perfect copy. Often lossy compression is able to achieve smaller file sizes than lossless compression. Most lossy compression algorithms allow for variable compression that trades image quality for file size.

What are different image file formats supported by major browsers? I will give the description of all the image file formats in a plain simple trying to be as uncomplicated as possible.\

JPEG(Joint Photographic Experts Group) = The JPEG or jpg file format is a very popular image file format because it uses a lot less hard drive space then other formats, but it does have limitations. The JPEG format compresses the picture every time it is saved and that means the file size and picture quality are reduced every time it is saved. There is nothing that you can do to stop picture compression in the JPG or jpg format. If you are interested in maintaining a pictures quality at the highest level, you do not want to use .jpg or .JPG. While other formats have better text quality, JPG/jpg does work well enough in many cases. It is Internet compatible. The average JPEG pictures is about 1.0 mega bites (1943x1702 24-bit RGB color image). jpeg is a lossy compression(in most cases).
GIF(Graphics Interchange Format) = GIF is limited to an 8-bit palette, or 256 colors. This makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images. The GIF format supports animation and is still widely used to provide image animation effects. It also uses a lossless compression that is more effective when large areas have a single color, and ineffective for detailed images or dithered images.
PNG(Portable Network Graphics) = The PNG  file format was created as the free, open-source successor to GIF. The PNG file format supports 8 bit paletted images (with optional transparency for all palette colors) and 24 bit truecolor (16 million colors) or 48 bit truecolor with and without alpha channel - while GIF supports only 256 colors and a single transparent color. Compared to JPEG, PNG excels when the image has large, uniformly colored areas. Thus lossless PNG format is best suited for pictures still under edition - and the lossy formats, like JPEG, are best for the final distribution of photographic images, because in this case JPG files are usually smaller than PNG files. The Adam7-interlacing allows an early preview, even when only a small percentage of the image data has been transmitted. PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel. PNG is designed to work well in online viewing applications like web browsers so it is fully streamable with a progressive display option. PNG is robust, providing both full file integrity checking and simple detection of common transmission errors. Also, PNG can store gamma and chromaticity data for improved color matching on heterogeneous platforms. Some programs do not handle PNG gamma correctly, which can cause the images to be saved or displayed darker than they should be. Animated formats derived from PNG are MNG and APNG. The latter is supported by Mozilla Firefox and Opera and is backwards compatible with PNG.
TIFF(Tagged Image File Format) = The TIFF image format uses a huge amount of disk space. A typical TIFF picture uses about 6MB to 18MB. TIFF pictures will fill your hard drive very quickly but your pictures will be and stay at an extremely high quality. The TIFF format is well known to support a number of compression types. You can create a TIFF without compression or with something like LZW or CCITT G4. This format is great for the images that you are saving for history's sake, old family pictures, etc.. Large, non-streaming, files may not be suitable for the Internet, but suitable is one thing compatible is another thing. TIFF files are Internet compatible. There are a number of TIFF plug ins to different web browser; these can easily be found on the net using google. They may or may not support the same compression types or TIFF variants... but still, if you look around carefully you are bound to find something that will do the job. The average TIFF pictures is about 9.9 mega bites (1943x1702 24-bit RGB color image).
RAW = The RAW image format is exactly what it says. It is the raw image recorded directly from the cameras image sensor with no adjustments or corrections. It is ready to be adjusted and edited on your computer. Most people don't want to do that for every picture they take. This format is aimed at the professional photographer who wants the absolute best quality from every picture and is willing to work on each and every picture. Every camera manufacturer has their own version of RAW. It is not Internet compatible.

Let's see the difference between major file formats through an example because a picture is worth thousand words:

Let's take a look at pros and cons of all major image file formats through an example:

That's was all for this post. In the next post I will discuss about fonts and why they are important in making a great web page.

Continue Reading

Data Structure and algorithm

Lot's of students face problem in understanding data structures. So I decided to write on this subject. I will try to make data structure as simple as possible but if there is any simpler way to understand concepts in data structure please do tell me by commenting. I'll appreciate your effort and your feedback will help me to make this content more understanding. Before knowing data structure we should be familiar with a term called algorithm.

So what is an algorithm? An algorithm is a finite step-by-step list of well defined instruction to solve a particular problem. Let's understand algorithms by a simple example:



What is the purpose studying algorithms?We study algorithms to make a action plan to complete a particular task. 

So what is this term data structures? A data structure is a specialized format for organizing and storing data. General data structure types include the array, the file, the record, the table, the tree, and so on. Any data structure is designed to organize data to suit a specific purpose so that it can be accessed and worked with in appropriate ways. In computer programming, a data structure may be selected or designed to store data for the purpose of working on it with various algorithms. In simple terms we can say "a data structure is a particular way of storing and organizing data in a computer so that it can be used efficiently".

Why do we study data structures?We study data structures so that we can learn to write more efficient programs. But why must programs be efficient when new computers are faster every year? The reason is that our ambitions grow with our capabilities. Instead of rendering efficiency needs obsolete, the modern revolution in computing power and storage capability merely raises the efficiency stakes as we computerize more complex tasks.Creating efficient programs has little to do with “programming tricks” but rather is based on good organization of information and good algorithms.A programmer who has not mastered the basic principles of clear design
is not likely to write efficient programs.

Why a programmer should have thorough knowledge of data structures?
1. Each data structure and each algorithm has costs and benefits. Practitioners
need a thorough understanding of how to assess costs and benefits to be able
to adapt to new design challenges. This requires an understanding of the
principles of algorithm analysis, and also an appreciation for the significant
effects of the physical medium employed (e.g., data stored on disk versus
main memory).
2. Related to costs and benefits is the notion of tradeoffs. For example, it is quite
common to reduce time requirements at the expense of an increase in space
requirements, or vice versa. Programmers face tradeoff issues regularly in all
phases of software design and implementation, so the concept must become
deeply ingrained.
3. Programmers should know enough about common practice to avoid reinventing
the wheel. Thus, programmers need to learn the commonly used
data structures, their related algorithms, and the most frequently encountered
design patterns found in programming.
4. Data structures follow needs. Programmers must learn to assess application
needs first, then find a data structure with matching capabilities. To do this
requires competence in principles 1, 2, and 3.

What is the relation between an algorithm and a program?Look at an algorithm as a formula for working something out. A program is a series of instructions for the computer that uses algorithms to execute the desired task. Let's understand this through and example:
Simple algorithm Area of rectangle A = length times Depth
Program to work out area would be
Ask user to input length
Ask user to input depth
Use area algorithm to calculate area
Display answer

So what is the relation between data structure and algorithm? Data structures use algorithms for its different operations like sorting, searching, inserting, removing, and overall manipulation of their respective data.

What is the relation between data structures,algorithm and programs?
Algorithms +   Data structures = Programs.This simple yet powerful expression  very aptly defines the relationship between the three above mentioned terms.

That's all for this post and in the next post we will learn about control structures and complexity of algorithms.

Continue Reading

Image tag in detail

 So today we will look at image tag in detail. In the last post I told you about image tag and about it's two attributes - 'src' and 'alt'. Today we will make a short program in which we will use <img> tag and its different attributes. But before making our program let's take a look at relative and absolute addresses.So what is a relative address? A url that is relative only shows a partial address - like images/image.jpg - and the success or failure of finding the file is contingent on certain conditions being met - which means the outcome can and will vary, depending largely how how the directories within your website are structured.it  is given relative to root folder. 
What is absolute address? 
An url that is absolute shows the complete address. In other words, there is no confusion about where this item is located, as the absolute URL gives the entire path to that file. http :// mysite.com/ images/image.jpg is an example of an absolute url.

Let's take a case I am on a tour of France and I took a wonderful picture of Eiffel tower and I want this picture on my web page. And I even want to tell the world where is Eiffel tower. I can tell the world where is Eiffel tower by a map. So here is our map:

View Larger Map

So we got a map in our web page by using google maps and now we want to show our awesome pic that we clicked on our tour of France. Lets write the code for it:
<!doctype html>
<html lang = "en">
   <head>
        <meta charset = "utf-8">
        <title>My first web page.</title>
   </head>
      <body>

            <p> I went on a tour of France and I clicked          an awesome pic of Eiffel tower. Here is my pic:</p>

           <img src ="images/eiffeltower.jpg" alt="eiffel tower" width="600" height="800" />

      </body>
</html>

so here is our web page:

I went on a tour of France and I clicked an awesome pic of Eiffel tower.Here is my pic:
  

In the above program we saw two new attributes - 'width' and height 'attribute'. 'width attribute of image tag decides the width of displayed image and height attributes decides the height of a displayed image. That's all for today in the next post we will see how we can optimize our images so they are displayed according to our wish.

Continue Reading

HTML tags and Elements

Last time we saw how to write HTML syntax?. Today we will look at different  HTML tags that are commonly used in web pages .I already told you about basic tags - <html>,<head>,<body> in the last post. So let's take a recap.
<!doctype html>
   <html lang = "en">
     <head>
      <meta charset = "utf-8">
      <title>My first web page.</title>
    </head>
      <body>
       <p>Welcome to my first web page.</p>
      </body>
</html>
That was all that we did last time. But before looking at different tags lets take a look at block and inline elements. I told you that an element is a combination of opening tag,closing tag and content.
Element = opening tag + content + closing tag.

So what are block element? Browser places line breaks before and after the content of a block elements, when a web page is displayed on a web browser. Block elements have a very important role in Box model and positioning of elements which we will study a little later. Now lets take a look at inline elements. What are inline elements?. A browser doesn't places any line breaks before and after the content of these elements, when a web page is displayed on a web browser. One more thing about block and inline elements is that if a web page contains more than one block and inline element then all the block elements will be displayed top to bottom in the order they appear in a HTML page and all the inline elements will be displayed left to right in the order they appear in a program or HTML page.Let's look at different tags.
<p> = Paragraph tag.
It is used for writing content in HTML pages. It is a block element. Use this tag whenever you want to write paragraphs.
<img> = Image tag.
This tag is used for placing images on a web page. Image tag contains two attributes. First we should know what is a attribute? Attributes are properties of elements .Each Attribute has a value which is enclosed in double quotes. First attribute is 'src ' and the second attribute is 'alt'. The 'src' attribute of image tag provides the source location of a image file and 'alt' provides the alternative name for image,this name is displayed whenever image is broken or in cases when your image is inaccessible to browser due to reasons like low bandwidth etc. Image is an inline element. So if you place multiple images in your web page they all will be displayed left to right in the order they appear in your code.Here is our full image tag:
          <img src="Image/image.jpg" alt="image">
<a> = anchor tag.
This tag is used for linking web pages. It has a attribute called 'href' whose value stores the source address this can be relative address or absolute address.I will discuss absolute and relative address in my next post.
for example:

                       <a href="adress/index.html">HOME</a>
  
<br> = Breakline tag.
 It is used whenever a line break is needed after any element. It is a void element that means this element doesn't house any content.

<ol> = Ordered list.
<ul> = Unordered list.

<ol> tag is used whenever we want to write ordered lists in a web page. Ordered lists can be referenced in any of the following ways.
1. Numerals(1,2,3,4............)
2. Characters(a,b,c,d..........)
3. Roman numerals(i, ii, iii, iv,........) 

<ul> tag is used whenever we want an unordered lists for items in a web page. Unordered lists are usually marked with bullet points but bullet points can be changed by using CSS as we will see a little later.
Example of unordered list:
       <ol>
           <li>item1</li>
           <li>item2</li>
           <li>item3</li>
     </ol>

• item1
• item2 
• item3 

Both <ol> and <ul> come with a <li> tag.Both <ol> and <ul> are block elements.
<li> = list items.

<form> = Form tag.
 It is used for developing forms in a web page. 
Form tag have many other elements which we will look in detail when will study forms.

<div>= div tag.
It is used for grouping block elements so that they can be styled together. It is a block element.

<span> = span tag.
It is used for grouping inline element so that they can be styled together.

<blockquote> = blockquote tag.
This tag is used for writing quotes in HTML. It is an block element. The content written inside this tag appears as quoted when displayed in a web browser.

That's all for today in the next post I will discuss about absolute and relative address and we will also have a glimpse of new HTML5 elements.

 
 

Continue Reading

Understanding HTML syntax

What is Syntax? Syntax defines the rules of writing a  particular language. Let's build our first  first web page today. During the process of building the web page we will look at the basic building blocks of a web page. We start a html document with opening <html> tag and end it with a closing </html> tag.
<html>   //first step in writing html page.
</html>
 
Inside the <html> tags we include <head> tags and <body> tags.
<html>
     <head>
     </head>
           <body>
           </body>
</html>
Inside the head tag we have <title> tag. It gives title to a web page and it is displayed on the title bar when a web page is loaded on a web browser. The process of writing tags inside another tag is called nesting. The outer tag is called as parent tag and tag's inside the parent tag are called children of parent tag - first-child,second-child, ..............nth-child. So let's include <title> tag inside  <head> tag.
<html>
     <head>
          <title>My first web page</title>
      </head>
        <body>
              <p>welcome to my first web page</p>
        </body>
</html> 
Let's refine our page according to latest HTML standard. To do this task let's take a look at history of html versions and DOCTYPEs. So what is a DOCTYPE? The html syntax requires a DOCTYPE to be specified to ensure that the web browser renders the page in a standard mode. Other than this DOCTYPE has no other purpose.
There are different DOCTYPEs for different versions of html.

1.HTML 4.01 transitional: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://w3.org/TR/html4/strict.dtd">
2.HTML 4.01 STRICT:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://w3.org/TR/html4/frameset.dtd">
3.HTML 3.2:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

DOCTYPEs of XHTML  versions:

1.XHTML 1.0 transitonal:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.XHTML 1.0  strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

3.XHTML 1.0 frameset:  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

4.XHTML 2.0 transitonal:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN"> 

The History of HTML

The first version of HTML didn't have a version number, it was just called "HTML" and was used to put up simple Web pages back in 1989 - 1995. In 1995, the IETF (Internet Engineering Task Force) standardized HTML and numbered it "HTML 2.0".

 In 1997, the World Wide Web Consortium (W3C) presented the next version of HTML, HTML 3.2. It was folllowed by HTML 4.0 in 1998 and 4.01 in 1999.

Then the W3C announced that it would not be creating new versions of HTML, and would begin to focus on extensible HTML or XHTML. They recommend Web designers use HTML 4.01 for their HTML documents.
Around this point, development split off. The W3C focused on XHTML 1.0, and things like XHTML Basic became recommendations in 2000 and onwards. But Web designers didn't want to move to the rigid structure of XHTML, so in 2004, the Web Hypertext Application Technology Working Group (WHATWG) began working on a new version of HTML that is not as strict as XHTML called HTML5.
Difference between HTML and XHTML?
There are a number of differences between XHTML and HTML. But for now, all you need to know is that XHTML is HTML 4.01 re-written as an XML application. If you write XHTML, all your attributes will be quoted, your tags closed, and you could edit it in an XML editor. HTML is a lot looser than XHTML because you can leave quotes off attributes, leave tags like <p> without a closing tag </p> and so on.

The latest version of HTML is HTML5 and DOCTYPE for it is<!doctype html>. So we don't have to write those complex doctype's as we used write in older versions of the HTML. There are many new features of HTML5 which we will see later.
Before writing our code according to HTML5 standard lets look at one more thing i.e., character encoding.
So what is character encoding?
For the HTML syntax, Web developers are required to declare the character encoding. There are three ways to do that:

• At the transport level; for instance, by using the HTTP Content-Type header.
• Using a Unicode Byte Order Mark (BOM) character at the start of the file. This character provides a signature for the encoding used.
• Using a meta element with a charset attribute that specifies the encoding within the first 1024 bytes of the document; for instance, <meta charset="UTF-8"> could be used to specify the UTF-8 encoding. This replaces the need for <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> although that syntax is still allowed.

For the XML syntax, Web developers have to use the rules as set forth in the XML specification to set the character encoding.
So here is our code in HTML5 standard:
<!doctype html>
<html lang="en"> <!--it tells browser that that this program is   written in english -->
<head>
<meta charset="utf-8">
<title>My first web page.</title>
</head>
<body>
<p>Welcome to my first web page.</p>
</body>
</html>
so that's all for today in the next post I will discuss about different HTML elements.




 




•  

Continue Reading