آموزش HTML به زبان ساده

معرفی زبان نشانه گذاری HTML:

همانطور که می دانید برای طراحی وب سایت از زبان های نشانه گذاری همچون HTML و CSS استفاده می شود. HTML که مخفف کلمه Hypertext Markup Language است. به کاربران این امکان را می دهد تا قسمت های مختلفی همچون عنوان ها،  پاراگراف ها و لینک ها را به صفحه وب سایت خود اضافه کنند. برخی تصور می کنند که HTML یک زبان برنامه نویسی است. این تصور کاملا غلط است. چرا که شما تنها با HTML می توانید محتوایی که بر روی صفحات وب سایتتان قرار می دهید را سازماندهی کنید. به عبارت دیگر در HTML سعی می کنید که با برخی از حروف یا به اصطلاح تگ ها، اجزا مختلف وب سایتتان را ایجاد کنید. به عنوان مثال شما با استفاده از تگ <p> در ابتدا و انتهای متن پاراگراف وب سایت خود، آن پاراگراف را از عناوین و دیگر ساختارهای محتوای وب سایتتان جدا می کنید.

تاریخچه HTML:

شاید برای شما جالب باشد که بدانید اولین بار HTML توسط یک فیزیکدان سوئیسی با نام تیم برنرز لی معرفی شد. ایده او برای ایجاد HTML یک سیستم ابر متنی مبتنی بر اینترنت بود. در واژه HTML، حرف H که مخفف Hypertext است. در واقع به عبارت متنی گفته می شود که در آن از لینک هایی به عنوان مرجع استفاده شده است. استفاده از لینک در محتوای متنی سبب می شود که بازدیدکنندگان به راحتی بتوانند به متون دیگر وب سایتتان دسترسی داشته باشند. این فیزیکدان سوئیسی اولین نسخه HTML را در سال ۱۹۹۱ به عموم مردم معرفی کرد. اولین نسخه HTML شامل ۱۸ عدد تگ بود. اما امروزه تگ های استفاده شده در زبان نشانه گذاری HTML بیش تر شده و قابلیت های بیش تری برای این زبان به وجود آمده است. بر طبق گفته وب سایت HTML Element Refrence تاکنون بیش از ۱۴۰ تگ برای HTML به وجود آمده است. اگر چه برخی از این تگ ها هم اکنون منسوخ شده اند و مرورگرهای پیشرفته توانایی پشتیبانی آن ها را ندارند، اما با توجه به افزایش محبوبیت این زبان نشانه گذاری، اکنون HTML استاندارد جهانی وب در نظر گرفته می شود.

HTML چگونه کار می کند؟

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

ارتباط بین HTML، CSS و Javascript به چه صورت است؟

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

آموزش HTML:

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

سرفصل هایی که قراره در پارت ۱ یاد بگیرید به شرح زیر است:

۱- خوش آمدید به دوره آموزش HTML:

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

۲- نحوه استفاده از فایل های تمرینی:

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

۳- چالش ها و تمرین هایی که قرار است در این دوره فرا بگیرد:

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

۴- اهمیت HTML و اینکه چرا باید HTML را یاد بگیریم:

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

۵- یادیگری اصول اولیه HTML:

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

۶- جنبه های فعلی HTML:

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

۷- منابع تدریس این دوره:

در این قسمت مدرس از منابع تدریس این دوره به شما می گوید. و این منابع را به صورت کامل برای شما معرفی می کند.

۸- معرفی Code Editor های مختلف:

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

۹- معرفی عوامل دخیل در فایل HTML:

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

۱۰- تعریف Docype:

در این قسمت مدرس تعریفی از Doctype و ارتباط آن با HTML را به شما می گوید.

سرفصل هایی که قراره در پارت ۲ یاد بگیرید به شرح زیر است:

۱- قسمت Head سند ها:

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

۲-  قسمت Body سند ها :

در این قسمت مدرس از قسمت بدنه سند های شما در زبان نشانه گذاری HTML می گوید. همچنین مدرس به شما می گوید چه قسمت هایی از محتوای وب سایتتان در قسمت Body یک سند قرار می گیرد.

۳- بررسی مدل های محتوا در HTML:

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

۴- نحوه قالب بندی محتوا در HTML:

در این قسمت مدرس از عناصری به شما می گوید که می توانند نقش موثری در قالب بندی محتوا، در محیط HTML داشته باشند.

۵- استفاده از عنواین در قالب بندی محتوا:

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

۶- چگونگی قالب بندی پاراگراف ها:

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

۷- کنترل کردن خطوط شکسته:

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

۸- چگونگی تاکید بر روی یک محتوا:

در این قسمت مدرس به شما نشان می دهد که چگونه می توانید در هنگام قالب بندی اسناد، بر روی یک محتوای خاص تاکید کنید.

۹- چگونگی نمایش کارکتر های اختصاصی: 

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

۱۰- کنترل فضای سفید در HTML:

در این قسمت مدرس به شما نشان می دهد که چگونه می توانید فضای سفید HTML را کنترل کنید.

۱۱- نحوه درج تصاویر:

در این قسمت مدرس نحوه درج تصاویر که یکی از مهمترین نکات در نوشتن HTML است را به شما آموزش می دهد.

۱۲- چالش های قالب بندی محتوا در صفحه:

در این قسمت مدرس از چالش هایی که در قالب بندی محتوا درون صفحه وجود دارد به شما می گوید.

۱۳- راه حل های قالب بندی محتوا در صفحه:

در این قسمت مدرس سعی می کند تا به چالش هایی که در قسمت قبلی مطرح کرده است، پاسخ بدهد.

۱۴- ساختار های ارزشمند در HTML:

در این قسمت مدرس از عناصر بخش بندی در HTML به شما می گوید. همچنین مدرس نحوه ساخت صحیح صفحات را به شما آموزش می دهد.

۱۵- نحوه کنترل طرح کلی اسناد:

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

سرفصل هایی که قراره در پارت ۳ یاد بگیرید به شرح زیر است:

۱- آموزش تگ nav:

مدرس در این درس سعی می کند تا به شما تگ ها و عناصر nav را به شما آموزش دهد.

۲- آموزش تگ article:

مدرس در این درس سعی می کند تا به شما تگ ها و عناصر article را به شما آموزش دهد.

۳- آموزش تگ section:

مدرس در این درس سعی می کند تا به شما تگ ها و عناصر section را به شما آموزش دهد.

۴- آموزش تگ aside:

مدرس در این درس سعی می کند تا به شما تگ ها و عناصر aside را به شما آموزش دهد.

۵- آموزش تگ div:

مدرس در این درس سعی می کند تا به شما تگ ها و عناصر div را به شما آموزش دهد.

۶- آموزش تگ های semantic:

مدرس در این دوره سعی می کند تا شما را با دیگر تگ های سمانتیک موجود در HTML آشنا کند.

۷- آموزش استفاده از قوانین WAI-ARIA:

مدرس در این قسمت قوانین WAI  یا ARIA را به شما آموزش می دهد. این قوانین شامل توصیه هایی برای اجرای دسترسی بیشتر در سایت ها و برنامه هاست.

۸- نشان دادن چالش ها در نحوه اضافه کردن محتوای sectioning:

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

۹- نشان دادن راه حل نحوه اضافه کردن محتوای sectioning:

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

۱۰- آموزش نحوه جستجو تگ anchor:

مدرس در این قسمت به شما از نحوه ایجاد لینک و نحوه جستجو تگ anchor به شما می گوید.

۱۱- آموزش نحوه ارتباط دادن صفحات درون وب سایت شما:

در این درس مدرس نحوه ارتباط دادن صفحات که یکی از کاربرد های تگ یا عنصر anchor است را به شما نشان می دهد.

۱۲- آموزش نحوه ارتباط دادن صفحات خارجی:

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

۱۳- آموزش نحوه ارتباط دادن منابع قابل دانلود:

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

۱۴- آموزش نحوه ارتباط با قسمت هایی از صفحه:

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

۱۵- چالش های خلق لینک:

در این درس مدرس از چالش هایی به شما توضیح می دهد. که ممکن است در طی ایجاد یک لینک با آن ها روبرو شوید.

سرفصل هایی که قراره در پارت ۴ یاد بگیرید به شرح زیر است:

۱- راه حل های خلق لینک:

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

۲- لیست های از پیش تعریف نشده:

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

۳- لیست های از پیش تعریف شده:

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

۴- لیست های معنی دار:

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

۵- چالش های ایجاد لیست:

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

۶- راه حل برای ایجاد لیست:

در این قسمت مدرس سعی می کند تا پاسخ چالش های مطرح شده در قسمت قبلی را بدهد.

۷- HTML و CSS:

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

۸- ایجاد استایل های inline:

در این قسمت مدرس سعی می کند تا نحوه ایجاد استایل های inline را به شما توضیح دهد.

۹- آموزش تگ های استایل:

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

۱۰- کنترل کردن توپوگرافی:

در این قسمت مدرس یکی از کاربرد های CSS، یعنی کنترل کردن توپوگرافی را به شما آموزش می دهد.

۱۱- اضافه کردن رنگ:

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

۱۲- استایل های Externalizing:

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

۱۳- چالش در کنترل استایل به صورت پایه:

در این قسمت مدرس سعی می کند شما را با چالش هایی که ممکن است در کنترل کردن استایل به صورت پایه رخ می دهد، آشنا کند.

۱۴- راه حل کنترل استایل به صورت پایه:

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

۱۵- HTML و JavaScript:

در این قسمت مدرس از ارتباط HTML با JavaScript به شما می گوید.

سرفصل هایی که قراره در پارت ۵ یاد بگیرید به شرح زیر است:

۱- آموزش تگ Script:

در این قسمت مدرس به شما نشان می دهد. که چگونه می توانید عناصر script را به سند خود اضافه کنید.

۲- نوشتار عملکردی:

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

۳- استفاده از DOM:

در این قسمت مدرس DOM که یک روش استاندارد برای اجرای اسناد است را به شما معرفی می کند.

۴- شنیدن روادید:

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

۵- پاسخ به روادید:

در این قسمت مدرس از چگونگیه پاسخ به روادید در HTML به شما می گوید.

۶- آموزش Externalizing JavaScript:

در این قسمت مدرس Externalizing در JavaScript را به طور کامل به شما آموزش می دهد.

۷- قدم های بعدی:

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