PROJECT CODE

                                            The Developers Choice!!!!
                                                                                                            Home | About Us | Contact Us

HTML TUTORIALS

Lecture17 : Blocks

What is HTML Block Element
Block-level is categorization of HTML (Hypertext Markup Language) elements, as contrasted with "inline" elements. Block-level elements may appear only within a <body> element.
By default, block-level elements begin on new lines. Most HTML elements are defined as block level elements or as inline elements.

Examples: <div>, <table>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <form>, <ul>, <ol>, <address>, <center>, <blockquote>, <noscript>, <dd>, <dl>, <li>, <tbody>, <thead>, <tfoot>, <th>, <tr>, <td> etc .

Note :All HTML element we are using in our lecture that why there is no need to define.
What is HTML Inline Element
Inline" is categorization of HTML elements, as contrasted with "block-level" elements. Inline elements can appear within block-level or other inline elements. They take up the width of their contents. Inline elements are normally displayed without starting a new line.
By default, inline elements do not begin with new line.

Examples: <b>, <td>, <a>, <img>, <big, <i>, <small>, <tt> <abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, <var>, <bdo>, <br>, <img>, <map>, <object>, <q>, <script>, <span>, <sub>, <sup> <button>, <input>, <label>, <select>, <textarea> etc.

Note :All HTML element we are using in our lecture that why there is no need to define.
What is HTML <div> Element
The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once. For instance, by wrapping a set of paragraph elements into a <div> element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the <div> tag instead of coding the same style for each paragraph element.
How to use HTML <div> Element
We use <div> tag to store all content, image, map, and many more inside div tag.

<p>This is text.</p>
<div style="color:Red">
<h3>Define heading in a div element</h3>
<p>Define text in a div element.</p>
</div>
<p>This is text.</p>
How to implement HTML <div> Element
Example :
<!DOCTYPE html>
<html>
<body>

<p>This is text.</p>
<div style="color:Red">
<h3>Define heading in a div element</h3>
<p>Define text in a div element.</p>
</div>
<p>This is text.</p>

</body>
</html>


Output :

This is text.

Define heading in a div element

Define text in a div element.

This is text.

What is HTML <span> Element
The HTML <span> element is an inline element that can be used as a container for text. The <span> element has no special meaning. When used together with CSS, the <span> element can be used to set style attributes to parts of the text.
How to use HTML <span> Element
The HTML <span> can be used to set style for text with the help of CSS property. We can change the text style, text color using style attribute inside <span> tag.

<body>

<p>My brother has <span style="color:red;font-weight:bold">brown</span> eyes and my sister has <span style="color:green;font-weight:bold">black</span> eyes.</p>

</body>
</html>
How to implement HTML <span> Element
Example :
<!DOCTYPE html>
<html>
<body>

<p>My brother has <span style="color:red;font-weight:bold">brown</span> eyes and my sister has <span style="color:green;font-weight:bold">black</span> eyes.</p>

</body>
</html>


Output :

My brother has brown eyes and my sister has black eyes.

   
All Rights Reserved with Project code