طراحی وب با HTML و CSS
اگر چه این آموزش مبانی اصالت با HTML و CSS را پوشش می دهد، همچنان توصیه می شود تا قبل از خواندن این آموزش، حداقل درک کوچکی از HTML داشته باشید. اگر میخواهید این آموزش را بخوانید اما هنوز کمی درباره آنچه که HTML است، مطمئن نیستید، توصیه میکنم قبل از شروع این مقاله مقاله دیگری را «مقدمه ای برای نوشتن HTML» بخوانید.
مقدمه ای بر نوشتن HTML
مقدمه ای بر ویراستاران HTML و متن. بدانید چگونه یک فایل HTML پایه ایجاد کنید و آن را در مرورگر خود مشاهده کنید و یک خط به صورت توضیح خط کد مورد استفاده در این پروژه.
CSS چیست؟
CSS برای Cascading Style Sheets است. شبیه به HTML، CSS یک ابزار مورد استفاده برای طراحی وب است. در حقیقت، HTML و CSS در هنگام طراحی یک وب سایت زیبا مورد استفاده قرار می گیرند. تفاوت اصلی بین این دو این است که HTML به طور عمده برای ایجاد محتوای وب سایت استفاده می شود، در حالی که CSS برای طراحی آن محتوای استفاده می شود. HTML یک ابزار مفید برای ایجاد یک وب سایت است، اما بدون CSS، وبسایت شما در واقع به نظر میرسد. به گفته وی، ابزار دیگری که شخص می تواند برای طراحی یک وبسایت استفاده کند، وجود دارد اما برای کسی که فقط به CSS وب سایت وارد شده است، جایی که همه چیز شروع می شود.
شروع به کار با HTML
برای استفاده از CSS، ابتدا باید محتوایی را در وب سایت ما داشته باشیم، بنابراین با ایجاد یک فایل HTML ساده و برخی از عناصر رایج که در یک صفحه وب یافت می شود، شروع به کار می کنیم. پیش بروید و ویرایشگر متن خود را باز کنید و نام جدیدی به نام index.html ایجاد کنید. برای هر کسی که تا به حال یک ویرایشگر متن را که دوستش داری پیدا نکرد، بسیار توصیه می کنم از Brackets برای نوشتن HTML و CSS استفاده کنید. اکنون کد زیر را در فایل index.html خود کپی و جایگذاری کنید.
<! DOCTYPE html>
<html lang = "en">
<head>
</ head>
<body>
</ body>
</ html>
این متن تقریبا برای هر فایل HTML معمول است. برچسب در خط 1 به مرورگرهای اینترنتی می گوید که این یک فایل متنی است و برچسب ها در خطوط 2 و 9 به مرورگر ها می گویند که همه چیز بین این دو برچسب HTML به زبان انگلیسی است. بین برچسب های <head> در خطوط 3 و 5 جایی است که کد شما برای نمایش نام وب سایت و لوگوی خود را در برگه مرورگر وب خود قرار می دهد. بین برچسب های <body> در خطوط 6 و 8 جایی است که شما محتوای وب سایت خود را قرار دهید. این به معنای واقعی کلمه بدن شماست.
برخی از محتویات را با HTML اضافه کنید
اکنون که ما طرح اصلی وب سایت خود را داریم، وقت آن است که برخی از محتویات را اضافه کنیم تا جالب تر شود. شروع کنیم با اضافه کردن یک بنر به وب سایت ما.
<! DOCTYPE html>
<html lang = "en">
<head>
</ head>
<body>
<div> <h1> این متن TYPE BANNER است </ h1> </ div>
</ body>
</ html>
برچسب های <div> برای جدا کردن بخش وب سایت خود از بقیه وب سایت استفاده می شود. در این مورد، ما از تگ های div برای جدا کردن بنر از بقیه وب سایت استفاده می کنیم. تگ <h1> برای ایجاد سرصفحه در وب سایت شما استفاده می شود. شش هدرهای مختلف (h1، h2، h3، h4، h5 و h6) وجود دارد که می تواند مورد استفاده قرار گیرد. بزرگترین تفاوت بین هدر ها اندازه متن است. هدرها اغلب برای تأکید بر متن بنر و عبارات پاراگراف استفاده می شوند. در حال حاضر، اجازه دهید یک نوار ناوبری یا نوار ناوبری را برای کوتاه اضافه کنیم.
<! DOCTYPE html>
<html lang = "en">
<head>
</ head>
<body>
<div> <h1> این متن TYPE BANNER است </ h1> </ div> است
<div>
<ul>
<li> <a href="index.html"> HOME </a> </ li>
<li> <a href="info.html"> INFO </a> </ li>
<li> <a href="contact.html"> تماس بگیرید </a> </ li>
<li> <a href="https://hubpages.com"> HUBPAGES </a> </ li>
</ ul>
</ div>
</ body>
</ html>
باز هم، ما از تگ های <div> برای جدا کردن نوار ناوبری در بخش خاص خود استفاده خواهیم کرد. تگ <ul> برای لیست های غیر ارادی با برچسب های <li> که هر یک از آیتم های لیست در لیست غیر ارادی هستند. در داخل تگ های <li> <a> برچسب هایی هستند که برای ایجاد لینک به سایر صفحات وب یا صفحات دیگر وب سایت شما استفاده می شوند. متن بین تگ های <a> همان چیزی است که به عنوان متن پیوند نمایش داده می شود، در حالی که متن داخل علامت نقل قول پس از اینکه href مقصد لینک است. در این مثال، سه لینک اول شما را به بخش های مختلف وب سایت آینده هدایت می کنند و لینک چهارم شما را به وب سایت Hubpages منتقل می کند. در حال حاضر، اجازه دهید برخی از متن متن وب سایت ما را اضافه کنیم.
<! DOCTYPE html>
<html lang = "en">
<head>
</ head>
<body>
<div> <h1> این متن TYPE BANNER است </ h1> </ div> است
<div>
<ul>
<li> <a href="index.html"> HOME </a> </ li>
<li> <a href="info.html"> INFO </a> </ li>
<li> <a href="contact.html"> تماس بگیرید </a> </ li>
<li> <a href="https://hubpages.com"> HUBPAGES </a> </ li>
</ ul>
</ div>
<h2> این عنوان سرصفحه من است </ h2> است
<p>
این جایی است که من میخواهم متن مفید و آموزنده در مورد وبسایت من قرار دهم.
</ p>
<p>
این جایی است که من می توانم اطلاعات بیشتری در مورد وب سایتم بگذارم.
</ p>
<div> این جایی است که من هستم
Send feedback
History
Saved
Community
می توانید یک آرم کپی رایت مانند این را کپی کنید </ div>
</ body>
</ html>
در اینجا می توانیم مثال دیگری از یک برچسب هدر را مشاهده کنیم. ما در این مورد از <h2> استفاده کردیم تا تاکید بر header پاراگراف در حالی که هنوز آن را کوچک تر از متن بنر است. تگ های <p> برای علامت گذاری یک پاراگراف متن استفاده می شود، و <div> جدید در پایین کد، جدا کردن سلب مسئولیت ما از بقیه متن در صفحه است. در حالی که امکان اضافه کردن متن به وب سایت شما به سادگی با تایپ کردن بین تگ های <body>، بسیار ساده تر و ساده تر است و اگر وب سایت شما متن را در برچسب های پاراگراف یا header قرار می دهد و یا در مورد ما محرومیت کپی رایت آن را در خود <div> قرار دهید. اکنون، بیایید وبسایتمان را باز کنیم و آنچه را که تا کنون دیده ایم ببینیم.
یک وبسایت ساده بدون CSS
یک وبسایت ساده بدون CSS
پس از باز کردن وب سایت خود، باید چیزی شبیه تصویر بالا را ببینید. در حالی که ما می توانیم بخش های مختلف وب سایت ما را به وضوح ببینیم، هنوز هم کاملا ظریف است. این جایی است که CSS وارد می شود
برخی از سبک ها را با CSS اضافه کنید
حالا که ما وب سایت خود داریم، اجازه دهید کمی سبک با CSS اضافه کنیم. با استفاده از ویرایشگر متن شما یک فایل دیگر ایجاد کرده و آن را "style.css" نامگذاری کنید. قبل از اینکه ما بتوانیم در فایل CSS جدیدمان نوشتن کنیم، باید یک فایل دیگر را به فایل index.html اضافه کنیم. برای هر یک از تگ های اصلی ما می خواهیم یک شناسه یا یک کلاس را در داخل تگ باز آن اختصاص دهیم. اگر برچسب یک بخش منحصر به فرد از وب سایت شما باشد، آن را یک شناسه اختصاص داده، اما برای برچسب هایی که یک عنصر تکراری از وب سایت هستند که یک ظاهر مشابه را مانند متن بدن دارند، ما یک کلاس به جای آن قرار می دهیم. آخر، ما باید فایل HTML ما را به فایل CSS ما در داخل تگ <head> لینک کنیم.
<! DOCTYPE html>
<html lang = "en">
<head>
<link rel = "stylesheet" href = "style.css">
</ head>
<body>
<div id = "banner"> <h1> این متن من بنر است </ h1> </ div>
<div id = "navBar">
<ul>
<li> <a href="index.html"> HOME </a> </ li>
<li> <a href="info.html"> INFO </a> </ li>
<li> <a href="contact.html"> تماس بگیرید </a> </ li>
<li> <a href="https://hubpages.com"> HUBPAGES </a> </ li>
</ ul>
</ div>
<h2> این عنوان سرصفحه من است </ h2> است
<p class = "bodyText">
این جایی است که من میخواهم متن مفید و آموزنده در مورد وبسایت من قرار دهم.
</ p>
<p class = "bodyText">
این جایی است که من می توانم اطلاعات بیشتری در مورد وب سایتم بگذارم.
</ p>
<div id = "copyright"> این جایی است که می توانم لوگوی حق چاپ مانند این را کپی کنم </ div>
</ body>
</ html>
اکنون بخش اصلی صفحه ما دارای شناسه یا کلاس است، ما می توانیم فایل style.css خود را دوباره باز کنیم و شروع به افزودن رنگ به وب سایت ما کنیم.
#banner {
رنگ پس زمینه: زردآلو؛
}
بدن {
رنگ پس زمینه: rgb (209، 162، 98)؛
}
.متن {
رنگ: # 5b120c؛
}
همانطور که احتمالا از کد بالا به ذکر است، CSS سبک کمی متفاوت از HTML است. در CSS شما می توانید یک قطعه وب سایت خود را که می خواهید به سه روش مشخص کنید، مشخص کنید. ابتدا شما می توانید یک بخش را با اشاره به شناسه آن با # و سپس عناصر id مشخص کنید. دوم، شما می توانید یک بخش را با اشاره به نام تگ آن مانند بدن در کد بالا مشخص کنید. و سوم، شما می توانید یک گروه از بخش را با اشاره به نام کلاس مطابق با دوره ای که به دنبال آن نام کلاس را مشخص می کند مشخص کنید. مهم نیست کدام راه را انتخاب می کنید که استفاده کنید، پس از مرجع، باز کردن و بستن براکت قرار دهید. هر یک از یک ظاهر طراحی شده در بین این براکت ها، بخش اشاره شده و هر زیر بخش درون آن قسمت اعمال خواهد شد. به عنوان مثال، اگر شما کد را از خط 10 درون مرجع بدن قرار دهید، آنگاه تمام متن داخل بدن وبسایت شما این رنگ را به جای بخش هایی که با کلاس bodyText مشخص شده است، تبدیل می کند.
دومین چیزی که احتمالا متوجه شده اید این است که چندین روش برای اشاره به یک رنگ در CSS وجود دارد. بعضی از رنگ ها از قبل نامگذاری شده اند مانند آبی، قرمز، زرد و نارنجی، اما برای رنگ خاص تر شما می توانید از روش های جایگزین مانند RGB یا hex استفاده کنید. من در این روش های جایگزین عمیق نخواهم ماند، فقط می دانم که آنها وجود دارند و وب سایتهایی وجود دارند که شما می توانید آنها را برای پیدا کردن تقریبا هر رنگ در RGB یا hex استفاده کنید. اکنون، بیایید نگاهی به وب سایت ما بیندازیم و تفاوت را ببینیم.
یک وب سایت با برخی رنگ
یک وب سایت با برخی رنگ
همانطور که می بینید، حتی با اضافه کردن مقدار کمی از CSS می تواند تفاوت زیادی در نحوه نمایش وب سایت شما داشته باشد. در حالی که من اعتراف می کنم که رنگ های انتخاب شده بهترین نیستند، برای این مثال مناسب هستند. حالا که وب سایت ما رنگی دارد، یک مشکل که ممکن است متوجه شوید این است که بنر احتمالا اندازه ای نیست که ما آن را دوست داشته باشیم، پس بگذارید بعدا برطرف شود.
#banner {
رنگ پس زمینه: زردآلو؛
ارتفاع: 200 پیکسل؛
متن خط: مرکز؛
}
h1 {
حاشیه: 0px؛
خط ارتفاع 200px؛
}
بدن {
حاشیه: 0px؛
رنگ پس زمینه: rgb (209، 162، 98)؛
}
.متن {
رنگ: # 5b120c؛
}
در بالا، در بخش #banner، می توانید ببینید که ما ارتفاع پانل را 200 پین تعیین کردیم
