برنامه نویسی

20 روز HTML (20 چیز شگفت انگیز در مورد HTML بیاموزید) قسمت 1

روز 1- صفحه وب را به بخش های منطقی تقسیم کنید

HTML5 چندین عنصر را ارائه می دهد که به شما کمک می کند طرح بندی خود را در بخش های مناسب سازماندهی کنید:

  1. سربرگ
  2. نوار ناوبری
  3. محتوای اصلی
    با
    و

  4. نوار کناری
  5. پاورقی

صفحات وب خوب ممکن است ظاهر یا عملکرد متفاوتی داشته باشند، اما ساختار استاندارد مشابهی دارند.

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

روز 2- عناصر معنایی کدامند؟ چرا آنها مهم هستند؟

به جای نوشتن div های مبهم در سند خود.
در مورد استفاده از تگ های معنایی چطور؟

برچسب های معنایی هدف عنصر را مشخص کنید. استفاده از برچسب‌ها، نام‌های کلاس و شناسه‌هایی که به محتوای شما معنا می‌دهند به جای اینکه فقط ظاهر آن را تعریف کنند، مفید است. مسئولیت ارائه CSS است.

به عنوان مثال – ,

،

می گوید محتوای پیچیده شده در اطراف آنها پاراگراف، سرصفحه یا تصویر است. آنها به مرورگر و همچنین توسعه دهندگان کمک می کنند تا معنای محتوای خود را درک کنند.

چرا HTML معنایی مهم است؟

  • به نوشتن کد تمیز و قابل نگهداری کمک می کند
  • دسترسی را افزایش می دهد
  • سئو را بهبود می بخشد

روز سوم: هر محتوایی را در صفحه خود قابل ویرایش توسط کاربران قرار دهید

متن صفحه وب را می توان با استفاده از آن قابل ویرایش کرد قابل رضایت ویژگی

فقط تنظیم کنید قابل رضایت برای هر یک از عناصری که می خواهید قابل ویرایش کنید، درست باشد.
می تواند در ساخت یک ویرایشگر متن ساده مفید باشد.

contenteditable="true"> Edit me!

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

روز 4- یک دکمه دانلود را با HTML5 اجرا کنید

معمولاً زمانی که کاربر روی پیوندی به فایل های رسانه ای کلیک می کند، در مرورگر باز می شود.
اگر می خواهید به کاربران این امکان را بدهید که آن فایل را در رایانه خود ذخیره کنند، می توان از ویژگی دانلود استفاده کرد.

ویژگی دانلود به عناصر باعث می شود URL پیوندی به جای یک لینک بارگیری، یک پیوند ناوبری باشد. به این معنی که کاربران می توانند لینک را به جای پیمایش به آن ذخیره کنند.

ویژگی دانلود را می توان با یا بدون مقدار استفاده کرد. برای تغییر نام نام پیش‌فرض، می‌توان یک مقدار داد که به نام فایل تبدیل می‌شود.

روز 5- با تگ datalist گزینه ها را تعریف کنید

Html5 تگ برای ارائه ویژگی تکمیل خودکار در فیلد ورودی فرم استفاده می شود.⁣

مجموعه ای از گزینه های از پیش تعریف شده را برای ورود کاربر مشخص می کند.⁣

برای اتصال آن به ورودی، معمولاً از آن استفاده می شود عنصر فهرست ویژگی که مقدار آن با شناسه فهرست داده مطابقت دارد
با انواع ورودی ها مانند داده، محدوده، رنگ و غیره کار می کند

روز 6- بخش های جمع شونده با HTML5⁣

جزئیات تگ برای ایجاد بخش‌های جمع‌شونده زمانی که نیاز به ارائه اطلاعات اضافی درباره موضوعی است که کاربران می‌توانند با انتخاب خود مخفی یا مشاهده کنند، استفاده می‌شود.

با تگ خلاصه استفاده می شود که عنوانی را مشخص می کند که می توان روی آن کلیک کرد تا جزئیات را بزرگ یا کوچک کند.⁣

به طور پیش‌فرض، جزئیات پنهان هستند، از ویژگی open می‌توان برای تغییر رفتار پیش‌فرض استفاده کرد.⁣

Javascript I am an amazing language
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

روز 7- تصاویر پاسخگو با srcset

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

⁣srcset، یک ویژگی از عنصر برای دادن آدرس‌های اینترنتی نسخه‌های مختلف تصویر و یک توصیفگر استفاده می‌شود تا مرورگر بتواند مناسب‌ترین مورد را در یک موقعیت خاص نمایش دهد.⁣

در اینجا، توصیفگر x نسبت دستگاه-پیکسل را نشان می دهد، یعنی دستگاهی با وضوح 2x فقط تصویر مربوط به 2x را در ویژگی srcset نمایش می دهد. ‌

ویژگی src برای مرورگرهایی وجود دارد که srcset را درک نمی کنند.

 srcset="pizza-small.jpg,
             pizza-medium.jpg 1.5x,
             pizza-large.jpg 2x"
     src="pizza-large.jpg"
     alt="a slice of cheesy pizza">
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

روز 8- جداول تناوبی HTML

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

https://htmlcheatsheet.com/
https://developer.mozilla.org/en-US/docs/Learn/HTML/Cheatsheet
https://websitesetup.org/html5-periodical-table/

روز 9- همه چیز در مورد نقل قول

نقل قول ها بخش مهمی از محتوا هستند
عناصر کمی وجود دارد که می توان با توجه به معنای معنایی آنها برای نمایش نقل قول ها در صفحه خود استفاده کرد:

را

عنصر:

  • بخشی را ارائه می دهد که نقل قول از منبع دیگری را تعریف می کند
  • برای نشان دادن نقل قول های طولانی استفاده می شود
  • ویژگی Cite برای ارائه URL منبع نقل قول استفاده می شود.⁣

را عنصر:

  • یک نقل قول درون خطی در یک بلوک متن ارائه می دهد. ‌
  • برای نشان دادن نقل قول های کوتاه استفاده می شود
  • علامت نقل قول را در اطراف متن محصور درج می کند.⁣

را عنصر:

  • عنوان منبع کار (مثلا کتاب، آلبوم، آهنگ، شعر، مقاله و غیره) را ارائه می دهد.
The future was uncertain, absolutely, and there were many hurdles, twists, and turns to come, but as long as I kept moving forward, one foot in front of the other, the voices of fear and shame, the messages from those who wanted me to believe that I wasn't good enough, would be stilled. ― Chris Gardner, The Pursuit of Happyness The goal isn't to live forever, the goal is to create something that will.
― Chuck Palahniuk, Diary
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

روز 10- آن را برجسته کنید!

آیا تا به حال خواسته اید متن هایلایت شده را در صفحه خود داشته باشید؟
شما می توانید آن را فقط با HTML انجام دهید، استفاده کنید برای برجسته کردن بخش هایی از متن که نیاز به توجه بیشتری دارد، تگ کنید

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

از آن فقط برای دکوراسیون استفاده نکنید

تفاوت بین و
نشان دهنده ارتباط محتوا است، در حالی که اهمیت را نشان می دهد.


  The goal isn't to live forever, the goal is to create something that will.
  
/> ― Chuck Palahniuk, Diary
وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید


نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا