Pratika Agnihotri HTML

Table in HTML

Tables are a great way to integrate your content in lesser space. Now, the question is how to make them in HTML. Well, HTML provides a <table></table> tag to insert your table in HTML page. Suppose, I want to create a table to record a top player from each cricket team (World class) .Let me first show you a basic structure-

So, a table is created inside <table></table> tag. Then, to insert a row (remember rows are horizontal, columns are vertical), we use <tr></tr> (table row) tag . Inside <tr>, we use <td></td> (tabular data) . Within <td></td>, we write our content of table. So, where are columns?

The content which you will insert inside <td></td> will make a separate column. For eg. in above code, I have used two <td></td> tags inside each row. It means, I have designed 4X2 table (4 rows, 2 columns).

The output of above code will be something like-

This border may differ in other browsers. I am using advanced version of Opera, so its something different from other browsers. For practical, try running the code after removing border property inside <table> tag and see the effect.

Like this border property, we have many more properties which we can use inside table tag, I will share some common ones-

width – sets the width of table ; align – positions the table in the web page ; bgcolor – sets the background color of the table ; background – we can set image as the background of the table, but remember that image should be in the same folder.

cellspacing – cells are the boxes which contains our content. In above code, I have created 8 cells look carefully. So the space between these cells is cell spacing and we can use this property to increase/decrease the space between cells.

cellpadding – the space between cell and the content in that cell is cell padding.

Let’s implement the above properties in one code. You can create your own table simply by playing with the values in each property.

original table

And it will result the following output-

We can set the content of each row in center by inserting align property – <tr align="center"> or if we wish to align the content of particular cell use- <th align="center">.

We can add heading for each column using <th> tag. We need to replace <td> with <th>. That’s it ! . Content inside ‘th’ tag is always in bold, as well as, is aligned at center. . It works as follows-

We only need to look at the first line. Look, I have used <th> in first row to make ‘Country’ and ‘Player’ as heading of their columns. Now look at its output-

Now, if we want to merge two rows, we use rowspan and if we want to merge two columns, we use colspan.

Suppose, if we want to merge ‘Root and Rohit’ into one and name it as ‘Root’, then this is called rowspan. It’s code will be-

And this will output –

Similarly, if we want to merge columns then –

Run above code and analyse the result. For better understanding of rowspan and colspan, compare both the above codes with original code.

<caption></caption> tag is used to set a small 2-3 word title for the table. Remember it is a paired tag, since it has both opening and closing tags. Caption tag is used after all the rows are done, but before the end of </table> table tag.

So just before this tag </table>, we can write –

<caption align="bottom">Table 8.1</caption>

This will insert a caption at the bottom of the table. We can use align as “top” also, as per our preference. And can insert any piece of content, I have written ‘Table 8.1’, you can write anything.

If you face any issue in above post,share here in comments.

Have ERROR FREE coding.

Pratika Agnihotri HTML

HTML continued… (2)

We have discussed many basic tags of HTML in our previous post.

Here, we will see 2 important topics-

MARQUEE tag

Marquee is such an amazing tag, you can play with it using some of its fascinating properties. You might have seen in some sites there is some image or a text which moves either from left to right or right to left or top to bottom or bottom to top. This movement is due to the use of <marquee>. Look below-

<marquee> tag has three basic properties – scrollamount (decides the speed of movement), behavior (this includes scroll, alternate or slide) and direction (it includes the direction of motion right, left, top, bottom). Try changing the result of these properties and analyze the result by yourself.

Instead of text, we can add any image or even a link to other page and it will also move in the page as per the properties which you will set. Let me now, quickly show you a code with image, as well as a link as a moving item-

In above code I have inserted two <marquee> tags. First <marquee> tag makes a image move while second one is the movement of link. And I have given that link a name ‘Be better at coding’. So you will see this line- ‘Be better at coding’ move and if you click on this line you will jump to some other web page. Remember that to insert any link in a web page, we use <a></a> anchor tag. And inside anchor tag we give the address of page, in which we want to jump, to href. And so, I have done the same thing.

If you run the code as it is, you will see some wonderful result. But again remember that the image should be in the same folder in which your HTML file is located. I have saved my image with “images” and so I have used that name in my HTML file. You should write your image’s name.

Now, while the link or image or text moves in the page, we have no control to stop that. But HTML provides some events using which, if you bring/hover your mouse pointer over that moving image/ text it will stop. And as soon as you remove your mouse pointer, the image/text will resume its movement. So, the two events are- onmouseover and onmouseout. We want that if we bring the mouse pointer over the image or even in its path of movement, it should stop moving and if we remove the mouse pointer over that image, it should start moving. These two actions – stop and start are performed using stop() and start() function. These will be implemented as follows-

I have tried to make this post simple. So, iof you have any confusion or doubt, share it in comments below so that it can be resolved.

Have ERROR-FREE coding…

Pratika Agnihotri HTML

HTML continued…(1)

…continued

HTML tags are of 2 types- Paired and Singular tags. Paired tags have opening and closing tags both. eg- <title></title>, <head></head>, <ul></ul>, many many are available. Singular tags include <br>, <hr>, etc.

We will discuss some mostly used tags here-

<h1></h1> – heading tag ; we have choice to select the size of heading from h1 to h6. Lets see how it is implemented-

You can insert any amount of text in between heading tags. I have copied and pasted the same sentence to make it simple. You can insert any text. Run the above code by yourself, you will see wonderful output.

<p></p> – paragraph tag . Any text other than heading can be inserted here.

<i></i> – italic tag

<b></b> – bold tag

<u></u> – underline tag

<small></small> – lessens the size of text

<big></big> – enlarges the size of text

<sup></sup> – superscript tag

<sub></sub> – subscript tag

I will not explain above tags particularly. You can understand them by seeing the code and then its output.

and here is its output-

TEXT FORMATTING

We can format our text using <font></font> tag. Remember this is a paired tag. I have used some of the font’s properties below like color, size, face, you can make some changes in this and see the result-

One important thing in above code, which you might also be thinking, is – we can select the color of text/content through text, which I have used inside <body> tag, then what is the need of color inside <font> tag and finally what will be the actual color of the content? Blue or red…

Okay, so through <font> we have the choice to change the color of each paragraph, (even) of each line also. (even we can format all the paragraphs differently). This can be done by inserting <font></font> before the line/paragraph which you want to format. Try it yourself and in case you face any problem, comment your problem here and I will give you the proper solution. Never hesitate, after all we are here to learn not hesitate.

And the property inserted at the is always implemented. So, the ‘blue’ color will override ‘red’, and finally text will be blue. The size used above ranges from 1 to 6 and by default it is 3.

IMAGE IN A WEB PAGE

<img src= " " > We have seen how we can insert background image, we can also insert image in the page. Background images cover whole area of screen and we can write any piece of content in it since the whole page is covered with that image. But when we insert image(I am not talking about background image) in a web page, remember that it occupies its space and we cannot over them.The content will be shifted somewhere in the empty space of the screen. Let’s see how we can insert image, and some of its properties –

I have used my image named as “wallpaper”, you should use yours. But remember that it is saved in same folder in which your HTML file is saved. Try changing width and height. Here, alt is for ‘alternative text’. Imagine if your image is not displayed due to some reason, then this text will appear in place of image. border is used to border the image. By default the color of border is black, but you can change by writing text=”pink” inside <body> tag. Try it Yourself.

In order to bring image or anything in center, place that image/anything within <center></center> tag. Got confused somewhat, look below…

Remember, <img> is a singular tag since it has no closing tag, while <center></center> is paired tag.

LIST

<ul> stands for unordered list and <li> for list item. Both are paired tags. The type property is ‘bullets’ by default but I have set it to ‘square‘. Run the code and see the result.

Following is shown an ordered list-

<ol> lists the item with numbering from 1 or from “A” or “a” or even in roman numbers.

We need to change the type for different changes. We can write “a” for numbering in small letters, “i” or ‘I’ for numbering in roman. In above code start tells that numbering should start from 4th position of type. In above code ‘D’ lies in the 4th position of english alphabet, so numbering will start from D, E, F… and so on. Please change the value of type and start and run your code for different different values.

If from any list item, you want to change numbering, it’s possible. Suppose you want that list item 3,4, 5, 6 should be numbered from U,V,W,X instead of C,D,E,F., you can try this-

here, in list item 3rd I have used one property value = “20” and in English alphabet 20 is for ‘U’. So it means from list item 3rd onwards counting will be from U. The value of start, value depends on the type used.

Definition List

This is used to describe some term with its proper term and definition.

Here <dl> is for definition list, <dt> is for definition term , <dd> is definition description. I wanted to describe the term ‘Inflation’ so I placed it inside <dt> and its definition inside <dd>. You may add more terms and see its output. Try it Yourself.

Navigation

Navigation is done using hyperlinks. These hyperlinks are those images/icons/text in web page upon clicking which you navigate to a completely different page. And this is done through <a> anchor tag.

Remember the text formatting code we wrote before. Scroll above and first look at it. Got it… Now suppose in that, I want to add a link upon clicking which I should jump/navigate to my inflation web page.

First, look at the code below and then i will explain the things further-

The above code is same that we wrote during text formatting. Here look at the last line, I have used <a> to create a link to Inflation webpage and that Inflation web page’s html file should be placed in same folder. I have saved my Inflation html file with the name- ‘imagesrc.html’ so I have used it, but you will have different name, so place it here carefully. We can give that link a name, look that I have given it as ‘Inflation Definition’ between anchor tags.You may give it any name. Now as you will run your code in browser you will see a blue link with the same name which you gave, click on it and you will see that you are navigating to your definition’s page.

Instead of this text ‘Inflation Definition’ as link to other page, I can set my image as a link to other web page. So, it’s quite easy

Look at code below –

Look, I have only added my image named ‘wallpaper’ in between <a></a> anchor tags using <img> tag.

If you are having any difficulty, share your problem here in comments. I will look for solution.

continued…

Pratika Agnihotri HTML

HTML Basics

HTML is Hyper Text Markup Language. It is used in designing of structure of web pages and these web pages when are linked together, they form a website.

Hyper Text is something more than the normal text. It is basically, the text displayed on the computer screen or other presentational devices with references (hyperlinks) to other text. Hyperlink is the link upon clicking which we navigate to some different web page.

Markup means that HTML is tag based language. It refers to the sequence of characters or other symbols(tags). Tags are, in some way, like instructions that are embedded into text to perform formatting. They signal web browser to add some features in the normal text.

HTML is interpreted by browser, it can be embedded in text to add formatting and links to other web pages.

Every HTML document(web page) starts with <html> and closes with </html>. The basic structure looks something like-

After <html> tag, comes the <head> tag. Inside <head> tag, we can have <title> or <style> or <link> or <meta> tag.

<title> tag encloses the title of your HTML document. Let me show you the output of above code in my browser…

Now you must have understood <title> tag’s use. Whatever the text we want to be visible in the white screen above, is placed inside <body> tag.

We can insert many properties inside body tag to make our content in the web page look good. Following are some commonly used tags-

bgcolor – used to set background color of web page ; text – used to change the color of text in the web page ; align – used to set the position of text ; background – used to set the image in the background of page.

Here, the point to note is- keep the image in same folder where you have saved your HTML file. And it will be more good if you create your separate folder and store all the HTML files as well as all photos in same folder.

Many face difficulty in setting background. They pay too much attention in the extension of image and as a result they download some image from web and save it as “some_name.jpg”. This should not be done. You save it just with “some_name”, do not insert “.jpg” by yourself. It is automatically done. And even some images are of “.png” extension and many more extensions are available. So after saving your image, to know of what extension your image is – just hover your mouse over the name of image in the folder where you have saved. That will let you know the extension of image. And now you can insert that extension in your HTML file along with name of image.

So the output of above code is-

If you are unable to get the extension, please share your problem in comments here, I will suggest another solution.

Have a ERROR-FREE code !

continued…

Pratika Agnihotri HTML

Why this?

LearnersZone brings a compact form of common programming concepts. Each topic has explanation and readers are requested to post their queries, if any.

The topics can cover any programming language.

So without expanding our intro, LET’S GET STARTED…