در این آموزش قصد داریم یک وب‌سایت ساده را با استفاده از HTML و CSS طراحی کنیم. همان‌طور که می‌دانیم، ظاهر زیبا و کاربرپسند یک وب‌سایت نقش مهمی در تجربه کاربری، کاهش نرخ پرش و افزایش تعامل کاربر دارد. زبان‌های HTML و CSS ابزارهایی هستند که به ما امکان می‌دهند وب‌سایتی منظم، جذاب و کاربردی ایجاد کنیم. شما میتوانید برای یادگیری کامل HTML، CSS از دوره آموزش فرانت‌ اند از صفر تا صد و یادگیری HTML، CSS و JavaScript بهره ببرید.

در ادامه، قدم‌به‌قدم ساختار صفحه، هدر، منو، بخش محتوا و فوتر را پیاده‌سازی می‌کنیم و در پایان یک وب‌سایت کامل و قابل استفاده خواهیم داشت.

HTML چیست؟

HTML یا Hyper Text Markup Language یک زبان نشانه‌گذاری برای ساختاردهی صفحات وب است و زبان برنامه‌نویسی محسوب نمی‌شود. HTML شامل تگ‌هایی است که اجزای مختلف مانند متن، تصویر، جداول، فرم‌ها و … را مشخص می‌کنند.

افراد مبتدی حتی با نرم‌افزار ساده‌ای مانند Notepad نیز می‌توانند کدنویسی HTML را شروع کنند، هرچند استفاده از ابزارهای حرفه‌ای‌تر تجربهٔ بهتری فراهم می‌کند.

CSS چیست و چرا به آن نیاز داریم؟

CSS مخفف Cascading Style Sheets است و وظیفهٔ استایل‌دهی به صفحات وب را برعهده دارد. با استفاده از CSS می‌توانیم:

  • رنگ‌بندی

  • چیدمان

  • فونت‌ها

  • افکت‌ها

  • سایه و انیمیشن‌ها

را مدیریت کنیم. ترکیب HTML و CSS اساس هر وب‌سایت مدرن است. تصویر زیر میتواند تفاوت HTML و CSS را به خوبی به شما نشان دهد.

طراحی سایت ساده با html و css

ابزارهای مناسب برای کدنویسی HTML و CSS

چند ابزار رایج:

  • VS Code (پیشنهاد شده – سریع و قدرتمند)

  • Browser Developer Tools

  • محیط‌های آنلاین مانند CodePen و Liveweave

برای شروع پروژه کافی است VS Code را نصب کرده و یک فایل HTML بسازید.

ساختار اصلی یک فایل HTML

 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Website Name</title>
</head>
<body>
    <!-- اجزای وبسایت در این بخش قرار می‌گیرند -->
</body>
</html>

توضیح اجزا

  • DOCTYPE نوع سند را مشخص می‌کند.

  • تگ html شامل تمام محتوای صفحه است.

  • تگ head تنظیمات صفحه، لینک CSS و عنوان سایت را در خود دارد.

  • تگ body محل قرارگیری محتوای قابل مشاهده است.

طراحی هدر سایت با HTML و CSS

۱. ایجاد نوار بالایی (Top Bar)

<div id="container" style="height: 25px; background-color: rgb(65,166,248);"></div>

این کد یک نوار باریک رنگی در بالای صفحه ایجاد می‌کند. 

خروجی این دستور یک نوار باریک در ابتدای صفحه است.

طراحی سایت با html و css

۲. افزودن لوگو در هدر

<a href="index.html">
    <img src="img/logo.png" style="float:left; padding-left:200px; padding-top:10px;" width="100px" height="70px">
</a>

لوگو در سمت چپ قرار می‌گیرد و کاربر را به صفحه اصلی هدایت می‌کند. توجه کنید که در بخش src باید ادرس تصویر لوگو شما قرار بگیرد.

۳. ساخت فرم جستجو

<div class="topnav">
    <input type="text" placeholder="دنبال چی هستی؟">
    <button type="button">بگرد</button>
</div>

CSS مربوط به فرم جستجو

(در فایل style.css)

.topnav input[type=text] {
    border: 1px solid #6587f7;
    margin-top: 50px;
    margin-right: 200px;
    float: right;
}

.topnav button {
    float: right;
    margin-top: 50px;
    margin-right: 10px;
    background-color: #e1ecf4;
    border: 1px solid #7aa7c7;
    cursor: pointer;
    border-radius: 3px;
}

حال برای این که با یک خط این بخش را از بخش‌های بعدی جدا کنیم از دستور زیر استفاده می‌کنیم:

<hr style="margin-top: 80px;" class="new">

کلاسی که برای این دستور استفاده شده نیز بصورت زیر میباشد:

hr.new{
  border:none;
  height: 50px;
  border-bottom: 1px solid #175792;
  box-shadow: 0 20px 20px -20px #5885ff;
  margin: -50px auto 10px; 
}

سه بخش بالا خروجی زیر را به شما خواهند داد:

طراحی سایت با html و css
 

طراحی منوی سایت

<div class="topnav" style="margin-right:190px;">
    <a class="active" href="sample2.html">صفحه نخست</a>
    <a href="#news">اخبار</a>
    <a href="#contact">تماس با ما</a>
    <a href="#about">درباره ما</a>
    <a href="sam3.html">ثبت نام</a>
</div>

CSS منو

.topnav a {
    float: right;
    padding: 14px 16px;
    color: #070707;
    transition: all .5s;
}

.topnav a:hover {
    background-color: #d7e2f8;
}

.topnav a.active {
    background-color: #96b7f5;
    color: white;
}

خروجی بخش منو به همراه بخش‌های بالاتر بصورت زیر می‌باشد:

طراحی سایت با استفاده از html و css

افزودن تصویر هدر (Header Image)

<div style="margin-top:70px; margin-bottom:70px;">
    <img src="img/h1.jpg" class="img-with-overlay" width="100%" height="300px">
    <div class="ti">
        <h1>معرفی کتاب</h1>
    </div>
</div>

CSS تصویر هدر

.img-with-overlay {
    width:100%;
    position:relative;
    filter:brightness(70%);
}

.ti {
    position:absolute;
    top:60%;
    left:20%;
    transform:translate(-50%, -50%);
    color:#5e2c03;
}

خروجی در طراحی سایت با CSS و HTML تا اینجای کار بصورت زیر میباشد:

طراحی وب سایت با html و css

طراحی بخش معرفی سه خبر یا محصول

این بخش سه کارت را در کنار هم نمایش می‌دهد.

<div style="height:270px; margin:80px 200px;">
    <div class="mo2">
        <img src="img/img1.jpg" width="250px" height="180px">
        <h4 class="mo"><a href="sam4.html">معرفی کتاب ۱</a></h4>
        <p class="mo">متن مربوط به معرفی کتاب اول</p>
    </div>
    <!-- دو کارت دیگر مشابه همین -->
</div>

CSS کارت‌ها

.mo2 {
    width:250px;
    float:right;
    margin-left:75px;
    transition:.5s;
}

.mo2:hover {
    background:#bbcdf0;
    filter:brightness(70%);
}

خروجی این بخش نیز بصورت زیر می‌باشد:

چگونه با html و css سایت طراحی کنم

طراحی بخش متن توضیحی

این بخش برای نمایش یک متن طولانی یا معرفی موضوعی مناسب است.

<div style="box-shadow:0 0 32px rgba(16,39,248,.2); background-color:rgb(65,166,248); height:250px;">
    <p class="pp">متن تستی جهت نمایش …</p>
</div>

استایل این بخش درون خطی است و برای این بخش در فایل css کدی نوشته نشده است. نتیجه این بخش به صورت تصویر زیر نمایش داده خواهد شد:

طراحی سایت توسط html و css

 طراحی بخش "معرفی کوتاه"

<div style="height:350px; margin-top:80px;">
    <h3 class="n">معرفی کوتاه</h3>
    <div style="float:right; margin-right:100px;">
        <img src="img/img4.jpg">
    </div>
    <div style="float:left; width:800px;">
        <p class="pp2">متن تستی جهت نمایش …</p>
    </div>
</div>

کلاس‌هایی که جهت استایل دهی برای این بخش در فایل css نوشته شده  بصورت زیر می‌باشند:

.pp{
    text-align: center;
    font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
    font-size: 40;
    padding-top: 100px;
    margin: 100px;
}
.n{
    text-align: center;
    color: rgb(21, 68, 105);
    font-family: -apple-system,system-ui,"Segoe UI","Liberation Sans",sans-serif;
    margin-bottom: 30px;
}

نوشتن این کد در خروجی نتیجه‌ای به صورت تصویر زیر خواهد داشت:

ساخت سایت با html و css

طراحی فوتر سایت

<div id="footer">
    <div class="foo">
        <p>تماس با ما</p>
        <p>
        ایمیل: sample@gmail.com  
        <br><br>
        شماره تماس: 09122222222
        </p>
    </div>
    <!-- ستون‌های دیگر مانند رویدادها، مجموعه ما -->
</div>

CSS فوتر

.foo {
    color:#96b7f5;
    font-family:"Segoe UI", sans-serif;
}

.foo a {
    color:#96b7f5;
}

خروجی کد بالا نتیجه‌ای بصورت زیر برای نمایش فوتر خواهد داشت:

طراحی سایت با استفاده از html و css

در نهایت شمای کلی وب سایتی که با html و css نوشته شد بصورت تصویر زیر است:

طراحی وب برای مبتدیان

نکات مهم طراحی

 قبل از شروع طراحی، یک پالت رنگی مشخص کنید

این کار ظاهر کلی سایت را هماهنگ و حرفه‌ای‌تر می‌کند.

ساختار صفحات را از ابتدا مشخص کنید

مانند: هدر، منو، محتوا، فوتر.

سعی کنید از کلاس‌ها بجای استایل‌های inline استفاده کنید

این کار نگهداری کدها را آسان‌تر می‌کند.

HTML و CSS پایهٔ یادگیری تکنولوژی‌های پیشرفته‌تر مثل JavaScript، React و Angular هستند.