در پست قبلی با 10 تگ از تگهای قالب بندی متن آشنا شدید که عبارتند از :
<b> </b> <i> </i> <u> </u> <s> </s> یا <strike> </strike> <sup> </sup> <sub> </sub> <big> </big> <small> </small> <del> </del> و <ins> </ins> <abbr> </abbr> و <acronym> </acronym>
در ادامه شما را با بقیه تگهای قالب بندی متن آشنا خواهیم کرد:
تگ <hn>: زبان HTML از شش سطح تیتر (Heading)ها پشتیبانی میکند. این 6 سطح با تگهای <h1> و <h2> و <h3> و <h4> و <h5> و <h6> ایجاد میشوند. مرورگرها عنصر <h1> را در بزرگترین و عنصر <h6> را در کوچکترین اندازه از بین این 6 سطح نمایش میدهند. به مثال زیر دقت کنید:
<h1>7 Learn</h1> <h2>7 Learn</h2> <h3>7 Learn</h3> <h4>7 Learn</h4> <h5>7 Learn</h5> <h6>7 Learn</h6>
نتیجه کد در مرورگر:
توجه داشته باشید که منظور ما از تگ <hn>، حرف n عدد متغییری است بین 1 تا 6 .
هر شش عنصر فوق دارای صفتهای زیر هستند که در ادمه بررسی خواهیم کرد:
align class id style title dir lang
align: این صفت نحوه چینش متن داخل heading را کنترل میکند، و چهار مقدار زیر را میپذیرد:
- left: تیتر در سمت چپ صفحه قرار میگیرد.
- center: تیتر در وسط صفحه قرار میگیرد.
- right: تیتر در سمت راست صفحه قرار میگیرد.
- justify: متن داخل heading را از هر دو طرف تراز میکند.
مثال:
<h1 align="left">Left-Aligned Heading</h1> <p>This heading uses the align attribute with a value of left.</p> <h1 align="center">Centered Heading</h1> <p>This heading uses the align attribute with a value of center.</p> <h1 align="right">Right-Aligned Heading</h1> <p>This heading uses the align attribute with a value of right.</p>
نتیجه در مرورگر:
بقیه صفتها نیز جزء صفات عمومی هستند که قبلا آنها را معرفی کرده ایم.
تگ <p> : از تگ <p> برای ایجاد پاراگرافها در صفحه استفاده میشود. معمولا همیشه پاراگرافها از خط جدید شروع میشوند و یک فضای خالی قبل و بعد از خود ایجاد میکنند:
<p>This is a Paragraph</p> <p>This is Another Paragraph</p>
نتیجه در مرورگر:
تگ </ br>: برای ایجاد شکست در خط و رفتن به خط جدید از این تگ استفاده میکنیم. این عنصر جزء عناصر تهی بوده و به تگ پایانی احتیاج ندارد. شما از این عنصر میتوانید به شکل <br> نیز استفاده کنید که مخصوص نسخههای قدیمی HTML بوده. اما در نسخه XHTML میبایست بعد از br> یک فاصله خالی، و سپس / و در انتها یک علامت < قرار گیرد.
<p>7Learn.com :<br />Web Design and Javascript Tutorials</p>
نتیجه در مرورگر:
تگ <nobr>: این تگ نوعی در مقابل </ br> قرار دارد. به دلیل که متن داخل این تگ به هیچ عنوان شکسته نخواهد شد مگر اینکه تگ </ br> داخل آن قرار گیرد. استفاده از این تگ باید با احتیاط انجام شود زیرا ممکن است موجب ایجاد اسکرول افقی در پنجره مرورگر شود که معمولا حالتی عذاب آور برای کاربر خواهد بود!
<p><nobr>7Learn.com : Web Design and Javascript Tutorials</nobr></p>
نتیجه در مرورگر:
می بینید که متن ما شکسته نمیشود، و پنجره مرورگر به حال اسکرول در آمده است.
تگهای <pre> و <code>: گاهی اوقات میخواهیم متنمان دقیقا به همان شکلی که نوشته میشود در نمایش داده شود و از فاصلههای خالی، فاصلههای Tab و شکستهای خط چشم پوشی نشود. هر آنچه که بین تگ <pre> و <pre/> قرار میگیرد دقیقا به همان شکلی که در source صفحه نوشته شده است در صفحه نشان داده خواهد شد. این تگ معمولا به همراه تگی با نام <code> که متن داخل آن به یکی از فونتهای از نوع monospace همانند courier new نشان داده میشود به کار میرود. (فونتهای نوع monospace فونت هایی هستند که هر کاراکتر آنها به یک اندازه فضا اشغال میکنند.)
بیشترین استفاده از این تگها در نمایش کدهای کامپیوتری و برنامه نویسی است. در مثال زیر نمونه کدی به زبان جاوااسکریپت در داخل تگ <pre> و <code> قرار گرفته است که در صفحه دقیقا به همان شکل نمایش داده خواهد شد:
<code> <pre> function testFunction(strText) { alert (strText) } </pre> </code>
نتیجه در مرورگر:
تگ </ hr>: از این تگ برای ایجاد خطوط افقی در صفحات استفاده میشود. این تگ جزء تگهای تهی بوده و باید به همین شکل استفاده شود و به تگ پایانی احتیاج ندارد البته میتوان از این عنصر به صورت <hr> نیز استفاده کرد که مربوط به نسخههای قدیمی HTML میباشد:
<p>7Learn.com : Web Design and Javascript Tutorials <hr /> </p>
نتیجه در مرورگر:
این عنصر دارای صفات زیر است:
Width: با این صفت میتوان عرض عنصر </ hr> را کنترل کرد. به دو طریق میتوان به این صفت مقدار دهی کرد. یکی برحسب px و دیگری بر حسب درصد که نسبت به پهنای کل صفحه (یا عنصری که hr درآن قرار دارد) سنجیده میشود:
Color : این صفت رنگ خط را مشخص میکند. صفاتی از این دست در HTML که یک رنگ را به عنوان مقدار میپذیرند را میتوان به سه روش مقدار دهی نمود.:
- استفاده از نام رنگها : ما از نام 16 رنگ استاندارد میتوانیم برای مقداردهی به صفتها استفاده کنیم. این رنگها به شرح زیر هستند:
Black, Silver, Gray, White, Maroon, Red, Purple, Fushia Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aque
- استفاده از تابع rgb: در HTML تابعی با نام rgb وجود دارد که به ترتیب سه رنگ قرمز، سبز و آبی را به عنوان مقدار میپذیرد. این مقادیر یا اعداد صحیح هستند یا به صورت درصد بیان میشوند. به طور مثال:
rgb(0,160,255) یا rgb(0%,63%,100%)
در اولین عبارت عدد 255 معادل %100 است. در مد رنگ RGB محدوده اعداد صحیح بین 0 تا 255 است.
- استفاده از مبنای هگزا دسیمال (مبنای 16) رنگ ها:رنگها را میتوان بر مبنای عبارت متناظر آنها در مبنای 16 به کار برد. در این عبارت میتوان سه عدد در مبنای را نوشت. عدد اول معرف رنگ قرمز، عدد دوم معرف رنگ سبز و عدد سوم معرف رنگ آبی است. دقت کنید که این اعداد میتوانند. از دو حرف تشکیل شده باشند. زیرا اعداد در مبنای 16 از حروف A تا F نیز میتوانند تشکیل شوند. فرم کلی این نوع عبارت ها. به شکل rrggbb# است مثال عبارت 000000# lمعرف رنگ سیاه و 0000ff# معرف رنگ آبی است
Size :این صفت ارتفاع یک خط را کنترل میکند و میتواند یک عدد بر حسب px را به عنوان مقدار میپذیرد.
noshadow :خط هایی که در صفحه ایجاد میکنیم به صورت پیش فرض دارای خطی در زیر خود به عنوان سایه هستند ا میتونیم از این صفت بولین برای حذف این سایه استفاده کنیم.
صفتهای Boolean به صفت هایی گفته میشود که در نسخههای قدیمی HTML (نسخههای قبل از XHTML) مقداری را نمیپذیرند و ذکر نام آنها برای استفاده از آنها کافی است مثلا: noshade
اما در نسخه XHTML میبایست این گونه صفتها را نیز مقدار دهی کنیم. و مقدار آنها نام خود آنها خواهد بود مثلا:
noshade="noshade"
align: محل قرار گیری خط در صفحه را کنترل میکند و میتواند یکی از مواد right, center و left را به عنوان مقدار بپذیرد.
تا اینجا با پنج تگ دیگر از تگهای قالب بندی متن آشنا شدید. در جلسه سوم و آخر تگهای قالب بندی متن شما را با پنج تگ دیگر آشنا خواهیم کرد.
تمرین یادتون نره!!!
سلام ببخشید یک سوال داشتم؟چطوری می تونم از دستور px استفاده کنم و چه جاهایی کاربرد داره؟
دستور px؟ منظورت واحد px که مخفف pixel هست و برای اندازه توی CSS کار میره؟
آخه تو HTML گفته بودید مرسی بعدا تو CSS یاد میگیرم. 😀
سلام….
دو تا سوال داشتم:
1-کاربرد تگ del , ins کجاهاست؟؟؟ به نظر تگهای بی فایده ای میان!
2-برای align مقدار justify یعنی چی از دو طرف تراز میکنه؟؟
من توی مثالهایی که براش زده بودین به جای left مقدار justify رو قرار دادم اما بازم چپ چین بود!! یه مثال ازش میزنید؟؟
مرسی
سلام.
1. تگ های کم استفاده ای بودند، و بعد از اومدن css بی استفاده شدند.کاربرد خاصی هم ندارن، فقط برای زیر خط دار و روخط دار کردن متن استفاده میشن.
2. این تاپیک رو بخونید
تازه سایتتون رو پیدا کردم،
و خوشحالم..(:
میخونمتون..
ممنون ازتون
ممنون مفید بودند 😉 😉 😳 😳
منظور از پایین اومدن رتبه کاهش رتبه است
پایین اومدن و کاهش فرقشون چیه اونوقت!!؟!!:-D
سلام
اگر کل سری آموزشی رو در یک فایل pdf قرار بدید یا حداقل از لینک مستقیم دانلود کنیم خیلی عالی میشه
ممنون از شما ادمین عزیز 😎
نه دوست عزیز وقتی همه رو در یک فایل PDF قرار بده حجم مطالب زیاد می شود و خواننده خسته میشود
یک دلیل دیگر به خاطر این که سایت بروز باشه این کار ور کنند که پیج رنک گوگل و رتبه الکسا پایین نیاد
با تشکر
اهان بله دیدم ممنون
سلام ببخشید
شما تو این قسمت گفتید (( در پست قبلی با ۱۰ تگ از تگ های قالب بندی متن آشنا شدید )) در صورتی که به یکی دوتا از این تگ ها بقیش رو نگفتید
میشه رسیدگی کنید؟
دوست عزیز مطالبی که طولانی هستند چند صفحه ای شدند. می تونید در زیر و یا بالای مطلب ادامه ی صفحات مطلب رو هم بخونید . شما منظورتون این پس هست که اگه دقت کنید خودش 4 صفحه هست . احتمالا شما صفحه 2 و 3 و 4 اون رو نخوندید .
https://7learn.com/tutorials/html-part1-1-formating-tags