HTML TAGS And attributes-Part two

Block and Inline Elements

Block-level elements, such as divh1, and p, are elements that are designed to hold relatively large or stand-alone blocks of content, such as paragraphs of text. A block-level element always starts on a new line.

Inline elements, such as spana, and img, are designed to hold smaller pieces of content — such as a few words or a sentence — within a larger block of content. Adding an inline element doesn’t cause a new line to be created. Block-level elements can contain inline elements, but inline elements can’t contain block-level elements.

Division – <Divs >

The division <div>; tag helps us change the layout of a web page by splitting it into sections.
The opening tag is <div> and the closing tag is </div>.
The tag is a useful and time-saving way of grouping HTML elements together.
It works like an invisible container. When you group together HTML elements between an opening and closing <div> tag you can ask your browser to make the same changes to all the elements inside the <div>.
The elements outside the <div> will be unchanged. Let’s take a look at how the <div> tag works:

Span < span>

The span tag is an inline tag used to add structure to the content. It works in a way that is similar to the Div tag except that the div tag is a block level tag.
eg:
<p>GeeksforGeeks is a <span style=”color:red;font-weight:bolder”>
computer science& lt;/span> portal for
<span style=”background-color: lightgreen;”>geeks</span>.

Exercise 3.1

In the editor below. use the div and span tag to divide the paragraph. 

See the Pen HTML-Div by Ankit (@AnkitPathshalaCoding) on CodePen.

What are Links

Links are HTML elements that, when clicked, will redirect you to another file, usually another webpage.
Links are very simple. They have an opening anchor tag, <a>, and a closing anchor tag, </a>, between which you place the text that will be seen on the webpage as a link.
The hypertext reference, or “href” attribute defines the address of the link, or where you will go if you click on the link

Text Area

In some websites, there are areas where you can input multiple lines.
The HTML <textarea> tag is used to specify a multiline input control text area in HTML eg:
<textarea rows=”10″ cols=”20″> Welcome to Ankit Coding, hope you are having a nice day <textarea>

What are rows and columns in text area

The rows and columns are a few attributes of the text area element.
rows: It specifies height of textarea.
cols: It specifies width of textarea.

Exercise 3.2

In the editor below search for any page on google and create a link to it.
eg
<www.code.ankitpathshala.com>
Also create a text area and input a few lines into it.
Note: Remember to start the text area on a new line

Lists

You must have come across lists in your everyday life.
A list for groceries, items to buy, even books to carry to school based on your timetable
HTML also has a similar concept of lists.
HTML lists allow you to group a set of related items in lists.

Unordered HTML List
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles) by default:
eg:<ul>
<li>Coffee
<li>Tea
<li>Milk
</ul>

Ordered HTML List
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Exercise 3.2

In the editor below. 
Create an ordered and unordered list for the following items
milk, bread, cheese, eggs

See the Pen HTML-OLList by Ankit (@AnkitPathshalaCoding) on CodePen.

Iframes

In HTML an iframe is used to display a webpage inside a webpage.
It is an inline frame.
The attributes for the iframe element are

Title:- The title attribute is used to give a description of the iframe

Height: Attribute is used to set the height of the Iframe

Width: Attribute is used to set the width of the iframe

Eg:
<iframe title=”Iframe Example” src=”https://code.ankitpathshala.com/” width=”300″ height=”200″>
</iframe>

Exercise 3.3

In the editor below. 
Enter an iframe tag pointing to your favourite website.
Enter the height and width as 500 each

See the Pen iframe by Ankit (@AnkitPathshalaCoding) on CodePen.