آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
باسلام. با آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html در خدمت شما هستیم. این جلسه دومین جلسه دوره آموزش اچ تی ام ال می باشد و با خصوصیات Attribute و عناوین Heading بصورت کامل آشنا خواهید شد. لطفا با ما همراه باشید…
آموزش کار با خصوصیات(Attribute) در Html
Attribute یا خصوصیات HTML در واقع اطلاعات بیشتری در مورد عناصر HTML ارائه می‌دهند. تمام عناصر HTML می‌توانند دارای خصوصیت باشند. خصوصیات HTML همیشه در تگ آغازین مشخص شده و در جفت‌های نام/ مقدار (name=”value”) می‌آیند.
آموزش کار با خصوصیت href در اچ تی ام ال
همان‌طور که در درسنامه قبل گفتیم لینک‌های HTML با تگ تعریف می‌شوند. آدرس لینک مورد نظر در خصوصیت href مشخص می‌شود که در زیر یک نمونه از آن را می‌توانید ببینید
<a href="https://www.w3schools.com">This is a link</a>
پیش نمایش
آموزش کار با خصوصیت src اچ تی ام ال
تصاویر HTML با تگ <img> مشخص می‌شوند. نام فایل منبع تصویر در خصوصیت src مشخص می‌شود
<img src="img_girl.jpg">
پیش نمایش
آموزش کار با خصوصیات عرض و طول در اچ تی ام ال
تصاویر در HTML دارای مجموعه‌ای از خصوصیات اندازه هستند که عرض و ارتفاع تصویر را مشخص می‌کند، اندازه تصویر به صورت پیکسل مشخص می‌شود مثلا width= “۵۰۰” یعنی عرض تصویر ۵۰۰ پیکسل باشد.
<img src="img_girl.jpg" width="500" height="600">
پیش نمایش
آموزش کار با خصوصیت alt در اچ تی ام ال
خصوصیت alt نشان‌دهنده متن جایگزین است که در صورت عدم توانایی مرورگر جهت نمایش تصویر باید به کار رود. مقدار این خصوصیت می‌تواند توسط صفحه‌خوان‌ها خوانده شود.
<img src="img_girl.jpg" alt="Girl with a jacket">
پیش نمایش
خصوصیت alt در زمانی که تصویری وجود نداشته باشد هم مفید است. در زیر مثالی را خواهید دید که در آن تلاش بر نمایش تصویری می‌شود که وجود ندارد:
<img src="img_typo.jpg" alt="Girl with a jacket">
پیش نمایش
آموزش کار با خصوصیت style در Html
خصوصیت style برای مشخص کردن آرایش و استایل یک عنصر مثل رنگ، فونت، اندازه و سایر موارد به کار می‌رود در زیر یک نمونه از این خصوصیت خواهید دید
<p style="color:red">I am a paragraph</p>
پیش نمایش
آموزش کار با خصوصیت lang در Html
زبان سند را می‌توان در تگ <html> و با خصوصیت lang مشخص کرد. مشخص کردن زبان برای دسترسی‌پذیری اپلیکیشن‌ها (صفحه‌خوان) و موتورهای جستجو ضروری است
<!DOCTYPE html> <html lang="en-US"> <body> ... </body> </html>
دو حرف اول (en) زبان را مشخص می‌کند. اگر گویش خاصی مد نظر باشد با دو حرف دیگر (US) مشخص خواهد شد.
آموزش کار با خصوصیت title در Html
در اینجا خصوصیت title به عنصر <p> اضافه می‌شود. وقتی اشاره‌گر ماوس را روی پاراگراف قرار دهید، مقدار خصوصیت title به صورت یک تولتیپ (tooltip) نمایش داده خواهد شد:
<p title="I'm a tooltip"> This is a paragraph. </p>
پیش نمایش
در Html از خصوصیات با حروف کوچک استفاده کنید
در استاندارد HTML5 نیازی به نوشتن نام خصوصیات با حروف کوچک نیست. خصوصیت عنوان را می‌توان با حروف کوچک (title) یا حروف بزرگ (TITLE) نوشت اما کنسرسیوم وب جهانی توصیه به استفاده از حروف کوچک در HTML می‌کند.
مقادیر خصوصیات را در علامت نقل قول قرار دهید
استاندارد HTML شما را مقید به قرار دادن مقادیر خصوصیات در داخل علامت نقل قول نمی‌کند اما بهتر است این کار را انجام دهید. خصوصیت href که در بالا آمد را می‌توان به صورت زیر نوشت
<a href=https://www.w3schools.com>
پیش نمایش
کنسرسیوم وب جهانی توصیه می‌کند در HTML از علامت نقل قول استفاده شود. گاهی لازم است از علامت نقل قول استفاده شود. مثال زیر خصوصیت title را به درستی نشان نمی‌دهد چون بین دو کلمه یک اسپیس خورده است. حذف علامت نقل قول می‌تواند منجر به بروز خطا شود
<p title=About W3Schools>
نقل قول جفت یا تکی
استفاده از نقل قول جفتی پیرامون مقادیر خصوصیات HTML رایج‌ترین روش در این زبان است اما می‌توان از نقل قول تکی هم استفاده کرد. در بعضی از موقعیت‌ها وقتی مقدار یک خصوصیت خود حاوی نقل قول جفتی باشد لازم است که از نقل قول تکی استفاده کرد
<p title='John "ShotGun" Nelson'>
و یا بالعکس
<p title="John 'ShotGun' Nelson">
آموزش کار با عنوان(Heading) در HTML
عنوان یا Heading در HTML با تگ‌های <h1> تا <h6> تعریف می‌شوند. تگ <h1> مهم‌ترین عنوان و <h6> کم اهمیت‌ترین عنوان را مشخص می‌کنند. در نمونه زیر این ترتیب رعایت شده است
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
پیش نمایش
به یاد داشته باشید که مرورگرها به صورت خودکار قبل یا بعد از عنوان کمی فضای سفید اضافه می‌کنند.
توجه کنید عنوان ها بسیار مهم هستند
موتورهای جستجو از عنوان‌ها برای ایندکس کردن ساختار و محتوای صفحات وب سایت شما استفاده می‌کنند. کاربران از طریق عنوان‌هایی که برای صفحات خود انتخاب کرده‌اید به محتوای آن‌ها پی می‌برند. بنابراین باید از عناوینی استفاده کنید که ساختار سند شما را نشان دهند. عنوان‌های <h1> باید برای عناوین اصلی استفاده شده و به دنبال آن عنوان <h2> قرار گرفته و پس از آن به ترتیب عنوان‌های کم اهمیت‌تر <h3> و بقیه قرار خواهند گرفت. یادتان باشد که از عنوان‌های HTML برای بزرگ یا برجسته کردن متن استفاده نکنید.
عنوان های بزرگ تر
هر عنوان HTML دارای یک اندازه پیش‌فرض است. البته شما می‌توانید اندازه هر یک از عنوان‌ها را با خصوصیت style مشخص کنید که در زیر یک نمونه از آن را می‌بینید
<h1 style="font-size:60px;">Heading 1</h1>
پیش نمایش
آموزش ترسیم خط افقی در HTML
تگ <hr> یک شکست در متن موجود در صفحه HTML ایجاد می‌کند و اغلب به شکل یک خط افقی نمایش داده می‌شود. عنصر <hr> برای تفکیک محتوا (یا تعریف یک تغییر) در یک صفحه HTML به کار می‌رود. در زیر یک نمونه استفاده از این تگ را مشاهده خواهید کرد:
<h1>This is heading 1</h1> <p>This is some text.</p> <hr> <h2>This is heading 2</h2> <p>This is some other text.</p> <hr>
پیش نمایش
آموزش عنصر <head> در HTML
عنصر <head> در HTML هیچ ارتباطی با عناوین HTML ندارد. این عنصر دربردارنده‌ی متا دیتا یا ابر داده است. ابرداده در واقع داده‌هایی در مورد آن سند HTML است که در صفحه وب سایت نمایش داده نمی‌شود. عنصر <head> بین تگ <html> و تگ <body> قرار می گیرد
<!DOCTYPE html> <html> <head> <title>My First HTML</title> <meta charset="UTF-8"> </head> <body> . . .
پیش نمایش
معمولا متا دیتا عنوان، مجموعه کاراکترها، استایل‌ها، لینک‌ها، اسکریپت‌ها و دیگر اطلاعات سند را تعریف می‌کند.
مشاهده سورس کد HTML یک وب سایت
تا به حال شده است یک صفحه از وب سایتی را مشاهده کرده و از خود بپرسید سازندگان آن چطور همه آن کارها را کرده‌اند؟ کافی است روی صفحه مورد نظر کلیک راست کرده و گزینه «View Page Source» در مرورگر کروم یا «View Source» در اینترنت اکسپلورر و گزینه‌های مشابه در دیگر مرورگرها را انتخاب کنید. با این کار پنجره‌ای باز می‌شود که حاوی کد منبع HTML آن صفحه است. روی یک عنصر یا در یک ناحیه خالی کلیک راست کرده و گزینه «inspect» یا «inspect element» را انتخاب کنید تا ببینید عناصر از چه کدهایی (HTML و CSS) ساخته شده‌اند. همچنین می‌توانید به عنوان تمرین کدهای صفحه را برای خود تغییر داده و نتیجه را مشاهده کنید (این کدها در وب سایت اصلی ذخیره نخواهند شد).
لیست جلسات قبل آموزش Html
- آموزش HTML؛ آموزش اصول اولیه و عناصر HTML
The post آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html appeared first on آموزش برنامه نویسی.
