HTML5 Tags for line break,spacing,comments

1.Tags For line break:

For line break in HTML, the <br> tag is used.

As this is an empty tag it does not need a closing tag. If you want a break of three lines then three times break tag should be used.

It is used for writing addresses or poems. It is used for adding breaks in line not for adding spaces in the paragraph. This tag supports Global Attributes and Event Attributes in HTML.

SYNTAX:

<br>Learning Web development <br> is easy <br> with techfreaktalks.

PROGRAM:

<!DOCTYPE HTML>

<HTML>

<body>

<h1>The br element</h1>

<p><br>Learning Web development <br> is easy <br> with techfreaktalks </p>

</HTML>

</body>

OUTPUT:

2.For additional spacing (HTML for space) :

Additional spaces in HTML cannot be added by clicking the space-bar multiple times.

HTML spacing code is“  ”.

nbsp stands for non-breaking space.

For example:

If you want to print,

test1 test2

Then you have to write it like test1 &nbsp &nbsp &nbsp test2

3.Comment in HTML:

The HTML comments section is used to keep notes in your code section but it does not get displayed on the web page.

If your code is too big or too complicated then for making it easy to understand commonly comments are used. Comment tag does not support the Standard attribute and Event attribute.

For this we use

PROGRAM:

<!DOCTYPE HTML>

<HTML>

<body>

<p>HTML COMMENT.</p>

</body>

</html>

OUTPUT:

Learn HOW TO MAKE HTML LIST

HTML Tags for LISTS

If you look virtually at every web page, they always have some sort of list whether it is a menu or bullet list.If you want to add a group of related items to a list for your web page HTML lists tag are used.

HTML tags for lists:

Unordered list
Ordered List

We just have to use some specific tags to create a list. Both the list uses the Li element tag(<li>)

This is embedded inside either the OL or the UL element.

1.Unordered list :

An Unordered list is created by using the UL tag(<ul>).

It is the default list which people use while designing web pages. But every list item starts with a <li> tag.

In this unordered list, items are marked by bullets i.e. small black discs which are by default.

For other markers like circle and square, there is a CSS property “ list-style-type”.

The unordered list can be nested. List items can contain other HTML components.

SYNTAX:

<ul>

<li>JAVASCRIPT</li>

</ul>

2.Ordered list:

    An ordered list is created by using the OL tag (<ol>). 

An ordered list is used at lesser content. The ordered list contains alphabets and numbers.

Each item in the ordered list starts with <li> tag and ends with </li>But the default ordered list takes numerical values. An ordered list can be nested.

SYNTAX:

<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVASCRIPT</li>
</ol>  

PROGRAM:

<!DOCTYPE HTML>
<HTML>
<body>

<h2>An Unordered HTML List</h2>

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVASCRIPT</li>
</ul>  

<h2>An Ordered HTML List</h2>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JAVASCRIPT</li>
</ol>  

</body>
</html>

OUTPUT:

In the ordered list we use the “type” attribute for defining the type of list item marker.

Type attribute

1. Type=“A”:

In this list, items are numbered as Uppercase letters.

2.Type=“a” :

In this list, items are numbered as lowercase letters.  

3.Type=“1” :

 In this list, items are numbered as numbers. This is the default marker.

4.Type=“I” : 

In this list, items are numbered as Uppercase roman letters. 

5.Type=“i”:  

 In this list, items are numbered as lowercase roman letters.  

There is a special attribute in the ordered list i.e. “start”. In the ordered list, the default list starts from 1. But if you want to start your list from a special counting then the “start” attribute is used. 

     

OTHER LIST in HTML:
In the HTML description list is also used. 
<dl> is used for description lists.
<dt> is used for description terms(name).
<dd> is used for describing each term.

HTML Image tag:
How to insert an HTML image?
Html images are used to give an aesthetic look and design to your web pages.

<img> HTML tag is used to add the desired image to a web page.

This tag does not require a closing tag. Actually <img>tag links up the image to the web page rather than inserting it to the webpage.

Two attributes are used along with the <img>tag in HTML.

Src: gives the path of the image.HTML image URL is added in the source.
Alt: gives the alternate text to be displayed if the image is not loaded due to technical issues.

The src attribute:

Src attribute detects an image by its URL. The image from the URL is retrieved with the help of a browser and then embedded into the document when the web page loads.

The Alt attribute:

The alt attribute is useful when an image is not displayed on the webpage. By seeing the alternate text added, the user comes to know about some idea of the image.

SYNTAX:

<img src= “img url” alt=”alternatetext">

You can define the HTML image size by width and height of the image by adding width and height attributes in the <img>tag.

<img src= “img url” alt=”alternatetext'' width ="200" height="300">

PROGRAM :

<!DOCTYPE HTML>

<HTML>

<body>

<h1>The img element</h1>

</body>

</html>

HTML Image map tag :

Image mapping is used to create clickable areas on the image.

So, don’t you think the first point is a little bit confusing, let's make it easy.

What is the use of the anchor tag?
For adding hyperlinks to your image we use an anchor tag.
If you click on any section of the image it will direct you to that connected hyperlink.
But what if I want two hyperlinks on the same image? Clearly, it is not possible by using an anchor tag.

So, we have another way to create hot-spot areas or more than one hyperlink on our image.
To create more than one hyperlinks we need to create a map. To create a map we use <map> tag.

<map> tag is a pair tag so we need to create a closing tag of map i.e. </map> tag.Inside a map tag, we create hotspot areas. So for that, we need to create a <area> tag. This is an unpaired tag.

<area> tag:

<area> tag  takes few attributes.

We have to assign values to those attributes.

Shape attribute:

The first is the shape. It gives us what type of shape that area should be. Values to shape are:
 Rect: It is going to create a rectangle area
Circle:  It is going to create a circular area
poly:  It is going to create a polygonal area
default:  It is going to take the entire area
So tag is syntax as: 

     <area shape= “rect”>

coords attribute:
 coords is an attribute that takes coordinates. Here we have to give values to coords attribute.
Values that we give to coords are “‘left’, ‘top’, ‘right’, ‘bottom’”.

So, what is left, top, right, bottom for the rectangle? 

Basically it is “x,y,(x+width),(y+height). By using some software like ‘Photoshop’ you can get it.

And after that, you can add a hyperlink to that area.

Syntax: 

    <area shape= “rect” coords= “x,y,(x+width),(y+height) href= “techfreaktalks”>

Now, the next important step is to give a name to the map. And this name which is given to the map tag is going to be used by <img> tag. We use an attribute called a usemap. In between, we give ‘# name of that image.

For different sections in the image, we will use different <area> tags and we will repeat this process. 

For mapping,  HTML image map online generators are available.
Html image map creator is basically used for creating multiple clickable areas in the image.

Roadmap To Web Development

Improve Your HTML5 Formatting And HTML5 Image tag

HTML5 Tags for line break,spacing,comments

Learn HOW TO MAKE HTML LIST

HTML Tags for LISTS

HTML Image tag:

Comments

Post a Comment

Popular posts from this blog

How To Become Front End Developer In Easy Way

Why is HTML5 so popular nowadays?