آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

0 دیدگاه

باسلام. با آموزش 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>

1	<a href="https://www.w3schools.com">This is a link</a>

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_link” target=”_blank”]پیش نمایش[/button]

آموزش کار با خصوصیت src اچ تی ام ال

تصاویر HTML با تگ <img> مشخص می‌شوند. نام فایل منبع تصویر در خصوصیت src مشخص می‌شود

 <img src="img_girl.jpg">

1	<img src="img_girl.jpg">

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_img_src” target=”_blank”]پیش نمایش[/button]

آموزش کار با خصوصیات عرض و طول در اچ تی ام ال

تصاویر در HTML دارای مجموعه‌ای از خصوصیات اندازه هستند که عرض و ارتفاع تصویر را مشخص می‌کند، اندازه تصویر به صورت پیکسل مشخص می‌شود مثلا width= “500” یعنی عرض تصویر ۵۰۰ پیکسل باشد.

 <img src="img_girl.jpg" width="500" height="600">

1	<img src="img_girl.jpg" width="500" height="600">

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_img” target=”_blank”]پیش نمایش[/button]

آموزش کار با خصوصیت alt در اچ تی ام ال

خصوصیت alt نشان‌دهنده متن جایگزین است که در صورت عدم توانایی مرورگر جهت نمایش تصویر باید به کار رود. مقدار این خصوصیت می‌تواند توسط صفحه‌خوان‌ها خوانده شود.

<img src="img_girl.jpg" alt="Girl with a jacket">

1	<img src="img_girl.jpg" alt="Girl with a jacket">

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_img_src” target=”_blank”/”]پیش نمایش[/button]

خصوصیت alt در زمانی که تصویری وجود نداشته باشد هم مفید است. در زیر مثالی را خواهید دید که در آن تلاش بر نمایش تصویری می‌شود که وجود ندارد:

<img src="img_typo.jpg" alt="Girl with a jacket">

1	<img src="img_typo.jpg" alt="Girl with a jacket">

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_alt_error” target=”_blank”/”]پیش نمایش[/button]

آموزش کار با خصوصیت style در Html

خصوصیت style برای مشخص کردن آرایش و استایل یک عنصر مثل رنگ، فونت، اندازه و سایر موارد به کار می‌رود در زیر یک نمونه از این خصوصیت خواهید دید

 <p style="color:red">I am a paragraph</p>

1	<p style="color:red">I am a paragraph</p>

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_style” target=”_blank”/”]پیش نمایش[/button]

آموزش کار با خصوصیت lang در Html

زبان سند را می‌توان در تگ <html> و با خصوصیت lang مشخص کرد. مشخص کردن زبان برای دسترسی‌پذیری اپلیکیشن‌ها (صفحه‌خوان) و موتورهای جستجو ضروری است

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>

<!DOCTYPE html>

<body>

...

</body>

</html>

دو حرف اول (en) زبان را مشخص می‌کند. اگر گویش خاصی مد نظر باشد با دو حرف دیگر (US) مشخص خواهد شد.

آموزش کار با خصوصیت title در Html

در اینجا خصوصیت title به عنصر <p> اضافه می‌شود. وقتی اشاره‌گر ماوس را روی پاراگراف قرار دهید، مقدار خصوصیت title به صورت یک تولتیپ (tooltip) نمایش داده خواهد شد:

 <p title="I'm a tooltip">
This is a paragraph.
</p>

This is a paragraph.

</p>

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_title” target=”_blank”/”]پیش نمایش[/button]

در Html از خصوصیات با حروف کوچک استفاده کنید

در استاندارد HTML5 نیازی به نوشتن نام خصوصیات با حروف کوچک نیست. خصوصیت عنوان را می‌توان با حروف کوچک (title) یا حروف بزرگ (TITLE) نوشت اما کنسرسیوم وب جهانی توصیه به استفاده از حروف کوچک در HTML می‌کند.

مقادیر خصوصیات را در علامت نقل قول قرار دهید

استاندارد HTML شما را مقید به قرار دادن مقادیر خصوصیات در داخل علامت نقل قول نمی‌کند اما بهتر است این کار را انجام دهید. خصوصیت href که در بالا آمد را می‌توان به صورت زیر نوشت

 <a href=https://www.w3schools.com>

1	<a href=https://www.w3schools.com>

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_attributes_noquotes” target=”_blank”/”]پیش نمایش[/button]

کنسرسیوم وب جهانی توصیه می‌کند در HTML از علامت نقل قول استفاده شود. گاهی لازم است از علامت نقل قول استفاده شود. مثال زیر خصوصیت title را به درستی نشان نمی‌دهد چون بین دو کلمه یک اسپیس خورده است. حذف علامت نقل قول می‌تواند منجر به بروز خطا شود

 <p title=About W3Schools>

1	<p title=About W3Schools>

نقل قول جفت یا تکی

استفاده از نقل قول جفتی پیرامون مقادیر خصوصیات HTML رایج‌ترین روش در این زبان است اما می‌توان از نقل قول تکی هم استفاده کرد. در بعضی از موقعیت‌ها وقتی مقدار یک خصوصیت خود حاوی نقل قول جفتی باشد لازم است که از نقل قول تکی استفاده کرد

<p title='John "ShotGun" Nelson'>

1	<p title='John "ShotGun" Nelson'>

و یا بالعکس

<p title="John 'ShotGun' Nelson">

1	<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>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

[button color=”green” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings” target=”_blank”/”]پیش نمایش[/button]

به یاد داشته باشید که مرورگرها به صورت خودکار قبل یا بعد از عنوان کمی فضای سفید اضافه می‌کنند.

توجه کنید عنوان ها بسیار مهم هستند

موتورهای جستجو از عنوان‌ها برای ایندکس کردن ساختار و محتوای صفحات وب سایت شما استفاده می‌کنند. کاربران از طریق عنوان‌هایی که برای صفحات خود انتخاب کرده‌اید به محتوای آن‌ها پی می‌برند. بنابراین باید از عناوینی استفاده کنید که ساختار سند شما را نشان دهند. عنوان‌های <h1> باید برای عناوین اصلی استفاده شده و به دنبال آن عنوان <h2> قرار گرفته و پس از آن به ترتیب عنوان‌های کم اهمیت‌تر <h3> و بقیه قرار خواهند گرفت. یادتان باشد که از عنوان‌های HTML برای بزرگ یا برجسته کردن متن استفاده نکنید.

عنوان های بزرگ تر

هر عنوان HTML دارای یک اندازه پیش‌فرض است. البته شما می‌توانید اندازه هر یک از عنوان‌ها را با خصوصیت style مشخص کنید که در زیر یک نمونه از آن را می‌بینید

 <h1 style="font-size:60px;">Heading 1</h1>

1	<h1 style="font-size:60px;">Heading 1</h1>

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings_size” target=”_blank”/”]پیش نمایش[/button]

آموزش ترسیم خط افقی در 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>

<h1>This is heading 1</h1>

<hr>

<h2>This is heading 2</h2>

<p>This is some other text.</p>

<hr>

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings_hr” target=”_blank”/”]پیش نمایش[/button]

آموزش عنصر <head> در HTML

عنصر <head> در HTML هیچ ارتباطی با عناوین HTML ندارد. این عنصر دربردارنده‌ی متا دیتا یا ابر داده است. ابرداده در واقع داده‌هایی در مورد آن سند HTML است که در صفحه وب سایت نمایش داده نمی‌شود. عنصر <head> بین تگ <html> و تگ <body> قرار می گیرد

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.

<!DOCTYPE html>

<html>

<head>

<title>My First HTML</title>

</head>

<body>

[button color=”red” url=”https://www.w3schools.com/html/tryit.asp?filename=tryhtml_headings_head” target=”_blank”/”]پیش نمایش[/button]

معمولا متا دیتا عنوان، مجموعه کاراکترها، استایل‌ها، لینک‌ها، اسکریپت‌ها و دیگر اطلاعات سند را تعریف می‌کند.

مشاهده سورس کد HTML یک وب سایت

تا به حال شده است یک صفحه از وب سایتی را مشاهده کرده و از خود بپرسید سازندگان آن چطور همه ‌آن کارها را کرده‌اند؟ کافی است روی صفحه مورد نظر کلیک راست کرده و گزینه «View Page Source» در مرورگر کروم یا «View Source» در اینترنت اکسپلورر و گزینه‌های مشابه در دیگر مرورگرها را انتخاب کنید. با این کار پنجره‌ای باز می‌شود که حاوی کد منبع HTML آن صفحه است. روی یک عنصر یا در یک ناحیه خالی کلیک راست کرده و گزینه «inspect» یا «inspect element» را انتخاب کنید تا ببینید عناصر از چه کدهایی (HTML و CSS) ساخته شده‌اند. همچنین می‌توانید به عنوان تمرین کدهای صفحه را برای خود تغییر داده و نتیجه را مشاهده کنید (این کدها در وب‌ سایت اصلی ذخیره نخواهند شد).

لیست جلسات قبل آموزش Html

آموزش اصول اولیه و عناصر HTML

آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

آموزش کار با پاراگراف و استایل در Html

آموزش کار با قالب بندی متن در Html

آموزش کار با کامنت در HTML

آموزش کار با کامنت در HTML

آموزش کار با رنگ ها در HTML

آموزش کار با تصاویر در HTML

آموزش کار با لینک در HTML

آموزش کار با جدول در HTML

آموزش کار با لیست ها در HTML

آموزش کار با عناصر Block و Inline در HTML

آموزش کار با عنصر Class در HTML

آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

آموزش کار با عنصر Head در HTML

آموزش Layout در HTML

آموزش طراحی سایت ریسپانسیو در HTML

آموزش عناصر کد کامپیوتر در HTML

آموزش موجودیت (Entities) در HTML

آموزش نمادها (Symbols) در HTML

آموزش کار با Character (کاراکترهای رزرو شده) در HTML

آموزش رمزگذاری URL در HTML

آموزش کامل کار با فرم ها در HTML

آموزش انواع ورودی (Input) در HTML

آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

5/5 - (3 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

صابر بوستانی

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

آموزش پروژه محور طراحی سایت با پایتون و جنگو مختص بازار کار

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۶ آبان ۱۳۹۷

آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

آموزش کار با خصوصیات(Attribute) در Html

آموزش کار با خصوصیت href در اچ تی ام ال

آموزش کار با خصوصیت src اچ تی ام ال

آموزش کار با خصوصیات عرض و طول در اچ تی ام ال

آموزش کار با خصوصیت alt در اچ تی ام ال

آموزش کار با خصوصیت style در Html

آموزش کار با خصوصیت lang در Html

آموزش کار با خصوصیت title در Html

در Html از خصوصیات با حروف کوچک استفاده کنید

مقادیر خصوصیات را در علامت نقل قول قرار دهید

نقل قول جفت یا تکی

آموزش کار با عنوان(Heading) در HTML

توجه کنید عنوان ها بسیار مهم هستند

عنوان های بزرگ تر

آموزش ترسیم خط افقی در HTML

آموزش عنصر <head> در HTML

مشاهده سورس کد HTML یک وب سایت

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط