آموزش HTML به زبان ساده-قسمت اول:HTML چیست؟

نویسنده : ادمین زمان انتشار : دوشنبه ، ۱۸ شهریور ۹۸

مقدمه

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

HTML چیست؟

عبارت HTML مخفف کلمات Hyper Text Markup Language است که به معنای “زبان نشانه گذاری فرامتن” می‌باشد. از این عبارات متوجه شدیم که HTML یک سند متنی است که با استفاده از نشانه‌هایی به نام Tag به طراحی صفحات وب می‌پردازد. عبارت Tag به معنی “برچسب” است. برچسب های HTML انواع مختلفی دارد که هر کدام از آنها معنی خاصی دارند. این برچسب ها در مرورگر شما ترجمه و به یک صفحه وب تبدیل می‌شوند. در واقع HTML یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاری است که به تنظیم ساختار اصلی یک صفحه وب می‌پردازد. اما باید بدانید که بخش طراحی و شکل دهی عناصر موجود در فایل HTML به عهده فناوری CSS می‌باشد. به عنوان مثال اگر شما بخواهید پس زمینه یک متن در HTML را به رنگ آبی، قرمز یا هر رنگ دیگری تبدیل کنید باید از CSS استفاده کنید. به این منظور پس از گذراندن دوره HTML می‌توانید به آموزش اختصاصی CSS در سایت Bezafeh.ir بپردازید.

انواع وبسایت

به هر صفحه HTML یک سایت (Site) گفته می‌شود. اما اگر تعداد بسیار زیادی سایت را در کنار همدیگر قرار دهیم به مجموعه این سایت ها یک وب سایت (WebSite) گفته می‌شود. کلمه Web به معنی “شبکه” است و به این ترتیب می‌توانیم وب سایت را برابر شبکه ای از سایت ها قرار دهیم.

وب سایت ها به طور کلی به دو دسته ایستا (Static) و پویا (Dinamic) تقسیم بندی می‌شوند. وبسایت های ایستا یا استاتیک باید توسط برنامه نویس خود مدیریت شوند. زیرا برای قرار دادن هر مطلب باید رشته ای از کد نویسی ها انجام شود. به عنوان مثال اگر وبسایت ما ایستا باشد برای اینکه بتوانیم یک متن آموزشی در فضای وب قرار دهیم باید یک صفحه را کد نویسی کنیم سپس متن خود را درون آن قرار دهیم که کار بسیار دشواری است.

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

باید بدانید که تمامی مرورگرها تنها زبان های CSS ،HTML وJavaScript را می‌شناسند. و زبان هایی همچون PHP و ASP.net در نهایت باید به HTML تبدیل شوند. پس اساس کار طراحی صفحات وب HTML است. زبان های CSS و JavaScript نیز برای زیبا سازی صفحات وب طراحی شده اند و در واقع دو یار کمکی برای زبان HTML هستند.

ساختار برچسب ها در HTML

گفتیم که فایل یا سند HTML با استفاده از Tagها نشانه گذاری می‌شود. هر برچسب یا Tag باید بین یک علامت کوچکتر و بزرگتر قرار بگیرد که ساختار کلی آن به شکل <Tag> است. همه ی تگ ها به جز مواردی خاص، دارای یک تگ باز و یک تگ بسته هستند که ساختار تگ باز به شکل <Tag> و ساختار تگ بسته به شکل <Tag/> است. همانطور که دیدید اختلاف تگ باز و تگ بسته در یک اسلش ( / ) است. هر تگ به عنوان یک عنصر شناخته می‌شود و ساختار کلی آنها به صورت درختی یا “تو در تو” است به این معنی که بین هر تگ باز و بسته می‌توان تگ ها یا عناصر دیگری قرار داد. به این منظورعنصر یا تگ اصلی را “عنصر والد” و عناصر یا تگ های درونی را “عنصر فرزند” می‌خوانند.

نکته: فاصله میان تگ ها هیچ تاثیری بر کد ها ندارد. یعنی اگر میان هر تگ از دکمه های Space و Enter استفاده کنید این فاصله ها در مرورگر ترجمه نمی‌شوند و نهایتا بی تاثیر می‌مانند.

برنامه های لازم برای ایجاد یا ویرایش فایل HTML

در قسمت های قبلی اشاره کردیم که سند HTML یک سند متنی است. از این رو با استفاده از هر ویرایشگر متنی ساده میتوان به ایجاد یا ویرایش فایل های HTML پرداخت. ساده ترین برنامه موجود برای ایجاد فایل HTML، برنامه NotePad است که به طور پیش فرض روی سیستم های ویندوزی نصب شده است. همچنین از برنامه‌ی ++NotePad که مدل پیشرفته تر NotePad است نیز می‌توان استفاده کرد. اما برنامه های قدرتمندتری که مخصوص کد نویسی هستند نیز وجود دارند که از میان آنها برنامه Adobe DreamWeaver گزینه بسیار مناسبی است زیرا همزمان با کد نویسی می‌توانید نتیجه بصری آن را نیز مشاهده کنید.

نکته: در سیستم عامل مک برنامه TextEdit همان کارایی NotePad در ویندوز را دارد. همچنین برنامه Adobe DreamWeaver برای سیستم عامل مک نیز وجود دارد.