HTML برای همه- بخش اول- اصول ساخت یک صفحه ساده وب
بعد از آشنایی با تاریخچه اینترنت و شناخت اچ تی ام ال، بهتر است کمی کاربردی تر و عملی با این زبان کدنویسی آشنا شویم. اگر تا به حال با HTML کار نکرده باشید، احتمالا دیدار اول تان با کدهای یک صفحه تا حدی گیج کننده و نامأنوس باشد. انگار که دارید به متنی با یک زبان بیگانه نگاه می کند. اما جالب است بدانید که تنها با شناخت تعداد معدودی از دستورات (تگ ها) اچ تی ام ال، می توانید به راحتی زبان یک صفحه اچ تی ام ال را دانسته و منظورتان را هم به آن بفهمانید.
درست است که در این دوره قصدمان یادگیری کامل و خبره شدن در کدنویسی HTML نیست، اما برای کار با بسیاری از برنامه های مدیریت محتوا و انتشار مطالب در سایت ها و وبلاگ ها، باید برخی اصول اولیه این زبان را بلد باشیم. زیرا علی رغم اینکه ادیتورهای WYSIWYG برنامه های مدیریت محتوا، کار را تا حد زیادی آسان کرده اند، باز هم همه این برنامه ها با کدها و دستورات اچ تی ام ال سروکار دارند. اگر با این زبان آشنا باشیم، بسیاری از مشکلات و دردسرهای وقت گیر در انتشار صحیح و مرتب مطلب، به راحتی قابل حل هستند. پس بگذارید کمی اچ تی ام ال یاد بگیریم.
اول بگذارید نگاهی کلی به کدهای یک صفحه وب داشته باشیم. عکس بالا، چیزی است که مرورگر به ما نشان می دهد. اما در حقیقت، این چیزی نیست که نوشته شده است. کدهای این صفحه را در عکس پایین می توانید ببینید.
همانگونه که می بینید تمام تگ های اچ تی ام ال لازم است که میان دو علامت کوچک تر و بزرگتر نوشته شوند. مرورگر وقتی به علامت < در کدهای صفحه می رسد، متوجه می شود که از این به بعد با یک تگ یا دستور اچ تی ام ال طرف است. تا جایی که به علامت > برسد، آن را یک دستور در نظر گرفته و به ترجمه و تفسیر آن می پردازد. هر آنچه هم که در میان این دستورات قرار گرفته باشد، محتوایی است که باید نمایش داده شود.
اما عکس ها که در بیرون این دو علامت نیستند، از کجا می آیند؟ در یک صفحه اچ تی ام ال باید به مرورگر بگوییم که عکس را از کجا بخواند و در صفحه قرار دهد. برای این کار از تگ img استفاده می کنیم. هرگاه مرورگر به این تگ برسد، آدرس درون آن را از سرور درخواست می کند و پس از دریافت عکس آن را به نمایش می گذارد.
برای اینکه داستان را به صورت منسجم در ذهن داشته باشیم، بگذارید به صورت مرحله به مرحله نحوه تعامل مرورگر با صفحه وب و سرور را دنبال کنیم و به خاطر بسپاریم:
۱- شما با تایپ مستقیم آدرس یک سایت (مانند http://www.darsnameh.com) در آدرس بار مرورگر، درخواست نمایش آن را می دهید. همین آدرس اینترنتی یا URL برای آدرس دهی محتوای خاصی بر روی یک سرور مشخص در اینترنت کافی است و شما را به هدف می رساند.
۲- مرورگر شما یک درخواست تحت پروتکل HTTP و حاوی آدرس سایت برای سرور ارسال می کند و دریافت یک فایل خاص را تقاضا می کند.
۳- سرور به بررسی درخواست پرداخته، به دنبال فایل مورد نظر گشته و به دو صورت به آن پاسخ می دهد:
- اگر صفحه و فایل مورد نظر پیدا نشود، سرور در جواب، پیغام خطایی را به مرورگر برگردانده و پیغامی را که عموما به صورت (404 Not Found) است را به شما نشان می دهد. البته ممکن است طراح سایت پیام کاربردی و گویاتری را برای نمایش به جای این صفحه آماده کرده باشد.
- در صورتی که سرور فایل مورد نظر را بیابد، آن را طبق درخواست آماده کرده و برای مرورگر می فرستد.
۴- مرورگر به تجزیه و تحلیل کدهای دریافتی از سرور می پردازد. اگر صفحه حاوی عکس باشد (همان کد img) مرورگر دوباره با سرور تماس گرفته و فایل عکس را هم درخواست می کند. سرور هم به همان شکل مرحله قبل به مرورگر پاسخ می دهد. با این تفاوت که در اینجا در صورت پیدا نشدن فایل عکس، دیگر خبری از صفحه ۴۰۴ نیست و تنها عکس به نمایش در نمی آید.
۵- در نهایت مرورگر عکس ها و متون را در جاهای مشخص شده از صفحه قرار داده و… هورا صفحه وبِ سر هم شده ما آماده نمایش است.
تولد یک صفحه اچ تی ام ال
خب، حالا بیایید ببینیم که از کجا باید کار نوشتن یک صفحه اچ تی ام ال را شروع کنیم. اول از همه به یک محیط برای کدنویسی نیاز داریم. می توانید از Notepad ویندوز استفاده کنید و یا از اینجا Notepad++ را دانلود کنید. بگذارید تا قبل از نصب برنامه جدید، با همان Notepad خودمان کارها را جلو ببریم:
۱- منوی استارت را باز کرده و در قسمت Accessories برنامه Notepad را پیدا کنید.
۲- با کلیک روی عبارت Notepad، برنامه باز شده و یک پنجره جدید ویرایش متنی را در اختیارتان می گذارد که می توانید کار تایپ را شروع کنید.
حالا که یک فایل برای نوشتن صفحه اچ تی ام ال باز کرده ایم، آماده نوشتن کدها و محتوا هستیم. یک صفحه وب اول از همه حاوی محتوا است. پس اول از همه متن مورد نظر صفحه را می نویسیم. متن زیر را در پنجره Notepad بنویسید. فاصله بین خطوط را هم رعایت کنید:
«درسنامه
درسنامه امکان آموزش از طریق ایمیل را به صورت رایگان برای علاقمندان به یادگیری فراهم می کند. کافی است دوره آموزشی مورد نظرتان را انتخاب کنید و یک ایمیل خالی به آدرس همان دوره ارسال کنید تا ثبت نام شما انجام شود.
حال از منوی File برنامه نوت پد گزینه Save یا Save As را انتخاب کنید. در اولین قدم بهتر است یک پوشه جدید برای پروژه صفحه اچ تی ام ال تان ایجاد کنید. برای این کار بر روی آیکون Folder در بالای پنجره Save کلیک کنید تا یک پوشه یا فولدر جدید ساخته شود. حال بر روی New Folder کلیک کرده و نام آن را مثلاdarsnameh بگذارید. حال درون این پوشه، فایل متنی تان را با نام index.html ذخیره کنید. در ویندوز لازم است برای این کار، در همان پنجره Save در برابر عبارتSave As Type در پایین پنجره گزینه All Files را انتخاب کرده و آنگاه فایل را با نام گفته شده ذخیره کنیم.
اکنون اولین قدم فایل اچ تی ام ال ما آماده است. برای دیدن آن درون مرورگر از طریق منوی File و گزینه Open یا Open File به دنبال index.html درون پوشهdarsnameh بگردید و آن را باز کنید.
چیزی شبیه صفحه بالا به شما نشان داده خواهد شد که احتمالا حتی متن های آن درست خوانده نمی شوند. خب، همه چیز به هم ریخته و درهم و بر هم نمایش داده می شود! اما راه حل چیست؟
ادامه داستان و راه حل این مشکل در درس آینده...
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.