آموزش HTML

[سیده آمین ارمان]

عناصر نقل قول و استناد در HTML
تگ <q> در HTML

در طراحی سایت با HTML از تگ <q> برای بیان نقل قول کوتاه استفاده می شود.مرورگرها معمولا علامت نقل قول را در اطراف عناصر <q> اضافه می کنند.

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

تگ <blockquote> در HTML

این تگ در طراحی سایت با HTML به منظور بیان یک بخش نقل قول شده به کار می رود. مرورگرها معمولا عناصر <blockquote> را به صورت برجسته نشان می دهد.

<p>Here is a quote from Mabna website:</p>
<blockquote cite="

Please, ورود or عضویت to view URLs content!

">
For 50 years, Mabna has been protecting the future of nature.
The world's leading conservation organization,
Mabna works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

تگ <abbr> در HTML

از این تگ در طراحی سایت برای بیان اختصار و مخفف استفاده می شود. علامت گذاری اختصارات می تواند اطلاعات مفیدی را در اختیار مرورگرها، سیستم های ترجمه و موتورهای جستجو قرار دهد.

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

تگ <address> در HTML

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

<address>
Written by Mabna.<br>
Visit us at:<br>
sitedesign-co.com<br>
Box 564, Disneyland<br>
USA
</address>

عنصر <cite> در HTML

در طراحی سایت از عنصر <cite> برای بیان عنوان یک کار استفاده می شود. این عنصر نیز مانند قبلی معمولا در مرورگرها به صورت ایتالیک نمایش داده می شوند.

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

 

[سیده آمین ارمان]

عنصر iframe در html
از iframe برای نمایش یک صفحه وب در داخل یک صفحه دیگر از وب در طراحی سایت استفاده می شود. نحوه ساختار عنصر iframe در html به شکل زیر است که در آن ویژگی src تعیین کننده URL (آدرس وب) صفحه iframe است:

<iframe src="URL"></iframe>

iframe - تنظیم ارتفاع و عرض

از ویژگی ارتفاع و عرض برای مشخص کردن اندازه استفاده می شود. مقدار این صفت ها به طور پیش فرض بر حسب پیکسل بیان می شود اما می توان آنها را بر حسب درصد (برای مثال 80%) نیز بیان کرد.

<iframe src="demo_iframe.htm" width="200" height="200"></iframe>

حذف حاشیه در iframe

به طور پیش فرض iframe دارای حاشیه سیاه رنگ است. به منظور حذف این حاشیه در طراحی سایت ، صفت style را اضافه کنید و از ویژگی border (حاشیه) در CSS استفاده کنید.

<iframe src="demo_iframe.htm" style="border:none"></iframe>

با استفاده از CSS، شما همچنین می توانید اندازه، سبک و رنگ مرز iframe ها را نیز تغییر دهید:

<iframe src="demo_iframe.htm" style="border:5px dotted red"></iframe>

از iframe به عنوان یک مقصد برای لینک استفاده کنید.

در واقع در طراحی سایت می توانید از iframe به عنوان یک هدف برای یک لینک استفاده کنید. صفت target یک لینک، به صفت name در iframe برمی گردد:

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="

Please, ورود or عضویت to view URLs content!

" target="iframe_a">W3Schools.com</a></p>

 

[سیده آمین ارمان]

موجودیت ها در html
منظور از موجودیت ها در html ، آن دسته از کاراکترهایی هستند که بر روی صفحه کلید کامپیوتر شما وجود ندارند و برای استفاده از آنها در طراحی سایت باید تعدادی از کاراکتر ها را با یکدیگر ترکیب کنید. در این قسمت از آموزش html قصد داریم شما را با انواع موجودیت ها در html و چگونگی استفاده از آنها در طراحی سایت ، آشنا کنیم.

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

کاراکترهای علامت کوچکتر و بزرگتر

در صورت استفاده از علامت های کوچکتر (>) و بزرگتر (<) در طراحی سایت، مرورگر ممکن است این علامت را با تگ اشتباه بگیرد، در نتیجه در هنگام برنامه نویسی به منظور به کار بردن این علامت ها در طراحی سایت، باید از کاراکتر خاص استفاده کرد. برای نمایش علامت کوچکتر در طراحی سایت باید از کاراکتر ";&lt" و یا ";&#60" استفاده کرد و به منظور ارائه علامت بزرگتر می توان موجودیت ";&gt" و یا ";&#62" را به کار برد.

ایجاد فضای بدون شکست

یک کاراکتر رایج که در موجودیت ها در html استفادهمی شود، فضای بدون شکست است که با کاراکتر (;&nbsp) معین می شود. توجه داشته باشید که مرورگر همیشه فضای صفحات html را کوتاه می کنند. اگر شما 10 فاصله در متن خود اعمال کنید، مرورگر 9 فاصله را حذف می کند. به منظور اضافه کردن فضای واقعی در طراحی سایت از کاراکتر ;&nbsp استفاده کنید.

 

[سیده آمین ارمان]

تگ kbd و samp و code
قالب بندی کد کامپیوتر در HTML

بخش دیگری از آموزش طراحی سایت و آموزش html مربوط به قالب بندی کد کامپیوتر در HTML است. به طور معمول html در طراحی سایت از اندازه حروف و فاصله های متغیری استفاده می کند. عناصر <kbd>و <samp>، و <code> تماما از اندازه حروف و فواصل ثابت پشتیبانی می کنند.

از تگ <kbd> برای تعریف ورودی صفحه کلید استفاده می کنیم. در طراحی سایت از عنصر <samp> در html برای بیان نمونه ای از خروجی برای یک برنامه کامپیوتر به کار می رود. تگ <code> نیز در طراحی سایت با html، بیانگر یک قطعه از کد برنامه نویسی است.

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>

توجه داشته باشید که تگ <code> در طراحی سایت، فضای سفید اضافی و شکس های خط را حفظ نمی کند. برای تثبیت اینها شما می توانید در طراحی سایت ، تگ <code> را در داخل یک تگ <pre> قرار دهید.

<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>

عنصر <var> نیز در طراحی سایت معرف متغیرها است. یک متغیر می تواند یک متغیر در عبارت ریاضی باشد و یا یک متغیر در زمینه برنامه نویسی.

Einstein wrote: <var>E</var> = <var>m</var><var>c</var>².

 

[سیده آمین ارمان]

تگ noscript
چگونگی ارائه طرح جایگزین تا حد زیادی به چگونگی استقرار جاوا اسکریپت در طراحی سایت بستگی دارد. اما عناصر noscript، دربسیاری از موارد در طراحی سایت مفید و کاربردی است. همانطور که از نام این عنصر مشخص است، ما می توانیم از این عناصر در طراحی سایت با html برای ارائه محتوای جایگزین استفاده کنیم. هر چیزی در میان تگ <noscript> و </noscript> در طراحی سایت، تنها زمانی که جاوا اسکریپت غیر فعال شود، ارائه خواهد شد.

برای مثال ما با طراحی سایت یک صفحه آزمایشی ایجاد کردیم، این صفحه نمایشی، اثر بارگذاری تصویر تار را همانطور که در شکل دیده می شود، تکرار می کند. تصاویر و اثر تار هردو از جاوااسکریپت ارسال می شوند، و اگر ما جاوااسکریپت را غیر فعال کنیم، تصاویر بارگذاری نخواهند شد.

برای نمایش این تصاویر در طراحی سایت ، ما می توانیم آنها را در عناصر noscript قرار دهیم.

<head>
<noscript>
<style>
figure noscript {
top: 0;
left: 0;
position: absolute;
}
</style>
</noscript>
</head>

...

<figure>
<img src="img/img-small-1.jpg"
width="30"
height="20"
class="img-small"
alt=""
data-large="img/img-large-1.jpeg"
data-large-width="1280"
data-large-height="853">
<canvas></canvas>
<figcaption>Lorem ipsum dolor sit amet.</figcaption>

<!-- fallback image -->
<noscript><img src="img/img-large-1.jpeg" height="600" width="900"></noscript>
</figure>

همچنین می توان از عنصر noscript برای اطلاع رسانی به کاربر در مورد خاموش بودن جاوااسکریپت استفاده کرد، مانند آنچه که فیس بوک و Trello انجام داده اند. علاوه بر این می توانیم یک لینک مرجع به منظور کمک به کاربر در جهت روشن کردن جاوااسکریپت اضافه کنیم.

 

[سیده آمین ارمان]

کاربرد تگ کامنت در html
یکی دیگر از تگ های کاربردی در طراحی سایت ، تگ کامنت است که به صورت علامت --!> و <-- در طراحی سایت مورد استفاده قرار می گیرند. با استفاده از تگ کامنت در طراحی سایت شما می توانید، نظرات و توضیحات خود را به سند html اضافه کنید. برای این منظور باید از ترکیب زیر استفاده کنید.

<!-- کامنت خود را اینجا بنویسید -->

نکته: توجه داشته باشید که علامت سوال تنها در تگ ابتدایی وجود دارد و تگ انتهایی فاقد علامت سوال است.

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

<!-- درحال حاضر این عنصر در مرورگر نمایش داده نشود
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->

 

[سیده آمین ارمان]

لیست های توصیفی در طراحی سایت
یکی دیگر از انواع لیست هایی که در html و در طراحی سایت ارائه می شوند، لیست های توصیفی هستند. در این مقاله از مجموعه مقالات آموزش سئو و آموزش طراحی سایت قصد داریم، شما را با لیست های توصیفی در طراحی سایت آشنا کنیم.

Html همچنین از لیست های توصیفی (description list) پشتیبانی می کند. یک لیست توصیفی، یک لیست با فهرست است که هر اصطلاح در آن دارای یک توضیح و توصیف است. در طراحی سایت برای برای تعریف این لیست از تگ <dl> استفاده می کنند.

علاوه بر این در طراحی سایت ، برای ایجاد لیست های توصیفی از تگ <dt> معرف اصطلاح (نام) و تگ <dd> به منظور توصیف هر اصطلاح مورد استفاده قرار می گیرد.

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

به طور خلاصه می توان چنین گفت که در طراحی سایت برای ایجاد description list که نوعی لیست با توضیحات و تفاسیر مربوطه است، به طور کلی از سه تگ در html استفاده می کنند که به شرح زیر است:

• تگ <dl> در html: این تگ همانطور که در بالا گفته شد تگ اصلی برای معرفی و شروع ایجاد لیست توصیفی در طراحی سایت است.

• تگ <dt> در html: از این تگ در داخل تگ <dl> به منظور معرفی اصطلاح در طراحی سایت به کار می رود.

• تگ <dd> در html: تگ <dd> در طراحی سایت به منظور ایجاد لیست های توضیحی برای ارائه توضیحات داده ها استفاده می شود.

 

[سیده آمین ارمان]

عنصر canvas در طراحی سایت
عنصر <canvas> در طراحی سایت

از عنصر <canvas> در html برای طرح گرافیکی صفحات وب در طراحی سایت استفاده می شود.
HTML Canvas چیست؟

عنصر <canvas> در اچ تی ام ال برای رسم طرح گرافیکی با استفاده از کد نویسی (معمولا جاوا اسکریپت) مورد استفاده قرار می گیرد. این عنصر تنها به عنوان یک جایگاه برای گرافیک است. در هر صورت شما باید از یک اسکریپت برای رسم گرافیک استفاده نمایید. <canvas> دارای چندین متد برای رسم مسیر ها ، باکس ها ، دوایر ، متون و اضافه کردن تصویر می باشد.

Canvas یک ناحیه مستطیل شکل در یک صفحه HTML در طراحی سایت است. به طور پیش فرض، یک Canvas هیچ مرز و محتوایی ندارد.

نحوه نوشتن این عنصر به شکل زیر خواهد بود:

<canvas id="myCanvas" width="200" height="100"></canvas>

توجه: همیشه یک ویژگی id برای ارجاع به اسکریپت مشخص کنید ، و یک عرض و ارتفاع برای تعریف سایز canvas تعیین نمایید. به مثال زیر توجه کنید:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>