ایجاد متن و پاراگراف بندی (افزودن متن به صفحه وب)
نوشته ی ” ایجاد متن و پاراگراف بندی (افزودن متن به صفحه وب)” بر گرفته از کتاب طراحی صفحات وب مقدماتی (جلد اول) است که توسط پایگاه کتاب های درسی منتشر شده است. بخــش عمده ای از محتوای صفحــات وب را متون تشــکیل می دهند. لذا توانایــی در چینش و پاراگراف بنــدی متن، نقش مهمــی در افزایش مهارت طراحی صفحه وب بــرای ایجاد طرح بندی های مورد نظــر ایفا می کند.
چینش صحیح متن، انتخاب رنگ و اندازه های مناســب برای تیترها و ســایر نوشــته ها از جمله نکاتی هســتند که رغبت بازدید کننده را برای گشــت و گذار در وبسایت و مطالعه مطالب سایت افزایش می دهد. در این بخش با برچسب های موجود برای انجام این کار آشنا می شوید.
برچسب <b>
برچســب <b> از دستور های ایجاد متن و پاراگراف بندی است که از واژه Bold به معنی توپُر یا ضخیم گرفته شده باعث توپر شدن متونی می شود که بین برچسب شروع و پایان <b> قرار گرفته اند. این برچسب در دسته ای از برچسب ها قرار دارد که برای سبک دهی به نوشته ها مورد استفاده قرار می گیرند و اصطلاحا Font-style Tags نامیده می شوند.
برای مشاهده تأثیر این برچسب بر روی عبارات، یک صفحه وب با برچسب های ضروری یک سند XHTML ایجاد نموده و عبارت زیر را در درون بخش <body > قرار دهید.
The following word uses a <b>bold</b> typeface
حال صفحه ساخته شده را در مرورگر باز کنید. عبارتی که درون برچسب های <b > قرار گرفته به صورت توپر نشــان داده می شــود. از این روش برای جلب توجه کاربران نسبت به بخش های مهم متن استفاده می شود.
برچسب <br/>
در ایجاد متن و پاراگراف بندی اگر می خواهید پس از نوشــتن بخشــی از متن، ادامه آن را در ســطر جدیدی دنبال کنید. باید از برچسب </br> استفاده نمایید. نام این برچسب، مختصر شده کلمه Break به معنی جدا کردن است و از آن جا که فاقد محتوا است، در همان برچسب شروع، بسته می شود.
کد زیر را در Notepad وارد کرده و آن را به صورت یک فایل htm ذخیره کنید.
<html>
<head>
<title>بررسی برچسب ها</title>
</head>
<body>
سطردوم</br>سطراول
</body>
</html>
صفحه ساخته شده را در مرورگر باز کنید.
توجه داشته باشید که این برچسب صرفا برای انتقال متن به سطر جدید کاربرد دارد و بهتر است برای ایجاد پاراگراف از آن اســتفاده نکنید. چراکه در صفحات وب، هنگام تبدیل یک متن به پاراگراف باید یک ســطر خالی قبل و یک ســطر خالی بعد از نوشته ایجاد شود و استفاده از برچسب <p > برای انجام این کار منطقی تر است.
برچسب <h1> تا <h6>
در ایجاد متن و پاراگراف بندی با نرم افزارهای واژه پرداز برای متمایز نمودن تیترها از بقیه متن، از قالب بندی های آمادهای استفاده می شود. که سرفصل یا Heading نام دارند. این سرفصل ها که در اندازه های متفاوتی تعریف شده اند به خواننده کمک می کنند تا ســطوح مختلف ســرفصل ها را درک نموده و به آسانی متوجه شود هر تیتر زیرمجموعه کدام تیترها محسوب می شود.
در زبان XHTML شش نوع سر فصل تعریف شده که <h1 > بزرگترین آن ها و <h6 > کوچکترین سر فصل است. کد زیر را در مرورگر امتحان کنید:
<h1> اصول طراحی وب سایت</h1>
<h2> گام اول: نیازسنجی</h2>
<h3> روش اول: مصاحبه با کارفرما</h3>
<h4> روش دوم: بررسی اسناد مکتوب</h4>
<h5> گام دوم: طراحی اولیه </h5>
<h6>گام سوم: تهیه محتوا</h6>
نتیجه زیر نمایش داده می شود:
همان طور که مشــاهده می کنید، با انتخاب برچســب های <h1> تا <h6> می توان شــش سطح مختلف از ســرفصل ها را تعریف نمود. مرورگر هنگام مواجهه با هر یک از این برچســب ها، یک سطر خالی قبل و بعد از سرفصل قرار می دهد.
برچسب های سر فصل همانند اغلب برچسب های موجود در زبان XHTML دارای مجموعه ای از مشخصه های اجباری، اختیاری و استاندارد هستند. مشخصه های استاندارد در DTD های سه گانه ای که برای این زبان تعریف شده معتبر هستند اما مشخصه های اختیاری تنها برای برخی از این DTDها قابل استفاده می باشند. با توجه به تعدد مشخصه های برخی از برچسب ها تنها به ذکر مشخصه های استاندارد و مهمتر اکتفا خواهیم کرد.
سبک ها
در ایجاد متن و پاراگراف بندی برای اغلب برچسب های موجود در زبان XHTML می توان مشخصه style را به منظور قالب بندی محتوای آن برچســب به کار برد. به عنوان نمونه رنگ یا فونــت آن را روی حالت دلخواه تنظیم کرد. شکل کلی تعریف مشخصه style به صورت زیر است:
style=”property_1:value_1; property_2:value_2;”
همان طور که مشاهده می کنید، هر خصوصیت باید با علامت دو نقطه از مقدار جدا شود و هر زوج »خصوصیت-مقدار» نیز به علامت نقطه ویرگول ختم گردد. علاوه بر این، تمامی عبارت تعریف شــده، درون علامت نقل قول قرار گیرد. برای نمونه قصد داریم یک برچســب از نوع <h3>تعریف کنیم که فونت آن از نوع Tahoma و رنگ نوشته سبز باشد.
<h3>سرفصل بدون اعمال سبک</h3>
<h3 style=”color:Green;font-family:Tahoma;”>سبک اعمال با سرفصل</h3>
تعریف سبک فوق برای این برچسب باعث نمایش حالت زیر می شود:
با استفاده از این نگارش که در تصویر زیر به صورت دقیق تر نشان داده شده می توان برای بسیاری از برچسب ها، سبک های مورد نظر را ایجاد کرد.
به جای ســبک تعریف شده قبلی، ســبک زیر را اعمال کنید. این سبک، رنگ متن را تغییر داده و ضمنا نوشته را وسط چین می کند. یعنی نسبت به خط عمودی وسط صفحه تراز می نماید. توجه داشته باشید که برای مقدار دهی به خصوصیت رنگ، علاوه بر کد رنگ، استفاده از نام آن هم مجاز است.
<h3>سرفصل بدون اعمال سبک</h3>
<h3 style=”color:#FF00CC; text-align:center”> سرفصل با مقداردهی به خصوصیت های سبک </h3>
مشــخصه style برای هر یک از برچســب های قابل تعریــف در XHTML دارای خصوصیت های متعددی است که در این نوشته به تدریج با مهم ترین آن ها آشنا خواهید شد.
روش های متفاوت در زبان ایجاد سبک ها
از آنجا که تعیین ســبک برای عناصر موجود و ایجاد متن و پاراگراف بندی در صفحه وب یکی از اساســی ترین مراحل در فرآیند طراحی محسوب می شود، لذا برای انجام این کار سه روش متفاوت در زبان XHTML پیشبینی شده است:
- ســبک های خارجی(External Styles): در این روش همه ســبک ها درون یک فایل مســتقل از نوع CSS قرار می گیرد و ســپس در برچســب <head > صفحه به این فایل ارجاع داده می شــود. در این فایل، نحوه نمایش همه عناصر موجود در صفحه (برای مثال سرفصل ها) تعیین شده است. این روش در مطالب آتی به صورت مبسوط مورد بررسی قرار گرفته است.
- ســبک های داخلی (Internal Styles) : تعریف خصوصیت های مورد نظر برای هر یک از اجزاء صفحه وب می تواند در بخش <head>صفحه انجام شــود. به عبارت دیگر در این روش به جای ایجاد یک فایل مســتقل، محتوای آن فایل در ابتدای صفحه درج می شود.
- ســبکهای تعبیه شــده (Inline Styles) : با استفاده این روش که در ســبک دهی به سرفصل ها از آن استفاده نمودیم می توان برای هر یک از برچسب ها یک سبک، درون همان برچسب تعبیه نمود.
نمایش نهایی در چه قالبی انجام خواهد شــد؟
پاسخ این است که نحوۀ نمایش با اولویت زیر مشخص می شود:
اولویت اول: سبکهای تعبیه شده.
اولویت دوم: سبکهای داخلی.
اولویت سوم: سبکهای خارجی.
اولویت چهارم: تنظیمات مرورگر.
برچسب <i>
در ایجاد متن و پاراگراف بندی از این برچسب برای مایل یا ایتالیک (italic) نمودن نوشته ها استفاده می شود. مایل کردن حروف روشی برای تأکید بر بخشی از متن است. کد زیر را در ویرایشگر متنی وارد کنید.
<i style=”font-family: B Nazanini”> اولین </i> صفحه وب ساخته شده توسط دانش آموزان است
این صفحه زیر در مرورگر نمایش داده می شود. در این عبارت، کلمه «اولین» مایل شده و ضمنا به دلیل اعمال سبک، با فونتB Nazanin که یکی از فونت های پرکاربرد در تایپ فارسی محسوب می شود نشان داده شده است. طبیعتا اگر چنین فونتی روی رایانه موجود نباشد، با فونت پیش فرض مرورگر به نمایش درمی آید.
برچسب <em> و <strong>
همانگونه که از نام این برچســب مشخص اســت، با استفاده از آن میتوان متن را نسبت به سایر روش دیگر برای تأکید بر بخشی از متن، استفاده از برچسب <em> می باشد که از واژه Emphasize به معنی «اهمیت دادن» و «ا قوت تلفظ کردن» گرفته شــده اســت. در نســخه های اخیر HTML و L توصیه شــده در جایی که قرار اســت روی متن تأکیدی (از نظر محتوایی) صورت گیرد، به جای برچسب <i>از <em> استفاده شود. همچنین برچسب <strong> برای جایگزینی با <b> پیشنهاد شده است.
شــاید شــرح کامل چرایی این توصیه کمی دشوار باشــد اما در یک توضیح ساده می توان گفت برچســب های <i>و <b> ماهیتی نمایشی دارند. یعنی صرفا شکل نمایش حروف را تغییر می دهند اما <em> و <strong> به صورت ساختاری برای «تأکید بر اهمیت» تعریف شده اند. بنابراین اگر قرار باشــد یک نر مافزار تبدیل متن به صوت (که غالبا برای افرادی با بینایی ضعیف کاربرد دارد(، متن موجود در صفحه وب را بخواند، با عبارات مایل یا توپر مانند ســایر نوشــته ها برخورد می کند اما عبارات قرار گرفته درون برچسب های <em> و <strong> را با تأکید، تلفظ خواهد کرد.
کد زیر را در ویرایشگر متنی وارد کنید.
</br>Normal text
<em> Emphasized text </em><br/>
<strong> Strong text </strong><br/>
<i> Italic text </i><br/>
<b> Bold text </b>
صفحه ساخته شده به صورت زیر نمایش داده می شود.
برچسب <big>
همانگونه که از نام این برچســب مشخص اســت، با استفاده از در ایجاد متن و پاراگراف بندی می توان متن را نسبت به سایر نوشــته های مجاور تا حدی بزرگتر کرد. توجه داشــته باشید که این برچســب به صورت نسبی عمل می کند و نمی توان گفت برای مثال، اندازه نوشــته ها را روی 14 یا 16 تنظیم خواهد کرد چرا که اندازه نوشته ها پس از اعمال این برچسب بستگی به اندازه اولیه و نیز نحوه نمایش مرورگر دارد.
کد XHTML زیر را امتحان کنید.
متن معمولی</br>
<big>متن بابرچسب بزرگسازی </big><br>
<big><big> متن پس از دوبار استفاده از برچسب بزرگسازی </big></big></br>
نتیجه زیر به دســت می آید و نشان می دهد هربار استفاده از این برچسب، اندازۀ نوشته را بزرگتر خواهد کرد.
برچسب <p>
همان طورکه پیشتر نیز گفته شــد، از این برچســب در ایجاد متن و پاراگراف بندی استفاده می شود و مرورگر، قبل و بعد از عباراتی که درون این برچسب قرار می گیرند یک خط خالی قرار می دهد. برای مثال کدی حاوی دو پاراگراف انگلیسی و یک پاراگراف فارسی را در ویرایشگر متنی وارد کنید.
<p style=”text-align:center;color:red”> This is a paragraph </p>
<p> This is another paragaraph: Finding the information you want on the web often
requires more than just searching for a webpage. Once you’re viewing a webpage, you often
need to find the information or reference that is buried somewhere within the page. </p>
<p style=”direction:rtl;text-align:justify;font-family:Tahoma; font-size:smaller”>
<p> این سرویس جدید به سرعت مورد توجه مراکز دانشگاهی واقع شد و نهایتا در سال 1993 با ایجاد زیرساخت های نرم افزاری و سخت افزاری مور دنیاز، با نام Web Wide World در اختیار عموم کاربران قرار گرفت</p>
پاراگراف ها به این صورت نمایش داده می شوند:
برچســب <p> هم مانند اغلب برچسب ها، مشخصه style را پشــتیبانی می کند. برای پاراگراف ها خصوصیت های مهمی به منظور تنظیم نوع فونت، اندازه آن و نیز رنگ نوشــته ها وجود دارد. اما در این میان باید به دو خصوصیت مهمتر به خصوص برای نوشته های فارسی اشاره نمود.
Direction
در ایجاد متن و پاراگراف بندی خصوصیت Direction جهت را مشــخص می کند که متن به صورت راســت به چپ نوشته شود یا برعکس، جهت آن از چپ به راست باشد. اگر برای نوشته های فارسی که حاوی عبارات انگلیسی هستند، جهت راســت به چپ را به صورت صریح درج نکنید ترتیب قرارگیری عبارات فارســی و انگلیسی مانند تصویر زیر به هم خواهد خورد.
خصوصیت Direction می تواند مقادیر زیر را بپذیرد:
Rtl: متن را از راست به چپ درج می کند.
Ltr: جهت متن، چپ به راست خواهد بود.
Inherit: جهت متن از قالب بندی سایر عناصر صفحه به ارث برده می شود. مثالا اگر در برچسب <body> خصوصیت Direction روی rtl تنظیم شده باشد، همه پاراگراف ها این مقدار را می پذیرند.
Text-Align
در ایجاد متن و پاراگراف بندی خصوصیتText-Align ، نحوه تراز بندی متن را مشخص می کند و می تواند حاوی مقادیر زیر باشد:
Center: پاراگراف را وسط چین می کند.
Justify: ابتدا و انتهای سطرها از هر دو طرف تراز می شوند و برای نوشته های فارسی مناسب است.
Left: پاراگراف را چپ چین می کند که حالت پیشفرض برای متون لاتین است.
Right: پاراگراف راست چین می شود.
Family-Font
در ایجاد متن و پاراگراف بندی با استفاده از این خصوصیت می توان فونت متن را روی حالت دلخواه تنظیم نمود. مرورگر IE در حالت پیشفرض، نوشــته ها را با فونت Times New Roman نشــان می دهد. اما امروزه اغلب طراحان ایرانی ترجیح می دهند از فونت Tahoma استفاده کنند. چون حروف فارسی را به صورت کامال خوانا نمایش می دهد و مهمتر از همه این که جزو فونت های ضمیمه شده به سیستم عامل ویندوز اســت.
چنانچه شــما برای طراحی یک وبسایت از فونتی اســتفاده کنید که در رایانه اغلب کاربران وجود نداشــته باشد، نوشته ها با فونت پیشفرض مرورگر نمایش داده می شوند. البته یک راه حل دیگر هم وجود دارد که فایل فونت را برای دانلود درون صفحه اول وبسایت قرار دهید اما تجربه نشان داده بازدیدکنندگان وبسایت چندان از این روش استقبال نمی کنند.
برچسب <pre>
هنگام ایجاد متن و پاراگراف بندی وقتی در نرم افزار ویرایشگر متن یا محیط کدنویسی، عبارات را با زدن کلید Enter به خط جدیدی انتقال می دهید یا با استفاده از کلید Space بین کلمات فاصله زیاد ایجاد می کنید، اثر این تغییر در صفحه وب منعکس نمی شود. چون مرورگرها، Enter و فضاهای خالی موجود بین کلمات را نادیده می گیرند.
حتی زمانی که از برچسب <p> برای ایجاد پاراگراف استفاده می کنید، شروع کردن متن از ابتدای سطر جدید با استفاده از کلید Enter یا ایجاد فضای خالی با استفاده از کلید Space امکانپذیر نیست. برای غلبه بر این مشکل، در زبان XHTML یک برچسب اختصاصی با نام <pre> تعبیه شده که از عبارت Preformatted به معنی «پیش قالببندی» گرفته شده است. کد زیر را در محیط کدنویسی وارد کنید.
<html>
<head>
<title>برچسب های قالب بندیمتن</title >
</head>
<body>
<p>This is a
paragraph
with line break and space
</p>
</br>
<pre>This is a
preformatted text and preserves
line break and space
</pre>
</body>
</html>
عبارات زیر در مرورگر نمایش داده می شود.
همان طور که مشــاهده می کنید، عبارت میان برچســب های <pre> بدون هیچ تغییری توســط مرورگر نمایش داده می شــود و ضمنا برای نمایش آنها از فونت ثابت Courier New استفاده می گردد.
برچسب <small>
هنگام ایجاد متن و پاراگراف بندی این برچسب دقیقا برعکس <big> عمل می کند و باعث کوچکتر شدن عبارات نسبت به نوشته های مجاور می گردد. کد زیر را در ویرایشگر متنی وارد و آن را امتحان کنید.
<small>Small text</small><br/>
Normal text <br/>
<big>Big text</big><br/>
<big><small>Normal text</small></big>
آخرین ســطر این کد به خوبی نشان می دهد که استفاده از دو برچسب <small>و < big > در کنار هم باعث خنثی شدن اثر هر دو خواهد شد.
برچسب <sub>
این برچسب که اختصاری برای کلمه Subscript به معنی «زیرنویس» محسوب می شود، عبارت را کوچک نموده و پایین تر از خط زمینه نشــان می دهد. این برچسب عمدتا ای اضافه کردن اندیس به حروف یا نگارش فرمول های شیمیایی کاربرد دارد.
کد XHTML زیر را در ویرایشگر متنی وارد کنید.
<p style=”font-size:large”>آب شیمیایی فرمول :H<sub>2</sub>O </p>
<p style=”font-size:large”>This text contains <sub style=”color:green”>subscript</sub> text.</p>
عبارات زیر در صفحه وب نمایش داده می شــود. همان طور که مشاهده می کنید می توان برای این برچسب به صورت مجزا، سبک مورد نظر را تعریف نمود.
برچسب <sup>
اگر می خواهید بخشــی از عبارت را از خط زمینه بالاتر ببرید باید آن را درون برچســب<sup> قرار دهید که از کلمه Superscript به معنی «بالانویس» گرفته شــده است. عمده کاربرد این برچسب نوشتن فرمول های تواندار ریاضی است.
کد زیر، فرمول را با اندازه فونت Large درون مرورگر ایجاد می کند.
<p style=”font-size:large”> a<sup>2</sup> + b<sup>2</sup> = C<sup>2</sup></p>
برچسب <u>
هنگام ایجاد متن و پاراگراف بندی از این برچســب برای Underline نمودن یا زیرخط‌دار کردن عبارات استفاده می شود. زیر کلماتی که درون این برچســب قرار می گیرند یک خط صاف کشــیده می شود تا از بقیه متن متمایز شوند. از آنجا که در اغلب صفحات وب، پیوندهای موجود در صفحه را زیرخط‌دار می کنند تا توجه کاربر به آنها جلب شود، استفاده از این نوع قالب بندی درون متن های معمولی توصیه نمی شود.
کد زیر را امتحان کنید:
<p>Do not <u>underline</u> text if it is not a hyperlink</p>
خروجی زیر در مرورگر نمایش داده می شود.
در مشخصه Style خصوصیتی به نام Decoration-Text وجود دارد که اگر مقدار آن روی Underline تنظیم شود، مانند برچسب <u> عمل زیر خط‌دار کردن عبارات را انجام می دهد. به عنوان نمونه کد زیر را در ویرایشگر متنی وارد و نتیجه را در مرورگر مشاهده کنید.
<p style=”text-decoration:underline”>Do not underline text if it is not a hyperlink</p>
برچسب <bdo>
از این برچســب برای تغییر جهت متن استفاده می شود،به گونه ای که ترتیب قرارگیری حروف از آخــر به اول شــود. عبارت زیر را درون یک صفحه htm بگنجاند و نتیجه کار را در مرورگر مشــاهده نمایید.
<body>
<bdo>جهت نوشته </bdo>
</body>
برای مطالع بیشتر در مورد طراحی صفحات وب ساده به پیوند مربوطه مراجعه نمایید.