آموزش طراحی سایت – قسمت دوم
آموزش طراحی سایت
آموزش صفت HTML به زبان ساده
صفت HTML
- صفت های HTML کلمات ویژه ای هستند که اطلاعات اضافی درباره عناصر ارائه می دهند و یا ویژگی های اصلاح کننده عنصر HTML هستند.
- هر عنصر یا تگ می تواند صفت هایی داشته باشد که رفتار و و ضعیت آن عنصر را تعریف می کنند.
- صفت ها همیشه باید در تگ شروع قرار گیرند.
- صفت باید همیشه با دوتایی نام و مقدار آن استفاده شود.
- نام و مقادیر صفت ها به کوچکی و بزرگی حروف حساس هستند و W3C (کنسرسیوم شبکه جهانی وب) توصیه می کند که فقط باید با حروف کوچک نوشته شوند.
- می توانید چندین صفت را همزمان به یک عنصر HTML اعمال کنید اما باید بین هر دو صفت فاصله قرار دهید.
ساختار
<نام تگ نام صفت=”مقدار صفت”>محتوا</نام تگ>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> This is Style attribute </h1>
<p style=”height: ۵۰px; color: blue”> It will add style property in element </p>
<p style=”color: red”>It will change the color of content</p>
</body>
</html>
آموزش طراحی سایت
توضیحات مثال بالا:
<p style=”height: ۵۰px; color: blue”>It will add style property in element</p>
در جمله بالا از تگ پاراگراف استفاده کرده ایم که در آن صفت استایل به کار برده شده است. این صفت برای اعمال ویژگی CSS روی هر عنصر HTML استفاده می شود. با استفاده از این ویژگی ارتفاع پاراگراف px50 و رنگ آبی برای رنگ متن تنظیم شده است.
<p style=”color: red”>It will change the color of content</p>
در جمله بالا دوباره از صفت استایل در تگ پاراگراف استفاده کرده ایم که رنگ قرمز برای قلم تعیین شده است.
توجه: در اینجا تعدادی از صفات رایج را آورده ایم. همه صفات همراه با توضیحات آن ها در لیست صفات HTML آورده شده است.
صفت title
توضیحات: از صفت title به عنوان tooltip ( پنجره شناور) متن در بیشتر مرورگرها استفاده می شود. هنگامی که کاربر مکان نما را بر روی یک پیوند یا متن حرکت می دهد، یک متن به صورت شناور نمایش داده می شود. می توانید از این صفت برای هر متن یا پیوند برای نشان دادن توضیح درباره آنها استفاده کنید. در مثال های زیر این صفت را با تگ های p و h1 استفاده کرده ایم.
مثال
با تگ <h1>:
<h1 title=”This is heading tag”>Example of title attribute</h1>
با تگ <p>:
<p title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
کد:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 title=”This is heading tag”>Example of title attribute</h1>
<p title=”This is paragraph tag”>Move the cursor over the heading and paragraph, and you will see a description as a tooltip</p>
</body>
</html>
صفت href
توضیحات: صفت href صفت اصلی تگ انکر <a> است. این صفت آدرس قرار گرفته در لینک را مشخص می کند. صفت href صفحه را به جایی دیگر پیوند می دهد و اگر مقدار آن خالی باشد در همان صفحه می ماند.
مثال
با آدرس پیوند:
<a href=”https://www.javatpoint.com/html-anchor”>This is a link</a>
بدون آدرس پیوند:
<a href=””>This is a link</a>
صفت src
ویژگی src یکی از صفات مهم و ضروری عنصر <img> است. این صفت حاوی آدرس منبع تصویری است که در مرورگر نمایش داده می شود. مقدار این ویژگی می تواند آدرس تصویری باشد که یا در همان دایرکتوری (همان پوشه حاوی کد) یا دایرکتوری دیگری قرار دارد. نام یا آدرس منبع تصویر باید به درستی نوشته شود، در غیر اینصورت مرورگر تصویر را نشان نمی دهد.
مثال
<img src=”whitepeacock.jpg” height=”400″ width=”600″>
توجه: در مثال فوق، تگ img علاوه بر صفت src، صفات height و width نیز دارد که ارتفاع و عرض تصویر را در صفحه وب تنظیم می کند.
کوتیشن ها: کوتیشن های تک یا کوتیشن های دوتایی؟
در این فصل متوجه شدید که ما مقادیر صفات را درون کوتیشن های دوتایی (دابل کوتیشن) قرار دادیم اما ممکن است برخی افراد از کوتیشن های تکی (سینگل کوتیشن) در HTML استفاده کنند. بنابراین استفاده از سینگل کوتیشن همراه با صفات نیز مجاز است. هر دو جمله زیر کاملاً صحیح هستند.
<a href=”https://www.javatpoint.com”>A link to HTML.</a>
<a href=’https://www.javatpoint.com’>A link to HTML.</a>
همچنین در HTML5 می توانید از مقدار صفت را بدون کوتیشن بنویسید.
<a href=https://www.javatpoint.com>A link to HTML.</a>
آموزش عناصر HTML (بلوکی و خطی)
یک فایل HTML از عناصر ساخته شده است. وظیفه این عناصر ایجاد صفحات وب و تعریف محتوای آن ها است. یک عنصر در HTML معمولاً از تگ شروع <نام تگ>، تگ بسته <نام تگ/> و محتوای مندرج در بین آنها تشکیل شده است. از نظر فنی یک عنصر مجموعه ای از تگ شروع، صفات، تگ پایان و محتوای بین تگ ها است.
توجه: برخی عناصر تگ پایان و محتوا ندارند. این عناصر، عناصر خالی یا عناصر منفرد یا عناصر تهی نامیده می شوند.
به عنوان مثال:
<p> Hello world!!! </p>
مثال
<!DOCTYPE html>
<html>
<head>
<title>WebPage</title>
</head>
<body>
<h1>This is my first web page</h1>
<h2> How it looks?</h2>
<p>It looks Nice!!!!!</p>
</body>
</html>
- تمام محتوای نوشته شده بین عناصر تگ body در صفحه وب قابل مشاهده هستند.
Void element: تمام عناصر موجود در HTML نیاز به تگ شروع و پایان ندارند. برخی از عناصر دارای محتوا و تگ پایان نیستند، این عناصر با نام elements Void (عناصر تهی) یا عناصر خالی شناخته می شوند. همچنین به عنوان unpaired tag ( تگ غیر جفت) نیز خوانده می شوند.
بعضی از عناصر تهی عبارتند از: <br> (شکستن خط)، <hr> (کشیدن یک خط افقی) و … .
عناصر Nested (تودرتو): HTML: می تواند تودرتو باشد، به این معنی که یک عنصر می تواند عنصر دیگری را در خود جای دهد.
عناصر بلوکی و خطی
عناصر براساس نمایش پیش فرض به دو دسته تقسیم می شوند:
- عنصر بلوکی (Block-level element)
- عنصر خطی (Inline element)
عناصر بلوکی
- این عناصر بخش اصلی صفحه وب را با تقسیم بندی صفحه به بلوک های منطقی می سازند.
- یک عنصر بلوکی همیشه در یک خط جدید شروع می شود و تمام عرض صفحه را از چپ به راست در اختیار می گیرد.
- این عناصر می توانند عناصر بلوکی و همچنین خطی را در خود جای دهند.
عناصر بلوکی HTML در زیر آورده شده است:
<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> and <video>.
مثال
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style=”background-color: lightblue”>This is first div</div>
<div style=”background-color: lightgreen”>This is second div</div>
<p style=”background-color: pink”>This is a block level element</p>
</body>
</html>
در مثال بالا تگ های <p> و <div> استفاده شده است که هر کدام یک بخش در صفحه ایجاد می کنند و همچنین عرض صفحه را به کامل در اختیار می گیرند.
از صفت استایل برای طراحی ظاهر محتوا استفاده شده است، عناصر بلوکی متفاوت با رنگ پس زمینه از یکدیگر متمایز شده اند.
آموزش طراحی سایت
عناصر خطی
- عناصر خطی بخشی از متن را جدا کرده و عملیات خاصی به آن اعمال می کنند.
- این عناصر، خط جدیدی ایجاد نمی کنند و براساس نیاز و اندازه عرض خود از عرض صفحه استفاده می کنند.
- عناصر خطی اغلب همراه با سایر عناصر استفاده می شوند.
<a>, <abbr>, <acronym>, <b>, <bdo>, <big>, <br>, <button>, <cite>, <code>, <dfn>, <em>, <i>, <img>, <input>, <kbd>, <label>, <map>, <object>, <q>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <textarea>, <time>, <tt>, <var>.
مثال
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a href=”https://www.javatpoint.com/html-tutorial”>Click on link</a>
<span style=”background-color: lightblue”>this is inline element</span>
<p>This will take width of text only</p>
</body>
</html>
آموزش طراحی سایت
لیست زیر تعدادی از عناصر اصلی مورد استفاده در HTML را نشان می دهد:
| توصیف | تگ پایان | محتوا | تگ شروع |
| برای ساخت عناوین و سرتیترهای صفحه استفاده می شود. | </h1>…..
</h6> |
تگ های عنوانن (یا سرتیتر) هستند. | <h1>…..
<h6> |
| محتوا را به صورت پاراگراف نمایش می دهد. | </p> | این یک پاراگراف است. | <p> |
| بخش یا قسمت جدیدی در صفحه ایجاد می کند. | </div> | ای یک بخش است. | <div> |
| برای شکست خط فعلی استفاده می شود. (عنصر خالی) | <br> | ||
| یک خط افقی ترسیم می کند. (عنصر خالی) | <hr> |
آموزش قالب بندی HTML به زبان ساده
قالب بندی HTML فرایند قالب بندی متن برای ساختن ظاهر و حس بهتر است. HTML فابلیت قالب بندی متن را بدون استفاده از CSS در اختیار ما قرار می دهد. تگ های قالب بندی بسیاری در HTML وجود دارد. این تگ ها برای مواردی مانند توپر کردن متن، مورب کردن متن یا قرار دادن خط زیر متن استفاده می شوند. تقریباً ۱۴ مورد در دسترس برای نحوه نمایش متن در HTML و XHTML وجود دارد.
در HTML تگ های قالب بندی به دو دسته تقسیم می شوند:
- تگ فیزیکی: این تگ ها برای فرم ظاهری متن استفاده می شوند.
- تگ منطقی: این تگ ها ارزش منطقی یا معنایی به متن اضافه می کنند.
توجه: برخی تگ های فیزیکی و منطقی وجود دارند که ممکن است از نظر فرم ظاهری نتیجه یکسانی داشته باشد اما از لحاظ معنایی متفاوت هستند.
در اینجا، ۱۴ تگ قالب بندی متن HTML را در جدول زیر آورده ایم.
آموزش طراحی سایت
| نام عنصر | توضیحات |
| <b> | تگ فیزیکی که متن درون خود را به صورت توپر نمایش می دهد. |
| <strong> | تگ منطقی است که به مرورگر اطلاع می دهد که متن درون آن اهمیت دارد. |
| <i> | تگ فیزیکی که متن را به صورت مورب نمایش می دهد. |
| <em> | تگ منطقی که محتوا را به صورت مورب نمایش می دهد. |
| <mark> | متن را به صورت علامت گذاری شده و متمایز نمایش می دهد. |
| <u> | زیر متن یک خط می کشد. |
| <tt> | متن را به صورت تله تایپ نمایش می دهد. (در ۵HTML پشتیبانی نمی شود.) |
| <strike> | روی یک قسمت از متن خط می کشد. (در ۵HTML پشتیبانی نمی شود.) |
| <sup> | محتوا را کمی بالاتر از متن معمول نمایش می دهد. |
| <sub> | محتوا را کمی پایین تر از متن معمول نمایش می دهد. |
| <del> | محتوای را به صورت خط خورده (حذف شده) نمایش می دهد. |
| <ins> | محتوای اضافه شده را نمایش می دهد. |
| <big> | اندازه قلم متن را براساس اندازه قلم پایه، یک واحد بزرگتر نمایش می دهد. |
| <small> | اندازه قلم متن را براساس اندازه قلم پایه، یک واحد کوچکتر نمایش می دهد. |
۱) متن توپر (بولد)
عناصر قالب بندی<b> و<srong> در HTM
عنصر<b> یک تگ فیزیکی است که محتوا را با قلم توپر نشان می دهد و از نظر منطقی بدون اهمیت است. هر چیزی را در عنصر <b>…………</b> بنویسید با حروف توپر نمایش داده می شود.
مثال
<p> <b>Write Your First Paragraph in bold text.</b></p>
تگ <strong> تگی منطقی است که محتوا را با قلم توپر نمایش می دهد و اهمیت معنایی آن را به مرورگر اطلاع می دهد. متنی که بین تگ <strong>…… </strong> قرار می گیرد، به عنوان متن مهم در نظر گرفته می شود.
مثال
<p><strong>This is an important content</strong>, and this is normal content</p>
مثال
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of formatting element</h1>
<p><strong>This is an important content</strong>, and this is normal content</p>
</body>
</html>
۲) متن مورب (ایتالیک)
عناصر قالب بندی <i> و <em>
عنصر <i> عنصر فیزیکی است که محتوا را به صورت مورب یا کج و بدون هیچ گونه اهمیتی نشان می دهد. اگر چیزی بین عنصر <i>…………</i> قرار گیرد، با حروف مورب نمایش داده می شود.
مثال
<p> <i>Write Your First Paragraph in italic text.</i></p>
تگ <em> یک عنصر منطقی است که محتوای خود را با قلم مورب همراه با اهمیت معنایی نشان می دهد.
مثال
<p><em>This is an important content</em>, which displayed in italic font.</p>
مثال
<!DOCTYPE html>
<html>
<head>
<title>formatting elements</title>
</head>
<body>
<h1>Explanation of italic formatting element</h1>
<p><em>This is an important content</em>, which displayed in italic font.</p>
</body>
</html>
۳) قالب بندی برجسته و علامت گذاری شده
اگر می خواهید متن را متمایز یا برجسته کنید، باید محتوا را در عنصر <mark>………</mark> قرار دهید.
مثال
<h2> I want to put a <mark> Mark</mark> on your face</h2>
۴) متن زیرخط دار
هر چیزی را در عنصر <u> ……… </u> بنویسید با یک خط در زیر آن نمایش داده شده است.
مثال
<p><u>Write Your First Paragraph in underlined text.</u></p>
۵) متن خط خورده
محتوایی که در عنصر <strike> ………………. </strike> نوشته شود به صورت خط خورده نمایش داده می شود. یک خط باریک از وسط روی محتوا کشیده می شود.
مثال
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
آموزش طراحی سایت
۶) فونت مونو اسپیسد (Monospaced)
در فونت مونو اسپیسد یا فونت با عرض ثابت تمامی حروف عرض یکسانی دارند. برای داشتن حروف با عرض یکسان محتوا را در عنصر <tt> …………. </tt> قرار می دهیم.
توجه: می دانیم که در بیشتر فونت ها، حروف عرض متغیری دارند. (برای مثال: “w” از “i” پهن تر است). قلم مونواسپیسد فضای یکسانی برای هر حرف ایجاد می کند.
مثال
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
۷) متن بالانویس
عنصر <sup> ………….. </sup> محتوای درون خود را به صورت بالانویس و بالاتر از متن معمولی نمایش می دهد. به صورتی که متن به اندازه نصف ارتفاع یک کاراکتر بالاتر از سایر کاراکترها قرار می گیرد.
مثال
<p>Hello <sup>Write Your First Paragraph in superscript.</sup></p>
۸) متن زیرنویس
محتوای درون عنصر <sub> ………….. </sub> به صورت زیرنویس و پایین تر از متن معمول نمایش داده می شود. به صورتی که متن به اندازه نصف ارتفاع یک کاراکتر پایین تر از سایر کاراکتر ها قرار می گیرد.
مثال
<p>Hello <sub>Write Your First Paragraph in subscript.</sub></p>
۹) متن حذف شده
محتوایی که در عنصر <del> ………. </del> قرار گیرد به عنوان متن حذف شده نمایش داده می شود.
مثال
<p>Hello <del>Delete your first paragraph.</del></p>
۱۰) متن درج شده
مجتوای درون <ins> ………. </ins> به عنوان متنی که به تازگی اضافه شده نمایش داده می شود.
مثال
<p><del>Delete your first paragraph.</del><ins>Write another paragraph.</ins></p>
۱۱) متن بزرگتر
اگر بخواهید اندازه قلم قسمتی از متن را بزرگتر از بقیه متن نمایش داده شود، محتوا را درون <big> ……… </big> قرار دهید. این تگ اندازه قلم متن را نسبت به اندازه قبلی افزایش می دهد.
مثال
<p>Hello <big>Write the paragraph in larger font.</big></p>
۱۲) متن کوچکتر
اگر بخواهید اندازه قلم قسمتی از متن کوچکتر از بقیه متن نمایش داده شود، محتوا را در تگ <small> ……. </small> قرار دهید. این تگ اندازه قلم متن را نسبت به اندازه قبلی آن کاهش می دهد.
مثال
<p>Hello <small>Write the paragraph in smaller font.</small></p>