آموزش برنامه نویسی HTML – بخش سوم

در این بخش از مقاله آموزش برنامه نویسی HTML ، به آموزش سایر مباحث اصلی برنامه نویسی HTML خواهیم پرداخت.

ایجاد Hyperlink

وب جهانی ، شبکه گسترده ای از صفحات است. اگر یک وب سایت ایجاد کنید ، شما باید صفحه خود را به صفحات دیگر پیوند دهید. یک لینک به یک صفحه داخلی در وب سایت شما یا یک صفحه خارجی در وب، Hyperlink نامیده می شود. غالباً افراد به یک متن لینک می دهند ، به هر عنصر HTML  -  برای مثال ، یک تصویر - می تواند لینک داده شود.

تگ <a>  برای تعریف لینک ها در HTML استفاده می شو د، در حالی که صفت “href” برای تعیین مقصد یک لینک استفاده می گردد. سپس لینک موردنظر بعد از علامت "=" قرار داده شده و تگ بسته می شود.

مثال

در آموزش برنامه نویسی HTML ، ایجاد یک hyperlink ، به صورت <a href=”https://websitesetup.org”>YOUR LINK TEXT HERE</a> می باشد که به صورت  YOUR LINK TEXT HERE نمایش داده می شود.

اکنون ، فرض کنید شما در حال ایجاد پیوند به یک فایل محلی هستید که تمام صفحات HTML خود را در همان پوشه قرار داده اید. در این مورد شما نیازی به اضافه کردن یک URL وب سایت ندارید. فقط مسیر فایل را اضافه کنید. برای مثال، اگر می خواهید به یک فایل با عنوان about-page.html پیوند بدهید ، لینک شما به صورت <a href=”about-page.html”>YOUR LINK TEXT HERE</a> نوشته می شود که این کار ، لینک به فایل about-page.html را ایجاد می کند.

اگر فایل HTML که می خواهید پیوند دهید ، محلی باشد ، اما در پوشه ای متفاوت از پوشه اصلی قرار داشته باشد ، به سادگی مسیر فایل را مشخص کنید. به عنوان مثال ، اگر فایل در پوشه “files"  قرار داشته باشد ، لینک شما چیزی شبیه به این <a href=”files/about-page.html”>YOUR LINK TEXT HERE</a> خواهد بود.

ممکن است بخواهید با ایجاد لینک ؛ چیزی مانند یک پنجره/ تب را باز کنید. در این صورت از صفت target برای این منظور استفاده می کنید.

مثال

دستور <a href=”about-page.html” target=”_blank”>YOUR LINK TEXT HERE</a> معین می کند که لینک باید در یک تب جدید باز شود.

دستور <a href=”about-page.html” target=”_self”>YOUR LINK TEXT HERE</a> معین می کند که لینک باید در همان تب باز شود.

صفات دیگری نیز وجود دارند که می توانند برای ایجاد ارتباط با چیزی که باید با یک لینک باز شود ، استفاده شوند:

• _blank_ باز شدن در یک تب جدید.
• _self_ باز شدن در همان تب.
• _parent_ باز شدن در یک فریم والد.
• _top_ باز شدن در یک بدنه کامل از پنجره.
• Framename – باز شدن در یک فریم با نام مشخص شده

در آموزش برنامه نویسی HTML ، ما  می توانیم یک تصویر را به عنوان یک لینک در نظر بگیریم.

مثال

<a href="https://websitesetup.org">
<img src="heisaboy.jpg" alt="He is a boy">
</a>

این دستور به مرورگر می گوید که یک فایل تصویر “heisaboy.jpg"  را واکشی کرده و آن را به https://websitesetup.org پیوند دهد. صفت “alt"  آنچه را که باید در صورت نمایش داده نشدن تصویر ، نشان داده شود ، تعیین می کند. (به دلیل تنظیمات مرورگر یا موارد دیگری از نمایش تصاویر ممانعت می شود).

استفاده نمودن از تصاویر

تصاویر به یک سند HTML با تگ <img>  اضافه می شوند. تگ <img>  یک تگ empty است ، بنابراین لازم نیست بسته شود.

مثال

<img src="heisaboy.jpg" alt="He is a boy">

در آموزش برنامه نویسی HTML ، این یک مثال پایه ایی است تا مرورگر یک تصویر با عنوان “heisaboy.jpg" را  از همان دایرکتوری سند HTML نمایش دهد. در صورتی که به دلایلی مانند تنظیمات مرورگر یا اینترنت تصاویر نمایش داده نشود ، صفت “alt"  به مرورگر می گوید که یک متن (به عنوان "متن جایگزین")را به صورت "He is a boy" نشان دهد. اگر می خواهید یک تصویر را در یک پوشه دیگر یا از یک سایت خارجی واکشی کنید ، آدرس / مسیر کامل را باید مشخص کنید.

برای این که پا را از اصول اولیه فراتر بگذاریم ، می توانیم از صفت های دیگری نیز برای سفارشی سازی بهتر تصویر استفاده کنیم. به عنوان مثال، صفت “style"  می تواند برای تعیین عرض، ارتفاع یا هر دو مورد استفاده شود.

مثال

<img src="IMAGE PATH" alt="YOUR ALTERNATIVE TEXT" style="width:width;height:height;">

("width" و "height" باید با مقادیر موردنظر شما به صورت پیکسل مانند “20px” جایگزین شوند.)

ایجاد جدول

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

جداول با تگ <table>  ایجاد می شوند. هر هدر در یک جدول با تگ <th>  به عنوان  (“table header”) مشخص می شود ، در حالی که هر سطر با تگ <tr> به عنوان (“table row”) مشخص می شود. سپس داده های جدول با تگ <td>  تعیین می شوند.

مثال

<table>
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Input 1 under header 1</td>
<td>Input 1 under header 2</td>
<td>Input 1 under header 3</td>
</tr>
<tr>
<td>Input 2 under header 1</td>
<td>Input 2 under header 2</td>
<td>Input 2 under header 3</td>
</tr>
<tr>
<td>Input 3 under header 1</td>
<td>Input 3 under header 2</td>
<td>Input 3 under header 3</td>
</tr>
</table>

خروجی قطعه کد فوق به صورت زیر می باشد:

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

<table style="width:100%">
<tr>
<th>Table Header 1</th>
<th>Table Header 2</th>
<th>Table Header 3</th>
</tr>
<tr>
<td>Input 1 under header 1</td>
<td>Input 1 under header 2</td>
<td>Input 1 under header 3</td>
</tr>
<tr>
<td>Input 2 under header 1</td>
<td>Input 2 under header 2</td>
<td>Input 2 under header 3</td>
</tr>
<tr>
<td>Input 3 under header 1</td>
<td>Input 3 under header 2</td>
<td>Input 3 under header 3</td>
</tr>
</table>

خروجی به دست آمده چیزی شبیه تصویر زیر خواهد بود :

شما ممکن است بخواهید پیشرفته تر کار کرده و از حاشیه ها استفاده کنید ، تراز افقی یا عمودی را برای محتوای جدول تنظیم کنید. در این صورت می توانید divider ، padding و غیره را وارد کنید. با این حال، شما باید برخی از کدهای CSS ها را برای انجام کارهایی مانند این موارد یاد بگیرید. ما این آموزش را به صورت پایه ایی نگه می داریم و در این مقاله به این موارد نمی پردازیم.

نقل قول ها در HTML

انواع مختلف نقل قول وجود دارد و این نقل قول ها توسط عناصر مختلف نشان داده می شوند.

یک نقل قول پایه ایی در مثال زیر آورده شده است :

<p>This is a sample. And <q>Here is our quote</q></p>

خروجی به دست آمده به صورت زیر می باشد :

This is a sample. And “Here is our quote”

وقتی از تگ <q>  استفاده می کنید ، علامت نقل قول به طور خودکار به آنچه در داخل تگ اضافه شده است ، اضافه می شود.

شما هم چنین می توانید از blockquotes استفاده کنید ، که با تگ <blockquote>  انجام می شود.

مثال

<p>This is a sample. And <blockquote>Here is our blockquote. In this example, we try to demonstrate how to format text to indicate a blockquote in HTML. This is different from ordinary quotes, in that the actual "quote" symbol may or may not be added depending on CSS styling, but the text is highlighted.</blockquote></p>

خروجی به دست آمده به صورت زیر است :

استفاده از کامنت ها در HTML

در آموزش برنامه نویسی HTML ، هنگام انجام هر گونه کدنویسی ، مهم است که یاد بگیریم که چگونه کامنت ها را به کدهای خود اضافه کنیم. کامنت ها برای سازماندهی بیشتر کد مورد استفاده قرار می گیرند. شما می توانید یک یادآوری برای خود یا یک یادداشت به دیگران را به کدهای خود اضافه کنید تا خوانایی کدهای شما افزایش یابد.

در ابتدا ممکن است این مورد مهم به نظر نیاید ، اما هنگامی که شما شروع به نوشتن صدها یا هزاران خط کد کنید ، و زمانی که چیزها شروع به پیچیده شدن می کنند ، کامنت ها مفید خواهند بود.

کامنت ها توسط مرورگر نمایش داده نمی شوند. به یاد داشته باشید که آنها را می توان در کد منبع (source code) مشاهده کرد.

کامنت ها هم چنین می توانند در هر جایی از کدها استفاده شوند. آنها به هیچ وجه کارایی کد شما را تغییر نخواهند داد.

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

مثال

<!-- This is a comment used to indicate information I want to remember, or that I want others to take note of, when looking at this code in the future -->

استفاده از رنگ ها در HTML

دیر یا زود می خواهید رنگ ها را برای برجسته کردن عناصر خاصی از سند HTML خود استفاده کنید. رنگ ها را می توان با سه روش اصلی استفاده نمود: با مقدار HEX، با مقدار RGB یا با نام رنگ.

استفاده از رنگ در HTML معمولاً با صفت style انجام می شود.

مثال 1

<p style="color:#0000FF";>This is the blue color</p>

با استفاده از مقدار HEX برای رنگ آبی “#0000FF” ، ما به مرورگر می گوییم که برای نشان دادن متن خود از رنگ آبی استفاده کند.

مثال 2

<p style="color:rgb(153, 255, 153);">This is the color green</p>

با این دستور ما متن را به رنگ سبز با استفاده مقدار RGB سبک بندی می کنیم.

مثال 3

<p style="color:hsl(60,100%,50%);">This is the color yellow</p>

با استفاده از مقدار HSL ، ما درخواست می کنیم که متن به رنگ زرد برجسته شود.

مثال 4

<p style="color:orange;">This is the color orange</p>

ما از نام رنگ های HTML استفاده می کنیم تا متن خود را برجسته نماییم. بدیهی است که این روش تنها در مواردی که نام رنگ ها را می دانیم ، امکان پذیر است و می تواند برای رنگ های خاص دشوار باشد که در این صورت می توانیم با کد HEX یا مقدار RGB کار کنیم. صرف نظر از این ، شما می توانید از لیست کامپایل شده توسط کدهای رنگی 140 HTML color names استفاده کنید.

استفاده از iFrame ها در HTML

در یک سند HTML ، یک (iFrame (frame inline  می تواند برای جاسازی یک فایل در سند فعلی مورد استفاده قرار گیرد. در اصل ، شما می توانید iframe را برای نشان دادن یک وب سایت یا محتوای دیگر از یک صفحه وب دیگر در داخل صفحه فعلی استفاده کنید.

مثال

<iframe src="https://websitesetup.org"></iframe>

با استفاده از کد بالا ، ما به مرورگر می گوییم که محتویات https://websitesetup.org را در یک قاب (frame) به طور مستقیم در داخل این صفحه نمایش دهد.

فریم ها را می توان برای نمایش یک وب سایت ، ویدیو ، تصاویر یا هر نوع دیگری از محتوا مورد استفاده قرار داد.

شما می توانید جهت سفارشی سازی بیشتر از مقادیر خاص ، مانند ارتفاع و عرض ، iframe خود استفاده کنید.

مثال

<iframe src="URL" height="350px" width="400px"></iframe>

با این کار ما به مرورگر می گوییم که برای نمایش iframe از ارتفاع 350 پیکسل و عرض 400 پیکسل استفاده کند.

فونت ها در HTML

در آموزش برنامه نویسی HTML ، درک چگونگی کار با فونت ها برای ایجاد اسناد HTML کارآمدتر ، ضروری است. فونت ها ، اندازه متن شما را تنظیم می کنند. هم چنین رنگ و قلم (یا نوع فونت) محتوای شما را تغییر می دهند.

برای نشان دادن فونت سند HTML ، شما باید از تگ <font>  استفاده کنید. می توانید با استفاده از “size” "color" یا "face" اندازه فونت ، رنگ فونت یا قلم را تنظیم کنید.

مثال برای تنظیم اندازه

<font size = "6">Display this text using the font size 6</font>

در این مثال ، ما به مرورگر می گوئیم که متن ما را با استفاده از اندازه فونت 6 نمایش دهد. مهم است که توجه داشته باشیم که محدوده اندازه فونت پذیرفته شده 1 تا 7 است. هر مقداری که بالاتر از 7 باشد ، به صورت خودکار به اندازه فونت 7 تنظیم می شود. اندازه فونت پیش فرض 3 است

مثال برای رنگ فونت

<font color = "blue">Display our text in the blue color</font>

ما با استفاده از تگ <font>  از مرورگر درخواست می کنیم تا متن ما به رنگ آبی نمایش دهد. در این مثال ، از نام رنگ (“blue”) استفاده کردیم. اگر بخواهید ، می توانید آن را با کد HEX یا مقدار RGB جایگزین کنید.

مثال برای قلم

آیا شما قلم Verdana را به جای Times New Romans ترجیح می دهید؟ نحوه تنظیم آن به صورت زیر است:

<font face = "Verdana">Kindly display this text in the Verdana font</font>

ما به مرورگر می گوییم که متن ما را در فونت Verdana نمایش دهد. شما می توانید به سادگی مقدار font face را برای نشان دادن فونت هایی که می خواهید استفاده کنید ، تغییر دهید.

قلم جایگزین

مهم است که توجه داشته باشید که افرادی فقط قادر خواهند بود متن شما را در فونت مشخص شده ، مشاهده نمایند که فونت موردنظر را به صورت نصب شده در رایانه خود داشته باشند. در غیر این صورت ، قلم پیش فرض - معمولاً Times New Roman   - نمایش داده خواهد شد. به همین دلیل است که به شدت توصیه می شود از فونت های “web safe” استفاده کنید.

مثال

<font face = "Verdana, Helvetica, Arial, Comic Sans">Kindly display this text in the Verdana font first, or Helvetica, or Arial, or Comic Sans… in that order, if the main font is not available</font>

ما به مرورگر دستور دادیم متن را در Verdana نشان دهیم. اگر Verdana در دسترس نیست ، به جای بازگشت به مقدار پیش فرض یعنی Times New Romans ، می تواند Helvetica، یا Arial نشان دهد و در صورت در دسترس نبودن آنها از Comic Sans استفاده کند.