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>
<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.
<!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
<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.
Posts
0 comments:
Post a Comment