استفاده از Html5. HTML5 به زبان ساده

06.04.2019 ویندوز 7، XP

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

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

HTML1 و HTML2

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

HTML3.0

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

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

HTML4.1

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

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

XHTML و DHTML

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

ریشه های HTML5

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

بنابراین، شرایط مدرن از کد جدید لازم بود.

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

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

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

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

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

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

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

1. HTML5 - یک رویکرد جدید برای نشانه گذاری: چند رسانه ای در داخل

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

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

وقتی در مورد پلاگین هایی مانند این صحبت می کنیم، در درجه اول منظور ماست ادوبی فلش، QuickTime یا Real Player و Silverlight کمتر رایج است. اینها همه «افزونه‌ها» هستند، افزونه‌های مرورگر که مال آنها نیستند قسمتی ازو به عنوان نوعی واسطه عمل می کند که محتوای دیجیتال قابل دانلود را به ویدیو و صدا تبدیل می کند.

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

در استاندارد HTML5 که ترکیبی از خود HTML و همچنین CSS و جاوا اسکریپت است، در ابتدا رویکردی اساساً متفاوت اجرا می شود که در آن محتوای رسانه بخشی جدایی ناپذیر از کد صفحه است. HTML5 یکپارچه را فراهم می کند راه استانداردتوضیحات ( نحو) محتوای سمعی و بصری تعبیه شده در صفحات.

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

البته، HTML5 نوآوری های بسیار دیگری نیز دارد، اما این مهمترین آنهاست - تغییر در رویکرد ایدئولوژیک.

2. مشکل سازگاری به عقب: اول HTML، سپس پلاگین ها

متاسفانه هنوز تعداد قابل توجهی از کاربران در جهان هستند که نصب کرده اند مرورگرهای قدیمیکه با آنها خوب است، اما از همه ویژگی های HTML5 پشتیبانی نمی کند. اول از همه، ما در مورد اینترنت صحبت می کنیم نسخه اکسپلورر 8، تا حد زیادی محبوب ترین برای این مرورگر. نسخه های بعدی - IE 9 و 10 - در حال حاضر تقریباً به طور کامل از HTML5 پشتیبانی می کنند. کروم، اپرا و سافاری چندین سال است که می توانند برچسب های "ویدئو" و "صوتی" را مدیریت کنند.

با این وجود، برای اطمینان از سازگاری به عقب، HTML5 از استفاده از افزونه ها (برچسب "شیء") پشتیبانی می کند، اما طبق طرح "اول HTML و سپس پلاگین ها". این بدان معناست که مرورگر ابتدا باید صفحه را با استفاده از تگ‌های "ویدئو" و "صوتی" رندر کند - و تنها در صورتی که نمی‌تواند این کار را انجام دهد، از کد افزونه استفاده کنید.

برای اینکه این رویکرد به درستی کار کند، می‌توانید از یکی از بسیاری از کتابخانه‌های جاوا اسکریپت موجود استفاده کنید که برخی از آن‌ها یکپارچه کامل ارائه می‌کنند. رابط نرم افزاری(API) برای دستکاری محتوای HTML و اشیاء تعبیه شده. در میان آنها، به طور خاص، می توان Projekktor یا نرم افزار پخش کننده ویدیو Video.js را نام برد که سازگاری کامل را با هر دو مرورگر HTML5 و قدیمی تر که از افزونه ها استفاده می کنند، ارائه می دهد.

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

پشتیبانی از استاندارد جدید HTML5 نیز تقریباً در تمام دستگاه های تلفن همراه مدرن از جمله iOS، Android و ویندوز فون، مزیت مهم دیگر آن چیست. مدیر وب سایت دیگر نیازی به میزبانی نسخه های متعدد محتوای رسانه ای برای رایانه های "کامل" و دستگاه های تلفن همراه ندارد. IOS به طور کامل با فلش ناسازگار است، در حالی که اندروید فقط تا حدی سازگار است. در مورد HTML5 این مشکل کاملا برطرف شده است.

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

4. پشتیبانی از فرمت های مختلف ویدئو و صدا

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

محبوب ترین کانتینرها برای ویدئوهای اینترنتی AVI، MP4، FLV و WebM هستند و تنها سه کدک ویدئوی اصلی "شبکه" وجود دارد: H.264، Ogg Theora و VP8. در همان زمان، هر کدک معمولا (اما نه همیشه) به بهترین شکل با فرمت کانتینر خود مطابقت دارد: H.264 - MP4، Theora - OGG، VP8 - WebV.

کدک H.264 ویدیوی با اتلاف را فشرده می کند تا یک فایل دریافت کند کیفیت بالا، ولی اندازه کوچک... علاوه بر این، مشخصات برای چندین پروفایل با کیفیت متفاوتو نسبت فشرده سازی به طوری که فایل های "سبک" را می توان به دستگاه های تلفن همراه کم مصرف و دسکتاپ با پهنای باند- ویدیو با کیفیت بالاتر

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

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

کدک هدف موبایل VP8 توسط شرایط Google منتشر شد متن بازو کیفیتی مشابه با H.264 با پیچیدگی رمزگشایی کمتر ارائه می دهد. کروم، فایرفاکس و اپرا دارای پشتیبانی داخلی و همچنین دستگاه های تلفن همراه اندروید هستند.

بنابراین، برای اطمینان از پخش محتوای ویدیویی تقریباً در همه سیستم های موجود، کافی است فایل ها را در کانتینرهای MP4 در استاندارد کدگذاری H.264 و با فرمت WebM با کدک VP8 آپلود کنید. از آنجایی که در بین تمام مرورگرهای دسکتاپ مدرن، فقط Opera فاقد پشتیبانی بومی H.264 است، این ترکیب ها همه کاره ترین خواهند بود.

5. اسناد گسترده ای در دسترس عموم وجود دارد

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

علاوه بر این، تعداد زیادی کتاب در مورد HTML5 قبلاً به روسی ترجمه شده است، از جمله،

01/27/14 15.5K

معرفی

به عنوان یک توسعه دهنده ASP.NET MVC، اخیراً به دنبال کار بودم و در طول مصاحبه، بسیاری از سوالاتی که از من پرسیده شد در مورد HTML5 و مشخصات آن بود.

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

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

شکار خوبی داشته باشید

رابطه بین SGML، HTML، XML و XHTML چیست؟

SGML ( زبان نشانه گذاری تعمیم یافته استاندارد- Standard Generalized Markup Language) استانداردی است که نشانه گذاری یک سند را تعریف می کند.

HTML یک زبان نشانه گذاری است که با استفاده از SGML توصیف می شود.

بنابراین، با SGML، یک DTD (تعریف نوع سند) ایجاد شد که HTML به آن ارجاع دارد و باید به آن پایبند باشد. بنابراین، همیشه می‌توانید اعلان «DOCTYPE» را در ابتدای صفحه HTML پیدا کنید، که تعیین می‌کند مرورگر هنگام تجزیه کد صفحه از کدام DTD استفاده کند.

تجزیه کد SGML مشکل بود، بنابراین XML برای آسان‌تر کردن آن ایجاد شد. XML از SGML استفاده می کند.

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

XHML از XML ایجاد شد و در HTML 4.0 استفاده شد. بنابراین، برای مثال، در HTML مبتنی بر SGML، تگ
معتبر نیست، اما XHTML معتبر است. می توانید از تعریف سند XML همانطور که در مثال زیر نشان داده شده است استفاده کنید:

به طور خلاصه، SGML در قلب همه چیز قرار دارد. نسخه های قدیمی HTML مبتنی بر SGML هستند، در حالی که HTML 4.0 از XHTML مبتنی بر XML استفاده می کند.

HTML 5 چیست؟

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

HTML5 نتیجه است همکاری با یکدیگر در سراسر جهانکنسرسیوم وب (W3C) و کارگروه فناوری کاربردی ابرمتن وب(WHATWG).

در HTML 5 ما نیازی به DTD نداریم. چرا؟

HTML 5 از SGML یا XHTML استفاده نمی کند. کاملا هست توسعه جدیدبنابراین شما نیازی به ارجاع DTD ندارید. در HTML 5، باید از doctype زیر استفاده کنید که به مرورگر اجازه می دهد سند را به عنوان HTML 5 شناسایی کند.

اگر در سند وارد نکنم، آیا HTML 5 کار می کند؟
خیر، مرورگر نمی تواند سند را به عنوان HTML 5 شناسایی کند و تگ های HTML 5 به درستی کار نمی کنند.

کدام مرورگرها از HTML 5 پشتیبانی می کنند؟

تقریباً همه مرورگرها مانند سافاری، گوگل کرومفایرفاکس، اپرا، اینترنت اکسپلورر از HTML 5 پشتیبانی می کنند.

ساختار صفحه هنگام انتقال از HTML 4 یا نسخه های قبلی به HTML 5 چگونه تغییر کرد؟

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

در زیر شرحی از این عناصر HTML 5 از نشانه گذاری در تصویر آمده است:

: نشان دهنده بلوک عنوان صفحه است.
: پاورقی صفحه;
: عناصر ناوبری صفحه.
: محتوای اصلی صفحه (مقاله);
: در یک مقاله برای تقسیم مقاله به بخش ها استفاده می شود.
: نشان دهنده بلوک کناری صفحه است.

عنصر datalist در HTML 5 چیست؟

عنصر datalist در HTML 5 به پیاده سازی ویژگی تکمیل خودکار در فیلد ورودی کمک می کند، همانطور که در تصویر زیر نشان داده شده است:

در زیر HTML برای عنصر DataList آمده است:

چه عناصر فرم جدیدی در HTML 5 معرفی شده است؟

HTML 5 ده عنصر مهم فرم جدید را معرفی می کند:

رنگ؛
تاریخ؛
Datetime-local;
پست الکترونیک؛
زمان؛
دامنه؛
تلفن؛
عدد؛
جستجو کردن.

بیایید این عناصر را به ترتیب در نظر بگیریم.

اگر می خواهید کادر گفتگوی انتخابگر رنگ را نمایش دهید:

اگر می خواهید گفتگوی تقویم را نمایش دهید:

اگر می خواهید تقویمی را با زمان محلی نمایش دهید:

اگر می خواهید یک فیلد ورودی HTML با اعتبار سنجی آدرس ایمیل ایجاد کنید، می توانید نوع فیلد را روی "ایمیل" تنظیم کنید:

برای تأیید اعتبار یک URL، از نوع "url" مانند شکل زیر استفاده کنید:

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

اگر می خواهید نوار لغزنده را نمایش دهید، از نوع "محدوده" استفاده کنید:

می خواهید یک کادر جستجو ایجاد کنید:

می خواهید فقط زمان بگذارید:

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

عنصر خروجی در HTML 5 چیست؟

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

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

در زیر نمونه ای از استفاده از عنصر خروجی در HTML 5 آورده شده است:

+ =

برای سادگی می‌توانید «parseInt» را با «valueAsNumber» جایگزین کنید. همچنین می توانید از ویژگی "for" عنصر خروجی برای بهبود خوانایی استفاده کنید.

SVG چیست؟

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

آیا می توانم با استفاده از HTML 5 یک تصویر SVG ساده بسازم؟

فرض کنید می‌خواهیم یک خط ساده را همانطور که در تصویر زیر نشان داده شده است با استفاده از HTML 5 و SVG ارائه دهیم:

در زیر کد HTML 5 آمده است. شما می توانید تگ SVG را ببینید که یک تگ خط را برای نمایش یک خط محصور می کند:

بوم در HTML 5 چیست؟

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

بنابراین چگونه می توان با استفاده از یک بوم یک خط ساده ترسیم کرد؟

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

تعریف منطقه بوم

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

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

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

var c = document.getElementById ("mycanvas"); var ctx = c.getContext ("2d");

کشیدن یک تصویر

اکنون که به زمینه شیء دسترسی دارید، می توانید شروع به طراحی روی بوم کنید. بنابراین ابتدا متد "حرکت" را فراخوانی می کنیم و از نقطه 10 و 10 شروع می کنیم و از روش "خط" برای کشیدن خط استفاده می کنیم و در نهایت هاچینگ را روی آن اعمال می کنیم:

ctx.moveTo (10،10); ctx.lineTo (200100); ctx.stroke ();

در زیر کد کامل آمده است:

انتخابگرها در CSS چیست؟

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

برای اعمال سبک "intro" به عنصر div، می توانیم از ویژگی "class" استفاده کنیم، همانطور که در بلوک کد زیر نشان داده شده است:

نام من Shivprasad koirala است.

من سوالات مصاحبه می نویسم.

چگونه می توانم استایل CSS را با استفاده از مقدار ID اعمال کنم؟

فرض کنید یک تگ پاراگراف HTML با شناسه "mytext" دارید، همانطور که در مثال زیر نشان داده شده است:

اینها سوالات HTML هستند که ممکن است در یک مصاحبه شغلی از شما پرسیده شود.

شما می توانید با استفاده از انتخابگر "#" و مقدار ویژگی "id" برای اعمال سبک های CSS به تگ پاراگراف مربوطه استایل دهید. بنابراین، برای اعمال سبک به عنصر "mytext" می توانیم از انتخابگر "#mytext" مانند شکل زیر استفاده کنیم:

بیایید نگاهی گذرا به چند انتخاب کننده مهم بیندازیم

تنظیم پس‌زمینه زرد برای همه پاراگراف‌ها و عناوین h1:

p، h1 (رنگ پس زمینه: زرد؛)

تنظیم یک پس‌زمینه زرد برای همه پاراگراف‌های داخل یک عنصر div:

div p (رنگ پس زمینه: زرد؛)

تنظیم یک پس‌زمینه زرد برای همه پاراگراف‌های زیر div:

div + p (رنگ پس زمینه: زرد؛)

تنظیم یک پس زمینه زرد برای همه عناصر با ویژگی "target":

a (رنگ پس زمینه: زرد؛) سوالات مصاحبه ASP.NET c # سوالات مصاحبه سوالات مصاحبه دات نت با پاسخ

تنظیم پس‌زمینه زرد برای فیلدهای ورودی هنگام دریافت فوکوس:

ورودی: فوکوس (رنگ پس زمینه: زرد؛)

تنظیم سبک هایپرلینک ها، بسته به وضعیت آنها:

a: پیوند (رنگ: سبز؛) a: بازدید شده (رنگ: سبز؛) a: شناور (رنگ: قرمز؛) a: فعال (رنگ: زرد؛)

چگونه از تجزیه ستون CSS استفاده کنیم؟

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

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

اینجاست که تجزیه ستون HTML 5 مفید است.

برای پیاده سازی تفکیک ستون ها، باید موارد زیر را تعریف کنید:

برای تقسیم متن به چند ستون نیاز دارید؟

از ویژگی column-count برای تعیین تعداد ستون ها استفاده می شود. پیشوندهای "webkit" و "moz" مورد نیاز هستند مرورگرهای کرومو به ترتیب فایرفاکس.

Moz-Column-count: 3; / * فایرفاکس * / -webkit-column-count: 3; / * سافاری و کروم * / تعداد ستون: 3;

فاصله بین ستون ها چقدر است؟

Moz-column-gap: 40px; / * فایرفاکس * / -webkit-column-gap: 40px; / * Safari و Chrome * / ستون-شکاف: 20 پیکسل.

آیا می خواهید بین ستون ها یک خط بکشید، و اگر بله، چقدر ضخامت دارد؟

Moz-column-rule: 4px outset # ff00ff; / * فایرفاکس * / -webkit-column-rule: 4px outset # ff00ff; / * Safari و Chrome * / column-rule: 6px outset # ff00ff;

در زیر آمده است کد کاملمثال:

سپس می توانید این سبک را با استفاده از ویژگی "class" در متن اعمال کنید:

اینجاست که متن شما دنبال می شود که می خواهید آن را به 3 ستون تقسیم کنید:

در مورد مدل جعبه CSS به ما بگویید

بلوکی مدل CSS فضای مستطیلی اطراف عنصر HTML است که مرزها، حاشیه‌ها و padding را تعریف می‌کند.

Borders - حداکثر منطقه ای را که عنصر در آن قرار می گیرد را تعیین می کند. می توانیم مرز را قابل مشاهده، نامرئی کنیم، ارتفاع و عرض عنصر را مشخص کنیم و غیره. حاشیه ها - فاصله بین مرز و عنصر را مشخص کنید.

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

به عنوان مثال، در زیر آمده است CSS سادهکدی که بلوک و مقادیر حاشیه‌ها، حاشیه‌ها و padding را تعریف می‌کند:

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

مقداری متن

یه متن دیگه

در مورد افکت های متنی در CSS 3 به من بگویید

در اینجا مصاحبه کننده از شما انتظار دارد که در مورد یکی از دو افکت معرفی شده در CSS 3 صحبت کنید.

در زیر هر دو اثر وجود دارد:

افکت سایه متن

متن ویژه (متن-سایه: 5px 5px 5px # FF0000;)

اثر شکست کلمه:

کارگران وب چیست و چرا به آنها نیاز است؟

موارد زیر را "سنگین" در نظر بگیرید برای حلقهکه یک میلیارد بار اجرا می شود:

تابع SomeHeavyFunction () (برای (i = 0; i< 1000000000; i++) { x = i + x; } }

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

در نتیجه، همانطور که در شکل زیر نشان داده شده است، این می تواند منجر به مسدود شدن مرورگر و پیام خطا شود:

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

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

محدودیت های رشته Web Worker چیست؟

رشته های وب کارگر نمی توانند تغییر کنند عناصر HTML، جهانی ها و برخی از ویژگی های پنجره مانند window.location. می توانید از انواع استفاده کنید داده های جاوا اسکریپت، XMLHttpRequest تماس ها و موارد دیگر.

بنابراین چگونه می توان یک وب کارگر در جاوا اسکریپت ایجاد کرد؟

برای ایجاد یک وب کارگر، باید نام فایل جاوا اسکریپت را به سازنده Worker ارسال کنیم.

var worker = کارگر جدید ("MyHeavyProcess.js");

برای ارسال پیام به وب‌کارگر می‌توانید از روش «postMessage» مانند کد زیر استفاده کنید:

worker.postMessage ();

وقتی وب‌کارگر پیامی را ارسال می‌کند، می‌توانیم آن را با استفاده از رویداد "onmessage" بر روی تماس‌گیرنده دریافت کنیم.

worker.onmessage = تابع (e) (document.getElementById ("txt1"). value = e.data;);

چرخه سنگین قرار می گیرد فایل جاوا اسکریپت"MyHeavyProcess.js"، کد آن در زیر آمده است.

هنگامی که این کد می خواهد پیامی ارسال کند، از روش "postMessage" استفاده می کند و هر پیامی که از تماس گیرنده دریافت می شود با استفاده از رویداد "onmessage" دریافت می شود:

var x = 0 self.onmessage = تابع (e) (برای (i = 0; i< 1000000000; i++) { x = i + x; } self.postMessage(x); };

چگونه یک شی وب کارگر را از بین ببرم؟

چرا HTML 5 رویدادهای ارسال شده توسط سرور را معرفی کرد؟

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

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

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

ابتدا مرورگر باید با منبع موجود در سرور تماس بگیرد که به روز رسانی ها را ارسال می کند. فرض کنید یک صفحه "stock.aspx" داریم که به روز رسانی قیمت ها را ارسال می کند.

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

var source = New EventSource ("stock.aspx");

همچنین باید تابعی را متصل کنیم که هنگام ارسال به‌روزرسانی‌ها، پیام‌ها را دریافت کند. برای انجام این کار، همانطور که در کد زیر نشان داده شده است، باید یک تابع را به رویداد "onmessage" متصل کنیم:

source.onmessage = تابع (رویداد) (document.getElementById ("نتیجه"). innerHTML + = event.data + "
"; };

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

برای مثال، اگر بخواهیم داده ارسال کنیم، در زیر کد ASP.NET برای این کار آمده است. لطفاً توجه داشته باشید که هدر "ContentType" روی "text / event-stream" تنظیم شده است:

Response.ContentType = "متن / جریان رویداد"; Response.Expires = -1; Response.Write ("data:" + DateTime.Now.ToString ()); Response.Flush ();

برای اینکه از مشتری بخواهید بعد از 10 ثانیه درخواست را دوباره امتحان کند.

Response.Write ("تلاش مجدد: 10000");

اگر می خواهید یک کنترل کننده رویداد سمت سرویس گیرنده را متصل کنید، از روش "addEventListener" مانند شکل زیر استفاده کنید.

source.addEventListener ("پیام"، تابع (e) (console.log (e.data);)، false);

پیام سرور بعدی تماس خواهد گرفت تابع جاوا اسکریپت"پیام":

رویداد: داده پیام: سلام

مفهوم ذخیره سازی محلی در HTML 5 را توضیح دهید

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

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

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

چگونه می توانیم داده ها را از حافظه محلی اضافه و حذف کنیم؟

داده ها با استفاده از یک جفت کلید-مقدار به حافظه محلی اضافه و از آن حذف می شوند. در زیر نمونه ای از کد اضافه کردن کشور "India" با کلید "Key001" آورده شده است:

localStorage.setItem ("Key001"، "India");

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

var country = localStorage.getItem ("Key001");

همچنین می توانید ذخیره کنید اشیاء جاوا اسکریپتمانند زیر:

var کشور = (); country.name = "هند"؛ country.code = “I001”; localStorage.setItem ("I001"، کشور)؛ var country1 = localStorage.getItem ("I001");

اگر می خواهید داده ها را در قالب JSON ذخیره کنید، می توانید از تابع "JSON.stringify" استفاده کنید:

localStorage.setItem ("I001"، JSON.stringify (کشور));

طول عمر ذخیره سازی محلی چقدر است؟

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

تفاوت بین ذخیره سازی محلی و کوکی ها چیست؟

	بیسکویت ها	ذخیره سازی محلی
سمت مشتری / سمت سرور	داده ها هم در سمت مشتری و هم در سمت سرور در دسترس هستند. در هر درخواست کوکی ها به سرور ارسال می شود	داده ها فقط در سمت مرورگر مشتری در دسترس هستند. سرور نمی تواند به داده های ذخیره سازی محلی دسترسی داشته باشد تا زمانی که به سرور ارسال شود به روش POSTیا GET
اندازه	4095 بایت برای هر کوکی	5 مگابایت برای هر دامنه
دوره ذخیره سازی	کوکی ها ماندگاری دارند. پس از اتمام این مدت، کوکی ها حذف می شوند.	ماندگاری ندارد. داده ها ذخیره می شوند تا زمانی که کاربر آن را از مرورگر خود حذف کند یا شما آن را با استفاده از کد جاوا اسکریپت حذف کنید.

ذخیره سازی جلسه چیست و چگونه می توانم آن را ایجاد کنم؟

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

برای ایجاد یک فروشگاه جلسه، باید از ساختار "sessionStorage.variablename" استفاده کنید. در کد زیر متغیر «clickcount» را ایجاد می کنیم.

اگر صفحه را در مرورگر خود به روز کنید، شمارنده افزایش می یابد. اما اگر مرورگر را ببندید و دوباره باز کنید، متغیر "clickcount" دوباره صفر می شود:

if (sessionStorage.clickcount) (sessionStorage.clickcount = شماره (sessionStorage.clickcount) +1;) other (sessionStorage.clickcount = 0;)

تفاوت بین ذخیره سازی جلسه و ذخیره سازی محلی چیست؟

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

WebSQL چیست؟

WebSQL است پایه رابطه ایداده، در سمت مرورگر مشتری اجرا می شود. در داخل مرورگر یک DBMS رابطه ای وجود دارد که در آن می توانید پرس و جوهای SQL را اجرا کنید.

آیا WebSQL بخشی از مشخصات HTML 5 است؟

خیر بسیاری از مردم از آن به عنوان HTML 5 یاد می کنند، اما WebSQL بخشی از مشخصات HTML 5 نیست. مشخصات بر اساس SQLite است.

بنابراین چگونه می توانید از WebSQL استفاده کنید؟

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

var db = openDatabase ("dbCustomer"، "1.0"، "Customer app"، 2 * 1024 * 1024);

با فراخوانی متد "executeSql" در داخل آن، می توانید پرس و جوها را با استفاده از تابع "transaction" اجرا کنید:

db.transaction (تابع (tx) (tx.executeSql ("ایجاد جدول در صورت عدم وجود tblCust (شناسه منحصر به فرد، نام مشتری)")؛ tx.executeSql ("InSERT INTO tblcust (ID، نام مشتری) VALUES (1"، shiv ") ")؛ tx.executeSql (" INSERT INTO tblcust (ID، نام مشتری) VALUES (2، "raju") ");)

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

db.transaction (تابع (tx) (tx.executeSql ("SELECT * FROM tblcust"، تابع (tx، نتایج) (برای (i = 0; i< len; i++) { msg = "

"+ results.rows.item (i) .log +"

"; document.querySelector (" # مشتری) .innerHTML + = msg; ))، خالی)؛ ))؛

کش برنامه HTML5 چیست؟

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

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

پس چگونه کش برنامه را در HTML 5 پیاده سازی کنیم؟

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

CACHE MANIFEST # نسخه 1.0 CACHE: Login.aspx

همه فایل های "مانیفست" با خط CACHE MANIFEST شروع می شوند.
# (هش تگ) به نشان دادن نسخه فایل کش کمک می کند.
دستور CACHE تعیین می کند که کدام فایل ها باید ذخیره شوند.
هدر "ContentType" فایل باید "text / cache-manifest" باشد.

در زیر مانیفست کش استنباط شده با استفاده از ASP.NET C # است:

Response.ContentType = "text / cache-manifest"; Response.Write ("CACHE MANIFEST n"); Response.Write ("# 2012-02-21 v1.0.0 n"); Response.Write ("CACHE: n"); Response.Write ("Login.aspx n"); Response.Flush (); Response.End ();

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

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

چگونه حافظه پنهان برنامه مرورگر خود را به روز کنم؟

همانطور که در کد زیر نشان داده شده است، زمانی که شماره نسخه مشخص شده پس از تگ "#" تغییر کند، حافظه پنهان برنامه به روز می شود:

CACHE MANIFEST # نسخه 2.0 (جدید) حافظه پنهان: Login.aspx Aboutus.aspx NETWORK: Pages.aspx

بازگشتی در حافظه پنهان برنامه چیست؟

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

به عنوان مثال، در مانیفست زیر، می گوییم که اگر زمانی که سرور در دسترس نیست، شخصی به "/ home" برود، صفحه "homeoffline.html" باید برگردانده شود:

بازگشت: / خانه / /homeoffline.html

شبکه در کش برنامه چیست؟

دستور شبکه فایل هایی را تعریف می کند که نباید کش شوند. به عنوان مثال، کد زیر می گوید که صفحه "home.aspx" هرگز نباید کش شود و نباید به صورت آفلاین به آن دسترسی داشت:

شبکه: home.aspx

این نشریه ترجمه ای است از مقاله " 40 سوال مهم HTML 5 مصاحبه همراه با پاسخ"تهیه شده توسط تیم پروژه دوستانه

خوب بد

آخرین به روز رسانی: 08.04.2016

HTML (HyperText Markup Language) یک زبان نشانه گذاری فرامتن است که عمدتاً برای ایجاد اسناد در اینترنت استفاده می شود. HTML سفر خود را در اوایل دهه 90 به عنوان یک زبان ابتدایی برای ایجاد صفحات وب آغاز کرد در حال حاضرتصور اینترنت بدون HTML سخت است. اکثریت قریب به اتفاق سایت ها از HTML به هر طریقی استفاده می کنند.

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

HTML5 دقیقا چه چیزی آورده است؟

HTML5 تعریف می کند الگوریتم جدیدتجزیه برای ایجاد ساختار DOM

اضافه کردن عناصر و برچسب‌های جدید، مانند ویدئو، صدا و تعدادی دیگر

قوانین اصلی و معنایی عناصر HTML موجود

در واقع، با افزودن ویژگی‌های جدید، HTML5 نه تنها به نسخه جدیدی از زبان نشانه‌گذاری برای ایجاد صفحات وب، بلکه در واقع به پلتفرمی برای ایجاد برنامه‌های کاربردی تبدیل شده است و استفاده از آن بسیار فراتر از محیط وب اینترنت است: HTML5. همچنین برای ایجاد برنامه های تلفن همراه برای اندروید استفاده می شود. iOS، ویندوز موبایلو حتی برای ایجاد برنامه های دسکتاپ برای رایانه های معمولی (به ویژه در ویندوز 8 / 8.1 / 10).

در نتیجه، به عنوان یک قاعده، HTML 5 عمدتا به دو معنی استفاده می شود:

HTML 5 به‌عنوان یک زبان نشانه‌گذاری فرامتن به‌روز شده، توسعه‌ای از نسخه قبلی HTML 4

HTML 5 به عنوان یک پلت فرم قدرتمند برای ایجاد برنامه های کاربردی وب، که نه تنها خود زبان نشانه گذاری فرامتن، HTML به روز شده، بلکه زبان را نیز شامل می شود. برنامه نویسی جاوا اسکریپتو جداول آبشاری سبک های CSS 3.

چه کسی مسئول توسعه HTML5 است؟ این کار توسط World انجام می شود وب گستردهکنسرسیوم (مخفف W3C - Consortium وب جهانی) یک سازمان بین المللی مستقل است که استاندارد HTML5 را در قالب مشخصات تعریف می کند. مشخصات کامل فعلی به زبان انگلیسی را می توان در https://www.w3.org/TR/html5/ مشاهده کرد. و لازم به ذکر است که سازمان به کار بر روی HTML5 ادامه می دهد و به روز رسانی هایی را برای مشخصات منتشر می کند.

پشتیبانی از مرورگر

لازم به ذکر است که همیشه بین مشخصات HTML5 و استفاده از این فناوری در مرورگرهای وب فاصله وجود داشته است. اکثر مرورگرها شروع به پذیرش استانداردهای HTML5 حتی قبل از انتشار رسمی کردند. و در حال حاضر، اکثر آخرین نسخه های مرورگر از اکثر عملکردهای HTML5 پشتیبانی می کنند (Google Chrome، Firefox، Opera، Internet Explorer 11، Microsoft Edge). در عین حال، بسیاری از مرورگرهای قدیمی، مانند اینترنت اکسپلورر 8 و نسخه های پایین تر، از استانداردها پشتیبانی نمی کنند و IE 9، 10 فقط تا حدی از آن پشتیبانی می کند.

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

برای بررسی پشتیبانی HTML5 برای یک مرورگر خاص، می توانید از سرویس ویژه http://html5test.com استفاده کنید.

ابزار مورد نیاز

برای کار با HTML5 چه چیزی لازم است؟ اول از همه، ویرایشگر متنبرای تایپ متن صفحات وب در html. در این لحظهمحبوب ترین و پیشرفته ترین ویرایشگر متن Notepad ++ است که می توانید آن را در http://notepad-plus-plus.org/ پیدا کنید. از مزایای آن می توان به نور پس زمینه رایگان اشاره کرد تگ های html... در آینده روی این ویرایشگر متن تمرکز خواهم کرد.

همچنین قابل ذکر است ویرایشگر متن چند پلتفرمی Visual Studio Code. این ویرایشگر چندین مورد دارد فرصت های بزرگاز Notepad ++، و علاوه بر این، می تواند نه تنها در ویندوز، بلکه در macOS و in نیز کار کند سیستم های عامل ah مبتنی بر لینوکس.

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

>> HTML5 چیست

HTML5 چیست و چرا مد روز شده است؟

سلام خوانندگان عزیز!

V سال های گذشتهکاربر اینترنت محدود به یک کاربر نیست کامپیوتر رومیزی... تقریباً همه یک گوشی هوشمند یا تبلت دارند.

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

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

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

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

زبان جدید HTML5 چند سیستمی و متقابل مرورگر خواهد بود. سایت‌هایی که با فناوری HTML5 ایجاد شده‌اند، به همان اندازه روی دسک‌تاپ، تبلت یا گوشی هوشمند قابل خواندن خواهند بود. در هر سیستم عامل محبوب: Windows، iOS، Mac OS، Android، Windows Mobile، Linux و هر چیز دیگری که وجود دارد.

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

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

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

HTML5 HTML معمولی، CSS، XHTML، DHTML، Ajax را ترکیب می کند. برخی از برچسب های منسوخ شده برای کاهش وزن صفحه و افزایش سرعت بارگذاری حذف می شوند. تعدادی تگ جدید اضافه شده است که داخل نبودند نسخه های قبلی HTML. به طور گسترده تر قول می دهد که بسیار محبوب ارائه شود موتورهای جستجونشانه گذاری معنایی

همانطور که اینترنت روز به روز بیشتر می شود، HTML5 باید کاملاً با آن سازگار باشد کنترل لمسیدر تبلت ها و گوشی های هوشمند

کنسرسیوم C3W این بار تصمیم گرفت تمام گره های گوردین را به یکباره قطع کند و تمام مشکلات و ناهماهنگی هایی را که در طول سال ها وجود اینترنت انباشته شده است، حل کند. متأسفانه، کار توسعه تا حدودی به تعویق افتاد. در ابتدای سال 2014، کار هنوز ادامه دارد و اعلامیه مدت‌ها منتظر عرضه نهایی محصول نهایی HTML5 هنوز وجود ندارد.

این همه برای من است.

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

با احترام، ویتالی شماتوف!