HTML Data Types, Attributes and entities

0 92

Data Types Attributes and entities in HTML

in this tutorial you will learn about Data Types Attributes and entities in HTML

What is data types in HTML

A data type specifies that which type value assigned to the attribute and what type of content that is to be displayed on your HTML web page.the different type of content there in HTML web page in case of text images hyperlink video and audio.data types in HTML help us to identify the type of formatting such as color and length of data.

<!DOCTYPEhtml>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>HTML data types>/h1>
<p style="color:red; font-size:18px;">A data type spedifies that which type value assiegned to the attribute and what type of content that is to be displayed on your html web page.the diffrent type of content there in html web page in case of text images hyperlink video and audio.data types in html help us to identify the type of formatting such as color and length of data.</p> 

</body>
</html>

important basic data types are.

Text Strings

Text Strings Specifies textual content of HTML web page which is readable by the user.

Uniform Resource Identifiers (URIs)

Uniform Resource Identifiers (URIs) Specifies the location of Web pages or network files.

Colors

Color data type specify the color to be applied HTML content.

Lengths

Length data type specifies spacing among HTML elements. in HTML document length value can be in pixel,length,or multilength.

Content Types

Content data type specifies that which type content to be displayed on HTML web page. Examples of content types include “text/html” for displaying text using HTML format, “image/gif” for displaying image of a .gif format, and “video/mpg” for displaying a video file of .mpg format.

HTML Attributes

What is HTML Attributes

HTML attributes help to provide some meaning to the elements in other words attributes are name/value pairs that describe the element and its content format. Attributes are always added in start tag Some of the global attributes are…

 

Class

Class attribute specifies class name of your HTML element, class attribute will assign more subtype, these subtypes can be used later in CSS for styling your HTML content or with javascript to change or add behavior etc.

 

<!DOCTYPEhtml>
<html>
<head>
<title>Class attribute</title>
<style> .paragraph{ font-size:18px; color:red; } </style> </head>
<body>

<h1>Class attribute>/h1>
<p class="paragraph">Class attribute specify class name of your html element, class attribute will assign more subtype, these subtypes can be used later in CSS for styling your html content or with java script to change or add behavior etc.</p>

</body>
</html>

contectmenu

This attribute will specify content menu for HTML element. The context menu will appear that time when a user right click on the element

dir attribute

dir attribute specifies the direction of the text present for the element.dir attribute used for drop and drag element function, in HTML images and links are draggable by default.

<!DOCTYPEhtml>
<html>
<head>
<title>dir attribute</title>
</head>
<body>
<h1>dir attribute>/h1>
<dir>
<li>HTML5 </li>
<li>JavaScript </li>
<li>CSS </li>
<li>Jquery </li>
</dir>
<p>In HTML5 dir element is not supported .instead of dir element use CSS.</p>

</body>
</html>

dropzone attribute

dropzone attribute will specify whether that dragged data link, copied, or moved when its dropped.

<!DOCTYPEhtml>
<html>
<head>
<title>dropzone attribute</title>
</head>
<body>
<h1>dropzone attribute>/h1>
<div dropzone="copy"></div> 
</body>
</html>

style

Through style attribute, you can give inline style to your element.

<!DOCTYPEhtml>
<html>
<head>
<title>style attribute</title>
</head>
<body>
<h1>Style attribute>/h1>
<p style="color:red; font-size:18px;">Through style attribute you can give inline style to your element.</p> 
</body>
</html>

title

title attribute provides extra information about the element.

<!DOCTYPEhtml>
<html>
<head>
<title>title attribute</title>
</head>
<body>
<h1>title attribute>/h1>
<p>Place your mouse pointer on below link.</p>
<a href="www.exceptionbound.com" title="Click me">Try it</a>

</body>
</html>

lang attribute

In HTML document language can be declared in <html> tag using lang attribute.

<!DOCTYPEhtml>
<html>
<head>
<title>lang attribute</title>
</head>
<body>
<h1>lang attribute>/h1>
<p>This paragraph is wrriten in english.</p>
<p lang="fr">Ce paragraphe est wrriten en anglais.</p>

</body>
</html>

href attribute

In HTML links are defined with the <a> tag to specify link address href attribute used.

<!DOCTYPEhtml>
<html>
<head>
<title>title attribute</title>
</head>
<body>
<h1>href attribute>/h1>
<p>Click on below link.</p>
<a href="www.exceptionbound.com" title="Click me">Try it</a>

</body>
</html>

Size Attribute

In elements u can set your image/movie height and width, size attributes are available in height and width.

<!DOCTYPEhtml>
<html>
<head>
<title>size attribute</title>
</head>
<body>
<h1>size attribute>/h1>
<p>In elements u can set your image/movie height and width, size attributes are available in height and width.</p>
<img src="free_learn_html5_tutorials.gif" width="285" height="290" alt=""/>

</body>
</html>

alt Attribute

Through alt attribute can define alternative text in cause when your required element can’t be displayed.

<!DOCTYPEhtml>
<html>
<head>
<title>alt attribute</title>
</head>
<body>
<h1>alt attribute>/h1>
<p>Through alt attribute can be define alternative text in cause when your required element can’t be displayed.</p>
<img src="" width="285" height="290" alt="HTNL5 image"/>

</body>
</html>

HTML entities

Reserved characters replaced with character entities in html, if you want to use the less then (<) and greater then (>) signs in your html text ,might be browser will mix them with tags o in html character entities are always used to display reserved character in the html document.

If want to display less sign then have to write like this < or (>)

Some entities are follows which are commonly used in html.

Output Description Entity Name Entity Number
non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
euro &euro; &#8364;
© copyright &copy; &#169;
¢ cent &cent; &#162;
¥ yen &yen; &#165;
® registered trademark &reg; &#174;
<!DOCTYPEhtml>
<html>
<head>
<title>Class attribute</title>
</head>
<body>

<h1>html entities>/h1>
<p>Space &nbsp; entity </p>
<p>less than &#60; entity </p>
<p>greater than &gt; entity </p>
<p>ampersand &amp; entity </p>
<p>euro &euro; entity </p>
<p>copyright &copy; entity </p>
<p>cent &cent; entity </p>
<p>yen &yen; entity </p>
<p>registered trademark &reg; entity </p>

</body>
</html>

Comments

comments

Leave A Reply

Your email address will not be published.