آیا می خواهید یاد بگیرید که چگونه یک وب سایت با HTML و CSS ایجاد کنید؟ مقاله ی خوبی را انتخاب کرده اید. در این مقاله، ما تمام مراحل را به شما آموزش می دهیم تا از یک صفحه خالی به یک وب سایت کارآمد برسید که بهینه شده و در عین حال کاملاً زیبا باشد. در ابتدا بهتر است ذکر کنم که در این مقاله به صورت خلاصه html و css آموزش داده شده است برای فراگیری html و css بهتر است از آموزش های ما استفاده کنید.
HTML و CSS چیست؟
• HTML (زبان نشانه گذاری ) ساختار و محتویات یک صفحه وب را تعریف می کند .با html میتوانیم تیترها ، متن ها ، دکمه ها ، فرم ها و …. را ایجاد کرده و نحوه ی چیده شدن آن را در صفحه ی وب را تنظیم کنیم. در اصل html اسکلت بندی یک صفحه وب را ایجاد میکند. می توانید توصیه میکنم مقاله ” همه چیز در مورد html و کاربرد های html ” را مطالعه کنید.
• CSS : با css استایل و نحوه ی ارائه یک صفحه وب و عناصر روی آن را تعریف می کند.
شما واقعاً نمی توانید html را بدون css داشته باشید . این دو با هم کار می کنند تا صفحه وب نهایی، طراحی آن و محتوای موجود در آن را تشکیل دهند.
توجه داشته باشید؛ وقتی می گوییم “یک صفحه وب”، منظور ما یک سند HTML واحد است . یک صفحه واحد که بخشی از وب سایت شما است. در حالی که “یک وب سایت” یک چیز کامل است . کل سایت شما با تمام صفحات وب جداگانه آن.
در این مقاله مطالب زیر را یاد می گیرید:
- اصول اولیه HTML .
- ساختار سند HTML را درک کنید.
- با انتخابگرهای CSS آشنا شوید.
- یک شیوه نامه CSS را کنار هم قرار دهید.
- بوت استرپ را دریافت کنید.
- انتخاب و طراحی.
- وب سایت خود را با HTML و CSS سفارشی کنید.
- اضافه کردن محتوا و تصاویر.
- رنگ ها و فونت.
- صفحات اضافی ایجاد کنید.
اگر فکر می کنید این خیلی پیچیده است، توصیه می کنیم با استفاده از یکی از سیستم های مدیریت محتوا ( CMS ) مانند : وردپرس ، پرستاشاپ جوملا ، مجنتو و… وب سایت را ایجاد کنید.
قبل از شروع به ایجاد صفحه وب خود به نکته ی زیر توجه کنید.
تهیه هاست و نام دامنه
اولین چیزی که حتی قبل از ایجاد یک وب سایت با HTML و CSS به هاست مناسب نیاز دارید، یک وب سرور (هاست) است. نگران نباشید؛ شما مجبور نیستید دستگاه خود را بخرید. بسیاری از شرکت های میزبانی وب یک سرویس میزبانی ساده را روی دستگاه های خود به شما می فروشند. فقط برای “میزبانی وب” در گوگل جستجو کنید و چیزی را انتخاب کنید که خیلی گران نباشد.
بعد از تهیه هاست ، چیزی که نیاز دارید یک نام دامنه است. نام دامنه چیزی است که وب سایت در وب با آن شناسایی می شود. به عنوان مثال، نام دامنه این سایت است metawebz.org.
وقتی هم نام دامنه و هم سرور دارید، می توانید این دو را به هم متصل کنید.
اگر فقط می خواهید با یک وب سایت HTML در سیستم خود آزمایش کنید و قصد ندارید آن را عمومی کنید، از یک نرم افزار وب سرور محلی استفاده کنید. موردی که ما توصیه می کنیم و دوست داریم استفاده کنیم XAMPP نام دارد. نسخه هایی برای مک و رایانه شخصی دارد و استفاده از آن آسان است.
1. اصول HTML را بیاموزید.
اگر تازه به آموزش HTML پرداخته اید ، ممکن است ” آموزش HTML برای مبتدیان ” برای شما مفید باشد.
عنصر اصلی ساختار HTML ، تگ HTML است.
به عنوان مثال، یک برچسب به شکل زیر است:
<h1/>متاوبز<h1>
در اینجا، ما با یک تگ <h1> سروکار داریم. این یک تیتر 1 است که بین تگ آغازین <h1> و تگ پایانی <h1/> قرار دارد .
اما تگ های دیگری نیز وجود دارد که فقط به چند مورد اشاره می کنیم:
- <h2>…</h2>تیتر 2 صفحه است.
- <i>…</i>متن را بین تگ های باز و بسته شدن مورب می کند.
- <u>…</u>زیر آن خط خواهد کشید.
- <p>…</p>یک پاراگراف از متن است.
جدا از آن تگ های ساده، تگ های پیچیده تری نیز وجود دارند. به عنوان مثال، اگر می خواهید یک لیست مانند زیر بسازید:
- مورد 1
- مورد 2
- مورد 3
می توانید این کار را با کد HTML زیر انجام دهید:
<ul> <li>مورد 1</li> <li>مورد 2</li> <li>مورد 3</li> </ul>
یا اگر می خواهید پیوندی به صفحه دیگری اضافه کنید مانند این صفحه :
این یک لینک به صفحه اصلی ما است
… می توانید این کار را با این قطعه کد انجام دهید:
<a href="https://google.com/">این یک پیوند به صفحه گوگل است</a >
این آموزش ها را دنبال کنید تا لیست کامل تگ های HTML را یادبگیرید . هنگامی که یک وب سایت با HTML و CSS ایجاد می کنید، مفید خواهد بود.
2. ساختار سند HTML را درک کنید.
صفحه HTML خود را طوری در نظر بگیرید که گویی از لگو ساخته شده است. شما آجرهای مختلف را روی هم قرار می دهید تا به ساختار بزرگتری برسید.
اما به جای آجر لگو، تگ های HTML دریافت می کنید…
در اینجا ساده ترین ساختار سند HTML آمده است:
<!doctype html>
<html dir="rtl" lang="fa-IR">
<head>
<meta charset="UTF-8">
<title>طراحی سایت و سئو متاوبز</title>
</head>
<body>
<h1> آموزش ایجاد یک صفحه وب </h1>
<p>اولین صفحه وب من.</p>
</body>
</html>
میتوانید کد بالا را بردارید، آن را کپی کرده و در یک فایل جدید جای‌گذاری کنید، سند را با نام index.html ذخیره کنید و این یک صفحه HTML کاملا معتبر خواهد بود. با توجه کنید که میتوانید نام دلخواه خود را به جای index قرار دهید ولی حتما باید پسوند سند شما html. باشد.
بیایید بخش های جداگانه کد بالا را توضیح دهیم:
- <doctype html!> : اظهارنامه اولیه سند html ما است.
- <“html dir=”rtl” lang=”fa-IR> : می گوید که آنچه در آینده خواهد آمد یک سند HTML است که به فارسی نوشته شده است و چیدمان آن از راست به چپ باشد.
- <head> : شروع بخش head را نشان می دهد . بخش head جایی است که تمام پارامترهای اصلی صفحه در آن قرار می گیرند. بیشتر آنها روی صفحه نمایش داده نمی شوند.
- <“meta charset=”UTF-8> : تعریف می کند که چه مجموعه کاراکتری برای نوشتن سند استفاده می شود. نیازی به صرف زمان زیاد برای این نیست؛ فقط از این اعلان همانطور که هست استفاده کنید.
- <title/>طراحی سایت و سئو متاوبز<title> : عنوان صفحه ؛ این چیزی است که کاربران در نوار عنوان مرورگر خود خواهند دید. به عنوان مثال:
- <body> : شروع بخش بدنه صفحه وب را نشان می دهد . اینجا جایی است که تمام محتوای صفحه می رود. این بخش اصلی یک سند HTML است. روی این تاکید می کنم، این بخش جایی است که شما قرار است تمام محتوایی را که قرار است در صفحه نمایش داده شود درج کنید.
- <h1/> آموزش ایجاد یک صفحه وب <h1> : تیتر 1 یا تیتر اصلی صفحه است.
- <p/>اولین صفحه وب من.<p> : یک پاراگراف ساده از متن است.
- <html/>- تگ بسته شدن کل سند HTML است.
یک نکته مهم در اینجا کار بر روی یک فایل HTML در یک برنامه متن اصلی یا یک پردازشگر متن پیچیده مانند Word تجربه خوبی نیست. برای اینکه کارها را برای خود آسان کنید، شما میتوانید برنامه Visual Studio Code را دانلود و بر روی سیستم خود نصب کنید . و به آسانی از آن استفاده نمایید.
چرا بهتر است؟ زیرا به صورت بصری تگ های HTML شما را از محتوای متنی، پارامترهای برچسب و سایر مقادیر متمایز می کند. اساساً همه اینها خوانا خواهند شد.
برگردیم به موضوع می توانید آن index.html فایل جدید خود را بردارید، آن را در جایی که دایرکتوری اصلی وب سرور شما است کپی کنید و سپس با رفتن به آن از طریق یک مرورگر وب، آن صفحه را ببینید. با این حال، خیلی هیجان زده نشوید. این صفحه نسبتاً زشت خواهد بود (پایین را ببینید).
خوب، پس صفحه زشت است، چگونه می توان آن را زیبا کرد؟
3. انتخابگرهای CSS را بشناسید.
درست مانند HTML که دارای تگ های خود است ، CSS نیز دارای انتخابگرها است.
انتخابگرها توصیف می کنند که چگونه یک عنصر معین باید از نظر ظاهری رفتار کند. در اینجا نمونه ای از انتخابگر CSS آورده شده است:
}p
;font-size:18px
{
این انتخابگر نشان می دهد که تمام تگ های p در درون سند HTML دارای اندازه فونت 18 پیکسل خواهند بود.
با این حال، یک راه عملی تر برای استفاده از انتخابگرهای CSS این نیست که تمام برچسب ها از یک نوع معین را به یک سبک خاص محدود کنید، بلکه “کلاس” های مختلف ایجاد کنید و آنها را به یک تگ اختصاص دهید.
به عنوان مثال، انتخابگر کلاس در CSS به شکل زیر است:
} normal-text.
;font-size:18px
}
به نقطه ( . ) قبل از نام کلاس (normal-text) توجه کنید. با تعریف کلاس «متن معمولی»، اکنون میتوانیم آن کلاس را به آن دسته از برچسب‌های HTML خاص که می‌خواهیم اندازه آنها 18 پیکسل باشد، اختصاص دهیم.
مثلا:
<“p class=”normal-text>این متن 18 پیکسل خواهد بود.</p>
بیایید یک دقیقه بیشتر وقت بگذاریم تا تمام عناصر آن قطعه کد CSS بالا را توضیح دهیم:
- normal-text. :تعریف کلاس؛ همه چیز بعد از نام کلاس و بین براکت های باز و بسته {}مشخص می کند که عناصر اختصاص داده شده به این کلاس چگونه خواهند بود.
- font-size : یک نمونه ویژگی CSS است.
- 18px: ارزشی که به ویژگی css اختصاص داده شده است.
تعداد زیادی ویژگی CSS جدا از موارد فوق font-size وجود دارد. اگر کنجکاو هستید، لیست کامل در ” بعدا آماده میکنم ” آمده است .
4. یک CSS Stylesheet را کنار هم قرار دهید.
یک سند HTML بسیار ساختاری است . هر عنصر جایگاه خود را دارد و ترتیب عناصر برای ساخت و ظاهر نهایی صفحه وب مورد نظر بسیار مهم است.
اسناد CSS اغلب به عنوان شیوه نامه نامیده می شوند . اساسا، یک شیوه نامه CSS لیستی از تمام تعاریف کلاسی است که در سند HTML مربوطه استفاده می شود. ترتیب تعاریف کلاس ها در اکثر مواقع (حداقل برای طرح های ساده) آنقدر مهم نیست.
روشی که یک stylesheet CSS را کنار هم قرار می دهید این است که هر کلاس را یک به یک تعریف کنید و سپس آزمایش کنید که آیا نتیجه در طراحی صفحه شما همان چیزی است که می خواهید.
اگر این کار برای شما خسته کننده به نظر می رسد .ما کار را برای شما آسان تر می کنیم و شما را مجبور نمی کنیم که طراحی HTML و CSS را به صورت دستی یاد بگیرید. اینجاست که چیزی به نام Bootstrap مطرح می شود.
5. Bootstrap را دانلود/نصب کنید.
Bootstrap یک جعبه ابزار منبع باز برای ایجاد یک وب سایت با HTML و CSS است.
به ساده، بوت استرپ از ساختار اصلی یک سند HTML و شیوه نامه CSS برای شما مراقبت می کند. چارچوبی را ارائه می دهد که مطمئن می شود داربست اصلی صفحه وب شما آماده و برای توسعه بیشتر بهینه شده است.
اساسا، بوت استرپ به شما امکان می دهد از ابتدا شروع نکنید، و در عوض مستقیماً وارد بخش سرگرم کننده شوید. با آن، شما مجبور نیستید روی مراحل اولیه اغلب خسته کننده ایجاد یک وب سایت با HTML و CSS کار کنید.
دو راه وجود دارد که می توانید طی کنید:
- گزینه (1) : یادگیری Bootstrap – به صفحه اصلی Bootstrap بروید، بسته اصلی Bootstrap را دانلود کنید و شروع به ساختن در بالای آن کنید.
- گزینه (2) : یک میانبر انتخاب کنید – یک بسته شروع برای Bootstrap با طراحی زیبا و یک صفحه وب نمایشی از قبل ساخته شده دریافت کنید.
گزینه (1) ممکن است در ابتدا زمانی برای یادگیری آن صرف کنید، اما به هیچ وجه بدترین راه برای ایجاد یک وب سایت با HTML و CSS نیست. هنگامی که بر ساختار اصلی بوت استرپ تسلط پیدا کردید، ساخت صفحات جدید و ایجاد آنها دقیقاً همانطور که می خواهید برای شما آسان تر خواهد بود.
ما قصد داریم با گزینه (2) برای این مقاله پیش برویم. ما این کار را به چند دلیل انجام می دهیم، مهمترین آنها:
شروع با یک ساختار آماده ، این به شما امکان می دهد روی چیزهای جالب تمرکز کنید . مانند چیدمان محتوا و خوب جلوه دادن آن.
خلاصه :
در قسمت اول این مقاله آموزش دیدید که چگونه با استفاده از Html و css یک صفحه ساده وب را بالا بیاورید. در قسمت دوم این مقاله یک طراح را انتخاب می کنیم و با استفاده از html و css و با کمک بوت استرپ آن را پیاده سازی میکنیم.
قسمت دوم به زودی …
