آنچه در ویدیو می‌بینید:

در ویدیو های قبلی در رابطه با ساختار HTML و تگ های مختلف صحبت کردیم  و در این ویدیو میریم که یک تمرین عملی داشته باشیم، و ببینیم چطور می‌شه یه صفحه منظم طراحی کرد. که در ادامه به صورت متنی برای شما عزیزان گفتیم که چه اقداماتی باید انجام دهید.

در صورتی که اطلاعاتی از دنیای جذاب HTML ندارید بهتر است به ترتیب دو ویدیو زیر را اول ببینید و بعد برگردید به صورت عملی تجربه کنید:

  1. راهنمای کامل تگ‌های معنایی “HTML5”
  2. راهنمای عملی بهینه‌ سازی HTML برای بهبود سئو سایت

اگر هم شرایط دیدن ویدیو رو ندارید، می‌تونید از محتوای متنی اون استفاده کنید 

آموزش مقدماتی HTML همراه با مثال‌های عملی

تا اینجا با هم تگ‌های متفاوت HTML رو مشاهده کردیم. برای اینکه بهتر درک کنین این تگ‌ها به چه شکل هستن و چطور باید استفاده بشن، جدای از اینکه باید داکیومنتیشن موزیلا رو که براتون باز کردم بخونین، پیشنهادم اینه که یک فایل HTML باز کنید و این تگ‌هایی که یاد گرفتین رو خودتون استفاده کنید. یک HTML حتی اگر خیلی ساده باشه و حتی اگر CSS بهش ندین، می‌تونه خیلی کمک‌کننده باشه. البته اکثر این تگ‌ها در نهایت به صورت بصری تغییری در صفحه ایجاد نمی‌کنن (مگر مثل تگ <details> یا <div> که با هم صحبت کردیم).

ساختار پایه‌ی یک فایل HTML

اینجا به عنوان مثال من یک فایل HTML دارم به اسم index.html. هدفمون اینه که با هم یک صفحه‌ی وب ساده دیزاین کنیم. اول باید مشخص کنیم که داریم با یک داکیومنت HTML کار می‌کنیم. کاری که می‌کنیم اینه که داک‌تایپ <!DOCTYPE HTML> رو مشخص کنیم. حواستون باشه که باید به صورت uppercase نوشته بشه. در ویرایشگرهایی مثل VS Code وقتی تایپ کنید doc، خودش یک پیشنهاد می‌ده و با انتخاب اون، ساختار پایه‌ای HTML برای شما تولید می‌شه: یک تگ <html> باز و بسته، همراه با <head> و <body>.

محتوای تگ <head>

در تگ head، معمولاً مواردی مثل charset، viewport و تگ‌هایی برای سازگاری با مرورگرها قرار می‌گیره. بعدش تگ <title> میاد، که مثلاً می‌تونیم اسم صفحه رو بذاریم “Sample Page”.  همچنین تگ <meta name=”description” content=”…” /> برای توصیف صفحه استفاده می‌شه. محتوای این meta می‌تونه داینامیک باشه، مثلاً با قرار دادن براکت فرفری برای سیستم‌های تمپلیت‌نویسی. در ادامه تگ <link rel=”canonical” href=”…” /> هم داریم، که برای سئوی بهتر مفیده.

شروع تگ <body> و اضافه کردن محتوا

حالا که head آماده‌ست، می‌ریم سراغ body. داخل body، معمولاً تگ‌های <header>، <footer>، و <main> قرار می‌گیرن.  من این فایل رو ذخیره می‌کنم. حالا صفحه‌ی ما شامل title و description هست. برای اینکه یک استایل ساده هم داشته باشیم، می‌تونیم از فریم‌ورک سبک PicoCSS استفاده کنیم.

استفاده از PicoCSS برای طراحی ساده

برای این کار به آدرس picocss.com/docs می‌ریم و از بخش CDN، لینک استایل رو داخل تگ head و بعد از canonical قرار می‌دیم. برای اینکه ظاهر بهتری داشته باشیم، یک کلاس به تگ body می‌دیم به اسم container.

طراحی ناوبری (Navigation)

داخل header، معمولاً یک تگ <nav> قرار می‌گیره. داخل این تگ، یک لوگو به صورت برند داریم (که معمولاً لینک به home هست) و یک لیست از لینک‌ها (مثلاً pricing، about us، privacy policy). اگر سایت‌مون بزرگ‌تر باشه، مگامنو هم داریم.  می‌تونیم از بخش کامپوننت‌های PicoCSS یک نمونه‌ی آماده‌ی ناوبری کپی کنیم و داخل header بذاریم.

سئوی بهتر با استفاده از alt و title

توی همین مثال، اگر لوگو به صورت عکس باشه، تگ <img> استفاده می‌کنیم و حتماً باید alt داشته باشه. مثلاً: alt=”فروشگاه اینترنتی دیجیکالا”. استفاده از این ویژگی‌ها در سئو موضوع مهمی هستش.

ساختار <footer> و اطلاعات تکمیلی

در ادامه، تگ <footer> داریم که شامل یک لیست دیگر از لینک‌ها هست. مثلاً لینک A، لینک B و لینک C. بین header و footer، تگ <main> قرار داره. این قسمت می‌تونه شامل بخش‌های اصلی سایت باشه.

استفاده از <article>

داخل footer، ممکنه بخوایم اطلاعاتی درباره‌ی شرکت یا فروشگاه بذاریم. برای این کار از تگ <article> استفاده می‌کنیم. داخلش یک heading قرار می‌دیم (مثلاً <h2>فروشگاه اینترنتی دیجیکالا</h2>) و چند پاراگراف توضیح با تگ <p>.

نمایش محتوای مخفی با <details> و <summary>

برای نمایش محتوای مخفی‌شونده، از تگ <details> استفاده می‌کنیم. داخلش یک تگ <summary> هست که مثل عنوان عمل می‌کنه. این ویژگی برای اطلاعات تکمیلی یا سوالات متداول خیلی کاربردیه.

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