نمونه های HTML5 ساده کردن نوشتن DOCTYPE

06.04.2019 برنامه ها

استاندارد HTML5 به طور فزاینده ای در طراحی وب مدرن استفاده می شود. و اگرچه هنوز در حال توسعه است، بسیاری از استانداردهای آن قبلاً تأیید شده اند و توسط همه مرورگرهای مدرن از جمله مرورگرهای تلفن همراه استفاده می شود.

در این مقاله برخی از ویژگی های جدید HTML5 را با مثال های عینی از کاربرد آنها در عمل بررسی خواهیم کرد.

DOCTYPE جدید

بیایید به یاد بیاوریم که چگونه یک سند XHTML معمولی در بخش DOCTYPE تعریف می شود:

‹! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"›

اعلان نوع سند در زبان نشانه گذاری بسیار مختصر و خوانا به نظر می رسد

‹!DOCTYPE html›

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

معنای کد بهبود یافته

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

عناصرسربرگ وپاورقی

حالا می‌توانیم از شر ساخت‌هایی مانند

‹div id="header"› … ‹/div› ‹div id="footer"› … ‹/div›

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

‹header› … ‹/header› ‹footer› … ‹/footer›

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

عنصرشکل

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

‹img src="mars.jpg" alt="(!LANG:درباره مریخ" /› ‹p›This is an image of Mars‹/p› !}

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

‹figure› ‹img src="mars.jpg" alt="(!LANG:درباره مریخ" /› ‹figcaption› ‹p›This is an image of Mars‹/p› ‹/figcaption› ‹/figure› !}

در این مورد، یک تگ اضافی ‹figcapture› وجود دارد که مشخص می‌کند محتوای شکل کجا و عنوان آن کجاست.

استفادهhgroup

تصور کنید که یک عنوان در وب سایت خود دارید که از یک عنوان اصلی و یک عنوان فرعی تشکیل شده است. استفاده از تگ های معمولی ‹h1› و ‹h2› به هیچ وجه ارتباط بین این دو مورد را نشان نمی دهد. بنابراین، می توان آنها را با استفاده از تگ ‹hgroup› به صورت معنایی ترکیب کرد:

‹header› ‹hgroup› ‹h1›Photogallery‹/h1› ‹h2›جای خالی ما در پراگ‹/h2› ‹/hgroup› ‹/header›

هیچ نوع اسکریپت و شیوه نامه وجود ندارد

ممکن است همچنان از ساختارها برای گنجاندن اسکریپت ها، کتابخانه ها، شیوه نامه ها و غیره استفاده کنید. فرم زیر:

‹link rel="stylesheet" href="stylesheet.css" type="text/css" /› ‹script src="script.js" type="text/javascript"›‹/script›

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

‹link rel="stylesheet" href="stylesheet.css" /› ‹script src="script.js"›‹/script›

ساختار کد

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

‹p class=myClass id=pId›محتوا

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

محتوای قابل ویرایش

HTML5 به شما این امکان را می دهد که محتوای وب سایت خود را به طور کامل بدون نیاز به چسباندن قابل ویرایش کنید زمینه های پنهانبرای وارد کردن متن تنها چیزی که لازم است اضافه کردن ویژگی contenteditable="true" (یا بدون نقل قول، همانطور که از آن یاد گرفتیم) است. پاراگراف قبلی) به عنصری که می خواهید قابل ویرایش کنید. پس از آن، کاربر می‌تواند محتوای خود را مستقیماً از صفحه ویرایش کند.

در این حالت، کاربر می تواند موارد را در لیست نامرتب ‹ul› اضافه، حذف و ویرایش کند. در زیر نمونه ای از لیستی است که موارد آن قابل تغییر است

تلویزیون تماشا کن
موسیقی گوش کنید
بازی های ویدیویی بازی کنید

ویژگی های فرم جدید

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

فیلدهای ورودیپست الکترونیک

از ویژگی type="email" در تگ ‹input› و فیلد e input استفاده کنید تا قابلیت‌های منحصربه‌فرد دیگری برای تأیید صحیح وارد کردن آدرس داشته باشید و اگر آدرس اشتباه وارد شده باشد، مرورگر یک پیام هشدار به آدرس نمایش می‌دهد. کاربر.

‹input id="email" name="email" type="email" /›

نتیجه ممکن است به این صورت باشد (Google Chrome):

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

استفاده از نکات

اکنون دیگر نیازی به استفاده از جاوا اسکریپت برای ایجاد نکات (placeholder) برای ورودی نیست فیلدهای متنی. HTML5 استفاده از ویژه را پیشنهاد می کند ویژگی مکان نگهدار A که می تواند یک راهنمای ابزار متن پس زمینه را برای فیلد نمایش دهد.

‹input name="email" type="email" placeholder="(!LANG: [ایمیل محافظت شده]" /›

نتیجه در پاین نشان داده شده است:

این مثال فقط در مرورگرهای دارای HTML5 کار می کند.

پست الکترونیک:

فوکوس خودکار

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

‹input name="name" type="text" فوکوس خودکار /›

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

فیلدهای مورد نیاز

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

‹input name="name" type="text" placeholder="(!LANG:John Smith" required /› !}

در زیر تصویری از نتیجه این کد (گوگل کروم) آمده است:

دامنهورودی

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

‹input type="range" name="quantity" min="0" max="100" step=".25" value="10" /›

ویژگی‌های min و max برای تنظیم مقادیر شدید نوار لغزنده استفاده می‌شوند، مرحله مرحله تغییر مقدار است. مرورگر گوگل کروم این کنترل را به صورت زیر ارائه می کند:

این مثال فقط در مرورگرهای دارای HTML5 کار می کند.

ذخیره سازی محلی

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

Local Storage خود بخشی از مشخصات HTML5 نیست، اما ارتباط نزدیکی با آن دارد.

کنترل ذخیره سازی محلیاز طریق شیء کلاس localStorage با استفاده از دو متد setData() و getData() اتفاق می افتد. در زیر نمونه ای وجود دارد که از لیست قابل ویرایش شرح داده شده در بالا استفاده می کند که آخرین مقادیر وارد شده در آن را ذخیره می کند.

‹h1›To-Do List‹/h1› ‹ul contenteditable=true› ‹li›Watch TV‹/li› ‹li›Listen to music‹/li› ‹li›Play videogames‹/li› ‹/ul›

جاوا اسکریپت (با استفاده از کتابخانه jQuery، اما این اختیاری است):

$("#todo").blur(function () ( localStorage.setItem("todoData", this.html); )); if (localStorage.getItem("todoData")) ($("#todo").html(localStorage.getItem("todoData"))؛ )

پشتیبانی چند رسانه ای

اکنون دیگر نیازی به استفاده از پلاگین ها و کتابخانه های شخص ثالث برای اتصال نیست صوتی مختلفو فایل های ویدئویی تمام قابلیت های جاسازی رسانه اکنون در مشخصات HTML5 گنجانده شده است.

سمعی

برای جاسازی در یک صفحه فایل صوتیباید از تگ

‹کنترل های پخش خودکار صوتی›
‹منبع src="file.ogg" /›
‹منبع src="file.mp3" /›
‹a href="file.mp3"›این فایل را دانلود کنید.‹/a›

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

این تگ ویژگی های خاص خود را برای پشتیبانی در مرورگرها دارد. مثلا، مرورگر موزیلافایرفاکس با فایل های .ogg کار می کند در حالی که مرورگرهای Webkit با mp3

ویدئو

تا همین اواخر، تنها راهقرار دادن محتوای ویدیویی در صفحه HTML یکپارچه سازی محتوای Flash بود. با این حال، مرورگرهایی که مشخصات HTML5 را برآورده می کنند اکنون چنین فرصتی را فراهم می کنند. این امر به ویژه زمانی محبوب شد که بزرگترین میزبان ویدیو YouTube.com به فرمت HTML5 تغییر مکان داد.

برای ادغام موفقیت آمیز یک ویدیو در یک صفحه، باید از برچسب ‹video› استفاده کنید. متأسفانه، بین تولیدکنندگان مرورگر توافق نظر وجود ندارد که ویدیو در چه قالبی باید ارائه شود، بنابراین هر یک از آنها فرمت خاص خود را تبلیغ می کنند. در حالی که اینترنت اکسپلورر و صفسری از ویدیوی H.264 (که توسط فلش پلیرها پشتیبانی می شد) پشتیبانی می کنند، اپرا و فایرفاکس در حال تبلیغ هستند. متن بازفرمت های Vorbis و Theora. از طرف دیگر کروم می‌تواند ویدیوها را در همه فرمت‌ها از جمله WebM به درستی نمایش دهد.

‹پیش بارگیری کنترل‌های ویدیو› ‹منبع src="video.ogv" type="video/ogg; codecs="vorbis, theora"" /› ‹منبع src="video.mp4" type="video/mp4; codecs=" avc1.42E01E, mp4a.40.2"" /› ‹p›مرورگر شما قدیمی است. ‹a href="video.mp4"›به جای آن این ویدیو را دانلود کنید.‹/a› ‹/p› ‹/video›

همه مرورگرها نمی‌توانند ویدیوی HTML5 را نمایش دهند، بنابراین در زیر برچسب ‹source› می‌توانید پیوندی برای دانلود ویدیو یا پخش‌کننده Flash مشخص کنید.

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

از نویسنده:سلام دوستان! در این مقاله می خواهم کمی در مورد html5 به شما بگویم. بگویید html5 چیست، چه چیز جدیدی در آن وجود دارد. چه ویژگی های جدیدی در اختیار توسعه دهندگان قرار می دهد. HTML5 یک مفهوم بسیار گسترده است. و برخی از فناوری هایی که در HTML5 نامیده می شوند، به طور کلی، html5 نیستند، اما اول از همه…

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

دومی HTML5 "بزرگ"، بازاریابی و مد روز است، چتری برای یک نسل کامل از فناوری های جدید، از جمله مشخصات HTML5 و بسیاری از ماژول های CSS3، API های جاوا اسکریپت مختلف، و استاندارد جدیدبرای جاوا اسکریپت - ECMAScript5.

برخی را در نظر بگیرید ویژگی های کلیدی html5:

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

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

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

چه چیزی به HTML5 می دهد؟

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

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

اهداف HTML5

به طور خلاصه می توان اهداف html5 را به صورت زیر نام برد:

حذف افزونه هایی مانند Flash for توابع مشترککه همه به آن نیاز دارند پشتیبانی خود را برای مواردی مانند صدا، تصویر و غیره ایجاد کنید.

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

اطمینان از ثبات در مرورگرها و دستگاه ها.

همه چیز را تا حد امکان شفاف کنید.

چه چیزی در HTML5 جدید است

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

عناصر جدید html5

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

< ! doctype html >

< html lang = "en" >

< head >

< meta charset = "utf-8" >

< title > < / title >

< meta name = "author" content = "" / >

< meta name = "description" content = "" / >

< link rel = "stylesheet" href = "assets/css/style.css" / >

< ! -- [ if lt IE 9 ] >

< ! [ endif ] -- >

< / head >

< body >

< header >

< h1 > < a href = "/" >عنوان صفحه< / a > < / h1 >

< nav >

< ol >

< li > < a href = "" >ناو لینک 1< / a > < / li >

< li > < a href = "" >ناو لینک 2< / a > < / li >

< li > < a href = "" >ناو لینک 3< / a > < / li >

< / ol >

< / nav >

< / header >

< article >

< h1 >سرفصل مقاله< / h1 >

< p >Etiam pretium odio eu mi convallis vitae varius neque pharetra. Nulla vestibulum nisi ut sem cursus sed mattis nisi egestas.< / p >

< h2 >عنوان فرعی مقاله< / h2 >

< p >Vestibulum lacus erat، volutpat vel dignissim at، fringilla ut felis.< / p >

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

در این مقاله به تدریج یک صفحه html ایجاد می کنیم و با تگ های معنایی HTML5 به آن استایل می دهیم.

شکل - ساختار معنایی برای صفحه HTML5.

DOCTYPE و متا تگ ها در عنوان صفحه

بیایید با یک قالب سند استاندارد HTML5 شروع کنیم و متا تگ ها را به سر اضافه کنیم:

عنوان صفحه

من یک برچسب اضافه کردم که مسئول کلمات کلیدی است. و تگ کنید که مسئولیت توضیحات صفحه را بر عهده دارد. برای بهینه سازی سئو، این برچسب ها مورد نیاز است. همچنین لازم است تگ صحیح را پر کنید . عنوان صفحه باید برای کل سایت منحصر به فرد باشد و در عنوان حاوی کل ماهیت صفحه ای باشد که برای آن مشخص شده است.</p><p>بیایید جلوتر برویم. HTML5 تگ های جدیدی را معرفی می کند که برای نشانه گذاری معنایی یک سند استفاده می شود. اینها تگ های هدر، ناوبری، اصلی، مقاله، کنار، پاورقی و غیره هستند. با نمایشگر، آنها درست مانند نمونه های معمولی کار می کنند. <div>برچسب ها، یعنی اینها عناصر بلوک هستند. اما اگر <div>بار معنایی ندارد، پس از هدر، ناوبری، اصلی و موارد دیگر باید فقط به صورت معنادار استفاده شود.</p><h3>عنوان صفحه</h3><p>هدر صفحه در تگ هدر فرمت شده است. توجه داشته باشید که عنوان صفحه با تگ h1 نوشته می شود.</p><p>  <header> <h1>عنوان سایت</h1> </header> </p><p>اگر در کنار عنوان یک شعار هم داریم، آن را در p، div یا span قرار دهید.</p><p>  <header> <h1>عنوان سایت</h1> <p>شعار سایت</p> </header> </p><p><b>نکته ای در مورد تگ H1</b></p><p>لازم به ذکر است که در HTML5 از تگ H1 برای نشان دادن عنوان محفظه ای که در آن قرار دارد استفاده می شود (این می تواند هدر، بخش، مقاله و غیره باشد).</p><p>قبل از ظهور تگ های HTML5، معناشناسی تا حدودی متفاوت و متفاوت بود. بنابراین در HTML4، تنها یک عنوان H1 می تواند در هر صفحه وجود داشته باشد! معمولاً این عنوان مقاله یا عنوان صفحه بود (مثلاً اگر صفحه دسته‌بندی است که چندین مقاله را نمایش می‌دهد.) H2 برای عنوان‌های فرعی یا برای بخش‌هایی از مقاله اصلی استفاده می‌شد. H3 برای زیربخش ها و غیره.</p><h3>پیمایش صفحه</h3><p>طراحی پیمایش اصلی در سایت باید در تگ nav باشد. همچنین باید به خاطر داشته باشید که سبک دادن به پیمایش با عناصر لیست تمرین خوبی است.</p><p>  <nav> <ul> <li>صفحه اصلی</li> <li>نمونه کارها</li> <li>گالری</li> <li>مخاطب</li> </ul> </nav> </p><h3>محتوا در هر صفحه</h3><p>محتوای اصلی صفحه در تگ اصلی پیچیده شده است. این می تواند یک مقاله یا چندین پیش نمایش مقاله باشد <a href="https://bumotors.ru/fa/chem-otlichaetsya-palka-dlya-selfi-ot-monopoda-esli-rech-idet-o.html">ما داریم صحبت می کنیم</a>درباره یک صفحه وبلاگ با چندین ورودی. شما نمی توانید یک نوار کناری، سرصفحه صفحه، پاورقی یا <a href="https://bumotors.ru/fa/sverhchuvstvitelnye-gps-moduli-samoe-glavnoe-o-gps-navigacii-chto-takoe-gps.html">ناوبری اصلی</a>در تگ اصلی!</p><p>  <main>... محتوای اصلی صفحه ...</main> </p><h3>قالب بندی مقاله</h3><p>برچسب مقاله برای بسته بندی مقالات استفاده می شود. به طور کلی، این تگ حاوی بلوکی از محتوا است که می توان آن را از متن صفحه خارج کرد و به طور جداگانه در جای دیگری استفاده کرد. این می تواند یک مقاله (متن کامل مقاله یا پیش نمایش)، پست انجمن و غیره باشد.</p><p>در مثال زیر، طراحی مقاله را به صورت متنی، داخل تگ اصلی نشان دادم. مقاله دارای یک بلوک هدر با عنوان مقاله است. تاریخ انتشار مقاله تعیین شد <a href="https://bumotors.ru/fa/kak-rasstavit-h1-h6-v-statyah-teg-h1-eto-zagolovok-stranicy-formatirovanie-teksta-pri-pomoshchi-spec.html">برچسب ویژه</a>زمان، که به عنوان یک عنصر درون خطی معمولی ارائه می شود. برچسب زمان دارای ویژگی خاصی است که در آن زمان انتشار باید در قالب بومی ارائه شود. این می تواند فقط یک date time="2015-09-30" یا تعیین ساعت ها دقیقه و ثانیه datetime="2015-09-30T15:25:55" باشد. پارامتر pubdate نشان می دهد که مقاله همزمان با نگارش منتشر شده است. اگر این خبر است، ممکن است زمان انتشار خبر یک باشد و زمان انتشار متفاوت باشد، برای این کار باید دو بار برچسب زمان را مشخص کنید و pubdate را فقط در برچسبی که زمان انتشار مشخص شده است قرار دهید. .</p><p> <main> ...  <article>  <header>  <h1>عنوان مقاله</h1>  <time datetime="2015-09-30T15:25:55" pubdate>30 سپتامبر</time> </header>  <h2>عنوان فرعی مقاله</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quisquam، soluta sunt، aliquam voluptatem voluptates! Deserunt repudiandae aperiam pariatur sit harum at a, quo, est neque. Adipisci beatae eaque unde؟</p><p>از مثال بالا می بینید که در داخل مقاله از تگ های سرصفحه و پاورقی برای برجسته کردن سربرگ و پاورقی مقاله استفاده شده است.</p><h3>نوار کناری یا ستون با ویجت ها</h3><p>برای هر عنصر نوار کناری جداگانه، از بلوک کناری استفاده کنید. در داخل آن، عنوان را با تگ h1 مشخص می کنیم. بنابراین یک ستون نوار کناری ممکن است شبیه به این باشد:</p><p>  <div class="sidebar">  <aside> <h1>عنوان ویجت</h1> ... </aside>  <aside> <h1>آخرین یادداشت ها</h1> ... </aside>  <aside> <h1>نظرات محبوب</h1> ... </aside> </div> </p><h3>برچسب بخش</h3><p>تگ بخش برای نشان دادن یک گروه یا بخش از محتوای مرتبط با موضوع استفاده می شود. استفاده از آن شبیه به یک مقاله است با تفاوت اصلی این است که محتوای داخل عنصر مجاز به بی معنا شدن است. <section>خارج از زمینه خود صفحه استفاده از تگ ها ( <h1> – <h6>) برای نشان دادن موضوع بخش.</p><p>به عنوان مثال، می توانید مقاله ای را که در حال خواندن آن هستید ذکر کنید، می توان هر پاراگراف را در یک برچسب قرار داد. <section>. به عنوان مثال، تگ بخش می تواند برای برجسته کردن بلوک های محتوا در صفحه فرود استفاده شود. به نظر می رسد تعریف یک عنصر div، که اغلب به عنوان یک ظرف برای محتوا استفاده می شود. تفاوت این است که div معنای معنایی ندارد و چیزی در مورد محتوای داخل آن نمی گوید. از سوی دیگر، از تگ بخش برای نشان دادن اینکه محتوای درون آن از نظر معنی مرتبط است استفاده می شود. می‌توانید برخی از تگ‌های div خود را با بخش جایگزین کنید، اما همیشه به این سؤال پاسخ دهید "آیا این محتوا مرتبط است یا نه؟"</p><p>نمونه ای از استفاده از تگ بخش در لیستی از شهرها:</p><p> <h1>یک رویداد جدا</h1> <section> <header> <h2>شهرها</h2> </header> <p>با ما در این شهرها در سال 2010 همراه باشید.</p> <section> <header> <h3>سیاتل</h3> </header> <p>جاده آجری زرد را دنبال کنید.</p> <section> <header> <h3>بوستون</h3> </header> <p>این Beantown برای دوستانش است.</p> <section> <header> <h3>مینیاپولیس</h3> </header> <p>آن چنان <em>خوب</em>.</p> <small>محل اقامت ارائه نشده است.</small> </p><h3>پاورقی سایت - پاورقی</h3><p>فوتر سایت با تگ تزئین شده است <footer></p><p>  <footer> <p class="copyright">© 2015 حق نشر سایت</p> </footer> </p><h3>نتیجه</h3><p>می توانید از ابزار outliner HTML5 برای بررسی ساختار یک صفحه استفاده کنید. ساختار صفحه را در بلوک ها و سرفصل ها نشان می دهد.</p><p>معناشناسی در HTML5 به تگ های بالا محدود نمی شود. اما با استفاده از مثال‌های بالا، می‌توانید نشانه‌گذاری خود را بهبود ببخشید و سایت خود را برای موتور جستجوی دوستانه‌تر کنید، که نتیجه آن بیشتر خواهد بود. <a href="https://bumotors.ru/fa/telefon-s-kameroi-vysokogo-razresheniya-reiting-luchshih.html">رتبه بالا</a>سایت در نتایج جستجو</p><p>در ادامه موضوع، می توانید سایر تگ های جدید HTML5 را بررسی کنید. و همچنین فرمت های میکرو برای قالب بندی و ساختار داده ها، مانند schema.org</p><p><b>یک نکته مهم در مورد استفاده از تگ های HTML5.</b>مشخصات قوانین سختگیرانه ای را برای استفاده مشخص نمی کند <a href="https://bumotors.ru/fa/obshchaya-struktura-tegov-semanticheskaya-struktura-dlya-html5-stranicy.html">برچسب های معنایی</a>، فقط توصیه هایی در مورد استفاده از آنها ذکر شده است. اگر نمی‌دانید یا نمی‌دانید کجا و از چه تگ HTML5 استفاده کنید، بهتر است از div استفاده کنید - تا به ساختار سند آسیب نرسانید یا شکسته نشود.</p><p><b>مقالات و مواد</b></p> <p>سند HTML5 ساده</p><p>یکی از ساده ترین اسناد HTML5 را در نظر بگیرید. با مشخص کردن نوع سند با شروع می شود <a href="https://bumotors.ru/fa/ishodnyi-kod-prilozheniya-android-specialnye-kody-v-androide-chto-my.html">کد ویژه</a>شرح نوع سند (معنی این کد در توضیح داده شده است <a href="https://bumotors.ru/fa/ustanovka-windows-10-na-mac-mini-udalenie-razdela-bootcamp-chto-sleduet.html">بخش بعدی</a>) پس از آن کدگذاری و نام سند تنظیم می شود و سپس محتوای آن دنبال می شود. در این مورد، محتوا از یک پاراگراف متن تشکیل شده است:</p> <p> <!DOCTYPE HTML> <meta charset="utf-8"> <title>سند کوچک HTML5

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

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

سند کوچک HTML5

بیایید مرورگر را به سبک HTML5 تکان دهیم!

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

سند کوچک HTML5

بیایید مرورگر را به سبک HTML5 تکان دهیم!

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

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

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

شرح نوع سند HTML5

خط اول هر سند HTML5 همیشه نوع سند را شرح می دهد. این توضیحات به وضوح نشان می دهد که آنچه در زیر می آید محتوای HTML5 است و به شکل زیر است:

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

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

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

همه اینها یک سوال دشوار را ایجاد می کند: اگر HTML5 یک زبان زنده است، پس چرا یک صفحه اصلاً به توصیف نوع سند نیاز دارد؟

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

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

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

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

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

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

سند کوچک HTML5

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

زبان

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

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

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

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

افزودن یک شیوه نامه

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

سند کوچک HTML5

این روش شبیه به تعیین شیوه نامه در اسناد HTML سنتی است، اما کمی ساده تر است. از آنجایی که تنها یک زبان شیوه نامه آبشاری، CSS وجود دارد، افزودن ویژگی type="text/css" که قبلاً مورد نیاز بود، دیگر ضروری نیست.

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

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

کد جاوا اسکریپت در یک سند HTML5 توسط روی هم رفتهمانند یک صفحه HTML سنتی. فهرست زیر نمونه ای از درج کد جاوا اسکریپت را در یک سند وب از پیوند به نشان می دهد فایل خارجی:

سند کوچک HTML5

ویژگی language="JavaScript" اختیاری است، زیرا اگر هیچ زبان برنامه نویسی دیگری مشخص نشده باشد (و از آنجایی که جاوا اسکریپت تنها زبان برنامه نویسی با پشتیبانی گسترده برای HTML است، احتمال این توسعه ناچیز است)، مرورگرها به طور خودکار فرض می کنند که جاوا اسکریپت استفاده می شود. اما حتی زمانی که به یک فایل خارجی با کد جاوا اسکریپت ارجاع می دهید، همچنان باید تگ بسته شدن را به خاطر بسپارید.. اگر این تگ به دلیل نادیده گرفتن یا هنگام تلاش برای کوتاه کردن کد با استفاده از نحو عنصر خالی حذف شود، صفحه به درستی کار نخواهد کرد.

اگر زمان زیادی را صرف آزمایش صفحات جاوا اسکریپت خود در اینترنت اکسپلورر می کنید، برچسب را اضافه کنید MOTW (مارک از وب- برچسب ویژگی شبکه)مسدود کردن بلافاصله پس از خط رمزگذاری این کار به این صورت انجام می شود:

سند کوچک HTML5

این خط کد به اینترنت اکسپلورر می گوید که با صفحه به گونه ای رفتار کند که گویی از یک وب سایت راه دور دانلود شده است. در غیر این صورت، اینترنت اکسپلورر به حالت مسدود کردن ویژه تغییر می‌کند، یک هشدار امنیتی در نوار پیام نمایش می‌دهد و از اجرای هر یک امتناع می‌کند. کد جاوا اسکریپتتا زمانی که روی دکمه «مجاز محتوای مسدود شده» کلیک کنید.

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

نمونه های HTML5 ساده کردن نوشتن DOCTYPE

DOCTYPE جدید

معنای کد بهبود یافته

هیچ نوع اسکریپت و شیوه نامه وجود ندارد

ساختار کد

محتوای قابل ویرایش

ویژگی های فرم جدید

ذخیره سازی محلی

پشتیبانی چند رسانه ای

چه چیزی به HTML5 می دهد؟

اهداف HTML5

چه چیزی در HTML5 جدید است

عناصر جدید html5

DOCTYPE و متا تگ ها در عنوان صفحه

شرح نوع سند HTML5

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

زبان

افزودن یک شیوه نامه

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

برترین مقالات مرتبط