احتمالن قبل از شروع این مقاله بدانید طراحی سایت چیست و متوجه اید که ایجاد یک وب سایت خوب یک چالش است. به همین دلیل است که ما این راهنما را ساختیم که به ایجاد یک وب سایت بدون تیم بزرگ، در مدت زمان معقول و با بودجه کم کمک می کند. ما تمام بینش‌های به‌دست‌آمده در طول ۲۰ سال کار در طراحی وب را تجزیه کردیم، این دانش را فشرده کردیم، و توضیح دادیم که چگونه آن را با استفاده از Tilda به کار ببریم - پلتفرمی که به ایجاد وب‌سایت‌های عالی کمک می‌کند. بخوانید، ایجاد کنید و آن را محقق خواهید کرد!
اگر تا به حال به این فکر کرده اید که چگونه از HTML برای ساخت وب سایت هایی با تصاویر و ویدیوها استفاده می شود، در مکان مناسبی قرار گرفته اید. من قصد دارم شما را از طریق 9 مرحله ساخت یک وب سایت یک صفحه ای با استفاده از HTML راهنمایی کنم. اگر بتوانید یک وب سایت یک صفحه ای بسازید، می توانید یک وب سایت چند صفحه ای بسازید.
شما فقط به دو چیز نیاز دارید: یک ویرایشگر متن و یک مرورگر. اگر می دانید چگونه از این دو استفاده کنید، بخش الزامات را رد کنید و به فرآیند 9 مرحله بروید.
برای نوشتن کد HTML به یک ویرایشگر متن نیاز دارید. هر رایانه دارای یک ویرایشگر متن است، بنابراین هنوز برای نصب چیزی عجله نکنید. می توانید از Notepad در ویندوز، Gedit در Ubuntu و TextEdit در MacOS X استفاده کنید.
در مورد ویرایشگرهای متن فانتزی که باید نصب کنید خواهید شنید. با این حال، برای اولین صفحه وب HTML خود، نیازی به نصب چیزی ندارید. از ویرایشگرهای متن موجود در رایانه خود استفاده کنید.
پس از ساختن اولین صفحه وب خود، می توانید برخی از ابزارهای دیگر را که هنگام ساخت صفحات وب استفاده می کنم که کار شما را راحت تر می کنند، بررسی کنید.
شما از فایرفاکس، کروم، کرومیوم، سافاری یا هر مرورگر وب دیگری که قبلاً در رایانه شما نصب شده است استفاده خواهید کرد.
همه صفحات وب همیشه حاوی نوعی اطلاعات در قالب های مختلف مانند متن، تصویر، ویدئو و غیره هستند.
اگر فقط می خواهید تمرین کنید، می توانید محتوایی را که قبلاً آماده کرده ام را اینجا کپی کنید.
اگر می خواهید یک صفحه وب منحصر به فرد ایجاد کنید، باید:
محتوای متنی را که در صفحه وب خود استفاده خواهید کرد بنویسید یا کپی کنید و آن را در یک سند ذخیره کنید. اگر برخی از مطالب را از منابع دیگر به صورت آنلاین کپی کرده اید، به یاد داشته باشید که URL منبع را کپی کنید. سپس، این را در یک سند ذخیره کنید.
اگر نمی توانید موضوعی برای صفحه وب پیدا کنید، موضوعی را با 100 ایده برای اولین صفحه وب خود انتخاب کنید.
چند تصویر مرتبط و مفید پیدا کنید. هنگامی که آنها را پیدا کردید، تصاویر را دانلود کنید یا آدرس اینترنتی تصویر را کپی کنید و آن را در سند ذخیره کنید.
وقتی متن و تصویر را در اختیار داشتید، وقت آن است که به مرحله بعدی بروید.
برای اولین صفحه وب خود، توصیه می کنم از یک صفحه وب طراحی ساده استفاده کنید. طراحی وب به شکل ظاهری وب سایت است. به یاد داشته باشید، شما فقط در حال تمرین نحوه ساخت صفحات وب هستید نه طراحی آنها.
این صفحه وب شیک نیست اما اولین پروژه خوبی است. من آن را یک ستون کردم تا همه چیز را برای مبتدیان دوستانه نگه دارم.
ویرایشگر متنی را که قبلاً در مورد آن صحبت کردم را به خاطر بسپارید، زمان باز کردن و استفاده از آن است. اگر قبلا از یکی استفاده کرده اید، به بخش بعدی بروید.
پس از باز کردن ویرایشگر متن مورد نظر خود، یک فایل جدید ایجاد کنید. سپس، می توانید به مرحله بعدی بروید.
اکنون می خواهیم کد صفحه دیگ بخار HTML را اضافه کنیم. این کدی است که به مرورگر اجازه می دهد صفحه وب شما را به درستی نمایش دهد.
کد زیر را کپی کرده و در فایل خود قرار دهید. اکنون فایل شما باید به این شکل باشد:
<!DOCTYPE html>
<html>
<head>
<title>Your Title Here</title>
</head>
<body>
Your content here.
</body>
</html>
صفحه html را با فشردن CTRL + S ذخیره کنید یا روی گزینه file و سپس گزینه save کلیک کنید. مطمئن شوید که فایل را با فرمت زیر نام گذاری کرده اید: "name" سپس ".html" نمونه های index.html، cooking.html.
هنگام نامگذاری فایل صفحه وب می توانید از این دو دستورالعمل استفاده کنید:
محل ذخیره فایل را انتخاب کنید. پس از انتخاب مکانی برای ذخیره فایل، روی ذخیره کلیک کنید.
برای مشاهده فایل از مدیر فایل خود برای رفتن به پوشه ای که فایل HTML شما است استفاده کنید. روی فایل کلیک راست کرده و با مرورگر آن را باز کنید. شما باید چیزی شبیه به این را ببینید.
محتوایی را که قبلاً نوشتید یا محتوای آماده ای را که برای استفاده شما ترتیب دادم کپی کنید. آن را بین تگ های بدنه بچسبانید.
صفحه وب را در مرورگر بازخوانی کنید. مانند یک لکه متن بدون پاراگراف یا عنوان در زیر به نظر می رسد.
مرحله 4: تگ های HTML را اضافه کنید
سرفصل ها
ابتدا به سرفصل ها می پردازیم. بررسی کنید که کدام قسمت یا متن عنوان اصلی بوده است. در مثال ما این است "حشره خواری: راهنمای نهایی برای خوردن جیرجیرک".
مطابق شکل زیر این متن را بین تگ های h1 قرار دهید:
<h1>
Insect eating: The ultimate guide to eating crickets
</h1>
