Scribd
Upload
13 views

Tutorial # 1

The document provides an introduction to HTML and covers basic HTML tags and elements including headings, paragraphs, breaks, formatting tags, setting the title, changing fonts, background colors, and adding images. It explains how to create a simple webpage with the header and body sections.

Uploaded by

saqib khaskheli
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Tutorial # 1

The document provides an introduction to HTML and covers basic HTML tags and elements including headings, paragraphs, breaks, formatting tags, setting the title, changing fonts, background colors, and adding images. It explains how to create a simple webpage with the header and body sections.

Uploaded by

saqib khaskheli
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

Web Development Tutorial #1 Azhar Khaskheli

Hyper Text Markup Language

=============================================================================================================

Hello Guyz,

In this series we are going to cover html, css, javascript and finally Jquerry

I hope, ke aap already sb pta he ke ye sb kya hn kyu use krte hn,, so I wont revise them again.

Pr thora introduction deta chlnga,

Html ak markup language he jiski madad se hm webpages bnate hn,

HTML BUILDING BLOCK


Html ke document mn do sections hote hn, ak header section aur dsra body section, header section mn hm apne document ki
information describe krte hn ke ye ksne bnaya he kio bnaya he kb bnaya he etc etc, matlb ke all about our page,

Jabke body section mn hm lkhte hn ke hmare webpage m nasal mn kya he, mtlb ke sara content hm body section mn lkhte hn..

Html is compsed of tags, tags ko angular brackets mn band krte hn e.g. <html>, mtlb ke jo kch bh < > ke beech mn h, we can say ke
wo tag he,

Kch tags ase hote hn jn ko close bh krna prta he, pr kch tags ase hote hn jnko close krna lazmi nh,,

Jnko close krna lazmi hta he unhn hm paired tags kehte hn jese ke, <html> isko close krna lazmi hta he

<html> </html>

Aur jn tags ko close krna lazmi nh unhn hm singular tags kehte hn,

Lets Make a simple WebPage

Open note pad, and write this

Yahan sbse pehle hmne html ka tag shuru kya he aur finaly bnd kya he, html tag is used to
create html document.

Mtlb ke ye show krta he ke iske beech mn jo kch bh lkha he wo html ka document he,

As I said earlier ke html document mn do section hote hn ak header section aur dsra body
section , so lets create those two section in our webpage

So yhan dono section bn gae, so hmara ak simple webpage bn gya he, par ye webpage flhal
khali he kiok abh is mn hmne kch bh nh content nh dala he,,

So sbse pehl lets create heading in our web page

So yhan hmne ak heading lgai h1 tag se , aur yu can s


see ke h1 ko bad mn close bh kya he,,

<h1> tag is used to create heading

Now save this file, name koi bh de deejie pr final mn


.html lkhyega.. and run this webpage

So this was our simple web page, and basic building blocks and How to create a Webpage , I hope aapko sahee smjh aagya hga
Headings
Hmne ooper wale web page mn aik heading lgai thi, pr html hmn 6 headings deta he,, depending upon their sizes,,

Hmne jo ooper h1 lkhi wo sbse bri thi, isi tarah se h2 us se thri chhoti he, phr h3, and so on upto h6

Paragraph
Similarly yu can add paragraph, jese hr jagah heading ke neeche ak paragraph lkha hta he, to aap ye lga skte ho <p> tag se

Isko bh close krna prta he

Spaces
Suppose hm ak asa document bna rhe hn jhan hmne zyada spaces de di hn, to html use ignor kr dega
Par we want ke spaces hon,, to hm &nbsp; use krte hn

Breaking The Row


Suppose hm new line pe aaana chahte hn to hm <br> tag use krte hn, ye singular tag he to isko bnd krna lazmi nh

Formatting Tags
Formating tags are used to design the html, i.e.. how to bold, italic, underline etc.

Bold krne ke lye <b> ..</b> aur italic ke lye <i>… </i> underline ke lye <u> </u>, similarly dsre tags bh hm btate hn .. pr pehle inko
practically krn
Similarly ye kch tags hn

<sup> for creating superscript

<sub> for creating subscript

<strike> to sktrikethrough the text

<bdo> ye text ko ulta kr deta he.

<strong> ye bh bold jesa hi kam krta he

Ase hi kch aur bh tags hn

Setting The Title of our Webpage


Title <title></title> se create hta he jo header section mn lgta he

Changing the Font Color Size and Type

Inke ke lye <font > </font> use hta he,, pr inko hmn kch attributes dene prte hn , attributes starting tag mn hi dete hn hm

Jese ke color attribute color define krta he, face attribute font style set krta he, aur size attribute size set krta h

Changing the Background Color


Iske lye hm body tag mn bgcolor attribute lkhte hn aur color set krte hn

Similarly agr aap background mn koi image lgana chahte hn to. Hm bgcolor ki jagah simply background lkhn aur phr path lkhn

<body background=”C:/test/1.jpg”>

Agr apka picture usi folder mn pra he jahan html document aapne save kya he to phr ap smply file ka nam lkho

<body background=”1.jpg”>

Adding Image in html


iske lye <img> tag use hta he aur aur ye tag singular he to isko close krna lazmi nh he, aur is tag ko hmn kch attributes dene prte hn

specially src js mn hm source lkhte hn ke photo he kahan pe..

Similarly agr hm image ki height aur width set krna chahe hn to phr hm height aur width attributes use krte hn .

I hope aaja ka sb kch aapko sahee se smjh aagya hga,

Inshallah on next tutorial, hm lists ke bare mn prhng aur tables ke bh,, aur phr tym bcha to forms ke bare mn bh 

Take Care of yu

See yu on next tutorial

Regards

Azhar Khaskheli

[email protected]

You might also like