HTML برای همه - بخش دوم- شناخت تگ های ضروری
در درس گذشته با اصول ساختاری یک فایل HTML آشنا شدیم و در پروژه آزمایشی مان یک صفحه وب ایجاد کردیم. اما محتوای صفحه خیلی به هم ریخته و شلوغ و ناخوانا بود. خب حالا نوبت آن است که کمی به ظاهر و نوع نمایش محتوای این صفحه برسیم. شاید کمی باید چارچوب قرارگیری آن را هم اصلاح کنیم.
معرفی می کنم… عنصر اچ تی ام ال. بگذارید قبل از آنکه از عناصر اچ تی ام ال یا همان تگ ها در متن مان استفاده کنیم، ابتدا با ساختار کلی آنها آشنا شویم.
عناصر یا Elements در هر متن اچ تی ام ال با تگ ها مشخص می شوند. هر تگ معمولا حاوی نام یا خلاصه نام عنصر مورد نظر است که در میان دو علامت کوچکتر و بزرگتر قرار گرفته است. مرورگر همیشه می داند که آنچه میان این دو علامت <> قرار دارد یک کد اچ تی ام ال است که باید ترجمه شود و مانند متن عادی آن را به کاربر نشان نمی دهد. عناصر معمولا شامل دو تگ آغاز و پایان هستند که تگ آغاز حاوی نام یا علامت اختصاری عنصر است و تگ پایان هم تکرار همان عبارت با علامت اسلش / است.
نکته: توجه داشته باشید که هیچ گاه اشتباها به جای اسلش / از علامت بک اسلش \ استفاده نکنید.
تگ های حاوی عنصر همیشه در دو طرف متن برای شکل دهی و طراحی آن به کار می روند. البته برخی از تگ ها هم (مانند تگ img) خالی هستند و چیزی درونشان نوشته نمی شود یا اینکه به بخش پایانی نیازی ندارند.
حالا نوبت به شیوه چینش و استفاده از تگ ها و کدهای اچ تی ام ال می رسد. به این موضوع در درس «آناتومی یک صفحه وب» بیشتر خواهیم پرداخت. اما دانستن اصول اولیه آن خالی از فایده نیست. همیشه شروع هر صفحه اچ تی ام ال با تگ <html> است. بعد از آن تگ <head> باز شده که می تواند شامل بخش های زیادی از جمله عنوان صفحه یا <title> باشد. در قسمت هد بیشتر اطلاعات لازم درباره استانداردها و زبان صفحه یا فایل های کمکی لازم برای نمایش وب سایت و همچنین شیوه معرفی آن به موتورهای جستجو قرار می گیرند.
بعد از بسته شدن بخش هد با تگ </head> نوبت به بدنه اصلی صفحه وب با تگ <body> می رسد که حاوی محتوای اصلی صفحه وب ما است. آنگاه در پایان، تگ بدنه و اچ تی ام ال را به ترتیب با </body> و </html> می بندیم.
خب، حالا آماده شکل دهی به صفحه وب تان هستید؟ بگذارید ابتدا با کدهای زیر سرو سامانی به صفحه پروژه جاری مان بدهیم و بعد از آن به سراغ معرفی تگ های پر کاربرد زبان اچ تی ام ال می رویم.
ابتدا این کدها را در فایل index.html که ذخیره کرده بودید، جایگزین متن قبلی کنید:
حال فایل را ذخیره کرده و آن را در مرورگر باز کنید. تفاوت خیلی زیادی به چشم می خورد. اینطور نیست؟
تگ html
برای نوشتن مجموعه ای از کدهای اچ تی ام ال، ابتدا لازم است که با یک تگ، ابتدای کدها را به مرورگر معرفی کنیم. برای این کار از تگ <html> باید استفاده کرد. هنگامی هم که کدهای تان را نوشتید، باید آن را با تگ <html/> ببندید. هیچگاه کدها نباید خارج از فاصله میان این دو تگ قرار گیرند.
البته اگر در حال ویرایش متن در ادیتور برنامه های امروزی مدیریت محتوا باشید، نیازی به وجود این تگ نیست. این تگ هنگام نوشتن کد برای یک صفحه اچ تی ام ال مجزا ضروری می نماید.
تگ head
هر صفحه اچ تی ام ال را می توان به دو بخش مجزای سر (head) و بدنه (body) تقسیم کرد. سر شامل برخی اطلاعات در مورد سایت و صفحه وب مورد نظر است، که یکی از مهمترین آنها عنوان یا title است. تگ head هم به صورت <head> و <head/> به کار می رود و بخش هایی مانند عنوان صفحه و فرمت زبان آن باید در این بخش قرار گیرند.
تگ title
این تگ تنها در درون تگ هد دارای معنی است و عنوانی را که در بالای مرورگر بر روی تب صفحه مورد نظرتان نوشته می شود، به نمایش در می آورد. شیوه صحیح استفاده از آن به این صورت است:
تگ body
این تگ مشخص کننده بخش دوم صفحه اچ تی ام ال است که تمامی تگ ها و مطالب سایت درون آن قرار می گیرند. شکل استفاده از آن هم به این صورت است:
مثال: یک صفحه ساده اچ تی ام ال با کدهایی که آموخته ایم، به این صورت خواهد بود:
نکته: برای اینکه نتیجه کار این صفحه را ببینید، تنها کافی است کدها را درون یک برنامه ویرایشگر متن ساده مانند Notepad نوشته و آنها را با نام دلخواه و پسوند html ذخیره کنید. حال صفحه ذخیره شده را در مرورگر باز کنید تا نتیجه کدنویسی تان را مشاهده کنید.
تگ پاراگراف <p>
این یکی از پرکاربردترین تگ هایی است که در برنامه های مدیریت محتوا و دیگر صفحات وب با آن سرو کار دارید. هر بخش مطلب را که می خواهید در پاراگراف مجزایی نمایش داده شود، باید توسط این تگ از بقیه متن جدا شود. یک پاراگراف به این صورت باید نوشته شود:
پس از اینکه با تگ <p/> پاراگراف را تمام کردید، می توانید دوباره با تگ <p> پاراگراف بعدی را آغاز کنید.
تگ وسط چین <center>
با استفاده از این تگ می توانید مطالب و عکس های درون آن را به صورت وسط چین در صفحه مرتب کنید. یعنی هر چیزی در میان دو تگ <center> و <center/> به صورت وسط چین نشان داده خواهد شد.
تگ درج تصویر
این تگ به شما اجازه می دهد که در میان متن یک یا چند عکس را جایگذاری کنید. شکل نوشتن این تگ به صورت <src img=””> است و جزو تگ هایی است که نیازی به بسته شدن ندارند. عبارت src در این تگ مخفف کلمه source یا منبع است که به آدرس عکس بر روی اینترنت اشاره دارد. برای درج عکس، باید ابتدا آن را در یک سایت اینترنتی قرار داده (آپلود کنیم) و آنگاه آدرس آن را در این کد استفاده کنیم.
مثال:
<img src="http://i48.tinypic.com/qrd8nq.jpg">
نکته: برخی تگ ها به صورت مجزا استفاده نمی شوند و به بعضی کدهای تکمیل کننده نیاز دارند (مثلا src در اینجا). به این کدهای تکمیل کننده که توضیحات یا خواص تگ را مشخص می کنند attribute می گویند. برای مثال به همین تگ عکس می توان خواص دیگری همچون طول و عرض را هم اضافه کرد.
مثال:
<img src="http://i48.tinypic.com/qrd8nq.jpg" height="400" width="300">
تگ Break Rule یا دستور شکاف <br>
وقتی بخواهیم ادامه متن یا هر محتوای دیگرمان را به خط بعدی انتقال دهیم از این تگ استفاده می کنیم. برای رفتن به خط جدید تنها کافی است از کد <br> & یا <br /> استفاده کنیم. این تگ همانند تگ عکس نیازی به بسته شدن ندارد.
تگ Horizontal Rule یا دستور افقی <hr>
صفحه حسابی شلوغ است و مطالب قاطی شده اند. چرا آنها را با یک خط نازک افقی از هم جدا نمی کنید. این تگ نیاز به بستن ندارد و تنها نوشتن عبارت <hr> برای ایجاد یک خط افقی کافی است.
تگ لینک <a>
بسیاری اوقات لازم است درون مطلبی که در حال نوشتن آن هستید، به سایت ها یا مطالب دیگری لینک دهید، تا خواننده برای اطلاعات بیشتر به آنجا مراجعه کند. برای این کار خیلی ساده می توانید از تگ لینک به شکل زیر استفاده کنید:
<a href="http://www.darsnameh.com"> درسنامه </a>
تگ فونت <font>
در صورت استفاده از ادیتور برنامه های مدیریت محتوا یا وبلاگ ها، به راحتی می توانید نوع، اندازه و رنگ فونت را انتخاب کنید. اما در صورت لزوم، به راحتی و تنها با استفاده از این تگ می توانید خواص مختلفی را برای فونت متن تان اختصاص دهید.
مثلا کد:
کلمه درسنامه را با اندازه فونت ۱۰ و به رنگ سبز به نمایش خواهد گذاشت و کد:
کلمه درسنامه را با رنگ آبی و اندازه فونت ۸ به شما نشان خواهد داد.
تگ block quote
گاهی اوقات درون متن لازم است که نقل قولی از فردی داشته باشید. نوشتن نقل قول همانند متن معمول مقاله، باعث گمراهی خواننده شده و ممکن است تحلیل و نظر شما را هم بخشی از صحبت وی به شمار آورد. در بسیاری از موارد برای مشخص شدن نقل قول آن را در میان علامت های « » قرار می دهند.
اما در میان تگ های اچ تی ام ال کدی داریم که این کار را بسیار زیباتر انجام می دهد. با قرار دادن متن نقل قول درون تگ blockquote، این متن به صورت مجزا و وسط چین به نمایش درآمده و علاوه بر جلای بیشتر صفحه، از به اشتباه افتادن خواننده هم جلوگیری می کند.
</blockquote>
در این درس به تعدادی از تگ های اولیه اچ تی ام ال که کاربرد بیشتری دارند اشاره کردیم. در دروس آینده به صورت جزئی تر به کار با ادیتورهای سایت ها و برنامه های مدیریت محتوا پرداخته و برخی کدهای ضروری برای بهینه سازی متن در این ادیتورها را معرفی می کنیم.
اما هیچ چیز کار تمرین را نمی کند. برای اینکه با تگ های مهم اچ تی ام ال آشنا شوید لازم است که کمی تمرین کنید. شما تمام ابزارهای لازم را در اختیار دارید. همانطور که گفتیم کل مواد لازم یک ادیتور متنی مانند Notepad در ویندوز است یا اگر دوست داشته باشید یک ادیتور حرفه ای تر داشته باشید می توانید نرم افزار رایگان Notepad++ را دانلود کنید.
حالا تگ های اچ تی ام را بنویسید و صفحات وب دلخواه خود را ایجاد کنید.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.