فصل 1 : کار کردن با متن و لینک
در قسمت قبل پس از بررسی مفایهم اولیه، ساختار کلی یک فایل html را نیر بررسی کردیم. در این بخش و بخش های پیش رو نیز بر اساس همین ساختار سندها را ایجاد میکنیم.
در این فصل دستورات مربوط به تغییر فرمت متن و نحوه ایجاد لینک ها را بحث میکنیم. و در بخش های پیش رو درخصوص ایجاد جداول و قالب بندی و..... بحث خواهیم داشت.
در کدنویسی حتی کوچکترین تغییرات روی متن را از طریق دستورات اعمال میکنیم. نظیر توپر کردن متن، ایجاد پاراگراف ها و... .
در زیر به بررسی برچسب های تغییر فرمت متن می پردازیم.
ایجاد یک پاراگراف
برای ایجاد یک پاراگراف از عنصر p که مخفف paragraph است، استفاده می شود. یعنی تگ باز <p> در ابتدای پاراگراف، و همچنین تگ بسته <p/> نیز در انتهای متن، یک پاراگرف را ایجاد می کند.
مثال :
کد HTML:
<p> ....... </p>
<p> ....... </p>
در مثال فوق، هر پاراگراف به صورت یک قطعه متن ظاهر شده و بین دو پاراگراف یک فاصله اضافی ایجاد می شود تا از یکدیگر جدا شوند.
شکست خطوط
شکست خطوط در تمام متون جهت خواناتر شدن متن یک ضرورت است. این عمل از طریق برچسب یکطرفه br ایحاد می شود.
برچسب br مخفف کلمه break است.
مثال :
کد HTML:
Row 1 <br /> Row 2
در متن فوق، Row 1 در یک سطر و Row 2 در سطر بعد قرار خواهد گرفت.
ایجاد تیتر
در html ، شش سطح تیتر وجود دارد. که تفاوت هر سطح از این شش سطح در بزرگی آنهاست که هر اندازه از تیترها معمولا در جایگاه های خاصی استفاده می شود.
تیتر سطح 1 بزرگترین تیتر است و طبعا تیتر سطح 6 کوچکترین سطح تیتر است.
برای ایجاد هر تیتر از برچسب دو طرفه h استفاده می شود. h مخفف کلمه heading است.
مثال :
کد HTML:
<h1> header 1 </h1>
<h2> header 2 </h2>
<h3> header 3 </h3>
<h4> header 4 </h4>
<h5> header 5 </h5>
<h6> header 6 </h6>
در مثال فوق هر تیتر از 1 تا 6 به ترتیب از بزرگ به کوچک نوشته شده است.
✍ هر تیتر علاوه بر افزایش سایز فونت، متن را توپر میکند.
توپر کردن متن
وقتی میخواهید متن را توپر باید از برچسب دو طرفه strong استفاده کنید. البته در نسخه های قبل html از متن برچسب دو طرفه b نیر استفاده میشد. که البته هنوز هم گاها از این برچسب استفاده میشود. اما بهتر است از برچسب های html 5 استفاده کنید. پس پیشنهاد بنده همان strong است.
مثال :
کد HTML:
<strong> Milad-Ku </strong>
ایتالیک کردن متن
ایتالیک یا کج کردن متن توسط برچسب em که مخفف Emphasis است، استفاده می شود.
مثال :
کد HTML:
Milad-Ku
<em> Milad-Ku </em>
متن خط خورده
شاید در بسیاری از سایت های نرخ ارز دیده باشید که نرخ قبلی خط خورده و نرخ جدید در جلوی آن نوشته می شود.
متون خط خورده کاربردهای متفاوتی دارند که برای ایجاد حالت خط خوردگی متن از برچسب strike استفاده می شود.
مثال :
کد HTML:
<strike> 1$ = 900 T </strike>
تغییر فونت و...
در نسخه های پیشین html یکسری برچسب ها جهت انجام کارهایی نظیر تغییر فونت وجود داشت اما در HTML 5 دیگر از برچسب های قدیمی استفاده نمی شود و این دسته از کارها به css واگذار شده است که در فصل های پیش رو نحوه اعمال این تغییرات را به وسیله css توضیح خواهم داد.
ایجاد لینک
لینک ها یکی از عناصر پرکاربرد در وب و کدنویسی هستند که هسته اصلی وب را تشکیل می دهند.
لینک ها توسط برچسب دو طرفه a ایجاد میشوند. a مخفف کلمه anchor است.
ادرس مدنظر توسط خاصیت href تعیین می شود.
مثال :
کد HTML:
<a href="http://google.com"> Milad-Ku </a>
خاصیت های این برچسب در فصل های پیش رو بیشتر مورد بررسی قرار خواهد گرفت.
انواع لینک
در کدنویسی از دو نوع لینک دهی استفاده میشود.
لینک دهی مطلق (absolute) : در این نوع لینک دهی که معمولا لینک مورد نظر در سرور دیگر و یا در سایت دیگر قرار دارد باید برای آدرس هر فایل از لینک کامل استفاده شود.
لینک دهی نسبی (relative) : اما در این نوع لینک دهی که فایل مورد نظر حتما در خود همان سرور و سایت قرار دارد می توان آدرس فایل ها را نسبت به پوشه و آدرس کنونی نوشت.
✍ توجه :
اگر در کنار صفحه html که در حال نوشتن آن هستیم فایلی به نام test.pdf باشد تنها کافیست در لینک دهی اسم فایل را بنویسیم.
اما اگر فایل در پوشه ای باشد که در کنار همین فایل است تنها اسم پوشه و یک / (اسلش) را نوشته و سپس اسم فایل را مینویسیم
و همچنین اگر فایل در مسیری قبل از پوشه ای که این فایل html در آن است باشد، ابتدا عبارت /.. را نوشته و سپس اسم فایل را مینویسیم.
به مثال های زیر توجه کنید :
به فایل test.pdf که در کنار همین صفحه html قرار دارد لینک میدهیم :
کد HTML:
<a href="test.pdf"> test </a>
به فایل test.pdf که در پوشه ای به اسم folder در کنار همین صفحه html قرار دارد لینک میدهیم :
کد HTML:
<a href="folder/test.pdf"> test </a>
به فایل test.pdf که در یک پوشه قبل تر از پوشه ای است که این صفحه html در آن قرار دارد لینک میدهیم :
کد HTML:
<a href="../test.pdf"> test </a>
در فصل های پیش رو بیشتر در مورد لینک ها بحث خواهیم داشت.
تمرین :
ابتدا جهت رفع مشکلات مثال های فوق را بصورت تکی و سپس بصورت کلی نتیجه آموزش های بالا را به شکل زیر در نوت پد تایپ کنید و سپس از آن یک خروجی html بگیرید.
کد HTML:
<html>
<head>
<title> test page </title>
</head>
<body>
<h1> HTML </h1>
<br />
this is a test page <br /><strong> milad-ku </strong>
<a href="http://google.com"> Google </a>
</body>
<html>
نتیجه :