ساختن اولین صفحه وب با HTML

در این مقاله سعی داریم تا یک آشنایی اولیه با برنامه نویسی صفحات وب، HTML پیدا کنیم و یک صفحه وب ساده بسازیم

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

زبان HTML چیست و چگونه باید کار را شروع کرد؟

‌‌ زبان HTML یک زبان نشانه گذاری (markup language) است که برای ساختن صفحات وب ایجاد شده است. اساسا زبان‌های نشانه گذاری نازل‌ترین زبان‌های برنامه‌نویسی هستند و بسیار ساده و ابتدایی عمل می‌کنند. برای همین یادگیری آن‌ها عموما نیاز به ۵ دقیقه زمان برای فهم ساختار آن و یک دیکشنری برای ترجمه آن دارد! بگذارید یک مثال از خودم بزنم. من از دوران مدرسه با دروسی مثل تاریخ و جغرافی و اجتماعی و … مشکل داشتم. چون هیچ منطق خاصی نداشت، فقط نیاز به حفظ کردن داشت و من همیشه فکر می‌کردم هر موقع نیاز به این دانش‌ها داشتم فقط کافی بود به مرجع آن مراجعه می‌کردم. اما در عین حال ریاضی و هندسه و … را دوست داشتم چون حس می‌کردم دارم با یک منطق زیبا آشنا می‌شوم با کلی معمای هیجان انگیز که با حل آن‌ها حس پیشرفت داشتم! اگر مثل من فکر می‌کنید کلا این بخش از برنامه‌نویسی برای شما کمی سخت خواهد بود چون در واقع HTML از نظر من همان تاریخ و جغرافی دنیای وب است!

خیلی دور شدیم از بحث! گفتیم markup language ها خیلی ساده‌اند! یعنی فقط باید با یک نشانه بگوییم چه چیزی می‌خواهیم بگوییم. مثال زیر را ببینید:

<WellCome> !سلام خواننده گرامی سایت! خوش آمدی به سایت من </WellCome>

ما یک چیزی را به زبان نشانه‌گذاری نوشتیم! وقتی کلی از این چیز‌ها کنار هم قرار بگیرند می‌شوند یک برنامه به زبان نشانه گذاری. در کد بالا من گفتم یک قسمتی دارم به نام WellCome که محتوایی دارد شامل «سلام خواننده گرامی سایت! خوش‌آمدی به سایت من!». با علامت <> به سیستم می‌فهمانم که این یک تگ است. همچنین همانطور که یک تگ باز می‌شود باید بسته هم بشود. با <WellCome> در مثال فوق تگ آغاز و با </WellCome> این تگ بسته شد. تنها فرق بین باز و بسته شدن تگ صرفا اضافه شدن بک اسلش “/” به ابتدای تگ پایانی است. طبیعتا وقتی می‌خواهیم این نشانه‌گذاری‌ها برای مرورگر‌ها (browser) قابل ترجمه باشند به آن ظاهری که مد نظر ماست، باید از تگ‌های استاندارد و از پیش تعیین شده‌ استفاده کنیم. مثلا در تگ WellCome یک تگ استاندارد نیست و من از خودم خلق کردم.

اولین برنامه را بنویس:

چند تگ استاندارد را با هم مرور کنیم:

<!DOCTYPE html>
  <html>
     <head>
        <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
        <meta charset="UTF-8">
        <title>وبلاگ تک لاگ</title>
     </head>
     <body>
        <h1>آموزش برنامه نویسی وب</h1>
        <p>برنامه نویسی وب رو خیلی راحت فرا خواهید گرفت</p>
     </body>
  </html>

در ابتدای هر سند HTML یا همان فایل‌هایی با پسوند .html باید از تگ <!DOCTYPE html> استفاده کنم. در واقع با این تگ من دارم اعلام می‌کنم سند من از آخرین نسخه HTML که همان HTML5 هست استفاده می‌کند. برخی از تگ‌ها نیازی به بسته شدن ندارند. مثل همین تگ که فقط باز شد.
بعد از آن تگ <html> را باز کردیم و در انتها بستیم. کل تگ‌های ما باید در بین این تگ قرار بگیرد و به نوعی می‌توان گفت همه تگ‌ها بچه‌ها و نوادگان <html> تگ هستند. تگ <html> به دو قسمت head و body تقسیم می‌شود. پس با تگ های <body> و <head> این دو قسمت را ایجاد می‌کنیم. در تگ <head> عموما تنظیمات سند HTML وارد می‌شود. مانند عنوان صفحه، نوع کاراکتر‌ها، کلمات کلیدی و … اما در تگ <body> تمام آنچه می‌خواهیم در صفحه نمایش داده شود را وارد می‌کنیم. مثلا در اینجا ما در قسمت head گفتم نوع کاراکترها از جنس UTF-8 است. این نوع کاراکتر تمام کاراکترها را شامل می‌شود. چون ما از زبان فارسی استفاده می‌کنیم حتما باید این تنظیم رو انجام دهیم در غیر این صورت در مشاهده خروجی کار به مشکل می‌خوریم. این اتفاق با افزودن تگ

<meta content=”text/html;charset=utf-8″ http-equiv=”Content-Type”>

افتاد. این تگ هم مثل تگ <!DOCTYPE html> نیازی به بسته شدن ندارد. (پیشنهاد می‌کنم یک‌بار نوع کاراکتر‌ها را تعیین نکنید و خروجی کار را مشاهده کنید.)
گفتیم در قسمت body هر آنچه می‌خواهیم نمایش بدهیم را وارد می‌کنیم. من از تگ <h1> برای ایجاد یک تیتر استفاده کردم و داخل آن تیتر دلخواهم را قرار دادم. بعد از آن از تگ <p> برای ساخت یک پاراگراف استفاده کردم و متن دلخواهم را در آن قرار دادم.
خوب حالا می‌خواهیم یک فایل HTML ایجاد کنیم و از آن استفاده کنیم. کافی است یک فایل متنی (فایلی با پسوند .txt) ایجاد و تگ‌ها را داخل آن قرار دهیم.

در انتها فرمت فایل که .txt بود را به .html تغییر دهیم. من در اینجا اسم فایل را index.html ثبت کردم.

به همین راحتی شما اولین صفحه وب خودتون رو ایجاد کردید!

دیدیم که ساخت اولین صفحه وب به آسانی پشت سر گذاشته شد! حالا وقت آن رسیده که محتوایی را که با HTML در صفحه قرار دادیم بوسیله CSS زیباتر به نمایش بگذاریم. در مقاله بعدی قصد داریم در خصوص CSS اطلاعاتی کسب کنیم.