Internet & Web Engineering Course Code:CS-228 Credit Hours (3+1) Lab 4a Block Level Elements In HTML Instructor: Muhammad Zeeshan Haider Ali Blog Address: https://zeeshanaliatisp.files.wordpress.com
Hyper Text Markup Language
Block-level Elements A block-level element always starts on a new line and takes up the full width available The <div> element is a block-level element. Examples of block-level elements: <div> <h1> - <h6> <p> <form>
Inline Elements An inline element does not start on a new line and only takes up as much width as necessary. This is an inline <span> element inside a paragraph. Examples of inline elements: <span> <a> <img>
The <div> Element The <div> element is a block-level element that is often used as a container for other HTML elements. The <div> element has no required attributes, but style and class are common.
Example Div <!DOCTYPE html> <html> <body> <div style="background-color:black; color:white; padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> </body> </html> Example Div
Output
The <span> Element The <span> element is an inline element that is often used as a container for some text. The <span> element has no required attributes, but style and class are common.
Example Span <!DOCTYPE html> <html> <body> <h1>My <span style="color:red">Important</span> Heading</h1> </body> </html>
Output
Classing Block Elements <!DOCTYPE html> <html> <head> <style> div.cities { background-color:black; color:white; margin:20px; padding:20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> Classing Block Elements
<h2>Paris</h2> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> <p>Situated on the Seine River, it is at the heart of the Île-de-France region, also known as the région parisienne.</p> <p>Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.</p> </div> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> <p>It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.</p> <p>The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.</p> </body> </html>
Output
Layout <!DOCTYPE html> <html> <head> <style> #header { background-color:black; color:white; text-align:center; padding:5px; } #nav { line-height:30px; background-color:#eeeeee; height:300px; width:100px; float:left; #section { width:350px; padding:10px; #footer { clear:both; </style> </head> <body> Layout
<div id="header"> <h1>City Gallery</h1> </div> <div id="nav"> London<br> Paris<br> Tokyo<br> <div id="section"> <h2>London</h2> <p> London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. </p> Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium. <div id="footer"> Copyright © W3Schools.com </body> </html>
Output
Responsive Web Design
<!DOCTYPE html> <html lang="en-us"> <head> <style> .city { float: left; margin: 5px; padding: 15px; width: 300px; height: 300px; border: 1px solid black; } </style> </head> <body> <h1>Responsive Web Design Demo</h1> <div class="city"> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class="city"> <h2>Paris</h2> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p> </div> <div class="city"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> <p>It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </div> </body> </html> Example
Output
Iframe - Set Height and Width Use the height and width attributes to specify the size. The attribute values are specified in pixels by default, but they can also be in percent (like "80%").
Example <!DOCTYPE html> <html> <body> <iframe src="demo_iframe.htm" style="border:none"></iframe> </body> </html>
Output