Online HowTo's Articles and Guides

Learn HTML Urdu Tutorial

0 32

Today HTML is very popular web language that is the base of every web developing segment. With the help of HTML you can develop your website easily. There is no difficulty to learn HTML language, only basic knowledge is enough for little websites. In this tutorial you will learn “Html Urdu Tutorial”. It is very easy to learn HTML and we hope you can learn this language in a day and by practice you can become expert in a week.


 ایچ ٹی ایم ایل ایک بہت ہی مشہور  ویب لینگوئج ہے اور یہ ویب ڈویلوپنگ میں استعمال ہونے والی بنیادی زبان ہے۔ ایچ ٹی ایم ایل کی مدد سے آپ آسانی سے اپنی ویب سائٹ بنا سکتے ہیں۔ یہ زبان سیکھنا کوئی مشکل کام نہیں، چھوٹی ویب سائٹس کے لیےایچ ٹی ایم ایل کا صِرف ابتدائی علم ہی کافی ہے۔  آپ اس کی روزانہ ایک گھنٹہ پریکٹس کریں ہمیں امید ہے کہ آ پ اسے ایک ہفتے میں سیکھ جائیں گے


ایچ ٹی ایم ایل یا ہائپر ٹیکسٹ مارک اپ لینگوئج ویب پیجز بنانے کے لیے ایک معیاری مارک اپ لینگوئج ہے۔ ایچ ٹی ایم ایل انٹرنیٹ کی مادری زبان کہلاتی ہے۔ ایچ ٹی ایم ایل کو ایک سائنسدان ٹِم برنرز لی نے اُنیس سو نوے میں ایجاد کیا۔

HTML or Hyper Text Markup Language is the standard markup language used to create Web pages. HTML is the “mother tongue” of internet browser.

HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other’s research documents. The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today.

HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser’s interpretation of HTML. To see the HTML code of a page on the Internet, simply click “View” in the top menu of your browser and choose “Source”.

Notepad++ is a free source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL Licence. You can Download Notepad++ Download

ایچ ٹی ایم ایل کا مطلب ہے ہائپر ٹیکسٹ مارک اپ لینگوئج ۔ یہ ایک ویب لینگوئج ہے۔ یہ ہمیں ویب پیج بنانے میں مدد دیتی ہے۔ اس زبان کی سب سے بڑی خصوصیت یہ ہے کہ اس کے لیے کسی خاص سوفٹ وئیر کی ضرورت نہیں ہےبلکہ آپ اس کی کوڈنگ کسی بھی ٹیکسٹ ایڈیٹر سوفٹ وئیر میں کر سکتے ہیں۔ جیسے ورڈ پیڈ یا نوٹ پیڈ۔ لیکن ان دونوں میں نوٹ پیڈ کو زیادہ اہمیت دی جاتی ہے۔ ایچ ٹی ایم ایل کے کچھ قواعدوضوابط ہوتے ہیں۔ اور یہ لینگوئج ٹیگز میں لکھی جاتی ہے۔

HTML Page Pattern

<!DOCTYPE html>
<title> My Page Title </title>

  <h1> Heading/Title </h1>
<p> This is my First Paragraph. </p>

Parts of HTML Page

کسی بھی ایچ ٹی ایم ایل پیج کے تین حصے ہوتے ہیں



.ایچ ٹی ایم ایل کے ٹیگ میں ہیڈ اور باڈی دونوں شامل ہوتے ہیں




دوسرا حصہ ہیڈ کا ہوتا ہے جو سب سے ٹاپ پے ہوتا ہے اس میں ہم پیج ٹائٹل،میٹا ٹیگز، سٹائل شیٹ،جاوا سکرِپٹس اور مختلف لِنکس دے سکتے ہیں۔




جبکہ تیسرا حصہ باڈی کا ہوتا ہے باڈی میں آپ ٹیکسٹ، ویڈیوز،آڈیوز، امیجز، مختلف سکرپٹس اور لِنکس شامل کر سکتے ہیں۔


Header Tags

.اب ہم سب سے پہلے ہیڈ ٹیگز کے بارے میں جانتے ہیں کہ ہہ کیا ہوتے ہیں اور کس طرح کام کرتے ہیں

For Page Title  پیج کے ٹائٹل (عنوان) کے لیے

<title> My Page Title </title>

For Favicon   ویب سائٹ آئی کون کے لیے

<link rel=”shortcut icon” href=”your favicon.ico” type=”image/x-icon”>

For Page Description   پیج کے بارے میں بتانے کے لیے

<meta name=”description” lang=”en” content=”write here about your page” />

For Page Keywords   پیج کے اہم الفاظ (کی ورڈز) کے بارے میں بتانے کے لیے

<meta name=”keywords” lang=”en” content=”write keywords here” />

About Author   مُصنٗف کے بارے میں

<meta name=”Author” content=”Author Name” />

Style Sheet (CSS) Links   سٹا ئل شیٹ(پیج کےڈیزائن) کے بارے میں

<link type=”text/css” href=”style sheet link.css” media=”screen” />

Page Language   پیج کی زبان کے بارے میں

<head lang=”en” xml:lang=”en”>

To Add Java Script   جاوا سکرِپٹ شامل کرنے کے لیے

<script type=”text/javascript” src=”your java script URL.js”></script>

Header Tag Pattern

<title> My Page Title </title>
<meta name=”description” lang=”en” content=”write here about your page” />
<meta name=”keywords” lang=”en” content=”write keywords here” />
<meta name=”Author” content=”Author Name” />
<link type=”text/css” href=”style sheet link.css” media=”screen” />
<link rel=”shortcut icon” href=”your favicon.ico” type=”image/x-icon”>
<script type=”text/javascript” src=”your java script URL.js“></script>

Body Tags

اب ہم باڈی ٹیگز کے بارے میں جانتے ہیں- باڈی ٹیگ میں آپ ٹیکسٹ،لِنکس،ویڈیوز،آڈیوز،امیجزاور مختلف سکرِپٹس شامل کر سکتے ہیں

Text ٹیکسٹ/ الفاظ

<text style=”font-size:10px” color=”Red” face=”Arial”> Your Text </text>

Bold Text بولڈ (موٹے) الفاظ یا ٹیکسٹ کے لیے

<b>Your Text</b>

Big Text بڑے الفاظ یا ٹیکسٹ کے لیے

<big>Your Text</big>

Small Text چھوٹی ٹیکسٹ کے لیے

<small>Your Text</small>

Italic Text اٹیلِک ٹیکسٹ کے لیے

<i>Your Text</i>

Strong Text سٹرونگ ٹیکسٹ کے لیے

<strong>Your Text</strong>

Underline Text انڈرلائن ٹیکسٹ کے لیے

<u>Your Text</u>

Striked Text سٹرائیکڈ ٹیکسٹ کے لیے

<s>Your Text</s>

Blink Text بلِنک ٹیکسٹ کے لیے

<blink>Your Text</blink>

Colourd Text رنگدار ٹیکسٹ کے لیے

<font color=”red”>Your Text</font>

Linked Text (URL) لنکڈ ٹیکسٹ

<a href=””>Your Text</a>


<p>Your Text</p>   and    <p align=”left”>Your Text</p>

کا مطلب ہے کہ آپ ٹیکسٹ کس ڈائریکشن سے لکھنا شروع کریں گے align

For align you can set “left”, “right” or “center”

Moving Text (Marquee) حرکت کرتی ہوئی ٹیکسٹ

For Slide Text

<marquee behavior=”slide” direction=”left”>Your Text</marquee>

آپ اس میں ڈائریکشن دائیں، بائیں، سنٹرمیں یا اوپر اور نیچے بھی سیٹ کر سکتے ہیں

For Scroll Text

<marquee behavior=”scrolling” direction=”right”>Your Text</marquee>

For Alternate Text

<marquee behavior=”alternate” direction=”up”>Your Text</marquee>

For Slow Speed Text

<marquee behavior=”scroll” direction=”left” scrollamount=”1″>Your Text</marquee>

Note: Here scrollamount is speed, You can increase the text speed by putting 1,2,3,4,5

For Scrolling Images and Photos

<marquee behavior=”scroll” direction=”left”><img src=”Your image.gif” width=”100″ height=”100″ alt=”Image Name” /></marquee>

Insert Images in Body باڈی کے ٹیگ میں تصاویر لگائیں

Image code

<img src=”your image.jpg” border=”1″ style=”max-width:100%” alt=”Image Name” />

Note: You can increase or decrease the image border by putting 1,2,3,4,5. You can increse image width according to pecentage

HTML Link لِنکس

<a href=”http://your website”>Your Text</a>

Image Links تصاویری لِنکس

<a href=”http://your website”><img src=”image.jpg” alt=”img”></a>

Heading Commands

ہیڈنگ کمانڈز ایک سے لے کر چھے تک ہوتی ہیں جس جگ ہم بڑا ٹائٹل یا ٹیکسٹ لکھنا چاہتے ہیں وہاں ہم اسے استعمال کرتے ہیں

There are six (6) heading commands: <H1> through <H6>. <H1> is the largest and <H6> is the smallest. Here are their relative sizes:

<H1> This is Heading 1 </H1>

<H2> This is Heading 2 </H2>

<H3> This is Heading 3 </H3>

<H4> This is Heading 4 </H4>

<H5> This is Heading 5 </H5>
<H6> This is Heading 6 </H6>

Insert Video ویڈیو شامل کرنے کے لیے

Youtube Video Code Using <iframe>

<iframe width=”420″ height=”320″ src=”Youtube Video URL”></iframe>

Youtube Video Code Using <embed>

<embed width=”420″ height=”315″ data=”Youtube Video URL”> </embed>

Embed/Insert Audio آڈیو شامل کرنے کے لیے

To insert audio in webpage You can use audio files in formate of “mp3” and “ogg”.


<audio controls>
<source src=”my file.ogg” type=”audio/ogg”>
<source src=”my file.mp3″ type=”audio/mpeg”>


<audio src=”my file.mp3″ controls>
<embed src=”my file.mp3″ width=”180″ height=”90″ loop=”false” autostart=”false” />

Add Frame فریم شامل کرنا

To show other website or file in your webpage you can use frame.

فریم ہم کسی دوسری ویب سایٹ ، ویڈ یوزیا فائلز کو اپنے پیجز پر ظاہر کرنے کے لیے استعمال کرتے ہیں

Simple iframe

<iframe src=””></iframe>

Professional iframe

<iframe src=”” width=”100%” height=”500″ overflow=”hidden” frameborder=”1″ scrolling=”yes/no”></iframe>

HTML Form Code

Input Form

First name:<br>
<input type=”text” name=”firstname”>
Last name:<br>
<input type=”text” name=”lastname”>

Radio Button Input Form

<input type=”radio” name=”sex” value=”male” checked>Male <br>
<input type=”radio” name=”sex” value=”female”>Female

Submit Form

<form action=”http://yourwebsite.html”>
First name:<br>
<input type=”text” name=”firstname” value=”Mickey”>
Last name:<br>
<input type=”text” name=”lastname” value=”Mouse”>
<input type=”submit” value=”Submit”>

Get / Post Form

If the form submission is passive (like a search engine query), and without sensitive information. When you use GET, the form data will be visible in the page address:

<form action=”Action URL” method=”get”>
<button type=”submit”>Action Name</button></form>

If the form is updating data, or includes sensitive information (password). POST offers better security because the submitted data is not visible in the page address.

<form action=”Action URL” method=”post”>
<button type=”submit”>Action Name</button></form>

Text Area

<textarea>Your Text<textarea> OR
<textarea rows=”4″ cols=”10″>
Your Text