برچسب هایی که برای نمایش بخش هایی از کد برنامه طراحی شده اند. یادداشت در مورد استفاده از کدهای BB (bbCode). اتصال اسکریپت طراحی کد
مقدمه
bbCode - کد تابلوی اعلانات یا زبان نشانه گذاری که برای قالب بندی پیام ها در بسیاری از تابلوهای اعلانات (BBS) و انجمن ها استفاده می شود. قالب بندی متن از تگ هایی مشابه تگ های HTML استفاده می کند. برخلاف تگهای HTML، تگهای bbCode در براکتهای مربعی محصور میشوند. قبل از نمایش صفحه، موتور انجمن متن را تجزیه می کند و bbCode را به کد HTML تبدیل می کند.
در بسیاری از انجمن ها، امکان استفاده از کدهای BB توسط مدیر به صورت جداگانه برای هر بخش از انجمن پیکربندی می شود. بنابراین، قبل از استفاده از کدهای BB در پیام ها، باید از مجاز بودن آنها اطمینان حاصل کنید.
قالب بندی فونت
برچسب های اصلی برای کار با متن:
[p] پاراگراف دارای تورفتگی منظم.
پاراگرافی که می توان به آن استایل داد. متن
* از این پس، "style" آنالوگ سبک در HTML است.
متن در HTML مشابه است
** با تگ های [p] می توانید از تگ های دیگری مانند [b]، [i]، [s] و غیره استفاده کنید.
متنی که ویژگی های آن را می توان با استفاده از استایل تغییر داد.
یک ناحیه محدود که میتوان برای تغییر ویژگیهای آن (موقعیت، حاشیه، بالشتک، ویژگیهای محتوا و غیره) استایلبندی کرد.
* به طور پیش فرض، مرزهای ناحیه قابل مشاهده نیستند. ممکن است چندین ناحیه در یک صفحه به طور همزمان وجود داشته باشد.
قالب بندی متن:
[ب] متن مهم، پررنگ
[من] متن مهم، ایتالیک
فقط جسورانه
فقط خط شکسته
[u] متن خط دار
[s] متن خط خورده - مشابه گزینه
فونت کاهش یافته
علامت پاورقی در بالا یا نمایه زیر متن
متن حذف شده
اندازه فونت:
فونت 13 نقطه ای
فونت 15 نقطه ای
اندازه فونت 9 پیکسل
اندازه فونت 12 پیکسل
اندازه فونت 15 پیکسل
سایز 0
سایز +1
سایز +2
اندازه های احتمالی فونت (ارزیابی بصری) در دسترس است.
عناوین:
عنوان سطح 1
عنوان سطح 2
عنوان سطح 3
عنوان سطح 4
عنوان سطح 5
عنوان سطح 6
قالب بندی متن با فونت:
فونت Comic Sans Ms
فونت Corsiva Monotype
فونت Tahoma
گزینه های احتمالی نوع فونت (نام و ارزیابی بصری) در دسترس هستند.
تزیین متن با رنگ:
متن قرمز
* می توانید از علامت های کلامی استاندارد برای رنگ ها استفاده کنید: قرمز، سبز، آبی و غیره.
متن آبی
* عدد #0000ff به معنای رنگ آبی در پالت RGB است.
پس زمینه آبی
* رنگ پس زمینه نیز قابل تغییر است.
متن آبی، پس زمینه خاکستری
چند رنگ از پیش تعریف شده:
سیاه سفید قرمز سبز آبی بنفش آجر نسوز مارون نارنجی قرمز MidnightBlue CornflowerBlue
زرد فیروزه ای سرخابی سبز تیره تیره طلایی طلایی ارکیده آبی بنفش بورلیوود هلو
برخی از رنگ ها در کد هگزادسیمال - شدت قرمز، سبز و آبی (RR GG BB):
#000000 #FFFFFF #FF0000 #00FF00 #0000FF #FF00FF #FF4444 #FF9999 #FFCCCC #9999FF #FF99FF #DDDDDD #FFE4C4 #CCCC99 #FF8DC #FA8072 #930000FF #930000000 #930000000 #930000000 #930000000 #9300000000 #9300000000 #0FF3000F #FFA500 #C71585 #8B008B #CC33FF
انواع احتمالی پالت رنگ و کد/نام آنها در دسترس است.
چینش متن و قالب بندی پاراگراف
تراز متن:
متن را در سمت چپ تراز کنید
تراز چپ با سبک
تراز کردن در یک پاراگراف به سمت چپ
تراز متن در مرکز
تراز وسط با سبک
تراز وسط در یک پاراگراف
تراز کردن متن به سمت راست
راست با سبک تراز کنید
تراز سمت راست پاراگراف
متن را در هر دو طرف توجیه کنید
از هر دو طرف با استایل تراز کنید
تراز پاراگراف در هر دو طرف
* توجیه متون در دو طرف برای متون طولانی تر از یک خط نمایش داده می شود.
قالب بندی پاورقی ها (نظرات) با تورفتگی پاراگراف:
[q] نقل قول درون خطی
نقل قول در راستای خواص
متن نقل قول در یک بلوک جداگانه، که خواهد بود
یک تورفتگی کوچک در سمت چپ و یک طرح خاص (سبک انجمن).
مثال ها:
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
قالب بندی پاراگراف ها و حوزه ها:
سلام! در این پاراگراف، اولین جمله از خط "قرمز" خواهد بود، یعنی. تورفتگی درست مثل تایپوگرافی. درست است، این یک عمل نادر در اینترنت است. پاراگراف ها باید فقط با یک فضای خالی از هم جدا شوند.
متن از پیش فرمت شده تورفتگی را در سمت چپ و بین کلمات حفظ می کند و تورفتگی را روی هر چیزی که به عنوان فاصله مشخص می کنید تنظیم می کند. هشدار! تگ به طور خودکار خط را نمی شکند!قالب بندی لیست
از تگ یا برای لیست های گلوله ای استفاده کنید:
- یکی از آیتم های لیست
- یکی دیگر از این موارد
- یه نکته دیگه
[*] یکی دیگر از موارد مشابه
[*] یک نکته دیگر.
برای لیست های شماره گذاری شده، از تگ استفاده کنید:
- یکی از آیتم های لیست
- یکی دیگر از این موارد
- یه نکته دیگه
[*] یکی از موارد فهرست
[*] یکی دیگر از موارد مشابه
[*] یک نکته دیگر.
تگ بسته شدن اختیاری است:
- یکی از آیتم های لیست
- یکی دیگر از این موارد
- یه نکته دیگه
[*] یکی از موارد فهرست
[*] یکی دیگر از موارد مشابه
[*] یک نکته دیگر.
همچنین می توان مستقیماً نوع لیست را مشخص کرد:
- لیست شماره گذاری شده
- فهرست حروف الفبا
- لیستی که با اعداد رومی شماره گذاری شده است
تصاویر
Http://img.cx/img/primer.jpg - نمونه ای از درج یک تصویر.
Http://img.cx/img/primer.jpg - تصویر سمت چپ.
Http://img.cx/img/primer.jpg - تصویر سمت راست.
* کد داده شدهمشابه کد در HTML:
Http://img.cx/img/primer.jpg - تصویر در مرکز.
* این کد مشابه کد موجود در HTML است:
برچسب های مشابه با نام و نکات ابزار:
مهم! در عنوان عکس نمی توانید از علامت نقل قول استفاده کنید!
Http://img.cx/img/primer.jpg - نمونه ای از درج یک تصویر.
Http://img.cx/img/primer.jpg - تصویر سمت چپ.
Http://img.cx/img/primer.jpg - تصویر سمت راست.
Http://img.cx/img/primer.jpg - تصویر در مرکز.
تصاویر با اندازه های مشخص شده:
Http://img.cx/img/primer.jpg - نمونه ای از یک عکس با اندازه.
* این کد مشابه کد موجود در HTML است:
Http://img.cx/img/primer.jpg - تصویر سمت چپ، با اندازه.
Http://img.cx/img/primer.jpg - تصویر سمت راست، با اندازه.
درج تصاویر بزرگ با نوارهای پیمایش:
Http://www..jpg - تصویری در ناحیه انتخاب شده اگر بزرگتر از اندازه نمایش موجود در انجمن باشد.
آدرس - تصویر را در یک پنجره جدید باز کنید.
* این کد مشابه کد موجود در HTML است:
آدرس - تصویر را در همان پنجره باز کنید.
* این کد مشابه کد موجود در HTML است:
در رابطه با نگهداری این وبلاگ، هر از چند گاهی مجبور می شوم قطعات html را وارد سایت کنم و کد css. در روند اجرای یک راه حل معمولی، معلوم شد که به دلایلی نمی توان شرح مناسبی از راه حل های آماده به زبان روسی پیدا کرد، بنابراین باید خودتان شکاف را پر کنید.
بیایید ساده شروع کنیم:
چگونه کد html را در متن وارد کنیم؟
برای درج یک یا دو تگ در متن سایت می توانید از نمادهای html استفاده کنید< для вставки < и символ >برای درج > so تگ کنید
AT کد htmlاملا ماننددرج کدهای بزرگ در سایت.
برای درج خود کد html در سایت، سه تگ وجود دارد:
وو
برچسب بزنید
بلوکی از متن از پیش فرمت شده را نشان می دهد. یعنی متنی که تمام فاصله ها و خط تیره ها از قبل در آن قرار گرفته اند. به طور پیش فرض در مرورگر، محتویات برچسببا فونت monospace و با تمام فاصله بین کلمات نمایش داده می شود. در برچسبتمام فاصله ها نمایش داده می شوند و تمام خطوط شکست در نظر گرفته می شوند (HTML پیش فرض چندین فاصله را نادیده می گیرد و آنها را به یک تبدیل می کند). داخل ظرفشما می توانید از هر برچسبی به جز موارد زیر استفاده کنید: , ,برچسب بعدی است
به طور خاص برای نمایش صفحه نمایش کد برنامه طراحی شده است. به طور پیش فرض در مرورگر، محتویات برچسب
در متن تک فاصله کوچک نمایش داده می شود. تگ فضاهای اضافی و شکست های متنی را در نظر نمی گیرد، در نتیجه باید از برچسب ها برای شکستن خط استفاده شود.
وبرچسب بزنید
با این حال، از نظر استاندارد html معتبر نیست این لحظهتوسط تمام مرورگرها پشتیبانی می شود. تگ محتویات کانتینر را به صورت متن ساده با تمام فاصله ها و خط فاصله نمایش می دهد. تا زمانی که تگ کانونیزه نشود، استفاده از آن غیر کوشر و بدعت تلقی می شود. راه حل صحیح در حال حاضر استفاده از تگ است
با برچسب های تو در تودر مکان هایی که نیاز است. از نظر فنی، برچسب
ما باید از قطعات کدی که به دلایلی از برچسب خارج می شوند فرار کنیم
چگونه با جی کوئری به کدهای html استایل بدیم؟
ما از اسکریپت Snippet در وب سایت خود استفاده می کنیم. این قطعه برای سادهسازی طراحی بصری نمونههای کد در نظر گرفته شده است. اسکریپت به این صورت عمل می کند:
Div.blog_right h2 (اندازه قلم: 24 پیکسل؛ رنگ: #ff9933؛ حاشیه پایین: 9 پیکسل؛ ارتفاع خط: 44 پیکسل؛ فونت-خانواده: "arial"، "verdana"، sans-serif، "Lucida Sans"؛ فونت -وزن: 100؛ حاشیه بالا: 0.83 میلی متر؛ )
اتصال اسکریپت طراحی کد:
2) شامل فایل های js و css. همچنین، به کتابخانه Jquery موجود نیاز دارید.
3) اسکریپت را تنظیم کنید:
$(document).ready(function()($("pre.htmlCode").snippet("html",(style:"acid")); // به دنبال برچسب ها بگردید
با کلاس "htmlCode" // و سبک اسید و پردازش html را به این عناصر اضافه کنید $("pre.styles").snippet("css",(style:"acid")); // در جستجوی برچسب هابا کلاس "styles" // و سبک اسید و پردازش CSS را به این عناصر متصل کنید $("pre.js").snippet("javascript",(style:"acid")); // در جستجوی برچسب هابا کلاس "js" // و به این عناصر، سبک اسید و پردازش برای )) را متصل کنید.4) مستندات پیچیده تر برای اسکریپت در وب سایت توسعه دهندگان است. اسکریپت میتواند طرح را به سرعت تغییر دهد، کدهای لازم را در قابها برجسته کند، زبالهها را بیرون بیاورد و غذا بپزد.
میزبانی. قالب های آماده سایت a {text-decoration: none; font-size: 8pt; color: #E0FDAF; }
a: hover {text-decoration: underline; font-size: 8pt; color: #E0FDAF; }
font { font-family: Arial, Tahoma, Helvetica; font-size: 8pt; color: white; }
b. yellow {color: #FAF294; }
hr {color: #D1D33B; }
hr. bw {color: black; }
font. green { font-family: Arial, Tahoma, Helvetica; font-size: 8pt; color: #B5FC39; }
font. title { font-family: Arial, Tahoma, Helvetica; font-size: 14pt; color: #ffffff; }
font. title1 { font-family: Arial, Tahoma, Helvetica; font-size: 16pt; color: black; }
font. title2 { font-family: Arial, Tahoma, Helvetica; font-size: 20pt; color: #D2A801; }
font. title3 { font-family: Arial, Tahoma, Helvetica; font-size: 14pt; color: black; }
font. title4 { font-family: Arial, Tahoma, Helvetica; font-size: 16pt; color: white; }
font. black { font-family: Arial, Tahoma, Helvetica; font-size: 8pt; color: black; }
font. blackt { font-family: Arial, Tahoma, Helvetica; font-size: 14pt; color: #ffffff; }
font. blacklm { font-family: Arial, Tahoma, Helvetica; font-size: 8pt; color: black; }
font. blacklm2 { font-family: Arial, Tahoma, Helvetica; font-size: 7pt; color: black; }
font. blacklight { font-family: Arial, Tahoma, Helvetica; font-size: 10pt; color: white; }
font. blacklight2 { font-family: Arial, Tahoma, Helvetica; font-size: 10pt; color: black; font-weight: bold }
font. tse { font-family: Arial, Tahoma, Helvetica; font-size: 8pt; color: #96B495; }
|