ویرگول
ورودثبت نام
ARiyou Jahan
ARiyou Jahan
خواندن ۳ دقیقه·۵ سال پیش

02 - Doctype & Basic Layout

به نام ایزد توانا.

در این پست آموزشی قصد داریم مقداری در مورد DOCTYPE ها صحبت کنیم.

اینکه اصلا چی هستن و از کجا اومدن و کارشون چیه.

بعد اون هم در مورد مفاهیم پایه Layout ها صحبت میکنیم.



دستور DOCTYPE یه دستور ساده ولی در صورت فراموشی دردسر سازه.

اونقدر دردسر ساز که منبع اصلی ما در این دوره یعنی W3Schools اولین چیزی که به شما میگه اینه که تمام دستورات HTML باید با دستور <DOCTYPE!> شروع بشن.

  • All HTML documents must start with a document type declaration: <!DOCTYPE html>.

ولی این دستور چیه و چرا باید استفادش کرد؟


با تشکر از webgoo :

دستور DOCTYPE در واقع جزئی از تگ های html نیست، بلکه یک دستور راهنما برای مرورگرهای وب است، از آنجایی که کنسرسیوم جهانی وب (w3c) استاندارد های مختلفی از زبان پایه ی وب یعنی HTML یا (HyperText Markup Language) را ارائه نموده که هر کدام از آنها در مقایسه با هم دارای تفاوت هایی هرچند اندک هستند، اما این موضوع سبب می شود که مرورگرهای وب، در برخورد با صفحات مختلف نتوانند در حالت عادی، استاندارد صحیح را شناسایی کنند و لذا به جای پردازش متناسب با استاندارد اصلی، عملیات پیش فرض خود را برای نمایش صفحه انجام می دهند که این موضوع ممکن است با آنچه مورد نظر شما بوده باشد، فرق کند و یا از مرورگری به مرورگر دیگر، صفحات شما به چند شکل مختلف پردازش شوند، لذا برای جلوگیری از بروز چنین مشکلاتی، از دستور راهنمای DOCTYPE استفاده می شود تا نوع نسخه HTML استفاده شده را برای مرورگر مشخص کند.


استفاده از DOCTYPE اجباری یا اختیاری؟

در واقع استفاده از دستور DOCTYPE در صفحات وب اجباری نیست، بدین معنی که اگر هم از آن استفاده نشود، صفحه و اطلاعات آن همچنان در مرورگر بارگذاری شده و قابل استفاده است، اما کنسرسیوم جهانی وب (W3C) به طور جدی توصیه می کند که در صفحات خود از این دستور استفاده کنیم (مخصوصا در صفحاتی که از نسخه HTML 4.01 یا XHTML 1.0 استفاده می کنند)، لذا به خاطر رعایت استانداردهای توصیه شده W3C می توان گفت که استفاده از آن تقریبا الزامی است، در غیر این صورت علاوه بر اینکه ممکن است صفحات، به درستی در مرورگرهای مختلف نمایش داده نشوند، از نظر اعتبار سنجی (Validation) نیز معتبر نیستند (که این امر در امتیاز و رتبه سایت یا وبلاگ در موتورهای جستجو تاثیر منفی خواهد داشت)؛ برای اعتبار سنجی کدهای خود، می توانید به آدرس http://validator.w3.org مراجعه کنید.



خب اینم از DOCTYPE ها البته بعدا واستون کامل ترش میکنم.

بریم سراغ Layout ها البته این جلسه فقط یه نیم نگاه بهشون میندازیم و بعدا کاملشون میکنیم.


در واقع layout ها ابزاری برای قالب بندی سایت ما هستند که تخت روش های مختلفی و با منطق های مختلف بیان می شوند.

یکی از این روش ها که امروزه کمتر مطرح میشود و می توان گفت منسوخ شده روش table است که آشنایی با آن خارج از لطف نیست.

  • <header> - یک هیدر (قسمتی که در بالای سایت قرار میگیرد) را برای یک سند یا قسمت تعریف میکند.
  • <nav> - لینک های ناوبری (منو ها) سایت در این عنصر قرار میگیرند.
  • <section> - یک قسمت را در سند مشخص میکند.
  • <article> - یک مقاله مستقل در این عنصر قرار میگیرد.
  • <aside> - ستون سمت راست و یا چپ را برای سایت مشخص میکند.
  • <footer> - یک فوتر را برای یک سند و یا قسمت تعریف میکند.
  • <details> - جزئیات اضافی در این عنصر قرار میگیرد.
  • <summary> - سرتیتری برای عنصر <details> تعریف میکند.

ولی این روش پیچیدگی بسیاری داشت و امروزه روش مناسبی به نظر نمیرسد.

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


امروزه از موارد دیگه ای به عنوان طرح بندی صفحات استفاده میشه از جمله:

  • جداول HTML (که مقداری در موردشون صحبت کردیم و امروزه دیگه منسوخ شدن)
  • خاصیت float در CSS (یکی از پر کاربردترین ها)
  • فریمورک های CSS (فریمورک هایی مثلBootstrap)
  • استفاده از مدل flexbox در CSS (جدیدترین مدل)

برای اطلاعات بیشتر می تونید به لینک مرجع ما یعنی W3Schools یا نسخه فارسی شده اون یعنی LearnSource مراجعه کنید.



این پست در آینده تکمیل خواهد شد.

با سپاس از وقت شما. آریو جهان

html layoutdoctypehtml table
شاید از این پست‌ها خوشتان بیاید