Thursday, December 27, 2018
HOW INLINE AND BLOCK ELEMENT WORKS IN HTML| ILLUSTRATIVE EXAMPLES
BLOCK
,
ELEMENTS
,
HTML
,
HTML BASICS
,
INLINE
No comments
:
Hi, I welcome you to our last lesson on HTML. In today’s lesson. We will be discussing, (with examples) the difference between an inline element and block element. Let’s move on.
1. INLINE ELEMENT
In HTML, inline elements are those elements that are displayed without line breaks. Inline elements in HTML includes <a>, <b>, <em>,<strong>, <img>, <input>, <span> and many more. You can use these elements together with CSS especially when you want style texts. <span> for example is the inline element that is used as container of the part of texts that you want to style.
For further elucidation, it will not be unwise if we consider at least one example.
Open your text editor as usual and key in the following codes below.
<html>
<Body>
<h1>We
<span style=’’color:red’’>love</span>
You<h2>
</body>
</html>
It will look like this
Save and open it, it will look like this with color
2. BLOCK ELEMENT
In HTML, block elements usually start with a new line. Some of the block elements in HTML include <h1>, <form>, <li>, <ol>, <ul>, <div>, <p>, <pre>, <table> and so on. <div> is the block element used as container of some part of text you are willing to style. It is pertinent to note that <div> element together with CSS.
For example, write the following codes in your text editor
<html>
<body>
<h1> Breaking News</h1>
<div style=’’background-color:red; color:white; padding:20px’’>
<p>Mabel wins Nsukka Grammy Awards </p>
<p>Dr. Mohammad elected new ABU VC</p>
</div>
</body>
</html>
It will look like this
Save and open it, you will see something like this.
WRAPPING UP
In our next lesson, we will be moving to HTML 5, which is the newer version of HTML. Keep practicing and practicing. Don’t forget to utilize the comment box below to ask your questions, observations or point out the areas you feel I poorly addressed. I gladly and positively respond.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment