آموزش HTML و HTML5 آموزش‌های سریالی

HTML5 و HTML چیست؟ – آموزش HTML قسمت ۱

مهدی خسروی
نوشته شده توسط مهدی خسروی

برای ساخت هر چیزی، مجموعه‌ای از وسائل مورد نیاز را باید داشته باشیم. آن وسائل به ما کمک میکنند که بتوانیم آن چیزی که مد نظرمان است را بسازیم و تولید کنیم. در خصوص دنیای وب هم دقیقا به همین حالت است. در این مقاله با بررسی یک مثال کاربردی، یاد میگیریم که HTML چیست ، چه کاربردی دارد و چرا طراحی وب و ساختمان سازی بسیار شبیه هم هستند.
هدف اصلی ما این است که یک وبسایت بسازیم و برای ساخت آن وبسایت، به مجموعه‌ای از دانش‌های و مهارت‌های مختلف نیاز داریم.
به کسی که دانش و مهارت کافی را برای طراحی و ساخت یک وبسایت دارد، طراح وب و به پروسه‌ی ساخت یک وبسایت از صفر تا صد، طراحی وبسایت میگوییم. که ممکن است گاهی اوقات، طراحی وبسایت را به خلاصه، طراحی وب نیز صدا کنند.
ممکن است برای شما این سوال بوجود بیاید که «برای ساخت وبسایت، به چه مهارت و دانشی نیاز است؟» این دقیقا چیزی است که در ادامه میخواهیم درباره‌ی آن صحبت کنیم.

یک ساختمان را در نظر بگیرید

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

شباهت html و ساختمان سازی

معمولا پروژه‌‌های ساختمانی دو فاز کلی دارند:

  1. فاز اول: اسکلت‌بندی و ساخت کلیت ساختمان
  2. فاز دوم: کار بر روی زیبایی، گچ بری، رنگ‌های قسمت‌های مختلف ساختمان و…

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

بیشتر بدانید:
قسمت دوازدهم: ساخت فروشگاه اینترنتی ساده با HTML-CSS-PHP-MySQL

طراحی وبسایت هم دقیقا به همین شکل است!

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

  • منوی وبسایت در کجا قرار گیرد
  • سمت بالایی وبسایت به چه شکل باشد
  • نحوه‌ی نمایش مطالب سایت چگونه باشد
  • فرم ثبت نام کاربران چه فیلدهایی داشته باشد
  • چه لینک هایی در صفحه وجود داشته باشد
  • چه جدول هایی در صفحه وجود داشته باشد
  • و…

سپس بعد از مشخص کردن کلیات، به سراغ جزئیات، زیبا سازی، رنگ و جلوه‌های بصری وبسایت میرود. یعنی در این مرحله، طراح وبسایت مشخص میکند که:

  • منوی وبسایت چه رنگی باشد
  • بعد از رفتن موس روی یک لینک، چه اتفاقی برای آن لینک بیفتد
  • رنگ متن های وبسایت چه باشد
  • جدول ها در صفحه چه استایلی داشته باشند
  • و…

هرچیزی بدون تزئین زشت است!

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

  1. طراحی کلیات و جایگزاری المان‌های صحفه وب
  2. استایل دهی و زیباسازی المان‌های صفحه وب

پس HTML و CSS چی؟

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

  1. طراحی کلیات و جایگزاری المان‌های صحفه وب
  2. استایل دهی و زیباسازی المان‌های صفحه وب
بیشتر بدانید:
قسمت سیزدهم: ساخت فروشگاه اینترنتی ساده با HTML-CSS-PHP-MySQL

مرحله‌ی اول که در آن به ساخت کلیات وبسایت میپردازیم، یعنی در آن محل لینک‌ها، لیست‌ها، جدول‌ها، منوی‌ها، مطالب و… را مشخص میکنیم، از HTML استفاده میکنیم.

لوگوی html و css

[quote font_size=”18″ bgcolor=”#” color=”#000″ bcolor=”#” arrow=”no”]در واقع HTML به ما کمک میکند که ساختار کلی یک صفحه وب را بچینیم و طراحی کنیم.[/quote]

اما CSS دقیقا کاری مشابه رنگ آمیزی و نور پردازی برای ما انجام می‌دهد. به این معنا که بعد از طراحی و چینش ساختار کلی یک صفحه وب، با استفاده از CSS مشخص میکنیم که رنگ المان‌ها به صورت باشد، چگونه در کنار یکدیگر قرار گیرند، چه استایل و ویژگی‌هایی داشته باشند و… . در واقع CSS به ما در زیبا سازی یک صفحه‌ی وب کمک میکند.

[quote font_size=”18″ bgcolor=”#” color=”#000″ bcolor=”#” arrow=”no”]این بخش مربوط به HTML و کلیات آن میباشد و بیشتر درباره‌ی آن صحبت میکنیم و در بخش مربوط به CSS، با جزئیات بیشتری به آن میپردازیم. در ایجا فقط میخواستیم یک تصویر کلی از کاربرد HTML و CSS به شما بدهیم و بگوییم که HTML چیست و چطور در طراحی وب به کمک ما می‌آید.[/quote]

در زیر، بصورت پرسش و پاسخ، با HTML بیشتر آشنا می‌شویم:

HTML چیست ؟

HTML مخفف Hyper Text Markup Language به معنای زبان نشانه‌گذاری ابرمتن می‌باشد. اینکه معنای این ترجمه چیست و چرا اینقدر عجیب است، مهم نیست. مهم این است که با کاربرد کلی آن آشنا شویم و بتوانیم با آن سایت طراحی کنیم.
قرار است کاملا عملی و کاربردی پیش بریم. پس این تئوری‌های بی‌ارزش که معنای آن چیست، در چه سالی اختراع شده، در چه سال‌هایی دچار تغییر شده و… را فراموش میکنیم و فقط درباره‌ی نکات عملی و کاربردی صحبت میکنیم.

بیشتر بدانید:
قسمت دوم: ساخت فروشگاه اینترنتی ساده با HTML-CSS-PHP-MySQL

 

آیا HTML یک زبان برنامه نویسی است؟

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

تگ چیست؟

با تگ‌ها در ادامه بیشتر آشنا خواهیم شد. اما بصورت کلی می‌توانیم بگوییم که تگ‌ها، ابزار کار HTML هستند و HTML با استفاده از تگ‌ها، اقدام به ساخت کلیات و اسکلت یک صفحه وب میکند.

HTML چیست

آیا یادگیری HTML سخت است؟ من میتونم یاد بگیرم؟

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

HTML5 چیست؟

HTML5 آخرین نسخه از HTML است که فقط یک سری امکانات و ویژگی‌های جدید مثل استفاده از صوت، ویدئو و… به آن اضافه شده است. ممکن است اسم آن ترسناک باشد و اینطور به نظر برسد که یادگیری آن باید بسیار مشکل باشد. اما اصلا به این شکل نیست. در ادامه بیشتر درباره‌ی HTML5 صحبت خواهیم کرد.


این آموزش، قسمت ۱ از سری آموزش سریالی HTML و HTML5 بود. برای مشاهده سایر قسمت‌ها میتوانید از لینک های زیر استفاده کنید:

درباره نویسنده

مهدی خسروی

مهدی خسروی

سلام، مهدی خسروی هستم، نویسنده کتاب «دوبار فکر کن، یک بار کد بزن» و مدرس دوره‌های طراحی و برنامه نویسی زنبیل.
همیشه، بزرگ‌ترین موضوعی که من را اذیت میکرد، نبود دوره‌های آموزشی باکیفیت، پروژه‌محور و حرفه‌ای به زبان فارسی بود. همین موضوع باعث شد «زنبیل» متولد شود.
اگر علاقمند به یادگیری هستید، دوره‌های رایگان و ویژه زنبیل را در آدرس xanbil.com/vip از دست ندهید.

۴ نظر

درج نظر

This site uses Akismet to reduce spam. Learn how your comment data is processed.