Last updated on October 31st, 2020 at 08:05 am.
10 More about HTML divs
In the last video we said that a div is used for grouping elements that we may want to style in a certain way.
In this post let us look at some examples of what a page may look like with div elements in it.
The way I’m going to do this post is by writing explanations within the code samples.
Example one – Simple single div
<!DOCTYPE html> <html> <head> <title>A simple Div Example in HTML</title> </head> <body> <!-- Begin the div In this Div Let us create like a Paragraph of Text with a heading, an image and a link --> <div> <h1>This is a Heading within the div</h1> <!-- Then comes the image which is taken from lorepixel.com--> <img src="https://lorempixel.com/400/200" alt="Image sample" title="Hi"> <p>This is the Paragrapgh which will act like a small article within this div element. .</p> <a href="http://lorempixel.com/"> click here to visit Lorem Pixel.com </a> </div> <!-- End the div element here--> </body> </html>
The above example only has one div element. In the next example let us look at another example with different divs.
Note that you can save the above code in an html file and then click to run it on your browser. Most Text Editors also have a way for you to open the html code in your browser. For instance, in Notepad++ , if you click on run you will choose a browser to run the file in.
Example Two – More than one div with different things on the web page
<!DOCTYPE html> <html> <head> <title>A simple Div Example in HTML</title> </head> <body> <!-- Begin the First div ONE In this Div Let us create like a Paragraph of Text with a heading, an image and a link --> <div> <h1>This is a Heading within the First div</h1> <!-- Then comes the image which is taken from lorepixel.com--> <img src="https://lorempixel.com/400/200" alt="Image sample" title="Hi"> <p>This is the Paragrapgh which will act like a small article within this div element. .</p> </div> <!-- End the first div element here--> <!-- Begin the Second div ONE The second Div will only have links and a horizontal line (<hr>). The <br> creates a line break --> <div> <hr> <h1>This is a Heading within the Second div</h1> <a href="https://bizanosa.com/">Home</a> <br> <a href="https://bizanosa.com/coupons/">Coupons</a> <br> <a href="https://bizanosa.com/sp/">Skillshare</a> <br> </div> <!-- End the second div element here--> </body> </html>
You can copy and save the code into a new HTML file , run it and see the results.
If you would like to learn HTML and CSS
Use the button below: