1. این پایگاه به ثبت ستاد ساماندهی وزارت فرهنگ و ارشاد اسلامی ایران رسیده است.

    مهمان عزیز سپاس بابت بازدید شما از تالار گفتگوی دهه هفتادی ها.

    عضویت در انجمن رایگان بوده و برای عموم باز میباشد . با صرف 30 ثانیه یکی از اعضای دهه هفتادی ها شوید .

دوره آموزشی آشنایی با اچ‌تی‌ام‌ال و فناوری‌های اینترنت برای روزنامه‌نگاران و وبلاگ‌نویس‌ها(قسمت4)

شروع موضوع توسط saeid-ha ‏Jun 10, 2013 در انجمن اینترنت و شبکه

  1. saeid-ha

    saeid-ha belong to autumn !...

    3,098
    11,982
    1,894
    HTMLبرای همه- بخش اول- اصول ساخت یک صفحه ساده وب


    بعد از آشنایی با تاریخچه اینترنت و شناخت اچ تی ام ال، بهتر است کمی کاربردی تر و عملی با این زبان کدنویسی آشنا شویم. اگر تا به حال با HTML کار نکرده باشید، احتمالا دیدار اول تان با کدهای یک صفحه تا حدی گیج کننده و نامأنوس باشد. انگار که دارید به متنی با یک زبان بیگانه نگاه می کند. اما جالب است بدانید که تنها با شناخت تعداد معدودی از دستورات (تگ ها) اچ تی ام ال، می توانید به راحتی زبان یک صفحه اچ تی ام ال را دانسته و منظورتان را هم به آن بفهمانید.
    درست است که در این دوره قصدمان یادگیری کامل و خبره شدن در کدنویسی HTML نیست، اما برای کار با بسیاری از برنامه های مدیریت محتوا و انتشار مطالب در سایت ها و وبلاگ ها، باید برخی اصول اولیه این زبان را بلد باشیم. زیرا علی رغم اینکه ادیتورهای WYSIWYG برنامه های مدیریت محتوا، کار را تا حد زیادی آسان کرده اند، باز هم همه این برنامه ها با کدها و دستورات اچ تی ام ال سروکار دارند. اگر با این زبان آشنا باشیم، بسیاری از مشکلات و دردسرهای وقت گیر در انتشار صحیح و مرتب مطلب، به راحتی قابل حل هستند. پس بگذارید کمی اچ تی ام ال یاد بگیریم.
    [​IMG]
    اول بگذارید نگاهی کلی به کدهای یک صفحه وب داشته باشیم. عکس بالا، چیزی است که مرورگر به ما نشان می دهد. اما در حقیقت، این چیزی نیست که نوشته شده است. کدهای این صفحه را در عکس پایین می توانید ببینید.
    [​IMG]
    همانگونه که می بینید تمام تگ های اچ تی ام ال لازم است که میان دو علامت کوچک تر و بزرگتر نوشته شوند. مرورگر وقتی به علامت < در کدهای صفحه می رسد، متوجه می شود که از این به بعد با یک تگ یا دستور اچ تی ام ال طرف است. تا جایی که به علامت > برسد، آن را یک دستور در نظر گرفته و به ترجمه و تفسیر آن می پردازد. هر آنچه هم که در میان این دستورات قرار گرفته باشد، محتوایی است که باید نمایش داده شود.
    اما عکس ها که در بیرون این دو علامت نیستند، از کجا می آیند؟ در یک صفحه اچ تی ام ال باید به مرورگر بگوییم که عکس را از کجا بخواند و در صفحه قرار دهد. برای این کار از تگ img استفاده می کنیم. هرگاه مرورگر به این تگ برسد، آدرس درون آن را از سرور درخواست می کند و پس از دریافت عکس آن را به نمایش می گذارد.

    [​IMG]
    برای اینکه داستان را به صورت منسجم در ذهن داشته باشیم، بگذارید به صورت مرحله به مرحله نحوه تعامل مرورگر با صفحه وب و سرور را دنبال کنیم و به خاطر بسپاریم:
    ۱- شما با تایپ مستقیم آدرس یک سایت (مانند

    برای مشاهده لینک ها لطفا ثبت نام کنید و یا اگر حساب کاربری دارید وارد شوید

    ) در آدرس بار مرورگر، درخواست نمایش آن را می دهید. همین آدرس اینترنتی یا URL برای آدرس دهی محتوای خاصی بر روی یک سرور مشخص در اینترنت کافی است و شما را به هدف می رساند.
    ۲- مرورگر شما یک درخواست تحت پروتکل HTTP و حاوی آدرس سایت برای سرور ارسال می کند و دریافت یک فایل خاص را تقاضا می کند.
    ۳- سرور به بررسی درخواست پرداخته، به دنبال فایل مورد نظر گشته و به دو صورت به آن پاسخ می دهد:
    • اگر صفحه و فایل مورد نظر پیدا نشود، سرور در جواب، پیغام خطایی را به مرورگر برگردانده و پیغامی را که عموما به صورت (404 Not Found) است را به شما نشان می دهد. البته ممکن است طراح سایت پیام کاربردی و گویاتری را برای نمایش به جای این صفحه آماده کرده باشد.
    • در صورتی که سرور فایل مورد نظر را بیابد، آن را طبق درخواست آماده کرده و برای مرورگر می فرستد.
    ۴- مرورگر به تجزیه و تحلیل کدهای دریافتی از سرور می پردازد. اگر صفحه حاوی عکس باشد (همان کد img) مرورگر دوباره با سرور تماس گرفته و فایل عکس را هم درخواست می کند. سرور هم به همان شکل مرحله قبل به مرورگر پاسخ می دهد. با این تفاوت که در اینجا در صورت پیدا نشدن فایل عکس، دیگر خبری از صفحه ۴۰۴ نیست و تنها عکس به نمایش در نمی آید.
    ۵- در نهایت مرورگر عکس ها و متون را در جاهای مشخص شده از صفحه قرار داده و… هورا صفحه وبِ سر هم شده ما آماده نمایش است.
    تولد یک صفحه اچ تی ام ال
    خب، حالا بیایید ببینیم که از کجا باید کار نوشتن یک صفحه اچ تی ام ال را شروع کنیم. اول از همه به یک محیط برای کدنویسی نیاز داریم. می توانید از Notepad ویندوز استفاده کنید و یا از اینجا Notepad++ را دانلود کنید. بگذارید تا قبل از نصب برنامه جدید، با همان Notepad خودمان کارها را جلو ببریم:
    [​IMG]
    ۱- منوی استارت را باز کرده و در قسمت Accessories برنامه Notepad را پیدا کنید.
    ۲- با کلیک روی عبارت Notepad، برنامه باز شده و یک پنجره جدید ویرایش متنی را در اختیارتان می گذارد که می توانید کار تایپ را شروع کنید.
    [​IMG]
    حالا که یک فایل برای نوشتن صفحه اچ تی ام ال باز کرده ایم، آماده نوشتن کدها و محتوا هستیم. یک صفحه وب اول از همه حاوی محتوا است. پس اول از همه متن مورد نظر صفحه را می نویسیم. متن زیر را در پنجره 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 بگردیدوآنرابازکنید.

    چیزیشبیهصفحهبالابهشمانشاندادهخواهدشد که احتمالا حتی متن های آن درست خوانده نمی شوند. خب،همهچیزبههمریختهودرهم و بر هم نمایش داده می شود! اماراه حل چیست؟
    ادامه داستان و راه حل این مشکل در درس آینده...