کار با لینک ها در HTML قسمت دوم
کار با لینک ها در HTML
آدرس دهی فایل ها در HTML
آدرس دهی فایلها در HTML چیست و آدرس‌ها چه تفاوتی با یکدیگر دارند؟ تفاوت آدرس فایل‌های وابسته و مطلق چیست؟ برای دستیابی به پاسخ این سوالات این مقاله را از دست ندید و تا پایان با ما همراه باشید.
- 1 آشنایی با آدرس فایلها
- 2 انواع آدرس دهی فایلها
- 2.1 آدرس دهی فایل‌های مطلق
- 2.2 آدرس دهی فایل های وابسته
- 2.3 مسیر دهی رو به عقب و جلو
- 3 تمرین کنیم
آشنایی با آدرس فایلها
مسیر‌های فایل یا File Path در وب تعیین‌کننده محل فایل داخل پوشه‌های هاست وب سایت شما است. این آدرس به مرورگر کمک می‌کند تا به فایل مورد نظر دست پیدا کند.
آدرس‌دهی فایل زمانی استفاده می‌شود که قصد استفاده از یک منبع بیرونی مانند عکس، ویدیو، استایل، فایل جاوا اسکریپت، نمایش سایر صفحات وب و غیره را داشته باشید.
برای اضافه کردن یک فایل به صفحه وب، فایل منبع باید از قبل تعیین شده و شناخته شده باشد، به عنوان مثال کد <img src=”” alt=””> برای اضافه کردن یک فایل عکس به صفحه وب استفاده می‌شود که در کد بالا آدرس فایل عکس در خاصیت src قرار می‌گیرید.
قابل توجه هست که با File Path ها پیش‌تر در مقالهآشنایی با تگ <a> تا حدودی آشنا شدیم. با این‌حال در این مقاله تخصصی‌تر آن را مورد بررسی قرار می‌دهیم.
انواع آدرس دهی فایلها
آدرس فایل ها به دو بخش تقسیم می‌شوند:
- آدرس فایل‌های مطلق
- آدرس فایل‌های وابسته
آدرس دهی فایل‌های مطلق
بیانگر آدرس کامل (URL) فایل داخل اینترنت می‌باشد، مانند :
<img src=”https://FARAZNETWORK.com/blog/wp-content/uploads/2019/04/filepath.jpg” alt=”My Image”>
تگ <img> که در نمونه کد بالا استفاده کنیم در مقاله آشنایی با تگ <img> مورد بررسی قرار گرفته شده است و وظیفه آن نمایش تصاویر در صفحات وب است.
آدرس دهی فایل های وابسته
به آدرس فایل قرار گرفته در صفحه فعلی وب اشاره دارد.
مثال 1 نشان دهنده آدرس یک فایل در فولدر تصاویر صفحه فعلی است:
<!DOCTYPE html>
<html>
<head>
<title>Relative file path</title>
</head>
<body>
<h2>File present in a folder above the current folder</h2>
<img src="../images/geeks.jpg" alt="My Image" style="width:400px">
</body>
</html>
مثال 2 نشانگر آدرس‌دهی فایل در فولدر بالای این صفحه می باشد که صفحه فعلی وب زیر مجموعه این فولدر است:
<!DOCTYPE html>
<html>
<head>
<title>Relative file path</title>
</head>
<body>
<h2>File present in a folder which is located at
<br>the root of the the current subdirectories</h2>
<img src="/images/picture.jpg" alt="My Image" style="width:400px">
</body>
</html>
مثال 3 نمایانگر آدرس‌دهی فایل در مسیر روت فولدر زیر مجموعه صفحه فعلی است:
<html>
<head>
<title>Relative file path</title>
</head>
<body>
<h2>File present in a folder which is located at
<br>the root of the the current subdirectories</h2>
<img src="/images/picture.jpg" alt="My Image" style="width:400px">
</body>
</html>
کاربا لینک ها
مسیر دهی رو به عقب و جلو
برای آدرس‌دهی وابسته در داخل ساختار پوشه‌های صفحه فعلی از روش‌های زیر استفاده می‌کنیم:
- شروع آدرس با “/” از مسیر روت صفحه فعلی آغاز می‌کند.
- شروع آدرس با “../” به یک فولدر به عقب حرکت می‌کند.
- شروع آدرس با “../../” به دو فولدار به عقب حرکت می کند. (برای حرکت رو به عقب فولدار های بیشتر به همین منوال ادامه می‌یابد.)
تا اینجا با انواع مسیر‌دهی‌ها آشنا شدید. برای تمرین بیشتر و یادگیری چگونگی آدرس‌دهی کردن، در فضای محلی یا Localhost خود می‌توانید پوشه های تو در تو ایجاد کنید و فایل‌های مختلفی را از طریق اسناد HTML خود فراخوانی کنید.
اگر با دقت مسیر‌دهی‌ها را وارد کنید به هیچ مشکلی بر نمی‌خورید ولی اگر هم به مشکل خوردید هم آنقدر تلاش کنین تا بالاخره تصویر یا فایل در سند HTML شما فراخوانی شود.
کار بالینک ها URL Encode در HTML
رمزنگاری لینک یا URL Encode در HTML چیست و چه کاربردی دارد؟ آیا در HTML کاراکتر‌های ویژه نیز پشتیبانی می‌شوند؟ در این مقاله به آشنایی رمزنگاری لینک‌ها صحبت می‌کنیم.
1 کار با URL Encode در HTML
- 1.1 آشنایی با URL
- 1.2 کاربردی‌ترین Scheme ها
- 1.3اینکود کردن URL
- 1.4 کاراکتر‌های کنترل ASCII
- 1.5 کاراکتر های کنترل غیر ASCII
- 1.6 کاراکتر‌های رزرو شده یا از پیش تعیین شده
- 1.7 کاراکتر‌های ناامن
کاربا لینک ها
کار با URL Encode در HTML
قبل از اینکه با اینکد کردن URL آشنا شویم بهتر است که با مفهوم واژه URL آشنا شویم و متوجه شویم که چه بخش‌هایی را شامل می‌شوند.
واژه URL مخفف کلمه Uniform Resource Locator می‌باشد و ساختار یک URL مثل https://FARAZNETWORK.com/blog/file-path-html به صورت کل به شکل زیر می‌باشد:
scheme://prefix.domain:port/path/filename
خش Scheme – به معنی نوع سرویس اینترنت می‌باشد. (معروف‌ترین سرویس‌ها http و https می‌باشد.)
بخش Prefix -بیانگر پیشوند های قبل از دامنه اینترنتی است. (مانند www و همچنین در بیشتر اوقات ساب دامنه)
بخش Domain – اشاره گر دامنه اینترنتی می‌باشد. (مثلا faraznetwork.com)
بخش Port – به معنی شماره پورت در میزبان می‌باشد. (به صورت پیشفرض عدد ۸۰ برای پورت‌ها تعیین می‌شود).
بخش Path – به معنی پوشه‌ای درون سرور می‌باشد. (اگر این بخش در لینکی وجود نداشت به معنی این است که محتوا در فضای root ذخیره شده است).
بخش FileName – به معنی نام سند منبع ما می‌باشد.
کاربردی‌ترین Scheme ها
در جدول زیر لیست کاربردی‌ترین Schemeهای موجود را مشاهده می‌کنید:
| Scheme | کوتاه شده‌ی کلمه : | استفاده برای : |
| http | HyperText Transfer Protocol | صفحات وب عادی – رمزنگاری نشده |
| https | Secure HyperText Transfer Protocol | صفحات وب امن – رمزنگاری شده |
| ftp | File Transfer Protocol | دانلود و آپلود فایلها در سرور |
| file | آدرس یک فایل در کامپیوتر |
اینکد کردن URL
اینکد کردن URL روشی است برای ترجمه کاراکتر‌های غیرقابل چاپ و یا کاراکتر‌های با معنای خاص در داخل URL که آدرس تبدیل شده به صورت یکپارچه و جهانی مورد پذیرش سرور‌ها و مرورگر‌های وب است.
این کاراکتر‌های خاص عبارت اند از:
کاراکتر‌های کنترل ASCII
در واقع کاراکتر‌های غیرقابل چاپی هستند که برای کنترل خروجی استفاده می‌شوند.
کاراکتر های کنترل غیر ASCII
کاراکتر‌های خارج از دامنه ASCII (128 کاراکتر) در این دسته قرار می‌گیرند.
کاراکتر‌های رزرو شده یا از پیش تعیین شده
این کاراکتر‌های خاص هستند مانند علامت دلار، جمع و تفریق و… . قرار گرفتن این کاراکتر به صورت مستقیم داخل URL باعث ایجاد تغییر در معنای آدرس می‌شود به همین دلیل باید اینکد شوند.
کاراکتر‌های ناامن
کاراکتر‌هایی مانند فاصله، علامت سوال، علامت بزرگتر و کوچکتر و … . باعث بروز مشکل در اصل URL خواهند شد.
در فرآیند اینکد، کاراکتر‌های غیر مجاز با سه کاراکتر دیگر جا به جا می‌شوند. این سه کاراکتر شامل یک علامت درصد و دو عدد هگزادسیمال است که به موقعیت کاراکتر در ASCII اشاره دارد.
مثال
یکی از رایج ترین کاراکتر‌های غیر مجاز در URL، کاراکتر فاصله است. شما نمی‌توانید یک فاصله را درURL به صورت مستقیم قرار دهید. در آدرس زیر فاصله به عدد دسیمال 20 تبدیل شده است.
http://www.example.com/new%20pricing.htm
آدرس بالا در واقع به صفحه new pricing.htm اشاره دارد.
خب به پایان این جلسه آموزش اچ تی ام ال رسیدیم.
مطالب مرتبط :
2- کار با تصاویر در HTML قسمت اول
جهت مشاهده دوره های آموزشی بر روی این لینک کلیک نمایید.
جدیدترین اخبار مجموعه فراز نتورک را در این صفحه اجتماعی دنبال کنید.
نویسنده: راحله تبریزی
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.