فرمت دهی در HTML
فرمت دهی متن در HTML
This text is big
This text is italic
This is computer outputThis is subscript and superscript
تگ های فرمت دهی در HTML
HTML از تگ های <b> و <i> برای bold و italic کردن متن ها استفاده می کند.
این تگ ها به تگ های فرمت دهی معروف هستند. (برای دیدن لیستی از این تگ ها به پایین این صفحه نگاه کنید.)
 |
اغلب <strong> نتیجه ای شبیه <b> و <em> نتیجه ای شبیه <i> بر می گرداند. امروزه تمام مرورگرهای اصلی، متن strong شده را به صورت bold و متن با فرمت em را به صورت italic نمایش می دهند. با این وجود، اگر مرورگری بخواهد متون با فرمت strong را highlight کند متون bold شده را highlight نمی کند. |
|---|
Text formatting
چگونه در یک سند HTML متنی را فرمت دهی کنیم.
Preformatted text
نحوه تنظیم فاصله ها و خط های جدید با استفاده از تگ pre.
"Computer output" tags
تگ های computer output به چه صورت هایی نمایش داده می شوند.
Address
چگونه اطلاعات تماس مالک یا نویسنده یک سند HTML را تعریف کنیم.
Abbreviations and acronyms
چگونه کلمات مخفف را بکار ببریم. (زمانی که اشاره گر موس روی سرنام یا مخفف عبارت مذکور قرار می گرد, عبارت به صورت کامل نمایش داده می شود)
Text direction
نحوه تغییر جهت متن (از آخر به اول).
Quotations
نحوه نوشتن نقل قول های کوتاه و بلند.
Deleted and inserted text
نحوه علامت گذاری متن های زیر خط دار یا حذف شده (روی آن خط کشیده می شود). برای خط زدن یک لغت و درج لغت جایگزین به گونه ای که هر دو کنار هم قرار گیرند استفاده می شود.
تگ های مربوط به قالب بندی متن در HTML
| تگ | توضیحات |
|---|---|
| <b> | متن را به صورت ضخیم یا bold نمایش می دهد. |
| <strong> | متن را به صورت ضخیم یا strong نمایش می دهد. |
| <em> | متن را به صورت مورب یا emphasized (تأکید شده) نمایش می دهد. |
| <i> | متن را به صورت مورب یا italic نمایش می دهد. |
| <small> | متن را به صورت small نمایش می دهد. |
| <big> | متن را به صورت big نمایش می دهد. |
| <sub> | متن را به صورت subscripted نمایش می دهد. |
| <sup> | متن را به صورت superscripted نمایش می دهد. |
| <ins> | متن را به صورت inserted (زیر خط دار) نمایش می دهد. |
| <del> | متن را به صورت deleted (روی آن خط کشیده شده) نمایش می دهد. |
تگ های "computer output" در HTML
| تگ | توضیحات |
|---|---|
| <code> | متن را به صورت computer code نمایش می دهد. |
| <kbd> | متن را به صورت keyboard نمایش می دهد. |
| <samp> | متن را به صورت sample computer code نمایش می دهد. |
| <tt> | متن را به صورت teletype نمایش می دهد. |
| <var> | متن را به صورت variable نمایش می دهد. |
| <pre> | متن را به صورت preformatted نمایش می دهد. (خطوط و فاصله های اضافه در نظر گرفته شده را حفظ می کند) |
تگ های Citations ،Quotations و Definition در HTML
| تگ | توضیحات |
|---|---|
| <abbr> | مخفف کلمه ای را تعریف می کند. با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد. |
| <acronym> | سر نام کلمات را تعریف می کند. (در HTML5 پشتیبانی نمی شود) با استفاده از خصوصیت title می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد. |
| <address> | اطلاعات تماس برای نویسنده با مالک سند را مشخص می کند. |
| <bdo> | با استفاده از خصوصیت bdo می توان کلمات را برعکس کرد. (از آخر به اول یا برعکس) |
| <blockquote> | برای تعریف نقل قول های بلند استفاده می شود. مرورگر، بصورت پیشفرض قبل و بعد از عبارت نقل قول یک فضای اضافی قرار می دهد. همچنین برای آن Margin در نظر می گیرد. |
| <q> | برای تعریف نقل قول های کوتاه استفاده می شود. مرورگر، بصورت پیشفرض عبارت را داخل دابل کوتیشن قرار میدهد. |
| <cite> | جهت تعریف نقل قول (citation) در HTML5 تگ <cite> عنوان یک کار را مشخص می کند اما در HTML 4.01 تگ <cite> یک نقل قول را مشخص می کند. |
| <dfn> | یک عبارت تعریفی را مشخص می کند. |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 80104
دیدگاه‌ها
سلام و احترام
با سپاس1- بین تگ های cite , em , dfn چه تفاوتی وجود دارد چون خروجی همه آنها مثل هم است
2- فرق b و strong?
3- این جمله ای که فرمودین دقیقا به چه معنی است : نقل قول:
سلام و درود
1- توجه کنید که تگ های مورد نظر بیشتر در انگلیسی کاربرد دارد، بنابراین لازم نیست روی آنها متمرکز شوید.
2- تفاوتی در ظاهر وجود ندارد و برای Bold یا ضخیم کردن قسمتی از متن استفاده می شود، اما نکته ی مهمی که وجود دارد اینه که در HTML5 از تگ strong استفاده کنید و یه جورایی تگ b منسوخ شده است.
اون نقل قولی رو هم که در بالا ذکر کرده اید، نشان دهنده همین صوضوع است که تگ strong اهمیت بیشتری نسبت به تگ b دارد.
سلام
من فیلم آموزشی html خرید کردم
عالی بود.
سلام
عالی بود.
سلام خسته نباشید ببخشید برای مثال خودتان امتحان کنید مربوط به نقل قول حتما باید از تگهای ذکر شده استفاده نمود؟ و اصلا این تگها چه استفاده ی دارند؟
سلام دوست عزیز.
برای اینکه از نقل قول در صفحه ی وبت استفاده کنی باید متن نقل قول را در در این تگ قرار بدی.
که البته بیشتر برای تعریف نقل قول های بلند استفاده میشه
سلام ببخشید متن من بلنده از سمت اصلی سایت میزنه بیرون باید چیکار کنم؟
سلام شما باید از دستور overflow در css استفاده کنید.
www.beyamooz.com/cssref/227-css-properties/857-overflow
با سلام و خسته نباشید
از سایت خیلی خوبتون بخاطر مطالب مفیدی که گذاشتید ممنونم
جدول آخر این صفحه، قسمت تگ های نقل قول ، تگ bdo را نوشتید ولی تگ dir را توضیح دادین. وقتی دستورشو مینویسم هم اجرا نمیشه فقط ابتدای خطی که این دستور را نوشتم یکم از بقیه خطوط جلوتره.
سلام . ممنون از شما اصلاح شد.
برای بررسی کارکرد تگ bdo مثال زیر رو مشاهده کنید:
www.w3schools.com/tags/tryit.asp?filename=tryhtml_bdo
با سلام
کاربرد تگ با چیزی که نوشتید فرق میکنه یعنی نوشتید روی نوشته خط میخوره ولی وقتی من امتحان میکنم هم روی نوشته خط میکشه و هم زیر نوشته , علتش چیه؟
سلام.
لطفا کد و تگ موردنظر رو بذارید.
شاید دارید به طریقی نوشته رو به صورت زیر‌خط‌دار هم نمایش میدید.
خدا خیرتون بده , تو ایران یه سایت به درد بخور پیدا کرده باشیم همینه. دمتـــــــــون گرم
در ویرایشگر متنی وقتی جمله ای به فارسی مینویسم در مرورگر نشون نمیده و بجاش چیزای دیگ نشون میده!چجوری میشه همون متنو درست در مرورگر ب زبان فارسی نمایش داد؟؟؟
با سلام.
ابتدا شما باید فایل خودتون رو در سیستم utf-8 ذخیره کنید تا بتونه فایلهایی که با سیستم یونیکد قابل نمایش هستند هم ذخیره بشه.
بعد شما باید در فایل HTML از یک تگ meta با فرمت زیر استفاده کنید:
<meta charset="utf-8" />
سلام خدمت شما و خسته نباشید
در نوت پد ++ چی کار کنیم تا محتوای سایتو فارسی نشون بده
لطفا کمکم کنید
سلام.کافیست در منو بالا نرم افزارencoding را انتخاب و روی encoding in utf-8 کلیک کنید.سپس فایل را مجددا ذخیره و جایگزین فایل قبلی نمایید.
سلام خسته نباشید
کد چرا نباید اینجوری نوشته بشه منظورم دربارهش یه توضیح بدید
واینکه بقیه اموزش بدون صوت هس اینم یه کارش بکنید
تشکر وسپاس
سلام خسته نباشید وقت زیبای شما بخیر باشه.
خواستم یه نوشته را به صورت نقل قول کوتاه امتحان کنم و داخل تگ گذاشتم ولی متاسفانه کوتیشن نذاشت. به نظرتون دلیلش چیه؟؟؟من دوست دارم تمام مطالب را خودم تو Notepad بنویسم و تست کنم این را هم نوشتم ولی کوتیشن نذاشت. نمی دونم چشه.
با سلام و تشکر.
متنی که قصد دارید به صورت نقل قول نمایش بدید رو داخل تگ q قرار بدید.
مثل کد زیر:
<q>this is sample quote</q>
سلام و خسته نباشید...
1)اون قسمتjone doe چیه چون برای من باز نمیشه؟
2)این تگaddressرو کجا باید استفاده کردیا آدرس کی رو باید بزنیم اگر امکان داره سایتی مشخص کنید و این رو توش نشون بدین...واین مطالب رو میشه با تگ p هم زد چرا باید الزاما با این تگ زد و اگه مثلا با تگp بزنیم چی میشه؟
3)تگ های نقل فول کجا ها کاربرد داره(ممنون میشم سایتی مثال بزنین)
4)تگ های مربوط بهcomputer outputرو نمی فهمماینا که همه عین همنیهنیcode,kbd ,tt,sampهمه عین هم نوشته میشوندچه فرقی با هم دارند(با تشکر)
سلام، ممنون شما هم خسته نباشید.
1- در مثال خودتان امتحان کنید "Address"، در قمست Written by از یک تگ a برای نمایش نویسنده، استفاده شده است، خصوصیت href آنرا با مقدار "mailto:[email protected]" تنظیم کرده ایم، بنابراین زمانی که کاربر روی "jone doe" کلیک می کند، بصورت اتوماتیک یک برنامه ارسال ایمیل، مثل Outlook یا thunderbird باز می شود. اما اگر هیچکدام از آنها را نصب نکرده باشید، اتفاقی نخواهد افتاد ...! برای نصب برنامه thunderbird در گوگل آنرا جستجو کنید.
2- با استفاده از تگ address، می توانیم اطلاعات مربوط به تماس نویسنده یا صاحب یک سند یا مقاله را نشان دهیم. در واقع زمانی که بخواهید اطلاعات تماس با حالتی خاص و متفاوت نسبت به دیگر نوشته ها نمایش داده شود، فقط کافی است که اطلاعات تماس را بین تگ address محصور کنید.
3- تگ های نقل قول در زبان فارسی زیاد کاربرد ندارد. پیشنهاد می کنم از این قسمت سریع تر عبور کنید.
4- همان طور که گفتم این تگها در زبان فارسی کاربردی ندارند، تنها روی تگ های strong و em و pre تمرکز کنید که بسیار کاربردی است.
در مثال خودتان امتحان کنید Address که کد مثال اش رو در زیر ذکر کردم:<!DOCTYPE html>
<html>
<body>
<address>
Written by <a href="/mailto:[email protected]">Jon Doe</a>.& lt;br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
1)mailto:[email protected] الان ایمیل هست؟
2) اون example چیه جور درنمیاد ؟
3) از عنصر address برای نمایش اطلاعات تماس مدیران شرکت یا خود شرکت استفاده می شه؟
ببینید در این مثال، کلاً قرار بوده آدرس و اطلاعات تماس آقای Jon Doe رو ذکر کنیم ...1
بنابراین:
1- mailto:[email protected] مثلاً آدرس ایمیل آقای Jon Doe است.
2- Example.com مثلاً آدرس وب آقای Jon Doe است.
3- بله با استفاده از تگ address همان طور که از اسمش پیداست، می توانیم آدرس مدیران شرکت را ذکر کنیم.
سلام ببخشید من کمی گیجم چون تا ایجا بعضی چیزا که خوندم یادم رفته نمی دونم برم یک کتاب بگیرم یا بشینم بنویسم ؟شما کتاب مناسب html می شناسید?
سلام بنده کتابی رو سراغ ندارم. اگر نوشتن به شما کمک می کند پس همین کار رو انجام بدید. سعی کنید کدها رو روی کاغذ، خودتان بنویسید. این اشکالی نداره اگر که بعضی چیزها رو فراموش کنید. طبیعی هست.
به شدت عالیییییییییییییییییییییییی
سپاس فراوان
سلام وخسته نباشید
اموزشهای بی نظیری دارید
من روی یه قالب html اماده کار می کنم
یه مشکل تو منو در حالت responsive دارم که به صورت برعکس میاد (مثلا تو سایزهای کوچک مثل گوشی)
میشه بنده را راهنمایی کنید
http://www.studiomax1.ir
با تشکر
سلام
طی بررسی که بنده داشتم، شما باید در صفحه ی http://www.studiomax1.ir/blog.htmll ترتیب عناصر رو به صورت زیر عوض کنید :
[dir=#555]
<ul id="options" class="option-s et clearfix" data-option-key ="filter">
<li class="selected "> <a href="#home"> ;خانه</a> </li>
<li> <a href="#portfoli o" class="selected ">پروژه</a> </li>
<li> <a href="#services ">خدمات</ a> </li>
<li> <a href="#about"&g t;درباره</a& gt;</li>
<li> <a href="#blog"> ;ارتباط</a&g t; </li>
&;lt;li> <a href="#contact" >تماس</a& gt; </li>
</ul& gt;
وقتی که این کار رو انجام دادید، در صفحه ی اصلی، عناصر برعکس می شوند، حالا برای اینکه عناصر در صفحه ی اصلی درست شوند، باید مقدار float آنها را که به صورت پیش فرض left است را right کنید تا عناصر به سمت راست شناور شوند به صورت زیر :
#main-nav > ul > li {
float : right;
padding: 7px 0px 17px;
margin: 0 10px;
position: relative;
}
حالا وقتی که صفحه رو کوچک می کنیم عناصر درست نمایش داده می شوند..
اگر مشکل دیگه ای بود همین جا اعلام کنید.
سلام . ممنون از سایت خوبتون
می خواستم بدونم چرا برای تعریف تمام تگ هایی که متن داشتند اونها رو در تگ p تعریف کردیم اما برای تعریف یک نقل قول بزرگ ، اون رو به تنهایی نوشتیم و داخل تگ p به صورت تو در تو ننوشتید ؟؟ مگه این هم یه نوع پاراگراف محسوب نمیشه؟
سلام
اگر تمام پاراگراف، بعنوان نقل قول محسوب می شود، دیگر لزومی ندارد آنرا داخل تگ P ذکر کنیم. هرچند اگر این کار رو هم بکنید اشتباهی صورت نگرفته ...!
اما در مورد نقل قول های کوتاه که قسمتی از متن هستند، ابتدا باید کل متن را داخل تگ P قرار داد و سپس قسمتی که به عنوان نقل قول مد نظرتان است را با تگ نقل قول یعنی q محصور نمود.
ممنونم از توضیح کامل تون :)
گزارش اشکال: لینک strong و em اشتباهه.
ممنون، اصلاح شد.
با سلام
مثالی از و می تونید ارائه بدید
با تشکر
دوست عزیز برای درج علامت کوچکتر در نقل قول هاتون از ;lt& و برای درج علامت بزرگتر از ;gt& استفاده کنید. نقل قول شما واضح نیست
با کمال عذرخواهی
مثالی از تگ های cite و dfn ارائه دهید.
در انتهای مطلب بالا، اگر روی لینک های cite و یا dfn کلیک نمایید، توضیحات بیشتری را مشاهده خواهید فرمود ...!
cite: beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml5_cite
dfn: beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_phrase_test
سلام خسته نباشید
ببخشید تو قسمت quatations چرا A long quotagion: تو تگ نیست؟
long quotation به این سبک نمایش داده می شود که در مثال آورده شده است.
سلام
یه سوال
در قسمت(چگونه اطلاعات تماس نویسنده سند html را پیدا کنیم) یا(نحوه نوشتن نقل قوال های کوتاه و بلند)
چرا تو کد html شون در بالای تگ <html>از تگ <DOCTYPE> استفاده شده؟
اعلان <!DOCTYPE> ; به مرورگر کمک می کند تا صفحه ی وب را به درستی نمایش دهد.
برای توضیحات بیشتر به لینک زیر مراجعه نمایید:
beyamooz.com/html/138-advanced/353
چرا در مرورگر ، تایپ فارسی که در HTML نوشتم رو به شکل عجیب غریب نشان میدهد ؟
مثلا در تگ Address مانند شکل زیر
:نوشته شده توسط
به یکی از دو علت زیر:
1-تنظیمات encoding مرورگر روی (Unicode (UTF8 نمی باشد. در مرورگر IE از گزینه ی View و سپس Encoding این تنظیم را انجام دهید.
2- هنگام ذخیره فایل Encoding آن را ANSI انتخاب کرده اید در حالیکه باید UTF8 انتخاب شده باشد.
یه سوال دیگه تگ Computer code دقیقا به چه درد میخوره چون متن رو عادی چاپ میکنه و خصوصیت خاصی نداره .
لینک زیر توضیح این تگ می باشد:
beyamooz.com/tags/312-html-tag/2215
سلام
یه سوال : استفاده مختلف از این تگ ها چقدر روی رتبه سایت تاثیر میزاره یعنی اگه به جای اینکه چند بار از تگ br توی متن استفاده کنیم یک بار از تگ pre استفاده کنیم آیا این دو تگ مختلف تاثیری رو رتبه و رنک سایت داره یا نه
سلام
نکته ای که در رتبه ی سایت و به عبارت بهتر روی سئوی سایت تاثیر گذار است استاندارد بودن و تمیز و خوانا بودن تگ های html است.
دلایل زیادی وجود داره که باید در بکارگیری این تگ ها دقت زیادی به خرج داد از جمله می شه به موارد زیر اشاره کرد:
[1]هنگامی که موتور جستجو شروع به اندیس گذاری (نمایه گذاری) محتوای صفحات وب شما می کند، ممکن است به این خاطر که تگ های HTML صحیح نوشته نشده اند، سر در گم شود و اکثر صفحات وب ممکن است به خوبی اندیس گذاری (نمایه گذاری) نشود.
[2]ممکن است تگ های HTML زیادی وجود داشته باشد که از نظر موتورهای جستجو کم اهمیت باشند و یا موتورهای جستجو آن ها را پشتیبانی نکنند ولی شما از آن ها در صفحات خود استفاده کرده اید.
[3]پایداری کد های HTML، زیبایی و خوانایی آن ها، و فرایند انطباق با استانداردهای آن ها مواردی هستند که همواره توسط Webmaster های خوب تحسین شده اند.
بنابراین اصول تگ نویسی استاندارد رو حتماً رعایت کنید.
---------------------------------------------------------------------------------------------------------------
با توجه به موارد گفته شده چون یکبار استفاده از تگ pre کد را خواناتر می کند در سئوی سایت تاثیر بهتری دارد.
از سایت خوبتون مچکرم
بعضی از تگها در html5 از بین رفته و کاربردی نداره
ای کاش این مورد تو سایت تعیین میکردین که مثلا قلان تگ تو html 5 کاربردی نداره و جایگزینش این تگ ...
ممنون، در مطلب "تگ های HTML به ترتیب حروف الفبا"، لیست تمام تگ های HTML بهمراه مورد بالا آمده است:
www.beyamooz.com/tags/1941
سلام و خسته نباشید...
در قسمت "مثال های خودتان امتحان کنید" لینک بالای {نحوه تغيير جهت متن (از آخر به اول)} کلیک میکنم توی اون صفحه یه سوال دارم:
اونجا "rtl" که در جلوی bdo dir قرار داره یعنی چی و چه کاربردی داره؟
با استفاده از خصوصيت dir در تگ bdo مي توان کلمات را برعکس کرد. مثلاً کلمه ی "beyamooz" را بصورت "zoomayeb" نمایش داد. برای اطلاعات بیشتر به لینک زیر برید:
beyamooz.com/tags/312-html-tag/1937
به نقل از امیر پهلوان صادق:
در اصلاح پاسخ استاد امیر پهلوان صادق:
در تگ bdo خصوصیت dirجهت نوشتن متن را تعیین می کند. مثلا با استفاده از ltr متن ما چپ به راست(برای انگلیسی نوشتن) می شود و با استفاده از rtl متن ما راست به چپ(برای فارسی نوشتن) می شود.
با سلام خسته نباشید
البته نظر استاد امیر پهلوان صادق صحیح هست،
در تگ bdo نقش rtl و ltr برای بر عکس کردن متن به کار می رود
با توجه به لینک زیر
beyamooz.com/tags/312-html-tag/1937
دوتا سوال در مورد عنصر داشتم
تگ i با em چه تفاوتی داره؟ چون این دو تگ متن رو مورب میکنن و یه سوال دیگه اینکه منظورتون از اینکه برای نشان دادن مشخصات از عنصر استفاده میکنیم چیه یعنی چه تاثیری روی مشخصات میزاره
1- تفاوت تگ i و em: از هر دو برای مورب کردن متن استفاده می شود ولی تگ i در HTML5 کاربردی ندارد و می توان بجای آن از خصوصیت font-style: italic استفاده کرد:
www.beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_i_default_css
2- متوجه قسمت دوم سوالتون نمی شم ...! (برای تایپ کردن تگ ها، علامت باز و بسته رو بکار نبرید، چون برای حفظ امنیت سایت، تگ ها از داخل نوشته، حذف خواهد شد.)
تفاوت abbr و acronym چیه؟
آخه جفتشون ی کارو انجام میدن
بله حق با شماست، با استفاده از خصوصیت title در abbr و acronym می توان عبارت کامل آن مخفف را در حالتی که موس روی آن قرار می گیرد نشان داد.
تفاوت: تگ acronym در HTML5 پشتیبانی نمی شود. شما می توانید از تگ abbr استفاده کنید.
نکته به این مهمی رو چرا توی آموزشتون نیاوردید آخه؟!
چشم، اصلاح شد.
ابر لایک دارید خدایی
عالی بود :roll: اینجوری یعنی از طریق صدا و متن، یادگرفتن خیلی آسونه :P :lol: :D
واي مخم داغ كرد............ .. :o :o :o
با تشكر فراوان
در جداول و يا هرجايي كه تگي را معرفي مي كيند بد نيست تگ مربوطه به مثالي كه در آن بكارگيري شده لينك داشته باشد
خواهش می کنم، بله حق با شماست، این کار انجام شد.