HTML – Page 2 – LearnersZone

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 , <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.

 – paragraph tag . Any text other than heading can be inserted here.

 – italic tag

 – bold tag

 – underline tag

 – lessens the size of text

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

 – superscript tag

 – 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  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  tag and finally what will be the actual color of the content? Blue or red…

Okay, so through 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 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…

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-