اول نیوز
  • سخت افزار
    • لپ تاپ
    • گوشی موبایل
    • تبلت
    • هدفون و هندزفری
    • ساعت هوشمند
  • فناوری
    • اپلیکیشن
    • برنامه نویسی
    • ارزهای دیجیتال
    • شبکه های اجتماعی
  • خودرو
  • تحلیل گیم و فیلم و کتاب
    • فیلم و سریال
    • گیم
    • نقد و بررسی کتاب
    • کنسول های بازی
  • رویدادهای تکنولوژی
  • تبلیغات
بدون نتیجه
مشاهده تمام نتایج
اول نیوز
  • سخت افزار
    • لپ تاپ
    • گوشی موبایل
    • تبلت
    • هدفون و هندزفری
    • ساعت هوشمند
  • فناوری
    • اپلیکیشن
    • برنامه نویسی
    • ارزهای دیجیتال
    • شبکه های اجتماعی
  • خودرو
  • تحلیل گیم و فیلم و کتاب
    • فیلم و سریال
    • گیم
    • نقد و بررسی کتاب
    • کنسول های بازی
  • رویدادهای تکنولوژی
  • تبلیغات
بدون نتیجه
مشاهده تمام نتایج
اول نیوز
بدون نتیجه
مشاهده تمام نتایج
ارزی لند ارزی لند ارزی لند
صفحه اصلی برنامه نویسی

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

محسن دادار توسط محسن دادار
1 دی 1400
در برنامه نویسی
مدت زمان مطالعه: 11 دقیقه
0
آموزش ساخت وبسایت

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

اشتراک گذاری در فیسبوکاشتراک گذاری در توییتراشتراک گذاری در واتساپاشتراک گذاری در تلگراماشتراک گذاری با ایمیلاشتراک گذاری با بارکد

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

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

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

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

ساخت Navigation  و  Hero Section

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

تگ HTML Section: <head>

مرتبطپست های

افزایش بهره وری Visual Studio Code

10 نکته ضروری برای افزایش بهره وری Visual Studio Code

9 مهر 1402
0
مقایسه پایتون و جاوا

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

3 مهر 1402
0
زبان برنامه نویسی رو به انقراض

9 زبان برنامه نویسی رو به انقراض

3 مهر 1402
0
دبیان ۳۰ ساله شد

دبیان ۳۰ ساله شد

28 مرداد 1402
0
10 IDE برتر برای برنامه نویسان

10 IDE برتر برای برنامه نویسان: راهنمای جامع برای انتخاب بهترین IDE برای نیازهای شما

24 مرداد 1402
0
مقایسه توسعه نرم افزار و مهندسی نرم افزار

مقایسه توسعه نرم افزار و مهندسی نرم افزار: کدام مسیر شغلی برای شما مناسب است؟

8 مرداد 1402
0

<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 ایجاد کرده اید. وقت آن است که وب سایت خود را منتشر کنید و از بازدیدکنندگان بازخورد دریافت کنید.  امیدواریم از این فرآیند ساخت سایت لذت برده باشید.

 

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

محسن دادار

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

مرتبط پست ها

افزایش بهره وری Visual Studio Code
اپلیکیشن

10 نکته ضروری برای افزایش بهره وری Visual Studio Code

9 مهر 1402
0
مقایسه پایتون و جاوا
برنامه نویسی

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

3 مهر 1402
0
زبان برنامه نویسی رو به انقراض
برنامه نویسی

9 زبان برنامه نویسی رو به انقراض

3 مهر 1402
0

دیدگاهتان را بنویسید لغو پاسخ

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

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

شارژ حساب پی پال (PayPal) شارژ حساب پی پال (PayPal) شارژ حساب پی پال (PayPal)

لینک های مفید

پرداخت های بین المللی 

خرید ارزهای دیجیتال 

خرید رم سرور hp 

سخن سردبیر

واردات خودرو های کار کرده
خودرو

واردات خودرو های کار کرده به سود چه کسی تمام خواهد شد؟

توسط سهیل دهقانی
24 خرداد 1402
0
0

این روزها مجلس شورای اسلامی در تکاپوی تصویب طرحی بود که به واسطه آن خودروهایی که سه سال کار کرده...

ادامه مطلب
  • پرطرفدار
  • دیدگاه‌ها
  • اخیرا
بهترین سرور های ماینکرافت

بهترین سرور های ماینکرافت (Minecraft) در سال 2023

29 خرداد 1402
معرفی بهترین Seed ماینکرافت

معرفی بهترین Seed ماینکرافت | آشنایی با 13 تا از بهترین سید های ماینکرافت

24 شهریور 1400
01 کد تقلب ماینکرافت برای PC و نحوه ی فعال کردن آن

کد تقلب ماینکرافت برای PC و نحوه ی فعال کردن آن

13 شهریور 1400
معرفی بهترین مود های ماینکرافت برای PC با لینک دانلود

معرفی بهترین مود های ماینکرافت برای PC با لینک دانلود

22 آذر 1401
آموزش نصب مود ماینکرافت اندروید به صورت کامل و گام به گام

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

23 آذر 1401
بلوبانک چیست ؟ بانکی فاقد پیچیدگی‌های بانک‌های سنتی

بلوبانک چیست | بانکی فاقد پیچیدگی‌های بانک‌های سنتی

58
معرفی بهترین Seed ماینکرافت

معرفی بهترین Seed ماینکرافت | آشنایی با 13 تا از بهترین سید های ماینکرافت

12
بهترین سرور های ماینکرافت

بهترین سرور های ماینکرافت (Minecraft) در سال 2023

8
که چرا Witcher 2 بهتر از Witcher 3 عملکرده بود!

دلایلی که چرا Witcher 2 بهتر از Witcher 3 عملکرده است

6
معرفی بهترین مود های ماینکرافت برای PC با لینک دانلود

معرفی بهترین مود های ماینکرافت برای PC با لینک دانلود

5
مقایسه Garmin Fenix با اپل واچ

مقایسه Garmin Fenix با اپل واچ: کدام را باید بخرید؟

11 مهر 1402
بهترین اسکراب برای پرستاران

10 بهترین اسکراب برای پرستاران منحنی

11 مهر 1402
بهترین هدیه برای پرستاران

بهترین هدیه برای پرستاران

11 مهر 1402
اینترنت ماهواره ای آمازون چیست

اینترنت ماهواره ای آمازون چیست | پروژه کویپر

11 مهر 1402
بهترین بخاری های فضایی

بهترین بخاری های فضایی

11 مهر 1402

پرطرفدار.

ابزار پنهان در Adobe Illustrator

بیش از 30 ابزار پنهان در Adobe Illustrator که باید درباره آنها بدانید

18 آذر 1401
8
فیلم Rebel Moon

تصویر فیلم Rebel Moon زک اسنایدر منتشر شد

4 دی 1401
8
سریال سنت X

نقد و بررسی سریال سنت X | Saint X

18 اردیبهشت 1402
0
مقایسه کانن EOS R با RP

مقایسه کانن EOS R با RP: کدام بهتر است؟

12 آبان 1401
20
مشاهده فالوورهای مشترک در اینستاگرام

نحوه مشاهده فالوورهای مشترک در اینستاگرام

11 مهر 1401
10

لینک های مفید

شارژ حساب پی پال

خرید آنی ارزهای دیجیتال

آدرس دفتر: شیراز | باهنر شمالی | نبش کوچه ۱۲ | ساختمان مشکات | طبقه ۳ | واحد ۴

تلفن تماس:

۰۷۱۳۸۳۳۰۷۱۴–۰۷۱۳۸۳۳۷۳۴۰–۰۲۱۹۱۰۱۵۹۹۸

ایمیل: info@avalnews.com

مقایسه Garmin Fenix با اپل واچ

مقایسه Garmin Fenix با اپل واچ: کدام را باید بخرید؟

11 مهر 1402
بهترین اسکراب برای پرستاران

10 بهترین اسکراب برای پرستاران منحنی

11 مهر 1402
بهترین هدیه برای پرستاران

بهترین هدیه برای پرستاران

11 مهر 1402
  • درباره ما
  • تماس با ما

© 2022 تمامی حقوق مادی و معنوی متعلق به مجموعه اول نیوز می باشد.

بدون نتیجه
مشاهده تمام نتایج
  • صفحه اصلی
  • اختراعات و نوآوری
    • استارتاپ و کسب و کار
    • استارتاپ
    • تجربیات کارآفرینی
    • کسب و کار
    • مدیریت شرکت
    • معرفی استارتاپ داخلی
  • برنامه نویسی
  • تبلت
  • تحلیل گیم و فیلم
    • فیلم و سریال
    • گیم
  • شبکه های اجتماعی
  • ارزهای دیجیتال
  • سخت افزار
    • کنسول های بازی
    • گوشی موبایل
    • لپ تاپ

© 2022 تمامی حقوق مادی و معنوی متعلق به مجموعه اول نیوز می باشد.

خوش آمدید!

به حساب خود در زیر وارد شوید

رمز عبور را فراموش کرده اید؟

رمز عبور خود را بازیابی کنید

لطفا نام کاربری یا آدرس ایمیل خود را برای بازنشانی رمز عبور خود وارد کنید.

ورود به سیستم

افزودن لیست پخش جدید