Learn tech blogging with ZulWeb. ZulWeb covers tech, IoT, blockchain, social media, web, blogging, tutorials, lifestyle, money, travel, health, and fitness.

HTML Urdu Tutorial

1

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. Html Urdu Tutorial is very helpful for HTML learning. There is no difficulty to learn HTML language, only basic knowledge is enough for little websites. Html Urdu Tutorial is an easy html 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++ from here.


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


HTML Page Pattern

<!DOCTYPE html>
<html> 
<head>
<title> My Page Title </title>
</head> 
<body>
 
<h1> Heading/Title </h1>
<p> This is my First Paragraph. </p>
</body> 
</html>

Parts of HTML Page


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

1. HTML Tag <html>


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

2. Header <head>


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

3. Body <body>


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

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

Page Title

<title> My Page Title </title>

Favicon

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

Meta Description

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

Meta Keywords

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

About Author

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

Stylesheet (CSS)

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

Page Language

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

Javascripts

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


Header Tag Pattern

<head>
<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>
</head>

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

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>

Link/URL

<a href=”http://yoursite.com”>Your Text</a>

Paragraph

<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>

Images

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 increase image width according to percentage.

HTML Links

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

Image in Links

<a href=”http://your website address.com”><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”.

Code-1

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

Code-2

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

 

iFrame

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


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

Simple iframe

<iframe src=”http://yourwebsite.com”></iframe>

Professional iframe

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

HTML Form Code

Input Form

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

Radio Button Input Form

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

Submit Form

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

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 </textarea>

 ہم امید کرتے ہیں کہ یہ ٹیوٹوریل آپ کے لیے بہت فائدہ مند ثابت ہوگا۔ اگر آپ اس ٹیوٹوریل کے بارے میں کوئی سوال پوچھنا چاہتے ہیں یا کوئی رائے دینا چاہتے ہیں تو بلا جھجک کمنٹس کریں یا ای میل کریں۔

 

Comments are closed.