در این دوره از دوره های آنلاین متنی وبسایت فناوری اطلاعات مبین میخواهیم بپردازیم به آموزش زبان نشانه گذاری HTML.
اولین سوال که برای تازه کاران پیش مآید این است که آیا زبان HTML زبان برنامه نویسی است یا خیر ؟
در پاسخ به این سوال باید گفت خیر. درواقع زبان HTML یک زبان نشانه گذاری است.
اما زبان نشانه گذاری یعنی چه ؟
درواقع زبان HTML و اصولا تمام زبان های نشانه گذاری برای تعیین موقعیت و نحوه نمایش محتوا در صفحه نمایش است.به عنوان مثال زبان HTML که یک زبان نشانه گذاری مخصوص وب است، برای نمایش متن، تصویرف ویدیو، لینک و … استفاده میشود.
درکل اگر بخواهیم زبان HTML را با یک مثال کاملا واضح بیان کنیم، میتوان از این مثال استفاده کنیم :
برای ساخت یک ساختمان شما کاری که میکنید این است که چارچوب و بدنه (اسکلت) ساختمان را بسازید.محل دقیق نسب درب ها، پنجره ها، سرویس بهداشتی و … را تایین کنید.زبان HTML نیز دقیقا همین است.شما برای ساخت وبسایتتان باید ساختمان وبسایت خود را با استفاده از زبان HTML بسازید.
قدم اول در استفاده از زبان HTML :
شما در قدم اول باید یک ادیتور متن را برای خود انتخاب کنید. در اینجا لیستی از برترین ادیتور های متن را برای شما فراهم آورده ایم (برای دانلود کلیک کنید) :
- نوت پد پلاس پلاس (note pad ++)
- ساب لایم تکست(sublime text)
- براکت(bracket)
- ویژوال استدیو کد(visual studio code)
- اتم(atom)
ویرایش گرهای پیشرفته ی متن :
توجه : در این سری آموزش ها ما میخواهیم از ادیتور متن سابلایم تسکس استفاده کنیم.
بعد از نصب و اجرای برنامه کافیست دکمه های ترکیبی CTRL + N رو فشار دهید تا یک فایل جدید برایتان ایجاد شود.
بعد از ایجاد کلید های ترکیبی CTRL + S را بزنید تا فایل برای شما ذخیره شود.یک نام برای فایل انتخاب کنید و نوع فایل خود را از نوع HTML انتخاب کنید.
حال کافیست تا متن زیر را در فایل HTML خود وارد کنید و سپس لیستی برای شما نمایش داده میشود.کافیست روی گزینه اول ENTER کنید و میبینید که محتوای زیر برای شما تولید میشود :
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
توضیح خط به خط :
در وهله اول باید بدانیم که تگ چیست ؟
درواقع <html> یا <head> و … هر کدام یک تگ میباشد. ساختار هر تگ به این صورت است :
تگ باز : <tag>
تگ بسته : </tag>
هر کدام از این تگ ها یک وظیفه خاصی دارند که در زیر به آن ها می پردازیم :
- <!DOCTYPE html> چیست ؟ نشان دهنده نوع و فرمت فایل .
- <html> چیست ؟ نشان دهنده محدوده ی کد های html .
- <head> چیست ؟ این تگ درواقع یک نگهدارنده میباشد که ما فایل های جانبی خود را در آن لینک میکنیم که برای کاربران در صفحه مرورگر قابل مشاهده نیست (مانند انباری برای خانه که نگهدارنده ی وسایل جانبی است ولی در نمای کلی ساختمان دیده نمیشود).
- <title></title> چیست ؟ این تگ نگهدارنده عنوانی است که در تب مرورگر نمایش داده میشود.
- مانند : (<title>web name </title>)
- <body> چیست ؟ شما هر محتوایی را که بخواهید در صفحه مرورگر کاربر نمایش داده شود را باید در این تگ وارد کنید.
در قدم بعد با دیگر تگ های html آشنا میشویم.