کلاس طراحی وب آنلاین

آموزش برنامه نویسی PHP و طراحی وب – قسمت هفتم

آموزش برنامه نویسی PHP و طراحی وب – قسمت هفتمReviewed by محمد مخلوقی on Jul 3Rating:

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

 

تگ توضیحات <– … –!>

عبارتی که در داخل تگ توضیحات نوشته می شود توسط مرورگر نادیده گرفته می شوند.

این تگ برای ایجاد توضیحات برای کد ها مورد استفاده قرار میگیرد.

مانند زیر :

 


   < !-- کد زیر یک پاراگراف ایجاد مینماید -- >
   < p > متن تست < /p >

که در کد بالا تنها فقط متن “متن تست” نمایش داده میشود .

 

تگ عنوان H1 – H6

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

تگ های H1 تا H6 به ترتیب از H1 بزرگترین استایل تا آخر می باشد که درجه ی اهمیت آنها هم به همین میزان است.

نکته ی مهم : سعی کنید در صفحاتتون Title نوشته شده در بخش header سایت را در محلی مشخص در بالای صفحه بین تگ H1 قرار بدهید.

 

نحوه ی استفاده از آن به صورت زیر است :


   <h1>عنوان شماره ۱</h1>

   <h2>عنوان شماره ۲</h2>

   <h3>عنوان شماره ۳</h3>

   <h4>عنوان شماره ۴</h4>

   <h5>عنوان شماره ۵</h5>

   <h6>عنوان شماره ۶</h6>

خروجی قطعه کد زیر به صورت زیر می باشد:

 

عنوان شماره ۱

عنوان شماره ۲

عنوان شماره ۳

عنوان شماره ۴

عنوان شماره ۵
عنوان شماره ۶

 

 

نکته: اندازه و نوع فونت بصورت پیش فرض به صورت بالا قرار میگیرد، اما در صورت دلخواه میتوانید نوع و اندازه و خصوصیات ظاهری دیگر تگ های عنوان (h1 – h2) را با استفاده از CSS تغییر دهید.

 

تگ های پاراگراف P , Br

 

تگ های پاراگراف P , Br برای تراز بندی متون و جملات درون صفحات کاربرد زیادی دارند.

 

تگ P یا پاراگراف:

متن داخل این تگ بصورت یک پاراگراف در نظر گرفته می شود. در صورت ایجاد یک پاراگراف یا تگ P جدید ، پاراگراف بعدی به سطر بعد می رود.

مثال:

   <p> متن تست است. </p>
   <p> متن تست شماره ۲٫ </p>

 

خروجی به صورت زیر می باشد :

متن تست است.

متن تست شماره ۲٫

 

تگ Br

تگ Br در نقش enter در ورد می باشد بدین صورت که خط جدیدی درون پاراگراف ایجاد میکند و نوشته ی بعد از آن را به سطر جدید می برد .

مثال:

   <p> این متن <br /> تست است. </p>

خروجی به صورت زیر می شود :

این متن

تست است.

 

نکته ۱: استفاده ی زیاد از این تگ مناسب نیست و بهتر است با استفاده از تگ P عمل انتقال به خط جدید انجام گردد، دلیل اصلی آن کند نمودن سایت در استفاده های زیاد از این تگ می باشد.

نکته ۲: این تگ بصورت یکه استفاده میشود و تگ پایانی ندارد.

 

تگ Center

متن داخل تگ center بصورت تراز وسط نمایش داده می شود. توصیه میشود به جای استفاده از این تگ ، در صورت امکان از کدهای CSS برای قالب دهی و تراز بندی متن ها استفاده شود.

دلیل این امر کم حجم نمودن کدها و در نتیجه سرعت بالاتر و نیز سهولت در تغییرات احتمالی قالب و فرمت سایت میباشد.

مثالی در استفاده از این تگ :


<p> متن تست با تراز پیش فرض </p>

<center> متن تست با تراز وسط چین </center>

خروجی این کد بصورت زیر می باشد :

متن تست با تراز پیش فرض

متن تست با تراز وسط چین

 

تگ B

متن داخل تگ B بصورت توپر شده نمایش داده می شود. این تگ نیز همانند تگ Center بهتر است از معادل های آن در CSS استفاده شود.

مثالی در  زمینه ی تگ B :

   <p> این متن <b> تست </b> می باشد. </p>

خروجی کد بالا به صورت زیر می باشد که کلمه ی تست بصورت تو پُر شده نمایش داده می شود :

این متن تست می باشد.

 

 

تگ Hr

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

 

مثالی در این زمینه :

   <p> این متن <hr /> تست است </p>

خروجی:

 

این متن


تست است

تگ های Sub و Sup

متن داخل تگ sub و تگ sup بصورت اندیس (sup) و یا زیرنویس (sub) در می آید. شکل کلی آن به صورت زیر است:

 

   <p> این متن <sub> تست</sub> می باشد. </p>
   <p> این متن <sup> تست </sup> می باشد. </p>

 

خروجی :

 

این متن تست می باشد.

این متن تست می باشد.

 

تگ گروه بندی Fieldset , Legend

تگ Fieldset برای گروه بندی در فرم ها بسیار کاربرد دارد. این تگ در Asp.net معادل سروری کنترل Panel می باشد. برای تعیین عنوان یک گروه از تگ Legend در ابتدای تگ Fieldset استفاده می گردد.

نکته ی بسیار مهم: در صورت استفاده ننمودن از کدنویسی سروری برای کنترل های Asp.net توصیه اکید می شود که از تگ های معادل آنها استفاده شود. بطور مثال بجای استفاده از کنترل Asp:Panel از تگ Fieldset و Legend استفاده شود. زیرا در نهایت کنترل های Asp.net به تگ های Html خالص تبدیل شده و برای جلوگیری از این سربار اضافه از تگ های مستقیم آنها استفاده نمایید.

مزیت دیگر این روش کنترل بهتر آنها در Style آنها بوسیله CSS می باشد که کنترل های Asp.net بعضا در این مورد مشکل زا هستند.

 

نمونه ای از کاربرد تگ Fieldset و Legend را در مثال زیر می بینید:


     <fieldset>
         <legend>عنوان گروه</legend>

         <p>این متن تست است.</p>

         <p>این متن تست شماره ۲ است.</p>
   </fieldset>

 

خصوصیت اصلی

خصوصیت اصلی تگ Legend خصیصه ی Align یا تراز می باشد که محل قرار گیری عنوان را در این تگ تعیین میکند.

 

مقدار هایی که این خصوصیت می پذیرد عبارتند از : Top , Bottom , Left , Right

مثالی در این زمینه:

     <fieldset>

         <legend align="left">عنوان گروه</legend>

         <p>این متن تست است.</p>

         <p>این متن تست شماره ۲ است.</p>

   </fieldset>

 

تگ عکس img

یکی از مهمترین و پر استفاده ترین تگ ها در HTML تگ img یا عکس می باشد.

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

 

نکته: این تگ بصورت یکه بکار می رود.


   <img   Properties="values"   ... />

 

مهمترین خصوصیات <img> بصورت زیر است:

 خصوصیت  مقادیر و توضیح مختصر
 src آدرس عکس در فضای وب
alt متن جایگزین متن
width عرض تصویر به پیکسل
height ارتفاع تصویر به پیکسل
border مقدار پیکسل حاشیه (پیش فرض صفر)
usemap نام شناسه ی نقشه ی تصویر متصل به عکس

 

خصوصیت Src: در این خصوصیت که اصلی ترین خصوصیت تگ <img> می باشد ، آدرس تصویر آپلود شده در فضای اینترنت قرار میگیرد.

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

ساده ترین مثال از استفاده ی تگ img

   <img   src="http://address.domain/filename.format"   />

 

خروجی بصورت زیر می باشد :

 

 

خصوصیت Alt: خصوصیت Alt یا Alternate Image، خصوصیتی مهم می باشد که برای متن جایگزین تصویر به کار می رود.

در حالت پیش فرض در صورت اشتباه بودن آدرس و لود نشدن تصویر در مرورگر اکسپلورر علامت ضربدر را برای عکس نمایش میدهد (در مرورگرهایی مثل اپرا علامت ضربدر نیز نمایش داده نمی شود).

حال با استفاده از خصوصیت alt برای تگ img میتوان در صورتی که آدرس عکس اشتباه و یا عکس نتواند لود شود، متنی را به کاربر نشان دهیم.

در صورتی که عکس بطور صحیح لود گردید متن این خصوصیت نمایش داده نمیشود و فقط برای موتور های جستجوگر کاربرد پیدا میکند.

اهمیت ویژه ی این خصوصیت برای موتورهای جستجوگر می باشد. به طور خلاصه اینکه موتور های جستجوگر قادر به خواندن عکس نمی باشند و از طریق این خصوصیت به محتوای عکس قرار داده شده مطلع می گردند.

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


   <img   src="http://address.domain/filename.format"   alt="ساعت اپل"   />

 

خروجی :

 

ساعت اپل

 

خصوصیات width , height , border : بصورت پیش فرض تگ img نمایش عکس ها را به اندازه ی اصلی عکس و بدون خط حاشیه نمایش میدهد. در صورتی که بخواهید تصویر را در سایز دلخواه و با خط حاشیه نمایش دهید از این خصوصیات استفاده نمایید. بطور مثال :


   <img   src="http://address.domain/filename.format"   alt="ساعت اپل" width="100"   height="100"   border="2"   />

خروجی بصورت زیر می باشد :

 

ساعت اپل

ساعت اپل

 

نکته ی مهم دیگر که در بخش Seo به طور مفصل تری به آن پرداخته میشود این است ، با وجود اینکه خود HTML در صورت قرار ندادن سایز عکس با استفاده از height و widht ، اندازه ی تصویر ار به اندازه ی خود تصویر تبدیل میکند اما برای این پردازش اضافه توسط مرورگر ها و در نتیجه سرعت بالاتر لود صفحه سایز تصویر را وارد نمایید.

خصوصیت Usemap: این خصوصیت برای استفاده از عکس محدوده ای با استفاده از تگ های map و area می باشد.

 

تگ لینک ( a )

 

تگ لینک یا تگ <a> برای ارتباط بین صفحات وب و یا ایجاد لنگر در داخل صفحه، در سایت به کار میرود.

 

این تگ به صورت کلی زیر به کار می رود :

 


   < a   Properties ="Value" .... >   محتوا   </ a >

نکته ی مهم در استفاده از تگ <a> این است که در بخش محتوا می توان غیر از متن از تصویر و یا المنت های دیگر نیز استفاده نمود.

مهمترین خصوصیات <a> به صورت زیر می باشد :

 خصوصیت  مقادیر و توضیح مختصر
 href آدرس صفحه ای که میخواهیم با کلیک بر روی محتوا مرورگر به آن برود.
target طریقه ی باز شدن لینک در مرورگر
name نام لنگرگاه برای پرش به قسمتی از صفحه

 

خصوصیت Href: این خصوصیت مهمترین خصوصیت تگ a می باشد که با مرورگر پس کلیک بر روی محتوای لینک به آدرسی که در این خصوصیت قرار میگیرد می رود. مثال :


   < a href="http://mohandeseit.ir" > اینجا کلیک کنید </ a >

   < / br >

   < a   href="http://mohandeseit.ir" > <img   src="somedir/somefile.format"   /> </ a >

خروجی مثال بالا:

 

مهندس آی تی

مهندس آی تی

 

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

 

در ادامه سری آموزشی با تگ های پیشرفته تر در HTML با شما خواهیم بود. شما همچنان می توانید پرسش های خود را راجع به برنامه آموزش برنامه نویسی PHP و طراحی وب در قسمت نظرات مطرح نمایید.

 

0 پاسخ

ارسال یک پاسخ

در گفتگو ها شرکت کنید.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *