آموزش طراحی وب سایت با HTML: آشنایی با block level and Inline Element

آموزش طراحی وب سایت با HTML: آشنایی با block level and Inline Element

جلسه پانزدهم: آشنایی با block level and Inline Element

 

آموزش طراحی وب سایت با Html

 

در HTML، تگ ها یا عناصر به دو صورت وجود دارند: Inline و Block Level

متن هایی که درون تگ هایی از نوع Inline ایجاد میشوند، در این نوع تگ ها، تمامی متن، پشت سر هم نوشته میشوند. به مثال زیر توجه کنید:

 

Inline Element

 

<div>Hello World <span class=”highlight”>inline element</span>;
Make is Silly Simple</div>

در مثال بالا، درون تگ <div> متن قرار میگیرد که در جلوتر بیشتر تگ <div> آشنا میشویم. درون این تگ، یک تگ دیگر وجود دارد به نام <span> وجود دارد که از نوع Inline میباشد. پروژه را ذخیره کنید و آن را به صورت یک فایل html ذخیره کنید.

 

Inline

اکنون میخواهیم با تگ های Block Level آشنا شویم. میخواهیم از همان مثال بالا استفاده کنیم. با این تفاوت که به جای استفاده از تگ <span> استفاده میکنیم. تگ <p> از نوع Block Line میباشد. متن هایی که درون تگ های Block Level قرار میگیرند، در خط بعد نوشته میشوند.

 

Block Level Element

 

<div>Hello World <p class=”highlight”>inline element</p>;
Make is Silly Simple</div>

پروژه را به صورت یک قایل HTML دخیره کنید. سپس فایل را باز کنید.

Block Element
تگ p از نوع Block level میباشد و چیدمان متن را تغییر میدهد.

اکنون این دو مثال را باهم مقایسه کنید تا متوجه تفاوت دو نوع تگ Inline و Block Level بشوید. به طور کلی، درون تگ های از نوع Inline،  میتواند فقط شامل متن یا سایر تگ های درون خظی باشد. اما نمیتوان تگ هایی از نوع block Level را درون تگ های Inline قرار داد.

 

تگ ها یا عناصر Inline: 

<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>

 

تگ ها و عناصر block line: 

<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ُ>
<secُtion>
<table>
<tfoot>
<ul>
<video>
در جلسه آینده، با تگ های <div> و <span> آشنا خواهیم شد.
محمد امین مکارم

مطالب مرتبط

دیدگاهها

نظر: