Learning HTML - Day 9
Today is 01 February 2021 and it is my ninth day to learn HTML 🙋
Day 9 - Time 8.00 pm - 9.15 pm
Continuation of Layout - On Day 8 learned about Layout using Float, today will learn Layout using other layout elements
CSS Layout - covered in CSS
HTML Block and Inline elements -
Block elements - In HTML programming, a block-level element is any element that starts a new line (e.g., paragraph) and uses the full width of the page or container. A block-level element can take up one line or multiple lines and has a line break before and after the element.
Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content.
A block level element has a top and a bottom margin, whereas an inline element does not.
Code of a block element -
<html>
<head>
<title>My webpage</title>
</head>
<body>
<div style="border:2px solid blue; background-color:green; width:200px;">IT uses the full width of the page or container. A block-level element can take up one line or multiple lines and has a line break before and after the element.uses the full width of the page or container.
</div>
<p>IT uses the full width of the page or container. A block-level element can take up one line or multiple lines and has a line break before and after the element.</p>
</body>
</html>
Output - 
Here are the block-level elements in HTML:
<address><article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
Let us use all the block elements and check
Address Element - The <address> tag defines the contact information for the author/owner of a document or an article.
The contact information can be an email address, URL, physical address, phone number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always add a line break before and after the <address> element.
<html>
<head>
<title>My webpage</title>
</head>
<body>
<h3>Address</h3>
<address style="border:1px; color:blue;">
My address is :<br>
House No 1<br>
Street Name XYZ<br>
Country DEF<br>
</address>
</body>
</html>
Output 
Article - Independent self contained element
Potential sources for the <article> element:
Forum post
Blog post
News story
Note: The <article> element does not render as anything special in a browser. However, you can use CSS to style the <article> element
Code - <html>
<head>
<title>My webpage</title>
<style>
*{
box-sizing:border-box;
}
.container{
margin:0;
padding:5px;
background-color:lightgray;}
#article{
border:2px solid blue;
padding:5px;
background-color:white;}
</style>
</head>
<body>
<h3>Article</h3>
<article class="container">
<h1>Just a random paragraph</h1>
<article id="article">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</article><br>
<article id="article">
Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.
</article>
</article>
</body>
</html>
Output - 
Aside - The <aside> tag defines some content aside from the content it is placed in.
The aside content should be indirectly related to the surrounding content.
Tip: The <aside> content is often placed as a sidebar in a document.
Note: The <aside> element does not render as anything special in a browser. However, you can use CSS to style the <aside> element
Code - <html>
<head>
<title>My Webpage</title>
<style>
aside{
border:2px solid blue;
padding:15px;
margin-left: 15px;
text-align:center;
font-family:comic sans;
color:white;
background-color:grey;
width:30%px;
float:right;
font-style:italic;
}
</style>
</head>
<body>
<h1>Delhi, captital of India</h1>
<p>Delhi is in the northern part of India, the summers are very hot and winters very cold, it is a very nice place to live in, all the big companies are there in delhi>Delhi, captital of India</h1>
Delhi is in the northern part of India, the summers are very hot and winters very cold, it is a very nice place to live in, all the big companies are there in delhi</p>
<aside>It is a Union Territory</aside>
<p>Delhi is in the northern part of India, the summers are very hot and winters very cold, it is a very nice place to live in, all the big companies are there in delhi</p>
<p>Delhi is in the northern part of India, the summers are very hot and winters very cold, it is a very nice place to live in, all the big companies are there in delhi</p>
</body>
</html>
Output -
Comments
Post a Comment