آموزش ساخت وبسایت | ساخت وبسایت با HTML و CSS

182
0
آموزش ساخت وبسایت

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

آموزش ساخت وبسایت

این آموزش به سه بخش تقسیم می شود: Home  و Services  و  About. همچنین یک منوی پیمایش در بالا و یک فوتر در انتها اضافه می کنیم.

 بنابراین، بدون هیچ مقدمه ای، در اینجا نحوه ایجاد یک وب سایت از اولین قدم و با استفاده از HTML و CSS آورده شده است.

ساخت Navigation  و  Hero Section

 یک بخش <head> اضافه کنید تا به پروژه خود عنوان دهید.  یک فایل style.css  را لینک کنید و فونت روبیک را از فونت‌های Google با استفاده از تگ  <link> اضافه کنید.

تگ HTML Section: <head>

<head>

<meta charset=”UTF-8” />

<meta https-equiv=”X-UA-Compatible” content=”IE=edge” />

<meta name=”viewport” content=”width=device-width, initial-scale=1.0” />

<link rel=”preconnect” href=httpss://fonts.googleapis.com />

<link rel=”preconnect” href=httpss://fonts.gstatic.com crossorigin />

<link rel=”stylesheet” href=”style.css” />

<link

Href=httpss://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap

Rel=”stylesheet”

/>

<title>Pawfect</title>

</head>

یک بخش <body> اضافه کنید و اولین fold وب سایت خود را ایجاد کنید.  یک header class برای لوگو و منوی پیمایش اضافه کنید.  سپس، یک section-hero class  برای عنوان اصلی با توضیح مختصری از خدمات سایت اضافه کنید.

HTML Section: <body> <div class=”first-fold”>

<header class=”header”>

<a href=”#”>

<p class=”logo”>Pawfect🐾</p>

</a>

 

<nav class=”main-nav”>

<ul class=”main-nav-list” role=”navigation”>

<li><a class=”main-nav-link” href=”#services”>Our services</a></li>

<li><a class=”main-nav-link” href=”#about”>About Us</a></li>

<li>

<a class=”main-nav-link nav-cta”>Get a Quote</a>

</li>

</ul>

</nav>

</header>

 

<section class=”section-hero”>

<div class=”hero”>

<div class=”hero-text-box”>

<h1 class=”heading-primary”>

Pet Home Grooming Service in North Carolina

</h1>

<p class=”hero-description”>

Running out of time? Say no more. Veniome Pawfect ea fugiat itaque, aut unde ratione veniam ipsum temporibus cumque sunt nemo assumenda facere?

</p>

</div>

</div>

</section>

</div>

خروجی:

آموزش ساخت وبسایت
آموزش ساخت وبسایت

اکنون زمان استایل دادن به منویnavigation menu  و  hero section است.

شکل کلی CSS

 استایل کلی CSS را در بالای فایل style.css خود اضافه کنید.  Hero section دارای یک تصویر پس زمینه است.  می‌توانید به complete code از جمله تصاویر در GitHub دسترسی داشته باشید یا از تصویر خود استفاده کنید.

  • {

Margin: 0;

Padding: 0;

Box-sizing: border-box;

}

 

Html {

/* 10px / 16px = 0.625 =62.5*/ 

Font-size: 62.5%;

Overflow-x: hidden;

Scroll-behavior: smooth;

}

 

Body {

Font-family: ‘Rubik’, sans-serif;

Line-height: 1.5;

Font-size: 1.5rem;

Font-weight: 400;

Overflow-x: hidden;

Color: #523414;

Background-color: #e9be5a;

}

 

.heading-primary,

.heading-secondary,

.heading-tertiary {

Font-weight: 700;

Color: #523414;

Letter-spacing: -0.5px;

}

 

.heading-primary {

Font-size: 5.2rem;

Line-height: 1.05;

Margin-bottom: 3.2rem;

}

 

.heading-secondary {

Font-size: 4.4rem;

Line-height: 1.2;

Margin-bottom: 5.6rem;

Text-align: center;

}

 

.heading-tertiary {

Font-size: 3rem;

Line-height: 1.2;

Margin: 1.2rem;

}

 

A {

Text-decoration: none;

}

 

.first-fold {

Background-image: url(img/Pawfect-bg.png);

Min-height: 80rem;

}

استایل دهی به Navigation Bar

 از CSS flexbox برای تنظیم لوگو و منوهای پیمایش در یک ردیف استفاده کنید.  رنگ پس‌زمینه را روی شفاف تنظیم کنید و border-radius ۹ پیکسلی را به دکمه Call-To-Action (CTA) بدهید.

Navigation Bar CSS/* ****************** */ 

/* Logo */ 

/* ****************** */ 

 

.header {

Display: flex;

Justify-content: space-between;

Align-items: center;

Background-color: transparent;

Height: 9.6rem;

Padding: 0 4.8rem;

}

 

.logo {

Height: 2.2rem;

Font-size: 3.6rem;

Text-decoration: none;

Text-align: center;

Font-weight: bold;

Color: #462d12;

}

 

/* ****************** */ 

/* Navigation */ 

/* ****************** */ 

 

.main-nav-list {

List-style: none;

Display: flex;

Align-items: center;

Gap: 4.8rem;

}

 

.main-nav-link {

Display: inline-block;

Text-decoration: none;

Color: #462d12;

Font-weight: 400;

Font-size: 1.8rem;

}

 

.main-nav-link.nav-cta {

Padding: 1.2rem 2.4rem;

Border-radius: 9px;

Color: #fff;

Background-color: #523414;

}

خروجی:

آموزش ساخت وبسایت
آموزش ساخت وبسایت

Styling the Hero Section

 Max-width را روی hero class که عنوان و توضیحات اصلی را در خود جای داده است، تنظیم کنید.  در غیر این صورت، به جای قرار گرفتن در سمت چپ، تا انتها گسترش می یابد.  اندازه قلم و padding را با توجه به نیاز خود تنظیم کنید.

Hero Section CSS/* ****************** */ 

/* Hero section */ 

/* ****************** */ 

.section-hero {

Padding: 15rem 0 9.6rem;

}

 

.hero {

Max-width: 75rem;

Padding: 0 9.6rem;

Align-items: left;

}

 

.hero-description {

Font-size: 2rem;

Line-height: 1.6;

Margin: 4.8rem 0;

}

خروجی:

آموزش ساخت وبسایت
آموزش ساخت وبسایت

ساخت Services Section

 این سایت چهار نوع از خدمات را ارائه می دهد: full grooming, self serve dog wash, wash & blow dry,   و  body and paw massage.

 Services Section HTML

 یک class=”grid services” ایجاد کنید و هر چهار سرویس را با استفاده از <div> اضافه کنید.  تصویر، نام سرویس و توضیحات مختصری به آن اضافه کنید.

<section class=”our-services” id=”services”>

<div class=”container”>

<h2 class=”heading-secondary”>Our Services</h2>

<div class=”grid services”>

<div class=”first-service”>

<img src=”img/Full Grooming.jpg” />

<h3 class=”heading-tertiary”>Full Grooming</h3>

<p>Lorem ipsum consectetur adipisicing elit.</p>

</div>

<div class=”second-service”>

<img src=”img/Self Serve Dog Wash.jpg” />

<h3 class=”heading-tertiary”>Self Serve Dog Wash</h3>

<p>Odit aliquam dolor ex doloremque sed itaque.</p>

</div>

<div class=”thrid-service”>

<img src=”img/Wash & Blow Dry.jpg” />

<h3 class=”heading-tertiary”>Wash & Blow Dry</h3>

<p>Voluptatem suscipit ut omnis quas saepe.</p>

</div>

<div class=”fourth-service”>

<img src=”img/Body and Paw Massage.jpg” />

<h3 class=”heading-tertiary”>Body and Paw Massage</h3>

<p>Sapiente quos qui hic porro voluptatibus impedit.</p>

</div>

</div>

</div>

</section>

Services Section CSS

 یک شبکه با دو ستون مساوی ایجاد کنید و gap را روی 4rem  تنظیم کنید. آنها را در مرکز تنظیم کنید و عرض تصویر را روی ۸۰٪ اندازه اصلی تنظیم کنید.

/* ****************** */ 

/* Our Services */ 

/* ****************** */ 

.our-services {

Padding: 9.6rem 0;

}

 

.container {

Max-width: 120rem;

Margin: 0 auto;

Padding: 1.5rem 3.2rem;

}

.grid {

Display: grid;

Grid-template-columns: 1fr 1fr;

Gap: 4rem;

Align-items: center;

Justify-content: center;

Text-align: center;

}

.services img {

Width: 80%;

Border-radius: 9px;

}

خروجی:

آموزش ساخت وبسایت
آموزش ساخت وبسایت

ساخت About Section

About Section  دارای یک تصویر و یک کادر متنی با اطلاعات مختصری درباره تیم خواهد بود.

Create a <div> and place the image and the text inside it. 

<section class=”about” id=”about”>

<div class=”container”>

<div class=”grid grid-about about”>

<img src=”img/About.jpg” />

<div class=”text”>

<h2 class=”heading-secondary”>About Us</h2>

<p>

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas

Officiis, perferendis iure possimus dolor aspernatur incidunt rem

Ipsa, consectetur temporibus dolor ea? Tenetur nobis laboriosam

Dolor perspiciatis aspernatur incidunt rem placeat quis assumenda

Dicta!

</p>

</div>

</div>

</div>

</section>

 

About Section CSS

 تصویر و text-box را با استفاده از CSS Grid  ایجاد کرده و برای جذاب‌تر کردن آن، سایه‌ای اضافه کنید.  برای تنظیم کادر نوشتاری بالای تصویر از یک negative margin استفاده کنید.

/* ****************** */ 

/* About Us */ 

/* ****************** */ 

 

.grid-about {

Grid-template-columns: 1.2fr 0.8fr;

Gap: 0;

}

 

.about {

Padding: 2rem 0 7rem 0;

}

 

.about img {

Width: 98%;

Justify-self: end;

Border-radius: 9px;

}

 

.about p {

Font-size: 2.2rem;

}

 

.text {

Max-width: 45rem;

Background-color: #e7ac21;

Padding: 10rem 5rem;

Margin-left: -5rem;

Border-radius: 9px;

}

 

.text h2 {

Margin-bottom: 4.5rem;

Text-align: center;

}

خروجی:

آموزش ساخت وبسایت
آموزش ساخت وبسایت

Signing Off With a Footer

 پاورقی یک وب سایت تأثیر بسیار زیادی بر ذهن بازدیدکنندگان می گذارد، بنابراین از نظم و چشم نوازی آن اطمینان حاصل کنید.

 Footer HTML

 بهتر است در ابتدا از بازدیدکنندگان تشکر کنید. &copy یک موجودیت HTML برای نماد © است.

<footer>

<h1 class=”heading-primary”>Thank You For Visiting Pawfect🐾!</h1>

<p>&copy; Copyright 2022 Pawfect🐾</p>

</footer>

Footer CSS

 با انتخاب یک رنگ پس‌زمینه متفاوت و تنظیم padding مناسب، به فوتر استایل دهید.

/* ****************** */ 

/* Footer */ 

/* ****************** */ 

 

Footer {

Text-align: center;

Background-color: #e7ac21;

Padding: 2.5rem;

}

خروجی:

آموزش ساخت وبسایت
آموزش ساخت وبسایت

 تبریک می گویم، اکنون شما یک وب سایت کامل را با استفاده از HTML و CSS ایجاد کرده اید. وقت آن است که وب سایت خود را منتشر کنید و از بازدیدکنندگان بازخورد دریافت کنید.  امیدواریم از این فرآیند ساخت سایت لذت برده باشید.

 

امتیاز این مطلب
محسن دادار
نوشته شده توسط

محسن دادار

کارشناس سئو و تحلیل ارزهای دیجیتال ؛ علاقه مند به تکنولوژی و اخبار روز دنیای فناوری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

گوگل فارکس آموزش تخصصی آمارکتس