پیش گفتار

بطور کلی هر چیزی که در ظاهر یک وبسایت میبینید و قابل دیدن هست با استفاده از کدنویسی html، css ایجاد شده است . پس شما برای طراحی یک وبسایت زیبا و کاربرپسند در ابتدی کار نیاز به  یادگیریHTML ، CSS   دارید. چنانچه در فکر ورودی قدرتمند به حوزه برنامه نویسی و طراحی وب هستید یادگیری html و css پایه کار است.

HTML چیست؟

 

اگر تازه وارد دنیای طراحی یا برنامه نویسی وب‌سایت شده باشید، برای یک‌ بار هم که شده این سوال را می‌پرسید! HTML یکی از پایه‌ای ترین زبان‌هاست که برای طراحی صفحات وب به آن نیاز داریم. اگر بخواهیم در یک عبارت html را معنا کنیم عبارتی بهتر از “اسکلت وب” نمی‌توان به آن نسبت داد!

 

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

 

HTML چیست؟

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

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

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

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

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

تاریخچه html

زبان HTML برای تبادل اطلاعات بصورت رمزنگاری شده در دنیای اینترنت استفاده می‌شود. در سال 1989 میلادی تیم برنرز-لی  (Tim Berners-Lee) با انتشار زبان HTML، شبکه جهانی وب را اختراع می‌کند. جالب است بدانید که شبکه جهانی وب زندگی خود را در CERN، یک آزمایشگاه فیزیک ذرات در ژنو آغاز کرد. تحقیقات فیزیک ذرات اغلب شامل همکاری بین موسسات از سراسر جهان است. CERN یک مکان ملاقات برای فیزیک‌دانان در سراسر جهان است که در آن به تبادل ایده‌ها، تفکرات و دیدگاه‌های خود می‌پردازند. ایده این تفکر از آنجایی نشئت گرفت که تمامی دانشمندان فیزیک در این آزمایشگاه جمع می‌شدند تا با یکدیگر به تبادل اطلاعات بپردازند.

 

در این میان شخصی به نام «برنرز- لی» تصمیم گرفت که راه حلی را ارائه دهد تا بتوانند از ایده‌های  تمامی فیزیک‌دانان در سراسر دنیا استفاده کنند بدون اینکه نیازی به حضور فیزیکی آنها در آزمایشگاه  باشد. ایده این شخص باعث تحولی در دنیای اینترنت و پیدایش زبان HTML، پروتکل امنیتی مانند HTTP و بوجود آمدن آدرس‌های اینترنتی یا URL شد.

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

بازه زمانی نسخه های HTML

•   HTML 2.0  : در تاریخ ۲۴ نوامبر ۱۹۹۵ به عنوان RFC 1866 منتشر شد.
• HTML 3.2 : در تاریخ ۱۴ ژونرای ۱۹۹۷ به عنوان W3C Recommendation منتشر شد.
• HTML 4.0 : در تاریخ ۱۸ دسامبر به عنوان W3C Recommendation انتشار یافت.
• در تاریخ ۲۴ آپریل ۱۹۹۸ با ویرایش های جزئی منتشر شد  : (updated) HTML 4.0
• HTML 4.01 :  در تاریخ ۲۴ دسامبر ۱۹۹۹ انتشار یافت.
• XHTML : در می سال ۲۰۰۰ انتشار یافت.
• HTML5 : در تاریخ ۲۸ اکتبر ۲۰۱۴ ، منتشرشد.
• HTML 5.1 : در تاریخ ۱ نوامبر ۲۰۱۶ انتشار یافت.
• HTML 5.2 :  در تاریخ ۱۴ دسامبر ۲۰۱۷ انتشار یافت.

 

معرفی نسخه های HTML:

• HTML 1.0

اولین نسخه از HTML که در سال 1991 به بازار معرفی شد و در قالب نوشتاری و ارائه مطالب، بسیار محدود بود. در این نسخه تنها 18 برچسب HTML وجود داشت.

• HTML 2.0

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

• HTML 3.2

به منظور استاندارد شدن زبان‌های نرم‌افزاری لازم برای وب، کنسرسیوم جهانی وب به اختصار W3C) )   در سال 1994 تاسیس شد. ریاست این شرکت به دست برنز-لی است. اولین کار آنها به نام WILBUR بود که بعدها به عنوان HTML 3.2 شناخته شد. این نسخه در ماه ژانویه 1997 همرا با CSS ارائه شد. معرفی HTML با CSS یک انقلاب بزرگ در دنیای HTML به شمار رفت تاجایی که امروز تمام مرورگرها از آن به طور کامل پشتیبانی می‌کنند.

HTML 4.01:

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

• XHTML

W3C در اوایل قرن بیستم نسخه XHTML را به بازار معرفی کرد. W3C در تاریخ 26 ژانویه 2000 آن را به عنوان استاندارد مشترک با HTML 4.01 معرفی می‌کند. در واقع XHTML یک زبان جداگانه است که به شکل فرمول‌بندی شده HTML 4.01 خود را نشان می‌دهد. با ظهور این نسخه از HTML دست طراحان وب به مراتب بازتر شد تا بتوانند وب سایت های بهتری به نمایش بگذارند.  این استاندارد تفاوت‌های قابل توجهی نسبت به نگارش‌های قبلی داشت. مهم‌ترین تفاوت سخت‌گیرانه بودن XHTML در مقایسه به HTML است و تمامی محدودیت‌های ایجاد شده با ورود XHTML باعث شد تا توجه همگانی را به آن کاهش یابد و تمایل به استفاده از استاندارد جدید و منعطف HTML5 افزایش یابد.

• HTML5

در سال 2014 آخرین نسخه HTML، با نام HTML5 به دنیای وب معرفی شد که همچنان این نسخه در حال توسعه می‌باشد. عناصر و ویژگی‌های به کار رفته در این نسخه بی‌نظیر است. یکی از ویژگی‌های مهم  HTML5 مشخص نمودن نوع محتوا است که می‌تواند تحولی عظیم برای موتورهای جستجو و ایندکس شدن مطالب باشد. برخی از عناصر جدید به کار رفته در HTML5 عبارت است‌از:

• عناصر معنایی: <header> ،<footer> ،<article> و <section>
• عناصر گرافیکی: <svg> و <canvas>
• عناصر چند رسانه‌ای: <audio> و <video>

 

—

 

آموزش html و css اولین قدم برای یادگیری طراحی سایت است. اگر در فکر ورودی قدرتمند به حوزه برنامه نویسی و طراحی وب هستید آموزش html و css پایه کار است. در این دوره از صفر کار شروع میکنیم و آموزش html و css را از ابتدا تا مباحث پیشرفته براحتی یادمیگیرید. این دوره جدید تولید شده و فعلا بصورت رایگان ارائه میشود.

آموزش html و css به زبان ساده

کاربرد html css در طراحی سایت : بطور کلی هر چیزی که در ظاهر یک وبسایت میبینید و قابل دیدن هست با استفاده از کدنویسی html css ایجاد شده. پس شما برای طراحی یک وبسایت زیبا و کاربرپسند در ابتدی کار نیاز به این دو بزرگوار دارید.

 

نقش html و css در طراحی سایت :

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

چگونه html را یاد بگیرم؟

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

یادگیری html به تنهایی به دلیل اینکه نتیجه و محصولی ندارد بسیار سخت میشود و متاسفانه آموزش های زیادی هم در سطح نت وجود دارد که اینها را مجزا آموزش داده اند که این باعث گمراهی و دلزدگی افراد تازه کار از یادگیری این موضوع مهم میشود. اما اگر آموزش html و css را باهم یادبگیرید چون در حین کار پروژه های کاربردی و نتایج ملموس تری دارید هم از یادگیری لذت میبرید و هم بصورت کاملا اصولی و استاندارد و در زمان بسیار کمتری میتوانید به تخصص برسید این حالت بهترین آموزش html است.

 

HTML5 چیست؟

HTML5 نسخه جدید تر و سازمان یافته تر html است که در سال ۱۹۹۷ ساخته شده است. html5 با هدف پشتیبانی از جدیدترین فناوری های چندرسانی ای و همچنین ایجاد ساختار مشخص برای صفحات وب ایجاد شد که ساختار آن براحتی توسط مرورگرهای وب و همجنین خزنده های گوگل قابل فهم باشد. بطور کلی و اساسی تفاوتی بین html5 و html وجود ندارد و صرفا یک سری تگ های جدید و معنا دار در html5 اضافه شده که ساختار صفحه وب را سازمان یافته تر میکند.

طراحی سایت با html و HTML5 چه تفاوتی دارد؟

همانطور که بالاتر هم اشاره کردیم در HTML5 کی سری تگ های معنادار به html اضافه شده که توسط این تگ ها میتوانیم بخش های مختلف وبسایت را مشخص کنیم بطور مثال قبلا در html برای ایجاد بخش های مختلف وبسایت از تگ div استفاده میکردیم اما در HTML5 هر بخش از وبسایت تگ مخصوص خودش را دارد بعنوان مثال تگ header برای ایجاد سربرگ سایت استفاده میشود یا nav برای ایجاد منوهای سایت است یا تگ footer پابرگ سایت را تشکیل میدهد.

آیا برای طراحی سایت حتما باید از تگ های HTML5 استفاده کرد؟

خیر! شما میتوانید مثل ثابق برای همه بخش های وبسایت از تگ div استفاده کنید و وبسایت خودتان را بدون هیچ مشکلی طراحی کنید اما چرا وقتی تکنولوژی جدید تر و آسان تری ارائه شده از آن استفاده نکنیم؟ ضمنا استفاده از تگ های معنادار HTML5 مزیت هایی دارد که در ادامه آموزش html به آن میپردازیم

استفاده از تگ های HTML5 چه مزیتی دارد؟

یکی از مهم ترین مزیت های استفاده از تگ های معنادار HTML5 این است که خزنده های گوگل راحت تر میتوانند ساختار صفحه سایت شما را ایندکس کنند و این موضوع روی سئوی سایت شما تاثیر زیادی دارد مثلا خزنده های گوگل وقتی به تگ nav میرسند متوجه میشوند که این بخش منوهای سایت شما قرار دارد و به محتوای آن اهمیت میدهند یا مثلا وقتی به article میرسند متوجه میشوند این بخش برای مقالات وبسایت شماست در حقیقت هر بخش از وبسایت شما تشخیص میدهند و ارزش گذاری میکنند بنابراین اینطور میتوان گفت که امروزه وبسایت هایی که با HTML5 طراحی نشده باشند یک امتیاز منفی از سمت گوگل دریافت میکنند.