Friday, September 29, 2017

Html Blocks

Hello guys! it's realy been a while, in my previous tutorial i talked about HTML iframes and how to apply it on a web page. Now today am gonna be talking about HTML blocks and the types we have.
All the HTML elements can be grouped into two different categories (a) Block Level Elements (b) Inline Elements. Now without wasting much time lets quickly take a look at the both of them.

Block Elements
Block elements show on the screen as if they have a line break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr/>, <blockquote>, and <address> elements are all block elements. They all start on their own new line, and anything that follows them appears on its own new line.

Inline Elements
Inline elements, on the other hand, can show withhin sentences and do not have to show on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> tags are all inline elements.

Grouping HTML Elements
There are two important tags in which we can use  to group various HTML tags.
1.            <div> tag
2.            <span> tag

The <div> tag
The div tag is a very important block level tag which plays a vital role in grouping various HTML tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define parts or sections of the webpage using <div> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS.

Example
Below is a simple and short example of how to use the <div> tag to group various tags. CSS will be treated in a seperate tutorial soon enough but it will be applied here to show the usage of the <div> tag.
<!DOCTYPE html>
<html>
<head>
<title>Div Tag</title>
</head>
<body>
<!--  First group of tags  -->
<div style="color:blue">
<h5>This is the first group</h5>
<p>Following is the list of games</p>
<ul>
<li>Ps4</li>
<li>Ps3</li>
<li>Ps2</li>
<li>Xbox360</li>
<li>Psp</li>
</ul>
</div>

<!--  second group of tags  -->
<div style="color:green">
<h5>This is the second group</h5>
<p>Following is the list of foods</p>
<ul>
<li>Beans</li>
<li>Rice</li>
<li>Yam</li>
<li>Indomie noodles</li>
<li>Bread</li>
</ul>
</div>

</body>
</html>
You can try the above code out to see the results your self and feel free to drop your questions in areas you don't understand fully, they will be attended to.

The <span> tag 
The HTML <span> tag is an inline element and it can be used to group inline elements in a HTML document. This tag also does not provide any visual change on the block but has more meaning when applied with CSS.

Example
 Below is a simple and short example of how to use the <span> tag to group various tags. CSS will be treated in a seperate tutorial soon enough but it will be applied here to show the usage of the <span> tag.
<!DOCTYPE html>
<html>
<head>
<title>Span Tag</title>
</head>
<body>

<p>This is <span style="color:red">red</span> and this is <span style="color:blue">blue</span></p>

</body>
</html>
You can also try this code out using your text editor to get a practical knowledge of what you are reading.

Alright thats it for this tutorial, in my next tutorial i will be talking about HTML backgrounds, bye for now. 


Links to previous tutorials on HTML : Html IntroductionHtml TagsHtml Document StructureThe Doctype Declaration, Html Basic Tags, Html Basic Tags2 , Html Elements , Html Attributes , Html Attribute 2 , Html Formating , Html Formatting[CONTINUATION] , Grouping Content , HTML-Phrase TagsHtml-Phrase Tags[CONCLUSION] , Html-Meta Tags , Html-Comments , Html Images , Html Tables , Html Tables(Conclusion) , Html List , Html Text Links , Html Image LinksHtml Frames , Html Iframes

Share:

0 comments:

Post a Comment