چگونه یک کتیبه زیبا در html بسازیم. چگونه یک فونت زیبا در html بسازیم: اندازه ها، رنگ ها، تگ های فونت html. متن به طور پیش‌فرض تراز شده است.

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

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

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

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

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

§ 2. خود برچسب ها برای قالب بندی

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

محبوب ترین برچسب ها برای قالب بندی متن عبارتند از:

• - برای برجسته کردن متن استفاده می شود پررنگ.


• - استفاده می شود خط شکستهمتن پیشنهاد می شود به جای این تگ از تگ استفاده کنید.


• - اجازه خواهد داد اهمیت دادنمتن نکته اصلی در اینجا این است که کاربر متن زیرخط دار را با پیوند اشتباه نگیرد.


• - متن را خط خطی می کند.


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

  H2 O

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



• - مورد نیاز برای برجسته کردن متن بالانویس (بالانویس). مثلاً برای نوشتن قدرت: می نویسیم

  (a+b)2,

  ما گرفتیم

  (الف + ب) 2.

در تمام این تگ ها برای قالب بندی متن، می توانید یکی یکی یا چند تا را با هم استفاده کنید. این امر با قرار دادن تگ ها در یکدیگر به دست می آید. به عنوان مثال، کد html زیر:

H2O فرمول آب است.

هنگام مشاهده

H2O- این هست فرمول آب

§ 3. پاراگراف ها

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

به این صورت خواهد بود:

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

§ 4. تراز کردن متن

این ویژگی برای تراز کردن متن استفاده می شود. تراز کردنبا مقادیر ممکن مرکز، چپ، راستو توجیه. به ترتیب متن را در مرکز، چپ، راست و به طور همزمان در امتداد دو لبه به طور همزمان تراز می کند. برای مثال کد html:

align="center">متن به مرکز

متن را در مرکز تراز کنید:

متن وسط

و این کد:

راست">

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

تراز کردن متن به سمت راست

E if ویژگی تراز کردناستفاده نمی شود، متن تراز چپ خواهد شد. این به صورت پیش فرض اتفاق می افتد. مثال، کد:

متن را در سمت چپ تراز کنید

متن به طور پیش‌فرض تراز شده است.

§ 5. شکستن خط و نوار افقی

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

1. خط اول.
2. خط دوم.

در مرورگر به شکل زیر خواهد بود:

1. خط اول.
2. خط دوم.

در
بدون برچسب پایان احتمالاً قبلاً حدس زده اید که برای درج چندین خط خالی، باید برچسب را بنویسید
چندین بار متوالی

همچنین می توانید با استفاده از تگ قسمت هایی از متن را به صورت بصری جدا کنید. این تگ یک نوار جداکننده در صفحه ایجاد می کند (مثلاً مانند نوار سبز رنگ ابتدای این مقاله). تگ دارای ویژگی های زیر است:

• اندازه- ضخامت نوار؛


• عرض- عرض خط؛


• تراز کردن- هم ترازی؛


• رنگ- رنگ راه راه؛


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

برای مثال کد html:

align="center" size="5" width="50%" color="#3399ff">

در مرورگر به نظر می رسد

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

§ 6. سرفصل ها

برای تنظیم نام بخش ها و زیربخش ها در HTML از استفاده کنید برچسب های عنوان. سرفصل‌ها دارای شش سطح هستند که به شرح زیر تعیین می‌شوند:

• - عنوان سطح اول


• - عنوان سطح دوم


• - عنوان سطح سوم


• - عنوان سطح چهارم


• - عنوان سطح پنجم


• - عنوان سطح ششم

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

• تراز کردن- تراز متن عنوان در صفحه (مقادیر مانند تراز متن معمولی است)؛


• عنوان- راهنمای ابزار که وقتی ماوس را روی عنوان می‌برید ظاهر می‌شود.

به عنوان مثال، کد HTML:

align="center" title="(!LANG:Tip tooltip. ماوس خود را روی عنوان قرار دهید تا آن را ببینید.">Заголовок 4 уровня !}

در مرورگر به شکل زیر خواهد بود:

عنوان سطح 4

§ 7. کار با فونت

برای قالب بندی مستقیم فونت ها، HTML دارای یک برچسب است. این تگ دارای ویژگی های زیر است:

• رنگ- رنگ متن فونت؛


• صورت- تایپ فیس؛


• اندازه- اندازه متن فونت را می توان روی مطلق (از 1 تا 6) یا تنظیم کرد ارزش نسبی(1+ تا 6+ و 1- تا 6-). به طور پیش فرض، اندازه متن 3 است. اگر مشخص کنید اندازه = "+1"

§ 8. ایجاد لیست در HTML

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

در یک لیست مرتب، نشانگرها (مقادیر ویژگی type) عبارتند از:

• 1 - شماره گذاری به اعداد عربی (به طور پیش فرض)؛


• آ- حروف بزرگ به ترتیب حروف الفبا؛


• آ- حروف لاتین کوچک؛


• من- اعداد رومی بزرگ؛


• من- اعداد رومی کوچک.

مثلا کد HTML

عنصر اول
عنصر دوم
عنصر سوم.

مرورگر این را نشان خواهد داد.

این اتفاق می افتد که شما نیاز به نمایش یک تصویر و اختصاص یک نام (عبارت کوتاه) دارید. گزینه های زیر برای این وجود دارد:

Align="top" - متن را با بالای تصویر تراز می کند.
align="bottom" - متن را به پایین تراز می کند.
align="middle" - متن را با مرکز تراز می کند.

در زیر کدی وجود دارد که عملکرد پارامترهای فوق را نشان می دهد.

زنبور زیبا

زنبور خیلی بامزه

هم هیچی.

حال بیایید ببینیم که چگونه می توان یک عکس را با حجم زیادی از متن نمایش داد.
دو گزینه وجود دارد:

Align="left" - تصویر دور متن در سمت چپ می پیچد.
align="right" - تصویر "در اطراف متن می پیچد" در سمت راست.

برای وضوح، کد زیر را بنویسید:

شکل خورشید نزدیک به یک کره ایده آل با قطر 1392000 کیلومتر است. مدار ماه را در بر می گیرد و هنوز فضای زیادی وجود دارد. در واقع، بیش از یک میلیون سیاره مانند زمین به راحتی در خورشید جای می گیرند. همچنین، اگر بتوانید با سرعت 88 کیلومتر در ساعت ماشینی را روی سطح آن برانید، 5 سال و نیم طول می‌کشد تا یک بار (و بدون توقف) دور خورشید بچرخید. اما اندازه خورشید ثابت نیست. تحقیقات مدرننشان می دهد که قطر خورشید حدود 1 متر در ساعت در حال کاهش است. اگر این پدیده در قرن گذشته نیز اتفاق افتاده باشد، پس خورشیدی که اکنون می بینیم 800 کیلومتر کوچکتر از خورشیدی است که اجداد ما دیده اند. شاید این انقباض خورشیدی بخشی از یک نوسان طولانی مدت باشد که به تثبیت انتشار انرژی عظیم کمک می کند.

ماه

این تنها ماهواره طبیعی زمین است. جرم ماه 0.0123 جرم زمین (تقریباً 1/81) یا 7.6.1022 کیلوگرم است. قطر ماه کمی بیشتر از یک چهارم زمین (0.273) یا 3476 کیلومتر است. ماه 500000 بار کم نورتر از خورشید زمین را روشن می کند). هیچ جوی آشنا برای ما در ماه وجود ندارد، هیچ رودخانه و دریاچه، پوشش گیاهی و موجودات زنده وجود ندارد. نیروی گرانش در ماه شش برابر کمتر از زمین است. روز و شب با افت دما تا 300 درجه به مدت دو هفته ادامه دارد.

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

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

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

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

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

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

عناصر درون خطی با برچسب ها قاب می شوند ... .

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

مرورگرها در قاب div با شکست خط.

مسدود کردن

).

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

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

نمونه انتخاب متن:
21
22
23
24

 فونت پررنگ
فونت پررنگ
فونت کج
فونت کج

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

نشانه گذاری HTML
 

 
 
فیلمی در پارک: 
پاندای کونگ فو کار

البته، استفاده از عنصر div برای نمایش تصویر به عنوان تصویر پس‌زمینه آسان‌تر است، اما در این مورد فرض می‌کنم که تصویر محتوای سند است و بنابراین متعلق به HTML است.  عنصر div به عنوان محفظه ای برای موقعیت یابی مطلق متن در داخل آن استفاده خواهد شد.
css
.image ( موقعیت: نسبی؛ عرض: 100%؛ /* برای IE 6 */ ) h2 ( موقعیت: مطلق؛ بالا: 200 پیکسل؛ سمت چپ: 0؛ عرض: 100%؛ ) 
بنابراین، متن را مستقیماً در بالای تصویر قرار دادیم.  وظیفه بعدی ما ایجاد پس زمینه برای متن است.  از آنجایی که عنصر 
یک عنصر بلوک است، ما نمی توانیم از آن برای این اهداف استفاده کنیم.  بیایید از یک عنصر درون خطی استفاده کنیم .  بیایید متن داخل عنوان را در آن بپیچیم.

 
فیلمی در پارک: 
پاندای کونگ فو کار
ما از این فاصله برای استایل دادن به متن و پس‌زمینه استفاده می‌کنیم:
گستره H2 ( رنگ: سفید؛ فونت: پررنگ 24px/45px Helvetica, Sans-Serif؛ فاصله حروف: -1px؛ پس‌زمینه: rgb(0, 0, 0)؛ /* در صورتی که خط بعدی کار نکند */ پس‌زمینه: rgba (0، 0، 0، 0.7)؛ بالشتک: 10 پیکسل؛ )
چالش ها و مسائل

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

 

 فیلمی در پارک: 
 

 پاندای کونگ فو کار

با این دهانه های جدید، ویژگی padding را تنظیم می کنیم:
H2 span.spacer ( padding: 0 5px; )
در مورد معناشناسی چطور؟
در این مرحله طراحی کامل شده است اما یک مشکل باقی است.  یعنی تعداد زیادی از اضافی عناصر HTMLفقط برای اهداف طراحی اضافه شده است.  منظورم دهانه هاست.  برای حل این مشکل از jQuery استفاده می کنیم.  برای انجام این کار، تمام دهانه ها را در نشانه گذاری بردارید و به صورت پویا اضافه کنید:

 
فیلمی در پارک: 
پاندای کونگ فو کار
$(function() ($("h2").wrapInner(" "); $("h2 br").before(" ").بعد از(" ");
});