HI THIS TOUTORIAL WILL HELP FULL FOR STARTUP IN HTML5 CREATED BY NAVEENRAJU
HTML5----->HyperTextMarkupLang version 5
Tags Represented on Head Section
<title> (this element is required in the head section) <style> <base> <link> <meta> <script> <noscript>
Tags Represented on body Section
<a>,<address>,<applet>,<area>,<article>,<aside>,<audio>
<b>,<base>,<basefont>,<big>,<body>,<br>,<button>
<canvas>,<caption>,<center>,<cite>,<code>,<col>,<colgroup>,<command>
<datalist>,<dd>,<del>,<details>,<dfn>,<dir>,<div>,<dl>,<dt>
<em>,<embed>
<fieldset>,<figcaption>,<figure>,<font>,<footer>,<form>,<frame>,<frameset>
<head>,<header>,<hgroup>,<h1> - <h6>
<hr>,<html>
<i>,<iframe>,<img>,<input>,<ins>
<kbd>,<keygen>
<label>,<legend>,<li>,<link>
<map>,<mark>,<menu>,<meta>,<meter>
<nav>,<noframes>,<noscript>
<object>,<ol>,<optgroup>,<option>,<output>
<p>,<param>,<pre>,<progress>
<q>
<rp>,<rt>,<ruby>
<s>,<samp>,<script>,<section>
<select>,<small>,<source>,<span>,<strike>,<strong>,<style>,<sub>,<summary>,<sup>
<table>,<tbody>,<td>,<textarea>,<tfoot>,<th>,<thead>,<time>,<title>,<tr>,<track>,<tt>
<u>,<ul>
<var>,<video>
<wbr>
======================================================================================
HTML Tags Examples By NaveenRaju
<a>,<abbr>,<address>,<applet>,<area>,<article>,<aside>,<audio>Tag Descriptio HTML AND HTML5?
Tags Starting With Alfabet (A):
<!DOCTYPE> Specifies the document
<a> Specifies a hyperlink
<abbr> Specifies an abbreviation
<address> Specifies an address element
<area> Specifies an area inside an image map <article> Specifies an article ================>NEW
<aside> Specifies content aside from the page content =========> NEW
<audio> Specifies sound content ==================> NEW
Basic Html5 basic Syntax
<!DOCTYPE HTML>
<head>
<!--
Here we can define titles,css,javascript files.
-->
</head>
<body>
<!--
here we can define main Html tags
-->
</body>
</html>
1)AnchorTag <a>--------->Specifies a hyperlink
<!DOCTYPE HTML>
<head>
<Title>Anchor Tag Demo</Title>
</head>
<body>
<a href="http://jj2eeprograming.blogspot.in/2012/09/learn-java-coding-in-simple-and-easy_16.html">Java Blog</a><br>
<a href="http://grails-startup.blogspot.in/2013/01/grails-startup-with-dynamic-scffold.html">Grails Blog</a><br>
<a href="http://androidapplicationdevloperstooutorial.blogspot.in/2013/01/hi-this-toutorial-will-help-full-for_29.html">Android Blog</a><br>
<a href="http://iosappdevolopmentprogramerstoutorials.blogspot.in/2013/01/blog-post_29.html">IOS Blog</a>
</body>
</html>
o/p:
2) Abbrevation tag <abbr> Specifies an abbreviation
The HTML
<abbr> tag is used for indicating an abbreviation.
This tag is often used in conjunction with the global
title attribute in order to provide an expansion of the abbreviation.
<!DOCTYPE HTML>
<head>
<Title>Abbrivation Tag Demo</Title>
</head>
<body>
<abbr title="(HalettPackard)">HP</abbr> established in 1939 by BillHalett and DevPackard.
</body>
</html>
O/p:
3) <address> Specifies an address element
The HTML
<address> tag is used for indicating an address, usually related to authorship of the current document, or a section of the document.
If the tag applies to the body element, then it applies to the document as a whole.
The
<address> tag must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are contact information for the section. To display postal addresses, simply use the <p> tag.
<!DOCTYPE HTML>
<head>
<Title>Abbrivation Tag Demo</Title>
</head>
<body>
<address>
This document was written by:<br />
<a href="mailto:homer@example.com">Homer Simpson</address>
</body>
</html>
o/p:
click HomerSimson link then it will ask email id and pswd type ur status then folloing NewMessage page will open
4) <area> Specifies an area inside an image map
We use area tag in map(Images),
we will divide image in to no of areas and we will do som operation on it
This example i am dividing image in to 3 areas and for each area i am giving diff paths
<!DOCTYPE HTML>
<head>
<Title>Abbrivation Tag Demo</Title>
</head>
<body>
<img src ="naveen.jpg" width="225" height="151" border="0"
alt="my self at office"
usemap ="#nameofmap" />
<map id ="nameofmap"
name="nameofmap">
<!-- =============== FIRST AREA =============== -->
<area shape ="rect" coords ="90,80,120,151"
href ="javascript:alert('Me');"
alt="Me" />
<!-- ================= SECOND AREA ============== -->
<area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
href ="http://grails-startup.blogspot.in/2013/01/grails-startup-with-dynamic-scffold.html" target="_blank" alt="Mount Cook" />
<!-- ================= THORD AREA- ============== ->
<area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80"
href ="http://androidapplicationdevloperstooutorial.blogspot.in/2013/01/hi-this-toutorial-will-help-full-for_29.html" target="_blank"
alt="Mueller Hut" />
</map>
</body>
</html>
O/P:
I AM CLICKING IMAGE IN 3 DIFF AREAS
FIRST AREA CLICK ON IMG
SECOND CLICK ON DIFF AREA CLICK ON IMG THEN LINK IS GOING TO ANDROID APP DEVELOPMENT
THORD CLICK ON DIFF AREA CLICK ON IMG THEN LINK IS GOING TO GRAILS APP DEVELOPMENT
5)<aside> Specifies content aside from the page content
By using this tag we can aside our text to right,left by changing
attribute
float="left" or
float="right"
For Aside Right:
<html>
<head>
<title> AsideTagDemo </title>
</head>
<body>
<aside style="font-size:larger;font-style:italic;color:green;float:right;width:35%;padding-left:5px;">
Hii this is NaveenRaju.
</aside>
</body>
</html>
o/p:
For Aside Left:
<html>
<head>
<title> AsideTagDemo </title>
</head>
<body>
<aside style="font-size:larger;font-style:italic;color:green;float:left;width:35%;padding-left:5px;">
Hii this is NaveenRaju.
</aside>
</body>
</html>
O/P:
6) <audio> Specifies sound content in music player
<!DOCTYPE HTML>
<head>
<title>Audio Player Demo </title>
</head>
<body>
<audio src="naveen.mp3" controls>
</audio>
</body>
</html>
o/p:
7)Applet
By Using this Tag we can download missing plugins for example i am taking (Sum.class )
<html>
<body>
<object width="400" height="400" data="Sum.class">
<applet code="Sum.class" width="500" height="650">
Java applet of a woofer dog.
</applet>
</object>
</body>
</html>
o/p:
8)<article>
The HTML
<article> tag is used to represent an article. More specifically, the content within the <article> tag is independent from the other content on the site (even though it could be related). By "independent" I mean that its contents could stand alone, for example in syndication.
Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-submitted comment.
The
<article> tag was introduced in HTML 5.
<!DOCTYPE HTML>
<head>
<title>Audio Player Demo </title>
</head>
<body>
<article>
<h4>Grails Toutorial</h4>
<p>A <a href="http://androidapplicationdevloperstooutorial.blogspot.in/2013/01/hi-this-toutorial-will-help-full-for_29.html" target="_blank">My GRAILS Blog</a>
<p> The HTML <article> tag is used to represent an article. More specifically, the content within the <article> tag is independent from the other content on the site (even though it could be related). By "independent" I mean that its contents could stand alone, for example in syndication.
Examples of article content could include a forum post, a newspaper article, a blog entry, or a user-submitted comment.
The <article> tag was introduced in HTML 5.
</p>
</article>
</body>
</html>
o/p:
No comments:
Post a Comment