html5-fundamentals.html

<!-- html5 fundamentals -->

<!-- 01.first website  -->


<!-- source  -->
<!doctype html>

<html>

<head>

<title> idol wave </title>

</head>

<body>

<h1> software, user interface, user experience </h1>

<p> a tune of better world </p>

<h2> virtual marketing </h2>

<p> success </p>

</body> 

</html>

<!-- save as  -->
<!-- text.html -->
<!-- 02a.line brake -->
 
<!-- source  -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<h1> software,user inreface,user experience </h1>
<p> a tune of better world </p>
<br>
<br>
<br>
<br>
<br>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html> 

<!-- 02b.! sign -->

 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<h1> software,user inreface,user experience </h1>
<p> a tune of better world </p>
<br>
<br>
<br>
<br>
<br>
<! nothing will show for exclamation sign>
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html> 

<!-- 02c.without ! sign -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<h1> software,user inreface,user experience </h1>
<p> a tune of better world </p>
<br>
<br>
<br>
<br>
<br>
<--will show for exclamation sign-->
<h2> virtual marketing </h2>
<p> success </p>
</body> 
</html>

<!-- 02d.space in text -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<h1> software,user inreface,user experience </h1>
<p> a tune of better world </p>
<br>
<br>
<br>
<br>
<br>
<h2> virtual &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp marketing </h2>
<p> success </p>
</body> 
</html>


<!-- 03a.ul (unorder list) -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<ul>
<li> cd </li>
<li> dvd </li>
<li> blu ray </li>
</ul>
</body> 
</html>


<!-- 03b.ol (order list) -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<ul>
<li> cd </li>
<li> dvd </li>
<li> blu ray </li>
</ul>
<ol>
<li> cd </li>
<li> dvd </li>
<li> blu ray </li>
</ol>
</body> 
</html>


<!-- 04a.table-01 -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<table>
<tr>
<th> the planets </th>
<th> the oceans </th>
<th> the deserts </th>
</tr>
<tr>
<td> earth </td>
<td> pacific </td>
<td> sahara </td>
</tr>
</table>
</body> 
</html>


<!-- 04b.table-02 -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<table>
<tr>
<th> the planets </th>
<th> the oceans </th>
<th> the deserts </th>
</tr>
<tr>
<td> earth </td>
<td> pacific </td>
<td> sahara </td>
</tr>
<tr>
<td> pluto </td>
<td> atlantic </td>
<td> gobi </td>
</tr>
</table>  
</body>   
</html>

<!-- 05.adding links -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<p> please click on this link
<a href="http://idolwave.org/"> idol wave </a>
</p>
</body> 
</html>


<!-- 06.creating a link in same page -->
     
<!-- source -->
<!doctype html>
<html>
<head>
<title>idol wave</title>
</head>
<body>
<ul> 
<li> <a href="#birds">birds section</a> </li>
<li> <a href="#ducks">ducks section</a> </li>
</ul>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p> <a name="birds"> this is the article about birds. </a></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><p>
 <a name="ducks"> this is the article about ducks. </a></p>
</body> 
</html>


<!-- 07. adding Image  -->
                                        

<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<h1>idol wave</h1>
<p> <img src="logo.png"> </p>
</body> 
</html>


<!-- 08. resize Image  -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<h1>idol wave</h1>
<p> <img src="logo.png" width="200" height="200"> </p>
</body> 
</html>


<!-- 09. parent element & child element relation -->

<!doctype html>
<html>
<head>
<title>     </title>
</head>
<body>                      parent element
<h1> </h1>
<p>   </p>                  child element
</body> 
</html>


<!-- 10a. text box   -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action=" method="">
<input type="text" name="">
<!--Input elements go in here-->
</from>
</body> 
</html>


<!-- 10b. text box   -->
 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action=" method="">
<input type="text" name="">
<input type="text" name="">
<!--Input elements go in here-->
</from>
</body> 
</html>


<!-- 10c. text box   -->

 
<!-- source -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action=" method="">
<input type="text" name=""> 
<br>
<br>
<input type="text" name="">
<!--Input elements go in here-->
</from>
</body> 
</html>


<!-- 11a. text box with label   -->
 
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action=" method="">
<label for="firstname"> first name:</label>
<input type="text" id="firstname" name=""> 
<br>
<br>
<input type="text" name="">
<!--Input elements go in here-->
</from>
</body> 
</html>


<!-- 11b. text box with label   -->
 

<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action=" method="">
<label for="firstname"> first name:</label>
<input type="text" id="firstname" name=""> 
<br>
<br>
<label for="lastname"> last name:</label>
<input type="text" id="lastname" name="">
<!--Input elements go in here-->
</from>
</body> 
</html>


<!-- 12a. multi line text box   -->

  
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="” method="">
<textarea rows="10" cols="40"></textarea></br>
</from>
</body> 
</html>


<!-- 12b. multi line text box big -->
 

<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="” method="">
<textarea rows="30" cols="80"></textarea></br>
</from>
</body> 
</html>


<!-- 12c. multi line text box with heading -->
 

<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="” method="">
coments: </br>
<textarea rows="30" cols="80"></textarea></br>
</from>
</body> 
</html>


<!-- 12d. multi line text box with submit button  -->
 

<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="” method="">
coments: </br>
<textarea rows="30" cols="80"></textarea></br>
<input type="submit" value="submit">
</from>
</body> 
</html>

<!-- 13a. radio buttons -->

                                    
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="" method="">
yes:
<input type="radio" name="yesorno" value=""> </br>
 <input type="radio" name="yesorno" value="">
</from>
</body> 
</html>


<!-- 13b. radio buttons  -->


<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="" method="">
yes:
<input type="radio" name="yesorno" value=""> </br>
no:
<input type="radio" name="yesorno1" value="">
</from>
</body> 
</html>


<!-- 14a. check box  -->

   
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="" method="">
which subjects are you interested in? <br>
<input type="checkbox" name""> football <br>
<input type="checkbox" name""> basketball <br>
<input type="checkbox" name""> baseball <br>
<input type="checkbox" name""> hockey 
</from>
</body> 
</html>


<!-- 14b. check box  -->

   
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="" method="">
which subjects are you interested in? <br>
<input type="checkbox" name"" checked="checked"> football <br>
<input type="checkbox" name""> basketball <br>
<input type="checkbox" name""> baseball <br>
<input type="checkbox" name""> hockey 
</from>
</body> 
</html>


<!-- 15a. input number box  -->

    
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="" method="">
<input type="number">
</from>
</body> 
</html>


<!-- 15b. input number box with range -->

  
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="" method="">
<input type="number" min="0" max="50">
</from>
</body> 
</html>


<!-- 16.drop down list -->

   
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from action="" method="">
<select>
<option value="michigan">michigan</option>
<option value="alabama">alabama</option>
<option value="north dakota">north dakota</option>
</select>
</from>
</body> 
</html>


<!-- 17.date & number box -->
 

<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from>
enter day you want to travel to cancun:
<input type="date" name="day"> 
</br>
number of days: <input type="number" name="numdays" min="01" max="10">
</from>
</body> 
</html>


<!-- 18a.fieldbox and legend elements -->
 

<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from>
enter day you want to travel to cancun:
<input type="date" name="day">
</br>
number of days: <input type="number" name="numdays" min="01" max="10">
<br><br>
name: <input type=text">
</from>
</body>
</html>


<!-- 18b.fieldbox and legend elements -->
 
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from>
<fieldset>
enter day you want to travel to cancun:
<input type="date" name="day">
</br>
number of days: <input type="number" name="numdays" min="01" max="10">
<br><br>
name: <input type=text">
</fieldset>
</from>
</body>
</html>


<!-- 18c.fieldbox and legend elements -->

 
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<from>
<fieldset>
<legend>enter day you want to travel to cancun:</legend>
<input type="date" name="day">
</br></br>
number of days: <input type="number" name="numdays" min="01" max="10">
<br><br>
name: <input type=text">
</fieldset>
</from>
</body>
</html>

<!-- 19.attributes -->

<!-- attributes: -->

<p>     </p>
<h1>     </h1>
<body>    </body>
<p class=”test”> some text in this paragraph </p>
<label for=”name”> name </label>


Here,
<p class=”test”> 
<label for =”name”> 

are  attributes.


<!-- 20.the meta element -->

<!-- meta: -->

<!doctype html>
<html>
<head>
<title> idol wave </title>
<meta name=”description”content=”this is a web age about information technology. we cover all the websites, graphics and advertisement in the world.”/>
<meta name=’keywords” content=”website, graphics, advertising./>
<meta http-wquiv=”content-language” content=”en-us”
</head>
<body>
<div>
</div>
</body>
</html>


<!-- 21.escape characters -->

<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<p>attribute character abbreviation coding </p>
</body>
</html>

  Space ---------- &nbsp
  TM  --------------  &#8482
  & ---------------- &amp
  --------------- &copy
  < ----------------- &lt
  > ----------------- &gt
  ? ----------------- &#63


<!-- 22.bold and italic elamets -->
 
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<p> this is a <b> bold element </b>. </p>
<p> this is a <strong> strong element </strong>. </p>

<p> this is a <i> italic element </i>. </p>
<p> this is a <em> em element </em>. </p>

<! b=strong is same command and i=em is same command>
</body> 
</html>


<!-- 23a.i frame element -->

 
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<iframe frameborder="" width="" height="" src="" name="" id=""> 
</iframe><br />
nothing happened
</body> 
</html>


<!-- 23b.i frame element -->
 

<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<iframe frameborder="1" width="200" height="200" src="" name="ouriframe" id="ouriframe"> 
</iframe><br />
</body> 
</html>


<!-- 23c.i frame element -->
 

<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<iframe frameborder="1" width="200" height="200" src="" name="ouriframe" id="ouriframe"> 
do you see this?

<! do yoju see this? is not showing because it is in side of closing iframe>
</iframe><br />
</body> 
</html>


<!-- 23d.i frame element -->

                           
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<iframe frameborder="" width="" height="" src="first.html" name="" id=""> 
</iframe><br />
</body> 
</html>


<!-- 23e.i frame element -->

                   
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<iframe frameborder="" width="" height="" src="first.html" name="" id=""> 
</iframe><br />
<a href="second.html" target="ouriframe"> switch to new document</a>
</body> 
</html>


<!-- 24.sup and sub element(superscript and subscript)  -->

<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<p> the expert said a lot on december 25<sup>th</sup>.</p>
<p> there is plenty of h<sub>2</sub>o in the lake.</p>
</body>
</html>


<!-- 25a. title and alt attributes -->


<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<img src="idol wave logo.png" width="200" height="200" title="idol wave" alt="idol wave">
<!as like image taging but this application for jquery>
</body>
</html>


<!-- 25b. title and alt attributes -->


<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<img src="idol wave logo1.png" width="200" height="200" title="idol wave" alt="idol wave">
<!as like image taging but this application for jquery>
</body>
</html>


<!-- 26a. audio element -->
 		 
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<audio controls="audiocontrols">
   <source src="apk water fall gallary.m4a"/>
</audio>
<!-- three standard formats for web browsers are .mp3 .wav and .ogg -->
</body>
</html>


<!-- 26b. audio element -->

 	 
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<p><audio controls="audiocontrols">
  	<source src="apk water fall gallary.m4a"/> </audio></p>
<p><audio controls="audiocontrols">	  
	<source src="apk water fall gallary.wav"/> </audio></p>
<p><audio controls="audiocontrols">	
	<source src="apk water fall gallary.ogg"/> </audio></p>
<!-- three standard formats for web browsers are .mp3 .wav and .ogg -->
</body>
</html>


<!-- 27a. audio element attributes -->
 		 
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<audio controls>
   <source src="apk water fall gallary.m4a"/>
</audio>
<!-- three standard formats for web browsers are .mp3 .wav and .ogg -->
</body>
</html>


<!-- 27b. audio element attributes auto ply -->
 	 
source:
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<audio controls autoplay>
   <source src="apk water fall gallary.m4a"/>
</audio>
<!-- three standard formats for web browsers are .mp3 .wav and .ogg -->
</body>
</html>


<!-- 27c. audio element attributes auto play over and over   -->

 	 
<!-- source: -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<audio controls autoplay loop>
   <source src="apk water fall gallary.m4a"/>
</audio>
<!-- three standard formats for web browsers are .mp3 .wav and .ogg -->
</body>
</html>


<!-- 27d. audio element attributes auto play over and over with drag gable   -->
 
                
<!-- source:  -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<audio controls auto play loop draggable="true">
  	<source src="apk water fall gallary.m4a"/>  
</audio>
<!-- three standard formats for web browsers are .mp3 .wav and .ogg -->
</body>
</html>


<!-- 28. video element   -->

           
<!-- source:  -->
<!doctype html>
<html>
<head>
<title> idol wave </title>
</head>
<body>
<video width="640" height="360" controls>
  	<source src="apk water fall gallary.mp4"/>  
</video>
<!--standard video formats for web browsers are .mp4 .webm and .ogg -->
</body>
</html>


<!-- html5 -->
<!-- to -->
<!-- vanilla-css3 -->
<!-- and -->
<!-- javascrift -->