HTML
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"]
HTML[/caption]
نقل قول و استناد
به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<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>
</body> </html> |
گروه WWF یکی از گروه های فعال محیط زیستی است که با کمک مردم دنیا سعی در حفظ طبیعت این کره ی خاکی را دارد و متن بالا قسمتی از توضیح وب سایت خودشان در این مورد است. از آن جایی که ما عیناً نوشته ی وب سایت آن ها را برداشته و کپی کرده ایم باید آن را به صورت نقل قول بیاوریم تا مشخص شود که متعلق به ما نیست. اگر به خروجی این کد دقت کنید متوجه می شوید که قسمت نقل قول شده کمی جلوتر از قسمت های دیگر است و این استایل پیش فرض HTML در مورد نقل قول ها است.(ایران گستر )
بیایید تگ های آن را بررسی کنیم.
تگ <q>
تگ <q> مخفف quotation یا نقل قول است و وظیفه اش مشخص کردن نقل قول های مختصر و کوتاه است. اگر از این تگ استفاده کنید معمولا مرورگرها محتوایش را بین دو علامت Quotation (“) قرار می دهند. مثال:(ایران گستر )
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body> </html> |
معمولا نقل قول هایی که از این قبیل هستند بسیار کوتاهند (در حد یک جمله یا کمتر) اما اگر بخواهیم قسمت طولانی تری را نقل کنیم چطور؟(ایران گستر )
تگ <blockquote>
تگ <blockquote> در زبان HTML وظیفه ی استناد و نقل قول قسمت کاملی از متن را دارد و مرورگرها معمولا آن را indent (جلوتر قراردادن نسبت به بقیه ی متن) می کنند. مثال:(ایران گستر )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<p>Browsers usually indent blockquote elements.</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>
</body> </html> |
همانطور که می بینید در این نوع از نقل قول ها، متن طولانی تر است و تقریبا یک پاراگراف را شامل می شود.
نکته: شما می توانید با استفاده از CSS ظاهر انواع نقل قول ها را تغییر دهید بنابراین نگران ظاهر آن ها نباشد. دلیل اصلی استفاده از این تگ ها، مبحث semantic (کدنویسی معنایی) است که برای موتورهای جستجو اهمیت دارد.(ایران گستر )
تگ <abbr>
تگ <abbr> مخفف abbreviation و به معنی کلمات مخفف است. به طور مثال کلماتی که شکل اختصاری آن ها به کار می رود و یا سرواژه ها در این دسته قرار می گیرند. شما می توانید با استفاده از این تگ اعلام کنید که فلان کلمه ی متن یک سرواژه است یا مخفف عبارت خاصی است:(ایران گستر )
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>
</body> </html> |
نکته: همانطور که در کد بالا مشاهده می کنید ما به این تگ attribute ای به نام title داده ایم تا اگر کاربر معنی مخفف را ندانست، موس خود را روی آن نگه دارد و معنی برایش نمایش داده شود.
سوال: چرا متن را به صورت عادی ننویسیم؟ آیا لازم است از این تگ استفاده کنیم؟(ایران گستر )
پاسخ: از نظر فنی خیر اما با استفاده از این تگ به موتورهای جستجو کمک می کنید تا آنها بهتر متن سایتتان را درک کنند و سایت اصولی تری خواهید داشت. همچنین در صورت استفاده از این تگ، اگر کاربری از سیستم های ترجمه (مانند افزونه google translate و …) استفاده کند، می تواند ترجمه ی بهتری دریافت کند.(ایران گستر )
تگ <address>
تگ <address> در زبان HTML اطلاعات تماس نویسنده ی صفحه و یا صاحب وب سایت را به کاربر ارائه می کند. محتوای این نوع تگ ها معمولا به صورت مورب (italic) به نمایش در می آیند. همچنین اکثر مرورگرها قبل و بعد از آن، یک line break (اینتر) اضافه می کنند:(ایران گستر )
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<p>The HTML address element defines contact information (author/owner) of a document or article.</p>
<address> Written by John Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
</body> </html> |
در خروجی، نحوه ی نمایش اطلاعات را مشاهده می کنید که italic هستند.
تگ <cite>
تگ <cite> در هنگام نقل قول معمولا عنوان یک اثر را مشخص می کند. به طور مثال:(ایران گستر )
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body>
<p>The HTML cite element defines the title of a work.</p> <p>Browsers usually display cite elements in italic.</p>
<img src="https://www.w3schools.com/html/img_the_scream.jpg" width="220" height="277" alt="The Scream"> <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body> </html> |
در مثال بالا نقاشی معروف ادوارد مانچ به نام “The Scream” را آورده ایم و از آنجا که The Scream نام اثر است آن را در cite قرار داده ایم.(ایران گستر )
تگ <bdo>
تگ <bdo> مخفف bi-directional override (به معنی «باطل کردن دو طرفه») می باشد. دلیل استفاده از آن باطل کردن یا نادیده گرفتن text direction فعلی است. text direction یعنی نوشته ی ما از راست به چپ نوشته می شود (مانند فارسی) یا از چپ به راست (مانند انگلیسی) و با استفاده از این تگ می توانید در وسط یک جمله این جهت را عوض کنید:(ایران گستر )
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>
<bdo dir="rtl">This line will be written from right to left</bdo>
</body> </html> |
اگر به خروجی کد بالا بروید می بینید که جمله ی This line will be written from right to left کاملا برعکس شده است.(ایران گستر )
- ۹۸/۰۷/۲۱
سلام
وبلاگ زیبا و خوبی دارید.
خوشحال میشم به وبلاگ من هم سر بزنید
http://alikhani98.ir