آشنایی با مفهوم بلاک، اینلاین، آیدی و کلاس در HTML

( یکشنبه ، 6 خرداد سال 1403 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه ششم

آموزگار :

آرزو محرابی

منظور از مفهوم بلاک (Block) و اینلاین (inline) در زبان نشانه گذاری اچ تی ام ال چیست ؟ چه تفاوتی میان مفاهیم بلاک و اینلاین در زبان HTML وجود دارد ؟ آشنایی با آیدی و کلاس و کاربرد آن ها در زبان نشانه گذاری HTML ( ادامه مطلب … )

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

ابزار وردپرس بُزرگ ترین مرجع وردپرس ایران!

آنچه توانسته ایم لطف خدا بوده است ، ابزار وردپرس بعنوان یکی از مراجع بزرگ طراحی وب و وردپرس در حال فعالیت می باشد 🙂

اورجینال

کیفیت

پشتیبانی

آپدیت

آرزو محرابی

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

آرزو محرابی

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

آشنایی با مفهوم بلاک، اینلاین، آیدی و کلاس در HTML

( یکشنبه ، 6 خرداد سال 1403 )

تا کنون با تگ‌های متفاوتی آشنا شده‌اید. اکنون می‌خواهیم شما را با مفهوم بلاک و اینلاین در HTML آشنا کنیم. برخی از عناصر مانند عنصر <p></p> بلاک هستند. اما تعریف بلاک بودن چیست؟

بعضی اوقات ما از تگ‌هایی مانند p استفاده می‌کنیم و وقتی به خروجی آن دقت می‌کنیم، متوجه می‌شویم که متن ما به عنوان پاراگراف در خط جدید ایجاد شده است، بدون آنکه ما از تگ <br/> برای رفتن به خط جدید استفاده کنیم. یعنی به صورت خودکار در خط جدید ایجاد می‌شود. اگر شما تنها یک کلمه را درون تگ  p قرار دهید و سپس به تگ p استایل پس زمینه رنگی بدهید، متوجه خواهید شد که تمام خطی که آن یک کلمه درونش وجود دارد، رنگی شده است؛ یعنی با اینکه شما فقط یک کلمه درون تگ p نوشته اید اما تمام خط پس زمینه ی رنگی گرفته است درواقع این ویژگی دیگر عناصر بلاک است.

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

<h1>…<h6> , <ol> , <ul> , <li> , <dl> ,<dd> , <dt> ,<nav> , <pre> , <form>

بر خلاف عناصر بلاک، عناصر اینلاین در خط جدید ایجاد نمی‌شوند و تنها به اندازه خودشان فضا را اشغال می‌کنند. برخی از این عناصر عبارتند از:

<a>, <span> , <img> , <small> , <small> , <sup> , <sub> , <i> , <em> , <b> , <strong>

کلاس (class) و آیدی (id) در HTML

حال به سراغ مفهوم کلاس و آیدی می‌رویم. کلاس یک اتربیوت است که کاربرد بسیار مهمی دارد.

می‌توانیم از اتربیوت class استفاده کنیم. ساختار این اتربیوت به صورت زیر است:

Class=” ”

می‌توانیم این ساختار را در هر تگی که می‌خواهیم قرار دهیم و برای آن اسمی به عنوان مقدار تعیین کنیم. سپس با استفاده از کلاس، استایل‌های مشابهی را به تمام عناصری که دارای کلاس مشابه هستند بدهیم. بعد از اینکه برای  تگ‌های مورد نظر کلاس تعیین کردیم، می‌توانیم درون تگ head تگ <style></style> را قرار دهیم و درون تگ style اسم کلاس را همراه با علامت . (نقطه) به کار ببریم و هر استایلی مانند تغییر رنگ، اندازه و… را برای آن‌ها بنویسیم. به مثال زیر دقت کنید:

<html>

<head>

<style>

.etemad {

Color:blue;

Background-color:red;

}

</style>

<body>

<h2 class=”etemad”>راه‌های افزایش اعتماد به نفس</h2>

<p class=”etemad”> خودتان را بیشتر بشناسید</p>

<p>با دیگران ارتباط برقرار کنید</p>

</body>

</head>

نکته قابل توجهی که وجود دارد این است کلاس‌ها نسبت به حروف کوچک و بزرگ حساس هستند و مقدار آن‌ها نباید خالی بماند و حتما باید اسمی را بنویسیم. مثلا در مثال بالا ما کلمه etemad را نوشته‌ایم و این مقدار نباید با عدد شروع شود.

آیدی نیز کاربردی مشابه با کلاس دارد با این تفاوت که آیدی منحصر به فرد است و نمی‌توان به دو یا چند تگ یک آیدی مشابه داد. برای استفاده از آیدی در تگ استایل  از علامت # استفاده می‌کنیم. نکاتی که در بالا گفته شد برای آیدی‌ها نیز صادق است و باید آن‌ها را رعایت کرد.

نصب و راه اندازی برنامه VS Code

حال به سراغ نصب و راه اندازی برنامه ی دوست داشتنی visual code می‌رویم. و برای نوشتن و اجرای دستورات از آن استفاده می‌کنیم. کد نویسی با این برنامه بسیار راحت و لذت بخش است.

برای اینکار ابتدا وارد مرورگر می‌شویم و visual code را جستجو می‌کنیم. می‌توانیم از سایت اصلی vs code و یا هر سایت دیگری مثل سایت soft98 دانلود کنیم و بعد آن را نصب کنیم. برای نصب کافی است فایل فشرده شده را اکسترکت کنیم، یعنی روی فایل کلیک راست می‌کنیم و گزینه ی extract file را کلیک کنیم. سپس اگر نیاز به وارد کردن رمز ورود باشد آن را وارد کنیم (از سایتی که آن را دانلود کرده ایم می‌توانیم رمز را کپی کنیم) وسپس گزینه ی ok. با انتخاب گزینه ی قوانین را می‌پذیرم به سراغ گزینه ی next می‌رویم و باز هم گزینه یnext  را می‌زنیم. در این مرحله چندین گزینه وجود دارد که می‌توانیم به دلخواه خود هر کدام را که می‌خواهیم فعال کنیم.

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

گزینه دوم یعنی می‌خواهیم گزینه vs code به منویی که با راست کلیک کردن روی فایل برای باز کردن آن ایجاد می‌شود، اضافه کنیم.

گزینه بعدی نیز مانند گزینه بالا است، با این تفاوت که برای پوشه این اتفاق بیفتد.

گزینه بعدی برای حالتی است که می‌خواهیم هرگاه فایلی را که دوبار کلیک کردیم تا باز شود، به صورت خوکار با vs code باز شود.

گزینه آخر که مهم ترین گزینه است، به این منظور است که می‌خواهیم فایل اجرایی vs code در مسیر path ویندوز قرار بگیرد، پس آن را حتما فعال می‌کنیم.

سپس گزینه ی next و install و درنهایت finish را می‌زنیم و تمام. اکنون برنامه نصب است و می‌توانیم آن را باز کنیم و شروع به کدنویسی کنیم.

برای نوشتن دیدگاه باید وارد بشوید.

6 دیدگاه. Leave new

فهرست