آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

آشنایی با HTML، زبان پایه کدنویسی وب

هنگامی که با مرورگر خود (به طور مثال برنامه فایرفاکس) صفحه وب (سایت، وبلاگ و...) را فراخوانی می کنیم، نتیجه معمولا به شکل کدهایی از سرور به مرورگر ارسال می شود، سپس این کدها توسط مفسر مرورگر پردازش شده و در نهایت معمولا به شکل یک صفحه جذاب و کاربردی نمایش داده می شود بدون اینکه متوجه شویم در پس این صفحه، کدنویسی منظم و استانداردی نهفته است، این کدها در واقع همان دستورات HTML (مخفف Hypertext Markup Language) هستند، زبانی که تقریبا تمام کسانی که دستی در دنیای وب دارند با آن سر و کار داشته یا لااقل اسم آن را بارها شنیده اند، HTML از زمان پیدایش (توسط Tim Berners-Lee) یعنی از سال 1980 میلادی تا امروز همواره روندی رو به رشد داشته، در اهمیت آن همین بس که حاصل کدنویسی برنامه نویسان وب (با هر زبان برنامه نویسی از جمله PHP، ASP.NET، Payton و...)، نهایتا به صورت خروجی HTML و در مرورگر کاربران نشان داده خواهد شد، لذا نقطه آغاز یادگیری دانش برنامه نویسی وب، آموزش و فراگیری این زبان است.

HTML زبان فرامتن یا Hypertext

منظور از عبارت Hypertext یا فرامتن بودن در HTML این است که اگرچه کدهای صفحات وب به صورت متن ساده نگاشته می شوند اما بعد از پردازش توسط مرورگر لزوما به صورت متنی دیده نخواهند شد و می توانند نماینده لینک، تصویر، صوت، ویدئو و محتوای غیرمتنی باشند، به عبارتی متن خطی در کدنویسی HTML بعد از پردازش می تواند به صورت محتوای غیرخطی یا فرامتن نمایان شود.

HTML زبان نشانه گذاری یا Markup

قبل از اینکه وارد دنیای کدنویسی وب شویم باید بدانیم که HTML زبانی قراردادی است، هدف از ایجاد این زبان در واقع نیاز به تعریف استانداردی فراگیر جهت استفاده در شبکه وب بود که بتوان با آن صفحات اینترنتی را ساخته و در برنامه هایی تحت عنوان مرورگر، نتیجه کار را مشاهده کرد، بدین منظور HTML از علائم نشانه گذاری تحت عنوان Tag استفاده می کند (و به همین دلیل آن را Markup می گویند)، تگ در واقع نشانه ای برای یک منظور در سند HTML است، عنوان مربوط به هر تگ نیز بین علامت های <> درج می شود، به طور مثال اگر بخواهیم متنی به صورت برجسته تر از سایر متن ها نمایش داده شود، آن را درون تگ strong یا b قرار می دهیم، به فرض:

<strong>متن برجسته</strong>

به این صورت هر تگ برای منظور خاصی استفاده می شود که با درک آنها می توان یک صفحه وب کاربردی ایجاد کرد، هرچند مرورگرها به کوچک یا بزرگ بودن تگ ها اهمیتی نمی دهند اما بهتر است به جز در موارد خاص، تگ ها را به صورت حروف کوچک استفاده کنیم تا سورس کدهای تمیزتر و خواناتری داشته باشیم.

اولین صفحه وب با کدهای HTML

برنامه Notepad را اجرا و کد زیر را در آن درج نمائید:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | اولین صفحه HTML من</title>
<!-- Webgoo.ir -->
</head>
<body>
<h1>اولین صفحه من</h1>
<p>اولین پاراگراف من</p>
</body>
</html>

پیش نمایش
اکنون فایلتان را با پسوند html و با یونیکد UTF-8 ذخیره کنید (برای این کار از منوی File گزینه Save As را انتخاب کرده و در قسمت تعیین نام فایل، به جای پسوند txt، پسوند html را جایگزین کنید، در قسمت Encoding نیز عبارت UTF-8 را انتخاب نمائید، به طور مثال نام فایل در هنگام ذخیره سازی باید به صورت first-html-code.html باشد)، فایل را با یک مرورگر وب (مانند اینترنت اکسپلورر یا فایرفاکس) اجرا (Open) کرده و حاصل اولین کدنویسی وب خود را ببینید!
توضیح:
- با دقت در پیش نمایش نمونه کد HTML بالا ملاحظه می کنیم که مرورگرها کدهای HTML را در خروجی نمایش نمی دهند، بلکه اثر آنها بر متن و محتوا را به صورت خروجی چاپ می کنند.
- عبارت DOCTYPE html جهت تعریف نوع سند و راهنمای مرورگرهای وب در پردازش صحیح صفحه و تعیین نسخه HTML است، در نسخه های قدیمی تر HTML ممکن است این قسمت به صورت های دیگری باشد که این موضوع با توجه به هر نسخه مشخص می شود، در حال حاضر این قسمت را به همین صورت درج کنید.
- تگ head و body جز اصلی ترین تگ های HTML بوده که دربرگیرنده تگ های زیرمجموعه، عناصر مورد نیاز و محتوای درونی یک صفحه وب هستند، درون تگ head می توان از متاتگ ها (Meta Tags) استفاده کرد (در مورد متاتگ ها در آموزش های بعدی بیشتر خواهیم گفت)، همچنین خواهیم دید که در این قسمت می توان فایل های مربوط به استایل دهی CSS و کدنویسی JavaScript را وارد کرد (برای این مرحله از آموزش، صرف آشنایی با این اصطلاحات کفایت می کند، بعدها با این موارد به صورت تخصصی آشنا خواهیم شد).
- تگ title برای نمایش عنوان صفحه در مرورگر لازم است، این عنوان همان متنی است که در سربرگ مرورگر برای هر صفحه نمایش داده می شود.
- تگ h1 نشانگر سرتیترها است که می تواند مقادیری تا h6 داشته باشد، هرچه مقادیر عددی مقابل h بزرگتر باشد، اهمیت متن درون تگ کمتر است، به طور مثال تگ h1 مهمتر از تگ h3 است!
- تگ p در کدهای HTML نشانگر پاراگراف است، گفتیم که HTML زبان نشانه گذاری است و p در این نشانه گذاری نماینده پاراگراف است.
- اکثر تگ های HTML به صورت جفتی بوده و با افزودن یک اسلش (/) به ابتدای تگ آغازین بسته می شوند، این تگ ها اصولا شامل محتوایی درون خود هستند، به طور مثال:

<div>آموزش مقدماتی وب</div>

البته برخی تگ های HTML نیز تکی هستند و به خودی خود بسته می شوند، به طور مثال:

<br>
<hr>

یا:

<br />
<hr />

در نسخه های پیشین HTML برای تگ های تکی مانند br، hr و... درج اسلش پایانی ضرورت داشت اما در نسخه جدید HTML (در حال حاضر نسخه 5) این محدودیت رفع شده و می توان این نوع تگ ها را بدون اسلش پایانی به کار برد.
نکته 1: همان طور که گفتیم هدف از ایجاد زبانی به نام HTML (مخفف Hypertext Markup Language) در وب، در واقع به ضرورت ایجاد استانداردی تعریف شده برای یکسان سازی و سهولت کار برمی گردد، این زبان توسط کنسرسیوم جهانی وب یا W3C توسعه یافته و امروزه تبدیل به استانداردی فراگیر گشته است که توسط انواع مختلف مرورگرها و واسطه های کاربری در دستگاه ها و پلتفرم های مختلف (کامپیوتر، تلفن همراه و...) قابل پردازش است.
نکته 2: HTML در حقیقت یک زبان برنامه نویسی نیست بلکه بیشتر شبیه یک قرارداد با پیروی از اصولی منظم است (HTML زبان نشانه گذاری یا Markup است)، چرا که محدود به تگ ها و دستور عمل های خاصی است و خارج از چارچوب تعریف شده خود، قدرت مانور ندارد (HTML قادر به تصمیم گیری و شرط گذاری به آن صورت که در زبان های برنامه نویسی دیده می شود نیست)، اما از این جهت که زبان تفهیم خواسته های برنامه نویس از مرورگر تلقی می شود اهمیت زیادی دارد، یعنی وقتی در وب برنامه ای به یک زبان که در سرور اجرا می شود (مانند PHP) می نویسیم، هدف هر چه که باشد نهایتا معمولا باید خروجی خود را در بستر HTML به مرورگر انتقال دهیم، در واقع مرورگرها فقط زبان HTML را درک می کنند و با پردازش کدهای آن، نتیجه دلخواه را نمایش می دهند.

دسته بندی: آموزش مقدماتی » HTML

برچسب ها: HTML

قبلی »

« بعدی

مطالب بیشتر:
نحوه ایجاد لینک در HTML
تگ های اصلی و کلیدی HTML
فرمت بندی و کار با متن و پاراگراف در HTML
آشنایی با مفهوم Semantic در HTML
لایه بندی در HTML با تگ div و span

دیدگاه

۶۷ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

avin

۲۲:۳۴ ۱۴۰۰/۰۸/۱۷

سلام وقتتون بخیر
من تازه کدنویسی رو شروع کردم و الان html و css رو با نوت پد پلاس پلاس یاد می گیرم ولی وقتی که صفحه رو رفرش می کنم که نتیجه ی کار و ببینم همه ی تگ ها رو همون طور که نوشتم بهم نشون میده.
لطف می کنید یه راهنمایی کنید که چی کارش کنم🙏🏻
لطفا زود جوابم رو بدید.

فایل نهایی باید با فرمت htm یا html ذخیره شود تا هنگام اجرا در مرورگر کدها به عنوان دستورات پردازش شوند، احتمالا فایل ها را به صورت متنی (فرمت txt) ذخیره می کنید.

m.b

۲۱:۱۰ ۱۴۰۰/۰۷/۲۹

سلام
تشکر بابت سایت خوبتون و جواب دادنتون.
یک سوال داشتم خدمتتون و اون اینکه من در نرم افزار netbeans اگر بخواهم پروژه ام رو ران کنم مثلا با موزیلا یا کروم نمایش داده میشه اگر بخواهم موبایل فرندلی بشه یا همون حالت صفحه نمایش موبایل هم بخوام ببینم چه تنظیماتی رو انجام بدم تا صفحه ها مثل حالت نمایش موبایل باشه ممنون

برای بررسی و مشاهده صفحات وب در حالت موبایل می توانید افزونه Web Developer را برای مرورگر فایرفاکس نصب و از منوی Resize به صفحه نمایش های با ابعاد مختلف دسترسی داشته باشید، برای نصب این افزونه از قسمت Add-ons استفاده یا مستقیم به آدرس زیر مراجعه کنید:

https://addons.mozilla.org/en-US/firefox/addon/web-developer

نکته: این ابزار صرفا جهت مشاهده و تست صفحات وب است، برای سازگار کردن صفحات با حالت موبایل تکنیک های مختلفی وجود دارد از جمله استفاده از مقداردهی درصدی یا استفاده از Media Query در CSS، در کل باید با طراحی قالب های واکنش گرا (Responsive) آشنا باشید.

farhad

۲۳:۱۴ ۱۴۰۰/۰۲/۲۶

سلام تغییراتی در کدهای ایجاد کردم که باعث افزایش رول میشود ولی با زدن رفرش و اینتر دوباره صفحه به حالت قبل باز میگردم مشکلم در این زمینه حل کنید چه کد اچ تی ام ال یا اسکریبتی باید تغییر بدم تا تغییرات اعمال شده دخیره شود با تشکر

برای ذخیره کردن تغییرات در سمت مرورگر معمولا راه حل استفاده از کوکی یا ذخیره مقادیر در حافظه محلی است، نوشتن کوکی و اسکریپت بستگی به کدهای امکانات صفحه مورد نظر دارد و بدون بررسی نمی توان کد خاصی پیشنهاد داد، همچنین کنترل سورس صفحه باید در اختیارتان باشد در غیر اینصورت کوکی کاربردی نخواهد داشت و باید به فکر روش های پیچیده تری مانند اکستنشن برای مرورگر باشیم.

امید

۱۹:۰۶ ۱۳۹۹/۰۴/۰۳

در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد

در حالت معمولا در وب معمولا از تگ a و پارامتر href استفاده می کنیم و به صفحه اصلی سایت لینک می دهیم، به فرض:

<a href="http://webgoo.ir" title="Main Page">صفحه اصلی</a>

همچنین از دستور زیر در جاوا اسکریپت هم می توانیم برای بازگشت به صفحه قبل (نه صرفا صفحه اصلی) استفاده کنیم:

<script>
document.getElementById('go-back').addEventListener('click', () => {
  history.back();
});
</script>
<button id="go-back">بازگشت به صفحه قبل</button>

sufia

۱۸:۳۹ ۱۳۹۹/۰۲/۰۹

سلام، ببخشید چطور میتونم یک لینک رو توی صفحه ای که با html نوشتم قرار بدم؟ زمانی که لینک رو کپی پیست میکنم از حالت لینک خارج میشه.

باید از تگ a در HTML استفاده کنید، برای انجام این کار هم می توانید سورس صفحه ای که لینک در آن قرار دارد را کپی کنید (کلیک راست و انتخاب گزینه View Page Source) هم اینکه خودتان آدرس URL را در تگ a قرار داده و در کدهای صفحه مقصد درج کنید.

ابوالفضل شیخیانی

۲۲:۳۰ ۱۳۹۸/۱۰/۱۶

عالی بود، ممنون بابت این پستتون

مهدی

۱۴:۲۱ ۱۳۹۸/۱۰/۱۳

می خوام در صفحه ای رنگ آبی گزینه نام و نام خانوادگی نوشته بشود و جای خالی برای آنها گذاشته شود و در آخر داخل مربعی ارسال حک بشود کد آن را می خوام کسی داره راهنمایی کنید

اگر منظورتان صفحه ثبت نام یا ورود به سایت است لطفا در این زمینه در وب جستجو کنید، آموزش های متعددی در سایت های مختلف وجود دارد.
نکته: کار با فرم ورود یا ثبت نام در سایت علاوه بر آشنایی با HTML معمولا به تسلط بر PHP (یا هر زبان برنامه نویسی سمت سرور دیگر) نیاز دارد.

سمیه

۲۰:۴۹ ۱۳۹۸/۰۸/۱۷

سلام
ممنون بابت آموزش مفیدتون
توی تگ ها هرچیزی که در تگ head قرار بگیره نمایش داده نمیشه، اما ممنون میشم توضیح بدین که کدهای زیر که در بخش head قرار گرفتن چه مفهوم و چه لزومی دارند؟

<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | اولین صفحه HTML من</title>
<!-- Webgoo.ir -->

باز هم ممنون

متاتگ viewport برای تعیین اندازه پیش فرض و میزان بزرگنمایی اولیه صفحه وب در دستگاه هایی کاربرد دارد که عرض صفحه نمایش کمی دارند مانند موبایل، تبلت و... ، تگ title برای درج عنوان اصلی صفحه است که در بالای پنجره مرورگر نیز نمایش داده می شود، قسمت آخر مربوط به درج یادداشت است، در HTML هرچیزی که بین علامت های

<!-- -->

قرار بگیرد بصورت یادداشت پردازش می شود.
برای آشنایی بیشتر با متاتگ ها می توانید در سایت عبارت "متاتگ" را جستجو کنید.

erfan

۱۷:۳۰ ۱۳۹۷/۰۹/۱۱

سلام خسته نباشید.
یه سوال داشتم بدون یادگیری html و css میشه php رو یاد گرفت و فقط با اون کارکرد یا نه؟

بله اما توصیه نمی شود، PHP در نهایت خروجی HTML تولید می کند، لذا هرچند اینها از هم مستقل هستند اما برای برنامه نویسی وب روند منطقی این است که ابتدا HTML و CSS را یاد بگیرید و در گام های بعدی سراغ PHP بروید.

seyed

۰۵:۳۹ ۱۳۹۷/۰۷/۰۵

با عرض سلام خسته نباشید طبق گفته شما سیو کردم روش دابل کلیک میکنم دوباره خود متنو میاره یا روی مرورگر میندازم نتیجه رو نمیاره چیی کار کنم

به فرمت فایل دقت کنید که html باشد، در صورتی که مشکل پابرجا بود لطفا فایل خود را از طریق آدرس ایمیل سایت (در بخش تماس با ما موجود است) برایمان ارسال کنید تا بررسی گردد.

morteza

۰۸:۴۶ ۱۳۹۷/۰۶/۲۵

سلام خسته نباشید
من با مرورگر کروم دستور عمل ها رو میخوام اجرا کنم اما همون دستور عمل رو برام میاره مثلا:

<html>
<head>
<title></title>
</head>
</html>

بایستی چی کار کنم مهندس؟

به احتمال زیاد فایلتان را با فرمت html ذخیره نکرده اید، دقت کنید که صفحات وب در حالت معمول باید با فرمت html ذخیره شوند، به فرض:

index.html

اگر این فایل ها را در مرورگر اجرا کنید کدهای HTML پردازش شده و فقط خروجی نمایش داده می شود.

علی

۰۸:۰۴ ۱۳۹۶/۰۸/۰۱

سلام
من در حال حاضر دستورات html , css را یاد گرفته ام می خواستم بدونم بهتر برای مهارت الان تمرین کنم و مثلا شروع کنم یک وب سایت را بصورت فرضی طراحی کنم یا بهتر است با جاوا اسکریپت هم آشنا شوم و بعد شروع کنم به تمرین کاربردی برای طراحی وب
ممنون
در ضمن عذر خواهی می کنم اگر در جای مناسب سوال نکردم

توصیه می کنیم با جاوا اسکریپت هم تا حد امکان آشنا شوید تا درک بهتری از سورس کدها و تفسیر آنها داشته باشید، در مجموع همیشه از مقدمات و پروژه های سبکتر کارتان را شروع کنید.

محمد

۲۰:۵۲ ۱۳۹۶/۰۲/۱۸

واقعا عالی بود

پارسا

۱۰:۳۵ ۱۳۹۵/۱۱/۲۱

ممنون بابت آموزش خوبتون، خیلی عالی بود مخصوصاً برای افراد مبتدی و من سایتتون رو برای دوستانی که میدونستم در حال آموزش اچ تی ام ال هستند معرفی کردم.

علی

۱۹:۴۴ ۱۳۹۵/۱۰/۱۱

سلام خواستم بدانم اگر بخوام هشت صحفه درست کنم و مثلا از صحفه یک برم صحفه سه یا دوباره برگردم همان صحفه اول از چه دستوری استفاده کنم

اگر صفحات شما (فرمت فایل) به صورت HTML است، با استفاده از تگ a می توانید بین صفحات مختلف لینک ایجاد کنید، اما اگر منظور ایجاد صفحه بندی حرفه ای است، باید با برنامه نویسی PHP آشنا باشید!

نخست

قبلی

بعدی

آخر

صفحه 1 از 5

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.