Page Views

Wednesday 5 December 2012

HTML lecture 1

friends aaj main aap ko html ke barey mein bataon ke yeh kiya hai aur kaise work karte hain aur website mein kaise lagate hain.


What is HTML?
HTML used for web page, html is high level language like a java, html works on tags < >

1. sab se pehle aap notepad open karen phir aap <html>enter

<title>itteacher ayaz</title>
title me jo name likho ge wo explorer ki title bar me show hoga.

2. note:- agar aap notepad mein file save kare to pehle jis name se save karna chahte ho wo name phir sath me bagair space k .html likhna hoga aap ko.

3.<b>ayaz</b>
es se aap letter ko bold kar sakte hai
<i>ayaz</i>
es se aap letter ko italic kr sakte hain
<u>ayaz</u>
es se aap underline de sakte hain.

note:- ye 3 code aik text ko laga sakte ho

4.<center>ayaz</center>
es se aap text ko center mein kar sakte hain.
<font face="times new roman">ayaz</font>
es se aap text ka style change kar sakte hai,styles aap MS Word se le sakte hain.

5.<font face="century gothic"size="5">
es se aap styles or text ki size increase (barha)sakte hain.

6.<font color="red"> ayaz </font>
es se aap text ko colour de sakte hain aur change bhi kar sakte hain.next

7. ab main opar de gayi coding aik sath likh raha hoon.
<html>
<title>welcome</title>
<center><b><i><u><font face="times new roman" size="5" color="blue">ayaz</center></b></i></u></font>
last mein yeh codes de kar enko / se band krna hai yeh rulz hain html ke.

8.<br> es ka matlab he line break agar do alfaz k beech me <br> likho ge to wo line neeche new line pe aa jayegi. 
e.g <br>ayaz ali</br>

aap 2 lafz ko alag bhi kar sakte ho 
e.g ayaz<br>ali
es se ayaz up and ali down pe aayega

9.<big>ayaz</big>
es se text big bold ho jayega.

<body bgcolor="pink"> welcome </body>
es se aap background pe color de sakte hain.

10. HTML notepad mein har changing ke baad aap ko save krna hoga. phir explorer me agar file khula hai to refresh karen nahe to explorer se file me ja k open karen.

11. <dd> means definition description
<dl>
<dt>welcome Friends</dt>
<dd>welcome Here </dd>
<dt>welcome Friends</dt>
<dd>welcome Here</dd>
</dl>
es coding ko aap text ko balance mein aur bold kar sakte hain.

12. <dl> means definition list
</dl>
<dt>welcome Friends</dt>
<dd>welcome Here</dd>
<dd>welcome Friends</dt>
<dd>welcome Here</dd>
</dl>
es coding se aap text ko balance mein kar sakte hain.

13.<dT> means definition term
<dl>
<dt>welcome Friends</dt>
<dd>welcome Here</dd>
<dt>welcome Friends</dt>
<dd>welcome Here</dd>
</dl>
es coding ko aap text ko balance mein kar sakte hain aur bold bhi kar sakte hain.


14. <a>means anchor <a href="http://www.itschoolpk.com/"> visit my site </a>
es coding se aap html mein apni ya kisi aur ki di gayi site khol sakte hain.

15.HTML ka short form hai
H=hyper
T=text
M=markup
L=language
coding notepad me hoti hai file ko save karne me .html ka izafa kya jata he e.g ayaz.html

16.<font face="times new roman" size="+5" color="red"> Ayaz Ali </font>
es se aap text ka style change kar sakte hain aur size barha sakte hain aur color bhi de sakte hain.
note: MS Word mein text styles hain wahan se name le ke likh den.

17.<form>
<action="maitlo:you yourdomain.com>
Name: <input name="name" value="" size="10"><br>
Email: <input name="Email" value="" size="10"><br>
<center><input type="submit"></center>
</form>
es coding me aap form bana sakte ho sirf name or email wala.

18.<h1>www.itschoolpk.com</h>
<h2>
www.itschoolpk.com</h>
<h3>
www.itschoolpk.com</h>
es coding mein aap koi bhi text likho ge to aahista chota ho jayega.

19.<hr width="50%" size="3"> </hr>
es coding me aap text k neeche line de sakte ho.aur line ki size barha sakte hain.

20.<form method=post action="/cgi-bin/example.cgi">
<input type="text" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

es coding se aap comnents ka column bana sakte hain.

21.<form method=post action="/cgi-bin/example.cgi">
<input type="text" style="color:#ffffff; font-family: verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>next

es coding se aap comments wale column ko colour de sakte hain or text ka style bhi change kr sakte hain.

22.<form method=post action="/cgi-bin/example.cgi">
Enter Your Comments:<br>
<textarea wrap="virtual" name="Comments" rows=3 cols=20 maxlength=100></textarea><br> <input type="Submit" value="Submit">
<input type="Reset" value="Clear">
</form>

es coding mein aap ki site pe users comments de sakte hain mistake karne pe delete bhi sakte hain.

23.<form method=post action="/cgi-bin/example.cgi">
<taale border="0" cellspacing="0" cellpading="2" ><tr><td bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td><td bgcolor="#8463ff" valign="Middle"></td></tr></table>
</form>

es coding se aap comments border ko colours de sakte hain.

24.<form method=post action="/cgi-bin/example.cgi">
<center>
Select an option:
<select>
<option>option 1</option>
<option selected>option 2 </option>
<option>option 3</option>
</select><=/br>
</form/

es coding se aap options ke column de sakte hain.

25.<form method=post action="/cgi-bin/example.cgi">
Select an option:<br>
<input type="radio" name="option">
Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option">
Option 3
<br>
<br>

26.Select an option:<br>
<input type="checkbox" name="selection"> Selection 1
<input type="checkbox" name="selection" checked> Selection 2
<input type="checkbox" name="selection"> Selection 3
<input type="Submit" value="Submit">
</form>

25 and 26 ki es coding se aap selection wale option bana sakte hain. 

27.
<menu>
<li type="disc">List item 1</li>
<li type="circle">List item 2</li>
<li type="square">List item 3</li>
</menu>

<o1 type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</o1>

27 page pe jo html ki coding di gayi hai os se aap list item buletts mein or roman numeral me bana sakte hain.

28.
<marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">AYAZ SOLANGI</marquee>
es coding se aap text ko advertisement jaise pati me scroll kar sakte hain.

29.
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

es coding se aap numbered mein list item bana sakte hain.

30.
<ol start="5">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

es coding se aap special start kr sakte hain apni marzi se.

31.
<ol type="a">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>
es coding se aap select item ko lowercase me likh sakte hain.

32.
<ol type="A">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

es coding se aap list items ko capital letters special start me likh sakte hain.

33.
<ol type="A" start="3">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

es coding se aap list items ko capital letters special start me likh sakte hain.

34.
<ol type="i">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
</ol>

es coding se aap list items ko Lower Roman Numbers me likh sakte hain.

2 comments:

suhail162 said...

very tough

Unknown said...

sir boht tough hai..ye kis notepad mai krna hai..kya ye source code banane ka method hai???

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | Bluehost Coupons