Monday, June 19, 2017

Grouping Content

Hello guys, this is a tutorial on how to group contents together on your HTML document, this grouping is been done by the <div> and <span> elements.
The <div> and <span> elements allows you to group together several elements to create sections or subsections of a page.


For example,you might want to put all of the headers on the page within a <div> element to indicate that all of the elements within that <div> element relates to the headers.You might then attach a style to this <div> element so they display using a special set of style rules.


i will drop an example below so you get a clearer understanding of what am talking about.


Example

<DOCTYPE html>
<html>
<head>
<title>Div Tag Example<title>
</head>
<body>
<div id="nav bar" align="right" >
<a href="#">Home</a>
<a href="#">Contact</a>
<a href="#">About</a>
<a href="#">Advertise</a>
</div>


<div id="main" align="middle" styles="background-color:blue" >

<h4>This is the page main content</h4>
<p>Hello world,am a programmer</p>
</div>
</body>
</html>


You can try the above code out with your text editor for better understanding and dont forget to drop your questions in the comment box,i will attend to them...

<div> element will be treated in detailes in future tutorials and that will be when i start droping tutorials on LAYOUT cus <div> element is used for designing a web page layout,now lets move to <span> element.


Span Element

The <span> element,on the other hand,can be used to group inline elements only,so if you have a part of a sentence or paragragh you would want to group together,you make use of the <span> elements for that.Example goes below.


Example

<DOCTYPE html>
<html>
<head>
<title>Div Tag Example<title>
</head>
<body>
<p>This is an excample of <span style="color:red">span tag</span> along with css</p>
</body>
</html>


You can also try that out using your text editor for better understanding and feel free to drop your questions if you have any,they will be attended to.Thats it for this tutorial,bye for now and GOODLUCK!!!!



Share:

0 comments:

Post a Comment