آگهی
article

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

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 را درک می کنند و با پردازش کدهای آن، نتیجه دلخواه را نمایش می دهند.
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» آشنایی با مفهوم Semantic در HTML
» تگ های اصلی و کلیدی HTML
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
» لایه بندی در HTML با تگ div و span
» کار با تگ های ایجاد کننده لیست در HTML
commentنظرات (۶۴ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: مهدی
۱۴:۲۱ ۱۳۹۸/۱۰/۱۳
می خوام در صفحه ای رنگ آبی گزینه نام و نام خانوادگی نوشته بشود و جای خالی برای آنها گذاشته شود و در آخر داخل مربعی ارسال حک بشود کد آن را می خوام کسی داره راهنمایی کنید
پاسخ: 
اگر منظورتان صفحه ثبت نام یا ورود به سایت است لطفا در این زمینه در وب جستجو کنید، آموزش های متعددی در سایت های مختلف وجود دارد.
نکته: کار با فرم ورود یا ثبت نام در سایت علاوه بر آشنایی با HTML معمولا به تسلط بر PHP (یا هر زبان برنامه نویسی سمت سرور دیگر) نیاز دارد.
۲۲:۳۰ ۱۳۹۸/۱۰/۱۶
عالی بود، ممنون بابت این پستتون
نویسنده: sufia
۱۸:۳۹ ۱۳۹۹/۰۲/۰۹
سلام، ببخشید چطور میتونم یک لینک رو توی صفحه ای که با html نوشتم قرار بدم؟ زمانی که لینک رو کپی پیست میکنم از حالت لینک خارج میشه.
پاسخ: 
باید از تگ a در HTML استفاده کنید، برای انجام این کار هم می توانید سورس صفحه ای که لینک در آن قرار دارد را کپی کنید (کلیک راست و انتخاب گزینه View Page Source) هم اینکه خودتان آدرس URL را در تگ a قرار داده و در کدهای صفحه مقصد درج کنید.
نویسنده: امید
۱۹:۰۶ ۱۳۹۹/۰۴/۰۳
در برنامه نویسی کاربر با چه دستوری میتواند به صفحه اصلی برگردد
پاسخ: 
در حالت معمولا در وب معمولا از تگ 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>
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ کوتاه و مختصر داده خواهد شد!
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.





3 × 5
 refresh
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
form عاطفه مرادی
در:
سلام. من تازه یادگیری html رو شروع کردم و برای وبسایتمون برروی کنترل پنل html می نویسم. از طراح وبسایت خواستم که دسترسی جاوا را...
۱۳۹۹/۰۵/۱۹

form Amir Rahimi
در:
سلام و خسته نباشید من یک سوالی داشتم که مربوط به این بحث نیست سوال من اینه که یه کد یا . ....
۱۳۹۹/۰۵/۱۸

form محمد
در:
سلام اگر بخواهیم هدر سایت در گوشی های موبایل مخفی بشه از چه کدی باید استفاده کرد. کد زیر کلا مخفی میکنه در صورتیکه من...
۱۳۹۹/۰۵/۱۸

form shayan
در:
با سلام وقت به خیر من میخوام تو یه زبانه ای که در واقع متن قرار دادم لینک اسکرول بالا در حده پیکسل...
۱۳۹۹/۰۵/۱۷

form mahtab
در:
ببخشید اگه انتی ویروس رو غیرفعال کنیم برای باز کردن وب که باز نمیشه دوباره میتونیم آنتی ویروس رو فعال کنیم ؟؟ ...
۱۳۹۹/۰۵/۱۵

form امیرمحمد خلیلی
در:
ببخشید چجوری میتونم یه عکس از کاربر بگیرم و نمایشش بدم؟
۱۳۹۹/۰۵/۱۵

form elias
در:
خسته نباشید کاری که گفته بودید انجام دادم ولی رفرش می کنم همه لینک ها بر می گرده مثل اول می شه
۱۳۹۹/۰۵/۱۴

form سفی
در:
سلام و خسته نباشید من فایل آموزش html مقدماتی رو دیدم اما وقتی روی index.html کلیک راست کردم این گزینه ++edit..c رو ندیدم چه برنامه...
۱۳۹۹/۰۵/۱۰

form dnmax
در:
ببخشید ما اگه بخواهیم در وبلاگ مان به بقیه کدهای جاوا بدهیم وقتی کد رو پست میکنیم کد نشان داده نمیشود مثلا کد پخش آهنگ...
۱۳۹۹/۰۵/۰۹

form علیرضا
در:
سلام خیلی ممنون بابت مطالب مفیدتون عاالی بودن ان شالله همیشه موفق باشین.
۱۳۹۹/۰۵/۰۹

form محمد معین محب
در:
سلام میشه برای من یک اچ تی ام ال با بسازید . ممنون میشم
۱۳۹۹/۰۵/۰۸

form مهدی
در:
سلام و خسته نباشید یه مشکلی دارم که فکر کنم فقط وبگو میتونه کمک کنه سرور دانلود دارم و از اسکریپت دانلود vip...
۱۳۹۹/۰۵/۰۸

form neda
در:
با سلام من سایتی زدم از نظر ریسپانسیو هم اکی هست. فقط ارتفاعش از مانیتورهای مختلف به یک اندازه نیست. برای div اول ارتفاع...
۱۳۹۹/۰۵/۰۷

form الهام
در:
سلام یه سوال داشتم که هرچی سرچ کردم جوابش پیدا نشد چجوری ادامه مطلب رو با کلیک روی کلمه مثلا بیشتر... ببینیم؟ ...
۱۳۹۹/۰۵/۰۶

form فاطمه
در:
سلام و خسته نباشید من اومدم برای وبم کد نظرات جدید درج کنم و اتفاقی یه بخش بزرگی از کدها رو حذف کردم و...
۱۳۹۹/۰۵/۰۵
form دینا
در:
چطور نظرات خصوصی که واسه وبلاگم مینویسن پاسخ بدم
۱۳۹۹/۰۵/۰۳
form میثم
در:
سلام من برای دریافت چند تا اطلاعات از جداول سایتم مجبور شدم دستور زیر رو اجرا کنم. هر کدام از جداول حدود ۱.۰۰۰.۰۰۰...
۱۳۹۹/۰۵/۰۱
form علی
در:
با سلام و تشکر فراوان اگر یک div خودش درون div دیگری باشد مثل مثال زیر مقدارش رو چطور به دست بیاریم؟ در...
۱۳۹۹/۰۵/۰۱
form mahtab
در:
خیلی میبخشین بفرمایین
۱۳۹۹/۰۴/۳۱
form علی
در:
با سلام و درود فراوان با چه فرمانی میشه content یک متاتگ رو به دست آورد. مثلا یه لینکی رو بدیم و content مورد...
۱۳۹۹/۰۴/۳۰
form فاطمه
در:
سلام چرا وبلاگ ها برام بالا نمیاد فقط بخش مدیریت میاد وقتی میزنی مشاهده وبلاگ نمیاد وبلاگ دوستانم نمیاد حتی وبلاگ های دیگه...
۱۳۹۹/۰۴/۲۸
form امیر
در:
سلام می خواستم بپرسم چگونه می شه در وبلاگ خود هنگامی که بادید کننده وارد وبلاگ می شه آهنگ خودکار پخش بشه . ممنون...
۱۳۹۹/۰۴/۲۶
form mahtab
در:
سلام ببخشید من که اینو نوشتم شما هم جواب دادین : ببخشین چرا وبلاگ من تو لبتاپ دوستم باز نمیشه ؟؟؟ واسه...
۱۳۹۹/۰۴/۲۶
form مهدی
در:
سلام حالتون خوبه؟ ببخشید هی مزاحمتون میشم.. یک سوالی داشتم من عملیات ری رایت رو میخوام تو سی پنل انجام بدم صفحه لوگین رو باز...
۱۳۹۹/۰۴/۲۶
form مهدی
در:
خیلی خیلی ممنونم از وقتی که گذاشتید.. لطف کردید
۱۳۹۹/۰۴/۲۴
form mahtab
در:
ببخشین چرا وبلاگ من تو لبتاپ دوستم باز نمیشه ؟؟؟ واسه ی ویروس هم اسکن کرده اما نوشته چیزی نیس چیکار کنیم ؟؟؟؟ ...
۱۳۹۹/۰۴/۲۴
  در انتظار بررسی: ۰
 پاسخگویی به سوالات 1 تا 48 ساعت زمان می برد.