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

قبل از هر چیزی ، این رو بگم که ممکنه توضیح های اولیه براتون کمی گنگ باشه. برای همین پیشنهاد می کنم اول از همه ، ویدیو زیر مشاهده کنید تا ایده کلی نسبت به اچ ای ام ال پیدا کنید و سپس به مطالعه این مقاله ادامه دهید. از همراهی شما سپاس گزاریم!

HTML چیست؟

HTML مخفف کلمه Hyper Text Markup Language به معنای زبان نشانه گذاری ابرمتن است. همه وب سایت های موجود در دنیا (چه ایرانی ، چه خارجی) مانند تکلرن با HTML ساخته شده اند. به بیان ساده تر ، تمامی عناصر قابل مشاهده روی صفحه مانند متون ، تصاویر ، ویدیو ها و... همه و همه با استفاده از زبانی به نام HTML درست شده اند. بیایید چند مثال بزنیم از عناصری که در یک صفحه وب وجود دارند که به توسط اچ تی ام ال ساخته می شوند :

• تیترها : تیتر ها متون بزرگی هستند که ایده کلی نسبت به یک مقاله یا درس را به ما می گوییند.
• متون : همه متن های قابل رویت در صفحه وب
• دکمه ها : خود شما بهتر از من می دونید چیه! مثل دکمه : افزودن به سبد خرید یا ثبت نام در سایت
• تصاویر : برای بیان واضح تر منظور نویسنده و جذاب کردن متن
• ویدیوها : هدف اصلی برخی از سایت ها ، ارئه مطلب به وسیله فیلم ها است.
• عنوان سربرگ مرورگر و....

در همه این موارد دیدیم که اچ تی ام ال (HTML) چه نقش بسیار مهمی در به وجود آمدن صفحات وب دارد. در حقیقت بنیان وب سایت ها با HTML است.

حالا فهمیدیم HTML چیه! اما خب چجوری وب سایت ها با این زبان به وجود می یان؟ یعنی وقتی می گیم سایت ها با HTML به وجود می آیند دقیقا یعنی چه؟!

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

• زبان HTML
• زبان CSS
• زبان JavaScript
• و...

این ها همه برنامه هایی تحت مرورگر (یعنی در مرورگر شما مانند Chrome یا Firefox اجرا می شوند) هستند که در مقاله های بعدی به آنها می پردازیم.

مانند هر تکنولوژی و زبان دیگری اچ تی ام ال مزایا و معایبی دارد که آنها را بررسی می کنیم:

مزایای قابل توجه و عالی HTML :

• HTML در تمامی مرورگر ها اجرا می شود.
• یادگیری این زبان بسیار بسیار آسان است!
• HTML به راحتی می تواند با زبان هایی مثل  CSS و  JavaScript ادغام شود.
• فایل های اچ تی ام ال عموما سبک هستند و بسیار سریع اجرا می شوند.
• HTML رایگان است!

با همه این ها این زبان یک سری نکات منفی هم دارد که بد نیست نگاهی به آن بیندازیم.

ویژگی های تقریبا منفی HTML!

• - اچ تی ام ال به عنوان یک زبان ایستا (static) شناخته می شود که محتوای آن فقط به صورت دستی قابل تغییر است.
• امنیت زبان های سمت کاربر مانند HTML بسیار پایین است و امنیت آن باید توسط زبان Back-End سایت مدیریت شود.
• برخی دستورات آن در مرورگر های قدیمی پشتیبانی نمی شوند.

اکنون وقت آن رسیده که گذری بر تاریخچه زبان HTML داشته باشیم. یعنی از روز تولد این زبان تا آخرین نسخه آن.

تاریخچه زبان HTML

به نمودار زیر دقت کنید :

رابطه HTML با CSS

دیگه فکر کنم هر چی راجبه تئوری HTML لازم بود رو بلدیم! فهمدیم که عناصر بصری وب سایت با اچ تی ام ال ساخته می شوند. اما یک نکته خیلی مهم وجود داره. اینه که :

زیبا سازی سایت ها با زبانی به نام CSS انجام می شه!

می دونم ، یه خورده گیج کننده شد! اما بریم که یک مثال واقعی از تفاوت HTML و CSS ببینیم.

برای نمونه ، شما که اکنون در حال مطالعه مقاله هستید ، دقیقا همین متنی که شما می بینید ، با HTML تولید می شه ، خب این رو که بلد بودیم! ولی زیبا سازی و خوشگلاسیون این متن ، با چیزی یا بهتره بگم با زبانی به نام سی اس اس انجام میشه. حالا منظورمون از زیبا سازی چیه؟؟

• رنگ متن ها و اندازه آنها
• فاصله بین خطوط
• وسط چین کردن عناصر روی صفحه و...

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

سی اس اس چیست و چه کاربردی دارد؟ + مثال های واقعی

بسیار هم عالی! تا الان شما با دو زبان HTML و CSS و تفاوت های آنها آشنا شدید. حالا بریم که چند خط کد HTML بنویسیم و در کمال نا باوری ، اولین وب سایت خودمون رو بسازیم! عالی نیست؟ پس با قدرت ادامه بدیم!

شروع کد نویسی HTML

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

• VS Code
• Notepad
• Notepad++
• Atom
• و...

هر یک از این ویرایشگر ها (Editor) ویژگی های خودشان را دارند اما پیشنهاد من به شما استفاده از نرم افزار VS Code یا همان Visual Studio Code است. به علت سادگی کار با آن ، حجم کم ، دانلود و نصب سریع ، محیط کاربرپسندانه و...

نحوه فعال سازی نرم افزار VS Code

برای دانلود ویرایشگر VS Code ، تنها کافیست مراحل زیررا طی کنید:

1. وارد سایت code.visualstudio.com شوید. (سایت رسمیش هست)
2. نسخه VS Code را مطابق با سیستم خود دانلود کنید. (حجم زیادی ندارد!)
3. و در نهایت روی فایلی دانلودی کلیک کنید و مراحل نصب را طی کنید.

خیلی ساده! شما نرم افزار VS Code را در سیستم عامل خود نصب کردید! حالا کافیست تا آن را اجرا کنید. اکنون برای ادامه کار مراحل زیر را به ترتیب انجام دهید.

1. یک پوشه در دستکتاپ (یا هر جای دیگر از کامپیوتر خود) بسازید.
2. نرم افزار VS Code را باز کنید.
3. از منوی بالای نرم افزار ، گزینه File را انتخاب کنید و Open Folder را بزنید.
4. به جایی که فولدر خود را ساختید بروید و آن را در محیط نرم افزار باز کنید.

بسیار هم عالی. حالا وقت آن رسیده که فایل HTML خود را بسازیم. به این منظور گام های زیر را دنبال کنید :

1. وارد فولدر پروژه خود در دسکتاپ (یا محل همان پوشه ای که ساختید) شوید.
2. یک فایل جدید تحت عنوان index.html در همان پوشه بسازید.

بله! فایل مورد نظر نظر ساخته شد. وقت آن رسیده که دست به کد شویم و اولین وب سایت خود را طراحی کنیم. برای این کار در همان فایل ساخته شده کد زیر را بنویسید:

در آخر هم به مسیر پروژه بروید و همان فایل index.html را در مرورگر دلخواه خود باز کنید.

تبریک! این هم از صفحه وب شما. فقط توجه داشته باشید ، این کدی که نوشتیم ، زبان اچ تی ام ال بود و اصلا از سی اس اس استفاده نکردیم. (واقعا وب سایت ها با CSS خیلی زیبا تر می شوند!) با همدیگر دیدیم که چقدر ساده می شود با زبان اچ تی ام ال کار کرد.

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

زبان های نشانه گذاری (Markup Languages):

همان طور که قبل تر دیدیم HTML به معنای زبان نشانه گذاری ابرمتن است. در اینجا ویژگی های زبان های نشانه گذاری را برایتان آوردیم (مثال زیر آن را حتما بخوانید) :

• منطق برنامه نویسی و تحلیلی در آنها وجود ندارد.
• بسیار بسیار برای یادگیری آسان هستند.
• عموما محاسبات خاصی هم در آنها صورت نمی گیرد.

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

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

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

حال ، چند تا از مهم ترین ویژگی های زبان های برنامه نویسی را هم ببینیم:

زبان های برنامه نویسی (Programming Languages)

• با پایگاه داده کار می کنند.
• محاسبات پیچیده و تحلیلی انجام می دهند.
• یادگیری آنها نسبت به زبان های نشانه گذاری کمی دشوارتر است.

این دو نوع زبان ، مانند دو کفه ترازو هستند. یعنی برای داشتن یک وب سایت پویا و تعاملی باید هم از زبان های برنامه نویسی (منطق و پویایی اصلی وب سایت) و هم از زبان های نشانه گذاری (ظاهر سایت) استفاده کنیم.

جمع بندی

در این مقاله از سایت تکلرن ، یاد گرفتیم HTML در واقع اسکلت و بنیان سایت است و هر چیز قابل مشاهده و رویت در یک صفحه وب به کمک این زبان ساخته می شود. زیبا سازی عناصر موجود هم توسط سی اس اس صورت می گیرد. و در نهایت هم برای داشتن وب سایت های تعاملی از زبان جاوا اسکریپت استفاده می کنیم و همچنین برای داشتن وب سایتی پویا و کاربرپسند (User Friendly) باید از همه این زبان ها و تکنولوژی ها به موقع و به جا استفاده کنیم. راجع به HTML هر سوالی داشتید می توانید از ما بپرسید تا اولین فرصت پاسخ دهیم.

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