ایجاد اولین وب سایت خود: 10 مرحله

2024 نویسنده: John Day | [email protected]. آخرین اصلاح شده: 2024-01-30 08:53

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

مرحله 1: ایجاد پوشه

یک پوشه برای فایل هایی که ایجاد می کنیم ایجاد کنیم تا ذخیره شوند. با خیال راحت نام آن را هرطور که می خواهید بگذارید ، فقط به یاد داشته باشید که در کجا قرار دارد زیرا بعداً فایل ها را در آن ذخیره می کنیم.

مرحله 2: ایجاد اولین فایل خود

ویرایشگر متن مورد علاقه خود را باز کنید. در مورد من ، من به سادگی از دفترچه یادداشت ساخته شده ویندوز 10 استفاده می کنم. هنگامی که یک فایل جدید دارید ، موارد زیر را تایپ کنید:

این اولین صفحه وب من است که توسط یک دستورالعمل برای شما آورده شده است

این چیزی است که به عنوان تگ HTML شناخته می شود. مخفف عنوان 1 است. متنی که در این برچسب قرار می دهیم به عنوان یک عنوان در صفحه نشان داده می شود. اینطور باز و بسته می شود. متن بین دو برچسب چیزی است که در مرورگر وب شما نمایش داده می شود. قسمتی که می گوید به آن تگ ویژگی می دهد که در مرحله x به آن اشاره می کنیم. پس از انجام این کار ، فایل را در پوشه ای که در مرحله 1 ایجاد کرده ایم به عنوان index.html ذخیره کنید.

مرحله 3: فایل را باز کنید

اکنون که حرکت فایل را در پوشه ای که ایجاد کرده ایم به پایان رسانده ایم ، روی فایل راست کلیک کرده و گزینه "open with" را انتخاب کرده و مرورگر وب مورد استفاده خود را انتخاب کنید. در مورد من این گوگل کروم است. اکنون کارهای سخت کار خود را تا کنون مشاهده کنید!

مرحله 4: طراحی صفحه خود

همانطور که هست ، وب سایت ما بسیار ساده است. ما قصد داریم آنچه را که به عنوان یک ورق سبک آبشار شناخته می شود اضافه کنیم تا کمی چیزها را ادویه کنیم. یک فایل متنی جدید ایجاد کنید و موارد زیر را تایپ کنید:

h1 {رنگ: آبی ؛ text-align: center؛}

آنچه ما در اینجا به مرورگر می گوییم این است که هر عنصری را در یک تگ h1 (که در مرحله 2 با آن آشنا شدیم) بیابید و رنگ آبی به آن بدهید و آن را در مرکز صفحه تراز کنید. این فایل را در پوشه ای که در مرحله 1 ایجاد کردیم به عنوان style.css ذخیره کنید.

مرحله 5: Style.css را به Index.html خود پیوند دهید

در این مرحله ما دو پرونده جداگانه داریم که از یکدیگر اطلاع ندارند. ما باید به فایل index.html خود بگوییم که یک فایل style.css داریم که می خواهیم به آن ارجاع داده شود و از آن استایل بگیرید. برای انجام این کار ما فایل index.html خود را در ویرایشگر متن خود باز می کنیم و در بالای برچسب h1 خود چیزی را که به عنوان تگ پیوند معروف است اضافه می کنیم. برچسب پیوند همانطور که از نامش مشخص است ، به چیزی پیوند می دهد. در مورد ما یک شیوه نامه. برو جلو و تایپ کن برچسب پیوند یک تگ خود بسته است ، بنابراین یک تگ پایان مورد نیاز نیست. rel به معنی رابطه است و href به فایل فهرست در جایی که فایل خارجی ما به آن اشاره می کنیم می گوید. حالا آن فایل index.html را ذخیره کنید.

مرحله 6: صفحه جدید خود را مشاهده کنید

مرحله 3 را مجدداً مرور کرده و صفحه وب خود را دوباره بارگیری کرده و نحوه بازتاب تغییرات را بررسی کنید.

مرحله 7: ایجاد یک دکمه

فایل index.html خود را در ویرایشگر متن باز کرده و موارد زیر را تایپ کنید:

مرا کلیک کن!

و فایل را ذخیره کنید این یک عنصر دکمه در صفحه ایجاد می کند. پس از ذخیره ، فایل را همانطور که در مرحله 3 نشان داده شده دوباره باز کنید و مطمئن شوید که دکمه در سمت چپ پایین صفحه شما قرار دارد.

مرحله 8: فایل Javascript خود را ایجاد کنید

در نهایت ما قصد داریم فایل جاوا اسکریپت خود را ایجاد کنیم. این چیزی است که سایت ما را تعاملی می کند. یک ویرایشگر متن را باز کنید و موارد زیر را تایپ کنید:

document.querySelector ("#دکمه"). addEventListener ("کلیک" ، عملکرد () {

document.querySelector ("#heading"). innerText = "تغییر عنوان در حال پرواز"

})

آنچه ما انجام می دهیم این است که از سند بخواهیم عنصری با شناسه دکمه برای ما پیدا کند و ما باید دکمه را با تغییر یک متن عنصر با شناسه عنوان به "تغییر عنوان در حال پرواز" به رویداد کلیک پاسخ دهد. ". فایل را به عنوان button.js در پوشه ای که در مرحله 1 ایجاد کرده ایم ذخیره کنید.

مرحله 9: فایلهای جاوا اسکریپت و فهرست خود را پیوند دهید

همانطور که با فایل style.css رفتار کردیم ، باید فایل index.html خود را در مورد فایل جاوا اسکریپت خود بگوییم. در پایین هر کاری که تا کنون انجام داده ایم عبارت زیر را تایپ کنید:

برچسب اسکریپت به ما امکان می دهد یک زبان برنامه نویسی (در مورد ما ، جاوا اسکریپت) برای ارائه عملکرد به صفحه خود اضافه کنیم. ما به آن می گوییم که به دنبال فایلی بنام button.js بگردید و تمام کدهای موجود در آن را به فایل فهرست خود اضافه کنید. پس از تایپ ، فایل را ذخیره کرده و مجدداً همانطور که در مرحله 3 نشان داده شده است فایل را باز کنید.

مرحله 10: دکمه تازه ایجاد شده را آزمایش کنید

حالا بروید و روی دکمه کلیک کنید و تغییر عنوان را مشاهده کنید!

تبریک می گویم!! شما اکنون اولین صفحه وب تعاملی خود را ایجاد کرده اید! من تعجب می کنم که چقدر می توانید با دانستن آنچه اکنون می دانید ، آن را جلوتر ببرید ؟؟