HTMLطراحی سایتگوناگون

۴-عنوان و پاراگراف در HTML

عنوان ها و پاراگراف ها بخش مهمی در HTML میباشند ، که هم اکنون به صورت جامع وکامل به آموزش این دوبخش میپردازیم.

 

عنوان ها درHTML

  • عنوان یا سرتیتر در HTML به کمک تگ های <h1>تا<h6> تعریف میشود.
  • <h1> بااهمیت ترین عنوان را مشخص میکند و<h6> بی اهمیت ترین عنوان را مشخص میکند.
  • برای فهم بیشتر موضوع میتونید قطعه کد زیر رو توی ادیتور انتخابیتون امتحان کنید.(پیشنهاد همیشگی ما dreamweaver میباشد)

 

 

  • از عنصر heading فقط برای سرتیتر ها استفاده کنید.از آنها برای بزرگ کردن یا boldکردن هیچگاه استفاده نکنید.
  • سرتیتر ها موارد مهمی در پیش چشمان مخاطبان سایت میباشد.همواره به بهترین شکل از سرتیتر ها استفاده کنید.
  • h1 برای مهم ترین سرتیتر استفاده میشود .و h6 کم اهمیت ترین سرتیتر را مشخص میکند.بدین شکل از h1 تا h6 شاهد روند کاهشی در اهمیت سرتیتر ها هستیم.

 


 

 

ایجاد خطوط افقی در HTML

 

  • تگ <hr/> برای ایجاد خطوط افقی در صفحه ایجاد میشود.این تگ آغاز وپایان ندارد وفقط هرجایی که نیاز به گذاشتن یک خط ممتد افقی در صفحه بود از تگ<hr/> استفاده میکنیم.

 

 


توضیحات(comment) در HTML

 

  • توضیحات میتوانند در قطعه کد های HTML وارد شوند تا باعث خواناتر شدن و قابل فهم تر شدن کد ها شوند.این توضیحات در مرورگر نمایش داده نمیشوند(بخش توضیحات برای نوشتن توضیح اضافه در باره خطوط برنامه میباشد تا در زمان لازم برای تغییر و یا استفاده از قطعه کد ها توسط طراح سایت استفاده شوند.)
 

 


 

 

 

پاراگراف ها در HTML

 

  • پاراگرف ها به وسیله تگ <p> نوشته میشوند.
  • مرورگرها یک خط خالی قبل وبعد هرپاراگراف به صورت خودکار اضافه میکنند.
 

 

 

 

نکته: روش دیدن کد های HTML سایت های مختلف

 

آیا تاکنون وقتی یک صفحه وب را دیده اید از خود پرسیده اید “چگونه می توان کدهای HTML آن را دید.”برای دیدن این کدها روی صفحه مورد نظر راست کلیک کرده و از منوی باز شده گزینه “View Source” را در (IE) و یا “View Page Source” را در Firefox و یا گزینه مشابه را در سایر مرورگرها انتخاب کنید.

 

 


دست به قلم شوید!


 

هم اکنون میخواهیم هر آنچه را که تا کنون آموزش دیدیم در یک کدHTML به شما نمایش دهیم.
شما نیز این نمونه کد رو برای آموزش هرچه بهتر البته تا اینجای کار چندین مرتبه با شکل های مختلف امتحان کنید.


  • تصویر قطعه کد بالا

 

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

تذکر: شما بجز استفاده از برنامه دریم ویور میتوانید از برنامه نوت پد هم که ساده ترین ادیتور حال حاضر میباشد استفاده کنید فقط برای دخیره فایل به صورتHTML باید هنگام ذخیره انتهای اسم برنامه خود html. رو بزنید.و همینطور به هنگام ذخیره کرده فایل دستی خود در بخش encoding عبارت آن را برابر UFT-8 قرار دهید تا متون فارسی شما در زبان HTML به خوبی نمایش داده شود.(اگر قطعه کد ها را در برنامه Dreamweaver میزنید خود این برنامه در بخش head یک خط کد به فرم روبرو نوشته است که کمک میکند قطعه کد های فارسی را نیز به راحتی در مرورگر تماشا کنید:<meta charset=”utf-8″> )

 

خصوصیتمقدار توضیحات
classنام classیک class برای عنصر مشخص می کند.
ididid منحصر به فردی را برای عنصر مشخص می کند.
styleتعریف styleیک style درون تگی برای عنصر مشخص می کند.
titleمتنی که در tooltip نمایش داده می شوداطلاعات اضافه ای را برای یک عنصر مشخص می کند (به صورت یک tool tip نشان داده می شود).

 

 


 

بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

دیدگاهتان را بنویسید

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

همچنین ببینید

بستن
بستن