HTML IN BRIEF
1.
FOR HEADING
<html>
<body>
<h1>i am naseer ud din
from kasuri city</h1>
<h1>systems limited
lahore</h1>
</body>
</html>
2.
FOR HTML LINKS
Open in
same window
<a
href="http://www.w3schools.com">
This is a link</a>
Open in New
window
<a href="http://www.w3schools.com"
target="_blank">Visit W3Schools.com!</a>
Create an
image Link
<p>Create a link of an
image:
<a
href="naseer.jpg">
<img
src="naseer.jpg" alt="HTML tutorial" width="32"
height="32" />
</a></p>
Image Align
in Text
<p>An image
<img src="smiley.gif"
alt="Smiley face" align="top" width="32"
height="32" />with align="bottom".</p>
Image in
start of paragraph
<p>
<img
src="smiley.gif" alt="Smiley face" align="left"
width="32" height="32" />
A paragraph with an image.
The align attribute of the image is set to "left". The image will
float to the left of this text.
</p>
Create
Hyperlink with image
<p>Create a link of an
image:
<a
href="default.asp">
<img border="1"
src="smiley.gif" alt="HTML tutorial" width="32"
height="32" /></a></p>
3.
FOR PARAGRAPH
<p>This is a
paragraph</p>
<p>This is another
paragraph</p>
4.
HTML IMAGES
1.
<img src="w3schools.jpg"
width="104" height="142" />
2.
<img border="1"
src="/images/pulpit.jpg" alt="Pulpit rock"
width="304" height="228" />
3.
<img src="baby.gif"
alt="Pulpit rock" width="904" height="728" />
5.
HTML LINES
<p>This is a
paragraph</p>
<hr />
<p>This is a paragraph</p>
6.
COMMET FOR NOT DISPLAY
<!--This comment will not
be displayed-->
<p>This is a regular
paragraph</p>
7.
HTML LINE BREAKS
<p>This is<br />a para<br />graph with line
breaks</p>
8.
HTML TEXT FORMATTING
<b>This text is
bold</b>
<strong>This text is
strong</strong>
<big>This text is
big</big>
<em>This text is
emphasized</em>
<i>This text is
italic</i>
<small>This text is
small</small>
<tt>This text is
teletype</tt>
This text contains
<sub>subscript</sub>
This text contains <sup>superscript</sup>
<cite>he is very large no of schools</cite>
<blockquote>this is a long quotation< <blockquote>
<q>this is a short quotation</q>
SPECIAL FORMATTING
<code>Computer
code</code>
<br />
<kbd>Keyboard
input</kbd>
<br />
<tt>Teletype
text</tt>
<br />
<samp>Sample
text</samp>
<br />
<var>Computer
variable</var>
<br />
<p><b>Note:</b>
These tags are often used to display computer/programming code.</p>
9.
HTML FONT SIZE AND COLOR
<p>
<font size="5"
face="arial" color="red">
This paragraph is in Arial,
size 5, and in red text color.
</font>
</p>
_______________________________________
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>
10.
HTML STYLE TEXT AND BACKGROUND COLOR
<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>
- HTML TEXT ALIGN
<h1
style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
- HOW TO DEFINE E-MAIL LINK
<address>
Written by
W3Schools.com<br />
<a
href="mailto:us@example.org">Email us</a><br />
Address:
Box 564, Disneyland<br />
Phone: +12
34 56 78
</address>
- TEXT DIRECTION
<p>
If your browser supports bi-directional
override (bdo), the next line will be written from the right to the left (rtl):
</p>
<bdo
dir="rtl">
Here is some Hebrew text
</bdo>
- HOW TO MARK DELETED AND INSERTED TEXT
<p>My favorite color
is <del>blue</del> <ins>red</ins>and blue text</p>
- CELL SPANING or CELL MERG
COLUMN MERG
<th colspan="3">Telephone</th>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
ROW MERG
<th
rowspan="2">Telephone:</th>
- FOR IN LINE TEXT MOVING
<marquee>My First
Heading</marquee>
- FORM CREATING STEPS
- First Name Last Name
<form action="">
First name: <input type="text" name="firstname"
/><br />
Last name: <input type="text" name="lastname"
/>
</form>
- Username and Password Field
<form action="">
Username: <input type="text" name="user"
/><br />
Password: <input type="password" name="password"
/>
</form>
- Radio Buttons
<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>
- Check boxes
<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>
- Submit Button
<form
name="input" action="html_form_action.asp"
method="get">
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
Username: <input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
f.
Simple Drip Down List
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
- Create a Button
<form action="">
<input type="button" value="Hello world!">
</form>
- Create a border around data
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30" /><br
/>
E-mail: <input type="text" size="30" /><br
/>
Date of birth: <input type="text" size="10"
/>
</fieldset>
</form>
Definition List Type
<h4>A Definition
List:</h4>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
- MAIN PAGE LAYOUT
<html>
<body>
<table
align="center" width="1250" border="1">
<tr>
<td
colspan="2" style="background-color:#FFA500;">
<h1>Main
Title of Web Page</h1>
</td>
</tr>
<tr
valign="top">
<td
style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br
/>
HTML<br
/>
CSS<br
/>
JavaScript
</td>
<td
style="background-color:#eeeeee;height:200px;width:400px;text-align:top;">
Content goes
here</td>
</tr>
<tr>
<td
colspan="2"
style="background-color:#FFA500;text-align:center;">
Copyright ©
2011 W3Schools.com</td>
</tr>
</table>
</body>
</html>
- Layers back and front
LAYER 1 ON
TOP:
<div
style="position:relative; font-size:50px; z-index:2;">LAYER
1</div>
<div
style="position:relative; top:-50; left:5; color:red; font-size:80px;
z-index:1">LAYER 2</div>
LAYER 2 ON
TOP:
<div
style="position:relative; font-size:50px; z-index:3;">LAYER
1</div>
<div
style="position:relative; top:-50; left:5; color:red; font-size:80px;
z-index:4">LAYER 2</div>
- LAYERS BACK AND FRONT
<iframe src="demo_iframe.htm" frameborder="1"
width="200" height="200"></iframe>
Use iframe as a Target for a
Link
<iframe src="demo_iframe.htm"
name="iframe_a"></iframe>
<p><a href="http://www.w3schools.com"
target="iframe_a">W3Schools.com</a></p>
22.ADD AUDIO TO YOUR SITE
<p><a href="song.mp3">Play Song</a></p>
<p><a href="liar.wav">Play
Text</a></p>
<script type="text/javascript"
src="http://mediaplayer.yahoo.com/js"></script>
23.
PREFORMATED TEX FOR COMPUTER COD
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
No comments:
Post a Comment