Code1: (Sample)
<html>
<head>
<title>My First
Webpage</title>
</head>
<body>
This is my first homepage in Gss
Technolgogies
</body>
</html>
Save using first.html or first.htm
Code2: Nested Tags
<html>
<head>
<title>My First
Webpage</title>
</head>
<body>
<p><b><em>This
is NOT the proper way to close nested tags</p></em></b>
<p><b><em>This
is the proper way to close nested tags.</em></b></p>
</body>
</html>
Code3: headings
<html>
<head>
<title>headings </title>
</head>
<body>
<h1>This
is a heading</h1>
<h2>This is a
heading</h2>
<h3>This is a
heading</h3>
<h4>This is a
heading</h4>
<h5>This is a
heading</h5>
<h6> This is a
heading</h6>
</body>
</html>
Code4: (align)
<html>
<head>
<title>align </title>
</head>
<body
<h5 align="left">I
can align headings </h5>
<h5
align="center">This is a centered heading </h5>
<h5
align="right">This is a heading aligned to the right </h5>
</body>
</html>
Code5LParagraphs
<html>
<head>
<title>Para</title>
</head>
<body>
<p>kjdflksjfdkjdskfjkdjkfjksjdkfjksjdfjkajfk</p>
<p align="left">This
is a paragraph</p>
<p
align="center">this is another paragraph</p>
<body>
</html>
Code 6: line breaks
<html>
<head>
<title>linebreak</title>
</head>
<body>
<p>This <br> is a
para<br> graph with line breaks</p>
</body>
</html>
Output:
This
is a para
graph with line breaks
Code7: horizontal line
<html>
<head>
<title>horizontal
line</title>
</head>
<body>
<hr width="50%"
align="center">
<hr/>
<hr width=”75%” align=”left”>
<hr width=”75%” align=”right”>
</body>
</html>
Code8: abbr (abbreviation)
<html>
<head>
<title>abbr</title>
</head>
<body>
<abbr title="World Wide
Web">WWW</abbr>
</body>
</html>
Code9:Non breaking space
<p> This code would appear as this.</p>
Output:
code would appear as this
<head>
<title>nbsp</title>
</head>
<body>
<p> This code
would appear with three extra spaces.</p>
</body>
</html>
Code 10: anchor Tag
<head>
<title>anchor</title>
</head>
<body>
<a
href="www.google.com">google </a>
</body>
</html>
Code 11: pre tag
<head>
<title>pre</title>
</head>
<body>
<pre>
Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!
</pre>
</body>
</html>
Code 12: fontsize
<head>
<title>fontsize</title>
</head>
<body>
<p>
<font size="5">Here is a size 5 font</font>
</p>
</body>
</html>
Code13: fontcolor
<head>
<title>fontcolor</title>
</head>
<body>
<font color="red">This text is red</font>
<font color="green">This text is green</font>
</body>
</html>
Code14: lists (unordered list)
<body>
<ul>
<li>I am a list item!>
<li>I am a list item too!>
<li>I am a list item also!>
</ul>
</body>
Output:
- I am a list item!
- I am a list item too!
- I am a list item also!
Code 15: Ordered list
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
|
|
|
|
Code 16: Bold & italic&Strong
<html>
<title>Bold</title>
<body>
<b>This text is entirely BOLD!</b>
<i>Hyper Text Markup Language</i>
<b>html basic font tags</b> <br/> <i>html basic font tags</i> <br/> <Strong>html basic font tags</Strong> <br/>
</body>
</html>
Code17: code
<html>
<title>code</title>
<body>
<p>Feel free to search <code>Google</code>
for anything you wish to find on the internet.</p>
</body>
</html>
Code18: SuperScript and subscript
<html>
<title>supnsub</title>
<body>
<p>This text is <sup>superscripted!</sup></p>
2<sup>3</sup> = 8
14<sup>x</sup>
X<sub>2</sub>
<p>H<sub>2</sub>0 - Water
<p>O<sub>2</sub> - Oxygen
<p>CO<sub>2</sub> - Carbon Dioxide
</body>
</html>
Code19: Strikethrough
<html>
<title>Strike</title>
<body>
<p>This text is <del>scratched</del> out!</p>
<ol>
<li>Clean my room</li>
<li><del>Cook Dinner</del></li>
<li><del>Wash Dishes</del></li>
</ol>
</body>
</html>
Code 20: footnotes
<html>
<title>footnotes</title>
<body>
<p>"It was a lover's tryst<sup>1</sup>."</p>
</body>
</html>
Code 21:Background
<html>
<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>
</html>
Code22: Button
<html>
<title>button’s</title>
<body>
<button>gss</button>
<button>login</button>
</body>
</html>
Code 23: form textfield
<html>
<title>Form’s</title>
<body>
<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
</body>
</html>
Code 24: form radio button
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
Code
25: form checkboxes
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
Code 26: BaseFont
Base font:
Specify format for the basic text....
Code for above tag:
<html>
<head>
<title>Basicfont</title>
</head>
<body bgcolor="green">
<body>
<h1>html Basicfont</h1>
<br/>
<basefontsize ="100">
html Basicfont
</basefont>
</body>
</html>
Specify format for the basic text....
Code for above tag:
<html>
<head>
<title>Basicfont</title>
</head>
<body bgcolor="green">
<body>
<h1>html Basicfont</h1>
<br/>
<basefontsize ="100">
html Basicfont
</basefont>
</body>
</html>
Code 27: marquee
<html>
<head>
<title>marquee</title>
<head>
<title>marquee</title>
<body>
<marquee>gss technologies</marquee>
<body>
</html>
Code28: embed
Embed:
By using this tag we can Embed the plugin in the webpage to run the flash files video,audio files
A plugin is a special program located on the client computer (i.e. not on your web server) that handles its own special type of data file. The most common plugins are for sounds and movies. The <EMBED ...> tag gives the location of a data file that the plugin should handle.
Code for the above Tag:
<html>
<head>
<title>Embed</title>
</head>
<body>
<embed src ="D:\aakasam.mp3">
</body>
</html>
By using this tag we can Embed the plugin in the webpage to run the flash files video,audio files
A plugin is a special program located on the client computer (i.e. not on your web server) that handles its own special type of data file. The most common plugins are for sounds and movies. The <EMBED ...> tag gives the location of a data file that the plugin should handle.
Code for the above Tag:
<html>
<head>
<title>Embed</title>
</head>
<body>
<embed src ="D:\aakasam.mp3">
</body>
</html>
Code 29: playcount
playcount:
To specify no of repetitions!
code for above playcount Tag:
<html>
<head>
<title>Loop</title>
</head>
<body>
<embed src ="D:\aakasam.mp3" playcount="4">
</body>
</html>
To specify no of repetitions!
code for above playcount Tag:
<html>
<head>
<title>Loop</title>
</head>
<body>
<embed src ="D:\aakasam.mp3" playcount="4">
</body>
</html>
Code30: all tags
<html>
<head>
<title>all</title>
</head>
<center>
<body>
<big>Htmlhtml</big><br/>
<em>Htmlhtml</em><br/>
<small> Htmlhtml</small><br/>
<ins> Htmlhtml</ins><br/>
<del>Htmlhtml</del><br/>
<dfn>Htmlhtml</dfn><br/>
<q>Htmlhtml</q><br/>
<bdo>Htmlhtml</bdo><br/>
<button>htmlhtml</button></br>
<caption>htmlhtml</caption></br>
<blockquote>Htmlhtml</blockquote><br/>
</body>
</center>
</html>
<head>
<title>all</title>
</head>
<center>
<body>
<big>Htmlhtml</big><br/>
<em>Htmlhtml</em><br/>
<small> Htmlhtml</small><br/>
<ins> Htmlhtml</ins><br/>
<del>Htmlhtml</del><br/>
<dfn>Htmlhtml</dfn><br/>
<q>Htmlhtml</q><br/>
<bdo>Htmlhtml</bdo><br/>
<button>htmlhtml</button></br>
<caption>htmlhtml</caption></br>
<blockquote>Htmlhtml</blockquote><br/>
</body>
</center>
</html>
Code 31:
Acronym
<html>
<body>
Can I get this
<acronym title="as soon as possible">ASAP</acronym>?
</body>
</html>
Output: Can
I get this ASAP?
Code32: address
<html>
<body>
<address>
Written by
<a href="www.gmail.com ">gmail</a>.<br>
Visit us
at:<br>
Example.com<br>
Hyd,kukatpally<br>
India
</address>
</body>
</html>
Code 33:
Article
<html>
<body>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9
(abbreviated as IE9) was released to
the
public on March 14, 2011 at 21:00 PDT.....</p>
</article>
</body>
</html>
Output:
Internet Explorer 9
Windows Internet Explorer 9
(abbreviated as IE9) was released to the public on March 14, 2011 at 21:00
PDT.....
Code 34: bdo
tag
<html>
<body>
<p>This
paragraph will go left-to-right.</p>
<p><bdo
dir="rtl">This paragraph will go
right-to-left.</bdo></p>
</body>
</html>
Values: rtl or
ltr
Code35: Caption
tag
<html>
<body>
<table
border="1">
<caption>Monthly
savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
Code35: cite
<html>
<body>
<p><cite>The
Scream</cite> by Edward Munch. Painted in 1893.</p>
</body>
</html>
Output: The Scream by Edward
Munch. Painted in 1893.
Code 36: dd tag
<html>
<body>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
</body>
</html>
Output:
Coffee
Black hot drink
Milk
White cold drink
Code 37: Note
Tag
<html>
<body>
<p><b>Note:</b>
The details tag is currently only supported in Chrome and in Safari
</p>
</body>
</html>
Output:
Note: The details tag is currently only supported in Chrome
and in Safari 6.
Code 38: div tag
<html>
<body>
<p>This
is some text.</p>
<div
style="color:green">
<h3>This is a heading in a div
element</h3>
<p>This is some text in a div
element.</p>
</div>
<p>This
is some text.</p>
</body>
</html>
Code 39:
fieldset
<html>
<body>
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input
type="text"><br>
Email: <input
type="text"><br>
Date of birth: <input
type="text">
</fieldset>
</form>
</body>
</html>
Code40:
figcaption
<html>
<body>
<figure>
<img src="img_pulpit.jpg" width="304"
height="228">
<figcaption>Fig.1 - A view of figure
pulpit.</figcaption>
</figure>
</body>
</html>
Code41: ins tag
<html>
<body>
<p>My
favorite color is <del>blue</del>
<ins>red</ins>!</p>
</body>
</html>
Code42: mark
tag
<html>
<body>
<p>Do not
forget to buy <mark>milk</mark> today.</p>
</body>
</html>
Code 43:
Progress bar
<html>
<body>
Downloading
progress:
<progress
value="22" max="100">
</progress>
</body>
</html>
Code 44:
Quotation tag
<html>
<body>
<q>Build
a future where people live in harmony with nature.</q>
</body>
</html>
Code 45: Strike
tag
<html>
<body>
<p><s>My
car is blue.</s></p>
</body>
</html>
Code46: table
<table> <tr> <td>Cell 1</td> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> <td>Cell 4</td> </tr> </table>
Code 47:
scrolling<!-- Codes by HTML.am -->
<marquee
behavior="scroll" direction="left">Here is some
scrolling text... right to left!</marquee>
<marquee
behavior="scroll" direction="right">Here is some
scrolling text... left to right!</marquee?
<marquee
behavior="scroll" direction="up">Here is some scrolling text...
going up!</marquee>
<marquee
behavior="scroll" direction="down">Here is some
scrolling text... going down!</marquee>
<marquee
behavior="alternate" direction="up">Here is some
bouncing text... bouncing up and down.</marquee>
Code48:textarea
<textarea>
This is where
the user can enter text...
</textarea>
Code49:
Using HTML color codes for web site
background color:
<body
style="background:#80BFFF">
Using HTML color codes for table
background color:
<table
style="background:#80BFFF">
Code50: Option
Tag
|
<select name=”jokenumber”>
|
|
|
|
<option
value=”001”> Cricket jokes </option>
|
|
<option
value=”002”> Golf jokes </option>
|
|
<option
value=”003”> Tennis jokes </option>
|
|
</select>
<select
name=”jokenumber” multiple
size=4>
Code 51: cellspacing and
cellpadding
1. cellspacing=" "Use this command to add more space around each cell. Place a number inside the quote marks. 2. cellpadding=" " Use this command to add more space inside each cell. Place a number inside the quote marks. I'll show you an example of both of these now. Let's say we added the cellspacing command to our last table, and set it to equal 12, like this: <table border="2" cellspacing="12"> Now the table would look like this: This is a cell This is a cell This is the new row I'm on the new row, too! Now, suppose we used the cellpadding command, and set it to 12, like this: <table border="2" cellpadding="12"> Now the table looks like this: This is a cell This is a cell This is the new row I'm on the new row, too! And of course, you can use both at once: <table border="2" cellspacing="15" cellpadding="15"> Code 52: Upload <html> <input type="file" name="uploadField" /> </form> </html> --- <form name="myWebForm" action="mailto:youremail@email.com" method="post">
<input type="file" name="uploadField" />
</form>
Code53: Drop-down Select Boxes<select
name="continent" size="1"> <option
value="europe">europe</option> <option value="namerica">n.
america</option> <option value="samerica">s.
america</option> <option value="asia">asia</option> <option
value="africa">africa</option> <option value="oz">the other
one</option></select><html> <head> <meta http-equiv="refresh" content="0; url=http://www.google.com/"> </head> </html> Code 55: Comment <html> <p>This is <comment>not</comment> Gss Technologies</p> </html> Code56: Link Targets _blank—Opens a new page in new area <html> <body> <a href="http://www.google.com" target="_blank">google.com</a> </body> </html> _self—Loads new page in current window <html> <body> <a href="http://www.google.com" target="_self">google.com</a> </body> </html> Code 57: Email links <html> <body> <a href="mailto:jani.reddy5@gmail.com?subject=Feedback">jani.reddy5@gmail.com</a> </body> </html> Code 58: cellpadding <p>Table with cellpadding:</p> <table border="1" cellpadding="10"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Code 59: cellspaing <p>Table with cellspacing:</p> <table border="1" cellspacing="10"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> Code60: password hidden <form name=testform> <input type=password> </f orm> <form name=testform> <input type=password disabled> </form> Code61: auto refresh <html> <meta http-equiv="refresh" content="1" > <body> <pre> Im reddy here... Gss Trainer Kukatpally.... </body> </html> Code62: aside The <aside> tag defines some content aside from the content it is placed in. <html> <body> <p>My family and I visited The Epcot center this summer.</p> <aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside> </body> </html> Code63: meter <html> <body> <p>Display a gauge:</p> <meter value="2" min="0" max="10">2 out of 10</meter><br> <meter value="0.6">60%</meter> <p><strong>Note:</strong> The meter tag is not supported in Internet Explorer.</p> </body> </html> Code 64: nav tag <html> <body> <nav> <a href="/html/">HTML</a> | <a href="/css/">CSS</a> | <a href="/js/">JavaScript</a> | <a href="/jquery/">jQuery</a> </nav> </body> </html> |
0 comments:
Post a Comment