شنبه ۳۱ شهريور ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش HTML - طرح بندی و استایل

HTML (زبان نشانه گذاری فرامتن) برای ایجاد ساختار یک صفحه وب استفاده می شود، در حالی که از CSS (Cascading Style Sheets) برای استایل و چیدمان عناصر در صفحه استفاده می شود. در اینجا چند مفهوم اساسی و کلی مربوط به طرح بندی و استایل HTML را بررسی می کنیم ، هدف از این درس این است که شما با عناوین ، روش کار و تعاریف کلی آشنا شوید . کاربرد و روش استفاده این مفاهیم به صورت کامل و با جزئیات در آموزش css آورده شده است :

  1. تگ های HTML: از تگ های HTML برای تعریف ساختار محتوا در صفحه استفاده می شود. به عنوان مثال، تگ <header> قسمت سرصفحه وب را مشخص می کند، در حالی که تگ <nav> قسمت ناوبری یا منوی آن را تعریف می کند.

  2. ویژگی های HTML: از ویژگی های HTML برای ارائه اطلاعات اضافی در مورد یک عنصر استفاده می شود. به عنوان مثال، ویژگی "class" برای اختصاص یک کلاس به یک عنصر استفاده می شود، که می تواند برای کنترل استایل استفاده شود.

  3. انتخابگرهای CSS: انتخابگرهای CSS برای انتخاب عناصر HTML و اعمال استایل بر روی آنها استفاده می شوند. به عنوان مثال، انتخابگر "h1" تمام عناصر <h1> صفحه را انتخاب می کند.

  4. ویژگی های CSS: از ویژگی های CSS برای تعریف ظاهر و استایل یک عنصر HTML استفاده می شود. به عنوان مثال، از ویژگی "color" برای تعیین رنگ متن استفاده می شود.

  5. Box Model: مدل جعبه برای توصیف طرح بندی یک عنصر HTML استفاده می شود. از قسمت area، padding، border و margin تشکیل شده است.

  6. Display Property: از ویژگی display برای تعریف نحوه نمایش یک عنصر HTML استفاده می شود. به عنوان مثال، مقدار "block" باعث می شود یک عنصر تمام عرض محفظه اصلی خود را بگیرد، در حالی که مقدار "inline" اجازه می دهد تا یک عنصر به صورت درون خطی با عناصر دیگر نمایش داده شود.

  7. تکنیک های چیدمان: تکنیک های چیدمان مختلفی در HTML و CSS استفاده می شود، مانند floats، flexbox و grid. این تکنیک ها به توسعه دهندگان این امکان را می دهد که طرح بندی های پیچیده ای برای صفحات وب خود ایجاد کنند.

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

استایل دهی با CSS

CSS مخفف عبارت Cascading Style Sheets است. CSS زبانی است که برای تعریف ظاهر و نمای یک سند HTML استفاده می شود. CSS به شما امکان می دهد طرح بندی، رنگ ها، فونت ها و سایر جنبه های بصری صفحه وب خود را کنترل کنید.

در CSS، انتخابگرها برای هدف قرار دادن عناصر خاص HTML و اعمال استایل ها به آنها استفاده می شوند. از اعلان ها برای تعریف سبک هایی استفاده می شود که باید برای عنصر انتخاب شده اعمال شوند. یک اعلان شامل یک ویژگی و یک مقدار است که با دو نقطه از هم جدا شده اند. به عنوان مثال، اعلان زیر ویژگی رنگ را قرمز تنظیم می کند:

color: red;

انتخابگرها و اعلان ها می توانند برای ایجاد قوانین CSS ترکیب شوند. به عنوان مثال، قانون زیر رنگ تمام عناصر <p> را قرمز تنظیم می کند:

p {
    color: red;
}

روش های مختلفی برای اعمال سبک های CSS در عناصر HTML وجود دارد. یک راه این است که با استفاده از تگ <style>، استایل ها را مستقیماً در سند HTML قرار دهید. مثلا:

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
<body>
    <p>این پاراگراف قرمز خواهد بود.</p>
</body>

راه دیگر این است که استایل ها را در یک فایل CSS خارجی قرار دهید و با استفاده از تگ <link> به آن در سند HTML پیوند دهید. مثلا:

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p>این پاراگراف بر اساس قوانین موجود در styles.css استایل بندی می شود.</p>
</body>

در فایل CSS خارجی (styles.css)، می توانید قوانین CSS را برای اعمال سبک ها به عناصر HTML تعریف کنید:

p {
    color: red;
}

همچنین می‌توانید با استفاده از انتخابگرهای کلاس و شناسه، استایل‌ها را برای عناصر HTML خاص اعمال کنید. مثلا:

<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p class="important">این پاراگراف قرمز و پررنگ خواهد بود.</p>
    <p id="intro">این پاراگراف آبی و مورب خواهد بود.</p>
</body>

در فایل CSS، می توانید از انتخابگرهای کلاس و شناسه برای هدف قرار دادن این عناصر و اعمال سبک ها استفاده کنید:

.important {
    color: red;
    font-weight: bold;
}

#intro {
    color: blue;
    font-style: italic;
}

چیدمان با HTML

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

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

از تگ <aside> برای تعریف محتوایی استفاده می شود که با محتوای اصلی مرتبط است، اما جزو آن محسوب نمی شود. این تگ اغلب برای سایدبارها یا تبلیغات استفاده می شود.

در اینجا مثالی از نحوه استفاده از این برچسب ها در یک طرح بندی صفحه وب ساده آورده شده است:

<!DOCTYPE html>
<html>
<head>
	<title>مثال صفحه وب ساده </title>
	<style>
		body {
			margin: 0;
			padding: 0;
		}

		header {
			background-color: #333;
			color: #fff;
			padding: 20px;
		}

		nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		nav ul {
			list-style: none;
			margin: 0;
			padding: 0;
			display: flex;
		}

		nav li {
			margin: 0 10px;
		}

		nav a {
			color: #fff;
			text-decoration: none;
		}

		section {
			padding: 20px;
			margin: 20px 0;
			border: 1px solid #ccc;
		}

		article {
			margin: 20px 0;
		}

		aside {
			padding: 20px;
			background-color: #f2f2f2;
			border: 1px solid #ccc;
		}
	</style>
</head>
<body>
	<header>
		<div class="logo">لوگو</div>
		<nav>
			<ul>
				<li><a href="#">صفحه اصلی</a></li>
				<li><a href="#">درباره</a></li>
				<li><a href="#">تماس با ما</a></li>
			</ul>
			<div class="search-bar">
				<input type="text" placeholder="Search...">
				<button>جستجو کردن</button>
			</div>
		</nav>
	</header>
	<section>
		<h1>بخش 1</h1>
		<article>
			<h2>مقاله 1</h2>
			<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، </p>
		</article>
		<article>
			<h2>ماده 2</h2>
			<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است، </p>
		</article>
	</section>
	<aside>
		<h2>نوار کناری</h2>
		<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده از طراحان گرافیک است،. </p>
	</aside>
</body>
</html>

این مثال یک سند HTML است که ساختار و سبک یک صفحه وب ساده را تعریف می کند. این مثال شامل موارد زیر است:

  • یک اعلان نوع سند (<!DOCTYPE html>) که نسخه HTML مورد استفاده را مشخص می کند.
  • یک تگ باز و بسته <html> که کل سند را محصور می کند.
  • یک بخش <head> که حاوی ابرداده در مورد سند و پیوندهایی به منابع خارجی می باشد.
  • یک تگ <title> که عنوان صفحه را مشخص می کند که در نوار عنوان مرورگر ظاهر می شود.
  • یک تگ <style> که حاوی قوانین CSS برای استایل دادن به عناصر سند است.
  • یک تگ <body> که محتوای صفحه را محصور می کند.

قوانین CSS برای تعریف چیدمان و استایل عناصر صفحه استفاده می شود. در اینجا خلاصه ای از قوانین استفاده شده است:

  • قانون body، حاشیه‌ها و padding را روی 0 تنظیم می‌کند تا فاصله‌های پیش‌فرض در اطراف لبه‌های صفحه حذف شود.
  • قانون header یک رنگ پس زمینه خاکستری تیره و رنگ متن سفید را تنظیم می کند و به بالا و پایین عنصر اضافه می کند.
  • قانون nav خصوصیت نمایش را روی فلکس تنظیم می کند تا یک طرح بندی انعطاف پذیر برای عنصر ناوبری ایجاد کند و موارد را در مرکز با فضای مساوی بین آنها تراز کند.
  • قانون nav ul سبک لیست را روی هیچ تنظیم می کند و هر گونه حاشیه و padding را از لیست نامرتب که حاوی پیوندهای پیمایش است حذف می کند.
  • قانون nav li یک حاشیه 10 پیکسلی بین پیوندهای ناوبری تعیین می کند.
  • قانون nav a رنگ متن را سفید می کند و زیر خط را از لینک ها حذف می کند.
  • قانون بخش، padding و حاشیه را به بالا و پایین بخش اضافه می کند و یک حاشیه 1 پیکسلی در اطراف عنصر تعیین می کند.
  • قانون article یک حاشیه 20 پیکسلی بین مقالات تعیین می کند.
  • قانون aside ، پدینگ و رنگ پس‌زمینه را برای عنصر کناری تنظیم می‌کند و یک حاشیه 1 پیکسلی در اطراف عنصر اضافه می‌کند.

در بخش بدنه HTML از عناصر زیر برای ایجاد محتوای صفحه استفاده می شود:

  • یک عنصر <header> که حاوی یک لوگو و یک نوار پیمایش با پیوندهایی به صفحه اصلی، درباره، و تماس است.
  • یک عنصر <section> که شامل دو عنصر <article> است. هر مقاله شامل یک عنوان و یک پاراگراف متن است.
  • یک عنصر <aside> که شامل یک عنوان و یک پاراگراف از متن است.

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

  ویژگی های ورودی ها - درس قبلی
درس بعدی - بلوک ها