تخفیف ویژه

آموزش HTML (قسمت ۴) : تگ های قالب بندی متن (جلسه سوم)

دسته بندی: آموزش
زمان مطالعه: 7 دقیقه
۲۹ شهریور ۱۳۹۱
یاداوری :

در مطلب قبلی با 5 تگ دیگر از تگ‌های قالب بندی متن در HTML آشنا شدیم که عبارتند از:

<hn> </hn>
<br />
<nobr> </nobr>
<pre> </pre> و <code> </code>
<br />

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

تگ <blink>: متن داخل این عنصر در مرورگر به صورت چشمک زن در خواهد آمد. این تگ تنها در مرورگرهای فایرفاکس، گوگل کروم و اوپرا پشتیبانی می‌شود، و مرورگر اینترنت اکسپلورر از آن پشتیبانی نمیکند.

<blink> 7Learn.com : Web Design and Javascript Tutorials </blink>

تگ <center>: از این تگ برای وسط چین کردن هر نوع عنصری استفاده میشود. برای این کار کافی است تگ باز <center> را قبل و تگ بسته <center/> را بعد از عنصر مورد نظرتان قرار دهید.

<center> <p>7Learn.com : Web Design and Javascript Tutorials</p> </center>

نتیجه در مرورگر:

تگ <center>

تگ <font>: از این تگ برای تغییر رنگ، تغییر اندازه و تغییر فونت متون و سایر عناصر متنی موجود در HTML استفاده می‌شود. این تگ که جزء تگ‌های درون خطی محسوب می‌شود از صفت‌های زیر پشتیبانی میکند.

face : از این صفت برای مشخص کردن فونت خاصی استفاده می‌شود. یعنی اگر بخواهیم متنی را فونت خاصی نمایش دهیم از تگ <font> همراه با این صفت استفاده می‌کنیم. این صفت لیستی از فونت‌ها که با "," (کاما) از هم جدا شده اند را به عنوان مقدار می‌پذیرد. اگر اولین فونت بر روی سیستم کاربر نصب نبود، فونت دوم، فونت دوم نصب نبود فونت سوم و ... بر روی متن اعمال می‌شود:

<p> <font face='Tahoma,Arial,Serif'>7Learn.com : Web Design and Javascript Tutorials</font> </p>

کد بالا به این معناست که اول فونت Tahoma را بر روی متن اعمال کند. اگر فونت Tahoma روی سیستم کاربر نصب نبود، فونت Arial را اعمال کند، اگر این فونت نیز موجود نبود فونت Serif را اعمال کن. اگر..... و به همین منوال!

نکته :

اگر می‌خواهید از فونتی استفاده کنید که نام آن دارای فاصله (space) نیز هست باید نام فونت را در داخل کوتیشن(" ") قرار دهید مانند:

<font face='Tahoma, "Times New Roman"'>

size: از این صفت برای تایین اندازه(سایز) متون استفاده می‌شود. و به دوشکل می‌توان به این صفت مقدار داد:

  • مقادیر مطلق: مقادیری بین 1 تا 7.
  • مقادیر نسبی: مقادیری بین 7- تا 7+ که در این صورت اندازه فونت نسبت به اندازه فونت مشخص شده در تگ </ basefont> سنجیده خوهد شد. (این تگ را ادامه معرفی خواهیم کرد.) اگر عدد مشخص شده مثبت باشد، به این معناس که به همان تعداد به اندازه مشخص شده در </ basefont> اضافه و اگر عدد مشخص شده منفی باشد، به این معنی است که به همان تعداد از اندازه مشخص شده در </ basefont> کم شود و سپس بر روی متن اعمال گردد.

color : از این صفت برای تعیین رنگ یک متن استفاده میشود. این صفت مقداری از انواع رنگ‌ها می‌پذیرد و رنگ متن را مشخص می‌کند که در جلسه قبل طریقه مقدار دهی به این صفت را آموزش دادیم.

<p> <font face='Tahoma, Arial,"Times New Roman"' size='+2' color='#ff0000'> 7Learn.com : Web Design and Javascript Tutorials</font> </p>

نتیجه در مرورگر:

تگ <font>

تگ </ basefont>: از این تگ تهی که حتما باید در قسمت head استفاده شود برای تعیین اندازه و نوع و رنگ فونت پایه صفحه استفاده میشود. بیشترین استفاده از این تگ برای تعیین اندازه Font پایه صفحه است تا تمام اندازه‌های نسبی صفحه تگ‌های <font> داخل صفحه نسبت به آن سنجیده شود.

در صورتی که اندازه خاصی در تگ <basefont> تعیین نشود اندازه به صورت پیش فرض 3 در نظر گرفته میشود.

نکته :

این تگ از تمام صفت‌های تگ <font> (یعنی size, color, face) با همان نوع مقادیر پشتیبانی میکند. ز اینکه به صفت size آن فقط می‌توان مقادیر مطلق داد و مقادیر نسبی مجاز نیستند.

تگ <marquee> : از این تگ برای به حرکت در آوردن متون، عکس‌ها و سایر عناصر استفاده میشود. صفت‌های این تگ به شرح زیر است:

Width : عرض محدوده marquee را بر حسب درصد یا پیکسل مشخص می‌کند. و در صورت مقدار ندادن مقدار آن به اندازه عرض صفحه خواهد بود.

Height : ارتفاع محدوده marquee را بر حسب درصد یا پیکسل مشخص می‌کند. و در صورت مقدار ندادن ارتفاع آن به ندازه متنی که در داخل آن است خواهد بود

Bgcolor : رنگ پس زمینه محدوده marquee را مشخص میکند. به سه روشی (نام رنگ، تابع rgb، مبنای هگزادسیمال) که قبلا به آن‌ها اشاره شده است. میتوان به این صفت مقدار داد.

Behavior: نحوه رفتار یا حرکت محتویات marquee را مشخص میکند که میتوناد یکی از مقادیر زیر باشد:

  • Scroll : متن از یک طرف وارد و از طرف دیگر خارج می‌شود.
  • Slide: متن از یک طرف وارد و در طرف دیگر می‌ایستد.
  • Alternate: متن یک حرکت رفت و برگشتی در محدوده marquee خواهد داشت.

و در صورت مقدار ندادن مقدار آن مساوی با scroll خواهد بود.

Scrollamount : اگر حرکت متن بوسیله تگ marquee را مانند قدم زدن در نظر بگیریم، این صفت فاصله بین هر قدم را کنترل میکند. این صفت مقداری عددی بر حسب px را میپذیرد.

Scrolldelay : این صفت تاخیر زمانی بین هر قدم را بر حسب میلی ثانیه مشخص میکند. مثلا مقدار 1000 برای این صفت به معنی تاخیر یک پانیه برای برداشتن هر قدم خواهد بود.

Loop: تعداد تکرار حرکت متن را کنترل میکند. و می‌تواند یک عدد صحیح باشد. در صورتی که بخواهید حرکت بی نهایت بار تکرار شود مقدار این صفت را برابر یک عدد منفی (مثلا 1-) یا عبارت infinite قرار بدهید.

Direction : جهت حرکت محتویات marquee را مشخص میکند. و می‌تواند یکی از مقادیر زیر باشد:

  • Up : حرکت به سمت بالا
  • Down : حرکت به سمت پایین
  • Right : حرکت به سمت راست
  • Left : حرکت به سمت چپ

hspace : میزان فاصله طرف‌های راست و چپ محدوده marquee نسبت به عناصر اطراف را بر حسب px یا درصد کنترل میکند.

vspace : میزان فاصله طرف‌های بالا و پایین محدوده marquee نسبت به عناصر اطراف را بر حسب px یا درصد کنترل میکند.

truespeed : معمولا مرورگرها مقادیر کمتر از 60 برای صفت scrolldelay را در نظر نمیگیرند، یعنی در صفت scrolldelay اگر مقداری کمتر از 60 را وارد کنیم، مرورگر آن را 60 در نظر خواهد گرفت. ولی ما میتوانیم با به بکارگیری صفت truespeed که جزء صفت‌های Boolean نیز هست (یعنی مقدار آن برابر با نام صفت است) مرورگرها را مجبور خواهیم کرد تا دقیقا همان عددی را که در صفت scrolldelay مشخص کرده ایم در حرکت متن تاثیر بدهد.

مثال :

<p> <marquee width='200px' height='50px' bgcolor='#acacac' behavior='Alternate' scrollamount='1px' scrolldelay='40'> 7Learn.com</marquee> </p>

نتیجه در مرورگر :

مشاهده نتیجه کد

بسیار خب، تا اینجا با 20 تگ قالب بندی متن آشنا شدیم. در مطلب بعدی به کار با لینک‌ها (پیوندها) میپردازیم و تگ <a> را مورد بررسی قرار میدیم. و یه نکته اینکه، حتما مطالب مربوط به تگ‌های قالب بندی که در این جلسه آموزش دادیم رو تمرین کنید.

چه امتیازی به این مقاله می دید؟
نویسنده طاها دریس

جلسات دوره

نظرات کاربران

محمّد حسن مهرآذر

سلام ببخشید من چشمکی نمیبینم حتی کدتون رو کپی پیست هم کردم ❓

کیوان علی محمدی

این تگ blink رو اولین بار Netscape ایجاد و استفاده کرد،توی کروم و IE و اپرا ساپورت نمیشه،فایر فاکس تا نسخه 22 و سافاری تا نسخه 12.1 ساپورت میکنه.

محمّد حسن مهرآذر

متشکرم

رضا

با سلام
اگه میشه خودتون برا عنصر marquee یه عکس بذارید(برا پس زمینش)
(کدشو برام بنویسید)
ممنون میسم

لقمان آوند

مثلا :
<div style="background-image: url(YourImage.jpg)">
<marquee>Test</marquee>
</div>

reza.satea

فقط میتونم بگم عاشقتونم
ممممممممممممممممممممنننوووونننننننننننننننننن
باز هم مزاحم میشم

رضا

با سلام میدونم که جواب سوالتون کامله اما من دارم طبق آموزشهای شما پیش میرم و فکر نکنم که هنوز با div برخورد کرده باشم اگه هست بگین آموزش شماره چند؟ ممنون میشم

وحید صالحی

فهرست قسمت های این دوره آمزشی رو مشاهده کنید …

رضا

با سلام
میدونم که با صفت bg color میشه پس زمینه marquee رو به رنگ های دلخواه در آورد
اما میشه برا پس زمینه marquee یه عکس انتخاب کرد

لقمان آوند

می تونید marquee رو درون یه div بزارید و برای اون پس زمینه بزارید .

مهدی

با این اوصاف کلیه ی دانش من در زمینه ی html منسوخ شده !

[email protected]

سلام ….
ببخشید که زیاد سوال میپرسم ، دارم آموزشهاتونو به ترتیب میخونم و اجرا میکنم و هر بار برام سوال پیش میاد…
1-این تگ marquee که کدش رو گذاشتید موقع مشاهده کد باید متن حرکت کنه؟؟ اخه برای من هیچ اتفاقی نمیوفته! این کدی که براش گذاشتید رو داخل تگ body کپیش کردم ، اما اتفاق خاصی نیفتاد!!
2-برای تگ font داشتن صفت face کجا کاربرد داره؟؟
مثلا من الان داخل سایتی برم که فونتش نستعلیقه ، با توجه به اینکه فونت نستعلیق روی کامپیوتر من نصب نیست ، اما باز برای من این فونت نشون داده میشه موقعی که صفحه ای رو باز میکنم! خوب این چطوریه؟؟

سجاد دریس

سلام.
خواهش میکنم، مشکلی نیست.
1. بله باید حرکت کنه. اما چونکه این تگ منسوخ شده، مرورگرهای جدید ازش پشتیبانی نمیکنن. اگه توی مرورگر ie ورژن 8 به قبل ، اجراش کنید متن حرکت میکنه.
2.این صفت برای تعیین فونت متن کاربرد داره، البته دیگه کسی از این صفت و کلا تگ font استفاده نمیکنه و بجاش از css استفاده میشه. چونکه منسوخ شده هستند.
از خصوصیت font-face در زیان css استفاده کردن در این سایت.

[email protected]

خوب پس یاد گرفتن این تگهای منسوخ چه فایده ای داره که داخل آموزشها اومده؟؟
توی این آموزشهاتون کدوم تگها منسوخ شدن؟؟

راستی آموزشهاتون هم بسیار بسیار عالی هست- روان و قابل فهم و منظم…مرسی واقعا

لقمان آوند

باید یادشون بگیرید و بدونید که منسوخ شده هستند تا ازشون استفاده نکنید و به سراغ روش های جدید و استاندارد برید . دلیلش اینه .
در اینجا می تونید لیست تگ ها و ویژگی های منسوخ شده رو ببینید .

fatemeh

سلام.
تگblinkزمان بندی داره؟ ❓

سجاد دریس

سلام.
خیر زمان بندی نداره

meraj

خوب بود فقط این تگ marquee تگ قالب بندی متن نیست چون میتونیم از اون برای به حرکت در آوردن عکس هم استفاده کنیم.

سجاد دریس

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

hamid zar

خیر با تشکر فراوان خدمت شما عزیزان.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.