• رد پالت، پالتی برای تمامی کسب و کارها
  • تلفن: 02188283411

آموزش برنامه نویسی Html5 (جلسه دوم)

آموزش برنامه نویسی Html5 (جلسه دوم)

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

اولین سوالی که قبل از شروع، پیش می آید این است که تگ چیست؟ تگ در زبان فارسی معادل برچسب است. پس تگ ها در زبان Html که زبان نشانه گذاری ابر متن است به مفهوم نشانه های از پیش تعیین شده می باشد.

تگ ها در زبان html معرف عناصر یا Element های سایت هستند. تگ ها به دو دسته تقسیم می شوند:

۱- تگ های باز (open tag)

۲- تگ های بسته (close tag) یا کانتینر (Container tag)

بخش ابتدایی تگ بصورت<html> یعنی بین دو علامت کوچکتر و بزرگتر نوشته می شود و به آن تگ باز می گویند. چنانچه در پایان همان تگ تنها با اضافه شدن یک اسلش <html/> اتمام پذیرد به آن تگ بسته یا کانتینر می گویند. برای درک بهتر مفهوم تگ، تصویر زیر را ببنید.

tag تگ چیست؟

نحوه استفاده از تگ H1 تا H6

تگ H حرف اول کلمه Head است و از مهمترین تگ های ساختار سایت به حساب می آید. تگ های H تاثیر بسزایی در سئوی سایت دارند. البته در صورتی که بصورت صحیح استفاده شوند. از دیدگاه سئو در هر صفحه سایت باید تگ H1 تا H6 یکبار بکار رود. هر چه عدد تگ ها بیشتر می شوند سایز فونتهایشان کوچکتر می گردند که البته شما می توانید از طریق پنل سایت یا از طریق Style آنها را اصلاح کنید.

معمولا از تگ های H در عناوین مهم و کلیدی صفحات سایت استفاده می شود. کلیدی ترین عنوان یا عبارت در هر صفحه سایت با H1 آغاز می شود.

تگ های H جزو دسته تگ های کانتینر یا بسته محسوب می شوند. روش استفاده از تگ های H در تصویر زیر مشخص شده است.

برای اینکه مفهوم فونت سایز در تگ های H را متوجه شویم بعد از وارد کردن تگ های H در VS CODE طبق تصویر بالا یک Open live Server از آنها میگیریم. چیزی که در مرورگر قابل رویت است تصویر زیر است. ما از عبارت this is test بعنوان مثال در تگها استفاده کرده ایم. شما باید عناوین اصلی صفحات خود را وارد کنید. مثلا در سایت رد پالت تگ h1 آژانس دیجیتال مارکتینگ رد پالت است

آموزش تگ نویسی در html5

کاربرد تگ P

تگ P از اول کلمه Paragraph گرفت شده و به مفهوم همان پاراگراف است.تگ P هم، جزو دسته تگ های Container به حساب می آید. همانطور که از نام این تگ پیداست برای ایجاد نوشتار تحت پاراگراف بکار می رود.

 

ما برای اینکه تگ P را در ویژوال استودیو کد تست کنیم. ابتدا حرف P را تایپ کرده سپس از پیش نمایش وی اس کد تگ P را انتخاب میکنیم. سپس بین تو تگ باز و بسته P عبارتی را وارده می کنیم. ساده ترین گزینه استفاده از متون آماده لورم Lorem یا نوشتار احمقانه است. بین دو تگ کلید LO را بزنید وی اس کد به شما Hint داده و بعد از انتخاب متنی برای شما بدون مفهوم بارگزاری می شود که اگر لایو بگیرید، شبیه تصویر زیر است.

لورم ایپسوم چیست؟

تگ Span چیست؟

تگ Span یک تگ کانتینر یا بسته است که برای تک کلمه ها بکار می رود. برای درک بهتر این موضوع به مثال زیر توجه کنید. فرض کنید متنی دارید که بعضی از کلمات آن باید به رنگی دیگر نمایان شوند، چه راه حلی برای آن پیشنهاد میکنید؟ 

بهترین راه حل استفاده از تگ span در بین تگ استفاده شده و دادن استایل به آن است. که مبحث style در جلسات بعدی توضیح داده می شود.

کاربرد تگ span در طراحی سایت

برای درک بهتر مفهوم تگ span، ما قصد داریم عبارت consectetur در تگ p مثال قبلی را به رنگ قرمز تبدیل کنیم. ابتدا قبل یا بعد عبارت فوق یک تگ span ایجاد و عبارت consectetur را طبق تصویر فوق بین این تگ قرار می دهیم. سپس در بخش head سایت و بعد از تگ عنوان یک تگ style ایجاد کرده و استایل مورد نظر را لحاظ می کنیم. نتیجه را در live server زیر ببینید.

تگ span چیست؟
تگ img در Html5

تگ img یکی از تگ های پرکاربرد و تاثیرگذار در ظاهر سایت است. برخلاف تگ هایی که تا اینجا توضیح دادیم تگ آی ام جی جزو تگهای غیر کانتینر یا باز است. بله درست حدس زدید، تگ img تگی است که برنامه نویسان از طریق آن تصاویر را به سایت اضافه می کنند. در زیر نحوه استفاده از این تگ را به شما عزیزان توضیح می دهیم.

در محیط visual Studio code به خط جدید رفته و عبارت img را  تایپ کنید تا برنامه به شما hint دهد. با انتخاب تگ img عبارت زیر در محیط vs code ظاهر می شود:

<img src=” “>
در این مرحله باید آدرس تصویر مورد نظر را بین دبل کتیشن وارد کنید. نکته مهم برای اینکه از برنامه یک قدم به عقب رفته  و آدرس تصویر را وارد کنید باید دستور نقط اسلش را درج کرده سپس آدرس دهی کنید.
<img src=”./”>
اگر لایو سرور بگیرید تصویر را خواهید دید. انتضار نداشته باشید که تصویر در نقطه، مکان و اندازه دلخواه باشد زیرا اینها مربوط به تگ استایل میشود که در جلسات بعدی راجع به آنها صحبت خواهیم کرد.
نحوه استفاده از تگ img در html5
تگ Footer در Html5

همانطور که از اسم این تگ پیداست تگ پایینی سایت محسوب می شود. معمولا به بخش انتهایی و پایین هر وبسایت یا طرحی فوتر گفته می شود. البتهه این قانون نیست و شما می توانید محل تگ footer را تغییر دهید ولی از لحاظ سئو خوشایندترین حالت ممکن تگ footer در پایین و بخش انتهایی آن است. پس توصیه می شود این تگ را در بخش انتهایی سایت قرار دهید و مناسب با دیزاین و ui سایت به آن استایل دهی کنید. لازم بذکر است که تگ فوتر جزو تگ های container و یا بسته محسوب می گردد.

تگ Adress در Html5

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

اشتراک گذاری در:

3 Comments

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

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

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