HTML و CSS
اگر شما هم طراح وب باشید و به این مقوله علاقه داشته باشید و فعالیت در این زمینه و یادگیری بیشتر یکی از اهداف شما باشد، از جمله بدیهی ترین اطلاعاتی که لازم است به آن تسلط پیدا کنید؛ مفاهیم مرتبط با اچ تی ام ال (HTML) و سی اس اس (CSS) می باشد. به عبارتی دانش بنیادی ای که هر شخص طراح آموخته و در کار خود به کار گرفته است، همین زبان نشانه گذاری متن می باشد که از طریق آن می توانید کدهایی را ایجاد کنید که هر یک منجر به نمایش یک سری از ویژگی ها در صفحات وب خواهند شد. دنیای طراحی وب دنیایی است شلوغ و پر رقابت ، بنابراین اگر واقعا قصد دارید به جایی برسید؛ باید تلاش کنید و بیشتر بیاموزید و نمونه کارهای بیشتری را طراحی نمایید. امروزه، با توجه به تغییراتی که در سبک بازاریابی و تبلیغات حاصل شده است ؛ طراحی سایت به عنوان یک مهارت جهانی در نظر گرفته می شود. شما در هر کشوری از دنیا که زندگی کنید با تسلط بر web design می تواند درآمد زایی داشته باشید اما کسی موفق است که اصولی و حرفه ای می آموزد و در نهایت حرفه ای نیز کار می کند. Html و css از مهمترین استانداردهای تصویب شده وب می باشند و برای ورود به این شغل، لازم است تا با مفاهیم مرتبط با آن ها آشنا شوید که در ادامه ی این مطلب به اختصار به معرفی آنها پرداخته شده است.
HTML
اچ تی ام ال برگرفته از حروف اول عبارت HyperTextMarkupLanguage می باشد و به عنوان یک زبان نشانه گذاری متن ( زبان استاندارد صفحات وب ) می باشد. معمولا در یک صفحه ی موجود بر روی وب مجموعه ای از متن ها، عکس ها، بخش بندی های مختلف وجود دارد، به کمک تگ ها و کدهایی که HTML در اختیارتان قرار می دهد، می توانید یک ساختار مشخص از اطلاعات را در این قسمت ها به وجود آورید و در معرض نمایش بازدیدکنندگان قرار بدهید. توجه داشته باشید که هر تگ در زبان اچ تی ام ال معنا و مفهوم خاص خود را دارد. صفحاتی که توسط این زبان ساخته می شوند؛ متشکل از markup tag ها و دارای پسوند htm و یا html می باشند. این صفحات را می توان در برنامه های مختلف ادیتور مثل Notepad, Visual Stadio, dearm weaver و …. ویرایش کرد و تغییر داد. در زبان html بخش ها و کدهای مختلف ( سمت سرور و سمت کلاینت ) توسط ” تگ ” از هم جدا می شوند و همین تگ ها ابزاری برای چگونگی نمایش دادن اطلاعات در صفحات وب و توسط مرورگرها هستند. در واقع تگ ها اشکال مختلف نمایش عناصر مختلف یک صفحه ی وب را تعیین می نمایند.
آیا HTML یک زبان برنامه نویسی است؟
خیر ،اما به عنوان یک رابط به راحتی می تواند با زبان های پیشرفته ی برنامه نویسی مثل asp و php ارتباط برقرار نماید و جالب است بدانید که تمام برنامه های مرورگری که برای مشاهده ی صفحات وب به وجود امده اند از طریق اچ تی ام ال قادر به درک کدهای زبان های برنامه نویسی شده هستند، یعنی این کدها کامپایل شده و به کد قابل فهم برای مرورگرها تبدیل می شوند و در پایان توسط برنامه ی web browser برای کاربران به نمایش در می ایند. یادگیری Html اصلا سخت نیست و با توجه به مجموعه کدهای مستندی که از آن وجود دارد، می توانید با صرف وقت و تمرین کافی، به آن مسلط شوید و به راحتی بخش ها و المنت های مختلف یک صفحه ی اینترنتی را طراحی نمایید. برخی از تگ های اچ تی ام ال مرتبط با موضوع بهینه سازی یک صفحه ی وب برای موتورهای جستجو هستند و به صورت مستقیم بر seo تسایت تاثیر می گذارند، برای مثال : تگ title, description و تمامی تگ های مرتبط با ویرایش و تغییرات متن نظیر بولد یا ایتالیک کردن، لینک دادن به صفحات دیگر و … بر این اساس یک طراح وب سایت که به HTML و CSS مسلط باشد، می تواند با اطلاع از انواع تگ ها و نحوه ی استایل دهی، یک قالب سایت را از ابتدا کدنویسی کند به گونه ای که فاقد کدهای مخرب و خطا باشد و اصول سئو نیز در آن رعایت شده باشد. قطعا طراحانی که به طراحی تمپلیت تسلط دارند، موفق تر از کسانی هستند که از قالب ها و کدهای آماده استفاده می کنند.
تگ
HTML به کمک برچسب ها (Tags) عناصر مختلف را کنار هم میچیند و هر کاربر با توجه به نیاز خود از آنها استفاده میکند. شاید بپرسید تگ چیست؟ تگ ها عناصری هستند که وظایف گوناگونی دارند و با فراخوانی هر کدام کارشان شروع شده و با بستن تگ کارشان تمام میشود. مثلا برای نوشتن پاراگرافها در زبان HTML از تگ p استفاده میشود و زمانی که پاراگراف تمام شده، تگ هم بسته میشود. همچنین برای نشان دادن لینک ها از تگ a استفاده در صفحات وب استفاده میشود.
تگ های HTML در حقیقت همان دستورالعمل های این زبان هستند که به مرورگر میگویند صفحه مورد نظر از چه عناصری تشکیل شده است. هر کدام از این Tag معنا و مفهوم خاصی دارند و به شما امکاناتی مانند تغییر شکل ظاهری متنها، ساخت لیستهای مختلف و به هم متصل کردن صفحات را میدهند. همچنین از آن ها برای کار با صدا، تصویر و غیره استفاده میشود.
مهمترین تگ های HTML
تنوع تگ ها در HTML بسیار بالاست و این تگ ها در نسخههای جدید در حال پیشرفت و بهبود هستند. بعضی از آنها محبوبیت چندانی نداشته و به ندرت توسط طراحان وب استفاده میشوند. مثلا تگ meter که برای اندازهگیری است به ندرت توسط طراحان سایت استفاده می شود. از طرفی دیگر تگ
که برای تقسیم کردن صفحه به بخشهای مختلف به کار می رود، تقریبا بخش جدا نشدنی در طراحی سایت می باشد. پس اگر قصد دارید بر این زبان مسلط شوید، به شما توصیه می کنیم که به بررسی و مطالعه تگ های مختلف HTML بپردازید.
لیست کامل تگ های HTML
برنامه نویسی سر و کله زدن با کد، تمرین و تمرین است. پس باید این مسیر را بدون میانبر طی کنید و به دنبال تقویت مهارت های خود باشید. خواندن لیست کامل تگ های HTML به تنهایی به هیچ دردی نمیخورد. زیرا پس از شناخت تگ های HTML شما باید تک تک آن ها را تست و با یکدیگر ترکیب کنید تا ببنید چطور در کنار هم کار میکنند. پس زمانی که تازه کار خود را شروع کردهاید، لیست تگ های HTML را کنار خود داشته باشید تا بتوانید آن ها را به خاطر بسپارید و به صورت کاربردی به کار بگیرید.
دسترسی به لیست کامل تگ های HTML
مزایا و معایب زبان HTML
HTML در کنار css و js هسته اصلی وب را تشکیل میدهد و یک زبان بسیار مهم در دنیای وب حساب میشود. این زبان مزیتها و محدودیتهایی هم دارد که در ادامه به آنها اشاره می کنیم و میبینیم دلیل اصلی ماندگاری HTML چیست و چرا این زبان با تمام مشکلاتش هنوز زبان شماره یک وب به حساب می آید. برخی از مهمترین مزایا و معایب این زبان عبارتند از:
مزایای HTML :
- یادگیری آسان و لذتبخش
- قابلیت اجرا در تمام مرورگرها
- متن باز و رایگان بودن
- ادغام آسان با زبانهای سمت سرور مثل php
معایب HTML :
- استاتیک بودن و وابستگی به زبانهای سمت سرور برای تعامل با کاربر
- ضعف در پشتیبانی از مرورگرهای قدیمی
- نیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی
CSS
Css کوتاه شده یا مخفف عبارت Cascading Style Sheets می باشد که قابلیت صفحه آرایی؛ استایل دهی و زیبا سازی صفحات وب را برای طراحان سایت فراهم می سازد. در واقع ساختار یک صفحه با استفاده از اچ تی ام ال تعیین می شود و سپس با به کار بردن کدهایی دیگر به این ساختار و چیدمان استایل داده می شود. تمامی رنگ ها، ابعاد و اندازه ها، حاشیه ها، مکان قرارگیری، فونت ها و سایر خصوصیات اجزای یک صفحه ی وب، با استفاده از css تعیین خواهند شد. این خصوصیات هر تغییری که داشته باشند توسط مرورگرها برای کاربران قابل نمایش خواهند بود؛ زیرا سی اس اس یک استاندارد مشخص تعریف شده برای برنامه های مرورگر اینترنت است و به همین دلیل می توان یک صفحه ی وب را در مرورگرهای مختلف به صورت یکسان دید. معمولا در شیوه های نوین طراحی سایت تمامی کدهای مرتبط با css در یک فایل جداگانه قرار می گیرد و دیگر از استایل دهی inline ( در داخل هر تگ HTML ) استفاده نمی شود؛ زیرا این کار از لحاظ سئو برای صفحات وب مناسب نیست. پس در یک تعریف کلی با استفاده از css می توان فرم و استایل دلخواه را برای یک صفحه ی وب ایجاد کرد به گونه ای که زیبا، جذاب، کاربردی و کاربرپسند باشد