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

قسمت قبلی

در این قسمت، مفاهیم مربوط به مرورگر، مفسر، نقش HTML در وب و برخی تگ‌های جدید HTML را مورد بررسی قرار می‌دهیم.

مرورگر وب چیست؟

مرورگر وب نرم‌افزاری است که امکان دریافت فایل‌ها از وبسایت‌ها و نمایش آن‌ها به کاربران را فراهم می‌کند.

در حقیقت، مرورگر وب به‌عنوان یک مفسر برای فایل‌های HTML، CSS و JavaScript عمل کرده و این فایل‌ها را به صورت گرافیکی برای کاربران به نمایش می‌گذارد.

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

همچنین مرورگرهای وب امکاناتی نظیر ذخیره رمزهای عبور، مدیریت کوکی‌ها، ذخیره‌سازی اطلاعات فرم‌ها و موارد دیگر را در اختیار کاربران قرار می‌دهند.

شبکه چیست؟

شبکه به گروهی از کامپیوترها یا دستگاه‌ها گفته می‌شود که به‌منظور به اشتراک‌گذاری اطلاعات و منابع، به یکدیگر متصل شده‌اند. شبکه‌ها می‌توانند در اندازه‌های مختلف باشند؛ از شبکه‌های کوچک داخلی (LAN) گرفته تا شبکه‌های بزرگ جهانی مانند اینترنت.

اینترنت چیست؟

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

وب چیست و چه کسی آن را کنترل می‌کند؟

وب (World Wide Web یا WWW) مجموعه‌ای عظیم از صفحات وب است که از طریق اینترنت قابل دسترسی هستند. این صفحات شامل اطلاعات متنی، تصاویر، ویدئوها و دیگر انواع محتواها می‌باشند. وب توسط یک نهاد یا سازمان خاص کنترل نمی‌شود؛ بلکه مجموعه‌ای از پروتکل‌ها و استانداردها وجود دارد که به‌صورت جهانی به تصویب رسیده‌اند و هر کسی می‌تواند با رعایت آن‌ها صفحات وب خود را ایجاد کند.

صفحه وب، وب‌سایت، صفحه خانه چیست؟

- صفحه وب: یک سند یا فایل است که از طریق مرورگر قابل مشاهده است و معمولاً با HTML نوشته می‌شود.
- وب‌سایت: مجموعه‌ای از صفحات وب مرتبط است که تحت یک دامنه واحد در دسترس قرار دارند.
- صفحه خانه: اولین صفحه‌ای است که کاربران هنگام مراجعه به یک وب‌سایت مشاهده می‌کنند. این صفحه معمولاً به عنوان ورودی اصلی به دیگر بخش‌های سایت عمل می‌کند.

نقش HTML در وب‌سایت‌ها چیست؟

HTML یا HyperText Markup Language زبان استانداردی است که برای ساختاردهی و نمایش محتوا در صفحات وب استفاده می‌شود. HTML تعیین می‌کند که چگونه متن، تصاویر، لینک‌ها و دیگر عناصر در صفحه وب به نمایش درآیند.

هایپرلینک چیست؟

هایپرلینک یا لینک، عنصری در HTML است که به کاربران امکان می‌دهد از یک صفحه وب به صفحه‌ای دیگر یا بخش‌های مختلف یک صفحه منتقل شوند. لینک‌ها معمولاً به‌صورت متنی یا تصویری ظاهر می‌شوند و کاربر با کلیک بر روی آن‌ها به مقصد مورد نظر هدایت می‌شود.

آدرس‌دهی در HTML

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

دو نوع آدرس دهی در وجود دارد. آدرس دهی نسبی و آدرس دهی مطلق.

آدرس دهی نسبی به این معناست که با توجه به پوشه فعلی فایل، لینک دهی کنیم.
برای مثال یک فایل به نام index.html داریم که الان داخل آن هاستیم اگر بخواهیم عکسی را نمایش بدهیم با نام pic.png که کنار فایل index.html هست میتوانیم آدرس دهی نسبی رو انجام بدهیم و نام و پسوند عکس رو بجای آدرس بنویسم و نیازی آدرس کامل نیست. و اگر فایل را از کنار فایل اصلیمون ورداریم عکس دیگر نمایش داده نخواهد شد.

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

تگ‌های جدید این قسمت

در این قسمت به بررسی تگ‌های جدید HTML که می‌توانند کاربردهای مفیدی در طراحی صفحات وب داشته باشند، می‌پردازیم:

تگ pre

تگ <pre> برای نمایش متن به‌صورت پیش‌فرمات‌شده استفاده می‌شود. این تگ به مرورگر دستور می‌دهد که فضاها و خطوط جدید موجود در متن را دقیقاً همان‌طور که در کد نوشته شده‌اند، نمایش دهد. معمولاً از این تگ برای نمایش کدهای برنامه‌نویسی یا محتوایی که نیاز به قالب‌بندی دقیق دارد، استفاده می‌شود.

تگ style

تگ <style> برای نوشتن استایل‌های CSS در داخل سند HTML استفاده می‌شود. با استفاده از این تگ، می‌توان استایل‌های مربوط به اجزای صفحه را مستقیماً در خود HTML تعریف کرد.

تگ q

تگ <q> برای نمایش نقل‌قول‌های کوتاه به کار می‌رود. محتوای داخل این تگ به‌طور خودکار با علامت نقل‌قول (") محصور می‌شود.

تگ u

تگ <u> برای زیرخط‌دار کردن متن استفاده می‌شود.

تگ del

تگ <del> برای نمایش متنی که حذف شده یا دیگر معتبر نیست، به کار می‌رود. این تگ معمولاً متن را به‌صورت خط‌خورده نمایش می‌دهد.

بخش‌بندی صفحه با لینک

گاهی لازم است که یک صفحه بزرگ وب به بخش‌های مختلفی تقسیم شود و کاربر بتواند با استفاده از لینک‌ها به بخش‌های مختلف صفحه هدایت شود. این کار با استفاده از لینک‌های درونی (Anchor Links) امکان‌پذیر است که با استفاده از شناسه‌های اختصاصی (ID) در HTML صورت می‌گیرد.

ویژگی‌های جدید تگ‌ها

در این قسمت، به بررسی چند صفت مهم که می‌توانند در تگ‌های HTML استفاده شوند، می‌پردازیم:

صفت title

صفت title متنی را تعیین می‌کند که هنگام قرار گرفتن نشانگر موس روی یک عنصر HTML نمایش داده می‌شود. این ویژگی می‌تواند برای توضیح دادن محتوای لینک یا یک عنصر دیگر به‌کار رود.

صفت target

صفت target تعیین می‌کند که لینک یا فرم در کجا باز شود. به‌عنوان مثال، با تنظیم "target="_blank لینک در یک زبانه یا پنجره جدید مرورگر باز می‌شود.

صفت lang

صفت lang زبان محتوای داخل تگ را مشخص می‌کند. این ویژگی می‌تواند به موتورهای جستجو و مرورگرها کمک کند تا محتوای سایت را بهتر پردازش کنند.

صفت alt

صفت alt برای توصیف تصاویر استفاده می‌شود. این صفت به‌عنوان جایگزین متنی برای تصویر عمل می‌کند و در صورتی که تصویر بارگذاری نشود، این متن نمایش داده می‌شود. همچنین صفت alt برای بهبود دسترس‌پذیری و سئو نیز اهمیت دارد.

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

پایان قسمت بعدی