برای دریافت یک پاراگراف با فونت 12pt، باید ویژگی اندازه فونت آن را تنظیم کنید:

h3 (اندازه قلم: 24 پیکسل؛ )

با این کار اندازه سرفصل های سطح سوم به 24 پیکسل تغییر می کند. شما می توانید این ویژگی را به یک stylesheet خارجی اضافه کنید و همه هدرها از این مقدار استفاده خواهند کرد< h3>.

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

h3 (اندازه قلم: 24 پیکسل؛ رنگ: #000؛ وزن قلم: عادی؛ )

این نه تنها اندازه قلم را برای سرفصل های سطح سوم تعیین می کند، بلکه متن را سیاه می کند ( کد هگز #000 به چه معناست؟، و همچنین استایل را روی " طبیعی" به طور پیش فرض، مرورگرها عناوین h1-h6 را به صورت متن پررنگ نمایش می دهند. این سبک پیش فرض را لغو می کند و فونت را پررنگ نمی کند.

اندازه های تصویر

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

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

برای اندازه گیری یک تصویر در HTML، از تگ استفاده کنید با ویژگی های ارتفاع و عرض

به عنوان مثال، تصویر باید 400 در 400 پیکسل باشد:

height="400" width="400" alt="image" />!}

برای تنظیم ابعاد تصویر در CSS، از ویژگی های ارتفاع و عرض استفاده کنید. در اینجا همان تصویر است که از CSS برای اندازه گیری آن استفاده می شود:

style="height:400px; width:400px;" alt="image" />!}

ابعاد بلوک های اصلی در صفحه

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

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

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

برچسب ها و ویژگی های HTML: نحو پایه

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

در اصل، تگ‌های متنی HTML دستوراتی هستند که بلوک‌های خاصی را به صفحه اضافه می‌کنند یا ظاهر آن‌ها را تغییر می‌دهند. فرمت صحیح ضبط به صورت زیر است:

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

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

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

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

1. مقاله را از طریق Notepad "اجرا کنید" و تنها سپس آن را در سایت قرار دهید. برنامه تمام HTML را پاک می کند، بنابراین پس از آن باید دوباره متن را قالب بندی کنید (با استفاده از ابزار ویرایشگر یا دستی).
2. با استفاده از LiveWriter مقاله بنویسید و منتشر کنید. ویرایشگر محبوب وبلاگ بلافاصله کد صحیح را تولید می کند. و در یک تب جداگانه می توانید ببینید که متن روی سایت چگونه به نظر می رسد.
3. از HTML Cleaner استفاده کنید. این سرویس آنلاین کل کد را از بین نمی برد، بلکه فقط قطعات غیر ضروری را از بین می برد. با استفاده از فیلترها، شما انتخاب می کنید که کدام برچسب ها را می خواهید ذخیره کنید. همچنین یک ویرایشگر قالب‌بندی بصری قدرتمند وجود دارد که دستورات از قبل بهینه‌سازی شده را به کد اضافه می‌کند.

پاراگراف ها

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

همیشه روی یک خط جدید بنویسید.

هم ترازی

تگ جداگانه HTML "Text Alignment" مدت زیادی است که استفاده نشده است. در عوض، یک ویژگی ALIGN عمومی ایجاد شد. برای تغییر موقعیت یک بلوک متنی در صفحه، باید یکی از 3 مقدار - CENTER، RIGHT یا LEFT را انتخاب کنید. شما می توانید تراز را برای عناصر دیگر مانند سرفصل ها به همین ترتیب تنظیم کنید.

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

سرفصل ها و زیرعنوان ها

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

HTML از شش سطح زیرعنوان استفاده می کند - from

قبل از

. در این سیستم یک سلسله مراتب واضح وجود دارد:

• ...

  . مقاله اصلی، محصول در یک فروشگاه آنلاین و غیره). فقط یک مورد در متن می تواند وجود داشته باشد

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

• ...

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

  با نام مدل های مختلف

• ...

  . اگر متن بین دو باشد، سطح سوم مورد نیاز است

  همچنین به بلوک های کوچک تقسیم می شود. در مثال ما، اینها می توانند معیارهای ارزیابی باشند - "عملکرد"، "حافظه"، "کارت ویدئو" و غیره برای هر مدل.

• ,

  ,

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

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

یا

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

).

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

لیست ها

بهتر است هر فهرست و دستورالعملی را در قالب لیست با استفاده از تگ های HTML ویژه برای متن قالب بندی کنید (یک اشتباه معمولی فقط چند پاراگراف است.

که با خط فاصله یا عدد شروع می شود).

ساختار چنین بلوک هایی بسیار ساده است. ابتدا نوع لیست را تعیین می کنیم - گلوله ای یا شماره گذاری شده.

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

انتخاب و ویژگی های آن

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

چندین ویژگی دارد:

• صورت. به شما امکان می دهد فونت متن را تغییر دهید. می توانید چندین گزینه را لیست کنید که با کاما از هم جدا شده اند (Tahoma، Verdana). اگر کاربر اولین فونت را نصب نکرده باشد، سیستم به سادگی از یک جایگزین استفاده می کند.
• اندازه. برای بزرگتر یا کوچکتر کردن متن، مقداری بین 1 تا 7 در گیومه وارد کنید.
• رنگ. بسته به طرح، می توانید یکی از سایه های استاندارد (قرمز، سبز، آبی) را انتخاب کنید یا برای هر رنگی که انتخاب می کنید کدی را وارد کنید.

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

راه های برجسته کردن متن

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

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

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

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

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

... . یک برچسب جالب که به شما امکان می دهد بخشی را در تبلیغات بسیار مرتبط بسازید - به عنوان مثال، برای تأکید بر تضاد بین قیمت های قدیمی و جدید.

... . ساده ترین راه برای افزایش اندازه فونت بدون هیچ گزینه اضافی.

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

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

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

ظروف معنی دار

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

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

... . طراحی شده برای قالب بندی نقل قول ها - به عنوان مثال، گزیده های کلیدی از یک مصاحبه.

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