تگ span

تگ span برای متن های خیلی کوتاه استفاده می شود. در وا قع استفاده از عنصر span برای متمایز کردن قسمتی از متن توسط CSS بکار برده می شود. برای مثال فرض کنید که می خواهید در یک پاراگراف متنی بنویسید که هر بخش از آن یک رنگ متفاوت داشته باشد برای این کار می‌توانید همه را در یک تگ p بنویسید و بخش های متفاوت آن را با تگ span جدا کرده و به هر بخش استایل مربوط به خود را بدهید.

<p>تمام رنگ ها از سه رنگ اصلی <span style="color:red">قرمز</span><span style="color:green">سبز</span><span style="color:blue">آبی</span>تشکیل شده است.</p>

تمام رنگ ها از سه رنگ اصلی قرمزسبزآبیتشکیل شده است.


تگ div

تگ div از پر کاربردترین تگ ها در طراحی وب سایت میباشد، با استفاده از این تگ می توان قسمت های مختلف سایت را به لایه های مختلف تقسیم کرد . با بوجود آمدن تگ div این تگ جایگزین تگ Table در طراحی سایت برای لایه بندی سایت شد.

تگ div از پر کاربردترین تگ ها در طراحی وب سایت میباشد، با استفاده از این تگ می توان قسمت های مختلف سایت را به لایه های مختلف تقسیم کرد . با بوجود آمدن تگ div این تگ جایگزین تگ Table در طراحی سایت برای لایه بندی سایت شد.

از این تگ در طراحی سایت برای تعیین ساختار اصلی صفحات استفاده می شود. هنگامی که شما میخواهید به گروهی از تگ ها یک style بخصوص در css بدید می توانید تمام این تگ ها را در داخل یک تگ div قرار دهید و سپس به آن تگ div استایل مورد نظر را اعمال کنید تا استایل مورد نظر را برای تگ های داخل این تگ div را با بقیه سایت متمایز کنید(تگ div والد تگ های داخل خود می شود و تگ های داخل آن فرزندان آن می شوند).

<p>این یک متن آزمایشی می باشد</p>
<div style="color:green">
   <h3>متن آزمایشی هدر</h3>
   <p>این یک متن آزمایشی می باشد</p>
</div>

این یک متن آزمایشی می باشد

متن آزمایشی هدر

این یک متن آزمایشی می باشد

ووکامرس woocommerce چیست؟
شاید این مطلب را نیز بپسندید

تگ ul

از تگ ul و ترکیب آن با تگ li که گزینه های لیست در آن قرار می گیرد برای ایجاد لیست هایی که ترتیب برایمان اهمیتی ندارد استفاده می کنیم.

این تگ دارای خصوصیتی با نام type می باشد که علامت و نشانه های ما را در قسمت مورد نظر در طراحی سایت نمایش می دهد(Disk: برای نمایش دایره ی توپر کنار آیتم های لیست مورد نظر می شود – Circle: برای نمایش یک دایره توخالی کنار آیتم های لیست مورد نظر می شود – Square: برای نمایش مربع توپر کنار آیتم های لیست مورد نظر می شود – None: این خصوصیت باعث می شود هیچ علامتی در کنار لیست ما نشان داده نشود.

برای ایجاد لیست های ترتیبی بجای استفاده از ul از ol استفاده می کنیم .

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>Java script</li>
</ul>
  • HTML
  • CSS
  • Java script

تگ table

تگ table برای تقسیم بندی متن به چند بخش و جدول بندی سایت استفاده میشود. در گذشته جداول در HTML کاربرد بسیار زیادی داشتند تا حدی که بسیاری از سایت ها، قالب خود را به طور کامل بر مبنای جداول پیاده سازی می کردند. امروز دیگر طراحی قالب سایت بر مبنای جداول کاملا منسوخ شده است. اما جدول های HTML هنوز پر کاربرد هستند و کارایی خود را از دست نداده اند.

هر جدول میتواند شامل سربرگ جدول، ردیف ها و سلول های اطلاعات باشد.

  • سربرگ جداول که شامل عنوان مربوط به هر ستون می باشد را با تگ th مشخص میکنیم.
  • هر سطر(ردیف) را در جدول ها با tr مشخص می کنیم.
  • سلول های اطلاعات یا همان خانه های جدول را با td مشخص میکنیم.
<table width="100%" border="1">
   <tr>
      <th>First name</th>
      <th>Last name</th>
      <th>Age</th>
   </tr>
   <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>23</td>
   </tr>
   <tr>
      <td>Eve</td>
      <td>Jackson</td> 
      <td>37</td>
   </tr>
</table>
First name Last name Age
Jill Smith ۲۳
Eve Jackson ۳۷

خاصیت width برای تعیین عرض جدول و خاصیت border برای تعیین اندازه مرز بین خانه های جدول استفاده می شود.

تگ iframe

عبارت iframe مخفف inline frame است و کاربرد این تگ نمایش یک صفحه وب درون یک صفحه وب دیگراست وحکم یک تب را دارد ولی در قسمتی از صفحه جاری سایت به نمایش در می آید.

<iframe src="URL"></iframe>
<iframe src="https://www.designestan.com"></iframe>