Download presentation
Presentation is loading. Please wait.
1
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:
2
Hyper Text Markup Language
3
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>
4
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>
5
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.
6
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
7
Output
8
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.
9
Example Span <!DOCTYPE html> <html> <body>
<h1>My <span style="color:red">Important</span> Heading</h1> </body> </html>
10
Output
11
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
12
<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>
13
Output
14
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
15
<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>
16
Output
17
Responsive Web Design
18
<!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
19
Output
20
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%").
21
Example <!DOCTYPE html> <html> <body> <iframe src="demo_iframe.htm" style="border:none"></iframe> </body> </html>
22
Output
Similar presentations
