HTML برای مبتدیان: امروز به کد HTML بیاموزید

افشای: پشتیبانی شما به حفظ سایت کمک می کند! ما برای برخی از خدماتی که در این صفحه توصیه می کنیم هزینه ارجاع دریافت می کنیم.


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

در این راهنما اصول را با روشی آسان (امیدوارانه) برای درک کامل ، مناسب برای مبتدی مطلق پوشش می دهیم. با این حال ، ما در مورد اصول متوقف نمی شویم – حتی مسئولان وب فصلی نکات مفیدی برای گسترش دانش کار شما درباره HTML پیدا می کنند. ما حتی به XHTML ، DHTML و جدیدترین چیزهای HTML5 شیرجه می زنیم.

HTML برای مبتدیان

Contents

تاریخچه مختصر از HTML 1-4

HTML در اواخر دهه 1980 و اوایل دهه 1990 توسط تیم برنرز لی اختراع شد. اولین نسخه “عمومی” در سال 1991 منتشر شد. این زبان بر اساس زبان نشانه گذاری قبلی ، SGML ساخته شده است..

مهمترین نوآوری HTML استفاده از لینک دهنده بود. ما اکنون به این مسئله عادت کرده ایم که درک این واقعیت در آن زمان چقدر انقلابی بود سخت است.

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

IETF HTML را به عنوان استاندارد درآورد و اولین پیشنهاد HTML را در سال 1993 منتشر كرد. HTML 2.0 ، اولین مشخصات كامل رسمی در سال 1995 منتشر شد. تا سال 1997 ، W3C نظارت بر استاندارد را بر عهده گرفت و HTML 3.2 نیز منتشر شد..

HTML 4.0 در اواخر سال 1997 منتشر شد و دوباره سال بعد با چند نسخه جدید. این نسخه از استاندارد ، با سه متغیر (سخت افزاری ، انتقالی و فریم) HTML خود را بیشتر از دهه آینده تعریف کرده است.

این نسخه در زمان ظهور بیشترین ویژگیهای نمادین وب است: ویکی پدیا ، گوگل ، فیس بوک ، وردپرس ، مای اسپیس ، AOL. اگر قبل از سال 2008 نحوه ساخت صفحات وب را آموخته باشید ، تقریباً مطمئناً این نسخه را آموخته اید.

در کنار HTML 4.0 یک پروژه مرتبط با نام XHTML بود. این نخستین بار در سال 2000 و 2001 به عنوان یک اجرای XML مبتنی بر HTML 4.0 منتشر شد. از آنجایی که XML دارای اصطلاح سختگیرانه تری نسبت به HTML است و می توان آن را به راحتی توسط یک تحلیلگر XML تأیید کرد ، تصور می شد که معرفی XHTML نویسندگان محتوای وب را مجبور به ایجاد اسناد دقیق تر می کند..

در بیشتر موارد ، این اتفاق نیفتاد. در عمل ، XHTML – به همراه سه نوع HTML4 و تغییر شدید در رندر مرورگر – باعث سردرگمی کلی در مورد آنچه که هست و نبود “استاندارد” HTML بود.

یکی از تأثیرات قابل توجه XHTML این ایده است که شما باید برچسب های خالی را ببندید که دارای یک بریده محکم است. اگر عادت دارید تایپ کنید
به جای فقط
, می توانید از XHTML تشکر کنید – این یک نیاز به نحو XML بود که همه برچسب ها باید بسته شوند.

HTML عمومی

HTML عمومی

خواندن زیر را شروع کنید یا از ناوبری در سمت راست برای پرش به یک موضوع خاص استفاده کنید.

مبانی HTML

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

HTML چیست؟?

HTML یک زبان نشانه گذاری Hypertext است ، فرمی برای ایجاد اسناد و صفحات وب. در ابتدا در اوایل دهه 1990 توسط تیم برنرز لی اختراع شد و مبتنی بر زبان نشانه گذاری قبلی به نام SGML (زبان عمومی نشانه گذاری استاندارد) بود که بر اساس فرمت قبلی که به سادگی با نام GML (زبان عمومی نشانه گذاری عمومی شده) ساخته شده بود در IBM در دهه 1960.

HTML در درجه اول شامل تطابق جفت برچسب های دارای زاویه دید متناسب با متن با معنی انسان است (مانند این). برچسب ها معنا ، زمینه و اطلاعات را به متن مورد نظر خود ارائه می دهند.

یک زبان نشانه گذاری چیست؟?

هر مدرک مبتنی بر متنی را که تاکنون خوانده اید تصور کنید: یک وب سایت ، یک کتاب ، PDF ، یک سند ورد ، یک بولتن کلیسا. متن وجود دارد ، البته – اما چیز دیگری وجود دارد: نحوه نمایش متن. بعضی از کلمات بزرگتر یا کوچکتر هستند ، بعضی دیگر به صورت مجزا یا با حروف برجسته ، برخی با رنگی متفاوت یا یک قلم متفاوت.

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

به عنوان مثال ، اگر می خواهید متن را با حروف برجسته یا مضارب جلوه دهید ، ممکن است کاری از این دست انجام دهید:

من می خواهم این کلمات [bold bold] را [bold] [bold] (bold) و [شروع italic] این کلمات دیگر بصورت italic [end italic] کنم.

که از نظر تئوری باید چیزی مانند:

من میخواهم بسازم این کلمات پررنگ است و این کلمات دیگر بصورت ایتالیایی.

به این جفت اعلانات مطابق درون خطی ، برچسب ها گفته می شوند و چیزی شبیه به این اساس تقریباً هر زبان نشانه گذاری است. اما این فرمت نشان داده شده در بالا HTML نیست ، فقط یک نمونه کوچک ساخته شده است.

مثال بالا مشکلات زیادی با آن وجود دارد ، و مخترعان HTML (و SGML و GML) به چیزی مشابه ، اما بسیار بهتر دست یافتند:

  • براکت های مربع اغلب در متن استفاده می شوند ، بنابراین رزرو آنها برای استفاده در برچسب ها می تواند مشکلاتی را ایجاد کند. در عوض HTML از براکت های زاویه ای استفاده می کند: < و >.
  • نوشتن شروع و پایان بارها و بارها بسیار خسته کننده است. HTML این کار را با استفاده از نام تگ خود به عنوان بیانیه “شروع” ساده می کند. نام برچسب با یک بریدگی در مقابل آن (/) به عنوان برچسب انتهایی استفاده می شود.
  • به جای کلمات کلیدی “جسورانه” و “ایتالیایی” ، HTML از اختصارات استفاده می کند تا آن را سریعتر تایپ کند و خواندن آن کمتر آزاردهنده باشد..

بنابراین ، با در نظر گرفتن این موارد ، مثال بالا چنین خواهد بود:

من میخواهم بسازم این کلمات پررنگ است و این کلمات دیگر بصورت ایتالیایی.

من میخواهم بسازم این کلمات پررنگ است و این کلمات دیگر بصورت ایتالیایی.

اخیراً ، اقدامی دور از اعلام صریح جزئیات چاپی (مانند) صورت گرفته است جسورانه و italic) و در عوض استفاده از نشانه گذاری برای انتقال معنی ، نه فقط نگاه. بنابراین ، و برچسب ها دیگر برای استفاده توصیه نمی شوند. در عوض ، برچسب های ارجح هستند و (تأکید) بنابراین در اسناد معاصر جمله بالا چنین خواهد بود:

من میخواهم بسازم این کلمات برجسته است و برای تأکید بر این کلمات.

من میخواهم بسازم این کلمات برجسته است و برای تأکید بر این کلمات.

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

ابر متن چیست?

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

مفهوم “هایپر” ارتباط داخلی و خارجی به شکلی سازمان یافته محتوای در اینترنت انقلابی بود که این کلمه در تعدادی مکان نمایش داده می شود:

  • HTML “زبان نشانه گذاری HyperText” است
  • http: // مخفف “پروتکل انتقال HyperText
  • پیوندی از یک صفحه به صفحه دیگر به عنوان “لینک (لینک)” گفته می شود و ویژگی داده ای که مشخص می کند لینک به کجا اشاره دارد “مرجع hyper” نام دارد.

از کجا و چگونه HTML استفاده می شود?

HTML تقریباً برای تمام صفحات وب استفاده می شود. صفحه وب که اکنون می خوانید از HTML استفاده می کند. این زبان پیش فرض وب سایت ها است.

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

اسناد HTML توسط یک مرورگر وب (برنامه ای که برای خواندن این صفحه استفاده می کنید) ارائه می شود. رندر HTML همه برچسب ها را پنهان می کند ، و نمایشگر بقیه محتوا را بر اساس آنچه که این برچسب ها می گویند باید به نظر برسد تغییر می دهد.

آیا برای اجرای وب سایت خود نیاز به یادگیری HTML دارم?

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

اگر تازه از یک پلتفرم وبلاگ نویسی ، سازنده سایت یا سیستم مدیریت محتوا (CMS) تنظیم شده توسط شخص دیگری استفاده می کنید ، ممکن است بتوانید بدون دانستن HTML ، به آن دسترسی پیدا کنید – ویرایشگرهای “گرافیکی” در دسترس هستند که می توانند محتوای را اضافه کنند. به وبلاگ مشابه نوشتن در Microsoft Word یا ایمیل.

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

علاوه بر این ، جزئیات چگونگی ساخت اسناد HTML که تأثیر بر مواردی مانند بهینه سازی موتور جستجو (SEO) و جمع آوری داده ها دارد ، وجود دارد. اگر شما علاقه مند به آگاهی از نحوه نمایش وب سایت خود برای بازدید کنندگان غیر انسانی هستید ، درک HTML یک مهارت مهم است.

به طور مشابه ، دسترسی به وب سایت – امکان وب سایت جهت مدیریت موفقیت آمیز توسط افرادی که دارای نقص دید یا سایر نقص ها هستند – مورد توجه فزاینده ای است. نابینایان برای ترجمه سایتهای رایانه ای به ترجمه وب سایتها به صدا اعتماد می کنند و کیفیت و ساختار سند HTML زیربنایی تأثیر زیادی در توانایی خواننده صفحه نمایش برای کار درست دارد..

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

خط پایین در HTML

HTML – Language Markup Hypertext – زبانی است که برای ایجاد صفحات وب و سایر اسناد مبتنی بر وب استفاده می شود. این بخش عمدتاً از جفت های برچسب زاویه دار ، بخش هایی از متن با معنی انسان تشکیل شده است. از این برچسب ها که توسط مرورگرهای وب نمایش داده نمی شود ، برای ارائه اطلاعاتی درباره نحوه نمایش متن و صفحه استفاده می شود.

عناصر HTML و برچسب ها

در این بخش نگاهی دقیق به برچسب ها ، ساختمانهای اساسی HTML انجام می شود. این شامل نحوه کار آنها ، برخی موارد استثناء در روش عادی کار کردن ، و بحث مختصر در مورد ویژگی های برچسب است.

ساختار برچسب ها

به طور کلی ، جفت های برچسب مطابق با متن از متن تأثیر می گذارند. به دو جفت برچسب مطابق با محتواي محصور شده ، آنها عنصري گفته مي شوند.

این عنصر شروع می شود و با پایان می یابد "قوی" برچسب زدن.

برچسب افتتاحیه می تواند دارای ویژگی های اضافی باشد که اطلاعات بیشتری در مورد محتوای برچسب و نحوه نمایش آنها ارائه می دهد. این ویژگی ها به صورت جفت های نام ارزش ، با علامت برابر (=) از هم جدا شده اند ، با مقدار قرار داده شده در نقل قول ها.

href ="http://example.com">این یک پیوند است. برچسب آن است "آ" برای "لنگر," و ویژگی href (hyper reference) مکان مشخصی را در كجا نشان می دهد.

چند برچسب در جفت های تطبیق رخ نمی دهد ، زیرا آنها به جای توصیف متن ، برای وارد کردن چیزی استفاده می شوند. اینها برچسبهای “خالی” یا “خالی” نامیده می شوند و متداول ترین مورد مربوط به درج تصویر است. از ویژگی src برای مشخص کردن URL تصویر استفاده می شود.

src ="تصاویر / html-برای مبتدیان-یادگیری-به-کد-html-امروز.png" />

توجه کنید که هیچ برچسب بسته ای وجود ندارد و بنابراین هیچ متن ضمیمه ای وجود ندارد. برش درست قبل از براکت زاویه نهایی (/> ) برای “بستن خود” برچسب استفاده می شود. این کاملاً مورد نیاز نیست ، اما یادآوری خوبی است که هر آنچه در ادامه می رود محصور نمی شود. (در XHTML لازم است ، که بعدا در این مقاله بحث خواهد شد.)

چندین برچسب خالی دیگر وجود دارد. دو تا نسبتاً مستقیم به جلو و مشترک هستند.

  • خط خطی را وارد می کند.
  • جداکننده قانون (خط) افقی را درج می کند.

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

rel ="صفحه شیوه" نوع ="متن / CSS" href ="موضوع.css" />

نام ="شرح" محتوا ="عنوان این صفحه." />

علاوه بر این ، برچسب (که برای افزودن Javascript به یک صفحه استفاده می شود) می تواند خالی باشد ، اما لازم نیست.

(اطلاعات بیشتر در مورد و برچسب ها بعداً در این راهنما ارائه می شود.)

سطح بلوک در مقابل خطی

به استثنای برچسب هایی که اطلاعات مربوط به خود سند را ارائه می دهند ، برچسب های HTML در دو دسته بلاک و درون خط قرار می گیرند.

عناصر بلوک

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

) ، تقسیمات () و عناوین (

,

, و غیره).

این معمولی است که اکثر برچسب های سطح بلوک را در خطوط فردی در بالا و زیر محتوای آنها تایپ کنید:

این یک div است.

با این حال ، این همیشه انجام نمی شود ، به خصوص با عناوین:

این عنوان یک صفحه است

این یک بخش عمده است

برخی از مطالب در یک پاراگراف.

عناصر سطح بلوک را می توان توخالی کرد ، اما برخی از عناصر سطح بلوک نمی توانند حاوی عناصر دیگر سطح بلوک باشند:

عنوان مقاله

بند اول مقاله.

پاراگرافها و عناوین نمی توانند عناصر دیگر سطح بلوک را در بر گیرند.

عناصر درون خطی

عناصر درون خطی عناصری هستند که در متن استفاده می شوند. جسورانه ( ) ، italic () و پیوندها () همه عناصر درون خطی هستند.

عناصر درون خطی گاهی اوقات عناصر “سطح دهانه” نامیده می شوند. همچنین یک عنصر سطح دهانه عمومی وجود دارد که به سادگی یک دهانه () نامیده می شود. این به خودی خود کارهای زیادی انجام نمی دهد ، اما می تواند از طریق استفاده از عناصر برای ایجاد انواع سفارشی نمایشگر متن استفاده شود..

کلاس ="متن ویژه">این متن ویژه است.

(برای کسب اطلاعات در مورد چگونگی ساخت کلاس = به بخش CSS مراجعه کنید"متن ویژه" نمایش در قالب ویژه.)

بعضی اوقات معنی ندارد

تصاویر ( ) مانند عناصر سطح بلوک احساس می کنید – مستطیل شکل هستند ، ابعاد مشخص دارند و معمولاً در خارج از جریان متن نمایش داده می شوند.

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

موارد عجیب دیگری مانند این وجود دارد ، و بعداً هنگام ارائه آنها در این راهنما پوشش داده می شوند.

اطلاعات بیشتر در مورد ویژگیها

تقریباً هر برچسب عنصر می تواند شامل ویژگی ها باشد. بسیاری از عناصر مجموعه خاصی از ویژگیهای پشتیبانی شده را دارند (مانند و src = صفت) ، اما چندین عنصر وجود دارد که توسط همه نوع عناصر در سطح جهان پشتیبانی می شوند.

دو نوع ویژگی مهم کلاس و id هستند.

href ="http://example.com" کلاس ="مثال-پیوند" id ="پیوند 27">این برچسب لنگر دارای سه ویژگی است.

ویژگی های کلاس

از صفات کلاس برای علامت گذاری یک یا چند عنصر به عنوان “کلاس” یا گروه خاص استفاده می شود – این می تواند برای نمایش همه آنها به همان روش استفاده شود.

به عنوان مثال ، استفاده از یک لیست ناموزون معمول است (

    ) به عنوان منو ، و مورد را در لیست ایجاد کنید (
  • ) که به صفحه فعلی نشان می دهد از همه پیوندهای دیگر در یک لیست متفاوت است.

    کلاس ="منو">
    کلاس ="مورد منو">
    href ="/ خانه">خانه

  • کلاس ="مورد فعلی">
    href ="/در باره">در باره

    کلاس ="مورد منو">
    href ="/مخاطب">مخاطب

یک عنصر می تواند بیش از یک کلاس داشته باشد. چندین کلاس توسط فضاهای درون عنصر کلاس از هم جدا می شوند.

کلاس ="اولین کلاه کشویی">
این پاراگراف اول است ، و همچنین بخشی از کلاس drop-cap است.

از آنجا که کلاس ها با یک فاصله از هم جدا می شوند ، ممکن است کلاس ها فضایی را به نام خود نداشته باشند.

در CSS ، JavaScript و سایر زبانها ، کلاس یک عنصر با یک نقطه قبل از نام مشخص می شود.

/ * CSS * /

.اولین {
رنگ: سبز؛
}

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

ویژگی شناسه

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

id ="عنوان صفحه">این عنوان صفحه است

شناسه ها کمتر برای تأثیرگذاری بر نمایشگر استفاده می شوند و بیشتر در اهداف کاربردی مورد استفاده قرار می گیرند.

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

  1. href ="#intro">معرفی
  2. href ="# تاریخ_عرف_عرفی">تاریخچه موضوع

id ="مقدمه" کلاس ="سرصفحه">مقدمه

متن بخش مقدماتی.

id ="history_of_topic" کلاس ="سرصفحه">

برخی از تاریخچه در مورد این موضوع.

توجه کنید که پیوندهای مربوط به بخشها شامل نام برچسب است ، پیش شماره با علامت هش یا پوند (#). این روش استاندارد برای مرجع شناسه یک عنصر است:

/ * CSS * /

#intro
اندازه قلم: 14px؛
}

سایر خصوصیات

هر برچسب HTML مجموعه ای از ویژگی های موجود در رابطه با هدف خاص خود را دارد. به عنوان مثال ، برچسب ، که یک لینک (لینک) را تعریف می کند ، شامل ویژگی href (hyper-reference) است ، که URL مربوط به آن را مشخص می کند.

این ویژگی ها با جزئیات بیشتری پوشش می شوند زیرا در بخش های بعدی به هر برچسب به صورت جداگانه نگاه می کنیم.

چندین ویژگی “جهانی” نیز وجود دارد – خصوصیاتی که هر عنصر می تواند داشته باشد. بعداً این موارد با جزئیات بیشتر پوشش داده می شوند ، زیرا کاربردهای آنها اهمیت بیشتری پیدا می کند.

برچسب ها نظر

آخرین نکته ای که باید در برچسب های HTML اساسی پوشش داده شود ، این نظر است. نظرات با یک براکت زاویه ای شروع می شوند و به دنبال آن یک تعجب و دو خط تیره می شوند. آنها با دو خط و یک براکت زاویه بسته می شوند.

نظرات ممکن است چند خطی باشد.

چه موقع باید استفاده کرد

و

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

عنصر در هر صفحه.

در صفحه اصلی و صفحه فهرست وبلاگ خود ، بهتر است عنوان سایت خود را در این قسمت قرار دهید

برچسب ها ، و عناوین مقالات در فهرست وبلاگ در داخل

برچسب ها.

با این حال ، در یک صفحه تک مقاله ، عنوان مقاله یا مقاله باید درج شود

برچسب ، با عنوان وب سایت در

یا حتی

برچسب زدن.

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

برچسب زدن.
سازمان سلسله مراتبی

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

دنبال می کند

برچسب ، باید عنوان برای یک بخش فرعی باشد.

زیرنویس

عنوانی با زیرنویس باید نه از دو برچسب هدر مختلف استفاده شده است:

در عوض ، کل عنوان و زیرنویس را در یک برچسب عنوان قرار دهید و از یک برچسب دیگر برای تعریف رابطه استفاده کنید:

عنوان اصلی این مقاله:
زیرنویس همان مقاله

عنوان اصلی این مقاله: کلاس ="عنوان فرعی">زیرنویس همان مقاله

عناوین مربوط به ابزارک ها

بخش های نوار کناری یا ابزارک ها به عناوین احتیاج دارند ، اما اینها معمولاً از منظر محتوا (SEO) مرتبط نیستند. بیشتر طراحان آگاه از آن استفاده می کنند

برچسب ها برای این منظور ، رزرو

,

, و

برای محتوای مرتبط با کلید واژه.
 

پستهای اخیر

  • href ="#">عنوان ارسال
  • href ="#">عنوان ارسال
  • href ="#">عنوان ارسال

بایگانی

  • href ="#">ژوئن 2015
  • href ="#">مه 2015
  • href ="#">آوریل 2015

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

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

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

در گذشته ، فقط برچسب های لنگر ( ) می تواند به عنوان هدف یک لینک مورد استفاده قرار گیرد ، اما دیگر اینگونه نیست – هر عنصری می تواند تبدیل به هدف یک پیوند خاص برای صفحه شود.

کاندیدای طبیعی چنین لینک هایی برچسب های عنوان هستند ، زیرا از آنها برای مشخص کردن آغاز بخش ها استفاده می شود.

تمام آنچه برای تهیه این اثر لازم است اضافه کردن یکتا بی نظیر است شناسه به عنصر عنوان هدیه دهید. پیوندهای مربوط به آن بخش فقط URL صفحه هستند که همراه با علامت هش () # ) و شناسه.




 id ="چند تیتر">برخی از عناوین در نیمی از صفحه
href ="http://example.com/page#some-headline">برای رفتن به آن قسمت اینجا را کلیک کنید.
  • این بد است.
  • این اشتباه است.
  • این پشتیبانی نمی شود.
  • فهرست مرتبشده

    لیست های مرتب شده ، لیست هایی هستند که شماره گذاری می شوند یا به صورت نامه ای می شوند. عنصر بیرونی است

      , و
    1. تگ دوباره برای هر مورد استفاده می شود.

      1. لباس زیر را جمع کنید.
      2. ???
      3. سود.
      1. لباس زیر را جمع کنید.
      2. ???
      3. سود.

        عنصر از چندین صفت پشتیبانی می کند که نحوه شماره گذاری لیست را تغییر می دهد.

        از ویژگی این نوع می توان برای تغییر عدد پیش فرض عربی (1 ، 2 ، 3) به حروف یا اعداد رومی (پایتخت یا موارد کوچک) استفاده کرد.

        نوع ="من">
      1. شماره کوچک رومی کوچک 1.
      2. حروف کوچک شماره 2 رومی.
      3. شماره کوچک رومی کوچک 3.
      1. شماره کوچک رومی کوچک 1.
      2. حروف کوچک شماره 2 رومی.
      3. شماره کوچک رومی کوچک 3.

      گزینه های نوع عبارتند از:

      • 1 - اعداد عربی (1 ، 2 ، 3) - این پیش فرض است.
      • الف - حروف بزرگ (A ، B ، C)
      • a - حروف کوچک (a، b، c)
      • I - اعداد پایتخت رومی (I ، II ، III)
      • i - اعداد رومی در مورد پایین (i ، ii ، iii)

      از ویژگی شروع می توان برای شروع شماره گذاری لیست بر روی عددی غیر از 1 استفاده کرد. این می تواند برای اعداد یا انواع دیگر استفاده شود.

      شروع ="10">
    2. شکلات
    3. وانیل
    4. روغن موتور
    نوع ="من" شروع ="8">
  • تلسفور
  • هیگینوس
  • پیوس
  • آنیکتوس
    1. شکلات
    2. وانیل
    3. روغن موتور
    1. تلسفور
    2. هیگینوس
    3. پیوس
    4. آنیکتوس

    سرانجام می توان از ویژگی معکوس برای شماره گذاری موارد لیست به ترتیب معکوس استفاده کرد. این را می توان با هر یک از خصوصیات دیگر (یا هر دو) ترکیب کرد.

    از دروازه شروع!

    شروع ="-3">
  • منتظرش باش.
  • منتظرش باش.
  • منتظرش باش.
  • برو!
  • ده دلیل برتر

    شروع ="10" معکوس شد>
  • زیرا.
  • و بنابراین بنابراین.
  • QED
  • و غیره.
  • از دروازه شروع!

    1. منتظرش باش.
    2. منتظرش باش.
    3. منتظرش باش.
    4. برو!

    ده دلیل برتر

    1. زیرا.
    2. و بنابراین بنابراین.
    3. QED
    4. و غیره.

    چیزهایی که باید در مورد این دو مثال توجه کنید:

    1. ویژگی شروع می تواند منفی باشد.
    2. حتی اگر لیست معکوس شود ، مقدار شروع مقدار است اولین شماره برای لیست.
    3. صفت معکوس نیازی به تعیین مقداری ندارد. دلیل این امر این است که فقط دو مقدار ممکن دارد: درست (موجود) یا نادرست (غایب).
    4. اگر یک لیست 10 گانه (یا شمارش معکوس مشابه) بالا باشد نیازی به مشخص کردن ویژگی شروع نیست ، که همیشه آخرین شماره در یک لیست معکوس خواهد بود مگر اینکه خلاف آن مشخص شده باشد. مثال بالا در واقع شامل ده مورد نبود ، بنابراین لازم بود که مشخص شود.
    5. رفتار پیش فرض افزایش تعداد برای هر مورد لیست موفق است. بنابراین ، اگر می خواهید از یک تعداد منفی "شمارش معکوس" بگیرید ، باید این کار را انجام دهید نه شامل ویژگی معکوس شود.
    لیست / توضیحات / تعریف

    لیست های توضیحات (یا لیست های «تعریف» ، همانطور که بیشتر به آنها کاملاً گفته می شود) کمی متفاوت از لیست های مرتب شده و نامرتب هستند. از آنها برای تهیه لیستی از اصطلاحات با شرح ، مانند در یک واژه نامه استفاده می شود.

    کل لیست در برچسب پیچیده شده است. هر اصطلاح در لیست با یک برچسب مشخص می شود ("اصطلاح تعریف") ، و هر اصطلاح توسط یک یا چند عنصر دنبال می شود ("توضیحات تعریف").

    انواع لیست ها

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

    انواع لیست ها

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

    استفاده واضح از لیست توضیحات یک واژه نامه یا فرهنگ لغت است ، اما این تنها کاربرد استاندارد نیست.

    لیست نام ها: با اطلاعات تماس در توضیحات. لیست عناوین آهنگ صوتی: با اطلاعات دقیق در مورد آهنگ. لیست ارائه محصولات: با اطلاعات در مورد محصولات موجود در توضیحات. لیست آمار: با نام stat به عنوان اصطلاح و مقدار stat در توضیحات

    هر وقت لیستی از مواردی را در اختیار دارید که هر یک به جزئیات بیشتری نیاز دارند ، لیست توضیحات ایده خوبی است.

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

    همچنین یک لیست خارج از دیوار برای لیست های توضیحات نیز وجود دارد که تا حدودی بحث برانگیز است. این نمونه به عنوان نمونه ای در مشخصات HTML4 گنجانده شده است ، اما برای HTML5 گفتگو مانند اسکریپت حذف شده است.

    خواننده موجودیت مورد علاقه HTML شما چیست؟? نویسنده خنده دار شما باید بپرسید! این لیست توضیحات است. خواننده واقعاً؟ چه چیزی در مورد آن بسیار جالب است? نویسنده خیلی عجیب و انعطاف پذیر است.

    این بد به نظر می رسد

    1. مورد اول
    2. مورد دو
      1. مورد A.
      2. مورد B.
        1. زیرمجموعه i.
        2. زیرمجموعه ii.
        3. زیرمجموعه iii.
      3. مورد C.
    3. مورد سوم

    اینجا چگونه شما باید آن را انجام دهید

    1. مورد اول
    2. مورد دو
      1. مورد A.
      2. مورد B.
        1. زیرمجموعه i.
        2. زیرمجموعه ii.
          1. راه در سلسله مراتب.
          2. آیا کسی به این سطوح لیست فراوان احتیاج دارد؟?
            1. این مسخره است.
        3. زیرمجموعه iii.
      3. مورد C.
    3. مورد سوم

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

    این یک لیست مرتب شده است:
    1. کیک ها.
    2. پای.
    3. کیک یک دروغ است.
    این یک لیست بدون کنترل است ، انواع لیست ها را لیست می کند:
    • لیست های سفارش داده شده
    • لیست های بدون کنترل
    • لیست توضیحات
    این یک لیست نامرتب است که در داخل یک لیست مرتب شده قرار دارد ، که در داخل این لیست توضیحات قرار دارد:
    1. مورد اول.
    2. مورد دوم.
    3. مورد سوم ، که لیست لانه دار است.
      • چاقو
      • چنگال
      • قاشق
      • جرقه
      • خردکن
    4. این مورد چهارم فقط برای بهتر کردن لیست لانه های تو در اینجا است.
    این یک لیست مرتب شده است:
    1. کیک ها.
    2. پای.
    3. کیک یک دروغ است.
    این یک لیست بدون کنترل است ، انواع لیست ها را لیست می کند:
    • لیست های سفارش داده شده
    • لیست های بدون کنترل
    • لیست توضیحات
    این یک لیست نامرتب است که در داخل یک لیست مرتب شده قرار دارد ، که در داخل این لیست توضیحات قرار دارد:
    1. مورد اول.
    2. مورد دوم.
    3. مورد سوم ، که لیست لانه دار است.
      • چاقو
      • چنگال
      • قاشق
      • جرقه
      • خردکن
    4. این مورد چهارم فقط برای بهتر کردن لیست لانه های تو در اینجا است.

    لازم به ذکر است که لیستها در داخل عناصر پاراگراف نمی توانند توطئه کنند (

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

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

    نقل قولها و نقل قولهای درون خطی را مسدود کنید

    اگر کسی یا چیزی را نقل قول می کنید ، از یکی از دو عنصر نقل قول HTML استفاده کنید.

    بلاک ها

    بلاکچین بسیار متداول است. این به دلیل کنوانسیون معمولی تایپی است:

    • بلاک ها (نقل قول های چند خطی یا گزیده ها) روشی ویژه نمایش داده می شوند (معمولاً به صورت خمیده و گاهاً معکوس),
    • در حالی که نقل قول های درون خطی به سادگی با مشت زدن مشخص می شوند.
    بودن یا نبودن بودن ، این سوال است.

    بودن یا نبودن بودن ، این سوال است.

    از blockquotes می توان برای بلوک های بزرگ از مطالب نقل شده استفاده کرد ، خواه آن مطالب گزیده ای از یک اثر ادبی ، آهنگ ، یک پست وبلاگ دیگری یا یک پیام الکترونیکی باشد که به آن پاسخ می دهید.

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

    استناد ="http://www.gutenberg.org/ebooks/2265"> بودن یا نبودن بودن ، این سوال است.
    - هملت ، ویلیام شکسپیر

    بودن یا نبودن بودن ، این سوال است.
    - هملت ، ویلیام شکسپیر

    لازم به ذکر است که برچسب باید عنوان اصلی اثر را به عنوان نقل قول درج كند و ممكن است به صورت اختیاری نام نویسنده و سایر اطلاعات (مانند شماره صفحه یا عمل و شماره صحنه) را درج كند..

    استناد در انتهای نقل قول اگر در داخل یک عنصر قرار گیرد ، بهتر است مشخص شود و اگر خود استناد به ماده منبع مرتبط باشد. انجام این کار باعث می شود ویژگی استناد در برچسب از بین برود ، بنابراین آن را حذف کنید. در آخر ، یک برچسب پاراگراف را به خوبی اضافه کنید و em-dash (-) را حذف کنید ، تا فقط اطلاعات - و جزئیات آن نمایش داده نشود -.

    استناد ="http://www.gutenberg.org/ebooks/2265">

    بودن یا نبودن بودن ، این سوال است.

    href ="http://www.gutenberg.org/ebooks/2265">هملت ، ویلیام شکسپیر

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

    نقل قول درون خطی

    عنصر نقل قول کمتر استفاده می شود نقل قول درون خطی است, .

    خط مورد علاقه من در هملت وقتی می گوید ، استناد کنید ="http://www.gutenberg.org/ebooks/2265"> بودن یا نبودن بودن ، این سوال است.

    خط مورد علاقه من در هملت وقتی است که می گوید "بودن یا نبودن" است ، این سوال است.

    این اغلب استفاده نمی شود زیرا در حال حاضر یک روش کاملاً خوب وجود دارد که نشان می دهد شما چیزی را نقل کرده اید - با استفاده از علامت های نقل قول.

    با این حال ، استفاده از برچسب به جای علامت نقل قول های ساده ، چند مزیت دارد.

    • نمایش علامت های نقل قول را می توان از طریق CSS تغییر داد ، که برای بین المللی شدن مفید است ، زیرا همه کشورها از سمبل های یکسان برای نقل قول ها استفاده نمی کنند.
    • این واقعیت که متن نقل قول از منبع دیگری است از نظر معنایی روشن است ، در حالی که از دلایل نقل قول می توان به دلایل دیگر استفاده کرد:
      • "نقل قول های ترسناک"
      • ذکر یک کلمه یا عبارت
      • گزارش مکالمه واقعی که هیچ متن منبع ندارد
    • فرصتی برای درج یک انتساب استناد به منبع اصلی نقل قول.

    لینک های ارتباطی

    یکی از مهمترین برچسب ها در HTML ، برچسب anchor () است که یک لینک را تعریف می کند. توانایی پیوند اسناد به شبکه اتصالات ، جوهر وب است و تعریف "ابر متن".

    این عنصر "لنگر" نامیده می شود زیرا از آن برای لنگر انداختن URL پیوندی به برخی متن خاص در صفحه استفاده می شود. (این برخلاف برچسب است که کل سند را به هم متصل می کند ، نه یک بخش خاص از متن.)

    متن داخل عنصر "متن لنگر" نام دارد و URL پیوند شده در ویژگی href مشخص شده است.

    href ="http://example.com">این پیوندی برای مثال.com است این پیوندی برای مثال.com است

    در کنار href ، برچسب چندین ویژگی مهم دارد.

    • هدف مشخص می کند کدام پنجره (یا برگه مرورگر) برای باز کردن پیوند در می باشد. پیش فرض همان پنجره است. اگر می خواهید برگه جدیدی را تنظیم کنید ="_جای خالی".
    • عنوان راهنمای ابزار یا متن شناور یک لینک را تنظیم می کند. وقتی کاربر روی متن لنگر لمس می کند ، این نمایشگر به صورت کوچک ظاهر می شود. برای ارائه برخی از اطلاعات اضافی در مورد کلیک کاربر کاربر مفید است.
    • گزارش های مربوط به رابطه بین سند پیوندی و سند فعلی. این چندین مقدار ممکن است:
      • متناوب - سند پیوند شده دارای محتوای مشابه با سند فعلی است ، اما در قالب جایگزین. اغلب برای لینک دادن به فیدهای RSS استفاده می شود.
      • نویسنده - سند مرتبط با صفحه اصلی مشخصات نویسنده سند فعلی یا مقاله است.
      • bookmark - پیوند به یک نقطه خاص در سند (مانند هنگام ایجاد فهرست مطالب در صفحه).
      • راهنما - سند مرتبط با اسناد راهنما به مستند فعلی کمک می کند.
      • پروانه - سند مرتبط متن مجوز برای سند فعلی است.
      • بعدی - سند مرتبط با بخش بعدی در یک سری صفحه بندی شده است. برخی از مرورگرها قبل از بارگیری مطالب مربوط به سند پیوند شده به منظور سرعت بخشیدن به عملکرد هنگام نهایی شدن کاربر ، روی کاربر.
      • nofollow - سند مرتبط است تأیید نشده است توسط نویسنده سند فعلی. استفاده می شود برای جلوگیری از سود سئو به صفحه مرتبط. سیستم های نظر اغلب به طور پیش فرض این کار را به لینک های وارد شده توسط کاربر اضافه می کنند.
      • noreferrer - برای جلوگیری از ارسال اطلاعات داور در عنوان درخواست HTTP هنگام کلیک کاربر بر روی لینک ، استفاده می شود. به طور معمول ، درخواست HTTP مشخص می کند کاربر از کجا می آید (صفحه فعلی). این درخواست می کند که مشتری مرورگر آن اطلاعات را حذف کند.
      • prefetch - مشابه موارد بعدی ، اما بدون آنکه به یک رابطه پی در پی واقعی اشاره کند. این درخواست می کند که مرورگر قبل از کلیک کاربر بر روی آن ، محتوای صفحه پیوندی را بدست آورد ، بنابراین ناوبری به صفحه بعدی فوری به نظر می رسد.
      • قبل - معکوس بعدی ، این مقدار مشخص می کند که سند پیوند شده صفحه قبلی در یک سری صفحه بندی شده است. ممکن است برخی از مرورگرها محتویات را از پیش تنظیم کنند.
      • جستجو - صفحه پیوندی رابط اختصاصی برای جستجوی سند فعلی و اسناد مرتبط را فراهم می کند.
      • برچسب - سند مرتبط با موضوع صفحه فعلی زمینه را ارائه می دهد.

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

    به عنوان مثال: Google از rel = استفاده می کند"نویسنده" پیوند (اگر به یک نمایه Google+ مرتبط باشد) برای نمایش پیوندها به مطالب دیگر توسط همین نویسنده در نتایج جستجو. - جستجوی تصویر Google شامل امکان جستجوی مجوز ، یافتن محتوای مجاز برای Creative Commons برای استفاده مجدد است. این ویژگی تا حدی به rel = بستگی دارد"مجوز" صفتی که در پیوندها به Creative Commons و سایر مجوزهای باز مورد استفاده قرار می گیرد. چندین موتور جستجوگر و سایت های جمع آوری خبر از متن لنگر و صفحه ارجاع شده از یک rel = استفاده می کنند"برچسب زدن" پیوند برای تعیین موضوع صفحه مشخص شده است.

    از برچسب rel نیز می توان در Microformats استفاده کرد ، که روش های ساده ای برای شامل اطلاعات معنایی اضافی در ویژگی های HTML موجود است (معمولاً rel و کلاس).

    به عنوان مثال ، XFN Microformat پیشنهاد می کند هنگام پیوند به صفحه اصلی یا صفحه افرادی که با آنها رابطه دارید از ویژگی rel استفاده کنید..

    ماه آینده من یک آخر هفته را در یک کنفرانس با href = می گذرانم"http://example.com/kami-profile" rel ="همکار">کامی همایش در نزدیکی شهر من است ، بنابراین امیدوارم که بتوانم ناهار را با href ="http://example.com/dave-profile" rel ="والدین">پدرم.

    چندین Microformat اضافی وجود دارد که از برچسب rel استفاده می کنند ، و همچنین روش های دیگری برای درج این نوع از اطلاعات معنایی در نشانه گذاری وب سایت شما وجود دارد. اینها در بخش HTML معنایی پوشش داده می شود.

    دکوراسیون متن

    تعدادی برچسب ساده وجود دارد که برای نشانه گذاری متن اصلی در یک پاراگراف یا عنصر دیگر استفاده می شود.

    جسورانه

    دو تگ وجود دارد که می تواند برای ساخت متن استفاده شود جسورانه.

    • برای علامت گذاری به متن "مهم" برای استفاده توصیه می شود. این باعث می شود که متن بسته شده به صورت جسورانه نمایش داده شود اما معنای معنایی نیز به همراه دارد (این که متن خود به نوعی مهم است).
    • به سادگی متن را پررنگ می کند بدون اینکه معنای معنایی خاصی را نشان دهد.
    ایتالیایی

    پسندیدن جسورانه, دو روش برای نمایش متن در فهرست برنامه ها وجود دارد.

    • نشان می دهد که متن بسته شده به نوعی "تأکید می شود".
    • به سادگی بصورت مجزا انجام می شود ، بدون معنی معنایی خاصی پیوست می شود.
    تأکید

    اگرچه اخیراً محبوبیت کمتری پیدا کرده است ، صفحه نمایش استاندارد برای لینک ها () برای تأکید بر آنهاست. از این رو, تأکید بر عدم پیوند اغلب استفاده نمی شود. اما ، برچسب های نشانه گذاری برای آن وجود دارد.

    • برچسب عمومی برای تأکید بر متن است. مورد استفاده از مشخصات ارائه شده در حال تاکید بر کلمات نادرست است. مشخصات HTML5 همچنین از شما می خواهد بدانید که عناصر دیگر معمولاً مناسب تر هستند و در صورت اشتباه بودن در پیوند ، از این استفاده نکنید..
    • به معنای متنی است که درج شده است و معمولاً در ترکیب با برچسب استفاده می شود تا تغییرات ایجاد شده در یک متن را نشان دهد.

    نمایش از ساعت 7 بعدازظهر 8:00 شب آغاز می شود.

    نمایش از ساعت 7 بعدازظهر 8:00 شب آغاز می شود

    خط از طریق

    دو عنصر وجود دارد که متن را می توان از طریق آن چیدمان کرد. هر کدام معنای کمی متفاوت دارند.

    • برای متن است که باید به عنوان حذف یا تغییر فهمیده شود و همانطور که در بالا ذکر شد از آن با استفاده از برچسب استفاده می شود.
    • برای متن استفاده می شود که دیگر صحیح یا دیگر مرتبط نیست.

    همچنین یک برچسب وجود دارد که در HTML4 موجود است.

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

    کد منبع و متن پردازش نشده

    دو عنصر برای نمایش متن یا کد وجود دارد که نمی خواهید توسط مرورگر ارائه شود ، اما به سادگی "خام" برای استفاده نمایش داده می شود.

    • - برای بلوک های کد یا متن پردازش نشده استفاده می شود.
    • - هنگامی استفاده می شود که شما نیاز به یک کلمه یا عبارت کوتاه از کد را به همراه متن خود داشته باشید.

    هر دو آنها به صورت پیش فرض به صورت پیش فرض نمایش داده می شوند ، فضای سفید را حفظ می کنند و هیچ برچسب نمی دهند.

    این راهنما برای نشان دادن نمونه کد منبع و بحث در مورد نام برچسب عناصر ، از عناصر و عناصر سنگین استفاده می کند.

    اندازه متن

    می توانید متن را به طور دلخواه بزرگتر یا کوچکتر از دو عنصر کنید که در غیر این صورت معنی خاصی ندارند:

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

    عنصر عمومی

    اگر برای اهداف معنایی یا یک ظاهر طراحی شده نیاز به مشخص کردن طول خاص متن دارید ، اما هیچ یک از برچسب های موجود معنی ندارد ، می توانید از عنصر عمومی به همراه یک ویژگی کلاس (و برخی از CSS) استفاده کنید تا جلوه مطلوب را ایجاد کنید.

    من مطمئن نیستم که چرا برچسب طعنه وجود ندارد. شاید فقط لازم نباشد زیرا کلاس ="طعنه">خواندن در اینترنت بسیار آسان است.

    / * CSS * / .طعنه { رنگ بنفش؛ font-style: italic؛ }

    .طعنه {
    رنگ بنفش؛
    font-style: italic؛
    }

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

    جدا کننده ها

    HTML دو تگ را برای اضافه کردن جداسازی در متن فراهم می کند.


    • شکاف خط را درج می کند
    • یک خط افقی درج می کند

    هیچکدام از این عناصر نیازی به برچسب بسته شدن ندارند ، زیرا هیچ متنی را ضمیمه نمی کنند. اگر به شما کمک می کند کد منبع خود را بهتر بخوانید ، ممکن است برش انتهایی خود را ببندید:
    و .

    شکستن خط به ویژه هنگامی مفید است که نیاز به ایجاد خط سختی داشته باشید اما راه حلهای دیگر - مانند چندین

    برچسب ها معنی ندارند. دو نمونه خوب اشعار یا اشعار آهنگ و آدرس است.

    رزها قرمز هستند
    بنفشه ها آبی هستند
    قافیه سخت است
    HTML5 بسیار جذاب است.

    خیابان اصلی 123.
    فورت ورث ، TX 76148

    رزها قرمز هستند
    بنفشه ها آبی هستند
    قافیه سخت است
    HTML5 بسیار جذاب است.

    خیابان اصلی 123.
    فورت ورث ، TX 76148

    این آسان تر از آن به نظر می رسد

    همه اینها ممکن است پیچیده به نظر برسد ، اما واقعاً اینگونه نیست. بسیاری از برچسب های مورد نیاز شما به طور مرتب به راحتی قابل یادآوری می باشند: عناوین ، پاراگرافها ، لیست نامرتب. شما لازم نیست همه گزینه ها یا معانی مختلف را در پشت هر یک از آنها به خاطر بسپارید. فقط بخاطر داشته باشید که هر مورد معمولی تایپی (مانند عناوین ، لیست ، پاراگراف یا پیوندی) احتمالاً دارای یک برچسب HTML موجود برای تحقق آن است. اگر این موضوع را در نظر داشته باشید ، می توانید بدون تمرکز روی این موارد بنویسید و سپس موارد خاصی را که نمی توانید به خاطر بسپارید جستجو کنید.

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

    HTML ساختاری

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

    ساختار اسناد اساسی HTML

    اسناد HTML (صفحات وب) برای کار صحیح و خواندن دقیق توسط مرورگرهای وب ، باید چند قانون اساسی ساختاری را رعایت کنند.

    این سند باید با اعلام DOCTYPE آغاز شود. چندین استاندارد مختلف HTML (و مرتبط) وجود دارد که در طی سالیان متمادی مورد استفاده قرار گرفته اند ، بنابراین بنابراین لازم است مشخص کنید که از کدام نوع سندی (کدام استاندارد HTML) استفاده می کند..

    بیشتر ، امروز ، DOCTYPE صحیح به سادگی HTML است. بنابراین یک سند HTML باید با این موارد آغاز شود:

    html>

    این دقیقاً یک برچسب HTML به معنای مناسب نیست ، بلکه به مرورگر می گوید که چگونه تمام برچسب های دیگر را دنبال کند.

    پس از اعلام DOCTYPE ، برچسب باز شده برچسب است. بسته شدن برچسب آخرین خط سند خواهد بود.

    در داخل برچسب HTML ، می توانید زبان سند را مشخص کنید (در این حالت انگلیسی).

    html> لنگ ="en"> . . . . .

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

    html> لنگ ="en"> . . . . . .

    این ساختار اساسی هر سند HTML است. همه چیز اساساً فوق العاده است.

    مطالب

    عنصر یک HTML html معمولاً شامل کلیه اطلاعات مورد نیاز یک مرورگر برای تهیه صحیح سند می باشد ، به علاوه اطلاعات اضافی که محتویات را توصیف می کند (به سود جمع کننده ها و رباتها).

    ابرداده

    از این برچسب برای مشخص کردن ابرداده های مختلف (داده های مربوط به سند) چندین بار استفاده می شود..

    متاتاگها برچسبهای خالی هستند و نیازی به برچسب بسته شدن ندارند. شما ممکن است آنها را با برش بسته خود پایان دهید (/>) ، اما این موردنیاز نیست (و بعضی از افراد حتی به طور خاص آن را نادیده می گیرند).

    رمزگذاری کاراکتر

    چندین روش مختلف مختلف برای رمزگذاری کاراکترها (حروف ، اعداد و نگارشی) در حافظه رایانه وجود دارد. اگر مشخص نکنید که کدام یک را استفاده می کنید ، مرورگر وب ممکن است برخی از کاراکترهای اشتباه را خراب کرده و نمایش دهد.

    بیشتر اوقات ، این روزها می خواهید مجموعه شخصیت های UTF-8 را مشخص کنید.

    (رمزگذاری رایج دیگر - ASCII - تمام شخصیت های گسترده مانند em-dashes و curly-نقل قول ها را ندارد. اگر تا به حال دستکش هایی از نوع عجیب دیده اید که علامت های نقل قول یا آپوستروپ ها با شخصیت های به ظاهر تصادفی جایگزین شده اند ، دلیل آن این است که این سند در آن نوشته شده است) UTF-8 اما با استفاده از ASCII نمایش داده می شود - این بدان معنی است که شخصی شخصیت صحیحی را که در سند مشخص شده است مشخص نکرده است.)

    charset ="utf-8">
    توضیحات ، نویسنده و کلمات کلیدی

    اطلاعات اولیه درباره سند - چه کسی آن را نوشت و چه چیزی راجع به آن - از طریق برچسب ها نیز منتقل می شود. این هریک دارای دو ویژگی هستند: نام برچسب ، و محتوای تگ.

    نام ="شرح" محتوا ="صفحه ای درباره HTML."> نام ="کلید واژه ها" محتوا ="HTML ، برچسب ها ، ابرداده"> نام ="نویسنده" محتوا ="آدام مایکل وود">

    این نوع اطلاعات قبلاً مخصوص اهداف SEO بوده است. دیگر موردی نیست که این نقش بزرگی را در سئو بازی کند ، اما این امر بر آن تأثیر می گذارد. مهمتر از همه ، داشتن اطلاعات صحیح و مفصل در این عناصر به یک وب معنایی کمک می کند ، جایی که کلیه محتوا توسط دستگاه ها به راحتی قابل یافت و قابل تجزیه است..

    (اگر از سیستم مدیریت محتوا استفاده می کنید ، برچسب ها و توضیحات ارسال شده در صفحه ویرایشگر معمولاً در این برچسب های متا نمایش داده می شوند.)

    عنوان

    برچسب در سر ظاهر می شود ، و معمولاً هیچ ویژگی ای ندارد. عنوان را محصور می کند.

    این عنوان صفحه است.

    عنوان باید دقیق باشد و در صورت امکان با عنوان قابل مشاهده در صفحه مطابقت داشته باشد (معمولاً در یک

    یا

    برچسب عنوان) در بدن. محتویات عنوان به طور معمول در زبانه در بالای پنجره مرورگر نمایش داده می شود.

    این است نه ایده خوبی برای قرار دادن هر برچسب دیگر در عنوان (مانند یا ) زیرا آنها معمولاً به درستی نمایش داده نمی شوند.

    یک سند HTML فقط می تواند یک عنوان را مشخص کند.

    پیوندهای CSS

    شیوه نامه ، به زبان CSS (شیوه نامه آبشار) نوشته شده ، اسناد جداگانه ای هستند که اطلاعاتی در مورد نحوه نمایش صفحه در یک مرورگر ارائه می دهند. اطلاعات مربوط به اندازه ، رنگ ، قرارگیری و فونت ها همه در شیوه نامه موجود است. جدا کردن این جزئیات از سند اصلی HTML باعث می شود بدون تأثیرگذاری روی محتوای خود سند ، آنها را تغییر دهید.

    برگه های سبک CSS با استفاده از برچسب به درون سند HTML مرتبط می شوند. ویژگی href URL فایل شیوه نامه را مشخص می کند و صفت rel مشخص می کند که این لینک یک لینک صفحه شیوه ای است (انواع پیوندهای دیگری نیز وجود دارد).

    href ="/css/style.css" rel ="صفحه شیوه">
    اطلاعات RSS

    RSS - خلاصه سایت ثروتمند یا Really Simple Syndication - راهی برای تهیه فید از به روزرسانی سایت (مانند پست های جدید وبلاگ) به مشترکین است ، به طوری که به محض ارسال ، از مطالب جدید مطلع می شوند و می توانند آن مطالب را از طریق RSS بخوانند. خواننده بدون نیاز به بازدید از سایت شما.

    اگر از سیستم مدیریت محتوا استفاده می کنید ، به طور کلی فید RSS را برای شما ایجاد می کند ، که یک سند XML است که در URL خود موجود است. این URL باید از صفحه فهرست اصلی وبلاگهای شما به آن مرتبط شود ، به طوری که خوانندگان RSS و مرورگرهای وب بتوانند به راحتی آن را پیدا کنند.

    rel ="متناوب" نوع ="برنامه / rss + xml" عنوان ="RSS" href ="/feed.xml" />

    rel ="متناوب" ویژگی به این معنی است که URL پیوند شده حاوی همان محتوای (لیستی از پست های وبلاگ) است ، اما در یک قالب جایگزین. ویژگی نوع نوع قالب (RSS) را مشخص می کند.

    سایر اطلاعات

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

    پیوندهای جاوا اسکریپت

    پیوند دادن به پرونده های JS از درون سر امکان پذیر است ، و این یک روش معمول است. با این حال ، به طور کلی بهتر است در صورت امکان این موارد را در انتهای سند قرار دهید.

    نمونه ای از سند HTML با عنصر تکمیل شده است

    html> لنگ ="en"> charset ="utf-8"> نام ="شرح" محتوا ="صفحه ای درباره HTML."> نام ="کلید واژه ها" محتوا ="HTML ، برچسب ها ، ابرداده"> نام ="نویسنده" محتوا ="آدام مایکل وود"> href ="/css/style.css" rel ="صفحه شیوه"> راهنمای HTML rel ="متناوب" نوع ="برنامه / rss + xml" عنوان ="RSS" href ="/feed.xml" /> . . . .

    مطالب

    برچسب قسمت اصلی سند HML است و ممکن است انواع مختلفی از آن را شامل شود.

    به طور معمول ، ساختار بدنه HTML را می توان به چندین بخش تقسیم کرد که هر یک ممکن است دارای یک یا چند بخش زیر باشند:

    • سرتیتر
      • آرم / نام تجاری / عنوان سایت
      • ناوبری اصلی
      • نوار جستجو
    • محتوای اصلی
      • یک یا چند مقاله
      • عنوان مقاله
      • محتوای مقاله
      • ابرداده مقاله (نویسنده ، برچسب ها ، تاریخ ارسال شده)
    • نوار کناری
      • ابزارک
      • پیمایش ثانویه (بایگانی بر اساس تاریخ ، دسته یا برچسب)
    • پاورقی
      • اطلاعات حق چاپ / مجوز
      • ناوبری سوم
      • اطلاعات تماس
      • آدرس / تلفن
      • پیوندهای اجتماعی

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

    عنصر

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

    این منجر به برچسب های تو در تو شد.

    کلاس ="سرتیتر"> کلاس ="لوگو"> کلاس ="ناو اصلی"> کلاس ="نوار جستجو"> کلاس ="محتوای صفحه"> کلاس ="اصلی"> کلاس ="مقاله"> کلاس ="عنوان مقاله">

    عنوان مقاله

    کلاس ="مقاله-متا"> کلاس ="محتوای مقاله">

    مقاله.

    محتوا.

    کلاس ="پاورقی"> کلاس ="نظرات"> کلاس ="نوار کناری"> کلاس ="پاورقی"> کلاس ="مجوز"> کلاس ="اطلاعات تماس">

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

    جداول HTML

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

    جداول چیست?

    جدول در HTML روشی برای ارائه "داده های جدولی" است - اطلاعاتی که می توانند در یک صفحه گسترده ارائه شوند. جداول در HTML جدول های دو بعدی با ردیف و ستون هستند.

    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41

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

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

    جدول نحو

    نحو اساسی

    همه جداول از

    عنصر ، سطر جدول ( ) عنصر ، و سلول جدول ( ) در یک زمان.

    ) عنصر.

    این سه عنصر به تنهایی برای یک جدول ساده کافی است. یک جدول ساخته شده است یک ردیف (

    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    سرصفحه جدول: گزینه 1

    غالباً مطلوب است که هدرها را در بالای جدول قرار دهید. یکی از راههای انجام این کار ، جایگزینی سلولهای جدول معمولی است ( ) با سلولهای هدر جدول ().

    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41

    فایده این رویکرد این است که بر کل ردیف تأثیر نمی گذارد ، فقط آن دسته از سلول هایی که به عنوان هدر مشخص می شوند. اگر این چیزی باشد که شما می خواهید اتفاق بیفتد ، فایده دارد.

    میزهای جدول (و بدن): گزینه 2

    راه دیگر برای ساخت هدرهای جدول این است که کل ردیف اول (یا چندین ردیف ، یکسان) را در یک عنصر جدول () بپیچانید..

    وقتی این کار انجام شد ، بقیه مطالب معمولاً در یک عنصر جدول () بدنه پیچیده می شوند.

    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41

    انجام این کار اجازه می دهد تا کل سطر هدر یک ظاهر طراحی شود.

    ad پس زمینه-رنگ: سیاه؛ رنگ سفید؛ font-weight: bold؛ }

    # thead-thead ad
    پس زمینه-رنگ: سیاه؛
    رنگ سفید؛
    font-weight: bold؛
    }

    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41

    شاید جالب تر اینکه ، این امر همچنین اجازه می دهد تا بدنه میز بدون اینکه روی سر تأثیر بگذارد ، یک ظاهر طراحی شود.

    tbody tr: nth-child (عجیب) { پس زمینه-رنگ: #eee؛ } tbody tr: nth-child (حتی) پس زمینه-رنگ: #fff؛ }

    # تاد-نمونه ad
    پس زمینه-رنگ: سیاه؛
    رنگ سفید؛
    font-weight: bold؛
    }
    # tbody-نمونه tbody tr: nth-child (عجیب) {
    پس زمینه-رنگ: #eee؛
    }
    # tbody-نمونه tbody tr: nth-child (حتی)
    پس زمینه-رنگ: #fff؛
    }

    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    پاورقی جدول

    در کنار یک سر میز و بدنه جدول ، همچنین می توانید یک یا چند ردیف را به عنوان متعلق به یک پاورقی جدول () تعریف کنید. اگر لازم است ردیف آخر را متفاوت از سایر ردیف ها سبک کنید ، این مفید است. معمولاً ، اگر ردیف آخر یک جمع بندی یا محاسبه بر اساس ردیف های بالای آن باشد ، ممکن است این مورد استفاده شود.

    ad پس زمینه-رنگ: سیاه؛ رنگ سفید؛ font-weight: bold؛ } tbody tr: nth-child (عجیب) { پس زمینه-رنگ: #eee؛ } tbody tr: nth-child (حتی) پس زمینه-رنگ: #fff؛ } tfoot { پس زمینه-رنگ: # 222222؛ رنگ سفید؛ font-style: italic؛ } نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    میانگین سن 34.67

    # tfoot-thead ad
    پس زمینه-رنگ: سیاه؛
    رنگ سفید؛
    font-weight: bold؛
    }
    # tfoot-نمونه tbody tr: nth-child (عجیب) {
    پس زمینه-رنگ: #eee؛
    }
    # tfoot-نمونه tbody tr: nth-child (حتی)
    پس زمینه-رنگ: #fff؛
    }

    # tfoot-نمونه tfoot
    پس زمینه-رنگ: # 222222؛
    رنگ سفید؛
    font-style: italic؛
    }

    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    میانگین سن 34.67
    ستون های جدول

    بعضی اوقات باید یک ستون جدول را سبک کنید. با استفاده از نشانه گذاری ستون می توان این مسئله را (تا حدی) بدست آورد.

    ستون ها در HTML کمی عجیب کار می کنند. از آنجا که جداول به صورت یک سری ردیف ها نوشته می شود ، ستون ها به عنوان یک روکش ثانویه روی جدول تعریف می شوند.

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

    سبک ="پس زمینه-رنگ: cyan؛"> سبک ="پس زمینه-رنگ: زرد؛"> سبک ="پس زمینه-رنگ: قرمز؛"> نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    میانگین سن 34.67
    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    میانگین سن 34.67

    هر یک از مثالهای بالا یک ستون از سلولهای جدول را شامل می شود. اگر می خواستیم از ستون های دو نام به عنوان یک واحد استفاده کنیم ، می توانستیم دهانه را دو ستون سلولی بسازیم.

    دهانه ="2" سبک ="پس زمینه-رنگ: cyan؛"> سبک ="پس زمینه-رنگ: زرد؛"> نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    میانگین سن 34.67
    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    میانگین سن 34.67

    متاسفانه در استفاده از نشانه گذاری مشکلی وجود دارد:

    • فقط از سبک های مربوط به پس زمینه ، عرض ، مرز و دید پشتیبانی می کند. این بدان معناست که شما نمی توانید مثلاً اولین ستون یک جدول را سبک کنید جسورانه.
    • از آنجا که هیچ یک از والدین یا یک عنصر کودک در هر بخش جدول (سر ، بدن ، پاورقی) نیست ، نمی توانید یک ستون خاص را در یک بخش هدف قرار دهید.
    • علاوه بر این ، بخش های جدول و ردیف های جدول خاص تر از عنصر هستند ، بنابراین سبک های اعمال شده بر روی بخش ها هر سبکی را که در بخش اعمال می شود نادیده می گیرند.

    به دلیل این موارد ، از نظر کاربردی در طراحی دکوراسیون جدول ، از کاربرد محدودی برخوردار است.

    دو راه حل معمول برای این کار وجود دارد: ویژگی های کلاس و انتخاب کننده های کودک نهم.

    برای استفاده از ویژگی های کلاس ، فقط کلاس مخصوص ستون را برای هر مورد اعمال کنید (و / یا) عنصر.

    کلاس ="col1">نام کوچک کلاس ="col2">نام خانوادگی کلاس ="col3">سن کلاس ="col1">جان کلاس ="col2">اسمیت کلاس ="col3">31 کلاس ="col1">جین کلاس ="col2">سفید کلاس ="col3">32 کلاس ="col1">تری کلاس ="col2">جونز کلاس ="col3">41 کلاس ="col1"> کلاس ="col2">میانگین سن کلاس ="col3">34.67

    البته ، این تعداد زیادی نشانه گذاری را اضافه می کند که به شدت لازم نیست. یک راه بهتر استفاده از: CSS انتخابی فرزند اول است.

    به عنوان مثال ، اگر بخواهیم ستون First Name جسورانه باشد ، و سنین نمایش با قلم قرمز و مونوسپیس - به همراه سبک های دیگر هدر و پاورقی که قبلاً تعریف شده بود?

    ad پس زمینه-رنگ: سیاه؛ رنگ سفید؛ font-weight: bold؛ } tbody tr: nth-child (عجیب) { پس زمینه-رنگ: #eee؛ } tbody tr: nth-child (حتی) پس زمینه-رنگ: #fff؛ } tfoot { پس زمینه-رنگ: # 222222؛ رنگ سفید؛ font-style: italic؛ } td: فرزند اول font-weight: bold؛ } td: فرزند آخر font-family: monospace؛ رنگ: قرمز؛ نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    میانگین سن 34.67

    # pseudocolumns-thead thead {
    پس زمینه-رنگ: سیاه؛
    رنگ سفید؛
    font-weight: bold؛
    }
    # pseudocolumns-نمونه tbody tr: nth-child (عجیب) {
    پس زمینه-رنگ: #eee؛
    }
    # pseudocolumns-نمونه tbody tr: nth-child (حتی)
    پس زمینه-رنگ: #fff؛
    }

    # pseudocolumns-نمونه tfoot
    پس زمینه-رنگ: # 222222؛
    رنگ سفید؛
    font-style: italic؛
    }

    # pseudocolumns-نمونه td: فرزند اول
    font-weight: bold؛
    }

    # pseudocolumns-نمونه td: فرزند آخر {
    font-family: monospace؛
    رنگ: # a20000؛
    }

    # pseudocolumns-نمونه tfoot td: فرزند آخر {
    رنگ: # ff3e3e؛
    }

    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    میانگین سن 34.67
    Breaking the Grid: rowspan و colspan

    گاهی اوقات داده های جدولی شما به طور مرتب در شبکه ایجاد شده توسط یک جدول قرار نمی گیرند. اگر به دهانه یا بیشتر ستون ها نیاز به یک سلول جدول دارید ، از ویژگی colspan استفاده کنید. اگر به بیش از یک ردیف نیاز دارید ، از سطر سطر استفاده کنید.

    به عنوان مثال ، جدول سنین ما دارای یک سطر پاورقی با برچسب "سن متوسط" است. این نیاز به ستون دوم خرد نمی شود. بهتر است اگر برچسب در دو ستون آخر دو سلول اول باشد.

    colspan ="2"> میانگین سن: 34.67

    # colspan-نمونه thead
    پس زمینه-رنگ: سیاه؛
    رنگ سفید؛
    font-weight: bold؛
    }
    # colspan-نمونه tbody tr: nth-child (عجیب) {
    پس زمینه-رنگ: #eee؛
    }
    # colspan-نمونه tbody tr: nth-child (حتی)
    پس زمینه-رنگ: #fff؛
    }

    # colspan-نمونه tfoot
    پس زمینه-رنگ: # 222222؛
    رنگ سفید؛
    font-style: italic؛
    }

    نام کوچک نام خانوادگی سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41
    میانگین سن 34.67

    یک نحو مشابه می تواند برای دهانه دو ردیف استفاده شود. (خوب باید یک ستون برای این کار اضافه کنیم ، زیرا ما هیچ داوطلب خوبی برای ادغام سلول نداریم.)

    نام کوچک نام خانوادگی سن گروه سطر ="2">تولید دنباله اورگان colspan ="2">میانگین سن
    جان اسمیت 31
    جین سفید 32
    تری جونز 41 نسل X
    34.67

    # thead-row-thead ad
    پس زمینه-رنگ: سیاه؛
    رنگ سفید؛
    font-weight: bold؛
    }
    # rowspan-نمونه tbody tr: nth-child (عجیب) {
    پس زمینه-رنگ: #eee؛
    }
    # rowspan-نمونه tbody tr: nth-child (حتی)
    پس زمینه-رنگ: #fff؛
    }

    # tfoot # rowspan-نمونه
    پس زمینه-رنگ: # 222222؛
    رنگ سفید؛
    font-style: italic؛
    }

    نام کوچک نام خانوادگی سن گروه
    جان اسمیت 31 تولید دنباله اورگان
    جین سفید 32
    تری جونز 41 نسل X
    میانگین سن 34.67

    جداول چیست?

    واقعاً نباید گفت ، اما:

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

    این مسئله امروزه هنوز هم مورد توجه است زیرا قبل از دوران مرورگرهای وب مبتنی بر استانداردها و نشانه گذاری معنایی ، بسیاری از افراد برای چیدمان اسناد HTML از جداول (با قوانین بسیار پیچیده سبک) استفاده می کردند..

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

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

    علاوه بر همه اینها - در مقایسه با روش صحیح انجام کارها ، طرح بندی جدول بسیار دشوار است. فقط این کار را نکنید.

    جدول لبه جدول - ترجمه های جانبی

    یکی از کاربردهای غیر داده برای جداول که کاملاً متداول است ، ترجمه در کنار هم است. گزیده ای از Dantes The Divine Comedy را در نظر بگیرید.

    # گشودگی دوزخ
    مرز: هیچ؛
    فاصله مرزی: 10px؛
    }

    Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    chà © la diritta از طریق عصر smarrita.
    در میانه سفر زندگی ما
    خودم را در تاریکی جنگلی پیدا کردم,
    برای اینکه مسیر ساده گم شده بود.
    Ahi quanto a dir qurse era è cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    آه من! چقدر حرف زدن سخت است
    این جنگل وحشی ، زبر و سخت بود,
    که در همان فکر ترس را تازه می کند.
    Tant è amara che poco è più morte؛
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    آنقدر تلخ است ، مرگ اندکی بیشتر است.
    اما از مزایای درمانی که در آنجا پیدا کردم,
    من از موارد دیگری که در آنجا دیدم صحبت خواهم کرد.

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

    # گشودگی دوزخ مرز: هیچ؛ فاصله مرزی: 10px؛ } id ="گشودن دوزخ"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    chà © la diritta از طریق عصر smarrita.
    در میانه سفر زندگی ما
    خودم را در تاریکی جنگلی پیدا کردم,
    برای اینکه مسیر ساده گم شده بود.
    Ahi quanto a dir qurse era è cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    آه من! چقدر حرف زدن سخت است
    این جنگل وحشی ، زبر و سخت بود,
    که در همان فکر ترس را تازه می کند.
    Tant è amara che poco è più morte؛
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    آنقدر تلخ است ، مرگ اندکی بیشتر است.
    اما از مزایای درمانی که در آنجا پیدا کردم,
    من از موارد دیگری که در آنجا دیدم صحبت خواهم کرد.

    فایده استفاده از جداول در این مثال این است که هر سطر بطور خودکار ارتفاع خود را بر اساس محتوا در تمام سلولهای موجود در ردیف تنظیم می کند. این مطالب ترجمه شده را در کنار منبع خود نگه می دارد ، حتی اگر یک زبان از سایر زبان ها شفاف تر باشد.

    بسیاری از توسعه دهندگان از این الگوی برای متن ترجمه شده استفاده می کنند ، و کاملا مناسب است. با این حال ، ممکن است راه بهتری وجود داشته باشد.

    HTML زیر را در نظر بگیرید:

    id ="canto-1"> کلاس ="ایتالیایی"> id ="آن-1" کلاس ="p1"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    chà © la diritta از طریق عصر smarrita.
    id ="آن-2" کلاس ="پ 2"> Ahi quanto a dir qurse era è cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    id ="آن -3" کلاس ="ص 3"> Tant è amara che poco è più morte؛
    ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    کلاس ="انگلیسی"> id ="en-1" کلاس ="p1"> در میانه سفر زندگی ما
    خودم را در تاریکی جنگلی پیدا کردم,
    برای اینکه مسیر ساده گم شده بود.
    id ="en-2" کلاس ="پ 2"> آه من! چقدر حرف زدن سخت است
    این جنگل وحشی ، زبر و سخت بود,
    که در همان فکر ترس را تازه می کند.
    id ="en-3" کلاس ="ص 3"> آنقدر تلخ است ، مرگ اندکی بیشتر است.
    اما از مزایای درمانی که در آنجا پیدا کردم,
    من از موارد دیگری که در آنجا دیدم صحبت خواهم کرد.

    با استفاده از CSS برای شناور کردن دو زبان در کنار یکدیگر و JS برای اطمینان از اینکه هر جفت پاراگراف (en-1 و it-2 و غیره) با هم یکسان هستند ، می توان جلوی مشابه را بدون استفاده از جدول ایجاد کرد - طرح مبتنی بر.

    مزایای:

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

    معایب:

    • به JavaScript نیاز دارد
    • هر پاراگراف باید در نشانه گذاری شناسایی شود.

    جداول در دنیای واقعی

    استایل های پیش فرض جداول واقعاً کاملاً غیر جذاب هستند ، بنابراین به ندرت مورد استفاده قرار می گیرند. بیشتر فریم ورک های UI جلویی (مانند بوت استرپ و اسکلت) یک ظاهر طراحی جدول پیش فرض بسیار بهبود یافته را ارائه می دهند.

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

    جداول قدرتمند هستند

    جداول احتمالاً پیچیده ترین ساختار نشانه گذاری در HTML هستند ، و در گذشته مورد سوء استفاده قرار گرفته اند تا بتوانند به عنوان ظروف برای چیدمان خدمت کنند. با این حال ، وقتی داده های جدولی باید روی صفحه نمایش داده شوند ، جدول ها راهی برای دستیابی به آن هستند.

    فرم های HTML

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

    مبانی فرم

    فرم HTML مجموعه ای از عناصر UI است که به کاربر امکان می دهد داده ها را ارائه دهد ، به همراه مکانیزمی برای ارسال آن داده به سرور.

    یک مثال بسیار اساسی ممکن است به نظر برسد:

    حتی در این فرم ساده ، می بینیم که فرصتی برای کاربر وجود دارد که داده ها (نام و نام خانوادگی) را وارد کرده و آن داده را به سرور ارسال کند..

    فرم ها می توانند بسیار پیچیده شوند و به لطف HTML5 انواع ورودی جالب زیادی هم اکنون در دسترس هستند ، اما مهم نیست که چقدر آنها پیچیده هستند ، قلب یک فرم HTML یکسان است: یک سری از عناصر ورودی کاربر به همراه روشی برای ارسال ورودی به سرور.

    چگونه یک فرم کار می کند

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

    یک فرم یک درخواست HTTP ایجاد می کند - همان نوع درخواستی که مرورگر شما هنگام بارگیری صفحه می فرستد. محتوای آن درخواست توسط مقادیر وارد شده در فرم تعیین می شود. پاسخ از سرور در واقع همان نوع پاسخ دریافت شده از بار صفحه است - و مرورگر به همان روش پاسخ می دهد ، با بارگذاری پاسخ به عنوان یک صفحه جدید.

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

    اتفاقی که با داده های درخواستی می افتد موضوع برای اسکریپت نویسی سمت سرور (PHP ، یاقوت و غیره) است ، بنابراین ما نگران این موضوع نیستیم.

    درخواست ها و روش های فرم HTTP

    فرم ها می توانند دو نوع درخواست مختلف ارسال کنند:

    • پست
    • گرفتن

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

    __ تفاوت معنایی بین POST و GET

    GET درخواست پیش فرض HTTP است و همان نوع درخواستی است که هنگام وارد کردن آدرس در نوار آدرس ، توسط مرورگر شما استفاده می شود. این درخواست برای "دریافت" چیزی است.

    POST درخواستی برای دریافت چیزی نیست بلکه درخواستی برای ارسال یا ارسال چیزی است. می توانید در مورد ارسال نامه ، ارسال وثیقه یا ارسال نشانه فکر کنید.

    تفاوت فنی

    هنگام استفاده از درخواست GET ، پارامترهای ورودی به URL وارد می شوند.

    http://example.com/search؟term= Everything+i+am+searaching+for

    با درخواست POST ، پارامترهای ورودی در URL وارد نمی شوند ، بلکه در بدنه درخواست ارسال می شوند.

    تفاوت در اینجا بر اساس معنی هر نوع درخواست منطقی است:

    • یک درخواست GET برای یک منبع خاص ، که توسط URL تعریف شده است ، درخواست می کند. بنابراین ، جزئیات آن درخواست باید در URL گنجانده شود ، زیرا این جزئیات مشخص می کند که در واقع درخواست چه منابعی را جستجو می کند.
    • یک درخواست پست در حال ارسال پیام به آدرس خاص است. آدرس در URL تعریف شده است و پیام در بدنه درخواست تعریف شده است.
    چه زمانی برای استفاده از POST و GET در فرم ها

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

    نشانه های دیگر انتخاب مناسب است:

    • دو کاربر مختلف که جزئیات مشابه را در فرم ارائه می دهند باید پاسخ های یکسان دریافت کنند.
    • پاسخ از فرم چیزی است که ممکن است مستقیماً به آن پیوند برقرار کنید.
    • به غیر از ثبت ترافیک و فعالیت ، بانک اطلاعاتی شما پس از ارسال فرم مانند گذشته است.
    • فرم فرم جستجو است.
    • کاربر برای بدست آوردن برخی اطلاعات از سایت خود ، از فرم استفاده می کند ، نه اینکه اطلاعاتی را به شما ارائه دهد.

    اگر از فرم برای ارسال اطلاعات استفاده شود ، احتمالاً POST انتخاب صحیحی است.

    سایر نشانه ها مبنی بر اینکه POST انتخاب صحیح است:

    • بسیار بعید است که دو کاربر مختلف اطلاعات یکسان را ارسال کنند.
    • بسیار بعید است که یک کاربر واحد اطلاعات بیش از یکبار را دقیقاً یکسان ارائه کند.
    • این فرم برای ارسال اطلاعات به سایت استفاده می شود ، نه برای بازیابی اطلاعات از آن.
    • ارتباط مستقیم با صفحه پاسخ بی معنی خواهد بود.
    • بانک اطلاعاتی شما پس از ارسال فرم نسبت به قبل متفاوت است.

    علاوه بر این ، دو دلیل برای استفاده از POST وجود دارد ، حتی اگر یک درخواست GET به دلایل دیگر حس بیشتری داشته باشد:

    • به دلایل امنیتی ، بهتر است پارامترهای ورودی را در URL قرار ندهید.
    • طول URL با استفاده از درخواست GET از 2000 نویسه فراتر خواهد رفت.
    از کجا می توان POST یا GET را تعریف کرد

    هر فرم با استفاده از GET یا نوع درخواست POST ، اطلاعات را به سرور ارسال می کند. این با ویژگی متد در عنصر تعریف می شود.

    روش ="گرفتن"> روش ="پست">

    روش پیش فرض GET است ، که باعث شده بسیاری از استفاده های متاسفانه از GET در هنگام انتخاب صحیح انتخاب شوند. به پیش فرض اعتماد نکنید - از روش صحیح برای وضعیت خود استفاده کنید.

    اقدام فرم - URL درخواستی

    یک فرم یا یک منبع را دریافت می کند (تعریف شده توسط URL) یا اطلاعات را به یک منبع ارسال می کند (تعریف شده توسط یک URL).

    نشانی اینترنتی منبع با ویژگی عملکردی به شکلی تعریف می شود.

    عمل ="جستجو .php" روش ="گرفتن"> عمل ="edit-post.php" روش ="پست">

    مانند صفات href و src ، URL می تواند نسبی باشد (عمل ="جستجو .php") یا مطلق (عمل =)"http://example.com/search.php").

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

    سایر خصوصیات

    ویژگی های زیر در مورد این عنصر کاربرد دارد:

    • qebûl-charset - مجموعه کاراکترهایی را که برای ارسال داده فرم استفاده می شود تعریف می کند. پیش فرض همان مجموعه شخصیت های اسناد است ، بنابراین معمولاً این مورد نیاز نیست.
    • عمل - URL هدف برای ارسال فرم. در بالا توضیح داده شده است.
    • تکمیل خودکار - قابلیت تکمیل خودکار در مرورگرهای پشتیبانی شده. مقادیر روشن یا خاموش هستند. مقدار پیش فرض روشن است. رد کردن این تنظیم روی عناصر فرم فردی امکان پذیر است.
    • enctype - نحوه رمزگذاری داده های فرم را مشخص می کند. این فقط مربوط به فرم های POST است. ارزش ها عبارتند از:
      • برنامه / x-www-form-urlencoded - همه کاراکترها قبل از ارسال کدگذاری می شوند. فضاها به + نمادها تبدیل می شوند و کاراکترهای ویژه به مقادیر ASCII HEX تبدیل می شوند. این پیش فرض است.
      • multipart / form-data - کاراکترها رمزگذاری نمی شوند. در صورت استفاده از آپلودکننده پرونده در فرم خود ، این مورد لازم است.
      • text / ساده - فضاها به + نمادها تبدیل می شوند ، اما کاراکترهای ویژه کدگذاری نمی شوند.
    • روش - دریافت یا POST
    • نام - نام فرم. معمولاً ایده خوبی است که یکی را در آن گنجانده ، و هیچ دلیلی ندارد که بتواند همان شناسه باشد.
    • novalidate - مشخص می کند که داده های فرم نباید هنگام ارسال ، به طور خودکار تأیید شوند. این ویژگی هیچ ارزشی نمی پذیرد. (با این کار مراقب باشید.)
    • target - معادل صفت هدف در پیوندهای لنگر () ، این ویژگی مشخص می کند که پاسخ از فرم باید نمایش داده شود.
      • _ self - پاسخ را در همان پنجره باز می کند. این پیش فرض است.
      • _blank - پاسخ را در یک پنجره یا برگه جدید باز می کند.
      • _parent - پاسخ را در پنجره پدر یا مادر فرم ها باز می کند.
      • _top - پاسخ را در بدنه کامل پنجره باز می کند.
      • framename - اگر قبلاً فریم هایی را در صفحه باز کرده اید و نامگذاری کرده اید ، می توانید نام یک فریم را نیز برای باز کردن پاسخ در آن مشخص کنید..

    با استفاده از عناصر فرم

    نام عناصر

    هنگامی که یک فرم به سرور ارسال می شود ، درخواست - خواه POST یا GET - شامل داده هایی است که توسط کاربر وارد فرم شده است. این داده ها در قالب یک سری از جفت های با ارزش کلیدی ارسال می شوند.

    مقدار برای هر عنصر فرم داده هایی است که توسط کاربر وارد شده است. کلید برای هر عنصر ویژگی نام برای آن عنصر است. به همین دلیل بسیار مهم است که هر عنصر ورود داده به فرم شما یک ویژگی خاص برای نام شما داشته باشد.

    عمل ="" روش ="پست"> برای ="نام کوچک">نام کوچک نوع ="متن" نام ="نام کوچک" id ="نام کوچک"> برای ="نام کوچک">نام خانوادگی نوع ="متن" نام ="نام خانوادگی" id ="نام خانوادگی"> نوع ="ارسال">
    برچسب های عنصر

    این عنصر بسیار مهم است ، زیرا برچسب را برای هر عنصر فرم تعریف می کند.

    بعضی از طراحان دوست ندارند از برچسب های فرم استفاده کنند زیرا ترجیح می دهند متن برچسب ها را در عنصر ورودی قرار دهید.

    عمل ="" روش ="پست"> نوع ="متن" نام ="نام کوچک" مکان نگهدار ="نام کوچک"> نوع ="متن" نام ="نام خانوادگی" مکان نگهدار ="نام خانوادگی"> نوع ="ارسال">

    اگرچه این ممکن است برای طراحی شما بهتر به نظر برسد ، دو مشکل جدی برای قابلیت استفاده وجود دارد:

    • از برچسب ها توسط خوانندگان صفحه استفاده می شود تا به کاربران نابینا بگویند که زمینه ها برای چه مواردی است.
    • همه مرورگرها از ویژگی “مکان یاب” پشتیبانی نمی کنند.

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

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

    برای اینکه یک عنصر برچسب به درستی کار کند ، برای صفت باید حاوی مقدار صفت باشد شناسه ویژگی موجود در عنصر ورودی.

     برای ="نام کوچک">نام کوچک
     نوع ="متن" نام ="نام کوچک" id ="نام کوچک">

    این دو هدف دارد:

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

    علاوه بر استفاده از برای ویژگی ، یک برچسب را می توان با وارد کردن ورودی در داخل ، به ورودی متصل کرد عنصر.

    
    
    رنگ

    قرمز

    آبی

    سبز

    تنظیم مقادیر پیش فرض

    مقدار ویژگی با مقدار فعلی یک عنصر ورودی فرم مطابقت دارد. با وارد کردن مقدار برای مقدار, می توانید برای هر عنصر فرم حالت پیش فرض (شروع) را تنظیم کنید.

     عمل ="" روش ="پست">
     برای ="نام کوچک">نام کوچک
     نوع ="متن" نام ="نام کوچک" id ="نام کوچک"مقدار="جان">
     برای ="نام خانوادگی">نام خانوادگی
     نوع ="متن" نام ="نام خانوادگی" id ="نام خانوادگی" مقدار ="اسمیت">
     نوع ="ارسال">
    

    برخی از توسعه دهندگان وسوسه می شوند که از این برنامه استفاده کنند مقدار ویژگی به عنوان روشی برای تهیه متن یا اشاره به کاربر از متن استفاده کنید. این معمولا یک ایده بد است ، زیرا اگر مقدار جایگزین نشود ، متن حفره یا سوراخ مکان به سرور ارسال می شود ، که تقریباً هرگز مورد نظر.

    در مثال فوق (نام افراد) ، بد است برای استفاده از مقادیر “جان اسمیت” درست به عنوان یک حفره یا اشاره به کاربر – این کاربر ممکن است این ارسال را به سرور. با این حال ، اگر این (مثلاً) یک صفحه نمایه بود ، که در آن کاربران می توانند اطلاعات شخصی خود را به روز کنند یا همان را رها کنید, سپس استفاده از ارزش از این طریق معنی دارد.

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

    غیرفعال کردن عناصر

    با افزودن عناصر ، اکثر عناصر غیرفعال می شوند معلول به آنها نسبت دهید. عناصر غیرفعال را نمی توان بر روی کلیک یا ویرایش کرد.

     عمل ="" روش ="پست">
     برای ="نام کوچک">نام کوچک
     نوع ="متن" نام ="نام کوچک" مقدار ="جان" id ="نام کوچک">
     برای ="نام خانوادگی">نام خانوادگی
     نوع ="متن" نام ="نام خانوادگی" مقدار ="اسمیت" id ="نام خانوادگی" معلول>
     نوع ="ارسال">
    

    عناصر غیرفعال هنگام ارسال فرم ، هیچ ارزشی نمی فرستند ، بنابراین در استفاده از این موارد برای نمایش داده های پروفایل (به عنوان مثال) که نمی خواهید کاربر تغییر کند ، دقت کنید..

    عنصر

    مهمترین و متنوع ترین عنصر فرم است . بر خلاف بسیاری از عناصر فرم دیگر که دارای یک عملکرد هستند عنصر برای انواع مختلفی از توابع ، از متن ساده گرفته تا تعامل پیچیده تا دکمه ها استفاده می شود (دکمه ارسال در یک فرم معمولاً عنصر).

    انواع مختلف کنترل های ورودی توسط نوع ویژگی در عنصر.

    متن را تایپ کنید

    ابتدایی ترین (و پیش فرض) نوع ورودی است متن. این یک متن متنی تک خط را تعریف می کند که می تواند برای یک نام کاربری در فرم ورود به سیستم استفاده شود یا یک فرم جستجو را در یک فرم جستجو وارد کنید..

    نوع ="متن">

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

    نوع ="متن" لیست ="گزینه ها"> id ="گزینه ها"> مقدار ="قرمز"> مقدار ="سبز"> مقدار ="آبی">
    نوع: ارسال

    دومین نوع ورودی اصلی نوع دوم است ارسال ورودی ، که دکمه ارسال فرم را تعریف می کند.

     نوع ="ارسال">

    متن پیش فرض روی دکمه ارسال “ارسال” است. این را می توان با تغییر داد مقدار صفت.

    نام ="جستجو کردن"> نوع ="ارسال" مقدار ="جستجو کردن">

    نوع ورودی دیگر رابط کاربری گرافیکی مشابهی با عنوان ایجاد می کند ارسال نوع – دکمه نوع با این حال ، از استفاده نکنید دکمه برای ارسال فرم عمومی (اصلاً کار نمی کند.) و از آن استفاده نکنید ارسال دکمه برای دکمه های عمومی در یک فرم – این کار به روش اشتباه است.

    رمز عبور را تایپ کنید

    اگر می خواهید شخصیت های وارد شده به متن را گمنام کنید ، از کلمه عبور نوع.

    برای ="نام کاربری">نام کاربری
    نام ="نام کاربری" نوع ="متن" id ="نام کاربری">

    برای ="کلمه عبور">کلمه عبور
    نوع ="کلمه عبور" نام ="کلمه عبور" id ="کلمه عبور">

    نوع ="ارسال" مقدار ="وارد شدن">
    انواع ورودی متن با اعتبار سنجی

    چندین نوع ورودی GUI یکسان را ایجاد می کنند – جعبه ای برای تایپ متن در – اما شرایط متفاوتی را برای اعتبار ورودی ایجاد می کند.

    به عنوان مثال پست الکترونیک چک کنید تا اطمینان حاصل کنید که داده های وارد شده با قالب آدرس ایمیل استاندارد مطابقت دارد (متن ، به دنبال آن @ علامت ، به دنبال متن که حداقل یک نقطه را در بر می گیرد).

    این نوع ها عبارتند از:

    • پست الکترونیک
    • عدد – فیلد فقط اعداد را می پذیرد.
    • تلفن – شماره تلفنی (اعتبار سنجی برای شماره های تلفنی به طور گسترده ای در مرورگرها پشتیبانی نمی شود.)
    • آدرس – فقط URL های خوش فرم را می پذیرد.

    این مقادیر هنگام ارسال فرم اعتبار دارند ، مگر اینکه novalidate مشخصه روی فرم یا مشخصات مشخص شده است فرمالوئیدات ویژگی در عناصر فردی مشخص شده است.

    انواع با انتخاب کننده تاریخ یا زمان

    چندین نوع ورودی عناصر UI پاپ آپ را برای انتخاب یک تاریخ و یا یک زمان از یک تقویم ایجاد می کند. این عناصر UI مبتنی بر مرورگر هستند و به صورت جهانی پشتیبانی نمی شوند.

    این نوع ها عبارتند از:

    • تاریخ
    • وقت قرار
    • زمان محلی-محلی
    • ماه
    • زمان
    • هفته
    برای ="تاریخ">نمونه ورودی تاریخ
    نوع ="تاریخ" نام ="تاریخ" id ="تاریخ">

    برای ="وقت قرار">نمونه ای از ورودی Datetime
    نوع ="وقت قرار" نام ="وقت قرار" id ="وقت قرار">

    برای ="datetime-local"> نمونه ای از Datetime Local
    نوع ="datetime-local" نام ="datetime-local" id ="datetime-local">

    برای ="ماه">نمونه ورودی ماه
    نوع ="ماه" نام ="ماه" id ="ماه">

    برای ="زمان">نمونه ورودی زمان
    نوع ="زمان" نام ="زمان" id ="زمان">

    برای ="هفته">نمونه ورودی هفته
    نوع ="هفته" نام ="هفته" id ="هفته">

    نوع: رادیو

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

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

    صفتی که چندین دکمه رادیویی را به یک مجموعه وصل می کند ، است نام صفت.

    نوع ="رادیو" نام ="شکل" مقدار ="مربع"> مربع
    نوع ="رادیو" نام ="شکل" مقدار ="دایره"> دایره
    نوع ="رادیو" نام ="شکل" مقدار ="مثلث"> مثلث
    نوع ="رادیو" نام ="رنگ" مقدار ="قرمز"> قرمز
    نوع ="رادیو" نام ="رنگ" مقدار ="آبی"> آبی
    نوع ="رادیو" نام ="رنگ" مقدار ="سبز"> سبز
    شکل



    رنگ



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

    بهترین روش برای برچسب زدن ورودی ها در مجموعه ای از دکمه های شعاعی ، پیچیدن آن است عنصر و متن برچسب در الف عنصر این باعث می شود متن برچسب قابل کلیک باشد ، استفاده از آن ساده تر است.

    
    
    نوع ="رادیو" نام ="شکل" مقدار ="مربع"> مربع
    نوع ="رادیو" نام ="شکل" مقدار ="دایره"> دایره
    نوع ="رادیو" نام ="شکل" مقدار ="مثلث"> مثلث
    نوع ="رادیو" نام ="رنگ" مقدار ="قرمز"> قرمز
    نوع ="رادیو" نام ="رنگ" مقدار ="آبی"> آبی
    نوع ="رادیو" نام ="رنگ" مقدار ="سبز"> سبز
    شکل

    مربع

    دایره

    مثلث

    رنگ

    قرمز

    آبی

    سبز

    توجه کنید که از آنجا عنصر پیچیده می شود عنصر ، برای و شناسه ویژگی لازم نیست.

    نوع: کادر انتخاب

    از نوع ورودی جعبه چک می توان برای تعریف یکی از دو نوع کنترل ورودی استفاده کرد (که هر دو مانند جعبه های چک هستند).

    نوع اول یک کلید واحد است که ممکن است چندین مقدار داشته باشد (که گاهی اوقات چند گزینه ای نامیده می شود). نوع دوم یک کلید boolean (TRUE / FALSE) است.

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

    رنگ هایی که دوست دارم
    نوع ="کادر انتخاب" نام ="رنگ" مقدار ="آبی"> آبی
    نوع ="کادر انتخاب" نام ="رنگ" مقدار ="سبز"> سبز
    نوع ="کادر انتخاب" نام ="رنگ" مقدار ="زرد"> زرد
    نوع ="کادر انتخاب" نام ="رنگ" مقدار ="قرمز"> قرمز
    رنگ هایی که دوست دارم

    رنگها

    آبی

    سبز

    زرد

    قرمز

    در این مثال ، چندگانه رنگ می توان انتخاب کرد. هر یک به عنوان پارامترهای جداگانه در درخواست ، به سرور ارسال می شوند. به عنوان مثال ، اگر همه آنها در الف انتخاب شدند گرفتن فرم ، URL درخواستی به این شکل است:

    http://example.com؟color=blue&color=green&color=yellow&color=red

    برای نشان دادن مقادیر بولی (TRUE / FALSE) همچنین می توانید از کادرهای چک جداگانه استفاده کنید.

    نوع ="کادر انتخاب" نام ="تو" مقدار ="درست است، واقعی"> با کلیک بر روی اینجا ، تأیید می کنید که با شرایط خدمات ما موافقت می کنید.

    با کلیک بر روی اینجا ، تأیید می کنید که با شرایط خدمات ما موافقت می کنید.

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

    در هر صورت ، اگر هیچ جعبه ای بررسی نشود ، نام کلید در درخواست ارسال نمی شود.

    به عنوان مثال ، در مثال رنگها در بالا ، اگر هیچ کدام از گزینه ها بررسی نشده باشد ، داده های ارسالی نمی توانست شامل هر مرجع به رنگ کلید ورودی (حتی یک مجموعه خالی نیست.)

    نوع: دکمه

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

     نوع ="دکمه" مقدار ="برچسب دکمه" onclick ="هشدار (" من یک دکمه هستم! ")">
    نوع: رنگ

    جدید در HTML5 – و فقط در برخی از مرورگرها پشتیبانی می شود – یک نوع ورودی انتخاب رنگ است.

    در مرورگرهایی که از آن پشتیبانی می کنند ، کلیک کردن روی این عنصر یک رابط کاربری گرافیکی را برای انتخاب یک رنگ ایجاد می کند. مقدار ارسال شده به سرور یک مقدار هگز رنگ HTML / CSS است (سابق. سفید = #ffffff).

    برای ="رنگ مورد علاقه">رنگ مورد علاقت چیه?
    نوع ="رنگ" نام ="رنگ مورد علاقه" id ="رنگ مورد علاقه">

    نوع: محدوده

    همچنین در HTML5 جدید ، و همچنین به پشتیبانی مرورگر نیز وابسته است دامنه ورودی این ورودی به صورت کشویی ظاهر می شود که کاربر می تواند به صورت افقی حرکت کند.

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

    
    
    برای ="فرم-فهم">چقدر خوب فرم ها را می فهمید?

    اصلا.
    نوع ="دامنه" نام ="فرم-فهم" id ="فرم-فهم" دقیقه ="0" حداکثر ="100"> خیلی خوب.

    اصلا.

    خیلی خوب.

    نوع: تصویر

    تصویر ورودی جایگزین a ارسال دکمه ، به شما امکان می دهد از یک تصویر به عنوان دکمه استفاده کنید.

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

    نوع ="تصویر" src ="مثال.jpg">
    نوع: پرونده

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

    نوع ="فایل" نام ="بارگذاری پرونده">

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

    
    
    
    نوع ="فایل" نام ="برنامه افزودنی-محدود-آپلودکننده" قبول =".png، .gif، .jpg، .jpeg">
    نوع ="فایل" نام ="آپلودکننده محدود-mime" قبول ="تصویر ، تصویر / png ، تصویر / gif ، تصویر / jpg ، تصویر / jpeg">

    پشتیبانی مرورگر برای پسوند پرونده جهانی نیست ، بنابراین لیست از نوع MIME احتمالاً راه بهتری برای پیشبرد آن است. (برای جزئیات بیشتر به این لیست از انواع MIME مراجعه کنید.)

    حتی اگر از آن استفاده کنید تایید کنید ویژگی برای محدود کردن پسوندهای پرونده که می توانند از طریق فرم بارگذاری شوند ، تأیید هر دو نوع پرونده و محتوای پرونده در سرور مهم است. حداقل به دو دلیل:

    • کاربر مخرب (یا بی دقتی) می تواند یک پرونده را با پسوند اشتباه سوءاستفاده کند. تایید کنید محدودیت در آپلودکننده فایل فقط به پسوند ، نه به فرمت واقعی فایل نگاه می کند ، بنابراین هیچ تضمینی وجود ندارد که یک پرونده از نوع مناسب باشد.
    • دور زدن فرم و ارسال مستقیم درخواست به سرور امکان پذیر است. (به همین دلیل باید کلیه ورودی ها روی سرور تأیید شود.)
    نوع: پنهان

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

     نوع ="پنهان" نام ="مقدار پنهان" مقدار ="">

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

    ویژگی های

    عنصر تعداد زیادی ویژگی دارد. برخی از آنها فقط برای انواع ورودی خاص کاربرد دارند و برخی دیگر با هر ورودی قابل استفاده هستند.

    • تایید کنید – لیستی از انواع پرونده ها ، یا با پسوند یا با نوع MIME را تعریف می کند. فقط با استفاده می شود نوع = "پرونده".
    • ارتفاع – متن alt را تعریف می کند. فقط با استفاده می شود نوع = "تصویر".
    • کامل – مشخص می کند که فیلد ورودی باید به طور کامل تکمیل شود یا خیر. ارزش ها هستند بر یا خاموش. سطح فرم را نادیده می گیرد کامل صفت. فقط برای ورودی های مبتنی بر متن قابل استفاده است.
    • فوکوس خودکار – مشخص می کند که هنگام بارگیری صفحه باید در کانون توجه باشد. هیچ ارزشی لازم نیست فقط باید یک بار در یک سند استفاده شود.
    • بررسی شد – تنظیم می کند رادیو یا جعبه چک ورودی به حالت بررسی شده.
    • معلول – غیرفعال می کند عنصر عناصر غیرفعال هنگام ارسال فرم ، ارزش خود را ارسال نمی کنند. هیچ ارزشی لازم نیست.
    • فرم – الف را مشخص می کند
      که به آن متعلق است ، برای استفاده هنگامی که عنصر خارج از عنصر ارزش است شناسه از فرم هدف. این ویژگی به طور جهانی پشتیبانی نمی شود.
    • شکل گیری – URL را برای ارسال فرم به آن مشخص می کند. نادیده گرفتن عمل ویژگی
      خود را جایگزین می کند. این فقط در مورد استفاده می شود ارسال یا تصویر انواع تنها دلیل استفاده از این به جای فرم ها عمل ویژگی در صورتی است که یک فرم به چندین دکمه ارسال با اقدامات مختلف نیاز دارد.
    • formenctype – رمزگذاری کاراکتر داده های ارسالی را مشخص می کند. نادیده گرفتن متن ویژگی
      عنصر این فقط در مورد استفاده می شود ارسال و تصویر انواع ارزش های:
      • برنامه / x-www-form-urlencoded
      • چند بخش / فرم-داده
      • متن / ساده
    • قالب – روش را مشخص می کند (گرفتن یا پست) ارسال فرم نادیده گرفتن روش ویژگی
      عنصر این فقط در مورد استفاده می شود ارسال و تصویر انواع.
    • فرمالوئیدات – مشخص می کند که داده های فرم قبل از ارسال نباید اعتبار شوند. نادیده گرفتن novalidate ویژگی
      عنصر این فقط در مورد استفاده می شود ارسال و تصویر انواع این ویژگی هیچ ارزشی ندارد.
    • برنامه ریزی – زمینه مرورگر را که در آن پاسخ نمایش داده می شود ، مشخص می کند. نادیده گرفتن هدف ویژگی
      عنصر این فقط در مورد استفاده می شود ارسال و تصویر انواع ارزش های:
      • _جای خالی
      • _خود
      • _والدین
      • _بالا
      • فریمن
    • قد – قد ، در پیکسل ها ، از آن را مشخص می کند تصویر ورودی بهتر است از CSS برای مشخص کردن این موضوع استفاده کنید.
    • لیست – مشخص می کند شناسه از یک عنصر شامل گزینه های از پیش تعریف شده فقط با ورودی های مبتنی بر متن استفاده می شود.
    • حداکثر – حداکثر مقدار را برای یک شماره یا ورودی مبتنی بر تاریخ مشخص می کند.
    • بیشترین طول – حداکثر تعداد کاراکترهای موجود در ورودی متن را مشخص می کند.
    • دقیقه – حداقل مقدار را برای یک شماره یا ورودی مبتنی بر تاریخ مشخص می کند.
    • چندگانه – مشخص می کند که کاربر می تواند بیش از یک مقدار وارد کند. استفاده شده با پست الکترونیک و فایل انواع ورودی این ویژگی هیچ ارزشی ندارد.
    • نام – نام ورودی را مشخص می کند. به عنوان کلید در یک جفت با ارزش کلیدی استفاده می شود که ورودی را هنگام ارسال فرم نشان می دهد. منحصر به فرد نام باید برای همه عناصر فرم فراهم شود.
    • الگو – عبارت معمولی را برای اعتبارسنجی مقدار ورودی مبتنی بر متن تعریف می کند.
    • محل نگه داری – متن نگهدارنده یا “یاور” را برای ورودی مبتنی بر متن تعریف می کند.
    • فقط خواندنی – مشخص می کند که یک ورودی نمی تواند توسط کاربر ویرایش شود. در رفتار مشابه معلول ویژگی ، به جز ورودیهای خواندنی انجام دادن هنگام ارسال فرم ، مقدار آنها را به سرور ارسال کنید. غالباً از JavaScript استفاده می شود تا اطمینان حاصل شود که کاربر تا زمانی که شرایط خاصی برآورده نشود ، نمی تواند یک مقدار را ویرایش کند یا پس از برآورده شدن برخی شرایط ، نمی تواند یک مقدار را تغییر دهد. این ویژگی هیچ ارزشی ندارد.
    • ضروری – مشخص می کند که باید یک مقدار داشته باشد ، یا فرم ارسال نمی شود. این ویژگی هیچ ارزشی ندارد.
    • اندازه – عرض ، در کاراکترها ، یک عنصر ورودی مبتنی بر متن را مشخص کنید. استفاده از CSS به طور معمول روش بهتری برای تحقق این امر است.
    • src – URL یک تصویر را برای آن مشخص می کند تصویر ورودی.
    • گام – فاصله بین ورودیهای معتبر را در یک ورودی مبتنی بر عدد تعریف می کند.
    • نوع – نوع آن را مشخص می کند عنصر پیش فرض است متن. همه مقادیر ممکن در همه مرورگرها پشتیبانی نمی شوند. ارزش های:
      • دکمه
      • جعبه چک
      • رنگ
      • تاریخ
      • وقت قرار
      • زمان محلی-محلی
      • پست الکترونیک
      • فایل
      • پنهان
      • تصویر
      • ماه
      • عدد
      • کلمه عبور
      • رادیو
      • دامنه
      • تنظیم مجدد
      • جستجو کردن
      • ارسال
      • تلفن
      • متن
      • زمان
      • آدرس
      • هفته
    • مقدار – مقدار شروع ورودی را مشخص می کند.
    • عرض – عرض ، در پیکسل ها ، از آن را مشخص می کند تصویر ورودی استفاده از CSS به طور معمول روش بهتری برای تحقق این امر است.

    منطقه متن

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

    # textarea-نمونه textarea
    ارتفاع: 6em؛
    عرض: 30em؛
    }

    هر متنی در داخل عنصر در قسمت متن نمایش داده می شود.


    برای ="msg">پیغام تو:

    نام ="msg" id ="msg">این متن در داخل عنصر textarea است. توسط کاربر مشاهده می شود. اگر کاربر آن را تغییر ندهد ، با فرم ارسال می شود.

    # textarea-text-نمونه textarea
    ارتفاع: 6em؛
    عرض: 30em؛
    }

    پیغام تو:

    ویژگی های مربوط به:

    • فوکوس خودکار - مشخص می کند که هنگام بارگیری صفحه باید مورد توجه قرار گیرد. فقط باید یک بار در یک سند استفاده شود. این ویژگی هیچ ارزشی ندارد.
    • cols - عرض ، در نویسه ها ، متن متن را مشخص می کند. این امر با CSS بهتر انجام می شود.
    • غیرفعال - غیرفعال می کند. عناصر فرم غیرفعال هنگام ارسال فرم ، ارزش خود را به سرور ارسال نمی کنند. این ویژگی هیچ ارزشی ندارد.
    • فرم - شناسه a را که متعلق به آن است ، مشخص می کند ، برای استفاده در عنصر موجود نیست. در همه مرورگرها پشتیبانی نمی شود.
    • حداکثر - حداکثر تعداد کاراکترهای مجاز در را مشخص می کند .
    • name - نام و نام خانوادگی را تعریف می کند و به عنوان کلید جفت ارزش کلیدی در درخواست ارسال فرم عمل می کند. همه عناصر فرم باید دارای یک نام منحصر به فرد باشند.
    • حفره یا سوراخ - متن متفرقه یا یاور را تعریف می کند که قبل از اینکه کاربر در آن تایپ کند ، درون متن نمایش داده شود.
    • readonly - مشخص می کند که یک ورودی نمی تواند توسط کاربر ویرایش شود. در رفتار با ویژگی غیرفعال مشابه است ، به جز عناصر خواندنی هنگام ارسال فرم ، مقدار خود را به سرور ارسال می کنند. غالباً از JavaScript استفاده می شود تا اطمینان حاصل شود که کاربر تا زمانی که شرایط خاصی برآورده نشود ، نمی تواند یک مقدار را ویرایش کند یا پس از برآورده شدن برخی شرایط ، نمی تواند یک مقدار را تغییر دهد. این ویژگی هیچ ارزشی ندارد.
    • موردنیاز - مشخص می کند که باید دارای ارزش باشد یا فرم ارسال نمی شود. این ویژگی هیچ ارزشی ندارد.
    • rows - ارتفاع ، در سطر متن ، متن را مشخص می کند. در بعضی موارد ، استفاده از CSS (مانند مواردی که تعداد واقعی خطوط در آن مرتبط است) ارجح است ، اما برای تعیین ساده ارتفاع ، CSS معمولاً انتخاب بهتری است..
    • بسته بندی - مشخص می کند که ورودی باید به چه سختی بسته شود (در هر خط شکستن یک کاراکتر شکست خط) یا بسته نرم را وارد کنید (یک کاراکتر شکست خط را فقط در جایی که کاربر تعریف خط را وارد کنید) وارد کنید. مقادیر نرم یا سخت هستند.

    انتخاب کنید (پایین کشید)

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

    برای ="رنگ مورد علاقه">رنگ مورد علاقت چیه?
    نام ="رنگ مورد علاقه" id ="رنگ مورد علاقه">
    مقدار ="قرمز">قرمز
    مقدار ="آبی">آبی
    مقدار ="سبز">سبز
    مقدار ="زرد">زرد

    رنگ مورد علاقت چیه?
    قرمز
    آبی
    سبز
    زرد

    گزینه ها را می توان در کنار هم گروه بندی کرد و برچسب های سطح گروهی را با عنصر به آنها داد.

    برای ="رنگ مورد علاقه">رنگ مورد علاقت چیه?
    نام ="رنگ مورد علاقه" id ="رنگ مورد علاقه">
    برچسب ="رنگهای اصلی">
    مقدار ="قرمز">قرمز
    مقدار ="آبی">آبی
    مقدار ="زرد">زرد

    برچسب ="رنگهای ثانویه">
    مقدار ="سبز">سبز
    مقدار ="نارنجی">نارنجی
    مقدار ="رنگ بنفش">رنگ بنفش

    برچسب ="در واقع رنگ نیست">
    مقدار ="سیاه">سیاه
    مقدار ="سفید">سفید
    مقدار ="خاکستری">خاکستری

    رنگ مورد علاقت چیه?
    قرمز
    آبی
    زرد

    سبز
    نارنجی
    رنگ بنفش

    سیاه
    سفید
    خاکستری

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

    ویژگی های عنصر:

    • فوکوس خودکار - مشخص می کند که عنصر هنگام بارگیری صفحه باید در کانون توجه باشد. فقط باید یک بار در یک سند استفاده شود. این ویژگی هیچ ارزشی ندارد.
    • غیرفعال - عنصر را غیرفعال می کند. عناصر غیرفعال هنگام ارسال فرم ، مقدار را به سرور ارسال نمی کنند. این ویژگی هیچ ارزشی ندارد.
    • فرم - شناسه مشخصه این عنصر را مشخص می کند ، برای استفاده از این عنصر در داخل موجود نمی باشد. در همه مرورگرها پشتیبانی نمی شود.
    • multiple - مشخص می کند که کاربر ممکن است بیش از یک مورد را انتخاب کند. چندین انتخاب به عنوان چندین جفت ارزش کلیدی ارسال می شوند. این ویژگی هیچ ارزشی ندارد.
    • name - نام عنصر ، که به عنوان کلید در یک جفت با ارزش کلیدی عمل می کند و هنگام ارائه فرم به سرور ، عنصر را نشان می دهد..
    • مورد نیاز - مشخص می کند که عنصر باید مقدار انتخابی داشته باشد یا در غیر این صورت فرم ارسال نمی شود. این ویژگی هیچ ارزشی ندارد.
    • size - تعداد گزینه های قابل مشاهده را مشخص می کند. پیش فرض 1 است.

    ویژگی عناصر عبارتند از:

    • غیرفعال - مشخص می کند که نمی توان انتخاب کرد.
    • label - برچسب را برای جایگزین کردن محتوای عنصر در صفحه کشویی مشخص می کند.
    • انتخاب شده - مشخص می کند که باید از قبل با بارگذاری صفحه انتخاب شود.
    • مقدار - مقدار ارسال شده به سرور را تعریف می کند.

    سازماندهی فرم

    با دسته بندی عناصر فرم در ظروف ، یک شکل بزرگ یا پیچیده می تواند سبک تر و استفاده شود. هر کدام را می توان با یک عنصر عنوان کرد.

    اطلاعات شخصی
    برای ="نام کوچک">نام کوچک
    نام ="نام کوچک" id ="نام کوچک">

    برای ="نام خانوادگی">نام خانوادگی
    نام ="نام خانوادگی" id ="نام خانوادگی">

    برای ="تاریخ تولد">تاریخ تولد
    نام ="تاریخ تولد" id ="تاریخ تولد">

    چیزهای مورد علاقه
    برای ="رنگ مورد علاقه">رنگ مورد علاقه
    نام ="رنگ مورد علاقه" id ="رنگ مورد علاقه">
    برچسب ="رنگهای اصلی">
    مقدار ="قرمز">قرمز
    مقدار ="آبی">آبی
    مقدار ="زرد">زرد

    برچسب ="رنگهای ثانویه">
    مقدار ="سبز">سبز
    مقدار ="نارنجی">نارنجی
    مقدار ="رنگ بنفش">رنگ بنفش

    برچسب ="در واقع رنگ نیست">
    مقدار ="سیاه">سیاه
    مقدار ="سفید">سفید
    مقدار ="خاکستری">خاکستری

    برای ="شکل مورد علاقه">شکل مورد علاقه
    نام ="شکل مورد علاقه">
    مقدار ="مثلث">مثلث
    مقدار ="مربع">مربع
    مقدار ="دایره">دایره

    نوع ="ارسال">

    فرم های یک ظاهر طراحی شده

    نمایش پیش فرض عناصر فرم در اکثر مرورگرها بسیار جذاب نیست. علاوه بر "خاکستری جنگی" از دکمه ها و UI کشویی ، معمولاً مشکلات زیادی در تراز ، ارتفاع خط و فاصله وجود دارد..

    این دو مشکل ایجاد می کند:

    • بسیاری از عناصر فرم به صورت جداگانه بد به نظر می رسند.
      • به عنوان مثال - دکمه های رادیویی و جعبه های چک معمولاً با برچسب های خاص خود مطابقت ندارند.
    • عناصر فرم با هم خوب به نظر نمی رسند.
      • به عنوان مثال - یک عنصر و یک کشویی در همان خط به درستی با یکدیگر صف نمی شوند.

    این می تواند بسیار ناامید کننده باشد.

    برخی از مشکلات - مانند ارتفاع عمودی و فواصل ، در بعضی از محبوب ترین تنظیم مجدد های CSS با آنها مواجه می شوند ، اما همه آنها نیست.

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

    به دلیل دشواری های یک ظاهر طراحی فرم ، اغلب استفاده از سبک های فرم از یک چارچوب انتهایی جلویی محبوب ایده خوبی است.

    HTML و CSS - مقدمه ای مختصر

    در این بخش زبان یک ظاهر طراحی شده وب - CSS - معرفی شده و نحوه تعامل آن با HTML توضیح داده شده است. اگرچه این یک راهنمای کامل برای موضوع نیست ، اما یک نگاه مفهومی نسبتاً عمیق به طراحی سایت ارائه می دهد. مباحث تحت پوشش شامل CSS ساختاری ، "مدل جعبه" ، یک ظاهر طراحی متن ، تایپوگرافی ، انیمیشن ها ، طراحی پاسخگو و استفاده از چارچوب های جلویی.

    CSS چیست؟?

    CSS مخفف آبشارهای سبک Cascading است. این زبانی است که برای تعریف نحوه نمایش یک سند HTML در یک صفحه استفاده می شود.

    به این ایده که "یک سند باید شامل تمام مطالب ، و فقط محتوا" باشد ، و یک سند یا برگه جداگانه باید حاوی اطلاعاتی در مورد سبک ها باشد ، "یک شیوه نامه" نامیده می شود..

    این "آبشار" نامیده می شود زیرا سبک های مربوط به نمایش متن "آبشار" از عناصر والدین تا کودک است. به عنوان مثال ، اگر CSS برای پاراگراف (

    ) رنگ متن را به رنگ آبی ، و سپس دهانه جسورانه تنظیم می کند ( ) متن یا italic () در داخل آن پاراگراف نیز به رنگ آبی خواهد بود ، مگر اینکه یک فرم سبک جدید آن را تغییر دهد.

    نحوه کار CSS - مرور کلی

    نحوه درج CSS در یک سند

    CSS را می توان درون یک عنصر در یک سند یا در پرونده های ccse جداگانه (به نام "شیوه نامه ها") که به سند HTML وصل می شوند ، درون قسمت اصلی قرار داد..

    rel ="صفحه شیوه" نوع ="متن / CSS" href ="موضوع.css">

    پ {
    font-family: Georgia, "تایمز نیو رومن", سریف؛
    }

    شما می توانید به چند صفحه سبک در یک سند واحد پیوند دهید ، و بیش از یک برچسب را درج کنید.

    تقریباً همیشه بهتر این است که CSS را از طریق یک شیوه نامه مرتبط با آن وارد کنید تا تعبیه یک عنصر در صفحه. موارد خاص وجود دارد که سبک های تعبیه شده معنی دار هستند (برای مثال ایمیل) اما قاعده کلی این است - اگر می توانید به یک صفحه سبک پیوند دهید ، باید.

    اظهارات سبک

    یک شیوه نامه به شکل یک سری از اعلامیه های سبک می باشد. موارد ذکر شده به شرح زیر است:

    [انتخاب] {
    [ویژگی]: [مقدار]؛
    [ویژگی]: [مقدار]؛
    }

    / * نظر در اینجا * /

    به این معنا که:

    • انتخاب کننده یا شناسه عنصر ، آنچه را که یک ظاهر طراحی شده مشخص می کند. موارد زیر شامل موارد زیر است:
      • نام نوع عناصر: a، p، dl و غیره. این سبک ها در مورد همه عناصر آن نوع اعمال می شود.
      • شناسه کلاس - نام کلاس ، پیشوند با نقطه (.).
      • شناسه شناسه - نام شناسه ، پیش شماره با علامت هش (#).
      • یکی از موارد فوق ، به علاوه برخی دیگر از انتخاب های خاص ، مانند یک شبه کلاسیک مانند: hover.
    • یک بریس فرفری باز ، نشانگر آغاز قوانین سبک در مورد عنصر داده شده است.
    • قوانین سبک بیان شده به عنوان جفت ویژگی با ارزش مرتبط می شوند و با نیم ستون ها خاتمه می یابد.
    • یک بند فرفری بسته شده که حاکی از پایان قوانین سبک برای آن عنصر است.

    مثلا:

    html
    رنگ: # 222222؛ / * رنگ متن - خاکستری بسیار تیره * /
    font-family: Georgia, "تایمز نیو رومن", Garamond، serif؛
    اندازه قلم: 14px؛
    ارتفاع خط: 22px؛
    }

    / * این یک نظر است. * /

    #logo {/ * سبک بر اساس شناسه عنصر * /
    رنگ: # B20000؛
    خانواده قلم: "Helvetica Neue", Helvetica ، Arial ، sans-serif؛
    }

    .ویجت {/ * سبک توسط کلاس عناصر. * /
    عرض: 100٪؛
    مرز: جامد 2px سیاه؛
    padding: 22px 11px؛
    }

    آ {
    رنگ: # 008AE6؛
    }

    یک: شناور
    رنگ: # 006EB8؛
    تزئین متن: زیر خط؛
    }

    The Document Tree

    بسیاری از افراد به سادگی به یک سند HTML به عنوان یک ساختار خطی فکر می کنند: اول ، سپس آن ، سپس ، سپس .

    با این حال ، یک سند HTML واقعا یک درخت است:

    • HTML
      • سر
      • عنوان
      • متا
      • بدن
      • سرتیتر
        • H1
        • ناو
      • اصلی
        • پ
          • آ
          • آ
          • قوی
        • اولی
          • لی
          • لی
          • لی
            • آ
      • گذشته از
        • بخش
        • بخش
        • بخش
      • پاورقی

    هر عنصر درون یک عنصر دیگر قرار دارد.

    در CSS ، برخی اظهارات سبک بر اندازه یا شکل خود عنصر تأثیر می گذارد. این تاثیری در عناصر داخل آن ندارد.

    اما سایر سبک ها روی محتویات عنصر تأثیر می گذارند - سبک هایی مانند رنگ متن ، رنگ پس زمینه ، اندازه فونت ، فاصله. گفته می شود این سبک ها در پایین درخت سند "آبشار" دارند. تمام محتویات ، از جمله سایر عناصر ، تحت تأثیر قرار می گیرند مگر اینکه یک بیانیه سبک متفاوت ، آن را در یک نقطه خاص تر رد کند.

    مثال زیر را در نظر بگیرید:

    href ="">لنگر داخل یک عنوان

    href ="">

    `تیتر داخل یک لنگر

    آ {
    رنگ آبی؛
    }

    h1
    رنگ: سبز؛
    }

    که به رنگ آبی و سبز رنگ خواهد بود?

    در این حالت ، خط اول (لنگر داخل یک تیتر) به رنگ آبی خواهد بود ، در حالی که دیگری سبز است.

    چرا?

    در مثال اول ،

    سبک سبز است ، بنابراین همه چیز درون آن باید سبز باشد. اما پس از آن ، داخل آن لنگرگاهی است که متن را به رنگ آبی رنگ می کند. لنگر خاص تر است - نزدیک به متن که به یک ظاهر طراحی شده نزدیک شود - بنابراین سبک آبی آن غالب است.

    در مثال دوم برعکس است. عنصر باید دارای محتوای آبی باشد ، اما این سبک با تیتر پرت شده است ، که محتویات آن را سبز می کند.

    انتخابگرهای CSS

    هر اعلامیه CSS با یک انتخاب کننده آغاز می شود. این می تواند یک نوع عنصر ، کلاس و شناسه یا تعدادی موارد دیگر باشد.

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

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

    #container div {
    }

    این همه عناصر موجود در عنصر #container را انتخاب می کند.

    در اینجا برخی از مهمترین قالب ها و انتخاب کننده ها انتخاب شده اند.

    • * - همه عناصر را انتخاب می کند.
    • element-name - تمام عناصر یک نوع خاص را انتخاب می کند.
    • .class-name - عناصر را با نام کلاس انتخاب می کند.
    • #id - عناصر را با شناسه انتخاب می کند.
    • element-name.class-name - عناصر یک نوع خاص را انتخاب می کند که با نام کلاس مطابقت دارد.
    • selector1، selector2 - انتخاب کننده های جدا شده با کاما با همه عناصر مشخص شده توسط selector1 یا selector2 مطابقت دارند.
    • selector1 selector2 - یکی از انتخاب کننده ها پس از انتخاب دیگر ، تنها با یک فضای ، همه عناصر مطابق انتخاب کننده2 را انتخاب می کند ، که در داخل یک عنصر مطابق انتخاب کننده قرار دارند 1.
    • انتخاب کننده 1>selector2 - همه عناصر مطابق با انتخاب کننده 2 را انتخاب می کند که فرزندان فوری انتخاب کننده هستند.
    • [ویژگی] - یک نام ویژگی در داخل براکت های مربعی همه عناصر موجود در آن را انتخاب می کند ، هر مقدار که باشد.
    • [ویژگی = مقدار] - عناصری را انتخاب می کند که دارای خاصیت خاص هستند.
    • [ویژگی ~ = رشته] - عناصری را انتخاب می کند که مقدار ویژگی های مشخص شده رشته آنها را نشان می دهد.
    • انتخاب کننده: فرزند اول - عناصری را انتخاب می کند که فرزند اول عناصر والدین آنها است. این می تواند به عنوان p اصلی: فرزند اول (به عنوان مثال) برای سبک بندی پاراگراف باز کردن در یک صفحه استفاده شود.
    • selector :: حرف اول - حرف اول از عنصر مطابق را انتخاب می کند. می توان برای ایجاد جلوه های کلاه کش استفاده کرد.
    • selector :: line first - خط اول متن را در عنصر مطابق انتخاب می کند.
    • input: fokus - وقتی فوکوس می کند ، یک فرم ورودی را سبک می کند.
    • a: hover، a: فعال، a: بازدید شده - لینک های لنگر سبک در نقاط مختلف در چرخه تعامل خود.

    علاوه بر این موارد بسیار دیگری نیز وجود دارد.

    CSS و ساختار صفحه - مدل Box

    CSS Box Model توضیحی در مورد نحوه نمایش و موقعیت عناصر سطح بلوک CSS است.

    عناصر بلاک چیست؟?

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

    تعدادی از عناصر به طور پیش فرض از سطح بلوک هستند:

    • - اطلاعات تماس.
    • - محتوای مقاله.
    • - محتوا را کنار بگذارید.
    • - پخش کننده صوتی.
    • - نقل قول طولانی ("بلوک").
    • - ترسیم بوم.
    • - توضیحات تعریف.
    • - تقسیم اسناد.
    • - لیست تعریف.
    • - برچسب تنظیم درست.
    • - عنوان تصویر.
    • - رسانه (معمولاً یک تصویر) با یک شرح.
    • - صفحه یا صفحه اصلی.
    • - فرم ورودی.
    • ,

      ,

      ,

      ,

      ,
      - عناوین.

    • - عنوان یا صفحه.
    • - قانون افقی (خط تقسیم).
    • - حاوی محتوای اصلی منحصر به فرد برای این سند است.
    • - دارای پیوندهای ناوبری است.
    • - محتوا برای استفاده در صورت پشتیبانی یا خاموش کردن برنامه نویسی.
      1. - فهرست مرتبشده.
      2. - خروجی فرم.
      3. - بند.

      4. - متن از پیش تنظیم شده.
      5. - بخش یک صفحه وب.
      6. - جدول.
      7. - بالا و پایین صفحه.
        • - لیست نامرتب.
        • - دستگاه پخش ویدئو.

        همچنین می توانید با اختصاص دادن صفحه نمایش به سبک ، هر عنصر مانند عنصر سطح بلوک رفتار کند: block؛.

        عرض و ارتفاع

        به طور پیش فرض ، عرض یک عنصر سطح بلوک 100٪ از عناصر سطح بلوک آن است که شامل هر حاشیه ، مرز یا بالشتک می باشد. (یعنی تمام عناصر از جمله حاشیه ، مرز و بالشتک در ظرف آن جای می گیرد.)

        ارتفاع پیش فرض یک عنصر سطح بلوک ، ارتفاع تمام محتوای آن ، به علاوه هر حاشیه ، مرز یا بالشتک است.

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

        نکته عجیب در مورد مشخص کردن عرض (و ارتفاع ، اما شما آن را به طور معمول انجام نمی دهید) این است که پهنای مشخص شده عرض کل عنصر نخواهد بود.

        حاشیه ، مرز و بالشتک

        علاوه بر محتوای یک عنصر ، عرض و ارتفاع کل توسط سه ویژگی دیگر تعیین می شود:

        • حاشیه - ناحیه اطراف یک عنصر.
        • مرز - یک خط در اطراف محیط عنصر.
        • بالشتک - فضای درست در داخل محیط عنصر.

        هرگونه اظهارنامه پس زمینه (مانند پس زمینه ، رنگ پس زمینه ، یا تصویر پس زمینه) منطقه محتوا ، بالشتک و حاشیه را پوشش می دهد. حاشیه زمینه را نشان نمی دهد.

        .رشته {
        عرض: 100٪؛
        پس زمینه-رنگ: # 66FF33؛ /* لیمو سبز*/
        }
        .داخل {
        عرض: 100px؛
        حاشیه: 25px؛
        مرز: خاموش 15px سیاه؛
        بالشتک: 25px؛
        پس زمینه-رنگ: # 90acff؛
        رنگ: # 002346؛
        font-weight: bold؛
        }

        کلاس ="رشته">
        کلاس ="داخل">
        این متن در داخل است. توجه کنید که از لبه داخلی جدا شده است. این ناشی از بالشتک است.

        # حاشیه-حاشیه .field field
        عرض: 100٪؛
        پس زمینه-رنگ: # 66FF33؛ /* لیمو سبز*/
        }
        # حاشیه-بالشتک-حاشیه .inside
        عرض: 100px؛
        حاشیه: 25px؛
        مرز: خاموش 15px سیاه؛
        بالشتک: 25px؛
        پس زمینه-رنگ: # 90acff؛
        رنگ: # 002346؛
        font-weight: bold؛
        }

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

        توجه: حاشیه ، مرز و بالشتک به پهنای اعلام شده توسط CSS اضافه می شود. - قد با توجه به محتوا تعیین می شود. - حاشیه در داخل آن را از سمت چپ میدان سوق می دهد ، اما در مورد بالا و پایین نیز صادق نیست. این یک سوال CSS است. برای فشار دادن عنصر داخلی از بالای ظرف آن ، می توانید بالشتک را به عنصر حاوی اضافه کنید. - حاشیه سمت چپ و راست یک عنصر بر رابطه آن با عنصر والدین خود و عناصر خواهر و برادر تأثیر می گذارد. - حاشیه در بالا و پایین یک عنصر تنها بر رابطه آن با عناصر خواهر و برادر تأثیر می گذارد. - رنگ پس زمینه مساحت محتوا ، بالشتک و حاشیه را پر می کند ، اما حاشیه آن نیست.

        از آنجا که عرض کل شامل عرض اعلام شده و همچنین عرض هر حاشیه ، مرز و بالشتک است ، اعلامیه زیر کار نمی کند:

        div {
        عرض: 100٪؛
        حاشیه: 5px؛
        بالشتک: 15px؛
        }

        اگر کاری شبیه به این انجام دهید ، می فهمید که قسمت سمت راست عنصر حاوی آن را تا 40 برابر افزایش می دهد.

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

        div {
        حاشیه: 5px؛
        بالشتک: 15px؛
        }

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

        عناصر شناور

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

        # کانتینر {
        عرض: 400px؛
        پس زمینه-رنگ: #eeeeee؛
        بالشتک: 20px؛
        }
        #container div {/ * همه غواصی را که عناصر کودکان # کانتینر هستند هدف قرار می دهد. * /
        ارتفاع: 50px؛
        }
        #قرمز {
        پس زمینه-رنگ: قرمز؛
        }
        #آبی {
        پس زمینه-رنگ: آبی؛
        }
        #سبز {
        پس زمینه-رنگ: سبز؛
        }

        id ="ظرف">
        id ="قرمز">
        id ="آبی">
        id ="سبز">

        # div-stack .container
        عرض: 400px؛
        پس زمینه-رنگ: #eeeeee؛
        بالشتک: 20px؛
        }
        # div-stack .container div {
        ارتفاع: 50px؛
        }
        # div-stack .red
        پس زمینه-رنگ: قرمز؛
        }
        # div-stack .blue
        پس زمینه-رنگ: آبی؛
        }
        # div-stack .green
        پس زمینه-رنگ: سبز؛
        }

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

        # کانتینر {
        عرض: 400px؛
        پس زمینه-رنگ: #eeeeee؛
        بالشتک: 20px؛
        }
        #container div {
        ارتفاع: 50px؛
        عرض: 50px؛
        }
        #قرمز {
        پس زمینه-رنگ: قرمز؛
        }
        #آبی {
        پس زمینه-رنگ: آبی؛
        }
        #سبز {
        پس زمینه-رنگ: سبز؛
        }

        id ="ظرف">
        id ="قرمز">
        id ="آبی">
        id ="سبز">

        # div-stack-skinny .container
        عرض: 400px؛
        پس زمینه-رنگ: #eeeeee؛
        بالشتک: 20px؛
        }
        # div-stack-skinny .container div {/ * همه divهایی که عناصر کودکان #container هستند را هدف قرار می دهد. * /
        ارتفاع: 50px؛
        }
        # div-stack-skinny .red
        پس زمینه-رنگ: قرمز؛
        }
        # div-stack-skinny .blue
        پس زمینه-رنگ: آبی؛
        }
        # div-stack-skinny .green
        پس زمینه-رنگ: سبز؛
        }

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

        برای ساختن این سایت جعبه ای سه رنگ در کنار یکدیگر ، فقط باید شناور اضافه کنیم: سمت چپ یا شناور: درست به هر سه مورد آنها.

        # کانتینر {
        عرض: 400px؛
        پس زمینه-رنگ: #eeeeee؛
        بالشتک: 20px؛
        }
        #container div {
        ارتفاع: 50px؛
        عرض: 50px؛
        شناور به سمت چپ؛
        }
        #قرمز {
        پس زمینه-رنگ: قرمز؛
        }
        #آبی {
        پس زمینه-رنگ: آبی؛
        }
        #سبز {
        پس زمینه-رنگ: سبز؛
        }

        id ="ظرف">
        id ="قرمز">
        id ="آبی">
        id ="سبز">

        # div-float .container
        عرض: 400px؛
        پس زمینه-رنگ: #eeeeee؛
        بالشتک: 20px؛
        }
        # div-float .container div {/ * تمام divهایی که عناصر کودکان #container هستند را هدف قرار می دهد. * /
        ارتفاع: 50px؛
        }
        # div-float .red
        پس زمینه-رنگ: قرمز؛
        }
        # div-float .blue
        پس زمینه-رنگ: آبی؛
        }
        # div-float .green
        پس زمینه-رنگ: سبز؛
        }

        اطلاع:

        • اولین بلوک رنگی (#red) در سمت چپ ظرف قرار دارد و پس از آن #blue و #green قرار دارد.
        • آنها هیچ حاشیه ای ندارند ، بنابراین مستقیم در کنار یکدیگر هستند.
        • بالشتک در قسمت داخل # کانتینر بلوک ها را به سمت پایین و دور از گوشه سمت چپ بالا هل می دهد.

        اما - اوه نه - با عنصر # کانتینر چه خبر است؟ چرا بلوک های رنگی از آن آویزان شده اند?

        مشکل شناورها وجود دارد: یک عنصر شناور ، به طور پیش فرض ، به ارتفاع ظرف آن کمک نمی کند. بنابراین ارتفاع ظرف با جمع زیر تعیین می شود:

        • اعلام ارتفاع آن در صورت داشتن یک (این یکی از آن) یا محتوای غیر شناور آن اگر دارای ارتفاع اعلام شده نباشد (در این حالت ، آن را نیز ندارد)
        • بالشتک عمودی (بالا و پایین)
        • مرزهای عمودی (بالا و پایین)
        • حاشیه عمودی (بالا و پایین)

        ارتفاع داخلی عنصر # کانتینر در این حالت صفر است و ارتفاع کل فقط 2 برابر اندازه بالشتک آن است.

        این یک مشکل بسیار آزار دهنده و بسیار رایج است. راه حل (کمی هک) راه حل clefix نامیده می شود. گزینه های مختلفی برای چگونگی تکمیل این گزینه وجود دارد ، اما برای نمونه های ما می خواهیم از ساده ترین آن استفاده کنیم ، اضافه کردن سرریز: خودکار به #container. این کار نمی کند در همه مرورگرها یا در همه زمینه ها ، اما در اکثر مرورگرها به خوبی کار می کند که برای مثالهای ما در اینجا خوب است.

        در اینجا نتیجه اضافه کردن شفاف است.

        # کانتینر {
        عرض: 400px؛
        پس زمینه-رنگ: #eeeeee؛
        بالشتک: 20px؛
        سرریز: خودکار؛
        }
        #container div {
        ارتفاع: 50px؛
        عرض: 50px؛
        شناور به سمت چپ؛
        }
        #قرمز {
        پس زمینه-رنگ: قرمز؛
        }
        #آبی {
        پس زمینه-رنگ: آبی؛
        }
        #سبز {
        پس زمینه-رنگ: سبز؛
        }

        id ="ظرف">
        id ="قرمز">
        id ="آبی">
        id ="سبز">

        # div-float-fix. کانتینر {
        عرض: 400px؛
        پس زمینه-رنگ: #eeeeee؛
        بالشتک: 20px؛
        }
        # div-float-fix .container div {/ * همه divهایی که عناصر کودکان #container هستند را هدف قرار می دهد. * /
        ارتفاع: 50px؛
        }
        # div-float-fix .red
        پس زمینه-رنگ: قرمز؛
        }
        # div-float-fix .blue
        پس زمینه-رنگ: آبی؛
        }
        # div-float-fix .green
        پس زمینه-رنگ: سبز؛
        }

        حال اگر حاشیه ها ، لنت ها ، محتوا و رنگ های کم نظیر را اضافه کنیم ، می بینید که چگونه می توان این ایده اصلی را به یک محتوای استاندارد + طرح نوار کناری تبدیل کرد.

        # کانتینر {
        پس زمینه-رنگ: #eeeeee؛
        سرریز: خودکار؛
        بالشتک: 20px؛
        عرض: 600px؛
        }

        اصلی
        شناور به سمت چپ؛
        پس زمینه-رنگ: #efefef؛
        عرض: 300px؛
        بالشتک: 15px؛
        حاشیه سمت راست: 20px؛
        }

        گذشته از {
        شناور به سمت چپ؛
        پس زمینه-رنگ: #dedede؛
        بالشتک: 15px؛
        عرض: 220px؛
        }

        id ="ظرف">

        لورم اپیسوم

        Lorem ipsum dolor sit amet، consectetur adipiscing elit. Curabiturium premium، mi eu elementum ullamcorper، dui justo egestas turpis، turcis auctor seduct turpis tellus eget augue. عجیب و غریب malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        در arcu metus ، finibus id dolor a، interdum lacinia lectus. حلقه های حلقوی حلقوی واستیبولوم از eve tintidunt sodales. Quisque efficitur a turpis nec scelerisque. Donec Commodo ، diam id resultat sodales، justo quam posuere libero، torting non fringilla ante dui id tortor. اثر آن در ipsum nec pellentesque.

        بایگانی

        • مه 2015
        • آوریل 2015
        • مارس 2015
        • فوریه 2015
        • ژانویه 2015

        # نوار کناری ساده .کنترل {
        پس زمینه-رنگ: #eeeeee؛
        سرریز: خودکار؛
        بالشتک: 20px؛
        عرض: 600px؛
        }

        # اصلی-نوار کناری اصلی {
        شناور به سمت چپ؛
        پس زمینه-رنگ: #efefef؛
        عرض: 300px؛
        بالشتک: 15px؛
        حاشیه سمت راست: 20px؛
        }

        # کنار-ساده کنار کنار ide
        شناور به سمت چپ؛
        پس زمینه-رنگ: #dedede؛
        بالشتک: 15px؛
        عرض: 220px؛
        }

        لورم اپیسوم

        Lorem ipsum dolor sit amet، consectetur adipiscing elit. Curabiturium premium، mi eu elementum ullamcorper، dui justo egestas turpis، turcis auctor seduct turpis tellus eget augue. عجیب و غریب malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        در arcu metus ، finibus id dolor a، interdum lacinia lectus. حلقه های حلقوی حلقوی واستیبولوم از eve tintidunt sodales. Quisque efficitur a turpis nec scelerisque. Donec Commodo ، diam id resultat sodales، justo quam posuere libero، torting non fringilla ante dui id tortor. اثر آن در ipsum nec pellentesque.

        بایگانی

        • مه 2015
        • آوریل 2015
        • مارس 2015
        • فوریه 2015
        • ژانویه 2015

        #### __Extra

        s__

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

        متأسفانه دنیای واقعی به دور از کامل نیست. در طول دهه گذشته چیزها بسیار بهتر شده اند ، اما هنوز هم مواقعی وجود دارد که بدون نیاز به یک عنصر عجیب و غریب اضافه کنید به جز اینکه باعث می شود صفحه به روش صحیح نمایش داده شود.

        بیشتر وبلاگها - احتمالاً بیشتر وب سایتها - از یک الگوی معمولی پیروی می کنند:

        • بخش هدر که طول صفحه را در بر می گیرد
        • مساحت محتوای مرکزی به دو ستون تقسیم می شود:
          • 2/3 از عرض برای محتوای اولیه
          • 1/3 از عرض برای نوار کناری ویجت
        • بخش پاورقی که پهنای صفحه است.

        نشانه گذاری ایده آل برای این ساختار سند:

        متأسفانه ، تقریباً هیچ راهی وجود ندارد که اجزاء و عناصر در کنار یکدیگر بدرستی نشسته باشند ، مگر اینکه بتوانند درون یک عنصر حاوی شناور شوند..

        بنابراین ، معمول ترین ساختار نشانه گذاری برای یک طرح وبلاگ معمولی به صورت زیر چنین است:

        id ="ظرف">

        این اغلب اتفاق می افتد که عناصر کانتینر مشابه به منظور دستیابی به صفحه به درستی نمایش داده می شوند. اصلاً نگران این موضوع نباشید - وب به همان اندازه یک مجموعه اسناد مبتنی بر متن است.

        CSS برای یک ظاهر طراحی متن

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

        آبشار

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

        وقتی سبکی را اضافه می کنید که روی محتوا تأثیر بگذارد (بر خلاف شکل عنصر ، اندازه ، یا قرارگیری) ، این سبک به پایین درخت سند می رسد. بنابراین هر سبکی که برای تأثیرگذاری بر تمام مطالب اعمال شود ، در حالی که هر سبکی که اعمال شود بر تمام محتوای داخل آن تأثیر می گذارد ، اما خارج از آن نیست.

        پیامد عملی این امر این است که شما باید شیوه نامه خود را از حالت کلی تا خاص بسازید. شما معمولاً باید یک فونت پایه را در قسمت متن تنظیم کنید ، که اکثر مطالب شما را در بر می گیرد و سپس فونت هایی را که از آن منحرف می شوند (مانند منوها یا دکمه ها) در یک نقطه خاص که متفاوت هستند تنظیم کنید..

        هر نوع اظهارنامه مربوط به تایپوگرافی باید در عمومی ترین (بالاترین در درخت) نکته ای که برای آن اعمال می شود درج شود. این به جلوگیری از سبک های تکراری کمک می کند.

        سبک ها

        اعلامیه های سبک که بیشتر مربوط به سبک بندی متن و تایپوگرافی می باشد عبارتند از:

        font-family: فونت (های) مورد استفاده را مشخص می کند. : بهترین کار این است که لیستی از قلم ها را شروع کنید ، با شروع از فونت دلخواه خود و یک سری از خطوط سقوط ، که با یک خانواده قلم عمومی شروع می شود. : نام قلم هایی که شامل فضاها هستند باید در علامت نقل قول بسته شوند. : font-family: Garamond، Georgia, "تایمز نیو رومن", سریف؛

        font-size: اندازه متن را مشخص می کند. : می تواند به اندازه پیکسل (14 پیکسل) ، ایمیل چاپی بر اساس اندازه متن والدین (1EM) ، درصد بر اساس متن متن والدین (115٪) ، نام اندازه توصیفی (کوچک ، متوسط ​​، بزرگ) یا توصیف مقایسه ای بر اساس اندازه متن والدین (کوچکتر ، بزرگتر). : font-size: 14px؛

        line-height: ارتفاع یک خط از متن را مشخص می کند. : این معمولاً باید از اندازه قلم بزرگتر باشد. یک خط از متن به طور معمول درون ارتفاع خط محور است. : ارتفاع خط را می توان در پیکسل ها ، ایمیل ها یا درصد ها مشخص کرد. همچنین می تواند به عنوان چند برابر اندازه فونت تنظیم شود. این با حذف یک پسوند واحد انجام می شود. : خط-ارتفاع: 1.4؛

        margin-bottom: حاشیه زیر پاراگرافها ، عناوین ، لیست ها و سایر عناصر تایپوگرافی به خوانایی کلی کمک می کند. : این ویژگی باید روی هر عنصر آسیب دیده تنظیم شود ، نه بر روی سند یا بخش. : به طور معمول ، تنظیم حاشیه پایین برابر با طول خط بهترین نتایج را ایجاد می کند. : margin-bottom: 1.4em؛

        رنگ: رنگ پیش فرض متن سیاه است. ممکن است بخواهید این مسئله را به موضوعی کمتر واضح تغییر دهید. : رنگ: # 111111؛ : همچنین ، پیوندها مجموعه ای از رنگ های پیش فرض را نشان می دهند که از بازدید بازدید شده اند یا خیر ، و رنگی را نشان می دهد که حالت فعال آنها را نشان می دهد. : به طور معمول ، رنگ پیوند پیش فرض به خصوص مطلوب نیست. به منظور تغییر رنگ برای حالتهای مختلف استفاده از برچسب لنگر: a: link (پیش فرض) ، a: hover ، a: بازدید شده و a: فعال. : a: hover {color: # 3399FF؛ }

        font-weight: Font-وزنی خاصیتی است که کنترل می کند متن متن پررنگ یا عادی است. : با توجه به مشخصات ، می توانید از یک عددی برای تنظیم وزن با دقت بسیار بالا استفاده کنید. با این حال ، این توسط بسیاری از فونت ها یا مرورگرها به خوبی پشتیبانی نمی شود ، و این یک روش معمول نیست. : رایج ترین استفاده از وزن قلم ، ساده تر کردن جسورانه است. : strong {font-weight: bold؛ }

        font-style: برای نشان دادن نوع ایتالیایی از سبک قلم استفاده می شود. : مقادیر مرتبط طبیعی و نرمال است. (گزینه سوم ، اریب ، بندرت استفاده می شود.) em {font-style: italic؛

        تزئین متن: برای اضافه کردن یک خط به متن متن استفاده می شود: over (Overline - به ندرت استفاده می شود) ، از طریق (خط به خط - برای متن حذف شده استفاده می شود) ، یا زیر (underline - برای لینک ها و گاهی برای سرفصل ها استفاده می شود) . : a {متن-دکوراسیون: زیر خط؛ }

        تبدیل متن: این ویژگی به شما امکان می دهد تا سرمایه متن را کنترل کنید. : مقادیر مرتبط عبارتند از: سرمایه گذاری (عنوان مورد) ، حروف بزرگ (ALL CAPS) و حروف کوچک (همه موارد کوچک). : h3 {تبدیل متن: حروف بزرگ؛ }

        font-variant: از این برای تعیین کلاه های کوچک استفاده می شود. این همه حروف کوچک در محتوا را به حروف بزرگ در اندازه قلم کوچکتر تنظیم می کند. : h1 {font-variant: کلاه های کوچک؛ }

        @ font-face: این خاصیتی نیست که به یک عنصر اختصاص داده شود ، اما به عنوان انتخاب کننده در یک سند CSS عمل می کند. برای تعریف یک خانواده جدید از قلم استفاده می شود. این امر به طراحان این امکان را می دهد تا به جای تکیه بر قلم های سیستم رایانه های مشتری ، هر نوع فونت مورد نظر خود را مشخص کنند. : ویژگی font-family نام قلم جدید را (برای استفاده در ویژگی قلم خانواده از عناصر دیگر استفاده می کند) تعریف می کند ، و ویژگی src یک پرونده قلم را مشخص می کند. : همه قالبهای پرونده فونت در همه مرورگرها پشتیبانی نمی شوند. بیشترین قالب های پشتیبانی شده TTF ، OTF و WOFF هستند (اما نه WOFF2). : اگر تغییرات یک قلم (جسورانه ، ایتالیایی) به پرونده های فونت جداگانه ای نیاز دارند ، می توان چندین اعلامیه font-face را تنظیم کرد ، هر یک دارای ویژگی src متفاوت هستند و با خصوصیات اضافی متن خود را مشخص می کنند (برای مثال - وزن قلم: bold ؛): @ font-face {font-family: myNewFont؛ src: url (myNewFont.woff؛

        نکات تایپوگرافی

        تایپوگرافی وب دشوار است. نمایش پیش فرض متن در اکثر مرورگرها واقعاً غیرقابل توجه است ، و به نظر رسیدن متن مناسب و قابل خواندن ، یک مسئله غیر مهم است.

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

        • از یک صفحه متنی استفاده کنید که شامل تمام سبک های تایپوگرافی ممکن است. بسیاری از طراحان تایپوگرافی وب لیست های توضیحات () ، بلاک ها () ، عناوین را فراموش می کنند

          (

          ,

          ,
          ) و سایر سبکهای نادر استفاده می شود. با این حال ، اگرچه آنها به ندرت مورد استفاده قرار می گیرند ، آنها مورد استفاده قرار می گیرند. حتماً شامل لیست های تو در تو ، تصاویر با زیرنویس ها و بدون آنها ، و نمونه های کد نیز باشید (اگر درباره فناوری می نویسید).
        • توجه کنید که چگونه حاشیه عناصر با یکدیگر و متن آنها ارتباط برقرار می کنند. به عنوان مثال ، معمول است که یک حاشیه را در عناوین قرار دهید. این ممکن است در برخی زمینه ها معنا پیدا کند ، اما اگر اولین عنصر آن باشد ، ممکن است این درست نباشد. به طور مشابه ، یک سرفصل مقطعی پس از یک پاراگراف ممکن است در یک کپی از یک فضای خط پایان یابد ، ایجاد یک شکاف بصری بیشتر از حد مورد نظر.
        • از مقدار ارتفاع خط به عنوان یک مقیاس استفاده کنید تا متن صفحات در یک ریتم ثابت نگه داشته شود. فونت های بزرگتر از اندازه خط جهانی (عناوین اصلی) باید اندازه خط خود را بر روی چند برابر از ارزش جهانی تنظیم کنند. همچنین از مقادیر خط برای حاشیه های زیر عناصر و برای قسمت های تنظیم شده (داخل) استفاده کنید.
        • معمول است که پاراگراف ها را با یک خط شکسته دو برابر کنید (که با مجموعه حاشیه پایین به همان مقدار خط خط انجام می شود). همچنین متداول است که پاراگرافها را به تورفتگی نکشید.
        • لیست ها معمولاً به نظر می رسد که در فاصله مشابه خط ارتفاع (یا چند برابر آن) قرار بگیرند (حاشیه سمت چپ).
        • لیست های توضیحات یک ظاهر طراحی پیش فرض واقعا بد دارند. آنها به طور کلی با تنظیم کامل لیست ، لیست پررنگ و تنظیم حتی بیشتر به نظر می رسند.
        • تنظیم اندازه قلم اولیه برای یک صفحه در 12px بسیار معمول است ، اما این خیلی قابل خواندن نیست. 14px یا حتی 16px را به عنوان اندازه قلم پایه جهانی (بسته به نوع فونت-خانواده) در نظر بگیرید.
        • ترک رنگ قلم سیاه (پیش فرض) بسیار متداول است اما معمولاً یک خاکستری بسیار تیره جذاب و خواندنی تر است.
        • پیوندها () تقریباً در همه مرورگرها از ابتدای اینترنت به طور پیش فرض آبی بوده اند. حتی اگر می خواهید رنگ پیوندها را متناسب با مارک تجاری خود تغییر دهید (و باید) ، احتمالاً باید سایه ای از رنگ آبی باشد. همچنین ، در استفاده از متن آبی در مکان های دیگر مراقب باشید ، زیرا ممکن است به کاربران علامت گذاری شود که باید بتوانند روی متن کلیک کنند.
        • به طور مشابه ، متن زیرین یک سیگنال تقریبا جهانی است که چیزی قابل کلیک است. این کنوانسیون را با خطر خود تغییر دهید.
        • این امر برای جلوگیری از قلمهای سری در وب و استفاده از فونتهای بدون sif فقط یک توصیه معمول بود. این توصیه خوبی بود زیرا فونت های سری در صفحه های با وضوح پایین نیز ارائه نمی شوند. با این حال ، این دیگر نگرانی بیشتر افراد نیست. استفاده از یک فونت سریف (مانند جورجیا ، تایمز یا گاراموند) می تواند خواندن متن را بیشتر کند.
        • به طور کلی ، شما بیش از سه قلم در یک صفحه نمی خواهید:
          • یک قلم محتوا ، که می تواند سری باشد یا بدون sans.
          • یک فونت منو و ناوبری ، که معمولاً باید بدون sif serif باشد ، و همچنین ممکن است مانند قلم محتوای شما باشد.
          • یک قلم برای نمونه کد (در صورت انجام چنین کارهایی) ، که باید یک قلم monospace مانند پیک یا کنسول باشد.
        • "اندازه گیری" یک متن تعداد کاراکترها در هر خط است. اندازه گیری بیش از 80 کاراکتر طولانی قابل خواندن نیست. اکثر متخصصان اندازه گیری ایده آل را در حدود 65 کاراکتر در هر خط تعیین می کنند. این تابعی از عرض ناحیه محتوای شما و اندازه قلم شماست.
        • اگر از @ font-face برای وارد کردن فونت خود بر روی یک صفحه استفاده می کنید ، مطمئن شوید که چگونه این امر در چندین مرورگر به نظر می رسد. برخی مرورگرها قلمهای خاصی را ضعیف ارائه نمی دهند. همچنین حتما قلم های برگشتی را در اعلامیه های خانواده فونت خود وارد کنید - همیشه نمی توانید برای کار در هر موقعیتی روی @ font-face حساب کنید..

        انیمیشن CSS

        CSS به شما امکان می دهد عناصر HTML را بدون Javascript تحریک کنید. برای جلوه های ساده ، این می تواند بسیار راحت باشد. این سریعتر از جلوه های مشابه ایجاد شده در Javascript است و حتی در مرورگرهایی که جاوا اسکریپت را غیرفعال می کنند پشتیبانی می شوند.

        کلیدهای کلید

        یک انیمیشن با انتخاب CSS بنامkeyframes تعریف شده است. اعلانkeyframes دارای یک نام و مجموعه ای از قوانین سبک برای نقاط مختلف (فریم های کلیدی) در انیمیشن است.

        keyframes colorChange
        از جانب {
        پس زمینه-رنگ: قرمز؛
        }
        به {
        پس زمینه-رنگ: آبی؛
        }
        }

        در مثال بالا ، انیمیشن "colorChange" باعث می شود یک عنصر رنگ پس زمینه را از قرمز به آبی تغییر دهد.

        بیشتر از رنگ قابل انیمیشن است. استفاده از قوانینkeyframes برای تنظیم موقعیت باعث می شود عنصر آسیب دیده از مکانی به مکان دیگر منتقل شود.

        keyframes moveLeft
        از جانب {
        موقعیت: نسبی؛
        سمت چپ: 100px؛
        به {
        موقعیت: نسبی؛
        سمت چپ: 0px؛
        }
        }

        همچنین با استفاده از درصد ها می توانید یک انیمیشن چند نقطه ای را نیز مشخص کنید.

        keyframes moveAround

        بالا: 0px؛
        سمت چپ: 0px؛
        }
        25٪
        بالا: 0px؛
        سمت چپ: 50px؛
        }
        50٪
        بالا: 50px؛
        سمت چپ: 50px؛
        }
        75٪
        بالا: 50px؛
        سمت چپ: 0px؛
        }
        100٪
        بالا: 0px؛
        سمت چپ: 0px؛
        }
        }

        این انیمیشن باعث می شود تا یک عنصر متحرک به سمت بالا ، پایین ، عقب و سپس به موقعیت اصلی خود برگردد.

        اختصاص انیمیشن به عناصر

        انیمیشن ها به طور جداگانه از عناصری که تأثیر می گذارند تعریف می شوند. انیمیشن ها مطابق شکل بالا در اعلان هایkeyframes تعریف شده اند و سپس برای عناصر اعمال می شوند.

        انیمیشن ها با استفاده از نامkeyframe و مدت زمانی که انیمیشن باید دوام داشته باشد ، روی عناصر اعمال می شود. سایر ویژگی ها می توانند روی انیمیشن نیز تأثیر بگذارند.

        keyframes colorChange
        از جانب {
        پس زمینه-رنگ: قرمز؛
        }
        به {
        پس زمینه-رنگ: آبی؛
        }
        }

        .تغییر رنگ {
        عرض: 100px؛
        ارتفاع: 100px؛
        نام انیمیشن: colorChange؛
        مدت زمان انیمیشن: 5 ثانیه؛
        }

        keyframes colorChange
        از جانب {
        پس زمینه-رنگ: قرمز؛
        }
        به {
        پس زمینه-رنگ: آبی؛
        }
        }

        @ -webkit-keyframes colorChange
        از جانب {
        پس زمینه-رنگ: قرمز؛
        }
        به {
        پس زمینه-رنگ: آبی؛
        }
        }

        # رنگ-تغییر-نسخه ی نمایشی. تغییر رنگ {
        عرض: 100px؛
        ارتفاع: 100px؛
        نام انیمیشن: colorChange؛
        مدت زمان انیمیشن: 5 ثانیه؛
        -webkit-animation-name: colorChange؛
        -وب سایت-انیمیشن-مدت زمان: 5 ثانیه؛
        }

        اگر مدت انیمیشن را تنظیم نکنید ، انیمیشن اجرا نمی شود ، زیرا مقدار پیش فرض 0 است.

        چندین ویژگی انیمیشن دیگر نیز قابل تنظیم است:

        • انیمیشن-تأخیر - تأخیر برای شروع انیمیشن را مشخص می کند. پیش فرض 0 است ، به این معنی که انیمیشن بلافاصله پخش خواهد شد. معمولاً در ثانیه (ثانیه) ذکر می شود ، اما می تواند در ثانیه (میلی ثانیه) نیز ذکر شود..
        • animation-Direction - مشخص می کند که آیا یک انیمیشن باید به صورت عادی (پیش فرض) ، به صورت معکوس اجرا شود یا به طور متناوب بین جلو حرکت کند. مقدار جایگزین فقط در صورتی کار می کند که انیمیشن-تکرار-شمارش بالاتر از 1 باشد.
        • انیمیشن-پر کردن حالت - تعریف می کند که آیا ، و چگونه ، سبک های انیمیشن باید در هنگام اجرای انیمیشن روی عنصر تأثیر نگذارند (چه موقع به پایان رسید ، یا چه موقع تأخیر وجود دارد).
          • طبیعی - پیش فرض. سبک های انیمیشن هنگام پخش این عنصر هیچ تاثیری در این عنصر ندارند.
          • Forward - آخرین سبک keyframe (در صورتی که انیمیشن به صورت معکوس اجرا نشود) به 100٪ اعمال می شود.
          • به عقب - اولین سبک keyframe (از 0٪ یا اگر انیمیشن به صورت معکوس اجرا نشود) روی عنصر اعمال می شود.
        • animation-iteration-count - تعداد دفعاتی که یک انیمیشن باید بازی شود را مشخص می کند.
        • انیمیشن-زمان-عملکرد - منحنی سرعت انیمیشن را مشخص می کند:
          • سهولت - انیمیشن به آرامی شروع می شود ، سرعت می یابد و سپس به آرامی پایان می یابد.
          • سهولت در - انیمیشن به آرامی شروع می شود ، سرعت می یابد و با سرعت کامل به پایان می رسد.
          • سهولت - انیمیشن با سرعت کامل شروع می شود ، اما با تمام شدن سرعت آن کند می شود.
          • linear - انیمیشن از ابتدا تا انتها با سرعت کامل اجرا می شود.
        پشتیبانی مرورگر برای انیمیشن ها

        اکثر مرورگرهای اصلی از انیمیشن های CSS پشتیبانی می کنند ، اما با مرورگرهایی که از WebKit رندر WebKit استفاده می کنند (سافاری ، کروم ، اپرا) یک سؤال عجیب و غریب دارند..

        برای اینکه مطمئن شوید انیمیشن ها روی آن مرورگرها کار خواهند کرد ، باید بیانیهkeyframes و ویژگی های انتساب انیمیشن را با یک ترکیب نحوی ویژه وب کیت کپی کنید..

        / * این برای مرورگرهای غیر وب سایتی است. * /
        keyframes moveLeft
        از جانب {
        موقعیت: نسبی؛
        سمت چپ: 100px؛
        به {
        موقعیت: نسبی؛
        سمت چپ: 0px؛
        }
        }

        / * این برای مرورگرهای وب کیت: Chrome ، Safari و Opera است. * /
        @ -webkit-keyframes moveLeft
        از جانب {
        موقعیت: نسبی؛
        سمت چپ: 100px؛
        به {
        موقعیت: نسبی؛
        سمت چپ: 0px؛
        }
        }

        #animationSupportDemo
        انیمیشن-نام: moveLeft؛
        مدت زمان انیمیشن: 4s؛
        -webkit-animation-name: moveLeft؛ / * Chrome ، Safari و Opera. * /
        -وب سایت-انیمیشن-مدت زمان: 4 ثانیه؛ / * Chrome ، Safari و Opera. * /
        }

        (در نمونه های زنده فوق ، این سبک های اضافی به کد نسخه ی نمایشی در حال اجرا اضافه شده اند ، اما نمونه های کد فقط برای پیچیده تر شدن آن نیستند.)

        این ممکن است کار برکنار و احمقانه به نظر برسد (زیرا اینگونه است) ، اما تنها راه کار مجبور کردن انیمیشن های شما برای کار در آن مرورگرها است.

        چه موقع از انیمیشن های CSS استفاده کنیم

        اگر به عناصر بسیار پویا مانند یک بازی بازی در اطراف صفحه نمایش نیاز دارید ، انیمیشن های CSS واقعاً راهی برای پیشبرد نیستند - این مناسب تر برای Javascript است.

        از انیمیشن های CSS بهترین استفاده برای ارائه پیشرفت های ظریف در یک صفحه است. برخی از نمونه ها: پر کردن میله های نمودار - پایین کشیدن زبانه روی شناور - عناصر داخلی به عنوان کاربر به پایین صفحه می رود - تغییر آهسته و ظریف رنگ پس زمینه - دکمه های "پرش" برای تشویق کلیک

        ترکیب CSS انیمیشن با Javascript

        انیمیشن های CSS یا بلافاصله یا بعد از تأخیر مشخص شروع می شوند. با این حال ، اگر می خواهید پس از اتفاقی که رخ می دهد ، یک انیمیشن CSS را فعال کنید ، می توانید انیمیشن را در CSS متوقف کرده و سپس در مرحله بعد با Javascript مکث کنید. توقف مکالمه با ویژگی انیمیشن-حالت-بازی انجام می شود.

        .مکث Animation
        انیمیشن-نام: مثال؛
        مدت زمان انیمیشن: 5 ثانیه؛
        انیمیشن-بازی-حالت: متوقف شده است.
        -webkit-animation-name: مثال؛
        -وب سایت-انیمیشن-مدت زمان: 5 ثانیه؛
        -webkit-animation-play-state: متوقف شد.
        }

        مقدار برای حالت انیمیشن-بازی هنگام غیرقانونی در حال اجرا است. این را می توان در Javascript دستکاری کرد:

        [element] .style.animationPlayState = "دویدن"

        CSS در دنیای واقعی

        در دنیای واقعی توسعه و طراحی وب ، تعداد کمی از توسعه دهندگان با یک سند HTML و یک پرونده CSS خالی می نشینند و شروع به مشخص کردن سبک ها از ابتدا می کنند. (اگرچه انجام این کار مطمئناً سرگرم کننده است.)

        تعدادی "بهترین شیوه" معمولی وجود دارد که طراحان CSS معمولاً از آنها پیروی می کنند تا کار خود را آسان تر و سازگارتر کنند.

        تنظیم مجدد CSS

        همه عناصر HTML دارای سبک های پیش فرض تنظیم شده توسط مرورگر خود هستند. هر مرورگر دارای سبک های پیش فرض کمی متفاوت است. این بدان معناست که یک سند واحد با یک صفحه سبک واحد ممکن است در مرورگرهای مختلف متفاوت به نظر برسد. (گذشته از موضوعات پشتیبانی و سازگاری.)

        "تنظیم مجدد CSS" مجموعه ای از سبک هایی است که می تواند قبل از اعلام سایر سبک ها در یک صفحه سبک CSS قرار بگیرد. CSS resent یک پایه مشترک برای اضافه کردن سبک ها در همه مرورگرها را فراهم می کند.

        از تنظیمات CSS همچنین برای تنظیم سبک های نمایش پیش فرض برای عناصر HTML5 استفاده می شود که ممکن است نمایشگرهای پیش فرض در مرورگرهای قدیمی نداشته باشند - عناصری مانند و .

        چندین قالب تنظیم مجدد CSS وجود دارد. معروف ترین چیزی است که توسط اریک مایر ایجاد شده است.

        / * http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        مجوز: هیچ (دامنه عمومی)
        * /

        html، body، div، span، applet، object، iframe,
        h1، h2، h3، h4، h5، h6، p، blockquote، pre,
        a ، abbr ، مخفف ، آدرس ، بزرگ ، استناد ، کد,
        del، dfn، em، img، ins، kbd، q، s، samp,
        کوچک ، اعتصاب ، قوی ، زیر ، sup ، tt ، var,
        ب ، تو ، من ، مرکز,
        dl، dt، dd، ol، ul، li,
        زمینه ، فرم ، برچسب ، افسانه,
        جدول ، زیرنویس ، tbody ، tfoot ، thead ، tr ، th ، td,
        مقاله ، کنار ، بوم ، جزئیات ، جاسازی شده,
        شکل ، figcaption ، footer ، header ، hgroup,
        فهرست ، ناو ، خروجی ، یاقوت ، بخش ، خلاصه,
        زمان ، مارک ، صدا ، فیلم {
        حاشیه: 0؛
        بالشتک: 0؛
        مرز: 0؛
        اندازه قلم: 100٪؛
        قلم: ارث؛
        vertical-align: پایه؛
        }
        / * بازگرداندن نقش نمایشگر HTML5 برای مرورگرهای قدیمی * /
        مقاله ، کنار ، جزئیات ، کج کردن ، شکل,
        پاورقی ، هدر ، گروه ، فهرست ، ناوبری ، بخش
        نمایش: بلوک؛
        }
        بدن {
        خط-ارتفاع: 1؛
        }
        ol ، ul
        لیست سبک: هیچ کدام؛
        }
        blockquote ، q
        به نقل از: هیچ؛
        }
        blockquote: قبل ، blockquote: بعد,
        q: قبل ، q: after
        محتوا: ''؛
        محتوا: هیچی؛
        }
        جدول {
        سقوط مرزی: فروپاشی؛
        فاصله مرزی: 0؛
        }

        پیش پردازنده های CSS

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

        اگر همان عناوین مربوط به عناوین ثانویه خود را که برای اعلام حق چاپ (و غیره) از آنها استفاده می کنید ، استفاده می کنید ، در چندین مکان مختلف اظهارنامه رنگ را کپی می کنید..

        چه اتفاقی می افتد وقتی شما می خواهید آن را تغییر دهید?

        در مورد مقیاس اندازه متن چطور؟ اندازه متن پیش فرض خود را بر روی 12px تنظیم کرده اید ، و هر اندازه عنوان برای نمایش مجموعه ای یکپارچه از اندازه ها ، تعداد مشخصی از این اندازه است. هنگام تغییر اندازه پیش فرض چه اتفاقی می افتد?

        CSS یک زبان اعلانی است - لازم است که هر خاصیت و ارزش فردی مشخص شود و هیچ متغیر ، کارکرد یا محاسبه ای برای آسان تر کردن امور وجود ندارد..

        با همان روشی که PHP (و سایر زبانها) بدون نیاز به تکرار مطالب در هر صفحه ، خروجی HTML را آسانتر می کنند ، پیش پردازنده های CSS به شما امکان می دهند متغیرها ، عملکردها و سایر سازه های برنامه نویسی را درون شیوه نامه ها قرار دهید..

        این باعث می شود طرح های رنگی ، نسبت اندازه و انواع دیگر اظهارات تکراری آسان تر شود.

        دو محبوب ترین پیش پردازنده CSS عبارتند از: کمتر - مورد استفاده در توییتر Bootstrap - Sass - که توسط Ruby on Rails ، Jekyll و بسیاری دیگر از ابزارهای توسعه مبتنی بر روبی استفاده می شود.

        به طور کلی ، توسعه دهندگان شیوه نامه های خود را در Less یا Sass می نویسند و سپس قبل از راه اندازی یک سایت ، آنها را در CSS وارد می کنند. همچنین کامپایلرهای سمت مشتری (در مرورگر) وجود دارند که به زبان Javascript نوشته شده اند ، اما این منابع از منابع زیادی استفاده می کنند و به طور معمول فقط در توسعه هستند..

        در این مرحله برای یک توسعه دهنده وب حرفه ای بسیار نادرست است که از Less یا Sass استفاده نکند.

        این راهنما نمی تواند مقدمه ای برای هر یک از این ابزارها باشد ، بنابراین ما شما را به یادگیری خود بیشتر تشویق می کنیم.

        طراحی تعاملی

        زمانی بود که می توانستید مطمئن باشید که می دانید بازدید کنندگان سایت شما چه صفحه ای را مشاهده می کنند که صفحه شما را مشاهده می کنند: یک مانیتور دسک تاپ در یکی از تعداد انگشت شماری از اندازه های پیش فرض.

        آن روزها طولانی است.

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

        هدف قرار دادن جداگانه تمام این اندازه های صفحه نمایش تقریبا غیرممکن است ، و نمی توانید به سادگی از آنها چشم پوشی کنید.

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

        از این گذشته ، گوگل شروع به تغییر نتایج جستجو بر اساس اینکه آیا سایت ها برای دستگاه های تلفن همراه بهینه شده اند یا خیر ، انجام داده است. به طور فزاینده ، اگر اصلاً در موبایل به نظر خوب نرسید ، به هر حال هیچ کس شما را نخواهد دید.

        راه حل این مشکل ، طراحی پاسخگو است.

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

        سه ستون طراحی وب پاسخگو عبارتند از:

        شبکه های سیال: شبکه های سیال شامل تقسیم شبکه های صفحه بر اساس درصد و نه پیکسل های مطلق هستند. به عنوان مثال ، شما ممکن است یک ستون محتوای اصلی داشته باشید که 70٪ از صفحه و یک ستون نوار کناری را شامل می شود که 30٪ آن را می پوشاند. با افزایش یا کاهش صفحه ، اندازه شبکه نیز گسترش می یابد یا کوچک می شود.

        تصاویر سیال: تصاویر هرگز نباید گسترده تر از صفحه نمایشگر نمایش داده شده باشند ، به این معنی که آنها هرگز نباید گسترده تر از عنصر شبکه حاوی آنها باشند. ساده ترین راه حل برای این کار ، تنظیم حداکثر عرض روی تصاویر 100٪ است. img {حداکثر عرض: 100٪؛ }

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

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

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

        چارچوب جلویی

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

        • دریافت یک ساختار شبکه پاسخگو برای کار در هر مرورگر و دستگاه.
        • طراحی نمایش داده های مناسب رسانه ها و تعیین نقاط بهینه نقاط شکست صفحه.
        • تایپوگرافی که زیبا و خواندن آن آسان است.
        • ساخت فرم حتی به نسبت مناسب و معقول به نظر می رسد ، چه رسد به زیبا و کاربر پسند.
        • جداول یک ظاهر طراحی شده به نظر می رسد مانند سال 1997 نیست.
        • تخریب مهربان برای مرورگرهای قدیمی.
        • به خاطر سپردن از استفاده از قوانین یک ظاهر طراحی شده کپی برای برخی از ویژگی های wkkit (و اطمینان حاصل کنید که هر بار یک قانون یکسان را تایپ می کنید).
        • گرفتن CSS و Javascript برای برقراری ارتباط صحیح.

        بسیاری از این مسائل وظایف رمزگذاری ساده "boilerplate" هستند که از برنامه نویسی طرح ها و ویژگی های جدید فاصله می گیرند ، و بسیاری از آنها بسیار خطرناک هستند تا خطرات "کد نویسی" را در هر پروژه به خطر بیاندازند. هیچ کس نمی خواهد 50٪ یا بیشتر از زمان توسعه را برای اشکال زدایی کد مبانی صرف کند - توسعه دهندگان می خواهند توسعه دهند.

        به همین دلایل ، و به دنبال همین روند مشابه در توسعه کد برنامه ، تعداد بیشتری از توسعه دهندگان به قاب های جلویی روی آورده اند.

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

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

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

        • Bootstrap - از تیم توسعه در توییتر ، Bootstrap برای سرعت بخشیدن به نمونه سازی و توسعه برنامه های وب طراحی شده است. این فرم رابط کاربری عالی و تعاملی رابط کاربری و طراحی جسورانه و متمایز را ارائه می دهد. بسیاری از مردم شکایت دارند که این امر باعث ایجاد نشانه های نفخ می شود ، زیرا کاربران بی تجربه به اضافه کردن کلاس های یک ظاهر طراحی شده در HTML توصیه می شوند. با این وجود ، این ابزار ابزاری عالی برای نمونه سازی سریع هر برنامه وب مبتنی بر فرم است.
        • Pure.css - یک ابزار ابزار مدولار از قطعات فریم ورک CSS است که می تواند بصورت جداگانه یا به طور کلی استفاده شود.
        • بنیاد - صدور صورت حساب خود به عنوان "پیشرفته ترین چارچوب پاسخگو جلوی جهان" ، توسط بسیاری از افراد گفته می شود که بنیاد مانند افرادی است که به مارک های خوب اهمیت می دهند.
        • اسکلت - اسکلت قاب ساده CSS "مرده" است که یک شبکه پاسخگو ، تایپوگرافی تمیز و فقط به طور کلی طراحی مینیمال را ارائه می دهد. این در نظر گرفته شده است "نقطه شروع ، و نه یک چارچوب".

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

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

        هنوز - برای به دست آوردن بیشترین استفاده از چارچوب CSS ، باید درک کنید که CSS چگونه کار می کند و چگونگی تعامل آن با HTML.

        CSS یک بخش اساسی HTML است

        CSS - شیوه نامه های آبشار - زبان طراحی و ارائه بصری در وب است. یک سند HTML فقط مجموعه ای از گره های محتوا است ، اما CSS به مرورگر می گوید که چگونه آن محتوای را به کاربر ارائه دهد.

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

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

        مشکل و طاقت فرسا در مورد اطمینان از اینکه یک طراحی سایت می تواند در بسیاری از تنظیمات مختلف کار کند ، و اینکه تعداد زیادی از علاقه های رقابتی با آن روبرو شده است ، باعث شده است که بیشتر توسعه دهندگان چارچوب های CSS را اتخاذ کنند..

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

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

        JavaScript و HTML

        در این بخش Javascript ، زبان برنامه نویسی که در اکثر مرورگرهای وب مدرن ساخته شده است ، معرفی می شود. تمرکز بیشتر روی نحوه کار Javascript با HTML و مرورگر است و همچنین نکات عملی برای شروع کار با استفاده از JavaScript به عنوان یک توسعه دهنده. مباحث تحت پوشش شامل Document Object Model ، کتابخانه های JavaScript و چارچوب های برنامه JavaScript است. این بخش یک آموزش جاوا اسکریپت نیست.

        JavaScript چیست؟

        JavaScript یک زبان برنامه نویسی است که تقریباً در هر مرورگر وب ایجاد شده است. برای افزودن تعامل پویا و اسکریپت به صفحات وب استفاده می شود. (همچنین می تواند از کنار سرور ، به همراه ابزاری مانند Node.js استفاده شود ، اما این مورد در اینجا تمرکز نیست.)

        JavaScript یک زبان برنامه نویسی کاملاً برجسته است ، بنابراین هر چیزی ممکن است. با این حال ، این ویژه به نیازهای تعامل و دستکاری در اسناد HTML اختصاص داده شده است.

        ECMAScript

        اگر اصلاً با JavaScript کار کنید ، با نام عجیب "ECMAScript" روبرو خواهید شد. این نام رسمی "JavaScriipt" است.

        مشخصات استاندارد این زبان توسط سازمانی به نام Ecma ، که قبلاً انجمن تولید کنندگان رایانه اروپا بود ، حفظ می شود. آنها از آن زمان نام خود را به سادگی "اكما" تغییر داده اند كه دیگر كلمه ای برای هر چیزی نیست.

        هر مرورگر وب استاندارد ECMAScript را کمی متفاوت تر پیاده سازی می کند (و مایکروسافت تا آنجا پیش می رود که به جای Javascript ، JScript را پیاده سازی می کند). بنابراین برخی افراد از "ECMAscript" استفاده می کنند تا به طور خاص به فرم استاندارد زبان مراجعه کنند ، نه به هر گویش یا اشتقاق وارد شده در مرورگرهای وب..

        JavaScript و Java

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

        مدل شیء اسناد

        یکی از موارد اساسی برای فهمیدن اینکه آیا می خواهید دسته خوبی در Javascript داشته باشید ، مدل Document Object است.

        Document Object Model از نظر مفهومی بسیار شبیه به ساختار درخت سند است که در بخش های قبلی توضیح داده شد - در حقیقت ، در اصل به همان چیز اشاره دارد.

        DOM API (برنامه نویسی برنامه نویسی برنامه) است که توسط آن کد Javascript با سند HTML در تعامل است. وقتی یک سند توسط یک مرورگر ارائه می شود ، مرورگر فقط کد منبع را با برخی از قوانین سبک اضافی پیوست شده به شما نشان نمی دهد. مرورگر کد منبع را خوانده و یک نمایش مبتنی بر آن ایجاد کرده است. هر عنصر در سند با ویژگی ها و روش های قابل دسترسی توسط Javascript به یک شیء (به معنای برنامه نویسی) تبدیل شده است.

        ویژگی های یک شیء DOM شامل ویژگی های اعلام شده (و قابل بیان) بودن عنصر HTML (مانند کلاس ، شناسه و نام) ، سبک CSS این عنصر و محتوای خود عنصر است. روش های مرتبط با هر شیء DOM شامل توابع برای تغییر هر یک از این ویژگی ها هستند.

        یک صفحه وب ارائه شده در یک مرورگر ، نمای زنده از Document Object Model است. این بدان معنی است که اگر DOM به هر حال تغییر کند (به عنوان مثال - ویژگی های هر عنصر تغییر می یابد) نمایش نیز تغییر می کند. این به JavaScript اجازه می دهد بدون نیاز به تجدید یا بارگیری مجدد صفحه ، محتوای یک صفحه وب را به روز یا تغییر دهد.

        جاوا اسکریپت همچنین در اکثر توابع مرورگر دارای API است ، بنابراین می تواند (برای مثال) وضعیت فعلی یک سند را بخواند ، باعث شود تازه سازی شود ، عرض پنجره مرورگر را بدست آورد و از پنجره مرورگر تغییر اندازه دهد..

        با استفاده از Javascript

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

        از جمله جاوا اسکریپت در یک صفحه

        مانند CSS ، جاوا اسکریپت را می توان به دو طریق وارد صفحه وب کرد - اسکریپت های تعبیه شده و منابع مرتبط.

        برای جاسازی اسکریپت ، کافی است کد جاوا اسکریپت را بین برچسب ها وارد کنید.

        تابع changeColor (toChange ، newColor) {
        document.getElementbyId (toChange) .style.backgroundColor = newColor؛
        }
        </ اسکریپت>

        برای وارد کردن پرونده جاوا اسکریپت مجزا در یک سند HTML ، با عنصر به آن پیوند دهید.

        نوع ="متن / جاوا اسکریپت" src ="برنامه.js">

        URL (نسبی یا کاملاً مشخص) پرونده جاوا اسکریپت در ویژگی src قرار داده شده است. ویژگی این نوع در HTML5 کاملاً مورد نیاز نیست ، اما خوب است که سازگاری رو به جلو و (بالقوه) رو به جلو را در بر بگیرد. علاوه بر این ، اگر چندین عنصر در یک صفحه وجود داشته باشد ، بد نیست که هر یک از ویژگیهای منحصر به فرد شناسه را به آنها بدهید.

        به طور کلی بهتر است جاوا اسکریپت را به عنوان یک فایل جداگانه قرار دهید ، نه اینکه در صفحه تعبیه شوید. این عملکرد (JS) را از محتوا (HTML) جدا نگه می دارد. با این حال ، استثناهای عملی از این سیاست کلی وجود دارد. به عنوان مثال ، معمولی است که کد ردیابی (مانند قطعه JS ارائه شده توسط Google Analytics) را مستقیماً در صفحه وارد کنید.

        جا را برای جاوا اسکریپت قرار دهید

        دو مکان مشترک برای گنجاندن جاوا اسکریپت در یک صفحه ، در و زیر آن وجود دارد .

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

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

        این هنوز هم توصیه خوبی است. با این حال ، اکنون به توصیه های بوی پیچیده می پردازیم: اکنون راهی وجود دارد که عناصر را درون سند قرار دهید بدون اینکه باعث کند شدن صفحه ارائه شود. از HTML5 ، این برچسب دارای یک ویژگی با مارک async است. اگر ویژگی async را به برچسب اسکریپت خود اضافه کنید ، صفحه متوقف نمی شود و JS به صورت غیر همزمان تجزیه و تحلیل می شود (یعنی در یک موضوع جداگانه).

        نوع ="متن / جاوا اسکریپت" src ="برنامه.js" async>

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

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

        JSON

        زیرمجموعه ای از JavaScript ، که در بخش های HTML معنایی به آن پرداخته شد ، JSON است - JavaScript Object Notation.

        جاوا اسکریپت یک زبان گرا است ، به معنی (از جمله چیزهای دیگر) که اشیاء فردی (به معنای واقعی کلمه) می توانند در اشیاء داده (به معنای برنامه نویسی کلمه) کدگذاری شوند. به عنوان مثال ، یک پست وبلاگ (یک موضوع "دنیای واقعی") می تواند به عنوان یک هدف JavaScript رمزگذاری شود:

        {
        "عنوان" : "لورم ایپسوم و All That Jazz",
        "نویسنده" : "آدام وود",
        "محتوا" :
        'Lorem ipsum dolor sitetetet، consitetur elit adipiscing. Sed mauris metus، euismod non sodales eu، molestie civge nibh. Nunc eu honorissim est. Donec non estite sapit rutrum rutrum است. Nunc vitae libero nec velit porta pulvinar vitae ut sapien. Aliquam result orci eget libero blandit semper. Eenean malesuada risus nec volutpat dapibus. Aliquam sit amet bibendum enim. تعلیق در faucibus erat. پروین کوئیز facilisis nisl. Vivamus sit amet enim elit. Aliquam nisl sapien ، sagittis vitae nisi nec، vulputate efficitur urna. ',
        }

        همانطور که با استفاده از نشانه گذاری معنایی دیدیم ، JSON می تواند برای رمزگذاری داده های مربوط به محتوای یک صفحه ، برای مصرف به عنوان یک API نشانه گذاری معنایی استفاده شود. این برای نمایه سازی Googles مفید است.

        همچنین یکی دیگر از مهمترین کاربردهای JSON - AJAX است.

        آژاکس

        AJAX یک الگوی طراحی است (نه یک فناوری خاص) که در آن درخواست های HTTP ناهمزمان توسط JavaScript انجام می شود ، اجازه می دهد تا داده های تازه بدون نیاز به بارگذاری مجدد صفحه در یک صفحه وب جمع شوند..

        در ابتدا AJAX به عنوان "JavaScript Asynchronous and XML" ایستاده بود ، زیرا در ابتدا رایج ترین زبان انتقال داده ها برای این نوع طراحی XML بود. با این حال ، JSON رایج ترین زبان است زیرا سبک تر ، انعطاف پذیر ، بومی JavaScript است و خواندن آن ساده تر است. (متأسفانه ، "AJAJ" خیلی جذاب نیست ، بنابراین نام قدیمی گیر کرده است.)

        الگوی AJAX در اکثر صفحات معنی ندارد ، اما در برنامه های وب (مانند ایمیل ، مانند ایمیل) ، می تواند همه تفاوت را در جهان ایجاد کند..

        AJAX به "JavaScript ناهمزمان" گفته می شود زیرا کد JS در مواقعی به غیر از بارگذاری صفحه به سرور برقراری تماس (به عنوان وقتی که یک مرورگر معمولاً با سرور تماس برقرار می کند) تماس برقرار می کند. بر اساس اقدامات کاربر یا زمان سپری شده ، یک برنامه وب به سبک AJAX بدون بارگذاری مجدد صفحه ، درخواستی را به سرور ارسال می کند. داده های حاصل از این پاسخ سپس برای به روزرسانی DOM (و بنابراین ، نمای به کاربر) بدون بارگذاری مجدد استفاده می شود.

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

        JSON یک فرمت داده ایده آل برای این نوع مورد استفاده است زیرا بومی JavaScript است. بر خلاف XML ، که برای مرورگر باید جاوا اسکریپت را تجزیه و تحلیل کند ، JSON در حال حاضر به زبان مقصد است.

        علاوه بر این ، از آنجا که JSON می تواند تنها یک محتوای JavaScript باشد (که می تواند هر دامنه دارای URL src آن باشد) ، از JSON می توان برای جلوگیری از مشکلات قفل متقابل استفاده کرد. به طور معمول ، مرورگرهای وب از ایجاد درخواست ها و دریافت داده ها از دامنه هایی به غیر از دامنه سند اصلی ، جلوگیری می کنند. با این حال ، جاوا اسکریپت (مانند CSS و تصاویر) به عنوان منبع جداگانه ای مورد استفاده قرار می گیرد که می تواند از هرجای دیگر حاصل شود. با اجرای JSON از الگوی AJAX ، درخواست مبدأ متقابل می تواند به عنوان یک منبع درج شده "مبدل شود".

        JavaScript در دنیای واقعی

        جی کوئری

        نحو JavaScript در بعضی مواقع می تواند کمی مبهم (و خسته کننده) باشد ، و تعدادی از عملیات بسیار متداول به وفور کد "boilerplate" نیاز دارند..

        به همین دلیل تقریباً همه توسعه دهندگان JS از یک کتابخانه JavaScript با نام JQuery استفاده می کنند. JQuery API های مختصر برای تعدادی از موارد استفاده معمولی ، مانند گذر از سند ، دستکاری DOM و AJAX ارائه می دهد..

        اکثر زبانهای برنامه نویسی دارای "کتابخانه استاندارد" هستند ، مجموعه اصلی برنامه های افزودنی زبان که معمول ترین کارهایی است که برنامه نویسان باید در این زبان انجام دهند. جاوا اسکریپت کتابخانه استاندارد استاندارد ندارد. گرچه پروژه های رقیب دیگری نیز وجود دارد ، با پایه های توسعه دهنده اختصاصی (مانند بسته شدن و نمونه اولیه) ، JQuery - برای بسیاری از افراد - کتابخانه استاندارد JavaScript است.

        در اینجا مثال بسیار کوتاهی از چگونگی سرعت بخشیدن به توسعه JQuery ارائه شده است. فرض کنید می خواهید یک ویژگی یک عنصر را تغییر دهید.

        // "خالص" روش جاوا اسکریپت.

        document.getElementById ("عوض شدن") .setAttribute ("عنوان","متن عنوان جدید")؛

        // روش JQuery.

        $. ("#عوض شدن") .attr ("عنوان","متن عنوان جدید")؛

        در این حالت فقط 28 کاراکتر ذخیره می شود ، اما گاهی اوقات خیلی بیشتر از آن است. و حتی صرفه جویی اندک در یک پروژه بزرگ اضافه می شود.

        کتابخانه جلویی JavaScript

        بسیاری از طراحان وب مناسب و معقول ، که درک خوبی از HTML و CSS دارند ، بدون اینکه برنامه نویسان JavaScript شوند ، از پیشرفتهای رابط کاربری گرافیکی JavaScript استفاده می کنند.

        این امر ممکن است زیرا تعدادی کتابخانه UI جاوا اسکریپت (مانند JQuery UI) و چارچوب های جلویی (مانند Bootstrap) وجود دارند که یک API نسبتاً آسان HTML را ارائه می دهند..

        API (همانطور که در بالا گفته شد) در یک رابط برنامه نویسی برنامه. یعنی روشی برای دسترسی به عملکرد یک قطعه نرم افزار از خارج از آن نرم افزار. در زمینه و HTML API به ویژگی های JavaScript ، این به معنی روشی آسان برای اضافه کردن ویژگی های JavaScript در HTML به سادگی با اضافه کردن موارد به نشانه گذاری (معمولاً کلاسهای ویژه).

        کاوش در مجموعه ویژگی های کتابخانه های UI JavaScript می تواند ایده های ساده بسیاری را برای بهبود تعامل یک سایت و ابزارهایی برای پیاده سازی آن ایده ها در اختیار توسعه دهندگان اولیه (و آنهایی که نه در ابتدا) قرار می دهد. (فقط به یاد داشته باشید که یک پروژه را انتخاب کنید و با آن به یک پروژه بپیوندید - سعی کنید کتابخانه های UI مختلف را با هم مخلوط نکنید و مطابقت نداشته باشید. نتایج حاصل از هرج و مرج بصری و سردرگمی طراحی است.)

        چارچوب های برنامه جلویی JavaScript

        جدا از چارچوب های طراحی جلویی (مانند Bootstrap) که در بخش قبلی در مورد CSS بحث شد ، یک چارچوب برنامه جلویی یک نرم افزار اسکلت اسکلت است که به عنوان نقطه شروع نه برای طراحی بصری بلکه برای عملکرد واقعی برنامه وب.

        چارچوب های برنامه JavaScript مانند Backbone.js و Angular یک الگوی ساختاری برای یک برنامه وب ارائه می دهند ، تعدادی کار مشترک را به صورت خودکار انجام می دهد و یک معماری طراحی را ارائه می دهد.

        بیشتر چارچوب های برنامه JS الگوی طراحی MVC یا Model View Controller را پیاده سازی می کنند. این الگوی مانند این عمل می کند:

        • مدل داده ها را اداره می کند
        • نمایش داده ها را نشان می دهد
        • Controller داده های موجود در مدل را با مشاهده متصل می کند و منطق کاربرد را مدیریت می کند

        هر فریم ورک JS این پتنت را بطور متفاوت پیاده سازی می کند ، اما تقریباً همه آنها نسخه ای از این کار را انجام می دهند.

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

        همانطور که در اکثر توسعه نرم افزارها اتفاق افتاده است ، یک توسعه دهنده خوب جاوا اسکریپت فقط نمی دانید که چگونه می توانید JavaScript را رمزگذاری کنید - این است که بدانید کتابخانه ها و چارچوب ها به بهترین وجه برای انواع مختلف برنامه ها مناسب هستند و قادر به استفاده از آنها با درجه ای از تسلط.

        جاوا اسکریپت از همیشه قدرتمندتر و مفیدتر است

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

        HTML در مقابل همه چیز

        این بخش با نگاه کردن به گزینه های HTML در چندین زمینه ، پوشش HTML ما را تکمیل می کند و نشان می دهد که HTML به زبان غالب برای محتوا در چشم انداز فناوری مدرن تبدیل شده است..

        HTML به عنوان جایگزین

        HTML زبان پیش فرض وب است ، اما از آن به عنوان بستری برای انواع دیگر طراحی و محتوا نیز استفاده می شود.

        کتابهای الکترونیکی

        محبوب ترین استاندارد منبع آزاد برای کتاب های الکترونیکی ، فرمت .epub - که تقریباً در همه خوانندگان الکترونیکی به جز Amazon Kindle قابل استفاده است - در واقع فقط یک قالب مبتنی بر HTML است. بخشهای جداگانه و بخشهایی مانند جداول محتوا و فهرستها ، فایلهای HTML هستند. تمام پرونده های محتوا به همراه دارایی هایی مانند تصاویر و پرونده های CSS ، به سادگی در یک پرونده واحد فشرده شده و پسوند فایل .epub داده می شوند. از بسیاری جهات ، یک کتاب .epub مشابه یک وب سایت است که صفحات زیادی در آن وجود دارد.

        آمازون کیندل همیشه یک قالب پرونده اختصاصی را ترجیح داده است. نسل اول Kindles از .mobi استفاده می کرد و پس از آن یک قالب مرتبط با نام .azw استفاده می شد. اینها پیچیده تر از قالب .epub بودند و مبتنی بر HTML نبودند.

        با این حال ، آخرین نسل Kindles از قالب جدید .azw3 استفاده می کند ، که مبتنی بر HTML5 است. در حالی که همیشه می توان کتاب های الکترونیکی Kindle را از طریق HTML از طریق یک نرم افزار تبدیل ایجاد کرد ، HTML اکنون یک زبان نویسنده اصلی برای محتوای کتاب های الکترونیکی است.

        برنامه های تلفن همراه

        دو سیستم عامل محبوب موبایل - Android و iPhone - از زبان های برنامه نویسی کاملاً متفاوتی برای توسعه برنامه استفاده می کنند. توسعه برنامه های Android به طور معمول در جاوا انجام می شود ، در حالی که iOS از Objective C و زبان جدید Swift استفاده می کند.

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

        چند راه حل مختلف برای این مشکل ایجاد شده است ، اما جالب ترین استفاده از HTML (به همراه JavaScript و CSS) است.

        ابزارهایی مانند PhoneGap به توسعه دهندگان امکان می دهد یک بار برنامه را به زبان های مبتنی بر مرورگر (HTML ، JS ، CSS) بسازند و سپس آنها را برای برنامه های سیستم عامل های مختلف بسته بندی کنند. نرم افزار PhoneGap برنامه مبتنی بر مرورگر را در یک "مرورگر کرومس" قرار می دهد - یک فریم رندر سبک به کار رفته در مرورگر که فقط پرونده ها را در فهرست برنامه ها مشاهده می کند و هیچگونه ناوبری رو در روی کاربر ایجاد نمی کند. این کار را می توان برای هر سیستم عامل پشتیبانی شده انجام داد و به برنامه اجازه می دهد یک بار ساخته شود و در همه جا مستقر شود.

        HTML به یک زبان جهانی تبدیل شده است.

        گزینه های جایگزین برای HTML

        اگرچه HTML زبان مادری وب و بستر قدرتمندی برای قابلیت همکاری است ، اما برخی از فناوریهای جایگزین نیز وجود دارند که از بین رفتن خودداری می کنند.

        فلاش

        Flash یک پلتفرم نرم افزاری چندرسانه ای است که می تواند در اکثر مرورگرهای وب با یک افزونه اجرا شود.

        در اواخر دهه 1990 ، هیچ چیزی خنک تر از یک وب سایت مبتنی بر Flash نبود. آنها بسیار تعاملی ، متحرک و گرافیک بهتری نسبت به سایتهای ساده مبتنی بر HTML داشتند. شما حتی می توانید آنها را به موسیقی و ویدئو پخش کنید.

        این سایت ها به سرعت خسته کننده و آزار دهنده شدند ، اما این فناوری به طور عادت متوقف شده است (مردم آنچه را که برای نوشتن استفاده می کنند را می نویسند) و از ترس اینکه سایت ها و برنامه های نوشته شده در HTML5 و JavaScript در همه مرورگرها پشتیبانی نشوند. اینترنت اکسپلورر 6 پس از ظهور مرورگرهای بهتر و سازگار با استاندارد ، سالها در استفاده سنگین باقی مانده است ، بنابراین مردم همچنان به دنبال ترک سایتهای مبتنی بر فلش هستند.

        در بیشتر مواقع ، این روند از بین رفته است. اکنون فلش بیشتر برای بازیهای ویدئویی رومیزی و موبایل استفاده شده است و استفاده از آن در وب بیشتر در بین جمعیت هوشمند محدود شده است.

        متأسفانه ، مشاغل كوچك و غیرتكنولوژیك (به ویژه كلیساها و افراد غیرانتفاعی جامعه) چندین سال عقب مانده از روند فناوری هستند و بسیاری از آنها هنوز هم می خواهند عناصر Flash (مانند "Flash Intro") را در وب سایت خود وارد كنند. این تقریباً همیشه اشتباه است.

        • متداول ترین کاربرد Flash در وب سایت های غیر تعامل ، "Flash Intro" است که برای کاربران بسیار آزار دهنده است. هیچ کس نمی خواهد صبر کند و قبل از نمایش چیزهای مورد نظر خود در سایت شما منتظر بماند و پیش نمایش سرگرم کننده شما را تماشا کند. هرگز ، هرگز این کار را نکنید.
        • بعضی از افراد فکر می کنند جایگذاری محتوا و منوها در یک برنامه Flash ایده خوبی است ، به طوری که می توانند جلوه های جالبی مانند موارد منوی روشن یا برگه های نورد ایجاد کنند. این یک ایده بد است:
          • مردم به محتوای شما اهمیت می دهند ، نه جلوه های ویژه شما. خواندن مطالب خود را آسان کرده و به راحتی حرکت می کند. هیچ کس قصد ندارد مدت طولانی در سایت شما بماند و یا آن را به دوستان خود توصیه کند زیرا آنها دوست داشتند نحوه کلیک کردن محتوای شما مانند پیمایش هنگام کلیک بر روی دکمه منوی پرواز.
          • به جای HTML ، محتوا را در Flash قرار می دهد و آن را از موتورهای جستجو پنهان می کند ، و سایت شما را به طور موثر برای Google نامرئی می کند.
          • قرار دادن محتوا در Flash به این معنی است که هر نظر ویژه از محتوای شما در واقع یک حالت خاص در یک برنامه در حال اجرا است ، نه یک URL اشتراکی. این باعث می شود تا کاربران برای مشخص کردن یا به اشتراک گذاری محتوای شما ، کاربران را بسیار دشوار کنند.
          • محتوا و پیمایش در برنامه Flash برای خوانندگان صفحه قابل دسترسی نیست و سایت شما را برای افراد دارای معلولیت بینایی در دسترس نمی کند.
          • بیشتر جلوه هایی که ممکن است بخواهید در Flash ایجاد کنید ، می توانید با آسانتر در JavaScript و CSS ایجاد کنید ، بدون ایجاد هیچ یک از این مشکلات.
        PDF

        PDF - قالب اسناد قابل حمل - یک فرمت کراس پلت فرم عالی برای اسناد متمرکز بر چاپ است.

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

        تمام مواردی که PDF ها را برای مواردی مانند نت برگ و چاپ کتاب ها انتخاب مناسبی می کند ، آن را به یک انتخاب وحشتناک برای محتوای آنلاین تبدیل می کند.

        و با این حال ، بسیاری از افراد و سازمانها (به ویژه مشاغل کوچک غیر فناوری و غیرانتفاعی) همچنان به انتشار PDF در وب ادامه می دهند. الگوی فراگیر رفتار ایجاد بروشورهایی با تمرکز چاپ است که سپس در وب سایت در دسترس قرار می گیرند ، در حالی که هیچ کس در واقع نسخه ای چاپی را دریافت نمی کند.

        هرکسی که می خواهد اطلاعات موجود را در بروشور شما مشاهده کند ، نمی خواهد PDF را مشاهده کند. آنها محتوای شما را می خواهند ، و شما باید فرمت متناسب با رسانه را ارائه دهید - در مورد مرورگرها ، این رسانه HTML است.

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

        یک راه حل معقول تر یک فرم HTML آنلاین است که داده ها را مستقیماً در برنامه پایگاه داده قرار می دهد. این باعث صرفه جویی در کار و کاهش خطاها می شود. با استفاده از HTTPS ، از ارسال نامه به فرمهای PDF در اطراف حتی امن تر نیز خواهد بود.

        HTML برنده می شود

        HTML به زبان جهانی وب و همچنین فناوریهای مرتبط مانند کتابهای الکترونیکی و برنامه های تلفن همراه تبدیل شده است.

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

        XHTML و XHTML5

        XHTML

        XHTML مخفف eXtensible Hypertext Markup Language است. این در اصل یک برنامه XML از HTML است. هنگامی که برای اولین بار توسعه یافت ، HTML (نسخه 4) کاملاً ساختاری شد. XHTML HTML را بسیار ساختار یافته ساخت. مدتهاست به عنوان آینده نشانه گذاری برای وب دیده می شود. اما HTML5 تا حد زیادی از آن عبور کرده است. هنوز هم از آن استفاده گسترده ای می شود.

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

        تاریخ

        در سال 1998 ، W3C یک پیش نویس کار با عنوان اصلاح HTML در XML منتشر کرد. این زبان جدید مبتنی بر HTML 4 بود ، اما به قوانین نحوی دقیق تر XML پایبند بود. در فوریه 1999 نام مشخصات به XHTML 1.0: The Markup Language eXtensible HyperText تغییر یافت. سرانجام ، در ژانویه 2000 ، XHTML توصیه رسمی W3C شد.

        نسخه بعدی XHTML ، XHTML 1.1 در ماه مه 2001 منتشر شد ، که هنوز هم بر اساس قوانین سختگیرانه بود اما برای شخصی سازی ها و تغییرات جزئی مجاز بود. XHTML 2.0 به عنوان یک پیش نویس کار شروع شد اما در سال 2009 به نفع HTML5 و XHTML5 کنار گذاشته شد.

        اصول اساسی XHTML

        در حالی که XHTML تقریباً با HTML یکسان است ، مجموعه جدیدی از قوانینی را ارائه می داد که تصور می شد همه کد ها معتبر و صحیح هستند. این قوانین عبارت بودند از:

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

        همراه با قوانینی که در بالا ذکر شد ، XHTML در ابتدا سه تعریف رسمی از نوع Document (DTDs) را معرفی کرد که مطابق با سه نسخه مختلف HTML 4.01 است:

        • XHTML 1.0 Strict XML معادل HTML 4.01 دقیق است ، و شامل عناصر و ویژگی هایی است که در مشخصات HTML 4.01 مستهلک نشده اند. از نوامبر 2015 ، XHTML 1.0 Strict نوع سندی است که برای صفحه اصلی وب سایت کنسرسیوم وب جهانی استفاده می شود..
        • XHTML 1.0 انتقالی معادل XML HTML 4.01 Transition است و شامل عناصر ارائه دهنده (مانند مرکز ، فونت و اعتصاب) است که از نسخه دقیق خارج شده است.
        • قاب فریم XHTML 1.0 معادل XML HTML 4.01 Frameset است ، و تعریف اسناد فریم را می دهد - یک ویژگی وب مشترک در اواخر دهه 1990.

        مثال

        نسخه های اولیه HTML کاملاً ساختار یافته بودند و یافتن صفحات وب با شیوه های کد نویسی بد بسیار معمول بود. صفحه وب مناسب در XHTML به شرح زیر است:

        صفحه اول من

        سلام دنیا!

        من یک صفحه وب بسیار ساده اما کاملاً کاربردی با کد XHTML معتبر هستم!

        منابع آنلاین

        اگرچه به نظر می رسد XHTML از HTML5 پیشی گرفته است ، اما هنوز هم منابع آنلاین زیادی وجود دارد که می تواند به شما کمک کند درک بهتری در XHTML داشته باشید. از مشخصات اصلی گرفته تا برنامه های رایانه ای گرفته تا اعتبار سنجی ها تا آموزش ها ، پیوندهای ذکر شده در زیر هر سؤالی راجع به XHTML به شما کمک می کند.

        ارجاع

        • مشخصات رسمی XHTML: وب سایت رسمی که تصمیم در مورد توسعه XHTML را توضیح می دهد و منابع بیشتری در مورد توسعه آن ارائه می دهد.
        • XHTML 1.0: دومین نسخه اصلاح شده از پیش نویس کار برای بازسازی HTML 4 در XML 1.0
        • مشخصات عمومی XHTML: یک نوع سند XHTML را ارائه می دهد که می تواند در دستگاه هایی مانند دسک تاپ ، تلویزیون و تلفن های همراه به اشتراک گذاشته شود.
        • XHTML: The Clean Code Solution: یک مرور کلی در مورد XHTML در مورد تفاوت های بین HTML و استانداردهای جدید ارائه می دهد.
        • چرا به XHTML تغییر دهید: یک استدلال قانع کننده برای جابجایی به XHTML فراهم می کند تا بتوانید گردش کار را تنظیم کنید و کد پاک کننده را تهیه کنید.

        ابزارها

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

        • سرویس اعتبار سنجی HTML / XHTML: معتبر W3C اسناد HTML و XHTML را برای مطابقت با مشخصات رسمی بررسی می کند.
        • HTML Tidy: به شما کمک می کند تا به طور خودکار فایل های HTML را تمیز کرده و آنها را با مشخصات استاندارد مطابقت دهید. در ابتدا توسط Dave Ragget از W3C ساخته شد و اکنون این یک پروژه منبع باز در SourceForge است.

        آموزشها

        اگر واقعاً می خواهید به پیشرفت XHTML بروید ، این آموزش ها باید شما را به سمت پیشرفت برسانند.

        • XHTML توضیح داد: مروری بر چگونگی به وجود آمدن XHTML می کند و کلیه تغییراتی را که رخ داده است توضیح می دهد و به دنبال آن نمونه های کد ، نمای کلی DTD و بهترین شیوه های کدگذاری.
        • طراحی وب XHTML برای مبتدیان: به بررسی بلوک های پیشرفته ساختمان XHTML ، از جمله نظرات ، متن و موارد دیگر.
        • XHTML Tutorial: یک آموزش بسیار مختصر که مفاهیم اساسی XHTML را به صورت مختصر پوشش می دهد.
        • فرم های HTML / XHTML قابل دسترسی: یک آموزش سطح مبتدی که فقط آنچه شما باید بدانید را شامل می شود.
        • شروع HTML (XHTML): یک فیلم آموزشی مناسب برای مبتدیان برای یادگیری اصول XHTML.
        • روشهای تست نرم افزار: مقدمه ای برای روش ها و ابزارهای تست نرم افزار که مورد توجه کلی برنامه نویسان HTML است.

        کتابها

        از آنجا که XHTML با HTML متصل است ، بسیاری از کتابها با هم درباره این دو زبان بحث می کنند. کتابهایی را می بینید که مبتدیان کاملی دارند و همچنین کتابهایی با هدف کسانی که تجربه کد نویسی دارند و می خواهند دانش خود را گسترش دهند.

        • HTML ، XHTML و CSS: راهنمای ویژوال QuickStart (2006) توسط الیزابت کاسترو: تمام ملزومات HTML و XHTML را با زبانی مناسب برای مبتدیان توضیح می دهد. این کتاب نمونه های بصری زیادی دارد و شامل یک وب سایت همراه همراه با مطالب اضافی ، نمونه ها ، به روزرسانی ها و موارد دیگر می باشد.
        • HTML ، XHTML و CSS For Dummies (2011) توسط Tittel و Noble: مرجع مقدماتی به HTML ، XHTML و CSS که به شما می آموزد چگونه اسناد XHTML بسازید ، آن اصول را در CMS محبوب مانند WordPress و Drupal و طراحی برای موبایل آموزش دهید. دستگاه ها.
        • شروع برنامه نویسی وب با HTML ، XHTML و CSS (2011) توسط Jon Duckett: به شما می آموزد که چگونه صفحات وب را با استفاده از HTML ، XHTML و CSS بنویسید. این اصول مبتنی بر استانداردها را دنبال می کند ، اما همچنین به خوانندگان می آموزد که راه حل مشکلات خود را که احتمالاً با استفاده از (X) HTML با آنها روبرو هستند ، حل کند.

        امروز XHTML

        XHTML همانطور که برای اولین بار ایجاد شد ، دیگر به طور فعال توسعه و نگهداری نمی شود. دلیل اصلی سقوط آن از لطف بسیار جدی در استفاده از خطا بود که باعث می شود صفحات وب هنگام بروز خطا متوقف شوند. این منجر به ایجاد گروه فناوری کاربرد وب Hypertext (WHATWG) شد که شروع به کار بر روی HTML5 کرد. آنها در انحلال نهایی کارگروه XHTML 2.0 مشارکت داشتند.

        امروزه تمام کارهای W3C بر HTML5 و نحو XHTML معروف به XHTML5.1 متمرکز شده است که در پیش نویس HTML5 در کنار HTML5 تعریف می شود..

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

        HTML5

        HTML5

        HTML5 نسخه فعلی استاندارد HTML است. این زبان نشانه گذاری است که برای اسناد و برنامه های وب استفاده می شود. HTML5 شامل تعدادی اضافات و تغییر عمده در زبان است. ما در مورد آنها و کمی بیشتر بحث خواهیم کرد.

        تاریخ و مقدمه

        ما تاریخ HTML را مرور کردیم زیرا از نسخه های 1 به 4 رفت. اما تاریخ HTML5 حتی جالب تر و مهم تر است.

        راه HTML 5

        در سال های اولیه پذیرش عمومی وب ، ارائه دهندگان اصلی مرورگر عناصر HTML اختصاصی و رویکرد خودشان را برای ارائه ارائه دادند.

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

        با تثبیت HTML 4.0 و XHTML ، جنبش استاندارد وب سازندگان مرورگر را وادار به اتخاذ استانداردهای باز کرد تا صفحات وب با هر مرورگری سازگار باشد..

        این کار تا حد زیادی موفقیت آمیز بود ، اما دو روند مرزهای HTML را تحت فشار قرار دادند و کل اصول باز بودن و قابلیت همکاری را تهدید کردند..

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

        مورد دوم تمایل روز افزون به محتوای غنی و تعاملی بود که در HTML پشتیبانی نمی شد. این امر منجر به استفاده گسترده از Flash شد.

        در سال 2004 ، موزیلا و اپرا W3C مقاله ای را برای حمایت از آنچه بعداً تبدیل به HTML5 می شوند ارائه دادند. تکرار جدید این زبان از عملکرد تعاملی جدید و رسانه های غنی پشتیبانی می کند ، در حالی که به عقب با مرورگرهای وب سازگار با استاندارد سازگار است..

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

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

        "توصیه کاندیدای پایدار" در سال 2012 منتشر شد ، و توصیه کاملاً پایدار W3C در سال 2014 منتشر شد. در آن زمان ، کلیه مرورگرهای اصلی از مهمترین قسمتهای استاندارد پشتیبانی می کردند..

        استاندارد HTML5 اکنون دو مسیر توسعه موازی دارد. W3C دارای یک چرخه انتشار پایدار با شماره نسخه های افزایشی است - مجموعه ای از "عکس های فوری". WHATWG "استاندارد زندگی" در حال تحول را با ویژگی های جدیدی که بطور مداوم اضافه می شود ، حفظ می کند.

        چه جدید در HTML5 است?

        در HTML5 چیزهای جدیدی وجود دارد ، از جمله ماهیت مشخصات خود. در واقع HTML 4.0 موجودی از برچسب های نشانه گذاری موجود بود. HTML5 شامل آن است ، اما این فقط یک قطعه اکوسیستم مدولار فن آوری های مبتنی بر مرورگر است که در استاندارد تعریف شده است.

        نشانه گذاری

        تغییرات در نشانه گذاری برای HTML5 به طور کلی در چند دسته قرار می گیرند.

        مفاهیم

        نشانه گذاری معنایی به معنای نشانه گذاری است که معنی دارد. به عنوان مثال ، تنها عنصر اصلی طرح بندی صفحه در HTML 4.0 بود. A می تواند هر چیزی باشد: یک هدر ، یک پاورقی ، یک ستون ، یک نوار کناری ، یک فهرست. در HTML5 ، تعدادی از عناصر طرح بندی صفحه معنایی اضافه شده اند:

        • .

        سایر عناصر معنایی اضافه شده در HTML5 شامل موارد زیر است:

        • و ، که برای تصاویر و نمودارها استفاده می شود.
        • متن برجسته یا مشخص شده را تعریف می کند.
        • که تاریخچه ای را تعریف می کند.

        HTML5 نیز این موضوع را صریحا بیان می کند و باید بیش از این ترجیح داده شود و .

        چند رسانه ای

        عناصر جدید برای پشتیبانی از رسانه به HTML5 اضافه شد:

        • .

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

        HTML5 همچنین پشتیبانی صریح و گرافیکی بردار مقیاس پذیر (SVG).

        تعامل

        HTML5 دارای چندین عنصر فرم جدید و انواع ورودی است که به پشتیبانی از زبان به عنوان یک بستر برنامه کمک می کند. این شامل:

        • .

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

        در کنار کنترل های فرم جدید ، HTML5 معرفی و بازخورد بصری را ارائه می دهد و می تواند در خارج از فرم ها مورد استفاده قرار گیرد. علاوه بر این ، چندین ویژگی جدید جهانی ویژگی های تعاملی را فعال می کنند:

        • رضایت بخش
        • زمینه
        • داده ها-*
        • قابل کشیدن
        • منطقه قطره ای
        • طلسم.
        قوانین لکسینگ و تجزیه

        گذشته از تغییرات در فهرست عناصر موجود ، نشانه گذاری HTML5 در معرض مجموعه قوانین بسیار دقیق تر و تعریف شده تری از لغات و تجزیه قرار دارد. این دیگر نسخه ای از XML یا SGML نیست ، بلکه یک زبان نشانه گذاری کاملاً مشخص در نوع خود است.

        انتظار می رود خطاهای نحوی یا نشانه گذاری های ضعیف از بین بروند و رفتاری مشابه در مرورگرهای سازگار ارائه دهند.

        API های مرورگر و DOM

        HTML5 تعدادی API جاوا اسکریپت را برای تعامل با DOM مشخص می کند (Document Object Model - محتوای روی صفحه) و با مرورگر. این شامل:

        • بوم ، ذکر شده در بالا ، برای رندر گرافیکی درون صفحه.
        • پخش همزمان رسانه ، برای استفاده با و .
        • بررسی وضعیت آنلاین و آفلاین.
        • نوع MIME و ثبت كننده پروتكل ، كه به يك مرورگر اجازه مي دهد يك وب سايت را به عنوان شيوه پيش فرض براي پردازش پرونده خاص يا پروتكل ارتباطات انتخاب كند. به عنوان مثال ، اجازه دادن به یک برنامه وب پست الکترونیکی برای رسیدگی به نامه های پستی: پیوندها.
        • Microdata ، که لانه سازی فراداده معنایی را به عنوان ویژگی می دهد.
        • پیام رسانی متقابل ، که به دو صفحه از دو منبع دامنه مختلف ، در دو متن مرورگر مختلف باز می شود ، اجازه می دهد تا با یکدیگر ارتباط برقرار کنند.
        • ذخیره سازی وب ، یک فروشگاه داده ثابت جفت ارزش کلیدی مشابه کوکی ها ، اما استفاده راحت تر و با ظرفیت ذخیره سازی بیشتر است.

        موفقیت HTML5

        موفقیت HTML5 را می توان در دو مورد قضاوت کرد:

        • چقدر مشخصات اهداف خود را محقق می کند
        • پذیرش آن چقدر گسترده است.

        در هر دو مورد ، HTML5 بسیار موفق بوده است.

        اهداف HTML5 عبارتند از:

        • قابلیت همکاری مرورگر
        • کاهش یا حذف نیاز به افزونه ها
        • سازگاری با استانداردهای موجود.

        اینها تا حد زیادی حاصل شده اند. ارائه موتورهای ارائه شده و جاوا اسکریپت در مرورگرهای اصلی همه به این نکته همگرا شده اند که بازدید از یک صفحه وب یک تجربه مداوم را در همه مرورگرها ایجاد می کند..

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

        اسناد ایجاد شده در HTML5 در مرورگرهای میراث خوب ارائه می شوند ، حتی اگر برنامه های وب پیشرفته تر کار نکنند.

        حتی قبل از رسمی شدن استاندارد ، فرزندخواندگی سریع انجام شده است. از این نوشتار ، اکثر 10 میلیون وب سایت برتر از HTML5 استفاده می کنند. از این گذشته ، اکثر محتوای وب جدید در HTML5 تولید می شوند.

        حتی جالب تر استفاده از HTML5 در خارج از مرورگر بوده است. سیستم عامل هایی مانند Electron برای دسک تاپ و Phonegap برای موبایل HTML5 (با CSS3 و JavaScript) را به یک زبان کاربردی بومی تبدیل کرده اند.

        منابع HTML5 عمومی

        • توصیه HTML5 W3C و استاندارد زندگی WHATWG HTML دو منبع رسمی هستند که HTML5 را تعریف می کنند.
        • W3C یک سری دوره آموزشی را در HTML5 ارائه می دهد:
          • مقدمه HTML5
          • قسمت HTML5: ملزومات برنامه نویسی HTML5 و بهترین روش ها
          • HTML5 قسمت 2: تکنیک های پیشرفته برای طراحی برنامه های HTML5
        • Mozilla Developer Network یک مرجع جامع HTML5 را ارائه می دهد.

        HTML5 آینده است

        HTML5 حال و آینده وب است. اگر با فناوری های وب کار می کنید یا محتوای وب را منتشر می کنید ، باید با استاندارد آشنا باشید. اگر قبل از سال 2010 طراحی وب را آموخته اید و از تغییرات استفاده نکرده اید ، موارد بسیار خوبی در HTML5 وجود دارد که ارزش بررسی کردن دارد.

        منبع صوتی و تصویری

        قبل از آمدن HTML5 ، جاسازی صوتی و تصویری در صفحات وب ساده نبود. فن آوری های مختلف و انواع MIME به افزونه های مختلفی نیاز دارند.

        همچنین ، گاهی اوقات رسانه ها باید با استفاده از iframes جاسازی شوند. این ایده آل نیست زیرا این روشی است که هکرها نیز برای جاسازی کد مخرب از آن استفاده می کنند.

        HTML5 برچسب های جدیدی را ارائه می دهد که مدیریت رسانه ها را آسان تر می کند ، در درجه اول به این دلیل که آنها استاندارد هایی را ارائه می دهند که می توانند در هر سایتی استفاده شوند. مانند همه برچسب های HTML5 ، احتیاط لازم است ، زیرا ممکن است برچسب ها با مرورگرهای قدیمی سازگار نباشد.

        برای جاسازی صدا یا فیلم ، می توانید از عناصر جدید و HTML5 استفاده کنید. در اینجا مثالی وجود دارد:

        لطفاً مرورگر خود را ارتقا دهید.

        در زیر ، ما هر عنصر را با ویژگی های آن تقسیم می کنیم.

        جاسازی ویدئو

        HTML5 یک عنصر جدید را معرفی می کند ، که این امر نیاز به افزونه های مرورگر را برطرف نمی کند.

        بین برچسب های باز و بسته شدن عنصر ، می توانید متن جایگزین را مشخص کنید. این تنها در صورت نمایش مرورگر از عنصر نمایش داده می شود.

        ویژگی های عنصر

        در این عنصر می توانید ویژگی های مختلفی را مشخص کنید:

        عرض ارتفاع

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

        عرض و ارتفاع یک فیلم باید در پیکسل ها مشخص شود.

        کنترل می کند

        ویژگی کنترل ها به مرورگر می گوید یک دکمه پخش / مکث و یک نوار لغزنده کنترل صدا را نشان دهد. برای نمایش فیلم بدون کنترل ، این ویژگی را حذف کنید.

        پخش خودکار

        Autoplay ، ویدیو را مجبور می کند تا بدون هیچ گونه دخالت کاربر ، در دستگاه های دسک تاپ شروع به پخش کند. برای نمایش بدون پخش خودکار ، این ویژگی را به راحتی حذف کنید.

        در دستگاه های تلفن همراه ، ویژگی خودکار پخش نادیده گرفته می شود.

        جاسازی صوتی

        برای جاسازی صدا ، از این عنصر استفاده کنید. بسیار شبیه به عنصر است.

        بین برچسب های باز و بسته شدن عنصر ، می توانید متن جایگزین را مشخص کنید. این تنها در صورت نمایش مرورگر از این عنصر نمایش داده می شود.

        ویژگی های عنصر

        در این عنصر می توانید ویژگی های مختلفی را مشخص کنید:

        حلقه

        ویژگی حلقه به مرورگر می گوید که آهنگ را از همان ابتدا بازی را دوباره شروع کند.

        کنترل می کند

        ویژگی کنترل به مرورگر می گوید همان دکمه پخش / مکث و کشویی کنترل صدا را مانند برچسب ویدیو نشان دهد. برای نمایش صوتی بدون کنترل ، به سادگی ویژگی را حذف کنید.

        پخش خودکار

        ویژگی autoplay صدا را مجبور می کند به طور خودکار شروع به پخش کند. برای جاسازی صوتی بدون پخش خودکار ، این ویژگی را به راحتی حذف کنید.

        خاموش شد

        ویژگی صامت هنگام بارگذاری صدا صدا را قطع می کند.

        پیش بارگذاری

        ویژگی preload به شما امکان می دهد صوتی را قبل از محتوای صفحه بارگیری کنید. مقادیر قابل قبول خودکار ، ابرداده یا هیچ کدام نیستند.

        عنصر

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

        مثلا:

        مرورگر شما ویدئو با این پسوند را پشتیبانی نمی کند.

        ویژگی های عنصر

        این ویژگی های زیر را دارد:

        src

        ویژگی src مسیر منبع و نام پرونده فایل ویدیویی یا صوتی را مشخص می کند.

        نوع

        نوع MIME پرونده.

        برای فیلم ، مقادیر قابل قبول عبارتند از: video / mp4 ، video / webm و video / ogg. برای صدا ، مقادیر قابل قبول صوتی / مگاپیکسلی ، صوتی / wav و صوتی / ogg است.

        در حالی که مرورگرهای مدرن از لحاظ تئوری از خود عنصر پشتیبانی می کنند ، برخی ممکن است با انواع خاصی از MIME مبارزه کنند.

        برای بهترین فرصت سازگاری با مرورگر متقابل ، نوع ویدیو / mp4 MIME برای فیلم توصیه می شود ، و نوع صوتی / mpeg MIME برای صوتی بهترین است. اگر می خواهید مثلاً یک نسخه ogg و mp4 همان فیلم را تهیه کنید ، می توانید چندین عنصر را مشخص کنید.

        عنصر

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

        می توانید برای هر عنصر صوتی یا ویدیویی بیش از یک آهنگ تعیین کنید. به عنوان مثال ، ممکن است بخواهید عناصری را برای زبانهای مختلف اضافه کنید:

        ویژگی های عنصر

        این عنصر دارای خصوصیات زیر است:

        src

        مسیر منبع و نام پرونده فایل متنی.

        نوع

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

        srclang

        ویژگی srclang به شما امکان می دهد زبان فایل متنی را مشخص کنید. از کد زبان مناسب استفاده کنید.

        پیش فرض

        از مشخصه پیش فرض استفاده کنید تا مشخص کنید کدام یک از گزینه های پیش فرض است.

        برچسب

        نام آهنگ را به متن می دهد.

        منابع صوتی و تصویری

        • موزیلا با استفاده از صوتی و تصویری HTML5 این راهنمای عالی را تهیه کرده است. این کار شما را از استفاده ساده تا پیشرفته می گیرد.
        • اپل راهنمایی خاصی را برای توسعه دهندگان منتشر کرده است. اگر در حال توسعه برای iOS یا Safari هستید ، این خواندن ارزشمند است.
        • مایکروسافت برای صوتی و تصویری HTML5 در Internet Explorer راهنمایی های خاص خود را دارد.

        حافظه نهان برنامه

        HTML5 فقط نحو نشانه گذاری را تغییر نداد. همچنین تعدادی از فناوریهای مبتنی بر مرورگر ، از جمله چندین مورد مربوط به استفاده آفلاین از برنامه های وب تعریف شده است.

        برنامه حافظه پنهان (یا "AppCache") ویژگی ای است که به توسعه دهندگان امکان می دهد منابع را از پیش خریداری شده و محلی ذخیره کنند..

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

        AppCache یک ویژگی با پتانسیل های فراوان است ، به خصوص در زمینه برنامه های وب یک صفحه ای. متأسفانه این ویژگی همچنین دارای مشکلات زیادی است و در مرحله استهلاک و حذف آن از استاندارد است.

        گفته می شود ، AppCache هنوز قابل استفاده است و تنها راه برای دستیابی به جلوه های خاص است.

        برای کمک به شما در مقابله با این سردرگمی ، بهترین آموزش ها و منابع موجود در برنامه Cache را که موضوع را از زوایای مختلف کاوش می کنیم ، جمع کرده ایم..

        برنامه آموزش کش

        • راهنمای مبتدی برای استفاده از حافظه نهان ، یکی از بهترین آموزش های مقدماتی در مورد این موضوع است.
        • استفاده از برنامه کش ، یک آموزش فنی متمرکز بر توسعه دهنده است که از شبکه توسعه دهنده Mozilla است.
        • بیایید این آفلاین توضیح مفصل و روایتی راجع به نحوه استفاده از AppCache ارائه دهیم.
        • استفاده از حافظه نهان نرم افزار HTML5 در برنامه های وب همراه ، استفاده عمومی از AppCache را پوشش می دهد و در هنگام استفاده از برنامه هنگام توسعه برنامه های وب HTML5 برای مرورگرهای موبایل ، موارد ویژه را بررسی می کند..
        • استفاده از حافظه نهان برنامه HTML 5 برای برنامه های یک صفحه جزئیات استفاده از AppCache را در زمینه برنامه Ember.js شرح می دهد.
        • آموزش: نحوه ساخت آفلاین برنامه HTML5 با استفاده از مثال یک خواننده RSS برای توضیح نحوه ساخت یک برنامه وب که به صورت آفلاین کار می کند. مورد توجه ویژه اینجا نحوه استفاده از AppCache با چندین فروشگاه داده HTML دیگر مانند کوکی ها ، محلی ذخیره سازی و WebSQL است..
        • ساختن لیست کارهایی که به صورت آفلاین انجام می شوند با IndexedDB و WebSQL ساخت یک برنامه لیست آفلاین اولین کارهایی را انجام می دهد که در چندین مرورگر با پشتیبانی متفاوت از ویژگی های ذخیره داده آفلاین کار می کند. برنامه Cache به همراه IndexedDB و WebSQL استفاده می شود.
        • ایجاد برنامه آفلاین با حافظه نهان برنامه HTML5 ، استفاده از AppCache را شامل می شود ، از جمله دستورالعمل های گام به گام در مورد چگونگی ایجاد مانیفست و جزئیات مربوط به استفاده از .htaccess برای ارائه صحیح در مورد فایل مانیفست در Apache..
        • ایجاد HTML5 برنامه های کاربردی وب آفلاین به بررسی موارد مختلف و روش های مختلف ذخیره محلی داده از جمله AppCache می پردازد.
        • افزودن حافظه نهان برنامه HTML5 برای سرعت بخشیدن به برنامه وب شما در 5 دقیقه یک آموزش کوتاه است که شما را با استفاده از AppCache به سرعت جذب می کند. تمرکز این آموزش بر استفاده از حافظه پنهان برای سرعت بخشیدن به تجربه وب سایت آنلاین است نه بر ارائه تجربه برنامه آفلاین.
        • اجرای برنامه های وب خود به صورت آفلاین با برنامه HTML5 برنامه حافظه پنهان و همچنین JavaScript API را پوشش می دهد و جزئیات و رویدادهای مربوط به حافظه پنهان را ذخیره می کند.
        • حافظه نهان برنامه چیست؟ نمای کلی سطح بالای AppCache را ارائه می دهد.
        • یک برنامه آفلاین HTML5 با برنامه حافظه پنهان ، ذخیره سازی وب ، و ASP.NET MVC بسازید و با ارائه پوشش کاملی از ساختار صحیح یک فایل مانیفست ، نگاهی دقیق به نحوه عملکرد AppCache ارائه دهید. پس از این توضیحات کلی ، آموزش ادامه می یابد تا نحوه مدیریت این فرآیند را در یک برنامه ASP.NET نشان دهد.

        مطالب یادگیری حافظه نهان برنامه کاربردی اضافی

        • بهترین راهکارها برای یک برنامه وب سریعتر با HTML5 فقط در یک بخش به برنامه حافظه نهان لمس کنید ، اما در درک چگونگی استفاده از حافظه نهان به عنوان بخشی از یک استراتژی عملکرد بزرگتر بسیار مفید است..
        • نکاتی در هنگام استفاده از حافظه نهان ، لیستی از بهترین روشها برای مقابله با برخی از مشکلات رایج AppCache است.
        • با حذف حافظه نهان برنامه HTML ، نحوه حذف حافظه نهان برنامه محلی در چندین مرورگر توضیح داده می شود. این امر به ویژه در هنگام توسعه و آزمایش محلی مفید است ، هنگامی که پرونده های پروژه شما سریعتر از AppCache در حال طراوت در حال تغییر هستند.
        • اشتباهات رایج برای جلوگیری از استفاده از حافظه نهان برنامه HTML5 تعدادی از رایج ترین مشکلات AppCache را پوشش می دهد و نحوه غلبه بر آنها را توضیح می دهد.
        • Application Cache یک Douchebag خنده دار است ، اما خیلی دقیق ، در مورد مشکلات کار با برنامه کش حافظه نیست. این مقاله یک کلاسیک فوری در بین توسعه دهندگان جلویی بود و قطعاً برای هر کسی که علاقه مند به AppCache باشد خواندن آن ضروری است.

        مرجع حافظه نهان برنامه

        • آیا می توانم از حافظه نهان برنامه استفاده کنم؟ به شما می دهد یک مرور سریع از مرورگرها از AppCache پشتیبانی می کنند.

        ابزارهایی برای کار با حافظه نهان برنامه

        • اعتبار حافظه نهان یک ابزار آنلاین برای اعتبارسنجی پرونده های AppCache Manifest است.
        • GWT AppCache Library Library ماژولی برای Google Web Toolkit است که به طور خودکار تولید پرونده های آشکار Appcache را خودکار می کند.
        • Appcache-Manifest یک ابزار Node.js برای تولید پرونده های Cache Manifest از خط فرمان است. این ابزار شامل هش MD5 از پرونده های مانیفست است ، و اطمینان می دهد که فایلهای به روز شده به طور خودکار مانیفست را تغییر می دهند ، باعث عدم اعتبار مناسب حافظه پنهان در مشتری می شود..
        • CacheMan یک برنامه دسک تاپ است که از نسل Cache Manifest استفاده می کند.

        انتقال به جلو با حافظه نهان برنامه

        آیا باید یاد بگیرید که چگونه از Application Cache استفاده کنید؟ اگر یک توسعه دهنده جلویی هستید که روی برنامه های وب کار می کنید - کاملاً بله. اما شما همچنین باید بدانید که چه چیزی می آید و چگونه فضای ذخیره مرورگر آفلاین در حال تحول است.

        جایگزینی در نظر گرفته شده برای AppCache ، Workers Service است. از قبل می توانید در بعضی از مرورگرها از خدمات کارگر استفاده کنید ، و ابزارهای بسیار خوبی برای اجرای آسان آنها وجود دارد. از طرف دیگر ، برخی از مرورگرها حتی تصمیم نگرفته اند كه این ویژگی را اجرا كنند یا نه.

        بنابراین چه کاری باید در برنامه های وب خود انجام دهید?

        هم اکنون از AppCache استفاده کنید ، اما برای Workers Service آماده شوید.

        بازی ها ، گرافیک ها و انیمیشن ها

        گرافیک برداری مقیاس پذیر (SVG) و عنصر بوم HTML5 دو ابزار قدرتمند برای ایجاد گرافیک ، انیمیشن و حتی بازی های مبتنی بر مرورگر هستند. در حالی که هر دوی این فناوری ها می توانند برای برخی از اهداف مشابه مورد استفاده قرار گیرند ، آنها به روشهای اصولی متفاوت کار می کنند.

        • یک عنصر بوم یک فضای بیت مپ است که در آن می توانید تصاویر شایع شده را بر اساس پیکسل به پیکسل ترسیم و دستکاری کنید..
        • SVG کدی است که یک گرافیک بردار مستقل از وضوح را توصیف می کند.

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

        SVG در مقابل بوم

        در وهله اول ، SVG بخشی از مشخصات HTML5 نیست در حالی که بوم است. SVG زبانی است که برای توصیف گرافیک های دو بعدی استفاده می شود. این یک استاندارد وب مستقل است که می تواند در اسناد HTML و XML تعبیه شود.

        SVG هنگامی که در یک اسناد HTML تعبیه شده است ، از نحوی متناسب با نحو HTML5 استفاده می کند ، بنابراین برخی از آنها به اشتباه تصور می کنند که SVG یک عنصر HTML است..

        عناصر بوم SVG و HTML5 توسط مرورگرها کاملاً متفاوت ارائه می شوند:

        • عناصر بوم "در پرواز" ارائه می شوند. این بدان معنی است که عناصر بوم به محض پردازش توسط مرورگر ، در زمان واقعی ترسیم می شوند.
        • SVG بلافاصله ترسیم نمی شود. هنگامی که یک مرورگر با SVG روبرو می شود ، ابتدا DOM را برای SVG ایجاد می کند و سپس DOM را ارائه می دهد.

        ممکن است این یک تفاوت جزئی به نظر برسد ، اما اینگونه نیست. این بدان معنی است که هنگام مواجهه با بوم ، یک مرورگر مجبور نیست DOM بسازد ، اما هنگام ارائه SVG لازم است.

        برای انیمیشن های ساده ، تفاوت ناچیز است. با این حال ، انیمیشن های بوم فوق العاده پیچیده نیاز به منابع چشمگیر کمتری نسبت به SVG دارند.

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

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

        چه زمانی باید از SVG و Canvases استفاده کنیم

        همه اینها این سؤال را ایجاد می کند: چه موقع باید از SVG ها و عناصر بوم استفاده شود؟ اگرچه در کاربرد این ابزارها تقاطع خاصی وجود دارد ، به طور کلی این دستورالعمل ها را دنبال کنید:

        • از SVG ها برای انیمیشن ها و گرافیک هایی با کیفیت پیکسل استفاده کنید که باید در دستگاه هایی با هر اندازه ای تیز به نظر برسند.
        • اگر لازم نیست از JavaScript یا از دسترسی به محتوای انیمیشن استفاده کنید ، از SVG استفاده کنید.
        • از بوم HTML5 برای ایجاد انیمیشن ها و بازی های پیچیده استفاده کنید که حجم زیادی از ورودی کاربر را شامل می شود.

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

        منابع بوم

        بیایید با اصول اولیه شروع کنیم:

        • Mozilla Developer Network Canvas Network: این آموزش با استفاده از پایه شروع می شود و برای پوشاندن شکل های نقاشی ، متن ، استفاده از تصاویر ، ایجاد تحولات و انیمیشن ها ، دستکاری پیکسل ها و موارد دیگر حرکت می کند. با پایان این آموزش انیمیشن های پیشرفته ، یک پانورامای مداوم در حال انتظار و یک برنامه انتخاب رنگ ایجاد خواهید کرد.
        • بوم Dev.Opera HTML5 - مبانی: این معرفی کاملی از بوم ، تکنیک های طراحی ، کار با تصاویر ، دستکاری مبتنی بر پیکسل و همچنین متن ، سایه ها و شیب را شامل می شود..
        • آموزش بوم W3Schools: اصول طراحی ، کار با مختصات ، شیب ، ترسیم متن و کار با تصاویر را یاد بگیرید. سپس با ساختن ساعت بوم ، آنچه آموخته اید را اعمال کنید. در آخر ، همه اینها را کنار هم قرار داده و چند بازی اساسی مختلف HTML5 ایجاد کنید.
        • Eloquent JavaScript، Chapter 16: Drawing on Canvas: این متن برای آموزش برنامه نویسان JavaScript طراحی شده است ، نه فقط آموزش ترفندهای ساده در وب است. کل این کتاب تعاملی یک مین طلایی است ، اما اگر تمرکز شما به طور جدی بر یادگیری نحوه کار با عنصر بوم است ، فصل 16 یک پایه مستحکم در نحوه تعامل جاوا اسکریپت و عنصر بوم HTML ارائه می دهد..

        با درک اصولی از اصول بوم ، می خواهید به سمت تکنیک های پیشرفته بروید:

        • Creative JS 31 Days of Canvas Training: عنصر بوم را در یک ماه (کم و بیش) تسلط دهید. این سریال را تمام کنید و چندین تکنیک پیشرفته انیمیشن بوم را یاد خواهید گرفت.
        • HTML5 Rocks Case Studie: Building Racer: به این مطالعه موردی توجه کنید و خواهید دید که چگونه مهندسان حرفه ای گوگل با JavaScript و بوم کار می کنند.

        هیچ راهی بهتر برای یادگیری وجود ندارد. این آموزش ها آنچه را که شما یاد گرفته اید استفاده کنید و نحوه ایجاد برخی از بازی های ساده HTML5 را به شما نشان می دهد:

        • CSS-Tricks Learning Canvas: ساخت یک مار بازی: CSS-Tricks به دلیل ارائه آموزش ها و مقاله های فنی بسیار عالی شناخته شده است. در ادامه این آموزش را دنبال کنید و یک بازی جالب مار را تهیه کنید و همزمان همزمان یاد بگیرید چگونه با بوم از یک مهندس جلوی در توییتر یاد بگیرید.
        • راهنمای HTML5 Rocks No Tears برای بازی های HTML5: این آموزش گام به گام مراحل ساخت یک بازی مهاجم فضایی ساده را طی می کند..
        • Envato Tuts + ایجاد یک پازل تعویض کاشی بوم HTML5: نحوه استفاده از بوم و جاوا اسکریپت را برای ساخت یک معمای تعویض کاشی در این آموزش بیاموزید. نتیجه یک برنامه ساده با مشکل قابل تنظیم خواهد بود که می توانید با هر تصویری از آن استفاده کنید.
        • Dev.Opera Creating Pseudo 3D Games With HTML 5 Canvas and Raycasting: این آموزش به شما نشان می دهد که چگونه می توانید یک نقشه بازی شبه 3D با HTML5 و بوم به سبک بازی افسانه ای اوایل دهه 90 Wolfenstein 3D بسازید. در حالی که این آموزش یک بازی تیرانداز سه بعدی اول شخص را تولید نمی کند ، شما می آموزید که چگونه می توانید یک نقشه سه بعدی سه بعدی را بصورت کامل و دارای محافظ و نگهبان تهیه کنید.

        هیچ راه بهتری برای توسعه تسلط بر یک موضوع وجود ندارد تا کار با یک یا دو متن عمیق. در اینجا سه ​​مورد از بهترین متون بوم HTML5 موجود است:

        • HTML5 Canvas (2013) توسط Fulton و Fulton: یاد بگیرید برای ساخت برنامه های کاربردی وب چندرسانه ای تعاملی با بوم و JavaScript. این متن نقشه های ساده 2D ، استفاده از الگوریتم ها برای توسعه حرکت مبتنی بر ریاضی ، استفاده از فیلم و تصاویر ، پاسخگو بودن برنامه های بوم و موارد دیگر را در بر می گیرد..
        • گرافیک فوق العاده جاوا اسکریپت: با بوم HTML5 ، jQuery و موارد دیگر (2011) توسط Raffaele Cecco: این متن پیشرفته به شما در تسلط بر بوم HTML5 کمک می کند و از تکنیک های پیشرفته ای مانند تشخیص برخورد ، دست زدن به اشیاء ، پیمایش صاف و ابزارهای تجسم داده Google استفاده می کند..
        • Core HTML5 Core: Graphics، انیمیشن و توسعه بازی (2011) توسط دیوید گری: این متنی برای مبتدیان نیست. این طراحی شده است که توسط توسعه دهندگان با تجربه که دارای سطح متوسط ​​از JavaScript هستند ، خوانده شود. در حالی که این متن اصول بوم را پوشش می دهد ، تمرکز آن بر مباحث پیشرفته ای از قبیل توسعه بازی ، کنترل برنامه های سفارشی ، کاربرد فیزیک در بازی های HTML5 و توسعه برنامه های تلفن همراه است.

        عناصر تعاملی

        HTML5 چند ویژگی اضافه کرده است تا ایجاد صفحات وب تعاملی آسان تر شود.

        جزئیات و برچسب های خلاصه

        با استفاده از HTML5 می توان لیست هایی ایجاد کرد که می توانند از طریق برچسب ها گسترش یافته و از بین بروند. اگرچه لیست های بولت درست مانند نسخه های قبلی HTML با استفاده از لیست ایجاد می شوند

          و
        • برچسب ها ، اینها ایستا هستند و نمی توانند فروپاشند.
          عنصر

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

            برچسب زدن مثال زیر روشی برای شروع بخش کد با این برچسب را نشان می دهد:

            ...

            برای تکمیل لیست ، اضافه کردن برچسب های جزئیات کافی نیست. برچسب های خلاصه نیز باید اضافه شود.

            عنصر

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

            محتوای برچسب خلاصه را می توان با هر عنصر HTML از جمله مشخص کرد

            یا

              . در زیر نمونه ای ساده از استفاده از تگ ها و نشان ها وجود دارد:

              برچسب لیست کنید

              اطلاعات جزئیات به اینجا می رود...

              همچنین می توان لانه ها و برچسب ها را در یک مجموعه دیگر قرار داد. با این کار یک لیست قابل جمع / قابل گسترش در یک لیست دیگر ایجاد می شود.

              در اینجا نمونه ای از لیستی در لیست دیگر با استفاده از و برچسب ها وجود دارد:

              لیست موارد

              مورد 1

              مورد 2

              مورد 3

              مورد

              مورد ب

              مورد 4

              از جزئیات و برچسب های خلاصه می توان برای ایجاد تأثیر لیست هایی استفاده کرد که به صورت پویا در یک صفحه وب باز و بسته می شوند. این می تواند برای انواع سناریوها از جمله سؤالات متداول کاربرد داشته باشد که دارای پاسخ به سؤالاتی است که می تواند باز یا بسته شود.

              برچسب خلاصه می تواند در حالی که محتوای جمع شده با جواب جمع می شود حاوی سوال باشد.

              برچسب های منو و منویتم

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

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

              برچسب هایی که این امر را ممکن می سازد ، تگ ها هستند. از آنجا که اینها برچسب های آزمایشی هستند ، از پشتیبانی گسترده ای برخوردار نیستند. Firefox تنها مرورگر بزرگی است که در حال حاضر از آنها پشتیبانی می کند.

              عنصر

              در هر زمان که یک مورد از فهرست مورد نیاز است افزوده شود ، مجموعه موارد باید با برچسب شروع شود. این سریال با برچسب بسته شدن پایان می یابد, .

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

              ...

              در این حالت ، وقتی از سمت راست کاربر بر روی دکمه ماوس در "tmpDiv" کلیک می کند ، عناصر منوی سفارشی ظاهر می شوند. مانند اکثر برچسب های HTML5 ، برچسب منو دارای ویژگی هایی به نام label و نوع نیز هست.

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

              عنصر

              برای افزودن موارد به منو ، توسعه دهندگان باید نام موارد را با استفاده از برچسب مشخص کنند. این برچسب دارای برخی خصوصیات است که بر ظاهر و رفتار آیتم منو تأثیر می گذارد.

              ویژگی های برچسب menuitem شامل برچسب ، نماد و onclick می باشد.

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

              اقداماتی که ویژگی onclick انجام می دهد می تواند کد جاوا اسکریپت را اجرا کند. به عنوان مثال ، کاربران می توانند جعبه هشدار را مشاهده کنند. در اینجا مثالی از چگونگی تنظیم برچسب menuitem وجود دارد که پنجره ای را نشان می دهد که می گوید: "سلام":

              از منوها و برچسب های menuitem می توان برای ایجاد منوهای تخصصی استفاده کرد. این امر به کاربران امکان می دهد بسته به انتخاب منوی مورد نظر ، اقدامات مختلفی را انجام دهند. با این حال ، از پشتیبانی محدود برای این برچسب ها بر حذر داشته باشید.

              کشیدن و رها کردن بومی

              قبل از HTLM5 ، توسعه دهندگان برای اضافه کردن انیمیشن های کشیدن و رها کردن به وب سایت ها و برنامه ها مجبور بودند از کتابخانه های جاوا اسکریپت مانند jQuery UI یا Dojo استفاده کنند..

              با این حال ، HTML5 از پشتیبانی مرورگر بومی برای رویدادهای کشیدن و رها کردن ، API جاوا اسکریپت و نشانه گذاری اختصاصی برای پشتیبانی از این تعامل ها اضافه می کند. در این بخش ، نگاهی به کشیدن و رها کردن HTML5 خواهیم انداخت و اجرای اصلی این ویژگی را کدگذاری می کنیم.

              بلوک های ساختمان

              برای ایجاد تعامل با کشیدن و رها کردن ، به نشانه گذاری HTML شما باید سه نوع عنصر را شامل شود:

              • یک عنصر منبع: عنصری که باید بکشید ، با استفاده از ویژگی HTML5 draggable = مشخص می شود"درست است، واقعی".
              • یک عنصر هدف: عنصری که عنصر کشیده شده رها خواهد شد ، به عنوان ویژگی HTML5 Droppable ="درست است، واقعی".
              • یک payload: داده هایی که هنگام حذف یک عنصر کشیده شده منتقل می شوند.

              رویدادهای API را بکشید و رها کنید

              JavaScript API شامل شش رویداد و یک شی است که برای ایجاد تعامل کشیدن و رها کردن باید از آن استفاده کنید.

              • با انتخاب یک شیء قابل درگ ، رویداد dragstart آتش می گیرد.
              • هنگامی که یک نشانگر موس وارد یک شیء قابل Dropable می شود ، هنگامی که نشانگر ماوس وارد یک شیء قابل dropable می شود ، رخ می دهد.
              • رویداد dragover هر بار که ماوس حرکت می کند در حالی که یک شیء قابل کشیدن انتخاب می شود ، آتش می گیرد و نشانگر ماوس روی یک شیء قابل Dropable می باشد..
              • هنگامی که یک شیء قابل کشیدن انتخاب شد و نشانگر ماوس یک شیء قابل Dropable را ترک می کند ، رویداد dragleave آتش می گیرد.
              • رویداد dragend هنگامی که با آزاد کردن دکمه ماوس یا خروج از پنجره مرورگر ، یک شیء قابل جابجایی انتخاب شود ، آتش می گیرد.
              • هنگامی که یک جسم قابل کشش روی یک شیء قابل Dropable سقوط می کند ، این رویداد آتش سوزی می شود.
              • از شیء dataTransfer برای نگهداری داده های کشیده شده استفاده می شود.

              نمونه کشیدن و رها کردن

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

              مقاله ای که برای این مثال الهام بخش بوده است HTML5 Rocks: Native HTML5 Drag and Drop.

              بیایید با HTML شروع کنیم

              پیاده سازی مورد علاقه DnD
              HTML51
              jQuery UI2
              Dojo3

              ما سه شکاف ایجاد کرده ایم که هرکدام حاوی متن است که مربوط به اجرای کشیدن و رها کردن متفاوت است. ما همچنین پیش رفته ایم و هر سه را به ترتیب پیش فرض با اولویت های اختصاصی 1 ، 2 و 3 ترتیب داده ایم.

              به هر div یک ویژگی Droppable = داده شده است"درست است، واقعی" و قابل کشیدن ="درست است، واقعی" این واقعیت را منعکس می کند که قصد داریم هر سه را با یکدیگر قابل تعویض کنیم.

              بیایید یک ظاهر طراحی اولیه را اضافه کنیم.

              #جعبه ها {
              متن-تراز: مرکز؛
              عرض: 100٪؛
              حداکثر عرض: 658px؛
              حاشیه: 0 خودکار؛
              حاشیه: 0 خودکار؛
              font-family: 'Source Sans Pro'، FreeSans، Arimo,"Droid Sans",Helvetica ، Arial ، sans-serif؛
              سرریز: خودکار؛
              }
              .عنوان {
              نمایش: بلوک؛
              اندازه قلم: 1.25em؛
              بالشتک: 10px؛
              }
              .جعبه
              پس زمینه-رنگ: # bcd5e0؛
              مرز: 2px جامد #aaa؛
              حاشیه: 10px؛
              مکان نما: حرکت؛
              سرریز: خودکار؛
              }
              .جعبه .nd-tech
              اندازه قلم: 1em؛
              نمایش: inline-block؛
              بالشتک: 10px 0؛
              }
              .جعبه .poz
              اندازه قلم: 1em؛
              شناور به سمت چپ؛
              بالشتک: 10px؛
              مرز-راست: 2px solid #aaa؛
              رنگ: #fff؛
              پس زمینه-رنگ: # 0a5194؛
              }

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

              کشیدن و انداختن

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

              .box.dragged
              کدورت: .5؛
              }
              .box.over
              مرز: 2px خراب # 222؛
              کدورت: .5؛
              }

              به JavaScript بروید. بیایید با ایجاد کارکردهایی که علاوه بر حذف و حذف کلاسهای کشیده و بالاتر را بر اساس فعالیت کاربر انجام می دهیم ، شروع کنیم.

              تابع dragStartHandler (e)
              this.classList.add ("کشیده")؛
              }

              تابع dragEnterHandler (e)
              this.classList.add ('over')؛
              }

              عملکرد dragLeaveHandler (e)
              this.classList.remove ('over')؛
              }

              تابع dragEndHandler (e)
              [] .forEach.call (جعبه ، عملکرد (جعبه) {
              box.classList.remove ('بیش از' ، 'کشیده شده')؛
              })؛
              }
              varbox = document.querySelectorAll ('# box .box')؛

              در حال حاضر ، این توابع هیچ کاری نمی کنند. لحظه به لحظه ، ما هر یک را به یک رویداد مناسب گره می زنیم. فعلاً ، ببینیم هرکدام چه می کنند.

              اولین عملکرد ، dragStartHandler ، کلاس کشیده شده را به عنصر کشیده اضافه می کند.

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

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

              در مرحله بعد ، ما باید تابعی را بنویسیم که کمی کار پاکسازی را انجام دهد تا رویداد dragover انجام شود.

              عملکرد dragOverHandler (e)
              if (e.preventDefault)
              e.preventDefault ()؛
              }
              بازگشت به دروغ؛
              }

              هنگامی که ما این عملکرد را به dragover وصل می کنیم ، عملکرد پیش فرض مرورگر غیرفعال می شود که بعضی اوقات می تواند در حین تعامل با کشیدن و رها کردن به کار خود ادامه دهد..

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

              تابع dragStartHandler (e)
              this.classList.add ("کشیده")؛

              dragData = این؛
              e.dataTransfer.setData ("متن / html" ، this.firstElementChild.innerHTML)؛
              }

              تابع dropHandler (e)
              if (e.stopPopagation)
              e.stopPropagation ()؛
              }
              if (dragData! = این) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML؛
              this.firstElementChild.innerHTML = e.dataTransfer.getData ("متن / HTML")؛
              }
              بازگشت به دروغ؛
              }

              قبلاً عملکرد dragStartHandler را دیده ایم ، اما اکنون دو خط اضافه کرده ایم. اولین ، جعبه درگ شده را به متغیر dragData اختصاص می دهد.

              دوم از روش setData از data dataTransfer استفاده می کند تا HTML داخلی عنصر اول کودک از کادر انتخاب شده (عنصر Name) را به شیء dataTransfer اختصاص دهد..

              عملکرد dropHandler ابتدا رفتار پیش فرض مرورگر را متوقف می کند. در مرحله بعد ، این اطمینان را می دهد که شیء کشیده شده شیء قابل حذف نیستند. اگر اینگونه نباشد ، دو خط بعدی نام جعبه های قابل کشیدن و ریخته گری را تغییر می دهند.

              بنابراین ، اکنون ما تمام عملکردهای خود را در دست داریم و باید آنها را به شش رویداد کشیدن و رها کردن DOM گره بزنیم. ما می توانیم این کار را با یک تابع forEach انجام دهیم.

              [] .forEach.call (جعبه ، عملکرد (جعبه) {
              box.addEventListener ("dragstart" ، dragStartHandler ، غلط)؛
              box.addEventListener ('dragenter'، dragEnterHandler، false)؛
              box.addEventListener ("dragover" ، dragOverHandler ، غلط)؛
              box.addEventListener ('dragleave'، dragLeaveHandler، false)؛
              box.addEventListener ('drop'، dropHandler، false)؛
              box.addEventListener ('dragend' ، dragEndHandler ، false)؛
              })؛

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

              #جعبه ها {
              متن-تراز: مرکز؛
              عرض: 100٪؛
              حداکثر عرض: 658px؛
              حاشیه: 0 خودکار؛
              font-family: "Source Sans Pro" ، FreeSans ، Arimo ، "Droid Sans" ، Helvetica ، Arial ، sans-serif؛
              سرریز: خودکار؛
              }
              .عنوان {
              نمایش: بلوک؛
              اندازه قلم: 1.25em؛
              بالشتک: 10px؛
              }
              .جعبه
              پس زمینه-رنگ: # bcd5e0؛
              مرز: 2px جامد #aaa؛
              حاشیه: 10px؛
              مکان نما: حرکت؛
              سرریز: خودکار؛
              }
              .جعبه .nd-tech
              اندازه قلم: 1em؛
              نمایش: inline-block؛
              بالشتک: 10px 0؛
              }
              .جعبه .poz
              اندازه قلم: 1em؛
              شناور به سمت چپ؛
              بالشتک: 10px؛
              مرز-راست: 2px solid #aaa؛
              رنگ: #fff؛
              پس زمینه-رنگ: # 0a5194؛
              }
              .box.dragged
              کدورت: .5؛
              }
              .box.over
              مرز: 2px خراب # 222؛
              کدورت: .5؛
              }

              پیاده سازی مورد علاقه DnD

              HTML51
              jQuery UI2
              Dojo3

              تابع dragStartHandler (e)
              this.classList.add ("کشیده")؛

              dragData = این؛
              e.dataTransfer.setData ("متن / html" ، this.firstElementChild.innerHTML)؛

              }

              تابع dragEnterHandler (e)
              this.classList.add ("بیش از")؛
              }

              عملکرد dragLeaveHandler (e)
              this.classList.remove ("بیش از")؛
              }

              عملکرد dragOverHandler (e)
              if (e.preventDefault)
              e.preventDefault ()؛
              }
              بازگشت به دروغ؛
              }

              تابع dropHandler (e)
              if (e.stopPopagation)
              e.stopPropagation ()؛
              }
              if (dragData! = این) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML؛
              this.firstElementChild.innerHTML = e.dataTransfer.getData ("متن / HTML")؛
              }
              بازگشت به دروغ؛
              }

              تابع dragEndHandler (e)
              [] .forEach.call (جعبه ، عملکرد (جعبه) {
              box.classList.remove ("بیش از" ، "کشیده")؛
              })؛
              }

              varbox = document.querySelectorAll (‘# جعبه .box))؛
              [] .forEach.call (جعبه ، عملکرد (جعبه) {
              box.addEventListener ("dragstart" ، dragStartHandler ، نادرست)؛
              box.addEventListener ("Dragenter" ، dragEnterHandler ، false)؛
              box.addEventListener ("dragover" ، dragOverHandler ، غلط)؛
              box.addEventListener ("dragleave" ، dragLeaveHandler ، غلط)؛
              box.addEventListener ("قطره" ، dropHandler ، غلط)؛
              box.addEventListener ("dragend" ، dragEndHandler ، false)؛
              })؛

              منتظر چی هستی?

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

              Iframe

              در اصل ، یک iframe یک عنصر HTML است که یک پنجره مرورگر کوچک ایجاد می کند که درون یک صفحه وب قرار دارد که در آن می توانید هر سند HTML را بارگیری کنید..

              Iframes برای چه مواردی استفاده می شود?

              یکی از رایج ترین کاربردهای iframes در وب مدرن ، جاسازی رسانه های جریان در یک صفحه وب است. وب سایت های پخش کننده رسانه مانند Spotify ، Vimeo و YouTube از iframes استفاده می کنند تا محتوای آنها در وب سایت های دیگر جاسازی شود.

              به عنوان مثال ، به YouTube بروید ، هر ویدیویی را باز کنید ، با کلیک راست بر روی ویدیو کلیک کنید و Copy embed code را انتخاب کنید. وقتی این کار را انجام دهید ، کدی که به نظر می رسد مانند این است ، در کلیپ بورد شما کپی می شود:

              آن بیت کد را به یک صفحه وب اضافه کنید و از iframe برای بارگذاری ویدیوی YouTube میزبان در URL ارجاع شده با ویژگی src استفاده خواهد شد.

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

              • سایت هایی که تعداد زیادی کد را در آموزش ها نشان می دهند ، ممکن است از iframes برای ارائه آن کد استفاده کنند بدون اینکه بخواهید با سبک ها و اسکریپت های پیش فرض مربوط به وب سایت خود مبارزه کنند..
              • سایتهایی که تبلیغات شخص ثالث را نمایش می دهند ، اغلب از iframe برای بارگذاری این تبلیغات استفاده می کنند ، به این ترتیب با جایگزین کردن کد در سند منبع ، بدون انجام کاری به کد در صفحه وب که در آن تبلیغ نمایش داده می شود ، می توان تبلیغات را تغییر داد..

              Iframe HTML 4.01

              عنصر iframe در HTML 4.01 معرفی شده است و شامل چهار ویژگی اصلی است:

              • src: نشانی اینترنتی سند HTML را که باید در iframe ارائه شود را مشخص می کند.
              • عرض و ارتفاع: اندازه iframe را در پیکسل ها نشان می دهد.
              • name: اجازه می دهد که iframe توسط عناصر ، فرم ، دکمه یا عناصر ورودی مورد هدف قرار گیرد.

              HTML 4.01 همچنین طیفی از خصوصیات اضافی با اهمیت ثانویه را در بر می گیرد. با این حال ، بسیاری از این موارد به طور کامل در HTML5 حذف و یا حذف شدند.

              صفات Iframe حذف شده توسط HTML5

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

              • ویژگی تراز به نفع استفاده از float ، نمایشگر و حاشیه CSS ویژگی ها برای کنترل چیدمان iframe مستهلک شد..
              • ویژگی قاب فریم به نفع مرزهای CSS مستهلک می شود.
              • ویژگی های حاشیه ای و حاشیه ای به سود جیب های CSS کاهش یافته است.
              • ویژگی پیمایش به نفع استفاده از سرریز مستهلک شد: پنهان؛ برای پنهان کردن scrollbars iframe.

              یکی از خصوصیات اضافی ، longdesc ، از سوء استفاده گسترده رنج برده است. در نتیجه ، اکنون منسوخ شده است.

              ویژگی های Iframe اضافه شده توسط HTML5

              HTML5 دو ویژگی جدید به عنصر iframe اضافه کرد: sandbox و srcdoc.

              از ویژگی sandbox برای محدود کردن قابلیت های محتوای iframe استفاده می شود.

              به عنوان مثال ، اضافه کردن sandbox به iframe ، مانع از اجرای محتوای جاسازی شده توسط اسکریپت ها ، ارسال فرم ها ، بارگذاری محتوا در متن مرور سطح بالا و موارد دیگر می شود. محدودیت های اعمال شده برای iframe با اضافه کردن یک مقدار به ویژگی می تواند کاهش یابد.

              به عنوان مثال ، sandbox ="فرم های مجاز" اجازه می دهد فرم های موجود در iframe ارسال شود. مقادیر اضافی برای این ویژگی شامل ، اما به پنجره های مجاز ، اجازه با همان منشا ، اسکریپت های مجاز ، و ناوبری مجاز بالا محدود نمی شود..

              از ویژگی srcdoc می توان برای مشخص کردن HTML برای رندر در iframe استفاده کرد. به عنوان مثال ، کد زیر یک تصویر را در یک iframe ارائه می دهد:

              منابع Iframe

              اگر می خواهید درباره iframes بیشتر بدانید ، یکی از منابع جامع صفحه مرجع عناصر Iframe Network Developer Network Mozilla است. در اینجا می توانید توضیحات مفصلی در مورد هر ویژگی iframe ، از جمله بحث و گفتگوی عمیق در مورد تمام مقادیر احتمالی ماسهبازی پیدا کنید.

              میکروداتا

              وقتی به بررسی میزبان ما مراجعه می کنید ، ممکن است چیزی مانند "752 بررسی" و رتبه میزبان "4 5 ستاره" مشاهده کنید. به طور غریزی ، می فهمید که 752 بررسی کاربر برای ایجاد یک امتیاز میزبان جمع از 4 از 5 ستاره ترکیب شده است.

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

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

              مبانی Microdata

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

              ما با یک مورد مانند وب سایت شروع می کنیم. هنگامی که ما می دانیم که با یک وب سایت سر و کار داریم ، بسیاری از جفت های ارزش نام وجود دارند که به طور بالقوه می توانیم با آن وب سایت ارتباط برقرار کنیم ، مانند URL ، نام وب سایت یا توضیحات.

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

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

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

              علامت گذاری Microdata

              چهار ویژگی ریزگرد وجود دارد که بخشی از مشخصات HTML5 است:

              • itemcope صفتی است که مورد جدیدی را ایجاد می کند.
              • برای تعریف نوع موردی که ایجاد می شود ، در کنار آیتم اضافه می شود. در بیشتر موارد ، از یک نوع مورد schema.org استفاده می شود.
              • itemprop به هر عنصر اضافه شده است که حاوی خاصیتی از نوع است.
              • itemref به عنصر قلم وسایل اضافه شده است و عناصری را که فرزندان مستقیم عنصر قلم کالا نیستند با آن مرتبط می کند.

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

              میزبانی فوق العاده لینوکس

              دارای رتبه:
              4 از 5 ستاره توسط
              423 بررسی کاربر واقعی.

              بررسی ویژه کاربر

              این میزبان بسیار خوبی است! من آنها را دوست دارم!
              5 از 5 ستاره!

              کد بالا موردی را ایجاد می کند که شامل تعدادی جفت ارزش نام است:

              • ابتدا یک کالای شرکتی ایجاد کردیم.
              • نام مورد بر روی Super Linux Hosting تنظیم شده است.
              • URL مورد در http://superlinuxhosting.com تنظیم شده است
              • بررسی اجمالی مورد ، یک مورد تو در تو است که شامل دو جفت ارزش نام است: مقدار امتیاز 4 از 5 ستاره و تعداد بررسی 423.
              • سرانجام ، با استفاده از ویژگی itemref که به عنصر اول اضافه شده است ، آخرین جفت ارزش نام یک بررسی است که ارزش آن شامل دو جفت ارزش نام است: توضیحات و امتیاز 5 از 5 ستاره.

              با حضور ریزگردها ، Google و سایر موتورهای جستجو اطلاعات را نمایه می کنند و شرکت میزبان Super Linux Hosting و رتبه بندی مربوط به آن و بررسی انفرادی را می شناسند..

              منابع میکرودیتا

              اگر می خواهید در مورد میکروداده ها بیشتر بدانید دو مکان وجود دارد که باید بروید:

              • شروع به کار با Schema.org استفاده از Microdata مقدمه ای آسان برای دنبال کردن این موضوع است. علاوه بر این ، می خواهید این لیست از انواع آیتم schema.org را مفید نگه دارید.
              • HTML: استاندارد زندگی ، بخش 5 Microdata نگاه فنی به میکرووداتاست. اگر می خواهید یاد بگیرید که از میکرودیتا برای برنامه های سفارشی فراتر از schema.org استفاده کنید ، این منابعی است که به دنبال آن هستید.

              ویژگی های جهانی

              ویژگی ها را می توان به هر عنصر HTML اضافه کرد تا عملکرد یا رفتار پیش فرض این عنصر را تغییر دهد. آنها با نام بردن از ویژگی و اضافه کردن مقدار ویژگی در برچسب باز کردن عنصر ، مانند این اضافه می شوند:

              محتوا

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

              • accesskey: میانبر صفحه کلید را به یک عنصر اختصاص می دهد.
              • class: یک کلاس اضافه می کند تا هدف قرار دادن عنصری با شیوه های آبشار (CSS) برای یک ظاهر طراحی یا برنامه جاوا اسکریپت امکان پذیر باشد.
              • contentedible: یک عنصر را توسط بازدید کننده وب سایت قابل ویرایش می کند.
              • contextmenu: یک گزینه منوی زمینه سفارشی را با یک عنصر مرتبط می کند.
              • data- *: یک ویژگی داده سفارشی که می تواند برای نگهداری اطلاعات اختصاصی صفحه برای انتخاب استفاده در صفحه های CSS یا برنامه های JavaScript استفاده شود.
              • dir: جهت را به محتوای متنی یک عنصر اختصاص می دهد.
              • draggable: به عنصر اجازه می دهد تا با استفاده از پشتیبانی HTML5 محلی برای کشیدن و رها کردن رویدادها ، کشیده شود.
              • Dronezone: عملی را که باید با کم کردن یک مورد درگ شده انجام شود ، تعریف می کند. گزینه ها شامل کپی ، پیوند و انتقال هستند.
              • پنهان: برای مخفی کردن یک عنصر تا زمانی که نمایش داده شود استفاده می شود. در صورت لزوم این ویژگی با جاوا اسکریپت حذف می شود.
              • id: شناسه منحصر به فرد را به یک عنصر اختصاص می دهد.
              • lang: زبان محتوا را در عنصر مرتبط تعریف می کند.
              • spellcheck: تعیین می کند که آیا باید ورودی کاربر برای املا بررسی شود یا خیر.
              • style: اجازه می دهد تا سبک های CSS به طور مستقیم به یک عنصر HTML وصل شود.
              • tabindex: موقعیت را در فهرست برگه ای که عنصر باید در آن ظاهر شود تعیین می کند.
              • عنوان: متن را اضافه می کند که وقتی یک بازدید کننده موس را روی عنصر می کشد ، به عنوان یک ابزار نمایش داده می شود.
              • ترجمه: برای جلوگیری از ترجمه متن متنی عناصر HTML خاص از مرورگر استفاده می شود.

              برگزار کنندگان رویداد

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

              لیست زیر شامل کلیه ویژگی های کنترل کننده رویداد و پس از آن توضیحی از رویداد است که باعث می شود کنترل کننده باشد.

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

              • onabort: بارگیری یک عنصر قطع شده است.
              • onfocus و onblur: یک عنصر تمرکز را از دست داده یا از دست داده است.
              • oncancel: کاربران عنصر گفتگو را رد کرده اند.
              • oncanplay و oncanplaythrough: یک عنصر رسانه داده های کافی را برای شروع پخش یا برای تکمیل پخش بدون بافر بارگیری کرده است.
              • onchange: مقدار یک عنصر فرم ، مانند یک عنصر ورودی یا textarea ، تغییر کرده است.
              • onclick and ondblclick: روی یک عنصر کلیک شده یا دوبار کلیک شده است.
              • onclose: یکی از چندین رویداد متفاوت نزدیک رخ داده است.
              • oncontextmenu: منوی زمینه با کلیک راست بر روی عنصر باز شده است.
              • انکوپی ، پیاز و پیاز: عنصر مورد نظر بریده شده ، کپی شده یا چسبیده است.
              • oncuechange: یک آهنگ متنی مرتبط با یک منبع رسانه علائم نمایش داده شده در حال حاضر را تغییر داده است.
              • ondrag، ondragend، ondragenter، ondragexit، ondragleave، ondragover، ondragstart، ondrop: یک عنصر قابل جابجایی با استفاده از API drag and drop HTML5 دستکاری می شود..
              • ondurationchange: ویژگی مدت زمان یک عنصر رسانه تغییر کرده است.
              • تکمیل شده: یک عنصر رسانه خالی شده است.
              • متوقف شده است: پایان یک عنصر رسانه رسیده است.
              • onerror: منبع بارگیری نشد.
              • oninput: مقدار یک عنصر ورودی یا محتوای قابل تغییر تغییر کرده است.
              • oninvalid: یک عنصر ارائه شده اعتبار سنجی را شکست داده است.
              • onkeydown ، onkeypress و onkeyup: یک رویداد مطبوعات کلید صفحه کلید رخ داده است.
              • بارگذاری ، onloadeddata ، بارگذاری مجدد داده ، داده بارگذاری: یا یک منبع کامل یا بخش مشخص شده از منبع بارگذاری را انجام داده است.
              • onmousedown، onmousenter، onmouseleave، onmousemove، onmouseout، homemoverover و onmouseup: تعامل مبتنی بر ماوس بین کاربر و عنصر رخ داده است.
              • onwheel: دکمه چرخ ماوس چرخانده است.
              • پخش و پخش: یک عنصر رسانه پخش را شروع کرده یا متوقف شده است (به طور عمدی یا در حالی که منتظر اطلاعات اضافی هستید) و آماده است تا از سرگیری پخش.
              • onpause: پخش رسانه متوقف شده است.
              • پیشرفت: عملیاتی آغاز شده است و در حال انجام است.
              • onratechange: میزان پخش رسانه تغییر کرده است.
              • onreset: یک عنصر فرم بازنشانی شده است.
              • onresize: اندازه نمای اسناد تغییر کرده است.
              • onscroll: منظره یا عنصر پیمایش شده است.
              • جستجو و جستجو: از ویژگی جستجوی یک عنصر رسانه استفاده شده یا در حال استفاده است.
              • onselect: برخی از محتوای یک عنصر انتخاب شده است.
              • onshow: منوی زمینه راه اندازی شده است در حالی که عنصر فوکوس دارای یک ویژگی متن متن است.
              • نصب شده: بازیابی رسانه ها به طور غیر منتظره به تأخیر افتاده یا متوقف شده است.
              • onsubmit: یک عنصر فرم ارسال شده است.
              • onsuspend: بارگیری یک عنصر رسانه به حالت تعلیق درآمده است.
              • ontimeupdate: ویژگی زمان فعلی یک عنصر رسانه به روز شده است.
              • ontoggle: یک عنصر جزئیات باز یا بسته شده است.
              • onvolumechange: میزان پخش یک عنصر رسانه تغییر یافته است.
              • onwaiting: پخش در حالی که منتظر بارگیری داده های بیشتر هستید متوقف شده است.

              عناصر DOM

              هنگامی که یک مرورگر صفحه وب را ارائه می دهد ، به سادگی صفحه وب HTML ارائه نمی شود. در عوض ، مرورگر ابتدا یک مدل تعاملی محلی از محتوای HTML صفحه ایجاد می کند.

              به این مدل که بصورت محلی در حافظه مرورگر ساخته شده و نگهداری می شود ، Document Object Model (DOM) نامیده می شود. در داخل DOM ، هر عنصر HTML به عنوان یک گره واحد وجود دارد ، و مجموع گره ها DOM را تشکیل می دهند.

              دسترسی به DOM

              برای اینکه متن هایی مانند جاوا اسکریپت برای تعامل با DOM برقرار شود ، هر گره باید با استفاده از ویژگی ها و روش های مستقل از زبان قابل فراخوانی باشد..

              این ویژگی ها و رویدادها با استفاده از زبان تعریف رابط (IDL) تعریف می شوند و این ویژگی ها و وقایع IDL گره های DOM را به اسکریپت هایی که به هر زبان برنامه نویسی نوشته شده اند قرار می دهند ، گرچه JavaScript بسیار رایج است..

              نتیجه کار سیستمی است که یک عنصر HTML را در بر می گیرد (به عنوان مثال:

              برخی متن

              ) و یک گره DOM ایجاد می کند که تمام آن اطلاعات را شامل می شود (برای مثال: یک گره p با مقدار برخی از متن و ویژگی های IDL className ="متن بدنه" و عنوان ="مثال").

              سپس با استفاده از ویژگیهای IDL گره ، می توانید از زبانهای نویسی استفاده کنید تا گره های DOM را دستکاری کنید.

              ویژگی ها و روش های اساسی IDL

              مشخصات HTML5 رابط HTMLElement را مشخص می کند و تعدادی از ویژگی ها و روش های IDL را که برای همه عناصر HTML اعمال می شود ، لیست می کند..

              هر گره DOM جداگانه تمام این ویژگی ها و روش های IDL را به ارث می برد و ممکن است با اضافه کردن ویژگی ها و روش های اضافی ، در رابط HTMLElement گسترش یابد..

              رابط HTMLElement

              رابط HTMLElement برای همه گره های DOM اعمال می شود و می تواند به سه گروه تقسیم شود: ویژگی های ابرداده ، تعامل کاربر و دستیاران رویداد جهانی.

              ویژگیهای فوق داده شامل موارد زیر است:

              • عنوان IDL عنوان با ویژگی HTML مشخص می شود.
              • ویژگی lang IDL توسط ویژگی lang HTML تنظیم شده است و برای شناسایی زبان محتوا که در یک گره DOM قرار دارد ، استفاده می شود. اگر هیچ ویژگی lang ارائه نشده باشد ، زبانی که به نزدیکترین گره والدین اختصاص یافته است ، ضمنی است.
              • ویژگی ترجمه برای جلوگیری از ترجمه مشتری از محتوای صفحه وب استفاده می شود. این ویژگی به صورت پیش فرض برای ترجمه = بله در سطح سند است و باید به صورت دستی تنظیم شود که ترجمه شود = نه برای هر گره ای که نباید ترجمه شود.
              • ویژگی dir جهت دهنده بودن متن موجود را تعیین می کند. این ویژگی هیچ مقدار پیش فرض ندارد.
              • ویژگی IDL مجموعه داده ، بازخوانی DOM فقط از داده های ویژگی داده های سفارشی است *. هنگامی که صفات داده های سفارشی به یک عنصر HTML اضافه می شوند ، به عنوان مثال data-postId ="6057", این ویژگی های داده ها به یک ویژگی IDL واحد داده جمع می شوند و به گره DOM حاصل اختصاص می یابد.

              تعامل کاربر شامل موارد زیر است:

              • ویژگی پنهان بولی است که تعیین کننده بودن یا نبودن گره DOM است.
              • رویداد کلیک () کلیک یک کاربر با کلیک ماوس را شبیه سازی می کند.
              • صفت tabIndex مرتبی را نشان می دهد که گره DOM در فهرست برگه ظاهر می شود.
              • رویداد فوکوس () فوکوس تعامل کاربر را شبیه سازی می کند که در آن گره DOM هدفمند متمرکز می شود.
              • از روش blur () برای تمرکز گره DOM هدفمند استفاده می شود.
              • ویژگی AccessKey IDL توسط ویژگی عنصر HTML keykey تنظیم شده و یک میانبر صفحه کلید را به گره هدفمند اختصاص می دهد.
              • ویژگی AccessKeyLabel IDL نمایش بازخوانی کلید دسترسی اختصاص یافته است.
              • ویژگی IDEdiable IDL توسط ویژگی عنصر HTML محتوا تنظیم شده است و تعیین می کند کاربران ممکن است گره هدف را ویرایش کنند یا خیر..
              • ویژگی isContentEditable IDL یک مقدار بولی خواندنی است که نشان می دهد گره هدف قابل ویرایش است یا خیر..
              • صفت شناسه spellcheck IDL یک مقدار boolean است که تعیین می کند محتوای یک گره DOM ، به طور معمول یک گره ورودی باید برای املای مناسب بررسی شود یا خیر..

              لیست دستگیرندگان رویدادهای جهانی پنجاه مدخل است. ده دستگیرنده رویدادهای زیر برخی از مهمترین و رایج ترین دستگیرندگان رویدادهای جهانی هستند:

              • onclick
              • کانون توجه
              • onkeypress
              • بارگیری
              • مدیر خانه
              • بومادران
              • همسر
              • ترافیک
              • انتخاب کنید
              • onsubmit.

              تشکیل می دهد

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

              مبانی فرم HTML

              هنگام ساختن فرم HTML ، معمولاً باید از برچسب فرم شروع کنید:

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

              • عنصر ورودی ، که به صورت پیش فرض در یک متن متنی قرار دارد. با این وجود ، با استفاده از ویژگی نوع ، عناصر ورودی می توانند برای پذیرش رمزعبورها ، تنظیم مجدد کلیه قسمتهای فرم ، نمایش دکمه های رادیویی یا صندوق های انتخاب ، تولید دکمه ها و ارسال محتوای فرم بندی شوند..
              • عنصر textarea ، که برای ایجاد مناطق ورودی متن برای پاسخ های تایپ شده با فرم طولانی استفاده می شود.
              • عنصر انتخاب ، که به همراه عنصر گزینه برای ایجاد لیست های کشویی استفاده می شود. عنصر انتخاب لیست را ایجاد می کند و هر گزینه ، که در داخل عنصر انتخاب قرار گرفته است ، گزینه دیگری است که در لیست موجود است.
              • عنصر دکمه ، که برای ایجاد دکمه های فرم استفاده می شود.

              پیشرفتهای فرم HTML5

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

              انواع عنصر ورودی جدید:

              • نوع ورودی رنگ فیلد را مشخص می کند که باید یک رنگ را بپذیرد و بعضی از مرورگرها هنگام انتخاب زمینه ، فاقد رنگ انتخاب می شوند..
              • HTML5 شش نوع ورودی جدید از زمان و تاریخ را معرفی کرده است که هر یک از آنها در مرورگرهای پشتیبانی شده یک نشانه انتخاب را ایجاد می کند:
                • date: تاریخی را انتخاب کنید که شامل روز ، ماه و سال باشد.
                • datetime: تاریخ و زمان را به همراه اطلاعات منطقه زمانی انتخاب کنید.
                • datetime-local: تاریخ و زمان را انتخاب کنید ، اما اطلاعات مربوط به منطقه زمانی را حذف نکنید.
                • زمان: یک زمان را انتخاب کنید.
                • هفته: یک هفته و سال را انتخاب کنید.
                • ماه: یک ماه و سال را انتخاب کنید.
              • از نوع ورودی ایمیل برای شناسایی فیلدی استفاده می شود که باید یک آدرس ایمیل را بپذیرد. مرورگرهای پشتیبانی شده همچنین اعتبار ورودی اصلی را برای اطمینان از تایپ آدرس ایمیل انجام می دهند.
              • HTML5 دو نوع ورودی جدید با شماره گرا را معرفی کرد: تعداد و دامنه. شماره اجازه ورود به هر شماره را می دهد ، با توجه به محدودیت های حداقل و حداکثر مقدار اختیاری. محدوده نوار کشویی ایجاد می کند ، محدود به حداقل و حداکثر مقادیر ، که به کاربر اجازه می دهد مقداری را در محدوده مشخص شده از مقادیر قابل قبول انتخاب کند..
              • از نوع ورودی جستجو برای شناسایی یک جستجوی سریع استفاده می شود.
              • از نوع ورودی tel برای شناسایی فیلد استفاده می شود که باید شماره تلفن را بپذیرد. مرورگرهای پشتیبانی شده تأیید اعتبار ورودی اصلی را تأیید می کنند که شماره تلفن وارد شده است.
              • نوع ورودی url فیلدی را مشخص می کند که باید url را بپذیرد. مرورگرهای پشتیبانی شده اعتبارسنجی اولیه را انجام می دهند و دستگاه های تلفن همراه پشتیبانی شده ممکن است یک دکمه typepad .com را نشان دهند.

              ویژگی های عنصر ورودی جدید:

              • تکمیل خودکار: برای یک عنصر ورودی به طور خودکار روشن یا خاموش می شود. در صورت روشن بودن ، مقادیر تکمیل خودکار از ورودی های فرم ذخیره شده خارج می شوند.
              • فوکوس خودکار: یک عنصر ورودی را مشخص می کند که هنگام بارگذاری صفحه به طور خودکار در کانون توجه قرار می گیرد.
              • فرم: از یک شناسه اختصاص داده شده به یک فرم برای جابجایی یک عنصر ورودی که داخل فرم نیست با فرم استفاده می کند.
              • فرمولاسیون: به یک زمینه ارسال شده اختصاص داده می شود تا با ارائه URL جایگزین برای پردازش فرم ، رفتارهای پیش فرض را نادیده بگیرد.
              • formenctype: برای مشخص کردن نوع رمزگذاری برای داده های ارسال شده با استفاده از روش ارسال به فیلد ارسال ، اضافه شده است.
              • formmethod: برای مشخص کردن روش HTTP ، ارسال یا دریافت ، به یک فیلد ارسال اضافه شده است که باید برای ارسال فرم استفاده شود.
              • formnovalidate: با استفاده از قسمت ارسال برای جلوگیری از اعتبارسنجی داده های فرم از مرورگر استفاده می شود.
              • formtarget: به یک فیلد ارسال اضافه شده است تا به مرورگر بگویید پاسخ فرم را در پنجره فعلی یا یک پنجره جدید نمایش دهد.
              • قد و عرض: برای مشخص کردن اندازه نوع = = استفاده می شود"تصویر" دکمه ارسال فرم.
              • حداقل و حداکثر: به همراه یک عدد ، محدوده یا نوع ورودی جهت داده dat جهت استفاده از حداقل و حداکثر مقدار که مقدار انتخاب شده باید بین آن قرار بگیرد.
              • multip: به همراه نوع ورودی پرونده یا نامه الکترونیکی استفاده می شود تا به کاربر اجازه دهد چندین مقدار اضافه کند.
              • الگوی: برای تعریف یک عبارت معمولی برای اعتبارسنجی داده های وارد شده در یک ایمیل ، گذرواژه ، جستجو ، تلفن ، متن یا آدرس url استفاده می شود.
              • حفره مکان: متن نگهدارنده را به یک عنصر ورودی اختصاص می دهد که هنگام ورود این عنصر حذف می شود.
              • مورد نیاز: عنصری را مشخص می کند که باید قبل از ارسال فرم پر شود.
              • مرحله: برای تعیین مراحل انتخاب مقادیر ، به همراه تعداد ، دامنه یا نوع ورودی داده محور مورد استفاده قرار می گیرد. به عنوان مثال ، اضافه کردن مرحله ="10" به ورودی عددی محدود به مقادیر بین حداقل 0 و حداکثر 30 امکان ارسال 0 ، 10 ، 20 یا 30 را می دهد.

              ویژگی های عنصر فرم جدید:

              • تکمیل خودکار: برای یک شکل کامل ، خودکار یا خاموش می شود. تکمیل خودکار به طور خودکار بر اساس هر ورودی می تواند با استفاده از همان ویژگی در عناصر ورودی فردی کنترل شود.
              • novalidate: اعتبار مرورگر ارسال فرم را خاموش می کند.

              عناصر فرم جدید:

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

              لیست موارد کشویی با ویژگی ورودی جدید با یک عنصر ورودی مرتبط است. مثلا:

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

              فرمول: y = mx + b

              شیب (متر):

              مقدار x:

              رهگیری Y (b):

              ارزش Y:

              اگر پس از آن ، lineformula () را در JavaScript بنویسیم تا محاسبه و پردازش CSS را انجام دهیم ، می توانیم ماشین حساب JavaScript ساده و در عین حال کاربردی زیر را تولید کنیم:

              lineformula تابع ()
              var y = 0؛
              var m = document.getElementById ("m") مقدار؛
              var x = document.getElementById ("x") مقدار؛
              var b = document.getElementById ("b") مقدار؛
              y = + m * + x + + b؛
              document.getElementById ("y") مقدار = y؛
              }

              # مثال-فرم
              عرض: 100٪؛
              حداکثر عرض: 400px؛
              حاشیه: 0 خودکار؛
              مرز: 1px جامد #bbb؛
              پس زمینه-رنگ: #eee؛
              }
              ورودی # مثال-فرم p ، # خروجی p-مثال # فرم {
              شناور: درست؛
              عرض: 100px؛
              }
              # نمونه-فرم {
              سرریز: خودکار؛
              بالشتک: 10px؛
              حاشیه: 0؛
              }
              # مثال-فرم p: نه (: فرزند آخر) {
              مرز-پایین: 1px solid #bbb؛
              }

              فرمول: y = mx + b

              شیب (متر):

              مقدار x:

              رهگیری Y (b):

              ارزش Y:

              عنصر keygen نیز در HTML5 به عنوان راهی برای تأیید اعتبار کاربران اضافه شد. این عنصر برای تولید یک جفت کلید عمومی-خصوصی طراحی شده است که می تواند مورد استفاده قرار گیرد تا اطمینان حاصل شود که نتایج ارسال فرم فقط به کاربر مناسب نمایش داده می شود. با این حال ، این عنصر اکنون برای حذف مشخصات HTML5 جدا شده است و نباید از آن استفاده شود.

              عناصر معنایی

              بسیاری از عناصر HTML برای افزودن معنی معنایی به محتوای یک صفحه وب طراحی شده اند. این بدان معناست که عناصر HTML خاص با توجه به محتویات این عنصر معنای خاصی را نشان می دهند.

              به عنوان مثال ، استفاده از برچسب های تاکید ، توسط یک مرورگر با استفاده از یک فونت italic ارائه می شود و دلالت بر این دارد که محتوای عنصر را باید با تأکید بیشتر از محتوای اطراف بخوانید و درک کنید..

              در حالی که همه عناصر HTML معنای معنایی ندارند ، استفاده از برچسب های HTML مطابق معنی معنایی آنها در هر زمان ممکن است مهم است.

              چرا اهمیت معنایی

              معناشناسی حداقل به چهار دلیل اصلی مهم است:

              • معانی دستیابی را افزایش می دهد. فن آوری های دستیاری وقتی انتخاب عناصر HTML سرنخ هایی راجع به معنی محتوای صفحه ارائه می دهند ، می توانند معنی یک صفحه وب را منتقل کنند..
              • معنایی باعث می شود محتوا بیشتر کشف شود. موتورهای جستجو هنگام استفاده از عناصر HTML مطابق با هدف معنایی مناسب ، قادر به درک محتوای یک صفحه وب هستند.
              • عناصر معنایی یک مزیت بین المللی شدن است. عناصر معنایی جدید ruby ​​و bdi در HTML5 معرفی شدند تا بهتر این واقعیت را درک کنند که کمتر از 15٪ از جهان از بلندگوهای انگلیسی بومی تشکیل شده است.
              • معانی شناسی با ایجاد سهولت در درک و تعامل با محتوای یک صفحه وب ، قابلیت همکاری را بهبود می بخشد.

              از آنجا که راهپیمایی به سمت اینترنت همه چیز (IOE) بدون استفاده ادامه می یابد ، معناشناسی اهمیت فزاینده ای پیدا می کند.

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

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

              به دست آوردن درست معنایی ، کلید اطمینان از عدم دسترسی به اطلاعات به مرور زمان است.

              معناشناسی در HTML قبل از HTML5

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

              لیست ها با استفاده از برچسب های ol و ul به مرورگر شناسایی کرده اند که در طبیعت مرتباً سفارش داده شده یا بدون هماهنگی هستند. به همین ترتیب ، لیست گسترده ای از عناصر قبل از HTML5 وجود دارد که می توانند در متن برای اضافه کردن معنی معنایی استفاده شوند:

              • برچسب های em و قوی حاکی از تأکید و تأکید شدید.
              • از برچسب های s ، del و ins برای شناسایی اطلاعاتی استفاده می شود که دیگر کاربرد ندارد یا با اطلاعات به روز شده جایگزین شده است.
              • برچسب های نقل قول و استناد برای شناسایی نقل قول ها و کارهای خلاقانه استفاده می شود.
              • از برچسب های abbr و dfn برای ارتباط دادن توضیحات توضیحی با اصطلاح نیاز به تعریف استفاده می شود.
              • از عناصر کد ، samp ، kbd و var برای شناسایی انواع خاص متن استفاده می شود: کد برنامه نویسی ، نمونه خروجی برنامه رایانه ای ، ورودی صفحه کلید و متغیرهای فرمول.
              • عناصر sup و sub محتوا را شناسایی می کنند که باید به عنوان متن یا متن متن باشد.

              در حالی که عناصر HTML زیادی که HTML5 را به نمایش می گذارند معنایی معنایی دارند ، یکی از ایرادات اصلی در زبان است که HTML5 به آن پرداخته است: فقدان عناصر معنایی ساختاری.

              ساختار اسناد HTML قبل از HTML5

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

              این رویکرد برای ایجاد ساختار صفحه با عنصر div - عملی که از آن به عنوان divitis یاد می شود - از عناصر HTML استفاده نمی کند تا به معنای ساختار صفحه دلالت کند. قبل از HTML5 ، توسعه دهندگان می توانند برای این نوع عمل مورد بخشش قرار گیرند.

              با این وجود ، با در دسترس بودن عناصر معنایی ساختاری جدید در HTML5 ، روش بهتری وجود دارد.

              عناصر معنایی ساختاری در HTML5

              HTML5 عناصر زیر را برای استفاده در جای سوپ div که در مثال بالا نشان داده شده است ، معرفی کرد. این عناصر ساختار را در یک سند ارائه می دهند در حالی که به طور همزمان معنای خاصی را به بخش های مختلف سند نشان می دهد:

              • عنصر اصلی برای نگهداری مطالب اصلی یک صفحه وب طراحی شده است. اگر یک وب سایت در همه صفحات از همان سرصفحه و پاورقی استفاده کند ، معمولاً این عناصر از عنصر اصلی حذف نمی شوند در حالی که ممکن است تمام محتوای صفحه وب به طور صحیح در داخل عنصر اصلی قرار بگیرند..
              • عنصر هدر دارای مطالب مقدماتی در مورد کل یک صفحه وب یا بخشی از یک صفحه وب است. استفاده از آن برای نگه داشتن هدر که در هر صفحه یک وب سایت مشاهده می شود مناسب است و همچنین برای نگه داشتن عنوان و سایر اطلاعات مقدماتی در قسمت بالای مقاله یا صفحه از آن استفاده می شود..
              • عنصر پاورقی به گونه ای طراحی شده است که اطلاعات خلاصه ای را در مورد عنصر اصلی خود نگه دارد. می توان از آن برای یافتن پاورقی صفحه وب استفاده کرد که در هر صفحه یک وب سایت و همچنین در یک مقاله برای نگهداری اطلاعات خلاصه مقاله مانند نویسندگی ، موضوعات ، تاریخ انتشار و نظرات کاربران وجود دارد..
              • عنصر بخش برای گروه بندی مطالب مرتبط با موضوع استفاده می شود و به طور معمول با یک عنصر عنوان شروع می شود. به عنوان مثال ، در یک وبلاگ ، قسمت اصلی صفحه ممکن است یک بخش باشد در حالی که نوار کناری ممکن است بخش دوم را اشغال کند.
              • عنصر nav برای شناسایی گروهی از لینک های ناوبری استفاده می شود. به طور معمول ، عناصر nav فقط به عناصر ناوبری در سایت قابل استفاده مجدد محدود می شوند ، مانند مواردی که در قسمت های صفحه وب ، پاورقی ها و نوارهای جانبی ظاهر می شوند.
              • از عنصر مقاله برای گروه بندی مطالب استفاده می شود که به عنوان یک واحد مستقل از صفحه وب مانند پست وبلاگ یا مقاله خبری معنا می یابد. مقالات می توانند حاوی عناوین ، پاورقی ها ، بخش ها و عناصر جداگانه باشند.
              • عنصر کنار استفاده می شود برای شناسایی اطلاعاتی که باید جدا از جریان اصلی محتوا در عنصر والدین درک شود.

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

              اگر ما برای اجرای این برچسب های جدید ، طرح طرح سوپ div خود را مجدداً مورد بررسی قرار دهیم و آن را تجدید نظر کنیم ، به چیزی شبیه این می رسیم:

              عناصر معنایی متنی در HTML5

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

              • عنصر آدرس برای شناسایی اطلاعات آدرس مربوط به نویسنده یا صاحب یک صفحه وب یا مقاله استفاده می شود.
              • از عناصر شکل و شکل استفاده می شود برای شناسایی و نوشتن مطالب بصری که مربوط به محتوای یک صفحه وب است - مانند نمودار ، نمودار یا تصویر - اما نیازی نیست که با محتوای متن مطابقت داشته باشد..
              • برچسب مارک برای شناسایی متنی که معنای خاصی در متن فعلی دارد استفاده می شود. به عنوان مثال ، می تواند برای مشخص کردن هر یک از عبارات جستجو در صفحه ای که نتایج جستجو را نشان می دهد ، استفاده شود.
              • عنصر زمان کمی متن را بعنوان یک نقطه خاص از زمان مشخص می کند. از ویژگی datetime می توان برای افزودن نسخه قابل خواندن دستگاه از نقطه خاص در زمان به برچسب زمان استفاده كرد.
              • از عنصر bdi برای معکوس کردن جهت بخشی از مطالب برای زبانهایی که از الگوی راست به چپ استفاده می کنند استفاده می شود.
              • عناصر یاقوت ، rp و rt برای تهیه کمکهای تلفظ یا یاقوت برای برخی از کاراکترهای زبان آسیایی استفاده می شود.

              HTML پویا

              HTML پویا

              وقتی به صفحه وب مدرن فکر می کنید ، معمولاً یک وب سایت استاتیک را پیش بینی نمی کنید. با تشکر از ظهور زبانهای اسکریپت مانند JavaScript و PHP ، وب سایت هایی که امروز می بینیم از پیشینیان خود تعامل و پویاتر هستند.

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

              نام "DHTML" کمی نادرست است. برخلاف زبان نشانه گذاری HTML که از آن نام خود را می کشد ، Dynamic Hypertext Markup Language در واقع اصطلاحی است که تعدادی از فن آوری ها و زبان های مورد استفاده در رابطه را برای ایجاد وب سایت های پویا توصیف می کند..

              این چهار عنصر اصلی DHTML هستند:

              • HTML: زبان نشانه گذاری استفاده شده برای ایجاد صفحات و برنامه های استاتیک.
              • CSS: زبانی که برای تهیه صفحه از طریق شیوه نامه استفاده می شود.
              • جاوا اسکریپت: زبان برنامه نویسی که برای ایجاد عناصر تعاملی در یک صفحه استفاده می شود.
              • DOM: رابط برنامه نویسی که از طریق آن می توان کد صفحه را تغییر داد.

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

              کتابها

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

              • JavaScript: The Definitive Guide (2006) توسط David Flanagan: این راهنما برای یادگیری JavaScript و همچنین یک مرجع عالی برای کلیه موارد مربوط به DHTML است..
              • تجسم داده های تعاملی برای وب: مقدمه ای برای طراحی با D3 (2013) توسط اسکات موری: پس از دستیابی به اصول اولیه DHTML ، از این راهنمای گام به گام برای یادگیری اصول طراحی محتوای پویا استفاده کنید..
              • DOM Scriptting: طراحی وب با JavaScript و Document Object Model (2010) توسط Keith and Sambells: منبع مناسب برای زمانی که می خواهید درک بهتری از DOM داشته باشید و با برنامه های دنیای واقعی تمرین کنید..
              • انیمیشن وب با استفاده از JavaScript: توسعه دهید & طراحی (2015) توسط جولیان شاپیرو: اگر به دنبال تسلط بر انیمیشن ها از طریق DHTML هستید ، این را بررسی کنید.

              ابزارها

              این کمک های شخص ثالث در DHTML با هدف کمک به توسعه دهندگان برای نوشتن کد پاک کننده ، اشکال زدایی آسان و استفاده از اسکریپت های از پیش نوشته شده برای تقویت تلاش های خود.

              • Dynamic Drive: این وب سایت به ارائه اسکریپت های رایگان JavaScript (و سایر DHTML) به توسعه دهندگان اختصاص یافته است.
              • DHTML Goodies: منبع آنلاین دیگری که اسکریپت های DHTML (و آژاکس) رایگان را ارائه می دهد.
              • جاوا اسکریپت کیت اسکریپت ها: یکی دیگر از منابع رایگان برای یافتن اسکریپت های جاوا اسکریپت برای کمک به ایجاد انواع اثرات طراحی و انیمیشن.

              راهنما و آموزش آنلاین

              برای یادگیری HTML ، CSS ، JavaScript و DOM یک راهنمای گام به گام می خواهید؟ یا شاید شما برخی از تمرینات دستی را ترجیح می دهید؟ راهنماهای زیر تمام پایه های شما را پوشش می دهد.

              • نقشه راه توسعه وب برای مبتدیان: این راهنمای "Learn to Code" مکان مناسبی برای شروع کار با DHTML است زیرا شما را از اصول اولیه HTML (فصل 1) از طریق جاوا اسکریپت و جی کوئری (فصل 5) دریافت می کند..
              • W3Schools DHTML آموزش: W3Schools آموزشهای مختلفی در مورد DHTML ارائه می دهد ، که توسط سه زبان برنامه نویسی مختلف تفکیک شده است.
              • آموزش های فن آوری وب Mozilla: شبکه توسعه دهنده Mozilla یکی از راهنماهای جامع تر (و به خوبی سازمان یافته) موجود در زبانهای مختلف برنامه نویسی را درگیر در DHTML دارد.
              • QcTutorials DHTML Tutorial: به دنبال یک رویکرد ساده و سر راست برای یادگیری DHTML هستید؟ از طریق این آموزش قدم بردارید و سپس نمونه های DHTML و HTML DOM آنها را برای مراجعه بعدی نگه دارید.
              • راهنمای مبتدی آموزش DHTML: مقدمه ای برای DHTML که شامل تعدادی آموزش برای شروع کار است.
              • Web Developer and CSS Tutorials: چیزهای زیادی وجود دارد که می توانید با CSS یاد بگیرید ، بنابراین خود را فقط به اصول اولیه محدود نکنید. این منبع شامل انواع آموزش CSS بر اساس نیازهای خاص وب سایت شما است.
              • آموزشهای جاوا اسکریپت: راهنمای دیگری از جاوا اسکریپت ، فقط این مورد به طور خاص روی کارهای مربوط به JavaScript متمرکز است.
              • CSS Reference: هنگام نوشتن CSS از این منبع ساده به عنوان یک راهنمای مرجع سریع استفاده کنید.
              • مرجع DOM: درباره اشیاء مختلف DOM در اینجا بیشتر بیاموزید.

              کار کنید!

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

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

              آهنگسازی HTML خوب و استفاده از اعتبار سنج ها

              .SourceCode span.kw
              .SourceCode span.dt
              .SourceCode span.dv
              .SourceCode span.bn
              .SourceCode span.fl
              .SourceCode span.ch
              .SourceCode span.st
              .SourceCode span.co
              .SourceCode span.ot
              .SourceCode span.al
              .SourceCode span.fu
              .SourceCode span.re
              .SourceCode span.er

              آهنگسازی HTML خوب و استفاده از اعتبار سنج ها

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

              قسمت 1 - آهنگسازی HTML خوب

              دانستن کلیه قوانین دستور زبان مناسب ، شما را به عنوان نویسنده خوبی نمی شناسد و دانستن هر کارکرد و ساخت یک زبان ، شما را به یک برنامه نویس خوب تبدیل نمی کند. چیز دیگری که لازم است وجود دارد - سبک خوب.

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

              چرا با HTML خوب زحمت می کشید?

              از آنجا که HTML قصد ندارد توسط کاربران نهایی و مخاطبان آنلاین شما دیده شود ، ممکن است بپرسید:

              • چه فرقی می کند?
              • چرا در مورد علائم نگران باشید?

              پاسخ به این سؤال اولین قدم به سمت سبک HTML خوب است: فکر کردن در مورد افرادی که برای آن می نویسید HTML است.

              تعداد کمی از "مخاطبان" برای HTML شما وجود دارد:

              • طراح / توسعه دهنده فعلی که باید CSS را بنویسد
              • توسعه دهندگان و طراحان آینده که ممکن است نیاز به طراحی مجدد وب سایت شما داشته باشند
              • Google و سایر موتورهای جستجو
              • فیس بوک و سایر سایتهای رسانه های اجتماعی که گزیده هایی از صفحه را ارسال می کنند
              • خوانندگان RSS
              • خوانندگان صفحه نمایش برای مبتلایان به بینش
              • در نهایت کاربران عادی شما.

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

              ساختار اسناد خوب

              مهمترین جنبه سبک HTML ساختار صحیح سند کلی است.

              ساختار کلی باید به صورت زیر باشد:

              html>

              عنوان سند




              عنوان سایت

              عنوان سند

              عنوان اسناد

              توجه داشته باشید که ممکن است شما به عناصر مشخص شده در اینجا احتیاج نداشته باشید. به عنوان مثال: شما ممکن است بخواهید این عنصر را در قسمت خود قرار ندهید ، جزئیات متا داده ها را در بالای مقاله نمی گنجانید - یک ساده

              یا

              برچسب ، در همان "سطح" با محتوای مقاله بسیار خوب است.

              برای اطلاعات بیشتر در مورد درست ساختن سند ، به بخش ساختار HTML این مقاله مراجعه کنید.

              سفارش عناصر اصلی شما

              و مربوط به محتوا باید زودهنگام باشد. وقتی مشاور SEO شما در تلاش است تا بفهمد چه چیزی با نحوه نمایش Google یا Facebook صفحات شما اتفاق می افتد ، آنها را مرتباً مرتب نکنید در میان ده لینک CSS و کد JavaScript تصادفی.

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

              یا

              و اولین بار آن را درون آن قرار دهید. منوی ناوبری را بعد از عنوان قرار دهید.

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

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

              بعد از برچسب بسته شدن ، تا حد امکان JavaScript خود را قرار دهید. فقط جاوا اسکریپت را وارد کنید اگر کاملاً به دلایلی مجبور باشد در آنجا باشد (معمولاً وجود ندارد).

              خواندن علائم ساختاری خود را آسان تر می کند

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

              یکی از کارهایی که می توانید انجام دهید مفید است کد خود را قرار دهید. دو مثال زیر را در نظر بگیرید:

              کلاس ="سر دکل">

              عنوان اسناد

              کلاس ="ناو نوار">
              کلاس ="ناو اصلی">

              • مورد منو
              • مورد منو
              • مورد منو
                • مورد منو
                • مورد منو
                • مورد منو
              • مورد منو

              کلاس ="سر دکل">

              عنوان اسناد

              کلاس ="ناو نوار">
              کلاس ="ناو اصلی">

              • مورد منو
              • مورد منو
              • مورد منو
                • مورد منو
                • مورد منو
                • مورد منو
              • مورد منو

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

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

              اما آنچه در مورد HTML تولید شده است?

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

              پاسخ این است که از کلاسها یا شناسه های معنی دار استفاده کنید و از برچسب های پایان نظر استفاده کنید. این می تواند به ویژه برای بلوک های مکرر محتوای تولید شده ، مانند نظرات یا موارد موجود در نوار کناری ، مفید باشد.

              کلاس ="سر دکل">

              عنوان اسناد

              کلاس ="ناو نوار">
              کلاس ="ناو اصلی">

              • مورد منو
              • مورد منو
              • مورد منو
                • مورد منو
                • مورد منو
                • مورد منو
              • مورد منو



              کلاس ="نظرات">
              کلاس ="اظهار نظر" id ="نظر-39874693029">


              کلاس ="مورد نوار کناری" id ="اشتراک مشترک">


              کلاس ="مورد نوار کناری" id ="بایگانی">

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

              کلاس ها و شناسه های معنی دار

              اول از همه - ویژگی های کلاس و شناسه خود را سازگار و آسان برای خواندن توسط:

              • فقط با حروف کوچک
              • کلمه جداکننده.

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

              نام کلاس و شناسه خوب:

              • nav-menu
              • پست وبلاگ
              • ویجت نوار کناری
              • نظر-متا.

              نام کلاس بد و شناسه:

              • جعبه سبز
              • نوار کناری سمت چپ
              • محو شدن در پرچم.

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

              اگر نتوانید به آن کمک کنید خوب است. فقط مطمئن شوید که همه چیز را به طور کلی نگه دارید. هیچ چیز بدتر از یک طراحی مجدد وجود ندارد که CSS را ایجاد می کند:

              .جعبه سبز
              پس زمینه-رنگ: آبی؛
              }

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

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

              عناوین و بخش ها

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

              • از برچسب عنوان (

                ,

                ,

                ,

                ) به عنوان بخش ها و زیر بخش ها.

              • اطمینان حاصل کنید که سلسله مراتب عناوین شما یک طرح کلی منطقی را تشکیل می دهند. قرار ندهید
                بعد از

                بدون آن

                و

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

              • اگر استفاده می کنید برای علامت گذاری هدرهای بخش ، چیزی اشتباه است.

              همچنین ، حتماً ویژگی شناسه را در عناوین بخش قرار دهید تا شما و دیگران بتوانید پیوندهای درون سند ایجاد کنید.

              id ="عنوان-بخش">عنوان بخش

              ...

              href ="# عنوان-بخش">این پیوند به آن مکان.

              در آخر ، از قانون افقی () سوء استفاده نکنید. اگر از بخش ها و عناوین متناسب استفاده می کنید ، هیچ دلیلی برای آن وجود ندارد.

              پیوندها

              تنها ویژگی مورد نیاز برای برچسب لنگر URL URL مربوط به سند است.

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

              موضوع دیگر در رابطه با لینک ها متن لنگر است - متنی واقعی که کاربر برای دنبال کردن لینک روی آن کلیک می کند (یا ضربه می زند ، یا انتخاب می کند)..

              سعی کنید در صورت امکان از اینجا کلیک کنید. بعضی اوقات اجتناب ناپذیر است ، اما هر زمان ممکن باشد باید سعی کنید متن لنگر را معنی دهید. این برای خوانندگان شما و همچنین سندی که به آن لینک می دهید مفید است (که ممکن است خود شما باشد).

              در مورد HTML با href = اطلاعات کسب کنید"">اینجا کلیک کنید.

              ما مقدار زیادی از href = را ارائه می دهیم"">اطلاعات در مورد HTML.

              تصاویر

              برای داشتن یک عنصر src فقط به یک تصویر نیاز است - URL تصویر. اما شامل یک عنوان و متن متن می تواند کمک کند.

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

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

              این اطلاعات در مورد کلمه موجود در صفحه شما اطلاعات دانه ریز را ارائه می دهد. آنها می توانند به کاربران در درک بهتر مطالب شما کمک کنند و می توانند به رایانه ها (موتورهای جستجو ، هوش مصنوعی) کمک کنند تا آنچه را که شما نوشته اید ، بهتر درک کنند..

              • - برچسب تعریف. این می تواند برای اولین بار باشد که شما یک اصطلاح فنی را استفاده می کنید و تعریف می کنید.
              • - برای اختصارات استفاده می شود. می توانید شکل توسعه یافته اختصار را در برچسب عنوان قرار دهید.
              • - بیشتر افراد فقط برای مشخص کردن نقل قول ها از علائم نقل قول تایپی استفاده می کنند ، اما استفاده از نشانه گذاری آن را صریح تر می کند و به شما امکان می دهد منبع این نقل قول را با عنصر ذکر کنید.

              بیشتر بدانید و بیشتر بدانید

              نوشتن HTML خوب از موارد زیر است:

              • یادگیری تعدادی از اصول اساسی
              • به اندازه کافی به مطالب خود و سایت خود توجه کنید تا از آنها پیروی کنید.

              ما فقط می توانیم در بخش یادگیری به شما کمک کنیم. شما باید تصمیم بگیرید که مراقبت کنید.

              اکثر توصیه های ما را می توان در یک جمله خلاصه کرد:

              اطمینان حاصل کنید که HTML شما به وضوح آنچه را که می خواهید ارتباط برقرار کنید ، برقرار می کند.

              قسمت 2: اعتبار سنج های HTML

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

              البته این یک چیز خوب است - وقتی وب سایت ها از "قوانین" پیروی می کنند ، وب به طور کلی مکان بهتری است. اما تأکید بیش از حد بر تأیید اعتبار نیز می تواند ضد مولد باشد.

              در اینجا آنچه شما باید بدانید.

              اعتبار سنجی HTML چیست؟?

              اعتبار سنجی فقط به معنای چک کردن برای دیدن اینکه آیا کد منبع صفحه وب شما با مشخصات زبان ارائه شده توسط W3C مطابقت دارد یا خیر ، می باشد. این بررسی توسط یک ابزار نرم افزاری به نام HTML Validator انجام می شود.

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

              مشخصات یک زبان نشانه گذاری توضیح می دهد (گاهی اوقات با فریب دادن جزئیات) نحوه استفاده از هر عنصر HTML ، ویژگی های بالقوه آن می تواند و ارتباط آن با سایر عناصر موجود در یک صفحه.

              گفتن اینکه یک سند HTML معتبر است فقط بدان معنی است که از همه این قوانین پیروی می کند.

              اعتبار سنجی HTML چیست?

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

              این کمی شبیه تفاوت بین ویرایش و تصحیح است - اعتبارسنجی مانند تصحیح مقاله است.

              اعتبار سنجی HTML فقط مربوط به HTML است - نه CSS ، جاوا اسکریپت ، پیوند PHP. همچنین هیچ ارتباطی با مواردی مانند اشکال درست کار نمی کند (اعتبار سنجی فرم یک چیز کاملا متفاوت است).

              چرا با اعتبار سنجی زحمت می کشید?

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

              تایپ ساده

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

              عدم تطابق نسخه ها

              هر نسخه HTML مجموعه ای از قوانین کمی متفاوت دارد و مواردی که در این زبان گنجانده شده است. اگر HTML شما معتبر است ، این بدان معناست که شما از آن قوانین پیروی کرده اید و فقط مواردی را درج کرده اید که به طور رسمی جزئی از زبان هستند.

              به عنوان مثال ، برچسب HTML در HTML5 جدید است - در مشخصات HTML 4.0 وجود ندارد. این بدان معناست که اگر در برابر آن مشخصات معتبر بودید ، و معتبر بودید ، معتبر نخواهد بود. شما خطایی دریافت کرده اید.

              مثال دیگر چیزی که تغییر کرده است نزدیک شدن عناصر تهی است.

              برچسب تصویر ( ) یک عنصر تهی است - هیچ محتوا ندارد ، فقط ویژگی ها (خود تصویر یک ویژگی است که به پرونده تصویر اشاره دارد ، نه محتوای یک عنصر). در گذشته ، عناصر تهی بسته می شدند ، بنابراین می بینید:

              src ="http://example.com/some_image" alt ="برخی از تصویر" />

              در حال حاضر ، در مشخصات HTML5 ، این مورد ارجح نیست و همان تصویر به این شکل ظاهر می شود:

              src ="http://example.com/some_image" alt ="برخی از تصویر" >

              اعتبار سنجی به چند دلیل مهم است:

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

              امروزه اکثر وب سایت ها برای تولید HTML از برخی از سیستم های مدیریت محتوای زمینه یا برنامه نویسی سمت سرور استفاده می کنند. این لایه ای از پیچیدگی را اضافه می کند که می تواند خطاهای دیگری ایجاد کند.

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

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

              شامل کد بد

              همراه با سیستم های مدیریت محتوا ، بیشتر صاحبان وب سایت از تعدادی افزونه شخص ثالث برای تولید وب سایت های خود استفاده می کنند. اینها همیشه به اندازه کیفیت بالایی که باید وجود نداشته باشد و می توانند منبعی برای نشانه گذاری ، نشانه گذاری بد و کد نویسی ضعیف باشند.

              نگران نباشید ، مشخصات HTML را نمی دانید

              جزئیات HTML چند دقیقه ای در جزئیات HTML وجود دارد - مواردی که بسیاری از توسعه دهندگان مبتدی و متوسط ​​ممکن است آنها را نشناسند یا درک کنند.

              آیا می دانید که نمی توانید لیستی بگذارید (