قالب بندی HTML و معناشناسی

قالب بندی HTML و معناشناسی


در این جلسه به فرمت های HTML و بخش های معنایی در اسناد HTML نگاهی اجمالی می اندازیم.

HTML ساختار سند (شامل همه ی عناصر HTML در صفحه) را فراهم می کند.

HTML همچنین معنایی از یک سند HTML را فراهم می کند. عناصر به طور کلی برای معنای خاص استفاده می شود. به عنوان مثال، تیتر درجه اوّل مهم تر از تیتر درجه دوّم است.

اکثر فرمت ها و ظاهر صفحات وب با استفاده از زبان CSS طراحی می شود. با این وجود، مرورگر برخی از عناصر HTML را به شیوه ای استاندارد و بدون نیاز به CSS قالب بندی می کند. بنابراین CSS تنها برای افزایش نمایش یک عنصر از روش پیش فرض مرورگر است.

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

تیترها

یک تگ خاص برای تعیین تیترها در HTML وجود دارد. 6 درجه تیتر وجود دارد که از <h1> به عنوان مهمترین تیتر و <h6> کم اهمیت ترین تیتر استفاده می شود.

این تیترها را مشاهده می کنید:

<h1>تیتر 1</h1>

<h2>تیتر 2</h2>

<h3>تیتر 3</h3>

<h4>تیتر 4</h4>

<h5>تیتر 5</h5>

<h6>تیتر 6</h6>

می توانید نتیجه را از طریق این لینک یعنی ویرایشگر آنلاین مشاهده کنید.

عنصر <strong>

اگر کلمه یا عبارتی از متن دارای اهمیت است می توانید با استفاده از عنصر <strong> آن را بزرگ و پررنگ کنید.

<!DOCTYPE html>

<title>آموزش اچ تی ام ال</title>

<p><strong>Strong:</strong> اهمیت قسمتی از متن</p>

نتیجه:

Strong: اهمیت قسمتی از متن

عنصر <em>

در برخی از مواقع روی قسمتی از متن تأکید می کنیم، برای تأکید متن در زبان HTML از عنصر <em> استفاده می شود.

<p>این متن مهم است و دارای<em>تأکید</em> می باشد

شکست خط

برای شکست خط یا رفتن به خط بعدی از عنصر <br> استفاده می شود.

<p>این یک متن است</p><br>

<p>این متن در خط بعدی نوشته می شود</p>

نکته ی حائز اهمیت این است که تا زمانی که شما از عنصر <br> استفاده نکنید، پاراگراف ها، یا متن ها و... همچنان در یک ستون نوشته می شوند و شکست خط ایجاد نمی شود. و نکته ی بعد اینکه محل قرارگیری <br> هرجا که باشد عنصر بعدی آن در خط بعد قرار می گیرد.

شکست موضوع یا خط افقی

شما می توانید با استفاده از عنصر <hr> یک خط افقی زیر پاراگراف ها یا دیگر عناصر ایجاد کنید. بنابراین، این عنصر اجازه می دهد موضوعات مختلف را به گروه های مختلف تقسیم کنیم.

در نسخه های اوّلیه HTML، این عنصر "خط افقی" نام داشت. با این حال، HTML5 معنای خاصی به آن داد (شکست موضوعی در سطح های پاراگراف).

<p>این یک موضوع مشخص است</p>

<p>این زیرموضوع اول است</p>

<hr>

<p>این یک موضوع مشخص دیگر است</p>

<hr>

<p>این یک موضوع مشخص سوم است</p>

لیست یا فهرست غیر-شمارشی

برای ایجاد لیست نامحدود (بدون عدد) از عنصر <ul> برای تعریف فهرست و از عصر <li> برای تعریف موارد درون لیست استفاده می شود.

مثال:

<ul>

<li>علی</li>

<li>حسن</li>

<li>حسین</li>

<li>سجاد</li>

</ul>

لیست شمارشی

برای ایجاد فهرست های شمارشی (دارای عدد) از عنصر <ol> برای تعریف فهرست و از عنصر <li> برای موارد لیست استفاده می شود.

<ol>

<li>اولین مورد</li>

<li>دومین مورد</li>

<li>سومین مورد

فهرست شمارشی یا غیرشمارشی؟

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

لیست شمارشی

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

به عنوان مثال، لیستی از دستورالعمل های گام به گام باید در لیست شمارشی قرار داده شود، اگر منظور از مراحل مهم باشد (به عنوان مثال مراحل دقیقا باید همانگونه که در لیست ارائه شده انجام شود).

مثال دیگر می تواند برای رتبه بندی باشدريال مانند لیست "10 غذای برتر ایران" در اینجور مواقع می توانید از لیست شمارشی استفاده کنید.

لیست غیرشمارشی

لیست نامحدود یا غیرشمارشی باید در مواقعی که نظم و ترتیب موارد مهم نیست مورد استفاده قرار گیرد. مثلا لیست مواد غذایی برای سایت های آشپزی معمولا غیرشمارشی است (تا زمانی که ترتیب مواد مهم نباشد).

لیست های شمارشی اغلب در قسمت ناوبری وب سایت برای نمایش آیتم های منو استفاده می شود. این لیست ها معمولا با CSS طراحی می شوند تا بیشتر از یک فهرست معمولا کاربرد داشته باشند.

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

جلسه قبل | جلسه بعد

تبلیغات در پایین ادامه ی مطلب

نظرات شما


    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی