بتلفیلد بعدی در میانه راه
آذر ۲۴, ۱۳۹۴
هکر اطلاعات ۱۱ میلیون کودک و نوزاد انگلیسی دستگیر شد
آذر ۲۴, ۱۳۹۴
با جلسه ی ششم از سری آموزش های HTML ، با مدیاسافت همراه باشید
تگ <q>
از تگ <q> برای نقل قول های کوتاه استفاده می شود. مرورگرها یک دبل کوتیشن ابتدا و انتهای محتوای این تگ اضافه می کنند.
مثال
<!DOCTYPE html>
<html>
<body>
<p><b>WWF</b>’s goal is to: <q>Build a future where people live in harmony with nature.</q><p>
</body>
</html>
خروجی :
تگ <blockquote>
برای نقل قول هایی که طولانی هستند از تگ <blockquote> استفاده می شود. مرورگرها معمولا محتوای <blockquote> را به صورت تورفتگی نشان می دهند. با استفاده از صفت cite نیز می توانید منبع نقل قول را مشخص کنید . cite الزامی نیست .
مثال
<!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>
خروجی :
تگ <abbr>
گاهی اوقات لازم است که در متن از کلمات مخفف استفاده کنیم. و در عین حال خواننده نیز متوجه شود که این کلمه مخفف چیست !
به مثال زیر دقت کنید :
<!DOCTYPE html>
<html>
<body>
<p>The <abbr title=”World Health Organization”>WHO</abbr> was founded in 1948.</p>
</body>
</html>
خروجی :
همانطور که مشاهده می کنید وقتی که نشانه گر ماوس را برروی کلمه ی WHO می بریم یک Tooltip نمایش پیدا می کند که عبارتی را که در صفت title مربوط به abbr نوشته ایم در آن قرار دارد.
تگ <address>
وقتی می خواهیم اطلاعات تماس با یک شخص یا نویسنده را در صفحه ی وبمان قرار دهیم بهتر است که از این تگ استفاده کنیم.
مثال
<!DOCTYPE html>
<html>
<body>
<address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
</body>
</html>
خروجی :
تگ <cite>
برای عنوان یک کار یا اثر از تگ <cite> استفاده می کنیم. مرورگرها معمولا این تگ را به صورت کج نویس یا italic نشان می دهند.
مثال
<!DOCTYPE html>
<html>
<body>
<img src=”img_the_scream.jpg” width=”220″ height=”277″ alt=”The Scream”>
<p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>
</body>
</html>
خروجی :
تگ <bdo>
با استفاده از این تگ و صفت dir می توان یک متن را از آخربه اول نوشت . مثلا big را به صورت gib نوشت. البته باید مرورگر شما از این تگ پشتیبانی کند که اغلب مرورگرها پشتیبانی می کنند.
مثال
<!DOCTYPE html>
<html>
<body>
<bdo dir=”rtl”>This line will be written from right to left</bdo>
</body>
</html>
خروجی :
در کد این مثال می بینید که مقدار صفت dir برابر با rtl می باشد که مخفف Right to Left و به معنای راست به چپ می باشد. و به همین دلیل متن از راست به چپ نوشته شده است. اگر از صفت dir استفاده نمی شد متن به صورت نرمال در صفحه ی مرورگر نمایان می شد.
تگ <code>
برای نوشتن کدهای برنامه نویسی می توان از تگ <code> استفاده کرد. این تگ فونت نوشته را مانند فونت نرم افزارهای برنامه نویسی در می آورد.
مثال
<!DOCTYPE html>
<html>
<body>
<p>Programming code example:</p>
<code>
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</code>
</body>
</html>
خروجی :
همانطور که مشاهده می کنید در تگ <code> فونت عوض شده ولی کدها به صورت پشت سرهم نوشته شده که اصلا جالب نیست.
برای اینکه کدها به صورت استاندارد و به صورت همان جوری که هست در صفحه ی مرورگر نمایان شود می توانیم از تگ <pre> که در جلسات قبل آموزش داده شد کمک بگیریم.
مثال
<!DOCTYPE html>
<html>
<body>
<p>To fix this, you can put the code element inside a pre element:</p>
<pre>
<code>
var x = 5;
var y = 6;
document.getElementById(“demo”).innerHTML = x + y;
</code>
</pre>
</body>
</html>
خروجی :
همانطور که مشاهده می کنید با استفاده از تگ <pre> خیلی زیبا کدها را به صورت زیر هم نمایش دهیم. همچنین توانستیم با استفاده از صفت style در تگ <body> فونت تمامی عناصر <body> را به سایز 130% تغییر دهیم.
نکته : به هرچه که در داخل تگ <body> یعنی بین <body> و <body/> قرار داشته باشد عناصر تگ <body> می گویند.
تگ <var>
با استفاده از تگ <var> می توان فونت متن را به صورت فورمول های ریاضی تغییر داد.
مثال
<!DOCTYPE html>
<html>
<body>
<p>Einstein wrote: <var>E = mc<sup>2</sup></var>.</p>
</body>
</html>
خروجی :
تگ توضیحات یا Comment
نکته : برای تگ هایی که با علامت تعجب ( ! ) شروع می شوند تگ بسته وجود ندارد.
گاهی اوقات لازم است برای خوانایی کد از توضیحات استفاده کنیم. اما چه کار کنیم که توضیحات در مرورگر نشان داده نشود.
برای این کار از تگ توضیحات یا کامنت (comment) استفاده می کنیم.
تگ توضیحات به صورت زیر باید استفاده شود.
<!– Write your comments here –>
مثال
<!DOCTYPE html>
<html>
<body>
<!– This is a comment –>
<p>This is a paragraph.</p>
<!– Comments are not displayed in the browser –>
</body>
</html>
خروجی
همانطور که در خروجی می بینید قسمتی که در کد به صورت highlight مشخص شده است در مرورگر نمایش پیدا نمی کند.
گاهی اوقات ممکن است که بخواهیم قسمتی از کد را اجرا نکنیم در این صورت تگ توضیحات را به شکل زیر به کار می بریم.
<!DOCTYPE html>
<html>
<body>
<!– Do not display this at the moment
<img border=”0″ src=”pic_mountain.jpg” alt=”Mountain”>
–>
</body>
</html>
خروجی
پایان جلسه ششم
