تو این جلسه از آموزش HTML میخوایم تگ ها رو در دو دسته بندی اصلی جا بدیم . دسته اول تگ های block و دسته دوم تگ های inline هستن. یعنی چی؟ تگ های بلاک یا همون تگ های block در HTML تگ هایی هستن که تمام عرض صفحه رو پوشش میدن و دسته بندی بعدی تگ های inline که معادل فارسی سختش میشه در خط ! تگ هایی هستن که داخل خود سطر یا همون خط ظاهر میشن. توضیح این المان ها سخت تر هستش تا مثال زدنش . ولی یه مثال کوچیک میزنیم که تگ p که بهتون یاد دادیم تا الان جز تگ های block هستش ولی تگ span که داخل تگ p یا همون تگ پاراگراف نوشته میشه جز تگ های inline حساب میشه .
چند مثال از تگ های block در HTML
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-
<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
در مقابل تگ های inline خط جدیدی برای ظاهر شدن درست نمیکنن و داخل همون خط معمولا ظاهر میشن . باز هم بگم که بستگی به CSS داره ولی داریم در مورد عموم و حالت های پیش فرض صحبت میکینم . یه نکته ای یادتون باشه که تگ های inline نباید داخلشون تگ های block رو استفاده کرد ولی برعکس موردی نداره !
در زیر هم نمونه کد های تگ inline رو آوردیم براتون :
چند مثال از تگ های inline در HTML
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
تگ div در HTML
یکی از پارکاربردترین تگ های در HTML تگ div یا همون division هستش . این تگ تقریبا تو هر خط کد شما باید تکرار بشه و ببینید تو همه وب سایت ها . کارش چیه !؟ یه مجموعه کدها رو داخلش جا میده و یه جورایی گروه بندی میکنه همه تگ ها رو. فرض کنین ما میخوایم یک طرف وب سایت لوگو داشته باشیم وسط منو و سمت راست هم دکمه ناحیه کاربری . تگ div به کمکمون میاد تا بتونیم یه مجموعه درست کنیم و بعد هم داخلش میایم سه تا تگ div دیگه میذاریم. داخل اون ها از سمت راست لوگو میذاریم- تو تگ بعدی منو رو میچینیم و تو تگ آخر هم دکمه ناحیه کاربری رو .
تگ div هیچ ویژگی الزامی نداره . اگر یادتون باشه تگ img حتما باید توش src رو درج میکردیم . ولی توی تگ div هیچی الزامی نیست . اما ! به ناچار مجبور هستید کلی ویژگی داخل این تگ بذارین و اون ویژگی ها هم عموما از ویژگی های class و id تشکیل میشه . در کل خیلی ویژگی باید اضافه کنین به این تگ تا بتونه عملیات رو که میخواین براتون انجام بده همینجوری الکی و خالی خالی که کار نمیکنه !
London
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>
تو مثال بالا داریم میبینیم که اومدیم یه تگ نوشتیم div و داخلش هم یه ویژگی style دادیم که بتونیم CSS بنویسیم . خود این تگ div هم شامل دو تا تگ زیر مجموعه هست که اولی h2 و دومی هم p هست . حالا اگر ما بیایم به div استایل بدیم که رنگ پس زمینه رو مشکی کن میبینیم که دو تا المان زیرش هم ازش تبعیت میکنن و رنگ مشکی میگیرن. به همین راحتی !
تگ span در HTML
این تگ ساخته شده بتونیم داخل تگ پاراگرفا یا همون p یه سری از کلمات یا جملات رو یه بلایی سرشون بیاریم ! یعنی مثلا رنگ یه کلمه رو عوض کنیم . بتونیم یه المان رو با CSS متفاوت جلوه بدیم از بقیه . قبلا هم گفتیم که این تگ خط جدیدی ظاهر نمیکنه و داخل همون تگ ظاهر میشه .
این تگ هم مثل تگ div هیچ الزاماتی نداره و میتونیم همینجوری بذاریم تو کد ولی عموما id و class رو بهش میدیم. حتی از style هم که تو جلسات قبلی یاد گرفتیم میشه توی همون تگ نوشت براش استفاده کرد . ولی توصیه نمیکنیم و الان فقط داریم HTML یاد میدیم و بعدا دیگه از این روش style نوشتن توی تگ ها خلاص میشین !
My mother has blue eyes and my father has dark green eyes.
<p>My mother has <span style="color:blue;font-weight:bold;">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold;">dark green</span> eyes.</p>
تو مثال بالا میبینیم که یه پاراگراف نوشته شده و داخلش کلمه blue رو آبی نوشتیم . این کا رو تو کد اگر ببینینن با تگ span انجام دادیم و بهش هم یه ویژگی استایل دادیم و کمی کدهای ظاهری CSS اضافه کردیم .
