معمولا هر صفحه وب با یک سرتیتر (عنوان) یا هدینگ شروع می شود. سرتیترهای اچ تی ام ال با تگ های <h1> تا <h6> تعریف می شود. لازم است بدانید هنگامی که تگ های عنوان در مرورگر نمایش داده می شوند، خود مرورگر یک خط را قبل و یک خط را بعد از آن اضافه می کنند.

اما چرا 6 تا تگ عنوان وجود دارد؟ هر سرتیتر دارای اهمیتی است، به عنوان مثال روزنامه ها. در روزنامه ها مهمترین تیتر را در صفحه اول و با اندازه فونتی بزرگ قرار می دهند. و دیگر سرتیترها را با توجه به اهمیتشان در قسمت های مختلف و در اندازه های متفاوت نمایش می دهند.

در اچ تی ام ال هم همینگونه است، جایی که سرتیتر <h1> قرار دارد مهمترین عنوان و جایی که تگ <h6> قرار دارد کمترین اهمیت را نشان می دهد.

تعداد استفاده از این تگ های عنوان در صفحات وب نامحدود است اما باید بسیار در به کاربردن آنها دقت کرد. تگ های <h2>, <h3>, <h4>, <h5> و <h6> هرکدام باید به تعداد مورد نیاز استفاده شوند.

مثال:

<!DOCTYPE html>

<html>

<head>

</title>تمرین عنوان ها<title>

<head/>

<body>

</h1>این مهم ترین سرتیتر است<h1>

</h2>این سرتیتر اولویت دوم است<h2>

</h3>این سرتیتر اولویت سوم است<h3>

</h4>این سرتیتر اولویت چهارم است<h4>

</h5>این سرتیتر اولویت پنجم است<h5>

</h6>این کم اهمیت ترین سرتیتر است<h6>

</body>

</html>

تمرین عنوان ها

تگ پاراگراف

پاراگراف ها یا همان عبارات متنی در اچ تی ام ال با تگ <p> تعریف می شوند. در واقع برای نوشتن عبارات متنی باید متن خودمان را در بین تگ باز و بسته p قرار دهید.

مثال:

<!DOCTYPE html>

<html>

<head>

<title>ایجاد پاراگراف در اچ تی ام ال</title>

</head>

<body>

<p>این یک پاراگراف یا عبارت متنی ساده است.</p>

<p>این یک عبارت متنی دیگر برای تست است</p>

<p>می توان با استفاده از این تگ پی عبارات را در صفحات وب نمایش داد</p>

</body>

</html>

نتیجه:

ایجاد پاراگراف HTML 

نکات جانبی درباره ی پاراگراف ها

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

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

ایجاد فاصله بدون شکست خط: &nbsp;

حفظ کامل فرمت متن: <pre>…</pre>

ایجاد خط افقی: <hr>

محل قرارگیری متن در وسط: <center>

شکست خط: <br />

از مهمترین تگ های اصلی اچ تی ام ال می توان موارد زیر را نام برد:

تصاویر و لینک ها

تصاویر در زبان اچ تی ام ال <img> تعریف می شوند، هر تگ آی ام جی دارای ویژگی هایی است (مانند متن جایگزین تصویر، آدرس تصویر و عرض و ارتفاع) که بعدا در مورد آنها صحبت خواهیم کرد.

مثال:

<!DOCTYPE html>

<html>

<head>

<title>مثال تصویر در صفحه وب</title>

</head>

<body>

<img src=”http://uupload.ir/files/kgwp_تصویر_اسب.jpg” alt=”تصویر اسب”>

</body>

</html>

نتیجه:

تصویر در HTML

لینک یا پیوند چیست؟ منظور از لینک همان اَبَرمتن است، با استفاده از لینک ها می توان صفحات وب را به هم پیوند داد.

به عنوان مثال شما در یک وبسایت وقتی برروی دانلود برنامه یا کتاب کلیک می کنید، در واقع برروی یک لینک یا پیوند کلیک می کنید که شما را به صفحه دانلود آن محصول می برد.

یا یک مثال ساده تر، وقتی در گوگل چیزی را جستجو می کنید هزاران و شاید میلیون ها نتیجه برای شما نمایش داده شود، هرکدام از این نتیجه هایی که گوگل به شما پیشنهاد می کند یک لینک است که شما را از گوگل به وبسایت مورد نظر پیوند می دهد.

لینک ها در زبان اچ تی ام ال با تگ <a>تعریف می شوند.

مثال:

<!DOCTYPE html>

<html>

<head>

<title>لینک ها در اچ تی ام ال</title>

</head>

<body>

<a href="https://www.google.com">گوگل</a>

</body>

</html>

نتیجه:

لینک 

هنگامی که برروی کلمه گوگل کلیک نماییم به وبسایت گوگل خواهیم رفت.

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


برچسب ها

HTML | CSS | جاوا اسکریپت | اس کیو ال | پی اچ پی | جی کوئری | ایکس ام ال | بوت استرپ | پایتون | جاوا | وب |
آخرین به روزرسانی این مطلب:

2019-04-05T09:54:42


پربازدیدترین

از اینجا می توانیدمحبوب ترین مطالب را مشاهده کنید