آموزش html از پایه تا پیشرفته + کاربرد آن در وردپرس
آموزش html( اچ تی ام ال):
برای شروع طراحی سایت همیشه اصطلاحاتی و اسم تکنولوژی هایی رو می شنویم که ابتدا ممکنه برامون گنگ و نامفهوم باشه و بخوایم این تکنولوژی ها رو یاد بگیریم و ندونیم از کجا شروع کنیم. توی این مقاله از سایت کنترل وب میخوایم مفهوم زبان html رو با هم بررسی کنیم و ببینیم که برای آموزش html(اچ تی ام ال) باید از کجا شروع کنیم؟ آیا آموزش html (اچ تی ام ال) نیاز به پیش نیاز خاصی داره ؟ آیا آموزش html به تنهایی میتونه نیاز های طراحی سایت رو پاسخگو باشه ؟ آیا یادگیری html سخته؟ فرق بین html و html5 چیه؟
برای شروع آموزش html بیاین اول بفهمیم که html چیست؟HTML در واقع مخفف عبارت Hyper Text Markup Language به معنی زبان نشانه گذاری ابرمتن هست.
در واقع برای اینکه بفهمیم این زبان چیه و چه کاربردی داره،بیاین با استفاده از یک مثال بفهمیم که این زبان چه کاری انجام میده. فرض کنین که یک وبسایت مثل یه خونه میمونه. برای شروع طراحی این خونه نیاز به این داریم که اول ساختار کلی خونه رو مشخص کنیم؛ مثلا این خونه چند تا اتاق داشته باشه، اتاق ها کجا قرار گرفته باشن،کدوم قسمت از فضای خونه میخواد به آشپزخونه اختصاص پیدا کنه، کدوم قسمت قراره سرویس بهداشتی قرار بگیره؟ درست مشابه این مثال برای شروع طراحی سایت باید اول ساختار کلی یک سایت رو مشخص کنیم. زبان html این کارو براتون انجام میده!
در واقع آموزش زبان html نقطه ورود شما به طراحی سایت هست. به خاطر اینکه برای اینکه بخواین سایتی رو طراحی کنین ابتدا باید ساختار اون رو مشخص کنین.
ساختار html به چه صورتی هست؟
برای آموزش html اول بدونین که این زبان از یکسری برچسب ها(tags) استفاده میکنه که با اون ها میتونین ساختار صفحه رو مشخص کنین. مثلا فرض کنین که میخوایم در قسمتی از سایت پاراگراف قرار بدم.برای اینکار با استفاده از تگ p در html میتونیم با قطعه کد زیر این کارو بکنیم:
در کد بالا اون متنی که میخوایم به عنوان پاراگراف داشته باشیم رو بین دو تا تگ p می نویسیم و به سایت میفهمونیم که در این قسمت از صفحه پاراگرافی با این متن باید قرار بگیره. این یک مثال ساده از کاربرد تگ ها در زبان html بود. بنابراین با استفاده از آموزش تگ ها در آموزش html میتوانیم ساختار صفحات خودمون رو تعیین کنیم!
ایا html یک زبان برنامه نویسی است؟
باید بدونین که html یک زبان برنامه نویسی نیست بلکه یک زبان نشانه گذاریه. زبان های برنامه نویسی زبان هایی هستند که به کمک یک سری دستور العمل ها( مثل عبارات شرطی، حلقه ها و …) به ما امکان دستور دادن به کامپیوتر رو میدن اما در زبان های نشانه گذاری امکان استفاده از این دستورالعمل ها وجود نداره و فقط با یکسری از نشانه گذاری ها( مثل همین تگ ها که مثالش رو دیدیم) میتوانیم المان های مختلف یک صفحه رو داخل صفحه قرار بدیم و ساختار صفحه رو مشخص کنیم.
پیش نیاز های آموزش html :
چون زبان html نقطه ورود به طراحی سایت هست بنابراین برای آموزش html نیاز به هیچ پیش نیاز خاصی ندارین و میتونین همین الان کار آموزش رو شروع کنین.
آیا يادگيری زبان html سخته؟
یادگیری آموزش html به دلیل اینکه یک زبان برنامه نویسی نیست از یادگیری زبان های برنامه نویسی راحت تره و میتونین به راحتی این زبان رو یاد بگیرین.
آیا برای طراحی یک سایت یادگیری html کافی است؟
برای طراحی سایت حتما باید html رو بلد باشین ولی یادگیری html به تنهایی کافی نیست.اگر سایتون رو مثل بدن یک انسان فرض کنین با استفاده از html فقط میتونین اسکلت بندی رو طراحی میکنین و باید به این اسکلت پوست، گوشت و ظاهر بدین که این کار با استفاده از زبان css و زبان برنامه نویسی javascript امکان پذیر هست.
زبان html به فرانت اند مربوطه یا بک اند؟
برای اینکه بفهمیم که این زبان به کدوم بخش مربوط میشه بیاین اول یه توضیحی در مورد فرانت اند و بک اند سایت بدیم. فرض کنیم که یک سایت مثل یه بدن انسانه. بخش هایی مثل اسکلت، استخوان بندی و پوست و گوشت و ظاهر که با اونها تعامل میکنیم(در واقع در بخش کلاینت هستند) قسمت بک اند سایت و قسمت مغز، قسمت بک اند سایته. یعنی در یک سایت قسمت هایی که در سمت کلاینت قرار دارند نقش فرانت اند و قسمت هایی که در سمت سرور قرار دارند نقش بک اند سایت رو بازی میکنند. بنابرین زبان html مربوط به قسمت فرانت اند سایت و در سمت کلاینت است.
تفاوت html با html5 در چیست ؟
احتمالا اسم html5 رو در کنار html شنیدین و براتون سوال پیش اومده که فرق بین html5 و html چیه؟ در واقع Html5 جدیدترین نسخه html است که با اضافه کردن یک سری تگ های و قابلیت ها به html کار طراحان رو راحت تر کرده و همچنین به خاطر سازگاری کامل با css3 و ویژگی های برتری که نسبت به html داره استفاده از اون رو محبوب کرده به طوری که شما اگر از html5 استفاده کنین برای بعضی قسمت های طراحی کار بسیار ساده تری رو دارین. به عنوان مثالی از قابلیت هایی html5 نسبت به html ،برای طراحی و ایجاد یک ویدیو و یا صوت در html باید خیلی وقت صرف کنین و این قابلیت در html وجود نداره اما در html5 با تگ های جدیدی که معرفی شدن به راحتی میتونین این قابلیت های رو ایجاد کنین و وقت و انرژیتون رو هدر ندین.
همچنین با اضافه شدن تگ های معنا دار(semantic tags) به html5 میتونین قسمت های مختلف سایت رو به موتور های جست و جو معرفی کنین و با استفاده درست از اونها در سئو سایت نتیجه بهتری بگیرین.
برای کار با html به سیستم خاصی نیاز داریم؟
برای کار با html به هیچ سیستم خاص و پیشرفته ای نیاز ندارین و با کدنویسی در یک فایل ساده متنی(.txt) و تبدیل اون به .html میتونیم به راحتی با داشتن یک مرورگر فایل مربوطه رو باز کنیم و نتیجه رو مشاهده کنیم.
