در حال حاضر، اکثر مرورگرها سایت ها را نمایش می دهند و به طور مستقل خطاهای وب مسترها را رمزگشایی و تصحیح می کنند. با این حال، هنگام نوشتن HTML باید مراقب باشید - باید قوانین اعتبار را دنبال کنید، زیرا. چیدمان مناسب برای بهینه سازی سایت شما مهم است و همچنین به کاربران کمک می کند تا وقتی سایت شما را در مرورگرهای قدیمی باز می کنند دیوانه نشوند.
استفاده کنید
عنصردر خط اول هر صفحه HTML قرار دارد. این نسخه از زبان نشانه گذاری که در صفحه استفاده می شود را تعریف می کند. در حال حاضر، توصیه می شود از یک doctype از فرم استفاده کنید- برای هر نسخه از زبان جهانی است.
از ساختار سند مناسب استفاده کنید
برچسب ها ,
, باید همیشه در کد موجود باشد، این باعث می شود صفحه با استانداردها مطابقت داشته باشد و از نمایش صحیح آن اطمینان حاصل کند.
نه به درستی
سلام دنیا! سلام دنیا!
به درستی
سلام دنیا! سلام دنیا!
اطلاعات فنی صفحه را به درستی تعریف کنید
متا تگ ها و سبک ها باید در آن مشخص شوند
، جایی در بدنه صفحه نیست. اسکریپت ها ترجیحاً باید قبل از تگ بسته شدن در پایین صفحه قرار داده شوند.. مزیت این روش این است که قبل از نمایش محتوای صفحه، مرورگر فقط استایل ها را بارگذاری می کند و آخرین بار اسکریپت ها را بارگذاری می کند که به کاربر امکان می دهد محتوای صفحه را سریعتر ببیند.
نه به درستی
سلام دنیا! به درستی
سلام دنیا! از استانداردهای نشانه گذاری پیروی کنید
از عناصر با توجه به معنای آنها استفاده کنید
کد html را برای اعتبار بررسی کنید
از متن جایگزین برای تصاویر استفاده کنید
تصاویر همیشه باید دارای ویژگی alt باشند. مرورگر برای ارائه زمینه تصویر به این ویژگی متکی است. ویژگی alt باید حاوی متنی باشد که در صورت بارگذاری نشدن تصویر نمایش داده می شود.
نه به درستی
به درستی
از استایل ها در نشانه گذاری HTML استفاده نکنید
این باعث ایجاد صفحاتی می شود که بارگذاری آنها بسیار طولانی است و نگهداری آنها دشوار است. تمام استایل ها را در یک سند CSS جداگانه بنویسید. سعی کنید تگ و ویژگی استایل را به حداقل برسانید.
نظرات را بنویسید
کد را کامنت کنید، اما زیاده روی نکنید. نظرات کوتاه و واضح می تواند کمک بزرگی به توسعه دهندگان دیگر باشد و همچنین پس از گذشت مدتی یادآوری مهمی برای شما باشد.
مثال:
صفحه
از نام کلاس های مناسب استفاده کنید
کلاس های css را با توجه به محتوای بلوک نامگذاری کنید، به عنوان مثال: هدر - سرصفحه، پاورقی - پاورقی، منو - منو، محتوا - محتوا. این باعث می شود کد بسیار واضح تر و راحت تر نگهداری شود.
کد بد
آیتم منو 1 آیتم منو 2 آیتم منو 3 کد خوب
قوانین نوشتن CSS
CSS همچنین قوانینی دارد که می توان از آنها پیروی کرد تا کد را ساده، خوانا و به خوبی سازماندهی کند.
سبک های مرورگر را به حالت پیش فرض بازنشانی کنید
آنها می توانند با سبک هایی که ما می خواهیم در واقع اعمال کنیم تداخل داشته باشند. می توانید فایل را برای بازنشانی سبک های پیش فرض مرورگر از اینجا دانلود کنید - reset.css .
از خصوصیات و مقادیر مختصر استفاده کنید
کد بد
padding-top: 5px;
کد خوب
padding: 5px 10px 15px 20px;
انتخابگرها و قوانین را در یک خط جدید مشخص کنید
کد بد
عنصر (نمایش: بلوک؛ موقعیت: نسبی؛ بالشتک: 5px 10px 15px 20px؛)
کد خوب
عنصر(
مقادیر صفر را بدون واحد مشخص کنید
کد بد
بالشتک: 10px 0px;
کد خوب
padding: 10px 0
نظرات را بنویسید
بلوک های اصلی را با نظرات جدا کنید، این خوانایی کد را بهبود می بخشد.
مثال:
/*سرتیتر*/
/*اصلی*/
/*پانویس*/
کد css را از نظر اعتبار بررسی کنید
نتیجه
این دستورالعمل‌ها و قوانین فقط اصول اولیه هستند زیرا زبان‌های HTML و CSS سریعتر تکامل می‌یابند و روش‌های جدیدتری برای نوشتن کد صحیح توسعه می‌یابند. با پیروی از دستورالعمل های ما، مطمئن خواهید شد که کد شما ساده، خوانا و بهینه است. و همچنین 100+ کارما و قدردانی از توسعه دهندگانی که بعد از شما در سایت کار خواهند کرد دریافت کنید.
HTML چیست
شبکه جهانی وب (WWW) از صفحات وب تشکیل شده است که با استفاده از زبان نشانه گذاری فرامتن (HTML) ایجاد می شوند. اگرچه بسیاری از مردم در مورد برنامه نویسی به این زبان صحبت می کنند، HTML به هیچ وجه یک زبان برنامه نویسی به معنای سنتی نیست. HTML یک زبان نشانه گذاری سند است. هنگام توسعه یک سند HTML، یک سند متنی به همان روشی که یک ویرایشگر با مداد قرمز انجام می دهد علامت گذاری می شود. این علائم برای نشان دادن شکل ارائه اطلاعات موجود در سند است.
نمایشگرهای ویژه HTML، که اغلب به عنوان مرورگر نامیده می شوند، برای تفسیر فایل های علامت گذاری شده بر اساس قوانین زبان HTML، قالب بندی آنها به عنوان صفحات وب و نمایش محتوای آنها بر روی صفحه نمایش رایانه کاربر استفاده می شوند. تعداد زیادی برنامه مرورگر توسعه یافته توسط شرکت های مختلف وجود دارد، با این حال، تا به امروز، دو برنامه پیشرو از کل برنامه ها متمایز هستند - Netscape Communicator و Microsoft Internet Explorer.
Netscape Navigator توسط Netscape Communications Corporation توسعه داده شده است. مانند بسیاری از محصولات نرم افزاری، تعدادی نسخه از این برنامه وجود دارد. آخرین نسخه Netscape Communicator در زمان نگارش نسخه 4.7 است. اینترنت اکسپلورر توسط مایکروسافت توسعه یافته است. آخرین نسخه این برنامه 5.0 است.
سایر مرورگرها از نظر محبوبیت بسیار عقب هستند. چند سال پیش، مرورگر نت اسکیپ بر مرورگرها تسلط داشت و بیش از دو سوم کاربران از این مرورگر خاص استفاده می کردند. مایکروسافت با عرضه مرورگر خود تلاش زیادی برای تسخیر این قسمت از بازار انجام داده است. اغلب در رسانه ها
گزارش هایی از جنگ بین مرورگرها بر سر کاربران وجود دارد. اکنون این دو مرورگر از نظر محبوبیت قابل مقایسه هستند. رشد محبوبیت مرورگر مایکروسافت با گنجاندن مرورگر در سیستم عامل ویندوز 98 تسهیل می شود، اما در نهایت انتخاب مرورگر به عهده کاربر است.
مرورگرهای مدرن طیف گسترده ای از قابلیت ها را دارند، اما نکته اصلی برای آنها تفسیر اسناد علامت گذاری شده بر اساس قوانین HTML است. این قوانین محور اصلی این کتاب هستند. در قسمت اول، تنها اصول اساسی ساخت اسناد HTML را در نظر خواهیم گرفت.
برای درک اینکه زبان نشانه گذاری چیست، بیایید روزهای خوب گذشته را به یاد بیاوریم که بسیاری از افراد با ویرایشگرهای متنی مانند WordStar کار می کردند. در آنها، برای برجسته کردن یک عبارت، به عنوان مثال، به صورت پررنگ، علائم خاصی در ابتدا و انتهای آن قرار داده شد (/ B و / b):
/B این متن به صورت پررنگ/b نمایش داده می شود
هنگام خروجی چنین متنی به دستگاه چاپ (ما هنوز در مورد نمایشگرها صحبت نمی کنیم، در آن زمان های دور آنها یا اصلا وجود نداشتند یا نمایشگرهای الفبایی وجود داشتند که اجازه تغییر فونت را نمی دادند)، کاراکترها / در استفاده اجباری از پررنگ استفاده می کردند. فونت تا زمانی که کاراکترهای /b وجود داشته باشد.
HTML دقیقاً به همین صورت عمل می کند. اگر نیاز به برجسته کردن متن روی صفحه به صورت پررنگ وجود دارد، این کار را می توان به همین ترتیب انجام داد:
این متن به صورت پررنگ نمایش داده خواهد شد.
نمادها شامل پررنگ و نمادها می شود خاموشش کن. چنین کاراکترهایی که نمایش متن را کنترل می کنند و در عین حال خود روی صفحه نمایش داده نمی شوند ، در زبان HTML مرسوم است که برچسب ها را فراخوانی کنید (از کلمه انگلیسی برچسب - برچسب ، علامت).
تمام تگ های HTML با کاراکترهای جداکننده (< и >) که بین آن شناسه (نام) تگ نوشته شده است (در مثال ما این در است) و احتمالاً پارامترهای آن. تنها استثناء این قاعده، برچسب‌های نظر با جداکننده‌های پیچیده‌تر هستند (). نام تگ ها و همچنین پارامترهای آنها را می توان در هر صورت نوشت. برای هماهنگی، بیشتر تگ های این کتاب با حروف بزرگ نوشته شده اند.
بیشتر تگ‌های HTML به صورت جفت استفاده می‌شوند، یعنی برای یک تگ خاص، اجازه دهید آن را باز کردن بنامیم، سند دارای یک برچسب بسته شدن مربوطه است. طبق قوانین HTML، تگ پایانی به همان شکلی که شروع می‌شود، نوشته می‌شود، اما قبل از نام تگ با یک کاراکتر / (اسلش جلو) نوشته می‌شود. تنها تفاوت اساسی بین تگ های جفتی این است که تگ های بسته از پارامترها استفاده نمی کنند.
برچسب هایی که به تگ های انتهایی مناسب نیاز دارند، تگ های کانتینری نامیده می شوند. هر چیزی که بین تگ های باز و بسته مربوطه نوشته شود، محتوای تگ ظرف نامیده می شود. گاهی اوقات می توان تگ پایان را حذف کرد. به عنوان مثال، برای برچسبی که داده های یک سلول جدول را توصیف می کند
، مربوط به تگ پایان است همیشه می توان رها کرد انتهای داده های سلول جدول با ظاهر شدن تگ بعدی تشخیص داده می شود
یا تگ انتهای خط جدول.
تعدادی تگ وجود دارد که اغلب نویسندگان سند تگ های پایانی آنها را حذف می کنند. یک مثال می تواند تگ آیتم لیست باشد
یا تگ پاراگراف مرورگرهای مدرن در بسیاری از موارد اگر برخی از برچسب‌های پایانی حذف شوند، اسناد را به درستی قالب‌بندی می‌کنند، اما این روش توصیه نمیشود.
تعدادی از تگ ها اصولاً نیازی به تگ های پایانی ندارند. یک مثال می تواند تگ جاسازی تصویر باشد
قوانین کلی برای تفسیر برچسب ها توسط مرورگرها وجود دارد. برخلاف زبان های برنامه نویسی که در آنها جملات اشتباه منجر به صدور پیام های مناسب در مرحله کامپایل برنامه می شود و نیاز به ویرایش دارند، در HTML مرسوم نیست که به تگ های نادرست پاسخ دهند. یک برچسب غلط املایی یا پارامتر آن باید به سادگی توسط مرورگر نادیده گرفته شود. این یک قانون کلی برای همه مرورگرها است که نه تنها برچسب هایی که اشتباه نوشته شده اند، بلکه برچسب هایی که توسط این نسخه از مرورگر شناسایی نمی شوند را نیز پوشش می دهد. یک مثال می تواند برچسب هایی باشد که برای یک مرورگر خاص و برای دیگری ناشناخته پیشنهاد و اجرا شده است. به عنوان مثال، یک ظرف برچسب <![CDATA[، که برای ارائه اطلاعات جایگزین برای مرورگرهایی که از ساختارهای فریم پشتیبانی نمی کنند استفاده می شود، توسط چنین مرورگرهایی شناسایی نخواهد شد. مرورگری که از فریم‌ها پشتیبانی می‌کند، با تگ <NOFRAMES>، از تمام اطلاعات موجود در آن صرفنظر می کند. و مرورگری که با فریم ها آشنایی نداشته باشد، البته تگ را نیز متوجه نخواهد شد. <NOFRAMES>. اما طبق قانون فوق، این تگ به سادگی رد می شود، اما تمام اطلاعات بعدی نمایش داده می شود.</p>
<p>برچسب ها را می توان با پارامترها یا ویژگی ها (از انگلیسی، ویژگی) نوشت. در این کتاب، ما اغلب از اصطلاح پارامتر استفاده خواهیم کرد. مجموعه پارامترهای مجاز برای هر تگ مجزا هستند. قوانین کلی برای نوشتن پارامترها به شرح زیر است. نام تگ را می توان با پارامترهایی دنبال کرد که با فاصله از یکدیگر جدا می شوند. ترتیب پارامترهای برچسب دلخواه است. بسیاری از پارامترها نیاز به تعیین مقادیر خود دارند، با این حال، برخی از پارامترها مقادیری ندارند یا می توان بدون آنها با مقادیر پیش فرض نوشت. اگر پارامتر نیاز به مقدار داشته باشد، پس از نام پارامتر از طریق علامت مساوی نشان داده می شود. مقدار پارامتر را می توان در گیومه یا بدون آنها نوشت. تنها موردی که در آن به نقل قول نیاز است زمانی است که در مقدار پارامتر فاصله وجود داشته باشد. مقادیر پارامتر (بر خلاف نام تگ ها و خود پارامترها) گاهی اوقات به حروف بزرگ و کوچک حساس هستند. در اینجا یک نمونه از ورودی برچسب با پارامترها آورده شده است:</p>
<p><TABLE BORDER ALIGN="left">
</p>
<p>اینجا برای برچسب <TABLE>دو پارامتر داده شده است. اولین پارامتر BORDER بدون مقدار مشخص شده است. پارامتر دوم ALIGN به سمت چپ تنظیم شده است.</p>
<p>در فصل های بعدی از قسمت اول کتاب، هدف از تگ های HTML و پارامترهای آنها شرح داده خواهد شد. به طور کلی، تگ ها می توانند پارامترهای مختلفی داشته باشند، اما تعدادی پارامتر وجود دارد که تقریبا برای همه تگ ها مشترک است. ما در اینجا به پارامترهای کلی تگ ها اشاره می کنیم تا در هنگام توصیف هر تگ دیگر در مورد آنها صحبت نکنیم.</p>
<p>تمام برچسب هایی که می توان در بخش استفاده کرد <BODY>سند HTML می تواند دارای پارامترهای CLASS، ID، LANG، LANGUAGE، STYLE و TITLE باشد. استفاده از این پارامترها، اول از همه، هنگام استایل دادن به اسناد مفید است، که در قسمت دوم کتاب مورد بحث قرار خواهد گرفت.</p>
<p>پارامترهای CLASS، ID، STYLE توسط Internet Explorer 3.0 و بالاتر و Netscape 4.0 و بالاتر پشتیبانی می شوند. این گزینه ها هنگام استفاده از سبک ها مورد نیاز هستند.</p>
<p>پارامترهای LANG، LANGUAGE، TITLE - فقط توسط Internet Explorer از نسخه 4.0 پشتیبانی می شود. این پارامترها به ترتیب زبان مورد استفاده (به عنوان مثال برای روسیه: LANG=ru)، زبان نوشتن اسکریپت ها (به عنوان مثال LANGUAGE = جاوا اسکریپت) و همچنین متن راهنمای ابزار نمایش داده شده در هنگام نگه داشتن اشاره گر ماوس را نشان می دهد. روی این عنصر (TITLE).</p>
<p>در HTML مدرن، علاوه بر برچسب های زبان و محتوای آنها، کدهای اسکریپت (جاوا اسکریپت یا VBScript) نیز در کد منبع HTML نوشته می شود. در قسمت اول کتاب، عملاً در جایی به این موضوع اشاره نشده است، اما قسمت دوم کاملاً به استفاده از فیلمنامه اختصاص دارد.</p>
<p>در پایان یک مرور کلی از HTML، ما متذکر می شویم که ساده ترین اسناد HTML فایل های متنی ساده هستند که با استفاده از هر ویرایشگر متنی قابل مشاهده و ویرایش هستند. این فایل ها معمولا پسوند HTM یا HTML دارند.</p>
<p>مشخصات HTML</p>
<p>HTML در اواسط دهه 1990 با رشد تصاعدی اینترنت محبوبیت پیدا کرد. در این زمان، نیاز به استانداردسازی زبان وجود داشت، زیرا شرکت‌های مختلفی که نرم‌افزاری برای دسترسی به اینترنت توسعه دادند، نرم‌افزار خود را ارائه کردند.</p>
<p>انواع دستورالعمل‌های HTML که تعداد آنها افزایش و افزایش یافت. زمان آن فرا رسیده است که به نوعی توافق مشترک در مورد استفاده از تگ های HTML برسیم.</p>
<p>کار ایجاد مشخصات HTML توسط سازمانی به نام کنسرسیوم وب جهانی (به اختصار W3C) انجام شد. وظیفه او گردآوری مشخصاتی بود که سطح فعلی توسعه ویژگی های زبان را با در نظر گرفتن پیشنهادات مختلف شرکت های مرورگر منعکس می کند. بنابراین، در نوامبر 1995، مشخصات HTML 2.0 ظاهر شد، که برای رسمی کردن تمرین استفاده از HTML که تا پایان سال 1994 توسعه یافته بود، طراحی شد.</p>
<p>طرح تایید مشخصات به شرح زیر است. کنسرسیوم W3C یک پیش نویس مشخصات را منتشر می کند که پس از بحث در مورد آن، به اصطلاح نسخه پیش نویس مشخصات منتشر می شود و آن را برای مدت معینی برای بحث ارائه می دهد. پس از مدتی بحث، مشخصات پیش نویس ممکن است به یک توصیه تبدیل شود، به عنوان مثال، یک نسخه رسمی شناخته شده از مشخصات HTML.</p>
<p>مدت کوتاهی پس از مشخصات 2.0، یک نسخه کاری از مشخصات 3.0 منتشر شد که دوره نظرات آن در سپتامبر 1995 به پایان رسید. این مشخصات هرگز به عنوان یک توصیه رسمی پذیرفته نشد. در نظر گرفته شده بود که طیف گسترده‌ای از برچسب‌ها و ویژگی‌های خاص مرورگر را شامل شود، اما W3C نمی‌توانست مشخصات خوبی برای چنین تعداد زیادی دستورالعمل ایجاد کند.</p>
<p>پس از بررسی های زیاد، پیش نویس HTML 3.2 در می 1996 منتشر شد. این پروژه بر اساس بخشی از برچسب های موجود در نسخه 3.0 بود که نشان دهنده ثبات در عملکرد بود. در سپتامبر 1996، پس از چندین ماه بحث، نسخه 3.2 به عنوان یک مشخصات پیشنهادی و در ژانویه 1997 یک توصیه رسمی تبدیل شد.</p>
<p>جولای 1997 مشخصات پیشنهادی HTML 4.0 را منتشر کرد که در دسامبر 1997 به یک توصیه رسمی تبدیل شد. تا به امروز، این آخرین مشخصات پذیرفته شده است.</p>
<p>در این مرور مختصر از تاریخچه توسعه زبان HTML، به سختی ارزش توصیف جزئیات ویژگی های مشخصات مختلف را دارد، به خصوص که در زندگی واقعی توسعه دهندگان همیشه از توصیه های کنسرسیوم پیروی نمی کنند. اجازه دهید فقط به برخی از ایده‌های زیربنای آخرین مشخصات اشاره کنیم.</p>
<p>در مشخصات HTML 4.0، ایده کلیدی این بود که توضیحات ساختار سند را از توضیحات ارائه آن در صفحه نمایشگر جدا کنید. تجربه نشان داده است که جداسازی ساختار و ارائه یک سند، هزینه های پشتیبانی از طیف گسترده ای از پلتفرم ها، محیط ها و غیره را کاهش می دهد و اصلاح اسناد را آسان می کند. مطابق با این ایده، باید از روش های توصیف بازنمایی استفاده گسترده تری کرد</p>
<p>به جای مشخص کردن داده‌های خاص در مورد شکل ارائه که با محتوای سند در هم آمیخته است، با استفاده از شیوه نامه سند کنید. برای پیاده سازی این ایده، در مشخصات HTML 4.0، تعدادی از تگ های مورد استفاده برای تعیین مستقیم شکل ارائه عناصر HTML منسوخ شده اند. برچسب های لغو شده به این دلیل شامل <CENTER>, <FONT>, <BASEFONT>,
<S>, <STRIKE>, <U>. در میان سایر برچسب های لغو شده، ما توجه می کنیم <ISINDEX>, <APPLET>, <DIR>, <MENU>. به جای تگ های منسوخ شده، پیاده سازی های جایگزینی از ویژگی های مربوطه ارائه شده است که در این کتاب به آنها توجه ویژه ای داریم.</p>
<p>مفهوم تگ منسوخ شده به شرح زیر است. اگر برچسبی در این مشخصات زبان منسوخ نامیده شود، به این معنی است که مرورگرها باید فعلاً از چنین برچسب‌هایی پشتیبانی کنند، اما استفاده از آنها منسوخ شده است. این برچسب ها ممکن است در مشخصات آینده منسوخ شده باشند. برچسب های منسوخ شده ممکن است دیگر توسط مرورگرها پشتیبانی نشوند. در مشخصات HTML 4.0، تنها سه تگ منسوخ شده است:<ХМР>,
<PLAINTEXT>و <LISTING>. اطلاعات مربوط به اینکه کدام یک از برچسب ها در مشخصات گنجانده شده است را می توان از جدول ارائه شده در پیوست P1 به دست آورد.</p>
<p>اطلاعات رسمی در مورد مشخصات HTML همیشه از وب سایت W3C در دسترس است <b>http://www.w3.org/TR/</b>. مشخصات 4.0 در واقع شده است <b>http://www.w3.org/TR/REC-htmI40-971218</b>.
</p>
<p>توجه داشته باشید که منطقاً مشخصات رسمی باید نقش یک نیروی راهنما و راهنما را ایفا کند و اطمینان حاصل کند که اطلاعات به صورت یکسان توسط مرورگرهای مختلف ارائه می شود. این ایده آلی است که باید برای آن تلاش کرد. در واقعیت، همه چیز به خوبی پیش نمی رود. ایده های جدید به طور مداوم در حال ظهور هستند که توسط شرکت های توسعه دهنده در مرورگرهای خود پیاده سازی شده و توسط آنها تبلیغ می شود. ایده های خوب ریشه می گیرند و سپس توسط توسعه دهندگان دیگر انتخاب می شوند. برخی از ویژگی ها برای یک مرورگر خاص باقی می مانند. پیشرفت های موفقیت آمیز در نهایت وارد مشخصات می شوند و به طور کلی پذیرفته می شوند. بنابراین، روند بهبود قابلیت‌های مرورگرها و شفاف‌سازی مشخصات در جریان است و متقابلاً بر یکدیگر تأثیر می‌گذارند.</p>
<p>ساختار سند</p>
<p>اولین برچسبی که شروع به توصیف اسناد HTML می کند، تگ است <HTML>. همیشه باید توضیحات سند را شروع کند و توضیحات سند را با تگ پایان دهد</HTML>. این تگ ها نشان می دهد که خطوط بین آنها یک سند HTML واحد را نشان می دهد. خود سند یک فایل متنی ASCII ساده است. بدون این برچسب ها، مرورگر یا سایر بینندگان ممکن است نتوانند قالب سند را شناسایی کرده و آن را به درستی تفسیر کنند.</p>
<p>رایج ترین برچسب <HTML>بدون پارامتر استفاده می شود. نسخه های قبلی از پارامتر VERSION استفاده می کردند که توسط مشخصات HTML 4.0 منسوخ شده بود. این پارامتر با برچسب جایگزین شده است<!
DOCTYPE>.
</p>
<p>اکثر مرورگرهای مدرن می توانند یک سند را بدون برچسب تشخیص دهند. <HTML>و</HTML>با این حال، استفاده از آنها به شدت توصیه می شود.</p>
<p>بین یک جفت تگ <HTML>و</HTML>خود سند واقع شده است. یک سند می تواند از دو بخش تشکیل شود - یک بخش عنوان (با برچسب شروع می شود <HEAD>) و بخش بدنه سند (با تگ شروع می شود <BODY>). برای اسنادی که ساختارهای قاب را توصیف می کنند، به جای بخش BODY از بخش FRAMESET استفاده می شود (با برچسب <FRAMESET>). در ادامه، قوانین تدوین بخش های HEAD و BODY سند در نظر گرفته می شود. اسناد ساختمانی حاوی قاب در فصل 5 پوشش داده شده است.</p>
<p><b> <span>بخش سند HEAD</span>
</b></p>
<p>بخش HEAD یک سند عنوان آن را تعریف می کند و یک برچسب الزامی نیست، اما یک عنوان خوب می تواند بسیار مفید باشد. هدف از هدر ارائه اطلاعات لازم برای برنامه ای است که سند را تفسیر می کند. برچسب هایی که در داخل بخش HEAD قرار دارند (به جز نام سند که با استفاده از برچسب توضیح داده شده است <TITLE>) روی صفحه نمایش داده نمی شوند.</p>
<p>بخش هدر با تگ باز می شود <HEAD>. معمولاً این تگ بلافاصله پس از تگ می آید <HTML>. برچسب بسته شدن</HEAD>پایان این بخش را نشان می دهد. بین تگ های ذکر شده بقیه تگ های قسمت هدر قرار دارند.</p>
<p><b> <span>نام سند</span>
</b></p>
<p>ظرف برچسب <TITLE>تنها تگ هدر مورد نیاز است و برای دادن عنوان به سند استفاده می شود. معمولاً در نوار عنوان پنجره مرورگر نشان داده می شود. برچسب بزنید <TITLE>نباید با نام فایل سند اشتباه گرفته شود. برعکس، این یک رشته متن کاملا مستقل از نام و مکان فایل است که آن را بسیار مفید می کند. نام فایل دقیقاً توسط سیستم عامل رایانه ای که در آن ذخیره می شود تعیین می شود. همچنین باید بین عنوان سند (با برچسب <TITLE>) از سرفصل های داخل سند که معمولاً با برچسب ها مشخص می شوند <Hx>.
</p>
<p><i> <b>توجه داشته باشید</b>
</i></p>
<p><i> <span>اجباری بودن عنوان سند، به طور کلی، در ماهیت یک توصیه قوی است. سند بدون برچسب <TITLE>همچنین توسط مرورگرها نمایش داده خواهد شد. در همان زمان، مرورگرهای مختلف اطلاعات متفاوتی را به عنوان عنوان پنجره نمایش می دهند. بنابراین نسخه های اولیه مرورگر نت اسکیپ خط "بدون عنوان" را داده بودند. سایر مرورگرها یا چیزی را نشان نمی دهند یا آدرس فایل دانلود شده را نشان می دهند و اطلاعات موجود در نوار مکان مرورگر را بازتاب می دهند.</span>
</i></p>
<p>عنوان سند بین تگ ها نوشته می شود <TITLE>و</TITLE>و یک رشته متن است. در اصل، نام می تواند نامحدود باشد و شامل هر کاراکتری باشد، به جز برخی از موارد رزرو شده. در عمل، باید خود را به یک خط محدود کنید و در نظر داشته باشید که عنوان در نوار عنوان پنجره مرورگر ظاهر می شود. همچنین باید به خاطر داشته باشید که وقتی پنجره مرورگر کوچک شود، چه چیزی از نام سند باقی می ماند. ممکن است توصیه شود که طول عنوان سند را به 60 کاراکتر محدود کنید. در هر شکلی در این کتاب که نمونه ای از نحوه نمایش یک سند را نشان می دهد، می توانید ببینید که چگونه عنوان در پنجره مرورگر نمایش داده می شود.</p>
<p>به طور پیش فرض، متن موجود در عنوان سند هنگام ایجاد نشانک برای سند استفاده می شود. بنابراین برای اطلاعات بیشتر از نام های بدون چهره (صفحه اصلی، فهرست و ...) خودداری کنید. کلماتی مانند این که به عنوان نام نشانک استفاده می شوند معمولاً کاملاً بی فایده هستند. عنوان سند باید به طور خلاصه محتوای آن را توضیح دهد. توجه داشته باشید که هنگام نمایش اسناد با ساختار فریم بر روی صفحه، زمانی که یک سند جداگانه با نام خاص خود در هر یک از فریم ها بارگذاری می شود، تنها نام سند اصلی روی صفحه نمایش قابل مشاهده خواهد بود. با این حال، تعیین عنوان تک تک اسنادی که باید قاب شوند نیز بسیار توصیه می شود. این موضوع در فصل 5 با جزئیات بیشتر مورد بحث قرار گرفته است.</p>
<p>اهمیت عنوان سند با واقعیت زیر مشخص می شود. چون تگ <TITLE>تقریباً در همان ابتدای فایل HTML قرار دارد، سپس پس از شروع بارگیری سند، اول از همه نمایش داده می شود. در مرحله بعد، محتوای اصلی سند بارگیری می شود، در حالی که مرورگر شروع به قالب بندی سند در پنجره می کند. این فرآیند، به طور کلی، بسته به محتوا و ساختار سند، و همچنین سرعت اتصال، ممکن است به تاخیر بیفتد. برای مدت زمان کافی، کاربر یک صفحه خالی را در نظر می گیرد که تنها خط اطلاعاتی آن نام سند خواهد بود. اغلب اوقات (زمانی که اتصال قطع می شود یا اگر کاربر نمی خواهد منتظر دانلود سند بماند)، تمام اطلاعات مربوط به سند در آنجا به پایان می رسد.</p>
<p><b><span>ارتباط با سایر اسناد</span>
</b></p>
<p>اغلب اسناد HTML به هم مرتبط هستند، یعنی پیوندهایی به یکدیگر دارند. پیوندها می توانند مطلق یا نسبی باشند. هر دوی آنها ایراداتی دارند. اگر سند پایین‌تری را در سلسله مراتب جابه‌جا کنید، پیوندهای مطلق می‌توانند بیش از حد دست و پا گیر باشند و کار خود را متوقف کنند. پیوندهای نسبی به راحتی وارد و به روز می شوند، اما اگر سند بالاتر منتقل شود، این پیوند نیز خراب می شود. هر دو نوع پیوند می توانند هنگام انتقال یک سند از یک رایانه به رایانه دیگر شکسته شوند.</p>
<p>اغلب اتفاق می افتد که کاربر یک سند بزرگ را در دستگاه خود دانلود کرده و برای مطالعه دقیق آن از شبکه جدا شده است. همه پیوندهای موجود در نسخه محلی سند کار نمی کنند. برای "احیای" آنها، باید دوباره به سند اصلی واقع در رایانه راه دور بروید.</p>
<p>خوشبختانه، توسعه دهندگان HTML این مشکل را پیش بینی کرده و دو تگ اضافه کرده اند. <BASE>و <LINK>، که در هدر قرار می گیرند تا ارتباط بین اسناد قطع نشود.</p>
<p><b>برچسب بزنید <BASE>
</b>
</p>
<p>برچسب بزنید <BASE>برای تعیین URL پایه کامل سند استفاده می شود. با آن، اگر سند به دایرکتوری دیگری یا حتی به رایانه دیگری منتقل شود، پیوند نسبی به کار خود ادامه می دهد. برچسب بزنید <BASE>شبیه دستور مسیر MS-DOS عمل می کند و به بیننده این امکان را می دهد که پیوند سند مورد نظر شما را تعیین کند، حتی اگر در یک سند با سلسله مراتب بالاتر در رایانه دیگری باشد.</p>
<p>برچسب بزنید <BASE>دارای یک پارامتر HREF مورد نیاز و سپس URL کامل سند است. در زیر نمونه ای از استفاده از تگ آورده شده است <BASE>.
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>تعیین آدرس پایه</TITLE>
</p>
<p><BASE HREF="http://www.my_host.ru/~sergeev">
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><img src='/pravila-postroeniya-html-dokumentov-vlozhennye-pravila.html' loading=lazy loading=lazy>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<p>برچسب بزنید <BASE>به مرورگر می گوید که کجا فایل را جستجو کند. در صورتی که کاربر با یک کپی محلی از فایل کار می کند و دستگاه او از شبکه جدا نمی شود، تصویر نماد News پیدا شده و در پنجره مرورگر نمایش داده می شود.</p>
<p><b>برچسب بزنید <LINK>
</b></p>
<p>حتی اگر برچسب <BASE>به شما امکان می دهد پرونده را پیدا کنید ، سؤال مربوط به رابطه اسناد باز می ماند. اهمیت این روابط متناسب با پیچیدگی اسناد شما افزایش می یابد. به منظور حفظ ارتباط منطقی بین آنها، تگ HTML معرفی شده است <LINK>.
</p>
<p>برچسب بزنید <LINK>رابطه بین سند حاوی تگ داده شده و سند یا شیء دیگر را نشان می دهد. این شامل یک URL و پارامترهایی است که رابطه سند را مشخص می کند. عنوان سند می تواند حاوی هر تعداد تگ باشد <LINK>. Tab. 1.1 پارامترهای برچسب را توصیف می کند <LINK>و کارکردهای آنها</p>
<p><i> <span><b>جدول 1.1.</b>گزینه ها را تگ کنید <LINK>
</span>
</i></p>
<p>بیایید مثال هایی از تگ ارائه دهیم <LINK>با پارامترهای:</p>
<p><LINK REL="contents" HREF ="../toc.html">
</p>
<p><LINK HREF="mailto:sergeev@mail.ifmo.ru"
REV="made">
</p>
<p>خط اول نشان دهنده پیوندی به فایل فهرست مطالب سند (toc.html - فهرست مطالب) با رابطه مستقیم محتویات است. خط دوم پیوند به URL نویسنده سند (با رابطه معکوس ایجاد شده) را توضیح می دهد.</p>
<p>ممکن است روابط مختلفی بین اسناد وجود داشته باشد. نمونه هایی از سایر مقادیر پارامتر REL: نشانک، حق چاپ، واژه نامه، راهنما، صفحه اصلی، فهرست، toc، بعدی، قبلی. پارامتر REV همچنین می تواند مقادیر زیر را بگیرد: نویسنده، ویرایشگر، ناشر، مالک.</p>
<p><b>برچسب بزنید <META>
</b></p>
<p>توسعه مشخصات زبان نشانه گذاری فرامتن جدید زمان زیادی می برد و در این مدت، شرکت های مرورگر زمان دارند تا چندین نسخه از محصولات خود را منتشر کنند. بنابراین می توان یک تگ دیگر را به قسمت هدر اضافه کرد <META>، که به نویسندگان سند اجازه می دهد تا اطلاعات غیر HTML را تعریف کنند.</p>
<p>این اطلاعات توسط مرورگر برای اقداماتی استفاده می شود که توسط مشخصات HTML فعلی پوشش داده نمی شوند. برچسب بزنید <META>برای ایجاد اولین اسناد HTML خود به آن نیاز نخواهید داشت، اما با پیچیده تر شدن صفحات شما قطعاً به آن نیاز خواهید داشت.</p>
<p>مثال:</p>
<p><МЕТА HTTP-EQUIV="refresh" CONTENT="60"
RL="www.my_host.ru/homepage.html">
</p>
<p>Netscape Navigator و Internet Explorer این ورودی را به عنوان دستورالعملی برای صبر 60 ثانیه و سپس بارگذاری یک سند جدید تفسیر می کنند. این دستورالعمل اغلب هنگام تغییر مکان اسناد استفاده می شود. یک سند کوچک با رشته بالا را می توان در محل سند قدیمی گذاشت تا به طور خودکار به مکان جدید آن پیوند داده شود.</p>
<p>خط بعدی:</p>
<p><МЕТА HTTP-EQUIV="refresh" CONTENT="60">
</p>
<p>به مرورگر دستور می دهد که صفحه را هر 60 ثانیه بارگذاری مجدد کند. این می تواند مفید باشد اگر داده های صفحه به طور مکرر به روز شوند، مانند هنگام ردیابی قیمت سهام.</p>
<p>استفاده از عنصر بسیار محبوب شده است <META>برای حل برخی از مشکلات معمولی به عنوان مثال می توان به کلمات کلیدی مورد استفاده موتورهای جستجو اشاره کرد. این روش به شما امکان می دهد کلمات اضافی را در فهرست سند وارد کنید که ممکن است به صراحت در محتوای آن گنجانده نشده باشد. برای انجام این کار، در تگ <META>نام برخی از ویژگی ها به عنوان مقدار پارامتر NAME مشخص می شود. و با استفاده از پارامتر CONTENT مقدار این ویژگی مشخص می شود به عنوان مثال:</p>
<p><МЕТА NAME="author" CONTENT="Александр
Сергеев">
</p>
<p>مشخصات HTML هیچ نام خاصی را برای نوشتن در تگ تعریف نمی کند. <META>. با این حال، چند ویژگی رایج مانند توضیحات، کلمات کلیدی، نویسنده، روبات ها و غیره وجود دارد:</p>
<p><МЕТА NAME="description" CONTENT="Описание
возможностей языка HTML 4.0">
</p>
<p><МЕТА NAME="keywords" CONTENT ="тэг,
гипертекст, HTML, браузер">
</p>
<p>برچسب های داده شده <META>می توان به عنوان مثال برای نسخه الکترونیکی این کتاب اشاره کرد.</p>
<p>برچسب بزنید <META>ممکن است پارامترهای مشخص شده در جدول را داشته باشد. 1.2.</p>
<p><i> <span><b>جدول 1.2.</b>گزینه ها را تگ کنید <META>
</span>
</i></p>
<p>یکی دیگر از اهداف مهم تگ <META>نشانه ای از رمزگذاری متن است. بنابراین، برای متن به زبان روسی در رمزگذاری ویندوز، باید خط زیر را بنویسید:</p>
<p><МЕТА HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=UTF-8">
</p>
<p><b><span>سایر عناصر هدر</span>
</b></p>
<p>دو تگ دیگر را می توان در قسمت سر سند وجود داشت - <STYLE>و<SCRIPT>. Их назначение связано с использованием
таблиц стилей в документе и записью скриптов. Эти вопросы подробно рассматриваются
во второй части книги.
</p>
<p><b> <span> Раздел документа
</span>
<span>BODY
</span>
</b></p>
<p>В этом разделе документа располагается его содержательная
часть. Большинство тэгов, рассматриваемых далее в этой главе и последующих,
должно располагаться в данном разделе документа. Здесь мы рассмотрим лишь некоторые
общие вопросы.
</p>
<p>Раздел документа BODY должен начинаться тэгом <BODY>
и завершаться тэгом </BODY>, между которыми располагается все содержимое
данного раздела. Строго говоря, наличие этих тегов не является обязательным,
поскольку браузеры могут определить начало содержательной части документа по
контексту. Однако их употребление рекомендуется.
</p>
<p>Тэг <BODY> имеет ряд параметров, ни один из которых
не является обязательным. Перечень параметров приведен в табл. 1.3.
</p>
<p><i> <span><b>Таблица 1.3.
</b> Перечень параметров тега <BODY>
</span>
</i></p>
<table border="1" width="550" height="427"><tr><td width="140" height="33"> <p><b>Параметр
</b></p>
</td>
<td width="400" height="33"> <p><b>Назначение
</b></p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>ALINK
</p>
</td>
<td width="400" height="18" valign="top">
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>BACKGROUND
</p>
</td>
<td width="400" height="36" valign="top"> <p>Указывает
на URL-адрес изображения, которое используется в качестве фонового
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>BOTTOMMARGIN
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
границу нижнего поля документа в пикселах
</p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>BGCOLOR
</p>
</td>
<td width="400" height="18" valign="top"> <p>Определяет
цвет фона документа
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>BGPROPERTIES
</p>
</td>
<td width="400" height="36" valign="top"> <p>Если установлено
значение FIXED, фоновое изображение не прокручивается
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>LEFTMARGIN
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
границу левого поля документа в пикселах
</p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>LINK
</p>
</td>
<td width="400" height="18" valign="top"> <p>Определяет
цвет еще не просмотренной ссылки
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>RIGHTMARGIN
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
границу правого поля документа в пикселах
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>SCROLL
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
наличие или отсутствие полос прокрутки окна браузера
</p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>TEXT
</p>
</td>
<td width="400" height="18" valign="top"> <p>Определяет
цвет текста
</p>
</td>
</tr><tr><td width="140" height="36" valign="top"> <p>TOPMARGIN
</p>
</td>
<td width="400" height="36" valign="top"> <p>Устанавливает
границу верхнего поля документа в пикселах
</p>
</td>
</tr><tr><td width="140" height="18" valign="top"> <p>VLINK
</p>
</td>
<td width="400" height="18" valign="top"> <p>Определяет
цвет уже просмотренной ссылки
</p>
</td>
</tr></table><p>Использование параметров BACKGROUND и BGCOLOR, определяющих
фон документа, подробно рассмотрено в .
</p>
<p>Параметр BGPROPERTIES, принимающий единственное значение
FIXED, поддерживается только браузером Microsoft Internet Explorer.
</p>
<p>Параметры BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN и TOPMARGIN,
задающие расстояния в пикселах между краями текста и соответствующими краями
окна, а также параметр SCROLL, распознаются только браузером Microsoft Internet
Explorer, начиная с версии 4.0.
</p>
<p>Параметры ALINK, LINK, TEXT и VLINK определяют цвета ссылок
и текста документа.
</p>
<p>В языке HTML цвета определяются цифрами в шестнадцатеричном
коде. Цветовая система базируется на трех основных цветах - красном, зеленом
и синем - и обозначается RGB. Для каждого цвета задается шестнадцатеричное значение
в пределах от 00 до FF, что соответствует диапазону 0-255 в десятичном исчислении.
Затем эти значения объединяются в одно число, перед которым ставится символ
#. Например, число #800080 обозначает фиолетовый цвет. Чтобы не запоминать совокупности
цифр, вместо них можно пользоваться названиями цветов, которые приводятся в
приложении П2 . Ранние версии браузеров распознавали
только названия 16 стандартных цветов, отмеченных в приложении звездочками.
Современные версии браузеров распознают все 140 названий цветов.
</p>
<p><b><span> Форматирование текста
</span>
</b></p>
<p>В данном разделе будут рассмотрены возможности форматирования
отдельных символов текста документа.
</p>
<p><b> <span> Тэги уровня блока и последовательные
тэги
</span>
</b></p>
<p>Некоторые HTML-тэги, которые могут появляться в разделе
BODY, называют тэгами уровня блока (block level), в то время как другие последовательными
(inline) тэгами или, называя по-другому, тэгами уровня текста (text level),
хотя такое разделение тегов по уровням в известной степени условно.
</p>
<p>Различие уровней HTML-тэгов заключается в следующем: теги
уровня блока могут содержать последовательные теги и другие теги уровня блока,
тогда как последовательные теги содержат только данные и другие последовательные
тэги. Блоковые теги описывают более крупные структуры документов, по сравнению
с последовательными тэгами.
</p>
<p>По умолчанию теги этих видов размещаются в тексте описания
различным образом: теги уровня блока начинаются с новой строки, в то время как
последовательные - нет.
</p>
<p><b> <span> Логическое и физическое форматирование
</span>
</b></p>
<p>Для форматирования текста HTML-документов предусмотрена
целая группа тэгов, которую можно условно разделить на теги логического и физического
форматирования.
</p>
<p>Тэги логического форматирования обозначают (своими именами)
структурные типы своих текстовых фрагментов, такие, например, как программный
код (тэг <CODE>), цитата (тэг <CITE>), аббревиатура (тэг <ABBR>)
и т. д. (см. описания этих и других подобных тегов в следующем разделе). С помощью
тегов <EM> и <STRONG> можно, например, отметить отдельные фрагменты
как выделенные, или сильно выделенные. Заметим, что речь идет о структурной
разметке, которая не влияет на конкретное экранное представление фрагмента браузером.
Поэтому такая разметка и называется логической. Фрагменты с логическим форматированием
браузеры отображают на экране определенным образом, заданным по умолчанию. Вид
отображения никак не связан со структурным типом фрагмента (т. е. именем тега
логического форматирования), но может быть легко переопределен.
</p>
<p>Тэги физического форматирования определяют формат отображения
указанного в них фрагмента текста в окне браузера (согласно предпочтениям автора
документа). Например, для отображения фрагмента курсивом можно использовать
тег курсива <I>. Этот и другие, часто используемые теги физического форматирования
описаны ниже в разделе "Тэги физического форматирования текста"этой
главы.
</p>
<p>Между разработчиками HTML-документов долгое время шли споры
о преимуществах и недостатках того или иного подхода. С выходом спецификации
HTML 4.0 эти споры завершились в пользу применения логического форматирования,
поскольку был провозглашен принцип отделения структуры документа от его представления.
Действительно, только на базе логического форматирования можно гибко управлять
представлением документа, используя современные методы (основанные на таблицах
стилей, динамически изменяющихся документах и т. д.).
</p>
<p>Тем не менее, на настоящий момент может свободно использоваться
и физическое форматирование. В спецификации HTML 4.0 некоторые теги физического
форматирования не рекомендуются для применения, однако, пока они все еще поддерживаются
всеми браузерами. Заметим, что некоторые теги логического форматирования, призванные
заменить отдельные теги физического форматирования, распознаются не всеми браузерами,
что делает их применение крайне неудобным. Примером может служить логический
тег <DEL>, который рекомендуется использовать вместо физического тега
<STRIKE>.
</p>
<p>Рассматриваемые ниже теги относятся к тэгам уровня текста,
т. е. призваны, в основном, размечать небольшие группы символов. Некоторые теги
могут задавать разметку и на уровне блока.
</p>
<p><b> <span> Тэги логического форматирования текста
</span>
</b></p>
<p><b>Тэг <ABBR>
</b>
</p>
<p>Тэг <ABBR> отмечает свой текст как аббревиатуру (ABBReviation).
Несмотря на то, что этот тег включен в спецификацию HTML 4.0, он до настоящего
времени не поддерживается ни одним браузером.
</p>
<p><b>Тэг <ACRONYM>
</b>
</p>
<p>Тэг <ACRONYM>. Так же, как и тег <ABBR>, используется
для отметки аббревиатур. Этим тэгом рекомендуется отмечать так называемые акронимы,
т. е. произносимые слова, состоящие из аббревиатур. Тег <ACRONYM> возможно
в будущем станет использоваться для невизуального отображения элементов, например
при речевом синтезе.
</p>
<p>Данный тег удобно использовать в сочетании с параметром
TITLE, в качестве значения которого можно указать полную форму записи аббревиатуры.
Тогда визуальные браузеры при наведении курсора на текст, размеченный тэгом
<ACRONYM>, будут выдавать полное наименование в виде появляющейся подсказки.
</p>
<p>Заметим, что тег <ACRONYM> распознается только браузером
Microsoft Internet Explorer. Пример:
</p>
<p><ACRONYM TITLE="Санкт-Петербургский государственный
институт точной механики и оптики"> СПбГИТМО</ACRONYM>
</span><span>
- один из ведущих технических вузов Санкт-Петербурга
</p>
<p><b>Тэг <CITE>
</b>
</p>
<p>Тэг <CITE> используется для отметки цитат или названий
книг и статей, ссылок на другие источники и т. д. Браузерами такой текст обычно
выводится курсивом. Пример:
</p>
<p><CITE>Невское время</CITE> является
одной из наиболее популярных городских газет Санкт-Петербурга
</p>
<p><b>Тэг <CODE>
</b>
</p>
<p>Тэг <CODE> отмечает свой текст как небольшой фрагмент
программного кода. Как правило, отображается моноширинным шрифтом. Этот тег
не следует путать с тэгом <PRE>Являющимся элементом уровня блока, который
следует использовать для отметки больших фрагментов (листингов) кода.
</p>
<p>Например:
</p>
<p>Пример простейшего оператора языка программирования
C:<BR>
</p>
<p><CODE>puts("Hello, World!");</CODE>
</p>
<p>Есть еще одно различие в использовании тегов <CODE>
и <PRE>В коде программ часто бывает важно наличие нескольких идущих
подряд пробелов. Их отображение будет сохранено только при использовании тега
<PRE>.
</p>
<p><b> Тэг <DEL>
</b></p>
<p>Тэг <DEL> отмечает свой текст как удаленный. Этот
элемент полезно использовать для отметки изменений, вносимых в документ от версии
к версии. Тег <DEL> может использоваться как элемент уровня текста и как
элемент уровня блока.
</p>
<p>Тэг имеет два необязательных параметра: CITE и DATETIME.
Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего
причины удаления данного фрагмента.
</p>
<p>Параметр DATETIME указывает дату удаления в формате: YYYY-MM-DDThh:mm:ssTZD,
определяющем год, месяц, число, часы, минуты и секунды удаления, а также часовой
пояс (Time Zone). Например:
</p>
<p>Последней принятой спецификацией языка разметки
HTML является версия <DEL DATETIME=1999-10-29T16:12:53+0.00>3.2</DEL>
4.0
</p>
<p>Текст, помеченный тэгом <DEL> обычно отображается
перечеркнутым текстом. В спецификации HTML 4.0 этому тэгу отдается предпочтение
перед тэгом физического форматирования <STRIKE> или <S>, обозначающих
перечеркнутый текст. Однако тег <DEL> </p>
<p><b>Тэг <DFN>
</b>
</p>
<p>Тэг <DFN> отмечает свой текстовый фрагмент как определение
(DeFinitioN). Например, этим тэгом можно отметить какой-либо термин, когда он
встречается в тексте в первый раз. Пример:
</p>
<p><DFN>Internet Explorer</DFN> - это
популярный Web-браузер
</p>
<p>Тэг <DFN> поддерживается только браузером Microsoft
Internet Explorer. Отображается по умолчанию курсивом.
</p>
<p><b> Тэг <INS>
</b></p>
<p>Тэг <INS> отмечает свой текст как вставку (INSertion).
Этот элемент полезно использовать для отметки изменений, вносимых в документ
от версии к версии. Тег <INS> может использоваться как элемент уровня
текста и как элемент уровня блока.
</p>
<p>Тэг имеет два необязательных параметра: CITE и DATETIME.
Значение параметра CITE должно представлять собой URL-адрес документа, поясняющего
подробности внесенных дополнений.
</p>
<p>Параметр DATETIME указывает дату вставки в формате: YYYY-MM-DDThh:mm:ssTZD,
определяющем год, месяц, число, часы, минуты и секунды вставки, а также часовой
пояс (Time Zone).
</p>
<p>Текст, помеченный тэгом <INS>, обычно отображается
подчеркнутым текстом. Тег <INS> в настоящее время распознается только
браузером Microsoft Internet Explorer.
</p>
<p><b> Тэг <EM>
</b></p>
<p>Тэг <EM> (EMphasis - выделение, подчеркивание) используется
для выделения важных фрагментов текста. Браузеры обычно отображают такой текст
курсивом. Пример:
</p>
<p>Пример выделения <EM>отдельных слов</EM>
текста
</p>
<p> <I>.
</p>
<p><b> Тэг <KBD>
</b></p>
<p>Тэг <KBD> отмечает текст как вводимый пользователем
с клавиатуры. Обычно отображается моноширинным шрифтом, например:
</p>
<p>Чтобы запустить текстовый редактор, напечатайте: <KBD>notepad</KBD>
</p>
<p>Применение данного тега предпочтительнее применения тега
физического форматирования <TT>.
</p>
<p><b> Тэг <Q>
</b></p>
<p>Тэг <Q> отмечает короткие цитаты в строке текста.
В отличие от тега уровня блока <BLOCKQUOTE> при отображении не выполняется
отделение размеченного текста пустыми строками. Обычно отображается курсивом.
Тег <Q> (в отличие от <BLOCKQUOTE>) в настоящее время распознается
только браузером Microsoft Internet Explorer.
</p>
<p>Тэг имеет параметр CITE, в качестве значения которого можно
указать источник цитаты.
</p>
<p><b> Тэг <SAMP>
</b></p>
<p>Тэг <SAMP> отмечает текст как образец (SAMPle). Обычное
использование этого тега - отметка текста, выдаваемого программами (sample output).
Используется также для выделения нескольких символов моноширинным шрифтом.
</p>
<p>Применение данного тега предпочтительнее применения тега
физического форматирования <TT>. Например:
</p>
<p>В результате работы программы будет напечатано:
<SAMP>Hello, World!</SAMP>
</span>.
</p>
<p><b> Тэг <STRONG>
</b></p>
<p>Тэг <STRONG>, как правило, используется для выделения
важных фрагментов текста. Браузеры обычно отображают такой текст полужирным
шрифтом. Пример:
</p>
<p>Санкт-Петербург расположен в самой восточной оконечности
<STRONG>Финского залива</STRONG> в устье реки <STRONG>Невы<
/STRONG>
</p>
<p>Применение данного тега предпочтительнее применения тега
физического форматирования <B>. Тегом <STRONG> обычно размечают
более важные фрагменты текста, чем те, что размечены тэгом <EM>.
</p>
<p><b> Тэг <VAR>
</b></p>
<p>Тэг <VAR> отмечает имена переменных программ. Обычно
такой текст отображается курсивом. Пример:
</p>
<p>Задайте значение переменной <VAR>N</VAR>
</p>
<p>Отображение некоторых из примеров, приведенных при описании
тегов логического форматирования текста, показано на рис. 1.1. На рисунке видно,
как при наведении указателя мыши на текст, отмеченный тэгом <ACRONYM>,
выдается подсказка.
</p>
<p><i><b>Рис. 1.1.
</b>
</i> <i>Примеры форматирования текста
</i>
</p>
<p>Вы, наверное, обратили внимание на то, что некоторые элементы
дают одинаковый результат. Более того, часть элементов может никак не изменять
представление фрагмента текста на экране. Может возникнуть законный вопрос:
для чего создано такое разнообразие элементов форматирования?
</p>
<p>Ответ - в названии этой группы элементов. Они предназначены
для расстановки логических ударений, выделения логических частей и подчеркивания
сути высказываний. Их использование весьма актуально, поскольку, вероятно, в
ближайшем будущем возможности браузеров возрастут, например, станет возможен
поиск цитат на Web-пространстве, а может быть следующее поколение браузеров
научится читать документы вслух. Кроме того, авторам документов ничто не мешает
уже сегодня, применяя таблицы стилей, задать желаемое отображение для любого
из тэгов, переопределив значения по умолчанию.
</p>
<p> <b> <span>Тэги
физического форматирования текста
</span>
</b></p>
<p>Приведем описание тегов физического форматирования. Часть
из них не рекомендуется к использованию спецификацией HTML 4.0 по приведенным
выше причинам. Некоторые теги отменены (deprecate) спецификацией HTML 4.0, однако
они продолжают поддерживаться браузерами.
</p>
<p><b> Тэг </p>
<p>Тэг <B> отображает текст полужирным шрифтом. В большинстве
случаев рекомендуется вместо тега <B> использовать тег логического форматирования
<STRONG>. Например:
</p>
<p>Это <B>полужирный</B> шрифт.
</p>
<span> <img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/02.gif' height="435" width="401" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.2.
</b> Примеры физического форматирования
текста (браузером Netscape)
</i>
</p>
<p><b> Тэг <<span>I
>
</span>
</b></p>
<p>Тэг <I> отображает текст курсивом. Для большинства
случаев вместо этого тега рекомендуется использовать теги <EM>, <DFN>,
<VAR> или <CITE>, поскольку последние лучше отражают назначение
выделяемого текста. Например:
</p>
<p>Выделение <I>курсивом</I>
</p>
<p><b> Тэг <TT>
</b></p>
<p>Тэг <TT> отображает текст моноширинным шрифтом. Для
большинства случаев вместо этого тега лучше использовать теги <CODE>,
<SAMP> или <KBD>. Пример:
</p>
<p>Это <TT>моноширинный</TT> шрифт
</span>.
</p>
<p><b> Тэг <U>
</b></p>
<p>Тэг <U> отображает текст подчеркнутым. Отмененный
тэг. Вместо него рекомендуется использовать теги <STRONG> или <CITE>.
Например:
</p>
<p>Пример <U>подчеркивания</U> текста
</span>.
</p>
<p><b>Тэги <STRIKE> и <S>
</b>
</p>
<p>Тэги <STRIKE> и <S> отображают текст, перечеркнутый
горизонтальной линией. Отмененный тэг. Вместо него следует использовать тег
<DEL>. Например:
</p>
<p>Пример <STRIKE>зачеркнутого</STRIKE>
текста
</span>.
</p>
<p>В настоящее время тег <DEL> поддерживается не всеми
браузерами, поэтому пока рекомендуется использовать <DEL> в сочетании
с тэгом <STRIKE>. А именно, внутрь тэга-контейнера <DEL> можно вложить
пару тегов
</p>
<p><STRIKE>...</STRIKE>
.
</p>
<p><b>Тэг <BIG>
</b>
</p>
<p>Тэг <BIG> выводит текст шрифтом большего (чем непомеченная
часть текста) размера. Вместо данного элемента лучше использовать <STRONG>
или теги заголовков, например, <H3> <BIG></p>
<p>Шрифт <BIG>большего</BIG> размера
</span>.
</p>
<p><b> Тэг <SMALL>
</b></p>
<p>Тэг <SMALL> выводит текст шрифтом меньшего размера.
Поскольку в HTML нет тэга, противоположного по действию тэгу <EM>, то
для этих целей можно применять тег <SMALL>. Большинство браузеров поддерживают
вложенные теги <SMALL>, однако использовать такой подход не рекомендуется.
Например:
</p>
<p>Шрифт <SMALL>меньшего</SMALL> размера
</span>.
</p>
<p><b>Тэг <SUB>
</b>
</p>
<p>Тэг <SUB> сдвигает текст ниже уровня строки и выводит
его (если возможно) шрифтом меньшего размера. Удобно использовать для математических
индексов. Например:
</p>
<p>Пример шрифта для <SUB>нижнего</SUB>
индекса
</span>.
</p>
<p><b> Тэг <SUP>
</b></p>
<p>Тэг <SUP> сдвигает текст выше уровня строки и выводит
его (если возможно) шрифтом меньшего размера. Удобно использовать для задания
степеней чисел в математике. Например:
</p>
<p>Пример шрифта для <SUP>верхнего</SUP>
индекса
</span>.
</p>
<p><b> Тэг <BLINK>
</b></p>
<p>Тэг <BLINK> отображает мигающий текст. Этот тег не
входит в спецификацию HTML и поддерживается только браузером Netscape. Опытные
разработчики крайне редко прибегают к использованию этого тэга, поскольку наличие
на странице мигающих символов раздражает многих пользователей.
</p>
<p><b> <span>Тэг
</b></p>
<p>Тэг-контейнер <SPAN> является аналогом тега уровня
блока <DIV>. Может использоваться в тех случаях, когда требуется отметить
фрагмент текста для задания его свойств, и при этом не удается использовать
никакой другой структурный тег форматирования.
</p>
<p>Браузер Microsoft Internet Explorer дополнительно разрешает
использование следующих параметров тэга: DIR, DATAFLD, DATAFORMATAS, DATASRC.
Описание параметров можно найти во второй части книги.
</p>
<span> <img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/03.gif' height="240" width="353" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.3.
</b> Использование вложенных тегов форматирования
текста
</i>
</p>
<p>Тэги форматирования могут быть вложенными друг в друга.
При этом нужно внимательно следить, чтобы один контейнер находился целиком в
другом контейнере. На рис. 1.3 показан пример использования вложения элемента
курсива в элемент полужирного шрифта. Использован следующий фрагмент HTML-кода:
</p>
<p>Это <B>полужирный</B> шрифт.
</p>
<p>
<p>Это <I>курсив</I>.
</p>
<p>
<p>А здесь текст <B><I>полужирный и курсивный</I></В>
</p>
<p><b> Тэг <FONT>
</b></p>
<p>Тэг <FONT> указывает параметры шрифта. Он относится
к тэгам физического форматирования уровня текста.
</p>
<p>Назначение параметров шрифта непосредственно в тексте документа
нарушает основную идею разделения содержательной части документа и описания
формы представления документа. Поэтому в спецификации HTML 4.0 данный тэг, а
также тег <BASEFONT> отнесены к отмененным. Их дальнейшее применение не
рекомендуется.
</p>
<p>Несмотря на эти грозные предупреждения, видимо, для самых
простых документов физическое форматирование можно считать допустимым. Кроме
того, начинать обучение основам форматирования проще всего именно с правил непосредственного
указания форматов элементов. До стилевого оформления начинающий разработчик
должен еще дорасти.
</p>
<p>Тэг <FONT> относится к последовательным элементам,
поэтому не может включать в себя элементы уровня блока, например, <P>Или <TABLE>.
</p>
<p>Для тега могут задаваться следующие параметры: FACE, SIZE
и COLOR. Заметим, что браузер Netscape допускает также использование двух дополнительных
параметров: POINT-SIZE и WEIGHT, описание которых опускаем.
</p>
<ul><p>FACE
</p>
<p>Параметр FACE служит для указания типа шрифта, которым
программа просмотра пользователя будет выводить текст (если такой шрифт
имеется на компьютере). Значением данного параметра служит название шрифта,
которое должно в точности совпадать с названием шрифта, имеющего у пользователя.
Если такого шрифта не будет найдено, то данное указание будет проигнорировано
и будет использован шрифт, установленный по умолчанию.
</p>
<p>Можно указать как один, так и несколько названий шрифтов,
разделяя их запятыми. Это весьма полезное свойство, так как в разных системах
могут быть почти идентичные шрифты, называющиеся по-разному. Другим важным
качеством является задание предпочтения использования шрифтов. Список шрифтов
просматривается слева направо. Если на компьютере пользователя нет шрифта,
указанного в списке первым, то делается попытка найти следующий шрифт и
т. д.
</p>
<p>Приведем пример использования параметра FACE:
</p>
<p><HTML> <HEAD>
</p>
<p><TITLE>Назначение шрифтов</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><BR>
</p>
<p><FONT FACE="Verdana", "Arial",
"Helvetica">
</p>
<p>Пример задания названия шрифта.
</p>
<p></FONT>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<p>На рис. 1.4 показано отображение примера браузером
Netscape. В примере в качестве предпочитаемого указывается шрифт Verdana,
при его отсутствии будет использован шрифт Arial и т. д.
</p>
</ul><p><img src='https://i0.wp.com/webnav.ru/books/html4/html_rules/04.gif' height="222" width="369" loading=lazy loading=lazy></p>
<p><i><b>Рис. 1.4.
</b> Отображение примера браузером Netscape
</i>
</p>
<ul><p>SIZE
</p>
<p>Этот параметр служит для указания размеров шрифта в
условных единицах от 1 до 7. Конкретный размер шрифта зависит от используемой
программы просмотра. Принято считать, что размер "нормального"
шрифта соответствует значению 3.
</p>
</ul><p>Настройки размеров шрифта, используемых по умолчанию, а
также величины абсолютного изменения размеров шрифта, зависят от браузеров.
На рис. 1.5 показано окно настройки браузера Netscape, в котором задаются шрифты,
используемые по умолчанию.
</p>
<p>Размер шрифта указывается как абсолютной величиной (SIZE=2),
так и относительной (SIZE=+1). Последний способ часто используется в сочетании
с заданием базового размера шрифта с помощью тега <BASEFONT>.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>При указании размеров шрифтов записи типа "2"
и "+2" (в отличие от большинства языков программирования, в которых
унарный знак "+" можно опускать) дают принципиально разный результат.
</span>
</i></p>
<p>Приведем пример, в котором использованы различные способы
назначения размеров шрифтов. Отображение примера показано на рис. 1.6.
</p>
<p><br><img src='https://i1.wp.com/webnav.ru/books/html4/html_rules/05.gif' width="100%" loading=lazy loading=lazy></p>
<p><i><b>Рис. 1.5.
</b> Окно настройки параметров шрифтов браузера
Netscape
</i>
</p>
<p><br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/06.gif' width="100%" loading=lazy loading=lazy></p>
<p><i><b>Рис. 1.6.
</b> Назначение размеров шрифтов
</i>
</p>
<blockquote>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Назначение размеров шрифтов</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><FONT SIZE=1>Шрифт размера 1</FONT><BR>
</p>
<p><FONT SIZE=-1>Шрифт размера 2</FONT><BR>
</p>
<p><FONT SIZE=3>Шрифт размера 3</FONT><BR>
</p>
<p><FONT SIZE=4>Шрифт размера 4</FONT><BR>
</p>
<p><FONT SIZE=5>Шрифт размера 5</FONT><BR>
</p>
<p><FONT SIZE=+3>Шрифт размера 6</FONT><BR>
</p>
<p><FONT SIZE=7>Шрифт размера 7</FONT><BR>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
</blockquote>
<ul><p>COLOR
</p>
<p>Этот параметр устанавливает цвет шрифта, который может
задаваться с помощью стандартных имен или в формате #RRGGBB. Приведем пример
документа с разноцветным текстом.
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Выбор цвета шрифта</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><FONT COLOR=green>Текст зеленого цвета</FONT><BR>
</p>
<p><FONT COLOR=#FF0000>Текст красного цвета</FONT><BR>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
</ul><p><b> Тэг <BASEFONT>
</b></p>
<p>Тэг <BASEFONT> используется для указания размера,
типа и цвета шрифта, используемого в документе по умолчанию. Эти значения обязательны
для всего документа, однако могут в нужных местах переопределяться с помощью
тега <FONT>. После закрывающего тега </FONT> действие тега <BASEFONT>
восстанавливается. Значения параметров шрифтов, используемых по умолчанию, могут
неоднократно переопределяться в документе, т. е. тег <BASEFONT> может
появляться в документе любое количество раз.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Тэг <BASEFONT> может появляться также и в разделе
<HEAD> документа.
</span>
</i></p>
<p>Заметим, что для тега <BASEFONT> не существует закрывающего
тэга.
</p>
<p>В качестве параметров могут использоваться точно такие
же параметры, что и
для тега <FONT>, а именно:
FACE, SIZE и COLOR. Назначение и правила записи
параметров
аналогичны.
</p>
<p><i> <b><span>Примечание
</b>
</span>
</i></p>
<p><i> <span>Браузер Netscape не допускает применение параметра
FACE тега <BASEFONT>.
</span>
</i></p>
<p>Приведем пример использования тега <BASEFONT>.
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Назначение размеров шрифтов</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p>Текст, записанный шрифтом по умолчанию.
</p>
<p><BASEFONT SIZE=2>
<p>Шрифт размера 2.
</p>
<p><BASEFONT SIZE=4>
</p>
<p>
<p>Шрифт размера 4.
</p>
<p>
<p> <TABLE BORDER=1>
</p>
<p> <TR>
</p>
<p> <TD>Текст внутри ячейки
таблицы</TD>
</p>
<p> </TR>
</p>
<p> </TABLE>
</p>
<p><P>Текст после таблицы
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<p>В приведенном примере дважды переопределяется размер шрифта,
используемого по умолчанию. Изначально он равен 3 (по умолчанию). Затем устанавливается
равным 2, далее - 4. Обратите внимание на отображение данного примера (рис.
1.7). Видно, что для таблиц назначение тега <BASEFONT> не действует. Это
характерно для многих браузеров, хотя формально нарушает идею применения тэга.
</p>
<span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/07.gif' width="100%" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.7.
</b> Отображение примера С ТЭГОМ <BASEFONT>
(браузером Netscape)
</i>
</p>
<p><b> <span> Форматирование HTML-документа
</span>
</b></p>
<p><b> <span> Разделение на абзацы
</span>
</b></p>
<p>Любые тексты, будь то школьное сочинение, заметка в газете
или техническое описание устройства имеют определенную структуру. Элементами
такой структуры являются заголовки, подзаголовки, таблицы, абзацы и др.
</p>
<p>Одним из первых правил составления практически любых документов
является разбиение его текста на отдельные абзацы, выражающие законченную мысль.
HTML-документы не являются исключением из этого правила. При создании документов
с помощью текстовых редакторов разбиение на абзацы выполняется вводом символа
перевода строки. Большинство редакторов реализует это при нажатии клавиши <Enter>.
В HTML-документах символы перевода строки не приводят к образованию нового абзаца.
</p>
<p>Язык HTML предполагает, что автор документа ничего не знает
о компьютере своего читателя. Читатель вправе установить любой размер окна и
пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса
в строке определяется только программой просмотра и установками конечного пользователя.
Поскольку символы перевода строки оригинального документа игнорируются, то текст,
отлично смотревшийся в окне редактора автора документа, может превратиться в
сплошной неудобочитаемый текст в окне программы просмотра.
</p>
<p>Избежать этой неприятности позволяет применение специального
тега разделения на абзацы <P>Перед началом каждого абзаца текста следует
поместить тег <P>Закрывающий тег </P> не обязателен. Браузеры
обычно отделяют абзацы друг от друга пустой строкой.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Браузеры обычно интерпретируют несколько стоящих подряд
тегов абзаца <P>Как один. То же самое относится и к тэгу перевода строки
<BR>. Поэтому создать несколько пустых строк при помощи этих тегов не
удается.
</span>
</i></p>
<p>Тэг <P>Может задаваться с параметром горизонтального
выравнивания ALIGN. Возможные значения параметра приведены в табл. 1.4. По умолчанию
выполняется выравнивание по левому краю.
</p>
<p><i> <span><b>Таблица 1.4.
</b>Значения параметра ALIGN
</span>
</i></p>
<table border="1" width="550"><tr><td width="185"> <p><b><span>Значение параметра ALIGN
</span>
</b></p>
</td>
<td width="355"> <p><b>Действие
</b></p>
</td>
</tr><tr><td width="185" valign="top"> <p>LEFT
</p>
</td>
<td width="355" valign="top"> <p>Выравнивание текста по
левой границе окна браузера
</p>
</td>
</tr><tr><td width="185" valign="top"> <p>CENTER
</p>
</td>
<td width="355" valign="top"> <p>Выравнивание по центру
окна браузера
</p>
</td>
</tr><tr><td width="185" valign="top"> <p>RIGHT
</p>
</td>
<td width="355" valign="top"> <p>Выравнивание по правой
границе окна браузера
</p>
</td>
</tr><tr><td width="185" valign="top"> <p>JUSTIFY
</p>
</td>
<td width="355" valign="top"> <p>Выравнивание по ширине
(по двум сторонам)
</p>
</td>
</tr></table><p>Заметим, что выравнивание по ширине (ALIGN = JUSTIFY) долгое
время не поддерживалось браузерами. Во многих описаниях языка HTML для значений
параметра выравнивания указывается только три варианта (LEFT, CENTER и RIGHT).
В настоящее время все популярные браузеры умеют выполнять выравнивание по ширине.
Некоторые проблемы создания документов с выравниванием по ширине рассмотрены
также в главе 8.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Отсутствие выравнивания по ширине в настоящее время
кажется удивительным. Этот режим применяется очень часто для печатных изданий.
Достаточно взять в руки любую газету или внимательно присмотреться к абзацам
данной книги - все они выровнены по ширине. Однако для HTML-документов до последнего
времени выравнивание по ширине не допускалось. Всего лишь пару лет назад ни
один браузер не имел такого режима. Так, читатели, до сих пор использующие браузер
Netscape версии 3.x, не смогут увидеть ровные строчки в документе. Можно попытаться
предугадать, какие же еще возможности появятся в будущем у браузеров, сравнив
возможности мощных текстовых редакторов и современных браузеров. Примером не
реализованных пока возможностей может являться автоматическая расстановка переносов
и пр.
</span>
</i></p>
<p><b> Перевод строки
</b></p>
<p>При отображении текстовых документов в браузере место переноса
строки в пределах абзаца определяется автоматически в зависимости от размера
шрифтов и размера окна просмотра. Перенос строки может осуществляться только
по символам-разделителям слов (например, пробелам). Иногда в документах требуется
задать принудительный перевод строки, реализующийся независимо от параметров
настроек браузера. Для этого служит тег принудительного перевода строки <BR>,
который не имеет соответствующего закрывающего тэга. Включение тега <BR>
в текст документа обеспечит размещение последующего текста с начала новой строки.
Например, такой подход может использоваться для создания структур типа списков
без использования специальных тегов разметки списка. Или, например, без данного
тега не обойтись для отображения стихотворений и т. п.
</p>
<p>Приведем пример использования принудительного перевода
строки (рис. 1.8):
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Использование принудительного перевода
строки</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p>Над омраченным Петроградом<BR>
</p>
<p>Дышал ноябрь осенним хладом.<BR>
</p>
<p>Плеская шумною волной<BR>
</p>
<p>В края своей ограды стройной,<BR>
</p>
<p>Нева металась, как больной<BR>
</p>
<p>В своей постеле беспокойной.
</p>
<p>
<p><CITE>А.С.Пушкин. Медный всадник</CITE>
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<span> <br><img src='https://i2.wp.com/webnav.ru/books/html4/html_rules/08.gif' width="100%" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.8.
</b> Тег <BR> можно использовать для
принудительного перевода строки
</i>
</p>
<p>В отличие от тега абзаца <P>При использовании тега
<BR> не будет образована пустая строка.
</p>
<p>Использование тега <BR> требует осторожности - возможна
ситуация, когда браузер уже сделал перевод строки за одно-два слова до того,
как встретил ваш тег <BR>. Это бывает в случае, если ширина окна программы
просмотра читателя меньше, чем тот же параметр программы, с помощью которой
вы тестировали ваш документ. При этом может получиться, что в строке посреди
абзаца останется только одно слово, нарушая тем самым красоту компоновки документа.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>При использовании тега <BR> для разбивки текста,
обтекающего изображения или таблицы, можно задавать параметр CLEAR, прекращающий
обтекание текста. Об этом можно прочитать в главах 3 и 4.
</span>
</i></p>
<p><b> Тэги <NOBR>u <WBR>
</b></p>
<p>Бывают ситуации, когда требуется выполнить операцию противоположного
назначения - запретить перевод строки. Для этого существует тэг-контейнер <NOBR>.
Текст, размеченный этим тэгом, будет гарантированно располагаться в одной строке,
независимо от ее длины. Если при этом получающаяся строка будет выходить за
пределы окна просмотра браузера, то появится горизонтальная полоса прокрутки.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Для обеспечения неразрывности текста, располагаемого
в ячейках таблиц, существует специальный параметр NOWRAP тега <TD>. Об
этом можно узнать в главе 4.
</span>
</i></p>
<p>Размечая текст с помощью тега неразрывной строки <NOBR>
можно получить очень длинные строки. Чтобы этого избежать, можно указать браузеру
читателя место возможного перевода строки, что будет выполнено только при необходимости
(так называемый "мягкий" перевод строки). Это можно осуществить, поставив
в нужном месте текста тег <WBR> (Word BReak), который так же, как и тег
<BR>, не нуждается в закрывающем тэге.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Тэг <WBR> вообще не поддерживается браузером
Netscape. Браузер Microsoft Internet Explorer распознает этот тег только в тексте,
размеченном тэгами <NOBR>.
</span>
</i></p>
<p><b> <span> Заголовки внутри HTML-документа
</span>
</b></p>
<p>Наряду с названием всего документа, на Web-странице могут
использоваться заголовки для отдельных частей документа. Эти заголовки могут
иметь шесть различных уровней (размеров) и представляют собой фрагменты текста,
которые выделяются на экране при отображении страницы браузером.
</p>
<p>Для разметки заголовков используются теги <HI>, <H2>,
<H3>, <H4>, <H5> и <H6>. Эти теги требуют соответствующего
закрывающего тэга. Заголовок с номером 1 является самым крупным (заголовок верхнего
уровня), а с номером 6 - самым мелким. Теги заголовка являются элементами уровня
блока, поэтому с помощью них нельзя размечать отдельные слова текста для увеличения
их размера. При использовании тегов заголовков осуществляется вставка пустой
строки до и после заголовка, поэтому тегов абзаца или перевода строки здесь
не требуется.
</p>
<p>Тэги заголовков могут задаваться с параметром горизонтального
выравнивания ALIGN. Возможные значения параметра совпадают с параметрами выравнивания
тега абзаца <P> (см. табл. 1.4).
</p>
<p>Пример использования заголовков разного уровня с различным
выравниванием (рис. 1.9):
</p>
<p><HTML>
</p>
<p><HEAD>
</p>
<p><TITLE>Примеры заголовков</TITLE>
</p>
<p></HEAD>
</p>
<p><BODY>
</p>
<p><H1>Заголовок размера 1</H1>
</p>
<p><H2>Заголовок размера 2</H2>
</p>
<p><H3 ALIGN=CENTER>Заголовок размера 3</H3>
</p>
<p><H4 ALIGN=RIGHT>Заголовок
размера 4</H4>
</p>
<p><H5>Заголовок размера 5</H5>
</p>
<p><H6>Заголовок размера 6</H6>
</p>
<p>Основной текст документа
</p>
<p></BODY>
</p>
<p></HTML>
</p>
<span> <br><img src='https://i1.wp.com/webnav.ru/books/html4/html_rules/09.gif' width="100%" loading=lazy loading=lazy></span>
<p><i><b>Рис. 1.9.
</b> Отображение заголовков различного размера
</i>
</p>
<p><b> <span> Горизонтальные линии
</span>
</b></p>
<p>Другим методом разделения документа на части является проведение
горизонтальных линий. Они визуально подчеркивают законченность той или иной
области страницы. Сейчас часто используют рельефную, вдавленную линию, чтобы
обозначить "объемность" документа.
</p>
<p>Тэг <HR> позволяет провести рельефную горизонтальную
линию в окне большинства программ просмотра. Этот тег не является контейнером,
поэтому не требует закрывающего тэга. До и после линии автоматически вставляется
пустая строка. Параметры тега <HR> представлены в табл. 1.5.
</p>
<p><i> <span><b>Таблица 1.5.
</b> Параметры тега <HR>
</span>
</i></p>
<p>Пример:
</p>
<p><HR ALIGN=CENTER WIDTH=50% NOSHADE>
</p>
<p>В этом примере задается горизонтальная линия, которая занимает
половину ширину окна просмотра и располагается посередине окна. Заметим, что
параметры выравнивания имеют смысл только тогда, когда линия занимает не всю
ширину окна.
</p>
<p><i><b> Примечание
</b>
</i></p>
<p><i> <span>Браузер Netscape не позволяет использовать параметр
COLOR тега <HR>.
</span>
</i></p>
<p>Использование предварительно
отформатированного текста
</p>
<p>Как видно в приведенных выше разделах, для разбивки текста
по абзацам и обеспечения принудительного перевода строки следует пользоваться
специальными тэгами. Однако бывают случаи, когда в HTML-документ необходимо
включить текст, уже имеющий форматирование, выполненное традиционным способом
при помощи символов перевода строки, необходимого количества пробелов, символов
табуляции и т. д. Для решения таких задач предусмотрен специальный тэг-контейнер
<PRE>Определяющий предварительно форматированный (п
реформатированный)
текст.
</p>
<p>Текст, размеченный тэгом <PRE>Будет отображаться
в таком виде, как он выглядит в обычном текстовом редакторе. Для отображения
всегда будет использоваться моноширинный шрифт. При этом вы сможете в большей
степени контролировать вывод документа программой просмотра, правда, за счет
некоторой потери в гибкости.
</p>
<p>Одним из вариантов использования этого тега являются таблицы,
построенные без применения специальных тегов разметки таблиц. Другим важным
</p>
<p>применением является вывод на экран больших блоков программного
кода (Java, C++ и т. п.), не позволяющий браузеру переформатировать их.
</p>
<p>Текст внутри контейнера <PRE>Может содержать элементы
форматирования уровня текста, кроме следующих: <IMG>, <OBJECT>,
<APPLET>, <BIG>, <SMALL>, <SUB>, <SUP>, <FONT>,
<BASEFONT>. Недопустимо внутри преформатированного текста задавать элементы
форматирования уровня блока, например, теги заголовков. Тег абзаца по логике
вещей также не должен встречаться внутри преформатированного текста, однако
если встречается, то будет реализовывать переход на новую строку (без образования
пустой).
</p>
<p><i> <b> Примечание
</b>
</i></p>
<p><i> <span>Тэг <PRE>Имеет необязательный параметр WIDTH,
назначение которого - указывать браузеру максимальную длину строки преформатированного
текста. В зависимости от этого значения браузер мог бы подобрать нужный шрифт
и/или отступ для оптимального отображения преформатированного текста. В качестве
значения по умолчанию предлагалось использовать 80. Другими рекомендованными
значениями являются 40 и 132. Заметим, что читателям, имеющим значительный опыт
работы со средствами вычислительной техники, эти числа говорят о многом. На
деле же современные браузеры игнорируют значение параметра WIDTH.
</span>
</i></p>
<p>Существуют еще несколько тэгов, решающих близкую по смыслу
задачу. К ним относятся теги <ХМР>, <PLAINTEXT>И <LISTING>.Все три упомянутых тега в спецификации HTML 4.0 отмечены как устаревшие.
Это означает, что в будущих версиях браузеры прекратят их поддержку. Вместо
этих тегов рекомендуется использовать тег <PRE>.
</p>
<p><b> Тэг<<span>DIV
>
</span>
</b></p>
<p>Тэг-контейнер <DIV> является элементом уровня блока,
служащим для выделения фрагмента документа. Целью этого выделения является управление
параметрами данного фрагмента, которое обычно выполняется с помощью назначения
стилей. Приведем пример:
</p>
<p><DIV STYLE="color: green">
</p>
<p>(Фрагмент документа)
</p>
<p></DIV>
</p>
<p>В этом примере фрагмент HTML-документа обрамляется тэгами
<DIV> и </DIV> для задания некоторых его свойств. В данном случае
все текстовые элементы выделенного фрагмента будут отображаться зеленым (green)
цветом. Аналогом тега <DIV> уровня текста является элемент .
</p>
<p>Заметим, что непосредственное назначение стилевых свойств
отдельного фрагмента так, как это сделано в примере, использовать не желательно
в соответствии с концепцией разделения структуры документа и его представления.
Следует использовать таблицы стилей, речь о которых пойдет во второй части книги.
</p>
<p><b> Тэг <CENTER>
</b></p>
<p>Тэг-контейнер <CENTER> предназначен для горизонтального
выравнивания всех элементов посередине окна просмотра браузера. Он имеет уровень
блока и его полезно использовать для центрирования таких элементов, как, например,
таблиц, так как они не могут быть центрированы назначением
</p>
<p>ALIGN=CENTER тега <TABLE>.
</p>
<p>По существу тег <CENTER> является краткой формой
следующей записи: <DIV ALIGN=CENTER>. Дальнейшее использование тега <CENTER>
по причинам, отмеченным в предыдущем разделе, также нежелательно.
</p>
<p><b> <span> Включение комментариев в документ
</span>
</b></p>
<p>В HTML-документ можно включать комментарии, которые не
будут видны читателю. Они могут состоять из произвольного числа строк и должны
начинаться тэгом <!-- и заканчиваться тэгом -->. Все, что заключено внутри
этих тэгов, при просмотре страницы не будет отображаться на экране.
</p>
<b> По возможности поясняйте свой код, где это необходимо.
</b> <p>Используйте комментарии, чтобы пояснить свой код: что он делает, за что отвечает, и почему используется выбранное решение. </p><p>
(Этот пункт не обязателен, потому что нет смысла ожидать, что код всегда будет хорошо задокументирован. Полезность комментирования зависит от сложности проекта и может различаться для HTML и CSS кода.) </p><h4>Задачи</h4> <b> Отмечайте задачи для списка дел с помощью <b>TODO
</b>
.
</b> <p>Отмечайте задачи с помощью ключевого слова <b>TODO
</b>
. не используйте другие часто встречающиеся форматы, такие как <b>@@
</b>
. </p><p>Заключайте контакты (имя пользователя или список адресатов) в круглые скобки: <b>TODO(контакт)
</b>
. </p><p>Описывайте задачу после двоеточия, например: <b>TODO: Задача
</b>
. </p><p><b>Рекомендуется:
</b> {# TODO(Ivan Ivanov): Разобраться с центровкой #}
<center>Тест</center>
<br><b>Рекомендуется:
</b> <!-- TODO: Убрать необязательные теги -->
<ul>
<li>Огурцы</li>
<li>Помидоры</li>
</ul>
</p><h3>Правила оформления HTML</h3><h4>Тип документа</h4> <b> Используйте HTML5.
</b> <p>
(Рекомендуется использовать HTML с типом контента <b>text/html
</b>
. Не используйте XHTML, так как application/xhtml+xml (англ.) , хуже поддерживается браузерами и ограничивает возможность оптимизации.) </p><h4>Валидность HTML</h4> <b> По возможности используйте валидный HTML.
</b> <p>Используйте валидный HTML код, кроме случаев, когда использование не позволяет достичь размера файла, необходимого для нужного уровня производительности. </p><p> W3C HTML validator (англ.) чтобы проверить валидность кода. </p><p>Валидность - это важное и при этом измеряемое качество кода. Написание валидного HTML способствует изучению технических требований и ограничений и обеспечивает правильное использование HTML. </p><p><b><span>Не рекомендуется:
</span>
</b> <title>Проверка</title>
<article>Просто проверка
<br><b>Рекомендуется:
</b> <!DOCTYPE html>
<meta charset="utf-8">
<title>Проверка</title>
<article>Просто проверка.</article>
</p><h4>Семантика</h4> <b> Используйте HTML так, как это было задумано.
</b> <p>Используйте элементы (Иногда неверно называемые “тегами”) по назначению: заголовки для заголовков, <b>p
</b>
для абзацев, <b>a
</b>
для ссылок и т.д. </p><p>Это облегчает чтение, редактирование и поддержку кода. </p><h4>Альтернатива для мультимедиа</h4> <b> Всегда указывайте альтернативное содержимое для мультимедиа.
</b> <p>Постарайтесь указать альтернативное содержимое для мультимедиа: например для картинок, видео или анимаций, заданных с помощью <b>canvas
</b>
. Для картинок это осмысленный альтернативный текст (<b>alt
</b>
), а для видео и аудио расшифровки текста и подписи если это возможно. </p><p>Альтернативное содержимое может помочь людям с с ограниченными возможностями. Например человеку со слабым зрением сложно понять, что на картинке если для нее не задан <b>@alt
</b>
. Другим людям может быть тяжело понять о чем говорится в видео или аудио записи. </p><p>
(Если для картинки <b>alt
</b>
избыточен, или она используется только в декоративных целях в местах, где нельзя использовать CSS, используйте пустой альтернативный текст <b>alt=""
</b>
) </p><h4>Разделение ответственности</h4> <b> Разделяйте структуру, оформление и поведение.
</b> <p>Держите структуру (разметка), оформление (стили) и поведение (скрипты) раздельно и постарайтесь свести взаимодействие между ними к минимуму. </p><p>Убедитесь, что документы и шаблоны содержат только HTML, и что HTML служит только для задания структуры документа. Весь код, отвечающий за оформление, перенесите в файлы стилей, а код отвечающий за поведение - в скрипты. </p><p>Старайтесь сократить их пересечения к минимуму, включая в шаблоны минимальное количество файлов стилей и скриптов. </p><p>Отделение структуры от представления и поведения помогает облегчить поддержку кода. Изменение шаблонов и HTML-документов всегда занимает больше времени чем изменение файлов стилей или скриптов. </p><p><b><span>Не рекомендуется:
</span>
</b> <!DOCTYPE html>
<title>HTML sucks</title>
<link rel="stylesheet" href="base.css" media="screen">
<link rel="stylesheet" href="grid.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
<h1 style="font-size: 1em;">HTML Отстой</h1>
<p>Я об этом и раньше где-то читал, но теперь точно все ясно:
<u>HTML - полная фигня!!1</u>
<center>Не могу поверить, что для того чтобы изменить оформление,
нужно каждый раз все переделывать заново. </center>
<br><b>Рекомендуется:
</b> <!DOCTYPE html>
<title>My first CSS-only redesign</title>
<link rel="stylesheet" href="default.css">
<h1>Мой новый CSS дизайн</h1>
<p>Я читал об этом и раньше, но наконец-то сделал сам:
Использую принцип разделения ответственности и не пихаю оформление в HTML
<p>Как круто!
</p><h4>Ссылки-мнемоники</h4> <b> Не используйте ссылки-мнемоники.
</b> <p>Единственное исключение из этого правила - служебные символы HTML (например <b><
</b>
и <b>&
</b>
) а так же вспомогательные и “невидимые” символы (например неразрывный пробел). </p><h4>Необязательные теги</h4> <b> Не используйте необязательные теги. <span><b> (не обязательно)
</b>
</span>
</b> <p>Для уменьшения размера файлов и лучшей читаемости кода можно опускать необязательные теги. В спецификации HTML5 (англ.) есть список необязательных тегов. </p><p>
(Может потребоваться некоторое время для того, чтобы этот подход начал использоваться повсеместно, потому что это сильно отличается от того, чему обычно учат веб-разработчиков. С точки зрения, согласованности, и простоты кода лучше всего опускать все необязательные теги, а не некоторые из них). </p><p><b><span>Не рекомендуется:
</span>
</b> <!DOCTYPE html>
<html>
<head>
<title>Тратим байты - тратим деньги.</title>
</head>
<body>
</body>
</html>
<br><b>Рекомендуется:
</b> <!DOCTYPE html>
<title>Байты-деньги!</title>
<p>Так-то
</p><h4>Атрибут "type"</h4> <b> Не указывайте атрибут <b>type
</b>
при подключении стилей и скриптов в документ.
</b> <p>Не используйте атрибут <b>type
</b>
при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript). </p><p>Указывать атрибут <b>type
</b>
в данном случае не обязательно потому что HTML5 использует text/css (англ.) и text/javascript (англ.) по умолчанию. Это будет работать даже в старых браузерах. </p><p><b><span>Не рекомендуется:
</span>
</b> <link rel="stylesheet" href="http://www.google.com/css/maia.css"
type="text/css">
<br><b>Рекомендуется:
</b> <link rel="stylesheet" href="http://www.google.com/css/maia.css">
<br><b><span>Не рекомендуется:
</span>
</b> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"
type="text/javascript"></script>
<br><b>توصیه شده:</b> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
</p><h3>قوانین قالب بندی HTML</h3><h4>قالب بندی</h4>یک خط جدید برای هر بلوک، جدول یا عنصر فهرست ایجاد کنید و هر عنصر فرزند را تورفتگی کنید. <p>صرف نظر از سبک های تنظیم شده برای عنصر (CSS به شما امکان می دهد رفتار عنصر را با استفاده از ویژگی تغییر دهید <b>نمایش دادن</b>)، هر بلوک یا عنصر جدول را روی یک خط جدید بپیچید.</p><p>همچنین تورفتگی برای تمام عناصر تو در تو در یک بلوک یا عنصر جدول قرار دهید.</p><p>(اگر با فضای خالی بین آیتم های لیست مشکل دارید، می توانید همه را قرار دهید <b>لی</b>عناصر در یک خط Lintu [ابزار برای بررسی کیفیت کد تقریباً برای.] توصیه می شود در این صورت به جای خطا، اخطار داده شود.</p>
</blockquote>
<br><b>توصیه شده:</b> <ul>
<li>ماشا <li>گلاشا <li>چبوراش</ul>
<br><b>توصیه شده:</b> <table>
<thead>
<tr>
<th scope="col">سود <th scope="col">مالیات <tbody>
<tr>
<td>$ 5.00
<td>$ 4.50
</table>
</p><h3>قوانین یک ظاهر طراحی CSS</h3><h4>اعتبار CSS</h4> <b>تا حد امکان از CSS معتبر استفاده کنید.</b> <p>به جز در مواردی که به کد خاص مرورگر نیاز است یا خطاهای اعتبارسنجی، از کد CSS معتبر استفاده کنید.</p><p>از ابزارهایی مانند W3C CSS Validator برای اعتبارسنجی کد خود استفاده کنید.</p><p>اعتبار یک کیفیت مهم و در عین حال قابل اندازه گیری یک کد است. نوشتن CSS معتبر به خلاص شدن از شر کدهای اضافی کمک می کند و استفاده صحیح از شیوه نامه ها را تضمین می کند…</p><h4>شناسه و نام کلاس ها</h4> <b>از نام ها و شناسه های کلاس عمومی یا معنی دار استفاده کنید.</b> <p>به جای استفاده از رمز، یا توصیف ظاهر یک عنصر، سعی کنید معنای ایجاد آن را به نام یک کلاس یا شناسه بیان کنید یا به آن یک نام عمومی بدهید.</p><p>نام‌های وایلدکارت‌ها صرفاً گونه‌ای از نام برای عناصری هستند که هدف خاصی ندارند یا با خواهر و برادرشان تفاوتی ندارند. آنها معمولاً به عنوان "یاران" مورد نیاز هستند.</p><p>استفاده از نام های کاربردی یا الگو، نیاز به تغییرات غیر ضروری در سند یا الگوها را کاهش می دهد.</p><p><b><span>توصیه نمیشود:</span>
</b>/* منسوخ شده: معنی ندارد */ #yee-1901 () /* منسوخ شده: توضیحات ظاهری */ .button-green () .clear () <br><b>توصیه شده:</b>/* توصیه شده: به نقطه و به نقطه */ #gallery () #login () .video () /* Recommended: wildcard name */ .aux () .alt ()</p><h4>نام شناسه ها و کلاس ها</h4>برای شناسه ها و کلاس ها، تا جایی که لازم است از نام های طولانی، اما تا حد امکان کوتاه استفاده کنید. <p>سعی کنید دقیقاً آنچه را که این عنصر باید انجام دهد، در حالی که تا حد امکان مختصر است، فرموله کنید.</p><p>این استفاده از کلاس‌ها و شناسه‌ها به درک راحت‌تر و کارآمدتر کد کمک می‌کند.</p><h4>انتخابگرهای تایپ</h4> <b>از استفاده از نام کلاس یا شناسه با انتخابگرهای نوع عنصر (برچسب) خودداری کنید.</b> <p>به جز موارد ضروری (مثلاً با کلاس های کمکی)، از نام عناصر با نام کلاس یا شناسه استفاده نکنید.</p><h4>اختصارات خواص</h4> <b>در صورت امکان از نوشته های مختصر شده اموال استفاده کنید.</b> <p>CSS فرم های کوتاه نویسی مختلفی را ارائه می دهد (به عنوان مثال، <b>فونت</b>) که توصیه می شود تا حد امکان از آنها استفاده شود، حتی اگر فقط یکی از مقادیر مشخص شده باشد.</p><p>استفاده از مختصر ویژگی برای کارایی بیشتر و درک بهتر کد مفید است.</p><p><b><span>توصیه نمیشود:</span>
</b>/* توصیه نمی شود */ border-top-style: none; font-family: palatino, georgia, serif; اندازه فونت: 100% ارتفاع خط: 1.6; بالشتک پایین: 2em padding-left: 1em padding-right: 1em; padding-top: 0; <br><b>توصیه شده:</b>/* توصیه شده */ border-top: 0; فونت: 100%/1.6 palatino, georgia, serif; بالشتک: 0 1em 2em;</p><h4>0 و واحد</h4> <b>واحدها را برای مقادیر تهی مشخص نکنید</b> <p>واحدها را برای مقادیر تهی مشخص نکنید مگر اینکه دلیلی برای آن وجود داشته باشد.</p><h4>0 در قسمت صحیح کسر</h4> <b>"0" را در قسمت صحیح اعداد کسری قرار ندهید.</b> <p>آن را قرار ندهید <b>0
</b>در قسمت عدد صحیح در مقادیر بین -1 و 1.</p><h4>نقل قول ها در لینک ها</h4> <b>از نقل قول در پیوندها استفاده نکنید</b> <p>از نقل قول استفاده نکنید ( <b>""
</b>
, <b>""
</b>) با <b>url()</b>
. </p><h4>نام رنگ های هگزادسیمال</h4> <b>در صورت امکان از نماد هگزادسیمال سه کاراکتری استفاده کنید.</b> <p>نماد هگزادسیمال سه نویسه برای رنگ ها کوتاه تر است و فضای کمتری را اشغال می کند.</p><h4>پیشوندها</h4> <b>انتخابگرهای پیشوند با پیشوندهایی که مختص برنامه فعلی هستند. <span><b>(لازم نیست)</b>
</span>
</b> <p>در پروژه های بزرگ و در کدهایی که برای پروژه های دیگر یا سایت های دیگر استفاده می شود، از پیشوندها (به عنوان فضای نام) برای شناسه ها و نام کلاس ها استفاده کنید. از نام‌های کوتاه و منحصربه‌فرد به دنبال خط فاصله استفاده کنید.</p><p>استفاده از فضای نام به جلوگیری از تضاد نامگذاری کمک می‌کند و می‌تواند نگهداری سایت را آسان‌تر کند. به عنوان مثال، هنگام جستجو و جایگزینی.</p><h4>جداکننده ها در کلاس ها و شناسه ها</h4> <b>کلمات را در شناسه ها و نام کلاس ها با خط فاصله جدا کنید.</b> <p>برای بهبود خوانایی و سهولت درک کد، از چیزی غیر از خط فاصله برای اتصال کلمات و اختصارات در انتخابگرها استفاده نکنید.</p><p><b><span>توصیه نمیشود:</span>
</b>/* منسوخ شده: کلمات "دمو" و "تصویر" از هم جدا نیستند */ .demoimage () /* منسوخ شده: به جای خط تیره */ .error_status () <br><b>توصیه شده:</b>/* توصیه شده */ #video-id() .ads-sample()</p><h4>خاکی</h4> <b>از استفاده از اطلاعات نسخه مرورگر یا «هک‌های» CSS خودداری کنید - ابتدا راه‌های دیگر را امتحان کنید.</b> <p>به نظر می رسد وسوسه انگیز است که با تفاوت در نحوه کار مرورگرهای مختلف با فیلترهای CSS، هک ها یا راه حل های دیگر کنار بیایید. تمام این رویکردها تنها در صورتی باید به عنوان آخرین راه حل در نظر گرفته شوند که بخواهید یک پایگاه کد کارآمد و به راحتی قابل نگهداری داشته باشید. به زبان ساده، اجازه دادن به هک و شناسایی مرورگر در درازمدت به پروژه آسیب می زند، زیرا به این معنی است که پروژه مسیر کمترین مقاومت را دنبال می کند. این کار استفاده از هک‌ها را آسان‌تر می‌کند و به شما امکان می‌دهد بیشتر و بیشتر از آنها استفاده کنید، که باعث می‌شود شما بیش از حد از آنها استفاده کنید.</p><h3>قوانین قالب بندی CSS</h3><h4>سفارش تبلیغات</h4> <b>تبلیغات را بر اساس حروف الفبا مرتب کنید.</b> <p>اعلان ها را به ترتیب حروف الفبا تنظیم کنید تا کدهای ثابتی را بدست آورید که کار با آن آسان است.</p><p>هنگام مرتب سازی، پیشوندهای مرورگر را نادیده بگیرید. در همان زمان، اگر چندین پیشوند مرورگر برای یک ویژگی استفاده شود، آنها نیز باید مرتب شوند (مثلا <b>-moz</b>باید قبل از <b>--وب کیت</b>
) </p><h4>تورفتگی در بلوک ها</h4> <b>همیشه محتوای بلوک را تورفتگی کنید.</b> <p>برای نشان دادن سلسله مراتب و درک راحت‌تر کد، همیشه هر محتوای بلوکی، مانند قوانین درون قوانین یا اعلامیه‌ها را تورفتگی کنید.</p><h4>بعد از تبلیغات</h4> <b>بعد از هر اعلان یک نقطه ویرگول قرار دهید.</b> <p>پس از هر اعلان برای سازگاری کد و آسان‌تر کردن افزودن ویژگی‌های جدید، از یک نقطه ویرگول استفاده کنید.</p><h4>بعد از نام اموال</h4> <b>از فاصله های بعد از دو نقطه در اعلان ها استفاده کنید.</b> <p>همیشه از یک فاصله بعد از دو نقطه (اما نه قبل از آن) در اعلان ها برای ترتیب در کد استفاده کنید.</p><h4>انتخاب شعبه و تبلیغات</h4> <b>انتخابگرها و اعلان ها را با یک خط شکسته جدا کنید.</b> <p>هر انتخابگر یا اعلان را در یک خط جدید شروع کنید.</p><h4>تفکیک قوانین</h4> <b>قوانین را با شکست خط جدا کنید.</b> <p>همیشه بین قوانین فاصله بگذارید.</p><h3>قوانین متا CSS</h3><h4>قوانین گروه بندی</h4> <b>قوانین را گروه بندی کنید و با نظر گروه ها را مشخص کنید. <span><b>(لازم نیست)</b>
</span>
</b> <p>تا حد امکان قوانین را در گروه ها ترکیب کنید. گروه هایی را با نظرات تعیین کنید و آنها را با شکست خط جدا کنید.</p><h3>نتیجه</h3><i>مقاوم باش</i> <p>اگر در حال ویرایش کد هستید، چند دقیقه وقت بگذارید تا بفهمید چگونه نوشته شده است. اگر عملگرهای ریاضی با فاصله از هم جدا شوند، همین کار را انجام دهید. اگر کامنت ها با پرانتز یا خط تیره احاطه شده اند، همین کار را با نظرات خود انجام دهید.</p><p>ایده پشت این راهنما ایجاد یک واژگان مشترک است که به توسعه دهندگان اجازه می دهد روی آن تمرکز کنند <b>چی</b>آنها می خواهند بیان کنند، نه اینکه چگونه <b>چگونه</b>. </p><p>ما قوانین طراحی یکنواختی را ارائه می دهیم که به شما امکان می دهد کد را به همان سبک بنویسید، اما سبک کدی که قبلاً در پروژه استفاده شده است نیز مهم است.</p><p>اگر کد شما بسیار متفاوت از کد موجود است، می تواند ریتم را از بین ببرد و خواندن آن را دشوار کند. سعی کنید از این کار اجتناب کنید.</p><h3>یادداشت از مترجم</h3>همچنین می‌خواهم توجه داشته باشم که گوگل در درجه اول بر روی پروژه‌های بزرگ و با بارگذاری بالا تمرکز می‌کند، جایی که هر بایت گران است، بنابراین باید در نظر داشت که اگر توصیه می‌کنند هر انتخابگر را در یک خط جدید شروع کنید یا از فاصله‌ها به جای زبانه‌ها استفاده کنید، سپس این در درجه اول به این معنی است که کد لزوما قبل از استفاده در سایت کوچک و فشرده می شود. <p>با تشکر از همه کسانی که تا این لحظه مطالعه کرده اند.</p><p>برچسب ها: اضافه کردن برچسب</p>
<p>مقاله کاملاً مرتبط نیست.</span><br>در نسخه 10.2 و بالاتر، امکان تغییر نام صفحه با قوانین سایت به طور مستقیم در پنل مدیریت موتور و در عین حال ویرایش مستقیم متن قوانین اضافه شده است. با این حال، صفحه قوانین سایت باقی می ماند. وجود دارد و در هر سایت DLE در http://my_site/rules.html قرار دارد <br>چگونه تمام آب را از این آدرس بیرون بیاوریم - ادامه مطلب را بخوانید</p>
<h4>صفحه با قوانین سایت در CMS DLE</h4>
<p>صفحه ای که قوانین سایت در آن وجود دارد یک صفحه ثابت سیستمی است. توسط موتور پردازش می شود و به همان روشی که یک صفحه آمار معمولی تولید می شود. فقط حذف آن غیرممکن است - توسط توسعه دهنده موتور ارائه نشده است. حتی اگر خود قوانین سایت برای نمایش در هنگام ثبت نام خاموش شوند، صفحه قوانین سایت همیشه در http://my_site/rules.html موجود است. نام. هوشمند نیست. پس از همه، در تمام سایت های DLE - همان چیزی است.</p>
<p>هنگامی که صفحه ای با قوانین سایت وارد نقشه سایت می شود، توسط موتور جستجو به عنوان "زباله" در نظر گرفته می شود و در فهرست جستجو قرار نمی گیرد، زیرا قوانین سایت تقریباً در همه جا یکسان است. بنابراین، صفحه دارای قوانین سایت در DLE، به طور پیش فرض، از فهرست بندی جستجو در فایل (بسته) منع شده است ( <i>خط غیر مجاز: /rules.html</i>).</p>
<h4>منحصر به فرد بودن "قوانین سایت"</h4>
<p>شخصاً نظر من در مورد صفحه دارای قوانین سایت و در مورد منحصر به فرد بودن آن یک آتاویسم است که توجه کاربر را هنگام ثبت نام منحرف می کند. قوانین سایت یک شاخه ابتدایی است که بی فایده بودن آن توسط سازمان دهندگان شبکه های اجتماعی با موفقیت ثابت شد.</p>
<p>نه، خوب، آیا کسی هنگام ثبت نام در فیس بوک یا توییتر قوانین شدید یا خاصی دیده است؟ یا شاید آنها در Vkontakte و Odnoklassniki هستند؟ خودشه!</p>
<p><i>و برخی از وب سایت ها، با حضور 1000 نفر منحصر به فرد - <br>شروع به نوشتن قوانین منحصر به فرد خود برای کاربران می کند. <br>در مورد من بهترین قوانین موجود در سایت غیبت کامل آنهاست. <br>اگر کاربر عادی و کافی باشد، همه چیز را می فهمد.</i></p>
<h4>بدون صفحه - مشکلی نیست</h4>
<p>بر کسی پوشیده نیست که مسدود کردن صفحات و دایرکتوری ها از نمایه سازی جستجو یک نوشدارویی نیست. به هر حال، هر صفحه از سایت دیر یا زود توسط موتور جستجو "جویده" می شود. به عنوان مثال، همان Yandex را بگیرید. ربات‌های جستجوگر او مطلقاً هر چیزی را که از سایت پیدا می‌کنند بیرون می‌آورند و تنها پس از آن شروع به مرتب‌سازی می‌کنند و به این فکر می‌کنند که آیا صفحاتی را برای جستجو صادر کنند یا نه. این کاملاً واضح است، علیرغم اینکه Yandex تضمین می کند که او و روبات هایش مطالب اضافی را از سایت دانلود نمی کنند. مانند، اگر یک صفحه وب از نمایه سازی بسته شود، Yandex فقط آدرس آن را که علامت گذاری شده ذخیره می کند <i>، یا</i>(چه کسی آن را می بندد).</p>
<p>به‌جای حفاری و مسدود کردن یک صفحه «زباله» با قوانین سایت از فهرست‌سازی جستجو، بهتر است آن را برای چیزهای مفید دیگری بازسازی کنید و دسترسی به آن را برای موتورهای جستجو باز کنید - اجازه دهید آنها آرام شوند. یا حداقل فقط رفتار خود را در سایت بنویسید و دوباره به موتورهای جستجو اجازه ورود به صفحه را بدهید.</p>
<h4>قوانین سایت را برای موتورهای جستجو باز کنید</h4>
<p>گامی جسورانه برمی داریم و دسترسی به صفحه با قوانین سایت را برای موتورهای جستجو باز می کنیم. برای انجام این کار، در فایل خود خط Disallow: /rules.html را پیدا کرده و nafik آن را حذف می کنیم. انجام شده است! اکنون، هر ربات جستجوگر می تواند به طور رسمی وارد "قوانین سایت" باز شود و البته "Fe-e!" و "بی ای!". برای جلوگیری از این اتفاق، ما صفحه "قوانین سایت" را بازسازی می کنیم - متن منحصر به فرد خود را در مورد هر موضوع، عکس درج کرده و نام (عنوان) صفحه را تغییر می دهیم.</p>
<h4>ویرایش صفحه "قوانین موجود در سایت".</h4>
<p>ویرایش صفحه با قوانین سایت در پنل مدیریت موتور DLE، در بخش "فهرست همه بخش ها" - "قوانین سایت" موجود است. ویرایش صفحه "قوانین در سایت" مانند هر صفحه ثابت دیگر - در حالت عادی ویرایشگر متن بصری انجام می شود. در اینجا، مشکلات فقط می تواند با نوشتن یک متن منحصر به فرد و انتخاب تصاویر منحصر به فرد باشد. کمی بالاتر، یک پنجره ویژه برای وارد کردن عنوان (عنوان) برای صفحه به روز شده وجود دارد. اما چنین نوآوری در نسخه 10.2 شروع شد.</p>
<p><i>برای تغییر نام صفحه قوانین سایت <br>در مدل های قدیمی موتور - <br>شما باید در فایل های سیستم آن جستجو کنید.</i></p>
<h4>تغییر نام صفحه به "قوانین سایت" <br>(برای CMS DLE 10.1 و پایین تر)</h4>
<p>تغییر نام مستقیم خود صفحه "قوانین در سایت" در فایل adminpanel.lng که در پوشه language/Russian/adminpanel.lng قرار دارد انجام می شود. فایل adminpanel.lng یک فایل سیستم موتور DLE است. برای ویرایش آن، به سرور خود بروید (در غیر این صورت - به هیچ وجه).</p>
<p>فایل adminpanel.lng را باز کنید. <br>ما به دنبال یک خط هستیم <br><b>"rules_edit" => "قوانین عمومی سایت"</b><br>ما کلمات "قوانین عمومی در سایت" را به نام جدید خود تغییر می دهیم. می بندیم - تعطیل می کنیم. پس انداز می کنیم. (شما فقط می توانید الفبای سیریلیک را که بین نقل قول ها قرار دارد تغییر دهید. در غیر این صورت، به طور کلی کار نمی کند.)</p>
<p><b>کش موتور و مرورگر را پاک کنید</b>. پس از ویرایش و ذخیره فایل adminlogs.lng، لازم است کش موتور و کش مرورگر را پاک کنید تا موتور مجبور شود صفحه را با نام جدید دوباره تولید کند و مرورگر آن را دانلود کند. اگر این کار کمکی نکرد و نام قدیمی همچنان نمایش داده می شود، باید به پنل مدیریت موتور بروید، صفحه "قوانین در سایت" را با رشته ای از یک علامت ناچیز ویرایش و دوباره ذخیره کنید. به عنوان مثال - یک نقطه در متن قرار دهید (سپس می توانید همه چیز را اصلاح کنید). چنین قلدری و بی رحمی قطعاً مغز موتور و سرور را پاک می کند و آنها را مجبور به تولید و نمایش نام جدید می کند.</p>
<p>فکر کردن با صدای بلند. احساس احترام می کند <b>celsoft</b>خواندن این وبلاگ کمی بعد، پس از این انتشار، در پنل مدیریت نسخه CMS DLE 10.2 موتور، امکان تغییر نام صفحه با قوانین سایت به صورت متمدنانه معمولی، بدون برداشتن خسته کننده در فایل های سیستم اسکریپت، فراهم شد. با تشکر فراوان از توسعه دهندگان CMS DLE برای کار و توجه آنها به مشکلات مردم عادی.</p>
<p>چه می کند <table rules="">انجام دادن؟ برای مشخص کردن نمایش مرزهای داخلی بین سطرها و ستون ها استفاده شد. این ویژگی منسوخ شده است. به جای آن از CSS برای استایل دادن به حاشیه های جدول استفاده کنید.</p><p>ویژگی Rules منسوخ شده است</span>این ویژگی منسوخ شده است و نباید استفاده شود. پشتیبانی مرورگر از این ویژگی محدود است و استفاده از آن ممکن است نتایج غیرمنتظره ای ایجاد کند. در عوض، از CSS برای استایل دادن به جداول استفاده کنید.</p><h2>ویژگی RULES</h2><p>RULES، یک ویژگی HTML 4.0، نشان می دهد که آیا باید مرزهای داخلی در جدول وجود داشته باشد یا خیر. ما به هر یک از مقادیر RULES می پردازیم و نحوه استفاده از آنها را نشان می دهیم. RULES و FRAME روشی آزاردهنده برای تغییر پیش فرض های یکدیگر دارند. برای ساده‌تر کردن زندگی‌تان، یک قانون کلی وجود دارد: اگر از RULES استفاده می‌کنید، از FRAME و BORDER نیز استفاده کنید. جلوگیری از سردرگمی آسان‌تر است.</p><h2><span>مقدار NONE برای ویژگی RULES</span></h2><p>RULES=NONE به این معنی است که هیچ مرز داخلی وجود ندارد. اگر از BORDER استفاده نکنید یا آن را روی صفر تنظیم کنید RULES=NONE پیش فرض است، اما در غیر این صورت باید به صراحت بیان شود که هیچ مرز داخلی ندارد. توجه داشته باشید که در حال حاضر Netscape RULES را نمی شناسد.</p><p> <TABLE BORDER=2 RULES=NONE FRAME=BOX>
</p><table border="2" rules="NONE"><tr><th>نام</th><th>غذا</th>
</tr><tr><td>گل ستاره</td><td>توفو را هم بزنید</td>
</tr><tr><td>میکو</td><td>سوپ سبزی برنج</td>
</tr><tr><td>اندی</td><td>حمص</td>
</tr><tr><td>پینگ کنید</td><td>نان تست فرانسوی</td>
</tr></table><h2><span>ALL ارزش برای ویژگی RULES</span></h2><p>RULES=ALL نشان می دهد که تمام مرزهای داخلی باید قابل مشاهده باشند. RULES=ALL معمولاً همراه با FRAME=VOID استفاده می شود تا مرزهای بیرونی وجود داشته باشد اما مرزهای داخلی وجود نداشته باشد.</p><p> <TABLE BORDER=2 FRAME=VOID RULES=ALL>
</p><p>وقتی روی یک جدول اعمال می شود، این مقدار این نتیجه را به ما می دهد:</p><table border="2" rules="ALL"><tr><th>نام</th><th>غذا</th>
</tr><tr><td>گل ستاره</td><td>توفو را هم بزنید</td>
</tr><tr><td>میکو</td><td>سوپ سبزی برنج</td>
</tr><tr><td>اندی</td><td>حمص</td>
</tr><tr><td>پینگ کنید</td><td>نان تست فرانسوی</td>
</tr></table><h2><span>مقدار COLS برای ویژگی RULES</span></h2><p>COLS نشان می دهد که باید مرزهایی بین ستون ها وجود داشته باشد اما بین ردیف ها وجود ندارد.</p><p> <TABLE BORDER=2 RULES=COLS FRAME=BOX>
</p><p>وقتی روی یک جدول اعمال می شود، این مقدار این نتیجه را به ما می دهد:</p><table border="2" rules="COLS"><tr><th>نام</th><th>غذا</th>
</tr><tr><td>گل ستاره</td><td>توفو را هم بزنید</td>
</tr><tr><td>میکو</td><td>سوپ سبزی برنج</td>
</tr><tr><td>اندی</td><td>حمص</td>
</tr><tr><td>پینگ کنید</td><td>نان تست فرانسوی</td>
</tr></table><h2><span>مقدار ROWS برای ویژگی RULES</span></h2><p>RULES=ROWS نشان می دهد که باید مرزهایی بین سطرها وجود داشته باشد اما بین ستون ها نه.</p><p> <TABLE BORDER=2 RULES=ROWS FRAME=BOX>
</p><p>وقتی روی یک جدول اعمال می شود، این مقدار این نتیجه را به ما می دهد:</p><table border="2" rules="ROWS"><tr><th>نام</th><th>غذا</th>
</tr><tr><td>گل ستاره</td><td>توفو را هم بزنید</td>
</tr><tr><td>میکو</td><td>سوپ سبزی برنج</td>
</tr><tr><td>اندی</td><td>حمص</td>
</tr><tr><td>پینگ کنید</td><td>نان تست فرانسوی</td>
</tr></table><h2><span>مقدار GROUPS برای ویژگی RULES</span></h2><p>RULES=GROUPS به شما امکان می دهد مرزهایی را بین گروه های سلول های جدول قرار دهید. دو روش برای گروه بندی سلول ها وجود دارد: بر اساس ردیف و ستون. بیایید به هر یک از آنها بپردازیم. توجه داشته باشید که در حال حاضر Netscape RULES را نمی شناسد.</p><h3>گروه بندی بر اساس ردیف</h3><p>برای گروه بندی بر اساس ردیف از <THEAD ...> , <TBODY ...> , <TFOOT ...>برچسب ها <THEAD ...>ردیف های سرصفحه جدول را نشان می دهد، <TBODY ...>بدنه اصلی جدول را نشان می دهد و <TFOOT ...>ردیف های پایین را نشان می دهد. به عنوان مثال، این کد یک جدول با سه گروه ایجاد می کند. مرزها فقط بین گروه ها ظاهر می شوند:</p><p> <TABLE BORDER=2 RULES=GROUPS> <THEAD> <TR><TH>نام</TH><TH>غذا</TH><TH>قیمت</TH></TR> </THEAD> <TBODY> <TR><TD>گل ستاره</TD><TD>توفو را هم بزنید</TD><TD>5.95</TD></TR> <TR><TD>میکو</TD><TD>سوپ سبزی برنج</TD><TD>4.95</TD></TR> <TR><TD>اندی</TD><TD>حمص</TD><TD>3.95</TD></TR> <TR><TD>پینگ کنید</TD><TD>نان تست فرانسوی</TD><TD>5.95</TD></TR> </TBODY> <TFOOT> <TR><TH COLSPAN=2>جمع</TH><TD>20.80</TD></TR> </TFOOT> </TABLE>
</p><p>در اینجا نحوه نمایش آن جدول آمده است:</p><table border="2" rules="GROUPS"><tr><th>نام</th><th>غذا</th><th>قیمت</th>
</tr><tbody><tr><td>گل ستاره</td><td>توفو را هم بزنید</td><td>5.95
</td>
</tr><tr><td>میکو</td><td>سوپ سبزی برنج</td><td>4.95
</td>
</tr><tr><td>اندی</td><td>حمص</td><td>3.95
</td>
</tr><tr><td>پینگ کنید</td><td>نان تست فرانسوی</td><td>5.95
</td>
</tr></tbody><tr><th colspan="2">جمع</th><td>20.80
</td>
</tr></table><h3>گروه بندی بر اساس ستون</h3><p>برای گروه بندی بر اساس ستون از <COLGROUP ...>برچسب و ویژگی SPAN آن. <COLGROUP ...>کمی به عادت کردن نیاز دارد زیرا در واقع هیچ سلول جدولی را دور نمی‌زند. در بالای کد جدول قرار می‌گیرد، جایی که قوانینی را در مورد ستون‌های جدول تنظیم می‌کند که شامل آن‌هایی است که با هم گروه‌بندی شده‌اند. <COLGROUP SPAN="...">نشان می دهد که در هر گروه چند ستون وجود دارد. اگر SPAN را کنار بگذارید، فرض می شود که گروه فقط یک ستون دارد. برای مثال کد زیر می گوید که ستون اول به تنهایی در یک گروه قرار دارد و سه ستون بعد از آن در یک گروه قرار دارند. توجه کنید که <COLGROUP ...>به یک برچسب پایان نیاز دارد. مرزها فقط بین گروه ها خواهد رفت.</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/kak-zarabotat-domohozyaike-sidya-doma-s-detmi-idei-zarabotka-dlya.html">
<div class="img_container"><img src="/uploads/1115382c2671696d6a5aff94927450d1.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/interesnye-fakty-o-kompyuterah-dlya-shkolnikov-prezentaciya-na.html">
<div class="img_container"><img src="/uploads/0dcf5510819eedf16ebccba2c0f86655.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/chem-napolnit-gruppu-v-vk-kontent-dlya-gruppy-vkontakte-gde-iskat-temy-dlya.html">
<div class="img_container"><img src="/uploads/e51fd73f26f7871b9d448013265f66ea.jpg" border="0" alt="محتوای گروه VKontakte: جایی که می توان موضوعات مقالات و عکس ها را جستجو کرد" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">محتوای گروه VKontakte: جایی که می توان موضوعات مقالات و عکس ها را جستجو کرد</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="https://vk.com/share.php?url=https://bumotors.ru/pravila-postroeniya-html-dokumentov-vlozhennye-pravila.html" class="vk social-ico"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/pravila-postroeniya-html-dokumentov-vlozhennye-pravila.html" class="fb social-ico"></a>
<a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Ffa%2Fpravila-postroeniya-html-dokumentov-vlozhennye-pravila.html" 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">© 2022 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی</span>
</div>
</div>
</div>
</div>
</body>
</html>]]>
