برچسب ها و ویژگی های HTML، اعتبار سنجی W3C چیست. ساختار و قوانین نوشتن تگ ها

24.06.2019 در تماس با

XML برای استفاده عمومی است، کاراکترها به مجموعه کاراکترهای ASCII 7 بیتی محدود نمی شوند. کاراکترهای مجاز در XML عبارتند از سه کاراکتر کنترلی ASCII CO، همه کاراکترهای معمولی استاندارد ASCII و تقریباً همه کاراکترهای دیگر یونیکد.

نام ها

در XML، همه نام‌ها باید با یک حرف، زیرخط (_) یا دو نقطه (:) شروع شوند و فقط با کاراکترهایی ادامه دهند که برای نام‌ها معتبر هستند، یعنی فقط می‌توانند شامل حروف موجود در بخش حروف یونیکد، اعداد عربی، خط فاصله، علائم زیرخط، پریود و کولون. با این حال، نام ها در هر صورت نمی توانند با یک رشته xml شروع شوند. نام هایی که با این کاراکترها شروع می شوند برای استفاده توسط W3C محفوظ هستند. باید به خاطر داشت که از آنجایی که حروف منحصراً به کاراکترهای ASCII محدود نمی شوند، می توان از کلمات زبان مادری در نام ها استفاده کرد.

ساختار سند XML

هر سند XML از بخش های زیر تشکیل شده است:

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

بیایید هر یک از بخش ها را با جزئیات بیشتری در نظر بگیریم.

پیش درآمد یک سند XML.

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

مقدمه شامل چند بخش است:

یک اعلامیه XML اختیاری که بین کاراکترها محصور شده است... آگهی حاوی:
- تگ xml و شماره نسخه (نسخه) مشخصات XML.
- نشانه ای از رمزگذاری کاراکتر (رمزگذاری) که در آن سند نوشته شده است (به طور پیش فرض رمزگذاری = "UTF-8").
- یک پارامتر مستقل که می تواند "بله" یا "خیر" باشد (به طور پیش فرض مستقل = "بله"). مقدار "بله" نشان می دهد که سند حاوی تمام اعلان های عنصر مورد نیاز است و "خیر" نشان می دهد که DTD های خارجی مورد نیاز است.
همه اینها با هم ممکن است به این شکل باشد:

.

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

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

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

بدنه سند XML.

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

نام عنصر ریشه به عنوان نام کل سند در نظر گرفته می شود و در قسمت دوم مقدمه بعد از کلمه Doctype نشان داده شده است. اگر تعریف DTD داخل یک سند XML باشد، پس از نام عنصر ریشه در براکت مربع قرار می گیرد:

با این حال، معمولاً یک DTD برای چندین سند XML به طور همزمان نوشته می شود. در این مورد، راحت است که آن را جدا از سند بنویسید، و سپس به جای کروشه، یکی از کلمات System یا Public نوشته می شود و به دنبال آن آدرسی به شکل URI (شناسه منبع یکسان) یک فایل با تعریف DTD. برای تمام اهداف عملی، یک URI معادل یک URL در نظر گرفته می شود، اگرچه در اصل می تواند هر نام منحصر به فردی باشد. برای مثال یک تعریف DTD ممکن است به شکل زیر باشد:

فضاهای نام XML

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

در ادامه، نام تگ‌ها و ویژگی‌هایی که می‌خواهیم به فضای نام «http: // URI_namespace» ارجاع دهیم با ns پیشوند می‌شوند، برای مثال:

نووسیبیرسک.

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

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

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

تگ HTML چیست، انواع تگ های HTML، نمونه هایی از نوشتن

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

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

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

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

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

این متن به صورت پررنگ خواهد بود

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

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

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

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

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

متن

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

متن

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

متن

شما قبلاً مشاهده کرده اید که چگونه ویژگی ها نوشته می شوند. آنها همچنین در تگ های دیگر نوشته می شوند: ابتدا خود ویژگی (در این مورد اندازه) را می نویسیم، سپس "=" را می گذاریم و پارامتر ویژگی را در دو گیومه قرار می دهیم. شما می توانید تمام پارامترهای ویژگی را در همان وب سایت کنسرسیوم وب جهانی بیابید.

اعتبار سنجی W3C، قوانین املایی و لیست برچسب چیست؟

همانطور که نوشتم، تعداد زیادی برچسب وجود دارد. اما کجا می توانید همه آنها را پیدا کنید؟ برای این منظور وجود دارد اعتبار سنجی W3C W3C - کنسرسیوم وب جهانی،و به زبان روسی - کنسرسیوم وب جهانی. کاملاً واضح نیست، درست است؟ اینجا جایی است که استانداردهای وب توسعه می‌یابند - (زبان‌های نشانه‌گذاری فرامتن زاییده ذهن آنهاست). در رأس کل کنسرسیوم، که از آخرین مقاله شناخته شد، تیم برنرز لی - خالق HTML است. سایت این سازمان w3.org است. من به شما هشدار می دهم، سایت کاملاً انگلیسی است، بنابراین یک فرهنگ لغت یا مترجم در مرورگر خود تهیه کنید. به هر حال، گوگل برای این سایت 9 است و - 37000 (اگر کسی نمی داند این همه زیاد است).

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

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

در ستون اول - نام- نام خود برچسب - چه چیزی باید در براکت های زاویه ای باشد (< и >).
ستون دوم است برچسب شروع- وجود یک برچسب باز کننده. در این ستون می توانید حرف "O" را ببینید که به معنای "اختیاری" است و در ترجمه از انگلیسی - اختیاری است. این حرف فقط در مقابل تگ ها وجود دارد , , و و به این معنی است که می توانید تگ افتتاحیه را قرار دهید یا نمی توانید آن را قرار دهید - مرورگر همه چیز را به تنهایی انجام می دهد.
ستون سوم است تگ پایان- وجود یک برچسب بسته شدن. در مقابل این تگ می توانید هم حرف "O" و هم حرف "F" را ببینید. ارزش اولی تغییر نکرده است. حرف دوم - "F" - به معنای واقعی کلمه "ممنوع" از انگلیسی - به این معنی است که قرار دادن برچسب بسته شدن ممنوع است، به سادگی وجود ندارد. به عنوان مثال، هیچ برچسبی وجود ندارد، زیرا چیزی برای بستن در آن وجود ندارد.
چهارم - خالی- یعنی تگ تک (خالی) است. تمام تگ هایی که در مقابل آنها حرف "E" در این ستون وجود دارد، در ستون قبلی نیز حرف "F" وجود دارد. به هر حال، تگ های منفرد تگ های بسته شدنی ندارند. یک مثال همان تگ است .
ستون پنجم است دیپر.یا منسوخ- از انگلیسی "توصیه نمی شود". اگر این ستون حاوی حرف "D" است (که دقیقاً همان حرف است)، پس این تگ برای استفاده در HTML توصیه نمی شود. با نگاهی به آینده، امروز ما از Cascading Style Sheets - CSS - برای استایل دادن به متن و ظاهر کل سایت و سند HTML استفاده می کنیم. به طور خلاصه و ساده، یک فایل منفرد ایجاد می شود که در آن تمام پارامترهای متنی که می توان با ویژگی های برچسب خاصی فراخوانی کرد، نوشته شده است. بنابراین، این تابع فقط در سایت ها استفاده می شود، زیرا هنگام ارسال اخبار از طریق پست یا RSS، CSS قابل استفاده نیست. و در اینجا همین تگ ها به کمک می آیند. به هر حال، بیشتر این برچسب ها مربوط به طراحی متن هستند ( و نمونه هستند)

ستون ششم - DTD- می تواند یک حرف داشته باشد "L"یا "اف"... اولی است "L" - DTD شل- به این معنی است که برچسب مقابل این حرف فقط در نوع سند گذرا قابل استفاده است (- انتقالی که در مقاله قبلی در مورد آن نوشتم). دوم این است "اف" — مجموعه فریم DTD- به این معنی است که برچسب فقط در سندی مانند FRAMESET (- مجموعه قاب). اگر حرف از دست رفته باشد، برچسب را می توان در همه انواع اسناد استفاده کرد.

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

ویژگی‌ها را می‌توان در همان صفحه مشخصات HTML 4.01، اما در برگه «ویژگی‌ها» یافت. ویژگی های بسیار بیشتری نسبت به برچسب ها وجود دارد. و دوباره همه چیز را نقطه به نقطه می نویسم.

ستون اول است نام- همانطور که در مورد برچسب ها - نام ویژگی. همه چیز به زبان انگلیسی است، اما با دانش اولیه می توانید حدس بزنید که این یا آن ویژگی چه می کند.
ستون دوم - عناصر مرتبطلیستی از تمام برچسب هایی است که از یک ویژگی استفاده می کنند. همه برچسب‌ها به هم مرتبط هستند، بنابراین می‌توانید مستقیماً به اطلاعات برچسب بروید.
ستون سوم - تایپ کنیدآیا همه مقادیر ممکن برای یک ویژگی خاص هستند. به عنوان مثال، در مقابل ویژگی اندازه ای که در تگ Font انتخاب کرده ایم، مقدار CDATA قرار دارد. ما بعداً به آن نگاه خواهیم کرد، اما به طور خلاصه، این مجموعه خاصی از گزینه های اندازه است (در این مورد). پس از همه، شما می توانید هم پیکسل و هم درصد بنویسید.
ستون چهارم - پیش فرض- به این معنی است که آیا ویژگی در یک برچسب خاص مورد نیاز است یا خیر. به عنوان مثال، در تگ Img، ویژگی src مورد نیاز است، زیرا منبعی را که باید از آن عکس بگیرید را نشان می دهد.
ستون های 6، 7 و 8 به همان معنی برچسب ها هستند.

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

ایجاد فایل html - سند HTML

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

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

بنابراین، ما فقط باید باز کنیم Notepad ++و یک فایل را با متن آزاد (می توانید آن را هم خالی کنید) اما با فرمت html ذخیره کنید. برای انجام این کار، طبق معمول، روی برچسب فایل کلیک کنید، سپس "ذخیره به عنوان" و جستجو در لیست بزرگ پسوندها فایل زبان نشانه گذاری HyperText(پسوند فایل) ". این، در واقع، تمام است. اولین خطوط را در مقاله بعدی از عنوان "ایجاد وب سایت از ابتدا" به این فایل اضافه می کنیم.

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

برچسب ها چیست؟

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

<Открывающий_тег>محتوا متن قرار داده شده در داخل این تگ ها پررنگ می شود

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

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

هر تگ شامل موارد زیر است:

براکت زاویه باز ( < ).
کلمه خاص (نام برچسب). برای مثال، ساعت, iframe,ب.
براکت زاویه بسته ( > ).

تگ های اصلی HTML

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

- یک برچسب واحد، که در داخل آن نظر قرار می گیرد. یک نظرمتنی است که توسط مرورگر ارائه نمی شود. شما می توانید هر چیزی را در داخل برچسب بنویسید، حتی تگ های دیگر - آنها کار نمی کنند، روی صفحه نمایش داده نمی شوند. توسعه‌دهندگان روی کد نظر می‌دهند تا درک آن برای سایر وب‌مسترها آسان‌تر شود، یا پس از مدت‌ها، خودشان بتوانند به سرعت آن را درک کنند.
, , , , </b>- برچسب هایی که باید در هر سند HTML مناسبی وجود داشته باشد (برای جزئیات بیشتر به "نحوه ایجاد یک وب سایت در Notepad" مراجعه کنید).</li> <li><b><meta> </b>- برچسب حاوی اطلاعات کمکی برای مرورگرها و موتورهای جستجو است. در داخل آن می توانید کلمات کلیدی، توضیحات صفحه، رمزگذاری سند، نام نویسنده و غیره را بنویسید.</li> <li><b><script> </b> содержит ссылку на файл сценария или сам код.</li> <li><b><style> </b> - тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов <b><style> </b>, определяющих разные стили разных частей страницы.</li> <li><b><header> </b> - полная противоположность <b><footer> </b>, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.</li> <li><b><footer> </b> хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.</li> <li><b><main> </b> содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри <b><main> </b> должна располагаться как раз эта статья.</li> <li><b><a> </b> предназначен для создания ссылок. Ссылки - корень гипертекста, поэтому им посвящена .</li> <li><b><img> </b> нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу ).</li> <li><b><blockquote> </b>, <b><br> </b>, <b><hi1>-<hi6> </b>, <b><hr> </b>, <b><i> </b>, <b><p> </b>, <b><s> </b>, <b><strong> </b>, <b><ins> </b> и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML» .</li> <li><b><div> </b> - блочный элемент. Текст внутри <b><div></div> </b> форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).</li> <li><b><span> </b>. У вас есть абзац <b><p> </b> или блок <b><div> </b>. Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег <span>.</li> <li><b><ol> </b>, <b><ul> </b>, <b><li> </b> - теги списков. Маркированные, нумерованные - работа этих тегов. Есть ещё списки определений, за которые отвечают теги <b><dd> </b>, <b><dt> </b> и <b><dl> </b>, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков» .</li> <li><b><table> </b>, <b><tbody> </b>, <b><thead> </b>, <b><td> </b>, <b><th> </b> и <b><tr> </b> используются при создании таблиц и подробно рассматриваются в отдельной статье .</li> <li><b><form> </b> - тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри <b><form></form> </b> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий - всё это элементы формы, код которых размещается внутри контейнера <b><form> </b>.</li> <li><b><button> </b> - тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами <b><form></form> </b>).</li> <li><b><input> </b> создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер <b><form> </b>. Но зачем нам тогда отдельно <b><button> </b>, если есть универсальный <b><input> </b>? <b><button> </b> позволяет создать кнопку с расширенными параметрами. Например, на кнопке <button> можно разместить картинку. На элементе, созданном через <b><input> </b>, такого сделать нельзя.</li> <li><b><menu> </b> и <b><command> </b> - теги создания меню в HTML 5. <b><menu> </b> - это контейнер, внутри которого помещаются элементы <b><command> </b>, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.</li> <li><b><textarea> </b> - ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.</li> </ul> <p>Программист сталкивается с рядом проблем при написании HTML тегов. При работе над большим сайтом программный код разрастается, и вести контроль становится проблематично, программист может не закрыть тег и верстка сайта «уедет» — блок налезает на другой и внешний вид сайта портится.</p> <i> </i><p>Блочная верстка — ад программиста</p><br> На крупном сайте следить за тегами проблематично, особенно если над его разработкой работают несколько программистов. Основатели HTML предупреждают программистов и призывают соблюдать стандарты. Небольшие ошибки в коде нормальны и легко исправимы. Рассмотрим способы проверки HTML кода на ошибки и <b>выявление незакрытых тегов и других элементов </b>. <h2>Определение незакрытых тегов</h2> <p>Как проверить код на незакрытые дивы (<div> ), табличные элементы (<table> / <tr> / <td> ) и другие теги? Простейший способ — текстовый редактор с подсветкой синтаксиса. Скачайте notepad++ поддерживающий десятки языков программирования. Нужные для веб-кодинга HTML, JavsScript, PHP и другие языки он подсвечивает.</p> <p>Проверить обычные HTML элементы не сложно, и если незакрытые теги вставки гиперссылки «<a> » теги форматирования «<b> » / «<h1> » или «<noindex> » можно определить визуально, то с блочными элементами вроде дивов и таблиц это не сработает. Код большой, один див является оберткой другого, при большой вложенности можно перепутать и случайно удалить один элемент и верстка поедет.<br></p><p><img src='https://i1.wp.com/moredez.ru/wp-content/uploads/2017/09/%D0%A0%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%BA%D0%BE%D0%B4%D0%B0-html-%D1%81-%D0%BF%D0%BE%D0%B4%D1%81%D0%B2%D0%B5%D1%82%D0%BA%D0%BE%D0%B9-%D1%81%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81%D0%B0-%D1%87%D0%B5%D1%80%D0%B5%D0%B7-notepad.png' width="100%" loading=lazy loading=lazy></p><br><b>Что бы определить незакрытый тег (html элемент страницы) включаем подсветку в notepad++ </b> <ol><li>1. В меню выбираем «Синтаксис»</li> <li>2. Выбираем нужный язык, в нашем случае HTML</li> <li>3. Номер строки</li> <li>4. Древовидная полоса, позволяющая просматривать внутренности тегов</li> </ol><p>Проверка заключается в закрытии одного дива за другим нажатием на плюсики «+», если тег не закрывается, значит, закрывающегося тега нет. Исследуем код и прописываем недостающий в нужно месте.</p> <p>Определить к какому закрывающемуся тегу относится элемент можно нажатием в редакторе на этот тег. Редактор подсветит открывающейся и относящийся к нему закрывающейся тег. Можно определить ошибку при просмотре, когда закрывающегося элемента не обнаруживается, или он относится к другому элементу, который рушит логику кода.</p> <p>Это простейший способ проверки, требующий ручной работы. Автоматизированных систем нет, только программист может понять, где нужно прописать закрытие дива или таблицы, не нарушив визуального оформления страницы.<br></p><p><img src='https://i2.wp.com/moredez.ru/wp-content/uploads/2017/09/%D0%9F%D1%80%D0%BE%D1%81%D0%BC%D0%BE%D1%82%D1%80-%D0%B8-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%BE%D0%B3%D0%BE-%D0%BA%D0%BE%D0%B4%D0%B0-%D0%B2-%D0%B1%D1%80%D0%B0%D1%83%D0%B7%D0%B5%D1%80%D0%B5.png' width="100%" loading=lazy loading=lazy></p><br> Используйте встроенные отладчики FireBug (FireFox) и инспекторы-исследователи встроенные в браузер. Открыть отладчик (редактор) кода в Opera можно нажатием комбинации «Ctrl-Shift-C» или как показано на рисунке. Правой кнопкой мыши жмем на исследуемом объекте и в контекстом меню жмем «Просмотреть код элемента».<h2>Валидатор HTML: Общий анализ и поиск ошибок в коде</h2> <p>Проверить код на ошибки можно валидатором HTML — W3C.</p> <p>Markup Validation Service (MVS) — Этот валидатор проверяет правильность разметки веб-документов в HTML, XHTML, SMIL, MathML и т.д. Если вы хотите проверить конкретный контент, такой как RSS / Atom-каналы или таблицы стилей CSS, содержимое MobileOK или найти неработающие ссылки, есть другие валидаторы и доступные инструменты. В качестве альтернативы можете попробовать наш валидатор на основе не DTD.</p> <p><img src='https://i2.wp.com/moredez.ru/wp-content/uploads/2017/09/%D0%9F%D1%80%D0%BE%D0%B2%D0%B5%D1%80%D0%BA%D0%B0-%D0%BD%D0%B5%D0%B7%D0%B0%D0%BA%D1%80%D1%8B%D1%82%D1%8B%D1%85-%D1%82%D0%B5%D0%B3%D0%BE%D0%B2-%D0%B8-%D0%B4%D1%80%D1%83%D0%B3%D0%B8%D1%85-%D0%BE%D1%88%D0%B8%D0%B1%D0%BE%D0%BA-%D0%BA%D0%BE%D0%B4%D0%B0-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B.png' width="100%" loading=lazy loading=lazy></p> <p>Сервис позволяет проверить CSS, HTML, XHTML, JS… после анализа сайта сервис выдаст ошибки и метод устранения проблемного участка кода.. Можно исправить, но не обязательно прислушиваться к сервису если ваш сайт нормально отображается и индексируется. Каждый 2 крупный сайт не до конца соблюдает стандарты HTML, проверьте сами.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="post-social-counters-block"> <div style="margin-top: 12px"> <noindex></noindex> </div> </div> </div> </div> <a name="comments"></a> <h3 class="best-theme-posts-title">مقالات مرتبط برتر</h3> <div class="container-fluid"> <div class="best-theme-posts row"> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/fallout-4-izmenenie-vneshnosti-konsol-otlichaetsya-dvizhenie-myshi-po.html"> <div class="img_container"><img src="/uploads/686669656a5df8de6a6f9d463fe60026.jpg" border="0" alt="حرکت های مختلف ماوس به صورت عمودی و افقی" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">حرکت های مختلف ماوس به صورت عمودی و افقی</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/kak-szhat-tekstury-v-fallout-4-ruchnaya-nastroika-grafiki.html"> <div class="img_container"><img src="/uploads/d7c98012600dd0a7e0e0c14fa8d2e1eb.jpg" border="0" alt="نحوه فشرده سازی بافت ها در fallout 4" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">نحوه فشرده سازی بافت ها در fallout 4</span> </a> </div> <div class="theme-post col-sm-4"> <a href="https://bumotors.ru/fa/nizkie-nastroiki-grafiki-fallout-4-ostalos-tolko-ponyat-nuzhnyi-uroven.html"> <div class="img_container"><img src="/uploads/da3d853bd41405e0322c2a1e985df14b.jpg" border="0" alt="تنها برای درک سطح مورد نیاز باقی مانده است" width="320" height="180" / loading=lazy loading=lazy></div> <span class="theme-post-link">تنها برای درک سطح مورد نیاز باقی مانده است</span> </a> </div> </div> </div> </div> <a name="comments"></a> </div> <div class="right-column col-sm-4 col-md-4"> <div class="write"> <span class="tags-title">دسته بندی ها:</span> <ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags"> <li class=""><a href="https://bumotors.ru/fa/category/programs/">برنامه ها</a></li> <li class=""><a href="https://bumotors.ru/fa/category/safety/">ایمنی</a></li> <li class=""><a href="https://bumotors.ru/fa/category/windows-10/">ویندوز 10</a></li> <li class=""><a href="https://bumotors.ru/fa/category/iron/">اهن</a></li> <li class=""><a href="https://bumotors.ru/fa/category/windows-8/">ویندوز 8</a></li> <li class=""><a href="https://bumotors.ru/fa/category/vkontakte/">در تماس با</a></li> <li class=""><a href="https://bumotors.ru/fa/category/errors/">خطاها</a></li> </ul> </div> <div class="banner"> </div> </div> </div> </div> <div style="clear:both"></div> </div> <div class="footer"> <div class="subscribe"> <div class="main-wrapper container"> <div class="row"> <div class="col-sm-8"> </div> <div class="col-sm-4"> <div class="social"> <a href="" class="vk social-ico"></a> <a href="https://facebook.com/" class="fb social-ico"></a> <a href="https://twitter.com/" class="tw social-ico"></a> </div> </div> </div> </div> </div> <div class="info"> <div class="main-wrapper container"> <div class="row"> <span class="footer-info col-xs-12">© 2021 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی</span> </div> </div> </div> </div> </body> </html>