صفحه وب Bare Bones: 10 مرحله

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

امروز ما قصد داریم یک صفحه وب بسیار ساده و بدون استخوان را از ابتدا ایجاد کنیم. ما در مورد عناصر HTML ، حالت دادن به صفحه وب شما (رنگ ، فونت ، تراز ، و غیره) ، و در نهایت نحوه وارد کردن یک تصویر در صفحه وب خود صحبت خواهیم کرد!

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

مرحله 1: استفاده از دفترچه یادداشت

ما قصد داریم از Notepad در Windows برای ایجاد اولین صفحه وب خود استفاده کنیم. اگرچه هر ویرایشگر متن این کار را انجام می دهد ، دفترچه یادداشت از قبل روی دستگاه های ویندوز نصب می شود ، بنابراین نقطه شروع خوبی است.

برای باز کردن دفترچه یادداشت ، به نوار جستجوی خود در گوشه سمت چپ پایین صفحه بروید و "Notepad" را تایپ کنید. سپس برنامه "دفترچه یادداشت" را که در نتایج جستجو ظاهر می شود انتخاب کنید. یک پنجره جدید باید باز شود.

مرحله 2: اضافه کردن درخت سند اصلی HTML

همه صفحات وب باید از یک ساختار اسکلتی استاندارد پیروی کنند تا مرورگر وب شما (Chrome ، Firefox ، Edge ، Internet Explorer ، Safari …) صفحات وب شما را پردازش و نمایش دهد.

به این می گویند درخت سند html. در دفترچه یادداشت ، "عناصر" یا "برچسب" های html را همانطور که در صفحه نمایش نشان داده شده وارد کنید. با خیال راحت کپی و جایگذاری کنید:

مرحله 3: ذخیره به عنوان.html صفحه

اکنون که ساختار HTML اصلی خود را در Notepad داریم ، اجازه دهید آن را ذخیره کنیم تا هیچ کاری را از دست ندهیم و با پیشرفت در مسیر Instructable تغییرات خود را مشاهده کنیم.

1. "فایل"> "ذخیره به عنوان …" را انتخاب کنید (تصویر صفحه 1)
2. تغییر نوع فایل به "همه فایلها" (تصویر 2)
3. نام فایل دلخواه خود را به فایل خود بدهید. توجه داشته باشید که کجا سند را در رایانه خود ذخیره می کنید تا بعداً بتوانید آن را باز کنید. توجه: مهمترین قسمت ذخیره این فایل ، افزودن ".html" به انتهای نام فایل است. این به رایانه شما اجازه می دهد آن را به عنوان یک صفحه وب تشخیص دهد. بنابراین اگر می خواهید نام فایل خود را "my_webpage" بگذارید ، مطمئن شوید.html را به انتهای آن اضافه کنید ، به عنوان مثال. "my_webpage.html"

مرحله 4: افزودن عنوان به صفحه وب خود

بنابراین ما ساختار اولیه html مورد نیاز مرورگرهای وب را برای تفسیر و نمایش صفحه وب خود داریم ، اما هیچ محتوایی نداریم. اجازه دهید آن را تغییر دهیم!

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

وب سایت تیلور

در این مرحله متوجه خواهید شد که هر برچسب دارای یک برچسب "بازکننده" و یک تگ "بسته کننده" است. مانند

و

این برای تشخیص این است که عنوان از کجا شروع می شود و کجا پایان می یابد. تقریباً همه برچسب های html این را دنبال می کنند ، با این وجود استثنائاتی وجود دارد.

مرحله 5: افزودن محتوا به صفحه وب خود

خوب ، ما یک عنوان برای صفحه وب خود داریم ، اما هنوز هیچ محتوای واقعی برای آن نداریم. اجازه دهید کمی استعداد را اضافه کنیم!

ما با استفاده از عنصر "عنوان" عنوانی را به صفحه وب خود اضافه کرده ایم. بیایید با استفاده از عنصر 'h1' که عنصری سرفصل است ، یک سرصفحه بزرگ و قابل توجه به صفحه وب خود بدهیم.

وب سایت تیلور

به صفحه وب من خوش آمدید

مرحله 6: مشاهده تغییرات ما تا کنون

ما یک عنوان داریم ، مقداری محتوا داریم ، بیایید صفحه وب خود را بررسی کنیم که چگونه تا کنون آمده است.

1. فایل خود را در دفترچه یادداشت ذخیره کنید
2. به جایی که فایل خود را ذخیره کرده اید بروید و روی آن دوبار کلیک کنید. باید به طور خودکار در مرورگر وب پیش فرض شما باز شود. خوب به نظر می رسد!

مرحله 7: افزودن برچسب پاراگراف

ما یک عنوان داریم ، یک عنوان ، اکنون بیایید یک پاراگراف با متن بیشتری اضافه کنیم. نام عنصر پاراگراف p است. در زیر می توانید استفاده از آن را مشاهده کنید:

وب سایت تیلور

به صفحه وب من خوش آمدید

امروز ما نحوه ایجاد این صفحه وب بسیار ساده را یاد می گیریم!

توجه: شما می توانید تغییرات خود را هر زمان که دوست دارید با ذخیره دفترچه یادداشت و باز کردن فایل مشاهده کنید.

مرحله 8: به آن رنگ بدهید

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

ما می توانیم عناصر مختلف را با افزودن ویژگی "style" به تگ "p" به شرح زیر رنگ آمیزی کنیم:

وب سایت تیلور

به صفحه وب من خوش آمدید

امروز ما نحوه ایجاد این صفحه وب بسیار ساده را یاد می گیریم!

مرحله 9: افزودن تصویر

وب سایت بدون عکس چیست؟ بیایید یک عکس به وب سایت خود اضافه کنیم!

اولین قدم این است که تصویری را که دوست دارید پیدا کنید. من از تصاویر گوگل برای جستجوی ردیور طلایی استفاده کردم. تصویر را به بالا بکشید و مطمئن شوید که آدرس url به-j.webp

هنگامی که تصویر خود را انتخاب کردید ، باید آن را با استفاده از تگ 'img' به صفحه html اضافه کنیم. تصویر من این است:

آن را با استفاده از برچسب 'img' با ویژگی 'src' به صفحه خود اضافه کنید:

وب سایت تیلور

به صفحه وب من خوش آمدید

امروز ما نحوه ایجاد این صفحه وب بسیار ساده را یاد می گیریم!

مرحله 10: مشاهده محصول نهایی

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