دسته ها
دسته‌ها
- php (1)
- امنیت (6)
- اندروید (3)
- اینترنت (2)
- برنامه نویسی (14)
- بوت استرپ (1)
- پایتون (1)
- تازه ها (22)
- ترفند ها (30)
- تکنولوژی های جدید (1)
- جاوا (2)
- جاوا اسکریپت (2)
- سئو (1)
- سخت افزار (4)
- صنعت بازی (1)
- صنعت رباتیک (1)
- طراحی وب (14)
- عکاسی (1)
- فضاهای ذخیره سازی (1)
- فلاتر (1)
- گوشی های هوشمند (1)
- متفرقه (1)
- موبایل (3)
- نرم افزار (17)
- هوش مصنوعی (4)
- وب (1)
- وردپرس (7)
- ویدئو های آموزشی (24)
عناصر اصلی در html
در درس قبل، با یک صفحه ساده از html شروع کردیم و دو تگِ تیتر و پاراگراف را در آن قرار دادیم. در این درس با موستانگ همراه شوید تا با عناصر اصلی یا به اصطلاح تگ های اصلی آشنا شویم.
معرفی عناصر اصلی در html
عناصر اصلی html عبارتند از:
- هدر متنی، که با استفاده از تگ های
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>نمایش داده می شود. - پاراگراف: که با تگ
<p>نشان داده می شود. - خط کش افقی: که با تگ
<hr>نشان داده می شود. - لینک: که با استفاده از تگ
<a>نشان داده می شود. - لیست: لیست مرتب شده با تگ
<ol>و لیست مرتب نشده با تگ<ul>و اعضای لیست با تگ<li>نمایش داده می شود. - عکس: که با تگ
<img>نشان داده می شود. - جدا کننده: که با استفاده از تگ
<div>نمایش داده می شود. - بلوک متنی: که با استفاده از تگ
<span>نمایش داده می شود.
به مرور با تک تک این عناصر html آشنا می شویم.
ویژگی ها یا attributes
هر عنصری می تواند مجموعه متفاوتی از ویژگی ها (attributes) را داشته باشد. تعداد محدودی از ویژگی های از قبل تعریف شده وجود دارد، که مهمترین آن ها عبارتند از:
- id: ID منحصر بفرد هر عنصر در صفحه را تعیین می کند که به وسیله آن می توان عناصر را پیدا کرد.
- class: کلاس CSS یک عنصر را مشخص می کند.
- style: استایل CSS مورد استفاده برای عنصر را مشخص می کند.
- data-x: یک ویژگی که اطلاعات خام مورد نیاز برای برنامه نویسی را نگهداری می کند.
هدرهای متنی و پاراگراف ها
6 نوع مختلف از هدر ها وجود دارد که می توانید انتخاب کنید، h1 که بالاترین هدر با درشت ترین اندازه متن را دارد و h6 که داخلی ترین هدر با کوچکترین اندازه متن است. در حالت کلی، در هر صفحه باید تنها یک تگ h1 داشته باشید، زیرا این تگ باید توصیفی اصلی برای این صفحه باشد.
همان طور که در درس قبلی دیدیم، یک پاراگراف بلوکی از متن است که از بقیه متون اطراف خود جدا شده است.
در زیر مثالی از تگ های <h1> ، <h2> و <p> را ببینید:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<h2>A secondary header.</h2>
<p>Some more text.</p>
</body>
</html>
خط کش افقی
تگ <hr>در واقع به عنوان جداکننده بین قسمت های یک صفحه عمل می کند.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>My First Page</h1>
<p>This is my first page.</p>
<hr/>
<p>This is the footer - all rights are reserved to me.</p>
</body>
</html>تمرین (عناصر اصلی: هدرها)
1. یک تگ <h1> با محتوای روبرو، به فایل html اضافه کنید: I’m the most important
2. یک تگ <h2> با محتوای روبرو، به فایل html اضافه کنید: I’m less important
3. یک تگ <h6> با محتوای روبرو، به فایل html اضافه کنید: I’m the least important
در نهایت
[*] در این درس، با تعدادی از مهمترین عناصر اصلی در html آشنا شدیم. در درس آینده با موستانگ همراه باشید تا باقی آن ها را نیز به شما معرفی نماید.
[*] پاسخ تمرین، سوالات و نظرات خود را می توانید در پایین این نوشته و در قسمت دیدگاه ها ثبت کنید. موستانگ از بازخوردهای شما استقبال خواهد کرد.
