Basic Elements - Learn HTML - Free Interactive HTML Tutorial

-
Image
Basic Elements The use of basic HTML Tags.. Coding.... <!DOCTYPE html> <html> <head> <title>Example page</title> </head> <body> <h1>Heading 1</h1> <h2>Heading 1</h2> <h3>Heading 1</h3> <h4>Heading 1</h4> <h5>Heading 1</h5> <h6>Heading 1</h6> <p>This is peragraph.</p> <p>Horizontal Line Below</p> <hr /> </body> </html> Output Of Above Code... Output
Post a Comment

How Add Attributes In HTML

-

How Add Attributes In HTML

  • The name is the property you want to set. For example, the paragraph <p> element in the example carries an attribute whose name is align, which you can use to indicate the alignment of paragraph.
  • The value is what you want the value of the property to be set and always put within quotations. The below example shows three possible values of align attribute: left, center and right.
  • Attribute names and attribute values are case-insensitive.

    Example

    <html>
 
   <head> 
   <title>Attribute  Example</title> 
   </head>
 <body> 
 <p align = "left">This is left alignement</p> 
 <p align = "center">This is center alignement</p> 
 <p align = "right">This is right alignement</p> 
</body>

</html>

  • 

    

    OutPut Screen
    

    

    
Basic Attributes
    

    
The four Basic attributes that can be used on the majority of HTML are:
    

      

    • Id
      • 

    • Title
      • 

    • Class
      • 

    • Style
      • 

    

    
Id:
    

    
The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page.
    

      

    • 
If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
      

      • 

    • 
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.
      

      • 

    

    
Example
    

    <p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

    

    
title:
    

    
The title attribute gives a title for the element. They syntax for the title attribute is similar as explained for id attribute:
    

    
Example
    

    <html>

   <head>
      <title>Attribute Example</title>
   </head>
 
   <body bgcolor="#993300">
 <h3 title = "Hello HTML!;"style="font-size:19s;" align="center">Example of Title Attribute in Heading Tag iclude style attributes</h3>
   </body>
 
</html>
    

    Image
    

    Output Screen
    

    

    

    
Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.
    

    
The class Attribute
    

    
The class attribute is used to associate an element with a style sheet, and specifies the class of element. 
    

    
The value of the attribute may also be a space-separated list of class names. For example −
    

    class = "className1 className2 className3"

    

    
The style Attribute
    

    
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within element.
    

    <html>

   <head>
      <title>Attribute Example</title>
   </head>
 
   <body bgcolor="#993300">
 <h3 title = "Hello HTML!;"style="font-size:19s;" align="center">Example of Title Attribute in Heading Tag iclude style attributes</h3>
   </body>
 
</html>
    

    

    

    

    Image
    

    Output Screen
    

    

    

    

    
Internationalization Attributes
    

    
There are three internationalization attributes, which are available for most XHTML elements.
    

      

    • dir
      • 

    • lang
      • 

    • xml:lang
      • 

    

    
The dir Attribute
    

    
The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows −
    

    

    ValueMeaning
    

    ltrLeft to right (the default value)
    

    rtlRight to left (for languages such as Hebrew or Arabic that are read right to left)
    

    

    
Example
    
 <html dir = "rtl">
       <head>
      <title>Display Directions</title>
   </head>
 
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
 
</html>

    

    
When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text's direction for just the content of that tag.
    

    
The lang:
    

    
The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.
    

    
The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.
    

    
Example
    

    <html lang = "en">
   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>
    

    

    AttributeOptionsFunction
    

    alignright, left, centerHorizontally aligns tags
    

    valigntop, middle, bottomVertically aligns tags within an HTML element.
    

    bgcolornumeric, hexidecimal, RGB valuesPlaces a background color behind an element
    

    backgroundURLPlaces a background image behind an element
    

    idUser DefinedNames an element for use with Cascading Style Sheets.
    

    classUser DefinedClassifies an element for use with Cascading Style Sheets.
    

    widthNumeric ValueSpecifies the width of tables, images, or table cells.
    

    heightNumeric ValueSpecifies the height of tables, images, or table cells.
    

    titleUser Defined"Pop-up" title of the elements.

Comments

Post a Comment

Popular posts from this blog

HTML Character Sets

-
HTML  Character Sets: Number ASCII ANSI 8859-1 UTF-8 Description 32 space 33 ! ! ! ! exclamation mark 34 " " " " quotation mark 35 # # # # number sign 36 $ $ $ $ dollar sign 37 % % % % percent sign 38 & & & & ampersand 39 ' ' ' ' apostrophe 40 ( ( ( ( left parenthesis 41 ) ) ) ) right parenthesis 42 * * * * asterisk 43 + + + + plus sign 44 , , , , comma 45 - - - - hyphen-minus 46 . . . . full stop 47 / / / / solidus 48 0 0 0 0 digit zero 49 1 1 1 1 digit one 50 2 2 2 2 digit two 51 3 3 3 3 digit three 52 4 4 4 4 digit four 53 5 5 5 5 digit five 54 6 6 6 6 digit six 55 7 7 7 7 digit seven 56 8 8 8 8 digit eight 57 9 9 9 9 digit nine 58 : : : : colon 59 ; ; ; ; semicolon 60 < < < < less-than sign 61 = = = = equals sign 62 > > > > greater-than sign 63 ? ? ? ? question mark 64 @ @ @ @ commercial at 65 A A A A Latin capital letter A 66 B B B B Latin capital letter B 67 C C C C...
Read more

HTML Declaration

-
Image
HTML  <!DOCTYPE>  Declaration What is DOCTYPE..? Doctype is not a HTML Tag. It Describe the version of HTML document page. Use Of DOCTYPE.... <!DOCTYPE html> <html> <head> <title>doctype</title> </head> <font size=22> <body bgcolor="green"> The text of the document </body> </html> Output Of Above Code..
Read more

HTML Canvas Tutorial

-
HTML Canvas Tutorial: Colors, Styles, and Shadows Property Description fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing strokeStyle Sets or returns the color, gradient, or pattern used for strokes shadowColor Sets or returns the color to use for shadows shadowBlur Sets or returns the blur level for shadows shadowOffsetX Sets or returns the horizontal distance of the shadow from the shape shadowOffsetY Sets or returns the vertical distance of the shadow from the shape Method Description createLinearGradient() Creates a linear gradient (to use on canvas content) createPattern() Repeats a specified element in the specified direction createRadialGradient() Creates a radial/circular gradient (to use on canvas content) addColorStop() Specifies the colors and stop positions in a gradient object Line Styles Property Description lineCap Sets or returns the style of the end caps for a line lineJoin Sets or returns the type of cor...
Read more