فرمت دهی متن در 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> | یک عبارت تعریفی را مشخص می کند. |
1- بین تگ های cite , em , dfn چه تفاوتی وجود دارد چون خروجی همه آنها مثل هم است
2- فرق b و strong?
3- این جمله ای که فرمودین دقیقا به چه معنی است :
1- توجه کنید که تگ های مورد نظر بیشتر در انگلیسی کاربرد دارد، بنابراین لازم نیست روی آنها متمرکز شوید.
2- تفاوتی در ظاهر وجود ندارد و برای Bold یا ضخیم کردن قسمتی از متن استفاده می شود، اما نکته ی مهمی که وجود دارد اینه که در HTML5 از تگ strong استفاده کنید و یه جورایی تگ b منسوخ شده است.
اون نقل قولی رو هم که در بالا ذکر کرده اید، نشان دهنده همین صوضوع است که تگ strong اهمیت بیشتری نسبت به تگ b دارد.
من فیلم آموزشی html خرید کردم
عالی بود.
عالی بود.
برای اینکه از نقل قول در صفحه ی وبت استفاده کنی باید متن نقل قول را در در این تگ قرار بدی.
که البته بیشتر برای تعریف نقل قول های بلند استفاده میشه
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" />
در نوت پد ++ چی کار کنیم تا محتوای سایتو فارسی نشون بده
لطفا کمکم کنید
کد چرا نباید اینجوری نوشته بشه منظورم دربارهش یه توضیح بدید
واینکه بقیه اموزش بدون صوت هس اینم یه کارش بکنید
تشکر وسپاس
خواستم یه نوشته را به صورت نقل قول کوتاه امتحان کنم و داخل تگ گذاشتم ولی متاسفانه کوتیشن نذاشت. به نظرتون دلیلش چیه؟؟؟من دوست دارم تمام مطالب را خودم تو 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 تمرکز کنید که بسیار کاربردی است.
<html>
<body>
<address>
Written by <a href="/mailto:[email protected]">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
1)mailto:[email protected] الان ایمیل هست؟
2) اون example چیه جور درنمیاد ؟
3) از عنصر address برای نمایش اطلاعات تماس مدیران شرکت یا خود شرکت استفاده می شه؟
بنابراین:
1- mailto:[email protected] مثلاً آدرس ایمیل آقای Jon Doe است.
2- Example.com مثلاً آدرس وب آقای Jon Doe است.
3- بله با استفاده از تگ address همان طور که از اسمش پیداست، می توانیم آدرس مدیران شرکت را ذکر کنیم.
سپاس فراوان
اموزشهای بی نظیری دارید
من روی یه قالب html اماده کار می کنم
یه مشکل تو منو در حالت responsive دارم که به صورت برعکس میاد (مثلا تو سایزهای کوچک مثل گوشی)
میشه بنده را راهنمایی کنید
http://www.studiomax1.ir
با تشکر
طی بررسی که بنده داشتم، شما باید در صفحه ی http://www.studiomax1.ir/blog.htmll ترتیب عناصر رو به صورت زیر عوض کنید :
[dir=#555]
<ul id="options" class="option-set clearfix" data-option-key="filter">
<li class="selected"> <a href="#home">خانه</a> </li>
<li> <a href="#portfolio" class="selected">پروژه</a> </li>
<li> <a href="#services">خدمات</a> </li>
<li> <a href="#about">درباره</a></li>
<li> <a href="#blog">ارتباط</a> </li>
&;lt;li> <a href="#contact" >تماس</a> </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 محصور نمود.
مثالی از و می تونید ارائه بدید
با تشکر
مثالی از تگ های 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: تو تگ نیست؟
یه سوال
در قسمت(چگونه اطلاعات تماس نویسنده سند html را پیدا کنیم) یا(نحوه نوشتن نقل قوال های کوتاه و بلند)
چرا تو کد html شون در بالای تگ <html>از تگ <DOCTYPE>استفاده شده؟
برای توضیحات بیشتر به لینک زیر مراجعه نمایید:
beyamooz.com/html/138-advanced/353
مثلا در تگ Address مانند شکل زیر
:نوشته شده توسط
1-تنظیمات encoding مرورگر روی (Unicode (UTF8 نمی باشد. در مرورگر IE از گزینه ی View و سپس Encoding این تنظیم را انجام دهید.
2- هنگام ذخیره فایل Encoding آن را ANSI انتخاب کرده اید در حالیکه باید UTF8 انتخاب شده باشد.
beyamooz.com/tags/312-html-tag/2215
یه سوال : استفاده مختلف از این تگ ها چقدر روی رتبه سایت تاثیر میزاره یعنی اگه به جای اینکه چند بار از تگ br توی متن استفاده کنیم یک بار از تگ pre استفاده کنیم آیا این دو تگ مختلف تاثیری رو رتبه و رنک سایت داره یا نه
نکته ای که در رتبه ی سایت و به عبارت بهتر روی سئوی سایت تاثیر گذار است استاندارد بودن و تمیز و خوانا بودن تگ های html است.
دلایل زیادی وجود داره که باید در بکارگیری این تگ ها دقت زیادی به خرج داد از جمله می شه به موارد زیر اشاره کرد:
[1]هنگامی که موتور جستجو شروع به اندیس گذاری (نمایه گذاری) محتوای صفحات وب شما می کند، ممکن است به این خاطر که تگ های HTML صحیح نوشته نشده اند، سر در گم شود و اکثر صفحات وب ممکن است به خوبی اندیس گذاری (نمایه گذاری) نشود.
[2]ممکن است تگ های HTML زیادی وجود داشته باشد که از نظر موتورهای جستجو کم اهمیت باشند و یا موتورهای جستجو آن ها را پشتیبانی نکنند ولی شما از آن ها در صفحات خود استفاده کرده اید.
[3]پایداری کد های HTML، زیبایی و خوانایی آن ها، و فرایند انطباق با استانداردهای آن ها مواردی هستند که همواره توسط Webmaster های خوب تحسین شده اند.
بنابراین اصول تگ نویسی استاندارد رو حتماً رعایت کنید.
---------------------------------------------------------------------------------------------------------------
با توجه به موارد گفته شده چون یکبار استفاده از تگ pre کد را خواناتر می کند در سئوی سایت تاثیر بهتری دارد.
بعضی از تگها در html5 از بین رفته و کاربردی نداره
ای کاش این مورد تو سایت تعیین میکردین که مثلا قلان تگ تو html 5 کاربردی نداره و جایگزینش این تگ ...
www.beyamooz.com/tags/1941
در قسمت "مثال های خودتان امتحان کنید" لینک بالای {نحوه تغيير جهت متن (از آخر به اول)} کلیک میکنم توی اون صفحه یه سوال دارم:
اونجا "rtl" که در جلوی bdo dir قرار داره یعنی چی و چه کاربردی داره؟
beyamooz.com/tags/312-html-tag/1937
در اصلاح پاسخ استاد امیر پهلوان صادق:
در تگ bdo خصوصیت dirجهت نوشتن متن را تعیین می کند. مثلا با استفاده از ltr متن ما چپ به راست(برای انگلیسی نوشتن) می شود و با استفاده از rtl متن ما راست به چپ(برای فارسی نوشتن) می شود.
البته نظر استاد امیر پهلوان صادق صحیح هست،
در تگ bdo نقش rtl و ltr برای بر عکس کردن متن به کار می رود
با توجه به لینک زیر
beyamooz.com/tags/312-html-tag/1937
تگ i با em چه تفاوتی داره؟ چون این دو تگ متن رو مورب میکنن و یه سوال دیگه اینکه منظورتون از اینکه برای نشان دادن مشخصات از عنصر استفاده میکنیم چیه یعنی چه تاثیری روی مشخصات میزاره
www.beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml_i_default_css
2- متوجه قسمت دوم سوالتون نمی شم ...! (برای تایپ کردن تگ ها، علامت باز و بسته رو بکار نبرید، چون برای حفظ امنیت سایت، تگ ها از داخل نوشته، حذف خواهد شد.)
آخه جفتشون ی کارو انجام میدن
تفاوت: تگ acronym در HTML5 پشتیبانی نمی شود. شما می توانید از تگ abbr استفاده کنید.
در جداول و يا هرجايي كه تگي را معرفي مي كيند بد نيست تگ مربوطه به مثالي كه در آن بكارگيري شده لينك داشته باشد