آموزش Html؛ آموزش کار با عنصر نقل قول در HTML

در جلسه پنجم آموزش Html به زبان فارسی در خدمت شماییم با آموزش Html؛ آموزش کار با عنصر نقل قول در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید….

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

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

عنصر <q> مختص نقل قول‌ کوتاه

عنصر <q> در HTML یک نقل قول کوتاه (short quotation) را تعریف می‌کند. مرورگرها معمولا پیرامون این عنصر علامت نقل قول قرار می‌دهند. در زیر یک نمونه از آن را مشاهده می‌کنید.

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

عنصر <blockquote> مختص نقل قول ها

عنصر <blockquote> بخشی را تعریف می‌کند که از منبع دیگری نقل شده است (Quotation). مرورگرها معمولا آن را به صورت فرو رفته نشان می‌دهند :

 <p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

عنصر <abbr> مختص اختصارات

عنصر <abbr> مشخص کننده یک اختصار (Abbreviation) یا مخفف (Acronym) است. مشخص کردن اختصار می‌تواند اطلاعات مفیدی به مرورگرها، سیستم‌های ترجمه و موتورهای جستجو بدهد.

 <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

عنصر <address> در HTML مختص اطلاعات تماس

عنصر <address> اطلاعات تماس (نویسنده/ صاحب اثر) یک سند یا مقاله را مشخص می‌کند. این عنصر معمولا به صورت ایتالیک نمایش داده می‌شود. بیشتر مرورگرها قبل و بعد از این عنصر از شکست خطی استفاده می‌کنند.

 <address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

عنصر <cite> در HTML

برای عنوان شغلی عنصر <cite> عنوان یک شغل (work title) را تعریف می‌کند. مرورگرها معمولا این عنصر را به شکل ایتالیک نمایش می‌دهند.

 <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

عنصر <bdo> در HTML

برای لغو دو طرفه عنصر <bdo> نشان‌دهنده لغو دو طرفه (bi-directional override) است. این عنصر برای نادیده گرفتن مسیر فعلی متن مورد استفاده قرار می‌گیرد.

 <bdo dir="rtl">This text will be written from right to left</bdo>

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

1. آموزش اصول اولیه و عناصر HTML
2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش کار با پاراگراف و استایل در Html
4. آموزش کار با قالب بندی متن در Html
5. آموزش کار با کامنت در HTML
6. آموزش کار با کامنت در HTML
7. آموزش کار با رنگ ها در HTML
8. آموزش کار با تصاویر در HTML
9. آموزش کار با لینک در HTML
10. آموزش کار با جدول در HTML
11. آموزش کار با لیست ها در HTML
12. آموزش کار با عناصر Block و Inline در HTML
13. آموزش کار با عنصر Class در HTML
14. آموزش Html؛ آموزش iframe در HTML
15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
16. آموزش کار با عنصر Head در HTML
17. آموزش Layout در HTML
18. آموزش طراحی سایت ریسپانسیو در HTML
19. آموزش عناصر کد کامپیوتر در HTML
20. آموزش موجودیت (Entities) در HTML
21. آموزش نمادها (Symbols) در HTML
22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
23. آموزش رمزگذاری URL در HTML
24. آموزش کامل کار با فرم ها در HTML
25. آموزش انواع ورودی (Input) در HTML
26. آموزش خصوصیات ورودی در HTML

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

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

The post آموزش Html؛ آموزش کار با عنصر نقل قول در HTML appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.

آموزش 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= “500” یعنی عرض تصویر ۵۰۰ پیکسل باشد.

 <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

1. آموزش اصول اولیه و عناصر HTML
2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش کار با پاراگراف و استایل در Html
4. آموزش کار با قالب بندی متن در Html
5. آموزش کار با کامنت در HTML
6. آموزش کار با کامنت در HTML
7. آموزش کار با رنگ ها در HTML
8. آموزش کار با تصاویر در HTML
9. آموزش کار با لینک در HTML
10. آموزش کار با جدول در HTML
11. آموزش کار با لیست ها در HTML
12. آموزش کار با عناصر Block و Inline در HTML
13. آموزش کار با عنصر Class در HTML
14. آموزش Html؛ آموزش iframe در HTML
15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
16. آموزش کار با عنصر Head در HTML
17. آموزش Layout در HTML
18. آموزش طراحی سایت ریسپانسیو در HTML
19. آموزش عناصر کد کامپیوتر در HTML
20. آموزش موجودیت (Entities) در HTML
21. آموزش نمادها (Symbols) در HTML
22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
23. آموزش رمزگذاری URL در HTML
24. آموزش کامل کار با فرم ها در HTML
25. آموزش انواع ورودی (Input) در HTML
26. آموزش خصوصیات ورودی در HTML

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

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

The post آموزش Html؛ آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html appeared first on آموزش برنامه نویسی - یادگیری برنامه نویسی با طعم سورس باران.