درس سوم – تگ های پایه HTML

در این درس قصد داریم چند تگ مهم و پرکاربر HTML که پایه اکثر اسناد HTML هستند را معرفی کنیم. از

جمله تگ های سرفصل ، پاراگراف ، لینک و غیره. با ما همراه باشید .

اگر تا این لحظه درس های گذشته را چندان کامل یاد نگرفته اید ، نگران نباشید، به مرور زمان نوشتن تگ

ها و کد های ذکر شده بسیار عادی و ساده خواهد شد.

1) تگ های سرفصل (تگ های سری H) :

در یک سند ساده HTML شما می تونید بدون اینکه CSS نویسی کنید یا برای عنوان ها سایز فونت تعیین

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

های کم اهمیت تر می رسیم. مهم ترین عنوان یک صفحه ساده HTML باید در تگ

به این صورت قرار گرفته شود :

تگ های H تا شماره H6 ادامه دارند و شما می توانید عنوان های صفحه رو تا H6 ادامه بدید. مثلاً می

تونید عنوان اصلی سایت تون رو H1 بزارید و عنوان مطالب رو H2 و عنوان منو های صفحه رو H3 و همینطور

الی آخر.

مثال :

نکات این بخش :

1- Heading ها در صفحات HTML از هر نظر اهمیت بالایی دارند . حتی از نظر بهینه بودن و سئوی صفحات سایت شما اثر بسزایی دارند . موتور های جستجوگر از این تگ ها استفاده می کنند تا محتوای سایت شما را بهتر تشخیص دهند .

2- Heading ها با بولد کردن تفاوت دارند و هرگز مشابه هم نیستند.

3- Heading ها را در مکان صحیح استفاده کنید و حتماً به خاطر داشته باشید که آنها را پس از استفاده در مکان مورد نظر ببندید . مکان صحیح استفاده از Heading ها به قالب و نحوه layout صفحه ی مورد نظر شما وابسته است ولی همانطور که پیشتر عرض شد، معمولاً عنوان اصلی باید H1 باشد و عنوان های مهم ولی غیر اصلی ، H2 بشن و عنوان های کم اهمیت تر H3 و همینطور تا آخر.

2) تگ پاراگراف (p) :

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

که بهتره بسته بشه. در بخش نکات کاملتر عرض می کنم .

مثال :

نکات این بخش :

1- مرورگر ها معمولاً وقتی به یک تگ باز شده ی

میرسن، بصورت اتوماتیک اون رو بصورت بسته شده هم در نظر می گیرند. یعنی بعضاً اگر شما این تگ رو نبستید هم ممکنه مشکلی پیش نیاد و اکثر مرورگر ها بدون مشکل خروجی صحیحی نمایش بدن وقتی چند پاراگراف پشت سر هم باز می کنید. ولی ترجیحاً بهتره مانند نمونه بالا وقتی که به پایان هر پاراگراف خودتون رسیدید ، تگ p رو ببندید به این صورت :

2- همانطور که پیشتر عرض شد، اینتر زدن و ایجاد خطوط جدید در HTML نویسی تغییری در خروجی شما نداره و اگر بخواید فاصله بدید باید با تگ فاصله ایجاد کنید که در ادامه ذکر خواهد شد.

3) تگ فاصله بین خطوط و المان ها (br) :

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

مثال:

نکته :

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

4) تگ خط جداکننده افقی بین المان ها (hr) :

در HTML می تونید با یک تگ ساده دیگر ، یک خط افقی در صفحه ایجاد کنید : تگ

مثال :

نکته :

این تگ هم مانند تگ br بوده و می تواند در هر جایی که مایل باشید استفاده شود و البته نیازی به بسته شدن همندارد .

5) تگ گذاشتن لینک روی المان ها (a) :

شما می توانید در HTML نویسی به هر المان ساده ای از صفحه ، یک لینک نسبت دهید. این لینک، چند ویژگی دارد که مختصراً به آنها خواهیم پرداخت. زمانی که یک بخش از کد های خودتون رو لینک بدید، یعنی اگر کاربر روی اون بخش از المان ها کلیک کنه ، به آدرس مورد نظر شما که در تگ لینک دهی معرفی میشه، ارجاع داده میشه. این ارجاع ویژگی های خودش رو داره. مثلاً می تونه در صفحه جدید باز بشه ، در تب جدید باز بشه و غیره که در ادامه ذکر خواهد شد.

در حالت کلی ، در HTML نویسی، یک لینک سه حالت دارد :

اول ) لینک هنوز کلیک نشده و صفحه ی لینک شده در تگ لینک هم توسط کاربر بازدید نشده و ماوس هم روی آن نرفته. این لینک با “زیرخط” نمایش داده میشه و رنگ پیشفرض آن آبی است.

دوم ) ماوس روی المان لینک شده قرار داده میشه ، اصطلاحاً Hover میشه. در این حالت، نشانگر ماوس شما به شکل دست خواهد شد. رنگ لینک تغییر نخواهد کرد و لینک همچنان توسط کاربر مشاهده نشده است.

سوم ) ماوس در حال کلیک روی لینک هست . در این حالت ، رنگ لینک قرمز میشه.

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

نکته : رنگ های ارائه شده برای لینک که در بالا عرض شد، حالت پیشفرض هستند و برای تغییر آنها باید از کدنویسی CSS کمک گرفت و به رنگ های دلخواه تغییرشان داد که در این بخش بررسی نمی شود .

ساختار کلی و ساده تگ لینک در HTML به این صورت است :

مثال :

نکات این بخش:

1- تگ لینک ، باید باز و بسته شود و اگر بسته نشود، تا آخر کد های HTML شما را لینک می کند !

2- مهم ترین بخشی که در تگ لینک دهی HTML مورد استفاده قرار می گیرد ، ویژگی href آن است.

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

3- هر ویژگی ، باید در حین باز شدن تگ ، مورد استفاده قرار گیرد. یعنی جایی که ما تگ a را باز کردیم ، باید بلافاصله کد های ویژگی لینک را بنویسیم. در حقیقت جای دیگری برای نوشتن آنها نداریم !

4- هر ویژگی ، باید اول نام آن نوشته شود. سپس علامت = گذاشته شده و مقدار مورد نظر برای ویژگی ، داخل ” ” قرار گیرد.

در مثال بالا، ما برای تگ لینک ، ویژگی href رو معرفی کردیم و برای مقدار دهی به ویژگی href لینک مون، آدرس سایت رو دادیم.

5- href به اشاره به آدرس صفحه ی لینک شده اشاره می کنه. یعنی جایی که شما قصد دارید کاربر وقتی روی اون کلیک کرد ، وارد صفحه مورد نظر بشه.

6- ساختار ذکر شده مهم هست و باید برای تمام ویژگی هایی که در آینده هم ذکر می کنیم رعایت بشه.

7- دقت کنید که در استفاده از ویژگی href باید حتماً صفحه مورد نظر رو با http یا هر پروتکلی که میخواهید لینک کنید ، شروع کنید.

8- هر چیزی که میخواهید لینک بشه ، باید بین تگ a قرار داده بشه. یعنی مثلاً در مثال بالا ، ما متن “Visit Farzad’s Blog!” را لینک کردیم به آدرس مورد نظر مون . شما می تونید در بین تگ a هر المان ساده ای رو لینک کنید. مثلاً این المان ساده ، می تونه تگ پاراگراف باشه یا عکس یا هرچیزی که از نظر ساختار صفحه امکان لینک شدن اون وجود داشته باشه. 

ویژگی href تا اینجا بیان شد . اکنون به سایر ویژگی های مهم برای تگ لینک در HTML می پردازیم.

ویژگی target :

این ویژگی بیان می کند که لینک کلیک شده، دقیقاً چگونه باز شود . این ویژگی مقادیر مختلفی می تواند داشته باشد ، ولی مهم ترین آنها ، ویژگی blank به معنای صفحه ی جدید می باشد که البته باید به همراه یک آندرلاین تعریف شود .

مثال :

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

6) تگ فراخوانی یک عکس (img) :

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

ساختار ساده یک تگ عکس در HTML :

 یک تگ عکس در حالت ساده مشابه کد بالا ، چند ویژگی دارد که در ادامه ذکر می کنیم.

1- آدرس عکس با src فراخوانی می شود .

شما می توانید برای لود شدن عکس از سطح وب ، آدرس آن را به ویژگی src نسبت دهید که دو حالت دارد.

اول ) عکس از دامنه و سایت دیگری است و شما آدرس آن عکس را در بخش src قرار می دهید. مانند : http://sitename.com/image.png

دوم ) عکس داخل هاست و فضای وب سایت شماست، و برای فراخوانی آن نیازی به ذکر نام دامنه مانند حالت اول نیست. کافیست در بخش src نام عکس به همراه پسوند آن را بنویسید. مانند نمونه ای که در بالا ارائه شد.

2- ویژگی alt :

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

مثلاً فرض کنید به دلیل قطع شدن کانکشن کاربری که وب سایت شما را باز می کند یا حتی اشتباه وارد کردن src توسط شما، عکسی برای کاربر نمایش داده نمیشود. در این صورت ، اگر یک عبارت در ویژگی alt وارد کرده باشید، آن عبارت برای کاربر نمایش داده میشود.

در مثال ساده بالا، اگر عکس نمایش داده نشود ، عبارت farzad logo به نمایش در می آید.

3- ویژگی طول و عرض عکس :

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

این ویژگی ها در حالت عادی بهتر است وارد شوند و اگر وارد نشوند ، باعث مشکلاتی می شوند . فرض کنید عکس مورد نظر شما به هر دلیلی نمایش داده نشود، در این صورت، مرورگر حین لود کردن کل صفحه ، فضایی مخصوص آن عکس در نظر نمی گیرد و ممکن است باعث به هم ریختگی قالب شما شود . همچنین تعیین طول و عرض عکس در تگ HTML آن از یک جهت دیگر موثر و مفید است. شما فرض کنید صفحه ای طراحی میکنید که بیش از 20 عکس مختلف کوچک و بزرگ دارد . طبیعیست مدت زمانی طول می کشد تا آن عکس ها یک به یک لود شوند. مخصوصاً با وضعیت اسفناک اینترنت ایران ، ما با سرعت خوبی مواجه نیستیم و عده زیادی از مردم ، همچنان از اینترنت های معمولی و حتی دایل آپ استفاده می کنند. لذا تصور کنید صفحه ای با تعداد عکس متوسط و بالا را این افراد باز کنند. اگر طول و عرض عکس ها معرفی و تعریف نشده باشد، آنها برای مشاهده قالب و layout کلّی صفحه ی سایت شما ، مجبورند صبر کنند تا تمامی عکس ها یک به یک باز و لود شوند. تا با layout اصلی قالب شما (طرح کلی مد نظر شما) مواجه شوند. ولی اگر طول و عرض ها تعریف شوند، با باز شدن صفحه ی سایت ، layout اصلی قالب شما به نمایش در می آید و مرورگر فضایی را برای عکس های فراخوانی شده توسط شما در نظر می گیرد. حالا این عکس ها چه باز بشوند و چه باز نشوند، طرح کلی قالب شما برای بازدید کننده مشخص و نمایان است. پس هرگز این دو ویژگی را از یاد نبرید. البته نمی توان از اثر خوبی که تعریف این دو ویژگی روی سئو و بهینگی سایت شما دارن هم چشم پوشی کنیم.

امیدوارم خسته نشده باشید ، این درس کمی طولانی شد ، ولی با ساختار های پرکاربردی آشنا شدیم که تقریباً در تمامی صفحات وب ، استفاده شده و می شوند.

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

سوالی اگر در این زمینه داشتید ، در زیر همین مطلب نظر بگذارید تا با کمال میل پاسخگو باشیم.