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

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

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

قبلی »

« بعدی

مطالب بیشتر:
متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
کار با تگ های ایجاد کننده لیست در HTML
تگ های اصلی و کلیدی HTML
فرمت بندی و کار با متن و پاراگراف در HTML
نحوه ایجاد لینک در HTML

دیدگاه

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

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

یاسمن

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

سلام. می خواستم نحوه ی کپی کردن یک کد اچ تی ام ال رو داخل جوملا برام توضیح بدید یا سایتی رو معرفی کنید که راهنمایی کامل از نصب تا کپی داده باشه ... ممنون می شم

لطفا در مورد جوملا به انجمن های مربوطه مراجعه نمائید.

مهدی

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

با عرض سلام و خسته نباشید خدمت شما .
ممنون بخاطر آموزش های پربارتون تقاضا داشتم مباحث آموزش داده شده را در قالب یک پروژه هدفمند کنید تا از حالت آموزشی - تئوری و کلاس درسی خارج شه و جنبه کاربردی پیدا کنه .
با تشکر

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

مونا

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

سلام
با تشکر از سایتتون من خیلی تازه کارم میشه بهم بگید چه جوری نتیجه رو تو مرورگر ببینم؟؟

فایل را با فرمت html ذخیره، سپس آن را به مرورگر بکشید!

m-k

۱۷:۴۵ ۱۳۹۲/۱۱/۱۳

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

حجت

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

سلام و خداقوت
لطفا حداقل و حداکثر زمان برای یادگیری HTML, CSS, JavaScript, Ajax, PHP رو توضیح بدین و بفرمائین کدوم رو اول شروع کنیم یا میشه با یکی دیگه یادگیریش رو شروع کنم یا کدوم بهتره
لطفا به ایمیل هم خبر بدین چون خیلی زود میخوام شروع کنم
با تشکر

زمان خاصی قابل پیش بینی نیست! بستگی به استعداد، علاقه و میزان وقتی دارد که می توانید در هر روز صرف یادگیری کنید، برای شروع اصول و مبانی وب را مطالعه نمائید، سپس HTML و پس از مدتی همراه با HTML استایل نویسی CSS و در گام بعدی اسکریپت نویسی با JavaScript، پس از مدتی کار و تسلط نسبی، کار با PHP و هم زمان Ajax و در گام پایانی پایگاه داده MySQL.

متین

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

سلام
خیلی ممنون بابت آموزش خوب شما خیلی ساده توضیح دادین ، میخواستم بدونم فرق PHP و HTML چیه ؟
این دوتا پیوسته به هم هستن یا هیچ ربطی به هم ندارن؟
و در کجاها استفاده میشه ؟
بازم ممنون

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

پیمان

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

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

برای طراحی قالب و... باید HTML و CSS را در حد حرفه ای یاد بگیرید که این کار به طور معمول یک سال زمان می برد و همچنین نیاز به تلاش و تمرین زیاد دارد.

black.s

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

سلام خسته نباشین
مرسی از اموزش زیباتون . خیلی عالی بود
من تازه کارم و از امروز شروع کردم .
می شه راهنماییم کنید که از کجا شروع کنم.

برای طراح یا برنامه نویس وب شدن باید از مقدمات شروع کنید، یعنی آشنایی با مبانی وب و در گام بعدی زبان های HTML، CSS و سپس JavaScript، در نهایت به سمت زبان های سمت سرور مانند PHP یا ASP بروید.

محمد

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

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

DOCTYPE و مقادیر بعد از آن برای راهنمایی مرورگر جهت پیروی از استاندارد و نسخه مشخصی از HTML است، تگ html و مقادیر آن نیز برای تعیین شروع سند و در برخی نسخه ها مرجع XML صفحه است، در برخی نسخه های قدیمی تر HTML باید به سایت w3.org که مربوط به کنسرسیوم جهانی وب است و استانداردهای HTML را تعریف می کند ارجاع داده شود، بزرگ یا کوچک بودن حروف اهمیتی ندارد (استفاده از حروف کوچک توصیه می شود).

امید

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

خیلی عالیه ممنون

غزل

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

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

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

hosein

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

ببخشید زبانهای برنامه نویسی وب زبانهای سطح بالا هستند و اینکه درسطح بندی زبانهای برنامه نویسی اسمی از این زبانها نیست.

در مورد زبان بودن یا نبودن HTML، به هر صورت حرف L در این عبارت به معنی Language است (HyperText Markup Language) و لذا در اصطلاح می توان به آن عنوان زبان اطلاق کرد (Markup نیز در اینجا یعنی روش نشانه گذاری برای جداسازی تگ ها از متن ساده)، هرچند نباید با زبان های برنامه نویسی مانند PHP، Java و... مقایسه شود.

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

سلام و خسته نباشید
ضمن تشکر فروان از این سایت مفید شما و حمایت ما به طرق مختلف برای برپا نگه داشتن این سایت کارآمد زمانی که تمامی مراحل رو به دستور شما انجام دادیم برای دیدن نتیجه کار در یک مرورگر همین کدها رو دوباره بهمون نشون میده . یک توضیحی بدهید . با سپاس

مرورگرها تگ ها را نمایش نمی دهند! لذا مشکلی در مراحل انجام شده وجود دارد، به طور مثال ممکن است فرمت فایل html یا htm نباشد، یا اینکه تگی به درستی بسته نشده، باید فایل خود را ارسال کنید تا بررسی شود.

ف.خ

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

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

برای شروع به یادگیری برنامه نویسی وب، از HTML و سپس CSS شروع کنید.

حسین

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

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

سعی شده تا هر مطلب در جای خود کامل باشد، منتها مباحث (به طور مثال مبحث HTML) هنوز کامل نیستند، به عبارتی بخشی از آموزش های مقدماتی تر منتشر شده و هنوز مباحث پیشرفته تری باقی مانده، انتشار مطالب در سایت آهسته و پیوسته است!

صفحه 4 از 5

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