0

بلاگ

سایت اموزشی زرین لرنبلاگمقالاتHTML Uniform Resource Locators

HTML Uniform Resource Locators

7 تیر 1404
ارسال شده توسط
مقالات
39 بازدید

🌐 HTML Uniform Resource Locators (URL)

1. URL چیست؟

URL یا Uniform Resource Locator، آدرس منحصربه‌فرد یک منبع (مثل یک صفحه وب، تصویر، فایل، ویدئو و…) روی اینترنت یا شبکه است.

2. نقش URL در HTML

  • لینک‌ها (<a href="...">): برای آدرس‌دهی به صفحات یا منابع دیگر

  • تصاویر (<img src="...">): مشخص کردن آدرس عکس

  • فایل‌های CSS و JS (<link href="...">, <script src="...">)

  • منابع دیگر مثل فونت‌ها، ویدئوها و…

3. ساختار کلی URL

scheme://host:port/path?query#fragment

بخش               توضیح              مثال
scheme پروتکل ارتباطی http, https, ftp, mailto
host نام دامنه یا IP سایت example.com
port شماره پورت (اختیاری، معمولاً 80 یا 443) :80, :443
path مسیر فایل یا صفحه /index.html, /images/pic.png
query پارامترهای اضافی (اختیاری) ?id=10&cat=4
fragment بخش خاصی از صفحه (اختیاری) #section2

4. انواع URL در HTML

4.1. URL کامل (Absolute URL)

آدرس کامل با پروتکل و دامنه:

<a href=“https://www.example.com/page.html”>صفحه مثال</a>
<img src=“https://www.example.com/images/pic.png” alt=“تصویر”>

4.2. URL نسبی (Relative URL)

آدرس نسبت به مکان فایل HTML فعلی:

<a href=”page.html”>صفحه داخلی</a>
<img src=“images/pic.png” alt=“تصویر داخلی”>

5. نکات مهم درباره URL در HTML

  • برای لینک‌های خارجی حتما پروتکل (http:// یا https://) را وارد کنید.

  • برای لینک‌های داخلی از مسیرهای نسبی استفاده کنید تا سایت انعطاف‌پذیرتر باشد.

  • در URL نباید از فاصله یا کاراکترهای خاص استفاده کنید؛ اگر لازم است از کدگذاری URL (URL Encoding) استفاده کنید (مثلاً فاصله به %20 تبدیل می‌شود).

  • می‌توانید با target="_blank" لینک را در تب جدید باز کنید:

<a href=”https://example.com” target=”_blank”>باز کردن در تب جدید</a>

6. نمونه کد HTML با URL

<!DOCTYPE html>
<html lang=“fa”>
<head>
<meta charset=“UTF-8”>
<title>مثال URL در HTML</title>
</head>
<body>
<h1>مثال لینک‌ها و تصاویر با URL</h1>

<!– لینک کامل –>
<a href=“https://www.google.com” target=”_blank”>گوگل</a>

<!– لینک نسبی –>
<a href=“about.html”>درباره ما</a>

<!– تصویر با URL نسبی –>
<img src=“images/logo.png” alt=“لوگو”>

</body>
</html>

 

برچسب ها:
در تلگرام
کانال ما را دنبال کنید!
Created by potrace 1.14, written by Peter Selinger 2001-2017
در آپارات
ما را دنبال کنید!

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید