تا کنون با تگ‌های متفاوتی آشنا شده‌اید. اکنون می‌خواهیم شما را با مفهوم بلاک و اینلاین در 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 را می‌زنیم و تمام. اکنون برنامه نصب است و می‌توانیم آن را باز کنیم و شروع به کدنویسی کنیم.
12 دیدگاه. Leave new
سلام خداقوت میگم به همه مدرسین مجرب سایت ابزار ورد پرس:
بنده یه پیشنهاد داشتم که اگر در قسمت دیدگاه ها قسمتی رو ایجاد کنید که بشود از ایراداتی که داریم اسکرین شات فرستاد و اینطوری خیلی راحت تر از توضیح شفاهی ایرادمون پیدا میشه و پاسخ داده می شود
من خودم در قسمت ایجاد کلاس دقیقا مثل کاری که استاد انجام دادن رو انجام دادم اما برام اعمال نمیشه نمیدونم مشکل از کجاست
سلام وقت شما بخیر،
از همراهی شما بسیار ممنونیم ، پیشنهاد شما به بخش مربوطه گزارش گردید.
با تشکر.
سلام خوبید خسته نباشید ،ببخشید میشه بگید چطور بخش طراحی css ساختید و استایل های خودتون رو اونجا انجام دادید چون من تو ویدیو ها اموزششو ندیدم ،یا اگر اشتباه میکنم بگید کودوم ویدیو هست چکش کنم چون چندبار برگشتم عقب و پیدا نکردم
سلام بر شما وقت بخیر
متوجه منظور شما نشدم، در ویدئو ها بخوبی همه چیز از ابتدا آموزش داده شده است.
اگر جلسات قبلی را مشاهده نکرده اید ، مشاهده نمایید.
با تشکر.
با سلام ممنون از شما
درود بر شما ، پیروز و سربلند باشید
با تشکر از بیان شیوا و زیبای شما سرکار خانم محرابی بنده بارها آموزش html و css رو خواستم ببینم در وبسایت های دگ ولی ادامه ندادم شما از بس خوب تدریس میکنید هم مشتاق تر شدم و خیلی هم خوب درک کردم بسیار ارزشمند بود از پروردگار برای شما آرزوی ثروت و سلامتی و سعادت دارم بانو
با آرزوی موفقیت برای شما .
خواهش میکنم ، معمولا در پوشه public_html قرار داده میشوند.
باتشکر