عرفان عطارزاده
عرفان عطارزاده
خواندن ۳ دقیقه·۵ سال پیش

آشنایی با اچ‌تی‌ام‌ال (HTML) به زبان خیلی خیلی ساده

پیش از خواندن

دوست ندارم مطلبم را کلیشه‌ای آغاز کنم برای همین اینجا توضیح نمی‌دهم که HTML مخفف چیست یا چه معنایی دارد؛ اما برای آن دسته از عزیزان که هیچ اطلاعی درباره HTML ندارند باید عرض کنم که این مفهوم در مباحث برنامه‌نویسی ظاهر وب‌سایت‌ها کاربرد دارد و در صورتی که مایل به آشنایی با آن هستید، تا پایان متن همراه من باشید.

* توجه: این نوشته شامل آموزش مبانی HTML نمی‌باشد.

آشنایی با زبان نشانه‌گذاری فرامَتنی (!)

از این که عنوان ترجمه‌شده بالا خیلی نامفهوم است عذرخواهی می‌کنم و دعوت می‌کنم تا با زبان خیلی خیلی ساده با HTML آشنا بشویم. فرض کنید می‌خواهیم یک نامه یا نوشته‌ای را تایپ کنیم. به متن زیر توجه کنید:

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

همین متن را با نوشته زیر مقایسه کنید:

سلام دوست عزیزم!
خوبی؟ امیدوارم هر جا که هستی، شاد و سلامت باشی و کنار سایر دوستان‌مان، ایام خوشی را سپری کنی. حتماً در اولین فرصت، به ما سری بزن. خیلی دلتنگیم!
با آرزوی بهترین‌ها...
عرفان

خواندن دومی بسیار آسان‌تر است. زیرا با کمک گرفتن از علائم نوشتاری، به خواننده اطلاع می‌دهد که کجا مکس کند و چشمش به چه شکلی از روی کلمات عبور کند. فرض کنید صفحات وب، که مملو از اطلاعات، نوشته‌ها و تصاویر هستند، مشابه این نامه کوتاه، از طرف سِرور، برای مرورگر (Browser) ارسال شده باشند. مرورگر - که از قضا هوش انسانی هم ندارد - از کجا باید بفهمد که با این متن طول و دراز چگونه برخورد کند و آن را به نمایش بگذارد؟ عنوان‌‌ها کدام هستند؟ پاراگراف‌ها کی عوض می‌شوند و تصاویر در کجا قرار دارند؟

زبان نشانه‌گذاری فرامَتنی (HyperText Markup Language) یا همان HTML وظیفه تگ‌گذاری روی نوشته را دارد تا اولاً به مرورگر و در مرحله دوم به کاربر اینترنت که از مرورگر استفاده می‌کند بفهماند که اطلاعات دریافت شده از سمت سِرور، به چه شکلی پردازش شده و نمایش داده شوند. همین.

هر فایل HTML به صورت یک فایل با فرمت html (یا فرمت‌های دیگر نظیر xhtml، htm و...) است که به صورت اولیه زیر، نشانه‌گذاری می‌شود:

index.html

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

در واقع ما داریم به مرورگر می‌فهمانیم که اطلاعاتی که دریافت کرده ساختار HTML دارد و همه محتوا درون دو تگ باز و بسته شده <html> قرار گرفته است. در زبان HTML دو تگ اصلی <head> و <body> را داریم. که درون <head>، اطلاعات زیر قرار می‌گیرد:

  1. عنوان صفحه که در بالای مرورگر (در هر Tab) قرار می‌گیرد.
  2. اطلاعات معرفی محتوای صفحه به موتورهای جستجو (نظیر گوگل)
  3. اضافه کردن فایل‌ها و کتابخانه‌های ظاهر و رنگ و لعاب سایت (CSS)
  4. و...

آنچه در تگ <head> نوشته می‌شود مستقیماً درون صفحه نهایی که توسط کاربر بارگیری (Load) می‌شود، دیده نخواهد شد. در عوض ما تگ <body> را داریم که آنچه توسط کاربر قابل رویت‌ مستقیم خواهد بود درون این تگ قرار خواهد گرفت.

تگ <body> می‌تواند شامل موارد زیر باشد:

  1. هِدر و سرتیترها
  2. فهرست منو
  3. سایر محتواها
  4. فوتر و...
  5. کدهای فراخوانی کتابخانه‌های جاوااسکریپت (JavaScript) و یا کدهای آن درون تگ


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

وبhtmlcssبرنامه نویسیسایت
برنامه‌نویس و طراح وب؛ یه نقطه توی دنیا که دوست داره تأثیرگذار باشه.
شاید از این پست‌ها خوشتان بیاید