آموزش ساخت قالب ساده html – طراحی صفحه وب با HTML و CSS

10.98k بازدید
آخرین بروزرسانی: 27 دی 1403
CSS, HTML
زمان مطالعه: 15 دقیقه

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

صفحه وب چیست؟

صفحه وب (Web Page) صفحاتی هستند که در مرورگر نمایش داده می‌شوند و کاربران می‌توانند با آن تعامل داشته باشند. هر صفحه وب دارای یک آدرس (URL) است که توسط آن قابل دسترسی می‌باشد. صفحات وب با زبان نشانه‌گذاری html نوشته می‌شوند. به زبان ساده، صفحه وب به یک سند گفته می‌شود که قابل‌نمایش در مرورگر باشد. صفحه وب دارای متن، تصویر، لینک و فایل‌های چندرسانه‌ای می‌باشد و می‌تواند از طریق لینک به صفحات وب دیگران متصل شود.

صفحات وب می‌توانند به‌صورت یک فایل در سیستم شما ذخیره‌شده باشند و یا به‌صورت آنلاین در یک سرور ذخیره شوند. درصورتی‌که صفحه وب شما در سرور ذخیره‌شده باشد باید آدرس صفحه وب را در مرورگر وارد کنید تا بتوانید آن را مشاهده کنید.

خلاصه ای در مورد html

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

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

نصب ادیتور مناسب

برای کدنویسی ابتدا نیازمند یک ویرایشگر کد هستیم که بتوانید داخل آن کدهای مدنظرتان را بنویسید. همانطور که می‌دانید نرم افزار Notepad ساده‌ترین ویرایشگر متن در ویندوز می‌باشد که حتی می‌توانید از این ویرایشگر نیز استفاده کنید. اما پیشنهاد ما به شما استفاده از یک ویرایشگر با امکانات بیشتر است.

۱ – برای ایجاد یک صفحه وب ابتدا نوت پد را باز کنید. به منوی فایل بروید و Save as را کلیک کنید.

۲ – حال پس از انتخاب مسیر مناسب فرمت فایل را All Files قرار دهید و Encoding را UTF-8 قرار دهید. در بخش File name یک نام مناسب به فایل خود بدهید و با پسوند html ذخیره کنید.

تبریک میگم! شما موفق شدید اولین صفحه وب خود را ایجاد کنید. اما هنوز صفحه وب شما محتوا ندارد. از دیگر ویرایشگرهای موجود، نرم افزار ++Notepad یک ویرایشگر ساده و نسخه حرفه‌ای‌تر نوتپد می‌باشد که دارای قابلیت‌های قابل قبول است؛ می‌توانید از این ویرایشگر نیز استفاده کنید. پیشنهاد بعدی به شما ویرایشگر Visual Studio Code می‌باشد که در عین کاربر پسند بودن بسیار حرفه‌ای می‌باشد به طوری که دیگر نیازی به هیچ ویرایشگر کد در سیستم خود نخواهید داشت.

از مزایای این ویرایشگر می‌توان به Intellisens (تکمیل خودکار کد) اشاره کرد. اگر بخواهیم درمورد این ویرایشگر توضیح دهیم به تنهایی نیازمند یک پست می‌باشد. درصورتی که مایل هستید در مورد VS Code بیشتر بدانید می‌توانید از آموزش Visual Studio Code فرادرس استفاده کنید.

آموزش Visual Studio Code __ کلیک کنید

ساختار کلی قالب html

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

نکته: به جز چند مورد استثناء تمامی تگ‌های html دارای شروع و پایان می‌باشند.

داخل تگ <html> دو تگ <head> و <body> نیز وجود دارند که در داخل تگ <head> کدهای مربوط به عنوان صفحه وب، متاها و اطلاعات سند نوشته می‌شوند. به طور کلی تمامی تگ‌هایی که برای کاربر قابل نمایش نیست داخل تگ <head> نوشته می‌شود.

تگ <body> به عنوان بدنه صفحه وب شناخته می‌شود. این تگ در ادامه تگ <head> نوشته شده و داخل آن عنصرهای html را که در صفحه مرورگر نمایش داده خواهد شد نوشته می‌شود. عنصرهایی مانند پاراگراف، تصویر، جدول و غیره.

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

<!DOCTYPE html>
<html dir="rtl">
    <head>
        <meta charset="UTF-8">
        <title>programstore.ir</title>
    </head>
    <body>
    </body>
</html>

<!DOCTYPE html> موجود در قالب یک راهنما برای مرورگرهای وب است که در html5 معرفی شده است و استفاده از آن در تمامی صفحات وب اجباری است. درصورتی که از نسخه‌های قدیمی‌تر html استفاده کنید لازم است نسبت به نسخه خود از کد DOCTYPE بخصوص خود استفاده کنید. از آنجایی که اکثر صفحات وب حال حاضر از html5 پشتیبانی می‌کنند بنابراین ما نیز از این نسخه استفاده می‌کنیم.

شروع کدنویسی html

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

اگر دانش آن را ندارید اشکالی ندارد. در این پست تمامی کدهای استفاده شده توضیح داده خواهد شد.

ایجاد فایل CSS

به منوی File در VS بروید و بر روی New File کلیک کنید. سپس با کلیک بر روی Select a Language زبان مورد نظر خود را CSS قرار دهید و فایل را با نام style در همان مسیر پروژه قبلی ذخیره کنید.

حال نوبت آن است که فایل CSS خود را به قالب خود متصل کنید. برای این کار به فایل html خود روید و داخل تگ <head> کدهای زیر را قرار دهید.

<link href="style.css" rel="stylesheet">

از CSS برای استایل دهی به html استفاده می‌شود. بنابراین نیاز داریم تا یک فایل CSS داشته باشیم و بتوانیم به قالب خود استایل بدهیم.

تگ div

تگ <div> برای ایجاد بخش یا بلوک مورد استفاده قرار می‌‌گیرد. بر خلاف تگ <p> که تنها برای ایجاد پاراگراف مورد استفاده قرار می‌گیرد، تگ <div> می‌تواند چندین عنصر یا حتی بلوک را در خود جای دهد. برای ایجاد یک بلوک کدهای زیر را در داخل تگ <body> بنوسید.

<div id="header">Header</div>

بدین ترتیب یک بلوک با آیدی header ایجاد کردیم. کدهای زیر را در فایل CSS خود قرار دهید.

#header {
    width: 100%;
    background-color: blue;
    color: white;
    text-align: center;
    font-size: 30px;
}

طبق این کد، به بلوک Header ویژگی‌های عرض، رنگ پس زمینه، رنگ متن، چیدمان متن و سایز فونت داده شده است. قالب خود را رفرش کنید، خروجی به صورت زیر خواهد بود.

ویژگی float

حالا میخواهیم دو بلوک دیگر به قالب خود اضافه کنیم. به طوری که یک قالب دو ستونه داشته باشیم. برای این کار ابتدا باید یک بلوک به عنوان main ایجاد کنیم و داخل آن، دو بلوک دیگر ایجاد کنیم. برای این کار ابتدا به فایل html خود رفته و در ادامه کد قبلی کدهای زیر را قرار دهید.

<div id="main">
    <div class="right-box">right box</div>
    <div class="left-box">left box</div>
</div>

همانطور که می‌بینید داخل تگ <div> اصلی دو بلوک دیگر ایجاد کردیم و به هر کدام از آن‌ها یک کلاس تعریف کرده‌ایم. در ادامه به فایل CSS مراجعه کنید و کدهای زیر را در آن قرار دهید.

#main {
    float: right;
    width: 90%;
    margin-right: 5%;
}
.right-box {
    float: right;
    width: 70%;
    margin-top: 15px;
    background-color: #7aa0e6;
    color: black;
}
.left-box {
    float: left;
    width: 20%;
    margin-top: 15px;
    background-color: #deffbf;
    color: black;
}

ویژگی float نحوه شناور بودن بلوک را مشخص می‌کند. با استفاده از ویژگی width عرض قالب را ۹۰ درصد در نظر گرفتیم و margin-right را ۵ درصد قرار دادیم؛ از آن جایی که چیدمان بلوک main راست تعیین شده است بنابراین برای ایجاد فاصله از سمت راست باید از margin-right استفاده شود. در نهایت با توجه به سایز بلوک main، از هر طرف مرورگر، ۵ درصد فاصله وجود خواهد داشت.

در بلوک right-box ویژگی float را راست در نظر گرفتیم زیرا می‌خواهیم در سمت راست نمایش داده شود. عرض باکس را به دلخواه ۷۰ درصد قرار دادیم تا هنگام تغییر دادن سایز مرورگر یا در سیستم‌های مختلف به یک اندازه نمایش داده شود. همچنین رنگ پس زمینه و رنگ متن نیز تنظیم شده است. همه‌ی این موارد بر روی باکس سمت چپ نیز اعمال شده است با این تفاوت که ویژگی float را چپ قرار دادیم تا در سمت چپ نمایش داده شود. استفاده درست از کدهای CSS باعث خواهد شد تا نتیجه جالبی بگیرید.

آموزش سی اس اس CSS برای طراحی وب __ کلیک کنید

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

اضافه کردن تصویر به هدر

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

#header {
    width: 100%;
    height: 200px;
    background-image: url('red-flower-wallpapers.jpg');
    background-size: cover;
    background-position: top;
    color: white;
    text-align: center;
    font-size: 30px;
}

می‌توانید به جای آدرس موجود در url، آدرس یک تصویر را جایگزین نمایید. همانطور که می‌بینید به تصویر ویژگی ارتفاع با سایز ۲۰۰ پیکسل داده شده است. در ویژگی background-size نوع نمایش تصویر به صورت کاور (تمام صفحه به اندازه داخل باکس) تنظیم شده است؛ و در ویژگی background-position موقعیت شروع پس زمینه را تنظیم کرده‌ایم. تا به اینجای کار پیش‌نمایش قالب به این صورت خواهد بود:

اضافه کردن عنوان و محتوا به باکس راست

یک قالب ساده html قطعاً دارای پست نیز می‌باشد و پست هم به طور معمول دارای عنوان، متن، تاریخ و نام نویسنده است. بنابراین می‌خواهیم سه بلوک ایجاد کنیم و محتواهای لازم را در آن بنویسیم. برای اینکار ابتدا کدهای مربوط به باکس سمت راست را با کدهای قبلی جایگزین کنید.

<div class="right-box">
    <div class="post-title">عنوان پست مورد نظر</div>
    <div class="post-date">نویسنده : فاطمه اسماعیلی | تاریخ : ۱۴۰۰/۱۰/۸</div>
    <div class="post-content">
    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</p>
    <p>کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
    <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد.</p>
    <p>کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
    </div>
</div>

و برای استایل دهی به قالب کدهای زیر را به CSS خود اضافه کنید.

.post-title {
    padding-top: 25px;
    padding-right: 25px;
    padding-bottom: 5px;
    font-size: 24px;
    font-family: tahoma;
    font-weight: bold;
}
.post-date {
    padding-top: 5px;
    padding-right: 25px;
    padding-bottom: 5px;
    font-size: 15px;
    font-family: tahoma;
}
.post-content {
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 5px;
    text-align: justify;
    font-size: 18px;
    font-family: tahoma;
}

با استفاده از ویژگی padding فضای داخلی یک عنصر را تعیین می‌کنیم. این ویژگی دارای ۴ آیتم به صورت زیر می‌باشد:

padding-top
padding-right
padding-bottom
padding-left

این ویژگی‌ها را می‌توان به صورت خلاصه نیز نوشت. برای مثال: padding: 25px 50px 75px 100px. پیکسل‌های نوشته شده به ترتیب فاصله از بالا، راست، پایین و چپ را تعیین می‌کند. ویژگی font-weight ضخامت فونت را تعیین می‌کند و ویژگی text-align نوع چیدمان متن را تنظیم می‌کند که در این بخش justify اعمال کرده‌ایم.

آموزش طراحی وب با html اچ تی ام ال – تکمیلی __ کلیک کنید

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

اضافه کردن تصویر و منو به باکس چپ

تا بحال به وب سایت‌های مختلف دقت کرده‌اید، که چطور دارای باکس درباره وب و منوی سایت هستند؟ در این بخش از آموزش ساخت قالب ساده html می‌خواهیم به قالب خود ۶ بلوک اضافه کنیم. این بلوک‌ها شامل درباره وب، توضیح کوتاه، منو و محتوای منو خواهد بود.

برای ایجاد بلوک ها کدهای زیر را با کدهای باکس سمت چپ جایگزین کنید:

<div class="left-box">
<div class="about">
    <div class="about-web">درباره وب</div>
    <div class="about-content">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.</div>
</div>
<div class="menu">
    <div class="menu-web">منو</div>
    <div class="menu-content">
        <ul>
            <li>صفحه اصلی</li>
            <li>بلاگ</li>
            <li>تماس</li>
          </ul>
    </div>
</div>
</div>

و برای استایل دهی به باکس کدهای زیر را به CSS خود اضافه کنید.

.about-web {
    border-style: solid;
    border-width: 1px;
    padding: 10px;
    margin: 5px;
    font-size: 18px;
    font-family: tahoma;
    font-weight: bold;
}
.about-content {
    padding-right: 15px;
    padding-left: 15px;
    padding-bottom: 5px;
    text-align: justify;
    font-size: 18px;
    font-family: tahoma;
}
.menu-web {
    border-style: solid;
    border-width: 1px;
    padding: 10px;
    margin: 5px;
    font-size: 18px;
    font-family: tahoma;
    font-weight: bold;
}
.menu-content {
    padding-right: 25px;
    padding-left: 25px;
    padding-bottom: 5px;
    font-size: 18px;
    font-family: tahoma;
}

ویژگی border خط دور باکس را تعیین می‌کند. این ویژگی را می‌توان به صورت خلاصه نیز نوشت. برای مثال: border: 1px solid. پیکسل تعیین کننده ضخامت باکس و solid برای استایل کادر استفاده می‌شود. چنانچه می‌خواهید به صورت حرفه‌ای طراحی قالب را یاد بگیرید می‌توانید از مجموعه‌های آموزشی فرادرس استفاده کنید.

مجموعه آموزش طراحی سایت با html و CSS __ کلیک کنید

پیش‌نمایش قالب تا به اینجا بدین صورت است:

تنظیم رنگ پس زمینه و اضافه کردن سایه به قالب

برای زیبایی هرچه بیشتر قالب لازم است چند تغییرات در کدنویسی قالب انجام دهیم. برای مثال می‌توانیم رنگ پس زمینه باکس‌ها را تغییر دهیم و سایه اضافه کنیم. برای این کار به کلاس right-box و left-box مراجعه کنید و ویژگی background-color را به صورت زیر تغییر دهید.

background-color: #ffffec;

استفاده از رنگ مناسب موجب زیبایی قالب خواهد شد. به آیدی header و کلاس‌های right-box و left-box و about-web و menu-web مراجعه کنید و کد زیر را به آن‌ها اضافه کنید.

box-shadow: 0px 0px 10px 1px #636363;

ویژگی box-shadow به باکس سایه اضافه می‌کند که باعث زیبایی بیشتر قالب می‌شود. همچنین باعث می‌شود بخش‌های مختلف قالب از هم جدا شوند و واضح تر دیده شوند.

گرد کردن گوشه‌های قالب

گوشه های قالب نیاز دارند تا گرد شوند. بنابراین همانند سایه به به آیدی header و کلاس‌های right-box و left-box و about-web و menu-web مراجعه کنید و کد زیر را به آن‌ها اضافه کنید.

border-radius: 15px;

اگر می‌خواهید html را به صورت کامل یاد بگیرید پیشنهاد می‌کنیم حتماً مقاله آموزش html بصورت کامل همراه با مثال عملی (رایگان) را مطالعه نمایید. در نهایت قالب ساده html طراحی شده به این صورت خواهد بود:

سخن آخر در مورد آموزش ساخت قالب ساده html

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

فاطمه اسماعیلی

کارشناس رشته مهندسی حرفه‌ای کامپیوتر گرایش نرم افزار، متخصص بازاریابی محتوایی، کارشناس تولید محتوا، طراح و برنامه نویس فرانت اند، فعال در زمینه آموزش برنامه نویسی و راه اندازی سیستم‌های مدیریت محتوا، علاقه مند به زمینه‌های مرتبط با تکنولوژی و کامپیوتر و فعال در حوزه سئو اینستاگرام

مشاهده مقالات بیشتر نویسنده