آموزش طراحی با HTML5 و CSS3
کارآموزانی که قصد ورود به بازار کار در زمینه طراحی وب (Front-End) را داشته باشند لازم است با چند تکنولوژی و قابلیت های طراحی آشنا شوند.
اولین گام آموزش طراحی مقدماتی صفحات وب است که با HTML4 و css2 بطور کامل آشنا خواهند شد. سپس طراحی با HTML5 و CSS3 را در دوره پیشرفته می توانند سپری کنند.
HTML5 چیست؟
HTML5نسخه جدید تر و سازمان یافته تر html است که در سال 1997 ساخته شده است. html5 با هدف پشتیبانی از جدیدترین فناوری های چندرسانی ای و همچنین ایجاد ساختار مشخص برای صفحات وب ایجاد شد که ساختار آن براحتی توسط مرورگرهای وب و همجنین خزنده های گوگل قابل فهم باشد. بطور کلی و اساسی تفاوتی بین html5 و html وجود ندارد و صرفا یک سری تگ های جدید و معنا دار در html5 اضافه شده که ساختار صفحه وب را سازمان یافته تر میکند.
طراحی سایت با html و HTML5 چه تفاوتی دارد؟
همانطور که بالاتر هم اشاره کردیم در HTML5 کی سری تگ های معنادار به html اضافه شده که توسط این تگ ها میتوانیم بخش های مختلف وبسایت را مشخص کنیم بطور مثال قبلا در html برای ایجاد بخش های مختلف وبسایت از تگ div استفاده میکردیم اما در HTML5 هر بخش از وبسایت تگ مخصوص خودش را دارد بعنوان مثال تگ header برای ایجاد سربرگ سایت استفاده میشود یا nav برای ایجاد منوهای سایت است یا تگ footer پابرگ سایت را تشکیل میدهد.
آیا برای طراحی سایت حتما باید از تگ های HTML5 استفاده کرد؟
خیر! شما میتوانید مثل ثابق برای همه بخش های وبسایت از تگ div استفاده کنید و وبسایت خودتان را بدون هیچ مشکلی طراحی کنید اما چرا وقتی تکنولوژی جدید تر و آسان تری ارائه شده از آن استفاده نکنیم؟ ضمنا استفاده از تگ های معنادار HTML5 مزیت هایی دارد که در ادامه آموزش html به آن میپردازیم
استفاده از تگ های HTML5 چه مزیتی دارد؟
یکی از مهم ترین مزیت های استفاده از تگ های معنادار HTML5 این است که خزنده های گوگل راحت تر میتوانند ساختار صفحه سایت شما را ایندکس کنند و این موضوع روی سئوی سایت شما تاثیر زیادی دارد مثلا خزنده های گوگل وقتی به تگ nav میرسند متوجه میشوند که این بخش منوهای سایت شما قرار دارد و به محتوای آن اهمیت میدهند یا مثلا وقتی به article میرسند متوجه میشوند این بخش برای مقالات وبسایت شماست در حقیقت هر بخش از وبسایت شما تشخیص میدهند و ارزش گذاری میکنند بنابراین اینطور میتوان گفت که امروزه وبسایت هایی که با HTML5 طراحی نشده باشند یک امتیاز منفی از سمت گوگل دریافت میکنند.
اول html را یادبگیرم یا html5 ؟
html و html5 از هم مجزا نیستند در واقع شما باید یک سری تگ هایی را بشناسید و در طراحی سایت از آن استفاده کنید. حدود 110 تگ در html وجود دارد که حدود 30 تای آن جدید هستند یعنی در HTML5 عرضه شدند. بنابراین شما هم html و هم html5 را باید یادبگیرید البته تمام تگ های موجود را نیاز نیست حفظ باشید بلکه فقط تعداد محدودی از آنها را استفاده میکنید.
CSS چیست؟
CSS کوتاه شده یا مخفف عبارت (Cascading Style Sheets) می باشد که قابلیت صفحه آرایی؛ استایل دهی و زیبا سازی صفحات وب را برای طراحان سایت فراهم می سازد. در واقع ساختار یک صفحه با استفاده از HTML تعیین می شود و سپس با به کار بردن کدهایی دیگر به این ساختار و چیدمان استایل داده می شود. تمامی رنگ ها، ابعاد و اندازه ها، حاشیه ها، مکان قرارگیری، فونت ها و سایر خصوصیات اجزای یک صفحه ی وب، با استفاده از CSS تعیین خواهند شد.
Css3 چیست؟
ویژگی هایی بی نظیر مانند سایه دار کردن متن، گرد کردن لبه ها، استفاده از چند تصویر پس زمینه به عنوان بک گراند، ایجاد افکتهای حرکتی بر روی عناصر صفحه و دنیایی از امکانات جذاب از قابلیت های Css3 می باشد.
برای کنترل آرایش و استایل صفحه به کار می رود.
* آخرین نسخه سی اس اس می باشد.
* با نسخه های قبل خود سازگاری کامل دارد .
* لود سریع صفحه با Css3 به جای استفاده از jQuery و تصاویر فتوشاپی، یک مزیت Css3 می باشد .
* این امکان را به شما می دهد که در صفحات خود از فونت فارسی استفاده نماید
اهمیت یادگیری CSS چیست؟
یک صفحه وب به طور کلی دارای دو بخش Client Side و Server Side است. بخش Client Side را میتوان به سه بخش اساسی تفکیک کرد.
اول: ساختار صفحه است که توسط HTML ساخته میشود.
دوم: شکل، شمایل و رنگ و لعاب صفحه است که در CSS تعیین میشود.
سوم: منطق برنامه در سمت کلاینت است که با زبان‌های اسکریپتی مانند JavaScript مشخص و مطابق با این سه‌بخش لزوم یادگیری CSS برای طراحی وب مشخص میشود.
زبان برنامه‌نویسی HTML به خوبی می‌‌تواند اجزای صفحه را ایجاد کند اما ضعف اصلی زبان HTML عدم توانایی ایجاد رابط کاربری است. برای ایجاد رابط کاربری برای صفحات HTML زبان برنامه‌نویسی CSS (Cascade Style Sheets) ایجاد گردید. این زبان مکملی برای HTML است و سعی در پر کردن خلاها و برطرف کردن نقاط ضعف زبان HTML دارد. CSS شما را قادر می‌‌سازد تا قالب و استایل صفحات وبسایت خود را یک بار طراحی کرده و به دفعات استفاده کنید.