s1 school: HTML

Showing posts with label HTML. Show all posts

HTML Style

<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Style Attribute in HTML:-</span></h2>
<div>
we can set style of an html element with the help of <b>style attribute</b>.</div>
<div>
Syntax of HTML Style Attribute is as Follow.</div>
<div>
<br /></div>
<div>
<b><span style="font-family: inherit; font-size: large;"><span style="background-color: white;"><tagname style="</span><em style="box-sizing: inherit;">property</em><span style="background-color: white; box-sizing: inherit;"> or </span><em style="box-sizing: inherit;">value;</em><span style="background-color: white;">"></span></span></b></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;">The </span><em style="background-color: white; box-sizing: inherit;"><strong style="box-sizing: inherit;">property</strong></em><span style="background-color: white;"> is a CSS property. The </span><em style="background-color: white; box-sizing: inherit;"><strong style="box-sizing: inherit;">value</strong></em><span style="background-color: white;"> is a CSS value. IF you want to learn CSS then click on this <a href="https://s1school.blogspot.com/search/label/CSS">link</a>. </span></span></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">HTML Background Color:-</span></h2>
</div>
<div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;">The <strong style="box-sizing: inherit;">background-color</strong> property defines the background color for an HTML element.</span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;">This example sets the background color for a page to ligtpink:</span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;"><br /></span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>body<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="background-color:powderblue;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="font-family: "consolas" , "courier new"; font-size: 16px;">This is a heading</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="font-family: "consolas" , "courier new"; font-size: 16px;">This is a paragraph.</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/body<span style="box-sizing: inherit; color: mediumblue;">></span></span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<div style="background-color: white; box-sizing: inherit;">
<h2 style="box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Text Color in HTML:-</span></h2>
</div>
</div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white; font-family: inherit;">The <strong style="box-sizing: inherit;">color</strong> property defines the text color for an HTML element.</span></span><br />
<span style="font-family: inherit;"><span style="background-color: white; font-family: inherit;"><br /></span></span>
<span style="font-family: inherit;"><span style="background-color: white; font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="color:lightpink;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="font-family: Consolas, "courier new"; font-size: 16px;">This is a heading</span><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="color:lightgreen;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="font-family: Consolas, "courier new"; font-size: 16px;">This is a paragraph.</span><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></span><br />
<span style="font-family: inherit;"><span style="background-color: white; font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></span></span>
<span style="font-family: inherit;"><span style="background-color: white; font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></span></span>
<span style="font-family: inherit;"><span style="background-color: white; font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></span></span>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Fonts in HTML:-</span></h2>
</div>
<div>
The <b>font-family </b> property is used for the font size of the HTML element. </div>
<div>
<br /></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="font-family:Arial;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: Consolas, "courier new"; font-size: 16px;">This is a heading</span><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="font-family:Time;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: Consolas, "courier new"; font-size: 16px;">This is a paragraph.</span><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Text Size in HTML:-</span></h2>
</div>
<div>
Then<b> font-size </b> is used for increase or decrease the font size. </div>
<div>
<br /></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="font-size:32px;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: Consolas, "courier new"; font-size: 16px;">This is a heading</span><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="font-size:50px;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: Consolas, "courier new"; font-size: 16px;">This is a paragraph.</span><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><h2 style="background-color: white; box-sizing: inherit; color: black; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Text Alignment in HTML:-</span></h2>
</span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="font-family: inherit;"><span style="background-color: white; color: black;">The </span><strong style="background-color: white; box-sizing: inherit; color: black;">text-align</strong><span style="background-color: white; color: black;"> property defines the horizontal text alignment for an HTML element. </span></span></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="font-family: inherit;"><span style="background-color: white; color: black;"><br /></span></span></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="text-align:right;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black; font-family: Consolas, "courier new"; font-size: 16px;">right Heading</span><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; color: black; font-family: Consolas, "courier new"; font-size: 16px;" /><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="text-align:left;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black; font-family: Consolas, "courier new"; font-size: 16px;">left paragraph.</span><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="text-align:top;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black;">top Heading</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; color: black;" /><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="text-align: bottom ;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black;">bottom paragraph.</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></span></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: red;"> style<span style="box-sizing: inherit; color: mediumblue;">="text-align:right;"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black;"> Heading</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></span></span></span></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></span></span></span></span></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></span></span></span></span></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown; font-family: Consolas, "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><div style="color: black; font-family: "Times New Roman"; font-size: medium;">
<span style="background-color: white;">IF you have any question about this lecture you can comment blow. feel free to contact me.</span></div>
<div>
<span style="background-color: white;"><br /></span></div>
<div style="color: black; font-family: "Times New Roman"; font-size: medium; text-align: center;">
</div>
</span></span></span></span></span></span></span></span></div>

HTML Style

Style Attribute in HTML:- we can set style of an html element with the help of style attribute . Syntax of HTML Style Attribute is as F...

July 25, 2017

HTML Paragraphs

<span style="font-family: inherit;"><span style="background-color: white;">The HTML </span><strong style="background-color: white; box-sizing: inherit;"><p></strong><span style="background-color: white;"> element defines a </span><strong style="background-color: white; box-sizing: inherit;">paragraph.</strong></span><br />
<strong style="background-color: white; box-sizing: inherit;"><span style="font-family: inherit;"><br /></span></strong>
<strong style="background-color: white; box-sizing: inherit;"><span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="font-weight: normal;">This is a paragraph.</span><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></strong><br />
<strong style="background-color: white; box-sizing: inherit;"><span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="font-weight: normal;">This is another paragraph.</span><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></strong><br />
<strong style="background-color: white; box-sizing: inherit;"><span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown; font-weight: normal;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></span></strong>
<span style="font-family: inherit;"><strong style="background-color: lightpink; box-sizing: inherit;">Note:</strong><span style="background-color: lightpink;"> Browsers automatically add some white space (a margin) before and after a paragraph</span></span><span style="background-color: lightpink; font-family: inherit;">.</span><br />
<span style="background-color: lightpink; font-family: inherit;"><br /></span>
<span style="background-color: lightpink; font-family: inherit;"><br /></span>
<br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">HTML Display:- </span></h2>
<div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;">You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results. With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code. The browser will remove any extra spaces and extra lines when the page is displayed.</span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;"><br /></span></div>
<div style="background-color: white; box-sizing: inherit;">
<b><span style="font-family: inherit;">For </span>Example<span style="font-family: inherit;"> :- </span></b></div>
<div style="background-color: white; box-sizing: inherit;">
<b><span style="font-family: inherit;"><br /></span></b></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFi3UmM6A66T_mSJTkeuncZgshKrAn641yMHgdXEY75o_Zoy2ODt3v5VA4yP6q4f2jGsKKUZQTAjzd3ECx-hWsKUMeRynNTC_NJGLfKcOGMbIWWooOiAkf-y1osX355Q-PkD7AFjGxm-Q/s1600/paragraph.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="532" data-original-width="725" height="469" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFi3UmM6A66T_mSJTkeuncZgshKrAn641yMHgdXEY75o_Zoy2ODt3v5VA4yP6q4f2jGsKKUZQTAjzd3ECx-hWsKUMeRynNTC_NJGLfKcOGMbIWWooOiAkf-y1osX355Q-PkD7AFjGxm-Q/s640/paragraph.png" width="640" /></a></div>
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Don't Forget the End Tag:-</span></h2>
</div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">Most browsers will display HTML correctly even if you forget the end tag.</span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><b>Example :-</b></span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><b><br /></b></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">This is a paragraph.</span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">This is another paragraph.</span></div>
<div>
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">The example above will work in most browsers, but do not rely on it. it is bad programming practice.</span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Line Breaks in HTML:-</span></h2>
</div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;">The HTML </span><strong style="background-color: white; box-sizing: inherit;"><br></strong><span style="background-color: white;"> element defines a </span><strong style="background-color: white; box-sizing: inherit;">line break</strong><span style="background-color: white;">. </span><span style="background-color: white;">Use <b><br></b> if you want a new line without starting a new paragraph.</span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span></div>
<div>
<span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">This is</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>br<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">a paragraph</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>br<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">with line breaks.</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><span style="font-family: inherit;"><br /></span></span></span></div>
<div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;">The <br> tag is an empty tag, which means that it has no end tag.</span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;"><b><br /></b></span></div>
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">The Poem Problem:-</span></h2>
</div>
<div>
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">This poem will display on a single line</span></div>
<div>
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the ocean.</span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the sea.</span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the ocean.</span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  Oh, bring back my Bonnie to me.</span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<h2>
<span style="font-family: inherit; font-size: x-large;">Solution:- </span></h2>
<div>
<span style="font-family: inherit; font-size: x-large;"><br /></span></div>
<h3>
<span style="font-family: inherit; font-size: large;"><pre> tag in HTML:-</span></h3>
<div>
<span style="font-family: inherit;"><span style="background-color: white;">The HTML <pre> element defines preformatted text. </span><span style="background-color: white;">The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks. in <pre> tag text print as it is written in <pre> tag.</span></span></div>
<div>
<br /></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>pre<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the ocean.</span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the sea.</span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  My Bonnie lies over the ocean.</span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">  Oh, bring back my Bonnie to me.</span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/pre<span style="box-sizing: inherit; color: mediumblue;">></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<h2>
Reference tag in HTML:-</h2>
<span style="background-color: white;"><span style="font-family: inherit;">s1school' tag reference contains additional information about HTML elements and their attributes.</span></span><br />
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span>
<br />
<table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 1103px;"><tbody style="box-sizing: inherit;">
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top;">Tag</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_p.asp" style="background-color: transparent; box-sizing: inherit;"><p></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Defines a paragraph</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_br.asp" style="background-color: transparent; box-sizing: inherit;"><br></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Inserts a single line break</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_pre.asp" style="background-color: transparent; box-sizing: inherit;"><pre></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Defines pre-formatted text</td></tr>
</tbody></table>
<br /><div>
<h3 style="background-color: white;">
<div style="font-size: medium; font-weight: normal;">
IF you have any question about this lecture you can comment blow. feel free to contact me.</div>
<div style="font-size: medium; font-weight: normal;">
you can also Visit my YouTube channel by clicking on this Link <b><a href="https://www.youtube.com/channel/UCK4JuluT6kEbBjqLwr4eHGA" target="_blank">YouTube Channel</a>.</b></div>
</h3>
</div>

HTML Paragraphs

The HTML <p> element defines a paragraph. < p > This is a paragraph. < /p > < p > This is another paragraph. ...

July 21, 2017

HTML Heading

<span style="background-color: white; font-family: inherit;">Headings are important in HTML documents.</span><br />
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 16px;"><br /></span>
<br />
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">
Headings in HTML:-</span></h2>
<div>
<span style="background-color: white; font-family: inherit;">Headings are defined with the <h1> to <h6> tags. <h1> is largest heading and <h6> is the smallest heading in HTML document. </span></div>
<div>
<span style="background-color: white; font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">This is heading 1</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span></span><br />
<span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h2<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">This is heading 2</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h2<span style="box-sizing: inherit; color: mediumblue;">></span></span></span><br />
<span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h3<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">This is heading 3</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h3<span style="box-sizing: inherit; color: mediumblue;">></span></span></span><br />
<span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h4<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">This is heading 4</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h4<span style="box-sizing: inherit; color: mediumblue;">></span></span></span><br />
<span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h5<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">This is heading 5</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h5<span style="box-sizing: inherit; color: mediumblue;">></span></span></span><br />
<span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h6<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white;">This is heading 6</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h6<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<div>
<br />
<h2>
<span style="font-family: inherit; font-size: x-large;">Importance of Heading in HTML:-</span></h2>
<div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;">Search engines use the headings to index the structure and content of your web pages. heading are used for <b>SEO </b>for websites.Users skim your pages by its headings. It is important to use headings to show the document structure.<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.</span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;"><br /></span></div>
<div style="background-color: white; box-sizing: inherit;">
<span style="font-family: inherit;"><strong style="background-color: lightpink; box-sizing: inherit;">Note:</strong><span style="background-color: lightpink;"> Use HTML headings for headings only. Don't use headings to make text </span><strong style="background-color: lightpink; box-sizing: inherit;">BIG</strong><span style="background-color: lightpink;"> or </span><strong style="background-color: lightpink; box-sizing: inherit;">bold</strong><span style="background-color: #ffffcc;">.</span></span><br />
<span style="background-color: #ffffcc; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span>
<span style="background-color: #ffffcc; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span>
<br />
<h2 style="box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Horizontal Rules in HTML:-</span></h2>
<div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit;">The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.The <hr> element is used to separate content (or define a change) in an HTML .</span></div>
<div style="box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<br /></div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit;"><br /></span></div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit;"><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: mediumblue;">></span></span>This is heading 1<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit;" /><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span>This is some text.<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit;" /><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>hr<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit;" /><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h2<span style="box-sizing: inherit; color: mediumblue;">></span></span>This is heading 2<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h2<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit;" /><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span>This is some other text.<span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit;" /><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>hr<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></div>
<div style="box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<div style="box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></div>
<h2 style="box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">HTML <head> Element:-</span></h2>
</div>
<div>
<span style="font-family: inherit;">The HTML <strong style="box-sizing: inherit;"><head></strong> element has nothing to do with HTML headings.The <b><head> </b>element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.The <b><head></b> element is placed between the <b><html></b> tag and the <b><body></b> tag:-</span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>!DOCTYPE<span style="box-sizing: inherit; color: red;"> html</span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>html<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>head<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="font-family: "consolas" , "courier new"; font-size: 16px;">  </span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>title<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="font-family: "consolas" , "courier new"; font-size: 16px;">My First HTML</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/title<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="font-family: "consolas" , "courier new"; font-size: 16px;">  </span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>meta<span style="box-sizing: inherit; color: red;"> charset<span style="box-sizing: inherit; color: mediumblue;">="UTF-8"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/head<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<br style="box-sizing: inherit; font-family: Consolas, "courier new"; font-size: 16px;" />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>body<span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="font-family: "consolas" , "courier new"; font-size: 16px;">.</span><br />
<span style="font-family: "consolas" , "courier new"; font-size: 16px;">.</span><br />
<span style="font-family: "consolas" , "courier new"; font-size: 16px;">.</span></div>
<div>
<span style="font-family: "consolas" , "courier new"; font-size: 16px;">.</span></div>
<div>
<span style="box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"></</span><span style="color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">body</span><span style="box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div>
<div>
<span style="box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"></</span><span style="color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">html</span><span style="box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;"><strong style="background-color: lightpink; box-sizing: inherit;">Note:</strong><span style="background-color: lightpink;"> Metadata typically define the document title, character set, styles, links, scripts, and other meta information.</span></span><br />
<span style="font-family: inherit;"><span style="background-color: lightpink;"><br /></span></span>
<br />
<h2 style="box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">How to View HTML Source?</span></h2>
</div>
<div>
<span style="font-family: inherit;">Have you ever seen a Web page and wondered "Hey! How did they do that?"</span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<h3 style="box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: large;">View HTML Source Code:</span></h3>
</div>
<div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit;">To find out source code of web page, right-click in the page and select "View Page Source" or shortcut is ctrl + u (in Chrome) or "View Source" (in IE), or similar in other browsers. This will open a window containing the HTML source code of the page.</span></div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit;"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJkIbORKOEZjfBSBn6TjWtoVqch1WbABglFGuWzjZOS6pzO7onPBJPp9uPN_bWNWpPhzWq0F1t3MTZhWypS9hhrEAnoZ7I-ICOTZyxJYfQA6nyN7i6FdioJcBL-uMHDh3Wq3TofMG_zCQ/s1600/Heading+and+source++post.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJkIbORKOEZjfBSBn6TjWtoVqch1WbABglFGuWzjZOS6pzO7onPBJPp9uPN_bWNWpPhzWq0F1t3MTZhWypS9hhrEAnoZ7I-ICOTZyxJYfQA6nyN7i6FdioJcBL-uMHDh3Wq3TofMG_zCQ/s640/Heading+and+source++post.png" width="640" /></a></div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit;"><br /></span></div>
<div style="box-sizing: inherit;">
<span style="font-family: inherit;"><br /></span></div>
<h3 style="box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: large;">Inspect an HTML Element:</span></h3>
</div>
<div>
<span style="font-family: inherit;">Right-click on an element (or a blank area), and choose "Inspect" or "Inspect Element" to see what elements are made up of (you will see both the HTML and the CSS). You can also edit the HTML or CSS on-the-fly in the Elements or Styles panel that opens.</span></div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMnkrdvm385LOFO0H7VHqOEYmeHY55GQ5cXiEerTksARPLPShi2nXG2aBVvU85UwUJwfR1rImt981C2t6dtYPF4kpix8VfbiZFcqqtRRQsvxzRXKlPrAi_e9xVs7cGhEVL3vRD-bRYps/s1600/inspect.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="900" data-original-width="1600" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPMnkrdvm385LOFO0H7VHqOEYmeHY55GQ5cXiEerTksARPLPShi2nXG2aBVvU85UwUJwfR1rImt981C2t6dtYPF4kpix8VfbiZFcqqtRRQsvxzRXKlPrAi_e9xVs7cGhEVL3vRD-bRYps/s640/inspect.png" width="640" /></a></div>
<div>
<br /></div>
<div>
<h2 style="box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">HTML Tag Reference:-</span></h2>
</div>
<div>
<span style="font-family: inherit;">s1school' tag reference contains additional information about these tags and their attributes.</span></div>
<div>
<br /></div>
<div>
<table class="w3-table-all notranslate" style="border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 872px;"><tbody style="box-sizing: inherit;">
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top;"><span style="font-family: inherit; font-size: small;">Tag</span></th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;"><span style="font-family: inherit; font-size: small;">Description</span></th></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_html.asp" style="background-color: transparent; box-sizing: inherit;"><span style="font-family: inherit; font-size: small;"><html></span></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;"><span style="font-family: inherit; font-size: small;">Defines the root of an HTML document</span></td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_body.asp" style="background-color: transparent; box-sizing: inherit;"><span style="font-family: inherit; font-size: small;"><body></span></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;"><span style="font-family: inherit; font-size: small;">Defines the document's body</span></td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_head.asp" style="background-color: transparent; box-sizing: inherit;"><span style="font-family: inherit; font-size: small;"><head></span></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;"><span style="font-family: inherit; font-size: small;">A container for all the head elements (title, scripts, styles, meta information, and more)</span></td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_hn.asp" style="background-color: transparent; box-sizing: inherit;"><span style="font-family: inherit; font-size: small;"><h1> to <h6></span></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;"><span style="font-family: inherit; font-size: small;">Defines HTML headings</span></td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;"><a href="https://www.w3schools.com/tags/tag_hr.asp" style="background-color: transparent; box-sizing: inherit;"><span style="font-family: inherit; font-size: small;"><hr></span></a></td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;"><span style="font-family: inherit; font-size: small;">Defines a thematic change in the content</span></td></tr>
</tbody></table>
</div>
<div>
<h3>
<div style="font-size: medium; font-weight: normal;">
IF you have any question about this lecture you can comment blow. feel free to contact me.</div>
<div style="font-size: medium; font-weight: normal;">
you can also Visit my YouTube channel by clicking on this Link <b><a href="https://www.youtube.com/channel/UCK4JuluT6kEbBjqLwr4eHGA" target="_blank">YouTube Channel</a>.</b></div>
</h3>
</div>
<div>
<br /></div>
</div>
</div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;">
</span></span></div>

HTML Heading

Headings are important in HTML documents. Headings in HTML:- Headings are defined with the <h1> to <h6> tags. <h1> ...

July 20, 2017

HTML Attributes

<span style="background-color: white;"><span style="font-family: inherit;">Attributes provide additional information about HTML elements.</span></span><br />
<span style="background-color: white;"><span style="font-family: inherit;"><br /></span></span>
<br />
<ul style="background-color: white; box-sizing: inherit;">
<li style="box-sizing: inherit;"><span style="font-family: inherit;">All HTML elements can have <b style="box-sizing: inherit;">attributes</b></span></li>
<li style="box-sizing: inherit;"><span style="font-family: inherit;">Attributes provide <b style="box-sizing: inherit;">additional information</b> about an element</span></li>
<li style="box-sizing: inherit;"><span style="font-family: inherit;">Attributes are always specified in <b style="box-sizing: inherit;">the start tag</b></span></li>
<li style="box-sizing: inherit;"><span style="font-family: inherit;">Attributes usually come in name/value pairs like: <b style="box-sizing: inherit;">name="value"</b></span></li>
</ul>
<div>
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-size: x-large;">Title Attribute:- </span></h2>
</div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;">Here, a </span><strong style="background-color: white; box-sizing: inherit;">title</strong><span style="background-color: white;"> attribute is added to the </span><strong style="background-color: white; box-sizing: inherit;"><p></strong><span style="background-color: white;"> element. The value of the title attribute will be displayed as a tooltip when you mouse over the paragraph.</span></span></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: red;"> title<span style="box-sizing: inherit; color: mediumblue;">="I'm a tooltip"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br />
<span style="background-color: white; font-family: "consolas" , "courier new"; font-size: 16px;">This is a paragraph.</span><br />
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></div>
<div>
<span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><b><br /></b></span></span></div>
<div>
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;"></span></span><br />
<h2 style="background-color: white; box-sizing: inherit; color: black; margin: 10px 0px;">
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;">
<span style="font-family: inherit; font-size: x-large;">href Attribute:-</span></span></span></h2>
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;">
</span></span>
<br />
<div style="color: mediumblue;">
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;"><span style="font-family: inherit;"><span style="background-color: white; color: black;">HTML links are defined with the </span><strong style="background-color: white; box-sizing: inherit; color: black;"><a></strong><span style="background-color: white; color: black;"> tag. The link address is specified in the </span><b style="background-color: white; box-sizing: inherit; color: black;">href</b><span style="background-color: white; color: black;"> attribute.</span></span></span></span></div>
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;">
</span></span>
<br />
<div style="color: mediumblue;">
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;"><span style="font-family: inherit;"><span style="background-color: white; color: black;"><br /></span></span></span></span></div>
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;">
</span></span>
<br />
<div style="color: mediumblue;">
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;"><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>a<span style="box-sizing: inherit; color: red;"> href<span style="box-sizing: inherit; color: mediumblue;">="https://www.w3schools.com"</span></span><span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black; font-family: "consolas" , "courier new"; font-size: 16px;">This is a link</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/a<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></span></div>
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;">
</span></span>
<br />
<div style="color: mediumblue;">
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;"><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;"><span style="box-sizing: inherit; color: mediumblue;"><br /></span></span></span></span></div>
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;">
</span></span>
<div style="color: mediumblue;">
<h2 style="background-color: white; box-sizing: inherit; color: black; margin: 10px 0px;">
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;">
<span style="font-family: inherit; font-size: x-large;">Size Attributes:-</span></span></span></h2>
</div>
<span style="box-sizing: inherit;"><span style="box-sizing: inherit;">
<div>
<span style="color: mediumblue; font-family: inherit;"><span style="background-color: white; color: black;">HTML images are defined with the </span><strong style="background-color: white; box-sizing: inherit; color: black;"><img></strong><span style="background-color: white; color: black;"> tag. </span></span>The filename of the source (src), and the size of the image (width and height) are all provided as attributes.</div>
<div>
<br /></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">img</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> src<span style="box-sizing: inherit; color: mediumblue;">="s1school.jpg"</span> width<span style="box-sizing: inherit; color: mediumblue;">="104"</span> height<span style="box-sizing: inherit; color: mediumblue;">="142"</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">The image size is specified in pixels: width="104" means 104 screen pixels wide. </span></span></div>
<div>
<span style="font-family: inherit;">You will learn more about images and the <img> tag later in this tutorial.</span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<span style="font-family: inherit;"><br /></span></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;"><span style="font-family: inherit;">alt Attribute</span><span style="font-weight: 400;">:-</span></span></h2>
</div>
<div>
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">The </span><strong style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">alt</strong><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"> attribute specifies an alternative text to be used, when an image cannot be displayed. </span><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.</span></div>
<div>
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">img</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> src<span style="box-sizing: inherit; color: mediumblue;">="s1school.jpg"</span> alt<span style="box-sizing: inherit; color: mediumblue;">="s1school.jpg"</span> width<span style="box-sizing: inherit; color: mediumblue;">="104"</span> height<span style="box-sizing: inherit; color: mediumblue;">="142"</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<h3>
<b><span style="font-size: large;">suggestion:- </span></b>Use Lowercase Attributes </h3>
<div>
<span style="font-family: inherit;"><span style="background-color: white;">The HTML5 standard does not require lowercase attribute names. </span><span style="background-color: white;">The title attribute can be written with uppercase or lowercase like </span><strong style="background-color: white; box-sizing: inherit;">title</strong><span style="background-color: white;"> or </span><strong style="background-color: white; box-sizing: inherit;">TITLE</strong><span style="background-color: white;">. </span></span></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div>
<div>
<span style="background-color: #ffffcc; font-family: "verdana" , sans-serif; font-size: 15px;">At s1school we always use lowercase attribute names.</span></div>
<div>
<span style="background-color: #ffffcc; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div>
<h3>
<span style="font-family: inherit; font-size: large;">Suggestion:-  </span>Quote Attribute Values</h3>
<div>
<span style="background-color: white;"><span style="font-family: inherit;">The HTML5 standard does not require quotes around attribute </span></span><span style="background-color: white; font-family: inherit;">values. </span><span style="background-color: white; font-family: inherit;">The </span><strong style="background-color: white; box-sizing: inherit; font-family: inherit;">href</strong><span style="background-color: white; font-family: inherit;"> attribute,</span></div>
<div>
<span style="background-color: white; font-family: inherit;">demonstrated above, can be written as:- </span></div>
<div>
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div>
<div>
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">a</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> href<span style="box-sizing: inherit; color: mediumblue;">=https://www.s1school.blogspot.com</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="font-family: inherit;"><span style="background-color: white;">Sometimes it is </span><strong style="background-color: white; box-sizing: inherit;">necessary</strong><span style="background-color: white;"> to use quotes. This example will not display the title attribute correctly, because it contains a space. </span>Using quotes are the most common. Omitting quotes can produce errors. </span></div>
<span style="font-family: inherit;">At W3Schools we always use quotes around attribute values.</span><div>
<span style="font-family: inherit;"><span style="background-color: white;"><br /></span></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> title<span style="box-sizing: inherit; color: mediumblue;">=About </span>s1school</span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span><br />
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span>
<br />
<h2>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: inherit; font-size: x-large;"><br /></span></h2>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: inherit; font-size: x-large;"></span><br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">what is Single or Double Quote</span><span style="font-family: "segoe ui" , "arial" , sans-serif;"><span style="font-size: 30px;">s?</span></span></h2>
</div>
<div>
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">Double quotes around attribute values are the most common in HTML, but single quotes can also be used.</span><span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:-</span></div>
<div>
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> title<span style="box-sizing: inherit; color: mediumblue;">='WEb "designer" ali'</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
or </div>
<div>
<br /></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><</span><span style="background-color: white; color: brown; font-family: "consolas" , "courier new"; font-size: 16px;">p</span><span style="background-color: white; box-sizing: inherit; color: red; font-family: "consolas" , "courier new"; font-size: 16px;"> title<span style="box-sizing: inherit; color: mediumblue;">="web 'designer' ali"</span></span><span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;">></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<span style="background-color: white; box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new"; font-size: 16px;"><br /></span></div>
<div>
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">HTML Attributes:-</span></h2>
</div>
<div>
<span style="font-family: inherit; font-size: x-large;"><br /></span></div>
<div>
<table class="w3-table-all notranslate" style="background-color: white; border-collapse: collapse; border-spacing: 0px; border: 1px solid rgb(204, 204, 204); box-sizing: inherit; color: black; font-family: Verdana, sans-serif; font-size: 15px; margin: 20px 0px; width: 867px;"><tbody style="box-sizing: inherit;">
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><th style="box-sizing: inherit; padding: 8px 8px 8px 16px; text-align: left; vertical-align: top; width: 129px;">Attribute</th><th style="box-sizing: inherit; padding: 8px; text-align: left; vertical-align: top;">Description</th></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">alt</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies an alternative text for an image, when the image cannot be displayed</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">disabled</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies that an input element should be disabled</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">href</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the URL (web address) for a link</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">id</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies a unique id for an element</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">src</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies the URL (web address) for an image</td></tr>
<tr style="border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">style</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies an inline CSS style for an element</td></tr>
<tr style="background-color: #f1f1f1; border-bottom: 1px solid rgb(221, 221, 221); box-sizing: inherit;"><td style="box-sizing: inherit; padding: 8px 8px 8px 16px; vertical-align: top;">title</td><td style="box-sizing: inherit; padding: 8px; vertical-align: top;">Specifies extra information about an element (displayed as a tool tip)</td></tr>
</tbody></table>
</div>
<div>
<br /></div>
<div>
<span style="background-color: white; font-family: "verdana" , sans-serif; font-size: 15px;">A complete list of all attributes for each HTML element, is listed in our: <a href="https://s1school.blogspot.com/2017/07/html-attribute-reference.html">attributes reference.</a></span><br />
<br />
<br />
<br />
<br />
<h3>
<div style="font-size: medium; font-weight: normal;">
IF you have any question about this lecture you can comment blow. feel free to contact me.</div>
<div style="font-size: medium; font-weight: normal;">
you can also Visit my YouTube channel by clicking on this Link <b><a href="https://www.youtube.com/channel/UCK4JuluT6kEbBjqLwr4eHGA" target="_blank">YouTube Channel</a>.</b></div>
</h3>
</div>
</span></span></div>

HTML Attributes

Attributes provide additional information about HTML elements. All HTML elements can have attributes Attributes provide additional in...

July 19, 2017

HTML Elements

An HTML element usually consists of a start tag and end tag, with the content inserted in between:<br />
<br />
<b><span style="font-size: large;"><tagname>Content goes here...</tagname></span></b><br />
The HTML element is everything from the start tag to the end tag:<br />
<br />
<p>My first paragraph.</p><br />
<br />
<span style="font-size: large;"><b>Note:- </b></span> HTML elements with no content are called empty elements. Empty elements do not have an end tag, such as the <br> element (which indicates a line break).<br />
<br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Nested HTML Elements:- </span></h2>
<div>
<span style="font-family: inherit;">HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements. This example contains four HTML elements:</span><br />
<span style="font-family: inherit;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU5chi22eOuIXINNH345aj575mZ0ZdAf0XhTpZuZUL6iZRKqXMMYrB-aUJhmxTJruwC6EYizRSNc1FE-aIR1y8BVtM67CPfqqsQCiBQ6B_xA8oebZSZ7UDJgmOuhKTHZJOT9APHhlzCYI/s1600/2017-07-07_210806.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="483" data-original-width="555" height="555" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhU5chi22eOuIXINNH345aj575mZ0ZdAf0XhTpZuZUL6iZRKqXMMYrB-aUJhmxTJruwC6EYizRSNc1FE-aIR1y8BVtM67CPfqqsQCiBQ6B_xA8oebZSZ7UDJgmOuhKTHZJOT9APHhlzCYI/s640/2017-07-07_210806.png" width="640" /></a></div>
<span style="font-family: inherit;"><br /></span>

<br />
<h2 style="background-color: white; box-sizing: inherit; font-weight: 400; margin: 10px 0px;">
<span style="font-family: inherit; font-size: x-large;">Example Explained</span></h2>
</div>
<div>
<div>
The <b><html> </b>element defines the whole document. It has a start tag <b><html></b> and an end tag<b> </html>.</b></div>
<div>
The element content is another HTML element <b>(the <body> element).</b></div>
</div>
<div>
<br /></div>
<div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><html></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"> <body></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><br /></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";">    <h1>My First Heading</h1></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";">    <p>My first paragraph.</p></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><br /></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"> </body></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"></html></span></div>
</div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><b><body> Tag</b></span></div>
<div>
<br />
<ul>
<li>The <b><body></b> element defines the document body. </li>
<li>It has a <b>start</b> tag <b><body></b> and an<b> end</b> tag <b></body></b>.</li>
<li>The element <b>content</b> is two other HTML elements<b> (<h1> and <p>)</b>.</li>
</ul>
<br />
<span style="font-family: inherit;"><br /></span>
<br />
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"> <body></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><br /></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";">    <h1>My First Heading</h1></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";">    <p>My first paragraph.</p></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><br /></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"> </body></span></div>
</div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><b><h1> Tag</b></span></div>
<div>
<div style="background-color: white; box-sizing: inherit; font-family: Verdana, sans-serif; font-size: 15px;">
</div>
<ul>
<li>The <strong style="box-sizing: inherit;"><h1></strong> element defines a <strong style="box-sizing: inherit;">heading</strong>.</li>
<li>It has a <strong style="box-sizing: inherit;">start</strong> tag <h1> and an <strong style="box-sizing: inherit;">end</strong> tag </h1>.</li>
<li>The element <strong style="box-sizing: inherit;">content</strong> is: My First Heading.</li>
</ul>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><h1>My First Heading</h1></span></div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><b><p> Tag</b></span></div>
<div>
<div style="background-color: white; box-sizing: inherit;">
</div>
<br />
<ul>
<li><span style="font-family: inherit;">The <strong style="box-sizing: inherit;"><p></strong> element defines a <strong style="box-sizing: inherit;">paragraph</strong>.</span></li>
<li><span style="font-family: inherit;">It has a <strong style="box-sizing: inherit;">start</strong> tag <p> and an <strong style="box-sizing: inherit;">end</strong> tag </p>.</span></li>
<li><span style="font-family: inherit;">The element <strong style="box-sizing: inherit;">content</strong> is: My first paragraph.</span></li>
</ul>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><p>My first paragraph.</p></span></div>
<div>
<br /></div>
<h2>
<span style="font-family: inherit; font-size: x-large;">End Tag </span></h2>
<div>
Don't Forget the <b>End Tag. </b>Some HTML elements will display correctly, even if you forget the end tag:</div>
<div>
<br /></div>
<div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><html></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"> <body></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><br /></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";">    <h1>My First Heading</span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";">    <p>My first paragraph</span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><br /></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"> </body></span></div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"></html></span></div>
</div>
<div>
<span style="color: mediumblue; font-family: "consolas" , "courier new";"><br /></span></div>
<div>
The example above works in all browsers, because the closing tag is considered optional. </div>
<div>
<b><span style="font-size: large;"><i>Never Depend on this. It might produce unexpected results if you forget the end tag.</i></span></b></div>
<div>
<b><span style="font-size: large;"><i><br /></i></span></b></div>
<h2>
<span style="font-family: inherit; font-size: x-large;">Empty HTML Elements</span></h2>
<div>
<ul>
<li>HTML elements with no content are called empty elements.</li>
<li><b><br></b> is an empty element without a closing tag<i> <b>(the <br> tag defines a line break).</b></i></li>
<li>Empty elements can be<b> "closed"</b> in the opening tag like this:<b> <br /></b>.</li>
</ul>
<div>
<br /></div>
</div>
IF you have any question about this lecture you can comment blow. feel free to contact me.<br />
you can also Visit my YouTube channel by clicking on this Link <b><a href="https://www.youtube.com/channel/UCK4JuluT6kEbBjqLwr4eHGA" target="_blank">YouTube Channel</a>.</b></div>
</div>

HTML Elements

An HTML element usually consists of a start tag and end tag, with the content inserted in between: <tagname>Content goes here...<...

July 07, 2017

Basic Of HTML

Don't Worry if these Examples are use tags. we study about these tags in our next coming lectures<br />
in this lecture we use tags just for understand basic of HTML.<br />
<br />
<h2>
<span style="font-size: x-large;">HTML Document </span></h2>
<span style="font-family: inherit;">all Document of HTML start with document type <strong style="background-color: white; box-sizing: inherit;"><!DOCTYPE html>. </strong></span><br />
<span style="background-color: white;"><span style="font-family: inherit;">HTML Document start with its name <html> and </html>. remember that all opening tag must have its closing tag. <b>For Example </b><html> this is opening tag and closing tag is same as opening tag but we use <b>/ </b> sign to close any tag </html>. so tag have no closing tags. <b>For Example </b><br> have no closing tag. </span></span><span style="background-color: white; font-family: inherit;">The visible part of HTML Document is in <body> </body> tag. </span><br />
<span style="background-color: white;"><b><span style="font-family: inherit;">For Example:-</span></b></span><br />
<span style="background-color: white; font-family: "verdana" , sans-serif;"><br /></span>
<b><span style="font-size: large;"><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>!DOCTYPE<span style="box-sizing: inherit; color: red;"> html</span><span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; font-family: Consolas, "courier new";" /><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>html<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; font-family: Consolas, "courier new";" /><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>body<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; font-family: Consolas, "courier new";" /><br style="box-sizing: inherit; font-family: Consolas, "courier new";" /><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;">   <</span>h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new";">My First Heading</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; font-family: Consolas, "courier new";" /><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;">   <</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new";">My first paragraph.</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; font-family: Consolas, "courier new";" /><br style="box-sizing: inherit; font-family: Consolas, "courier new";" /><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>/body<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></b><b><span style="font-size: large;"><span style="box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new";"><</span><span style="color: brown; font-family: "consolas" , "courier new";">/html</span><span style="box-sizing: inherit; color: mediumblue; font-family: "consolas" , "courier new";">></span><span style="background-color: white; font-family: "verdana" , sans-serif;">  </span></span></b><br />
<br />
<h2>
<span style="font-size: x-large;">HTML Heading Tags:- </span></h2>
<div>
HTML Heading tags are define with <h1> to <h6> </div>
<div>
<h1> is tha largest tag and <h6> is the smallest Heading tag. </div>
<div>
<br /></div>
<span style="font-size: x-large;"><b><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>h1<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new";">This is heading 1</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h1<span style="box-sizing: inherit; color: mediumblue;">></span></span></b><b><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>h2<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new";">This is heading 2</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h2<span style="box-sizing: inherit; color: mediumblue;">></span></span></b><b><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>h3<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new";">This is heading 3</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h3<span style="box-sizing: inherit; color: mediumblue;">></span></span></b><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><b><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h4<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black;">This is heading 1</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h4<span style="box-sizing: inherit; color: mediumblue;">></span></span></b></span></span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><b><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h5<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black;">This is heading 2</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h5<span style="box-sizing: inherit; color: mediumblue;">></span></span></b></span></span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><b><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>h6<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; color: black;">This is heading 3</span><span style="box-sizing: inherit; color: brown;"><span style="box-sizing: inherit; color: mediumblue;"><</span>/h6<span style="box-sizing: inherit; color: mediumblue;">></span></span></b></span></span></span><br />
<br />
You can see This Example in the Image blow.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6va8xoULpzSD7z_7LXRuacPbmYe9uD06Ke7KoLiSXICtTojGe8mZe3dr0MtKSpCbT6qyXJ9YUHt56vP7jxmCS5nEvsDrcpFni-9DQosq1y4MNcwre-4tmdt-uhrQ9fQWLAf-gewwh0R8/s1600/2017-07-07_090906.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="860" data-original-width="1600" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6va8xoULpzSD7z_7LXRuacPbmYe9uD06Ke7KoLiSXICtTojGe8mZe3dr0MtKSpCbT6qyXJ9YUHt56vP7jxmCS5nEvsDrcpFni-9DQosq1y4MNcwre-4tmdt-uhrQ9fQWLAf-gewwh0R8/s640/2017-07-07_090906.png" width="640" /></a></div>
<h2>
<span style="font-size: x-large;">HTML Paragraphs:-</span></h2>
<div>
HTML paragraphs are Defines with <p>  </p> tag </div>
<div>
<b>For Example:- </b></div>
<div>
<br /></div>
<div>
<span style="font-size: large;"><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new";">This is a paragraph.</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span><br style="box-sizing: inherit; font-family: Consolas, "courier new";" /><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>p<span style="box-sizing: inherit; color: mediumblue;">></span></span><span style="background-color: white; font-family: "consolas" , "courier new";">This is another paragraph.</span><span style="box-sizing: inherit; color: brown; font-family: "consolas" , "courier new";"><span style="box-sizing: inherit; color: mediumblue;"><</span>/p<span style="box-sizing: inherit; color: mediumblue;">></span></span></span></div>
<div>
<br /></div>
<div>
You can see OutPut Of this Example in Image</div>
<div>
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpo51wSWVMvEUVOKJs06-f3l86mVPzXwAD9nUFp5CGrk0k4ZuF5BGL_6pojJTAGOYUdSiVld9hDeWW7vKsDU8PP1Gro6KNWSfSRpMEVFK0wk8LP8UhIUGuCjWPHxorFl6MuZSoBoNeMho/s1600/2017-07-07_100402.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="860" data-original-width="1600" height="344" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpo51wSWVMvEUVOKJs06-f3l86mVPzXwAD9nUFp5CGrk0k4ZuF5BGL_6pojJTAGOYUdSiVld9hDeWW7vKsDU8PP1Gro6KNWSfSRpMEVFK0wk8LP8UhIUGuCjWPHxorFl6MuZSoBoNeMho/s640/2017-07-07_100402.png" width="640" /></a></div>
<div>
<br />
IF you have any question about this lecture you can comment blow. feel free to contact me.<br />
you can also Visit my YouTube channel by clicking on this Link <b><a href="https://www.youtube.com/channel/UCK4JuluT6kEbBjqLwr4eHGA" target="_blank">YouTube Channel</a>.</b></div>

Basic Of HTML

Don't Worry if these Examples are use tags. we study about these tags in our next coming lectures in this lecture we use tags just for ...

July 07, 2017