آناتومی یک صفحه وب
تا اینجا با تاریخچه اینترنت و اچ تی ام ال، شیوه نوشتاری آن و برخی کاربردهای این زبان آشنا شدیم. حال بهتر است قبل از ادامه دروس، کمی به کار عملی بپردازیم و بهتر با ساختار یک صفحه وب و آنچه در زیر پنهان است، آشنا شویم.
در این درس به آناتومی یک صفحه وب نگاهی می اندازیم و به صورت ساده با شاکله و مصالح سازنده یک سایت آشنا می شویم. حتی اگر خودتان قرار نیست کدهای صفحه اینترنتی تان را بنویسید و سایت تان را راه اندازی کنید، باز هم آشنایی با برخی اصول اولیه لازم و ضروری به نظر می رسد. مخصوصا که اگر بخواهید کارهایی مانند بهینه سازی برای موتورهای جستجو یا عیب یابی سایت در مواقع ضروری را خودتان انجام دهید.
خب، آستین ها را بالا زده و دست به کار شوید. صفحه وب مورد نظرتان را در مرورگر باز کنید. حال در منوی View یا زیر منوهای آن به دنبال گزینه ای شبیه View Source باشید. با انتخاب این گزینه، صفحه ای باز می شود که حاوی کدهای اچ تی ام ال وب سایت مورد نظر شما است. هم اکنون شما کاپوت را بالا زده اید و مشغول نگاه کردن به داخل یک صفحه وب هستید.
به نظر حسابی شلوغ و به هم ریخته می آید اما نترسید. قدم به قدم با هم جلو می رویم و مخلفات اضافه را کنار می گذاریم.
بگذارید از همان بالا شروع کنیم ببینیم چه خبر است.
<!doctype html>
داک
تایپ در ابتدای یک صفحه وب، همانند اعلامیه غرایی است که به برنامه مرورگر
می گوید این صفحه با چه نسخه ای از زبان اچ تی ام ال نوشته شده است. این
دستور معمولا به صورت مفصل و به شکلی شبیه مورد زیر در ابتدای همه صفحات وب
دیده می شود:
<html> </html>
تقریبا
تمامی صفحات وب بدون استثنا شامل این دو تگ هستند. این کدها همه آنچه را
که در صفحه نوشته می شود را در بر می گیرند و به جز داک تایپ، چیزی خارج از
آنها نخواهد بود. این دو تگ به مرورگر می گویند که: «این یک صفحه اچ تی ام ال است»
بخش هدر یا سر سایت: <head> </head>
هنگامی
که صفحه وب را درون مرورگر می بینید این قسمت معمولا مخفی است و درون سایت
نمایش داده نمی شود. اما اطلاعات لازم درباره صفحه شما را برای مرورگر و موتورهای جستجو مهیا می کند. مهمترین بخش هایی که در هدر قرار دارند، متا تگ ها و تایتل یا عنوان صفحه وب است.
این بخش همچنین به مرورگر می گوید که فایل های CSS و مانند آن را از کجا پیدا کرده و همراه صفحه لود کند. همچنین آدرس اسکریپت هایی که لازم است هنگام باز شدن صفحه اجرا شوند در این قسمت قرار گرفته یا آدرس دهی می شوند.
عنوان صفحه: <title> </title>
هر
عبارتی را که بین دو تگ تایتل تایپ کنید، همان چیزی است که در بالای پنجره
مرورگر، نوشته شده و عنوان صفحه شما خواهد بود. بسیاری از افراد هنگام
نوشتن صفحه سایت شان از قرار دادن این تگ و عنوان صفحه غفلت می کنند. در
موتورهای جستجو هم معمولا همین عنوان انتخابی به عنوان لینک سایت شما نشان
داده شده و کاربر روی آن کلیک می کند. بهتر است که گاهی کلمات کلیدی مهم
سایت را هم درون عنوان جاسازی کنیم تا در موتورهای جستجو نتیجه بهتری
بگیریم. مثلا:
متا تگ ها (Meta tags)
این
تگ ها هم در همان بخش هدر قرار می گیرند. این بخش از سایت، اطلاعاتی را
برای موتورهای جستجو فراهم می آورد تا سایت شما به همان شکل که دوست دارید
ایندکس و ثبت شود. به عنوان مثال، چه کلمات کلیدی (Keyword) درباره سایت
تان انتخاب می کنید، چه توضیحی دوست دارید در لیست نتایج موتور جستجو برای
صفحه وب تان به نمایش درآید و اینکه می خواهید صفحه وب شما کش شود یا خیر و
اطلاعاتی از این دست. دو تگی که باید حتما در بخش هدر وب سایت آنها را
فراموش نکنید، meta keywords و meta description هستند.
- Meta Keywords: این تگ شامل کلمات کلیدی سایت شما است. معنی آنها این است که موتور جستجو چگونه باید به دنبال سایت شما گشته و آن را نمایش دهد.
- Meta Description: عبارتست از یک توضیح موجز و کوتاه در حد ۲۰۰ کاراکتر یا کمتر درباره وب سایت شما. این توضیح معمولا در صفحه نتایج موتور جستجو در زیر لینک قابل کلیک سایت شما در یکی دو خط نوشته می شود، پس بهتر است که همیشه متنی مختصر، اما جذاب و گیرا باشد.
بخش بدنه اصلی سایت: <body> </body>
این
بخش، قسمت اصلی سایت شما است. جایی که محل سکونت آن چیزی است که مردم از
سایت شما می بینند. در دروس آشنایی با اچ تی ام ال و تگ های اولیه اچ تی ام
ال به این بخش زیاد پرداخته ایم. پس به جز چند مورد کلی وقت مان را صرف
معرفی تگ های HTML نمی کنیم و سریع از آن عبور می کنیم.
تگ های سر تیتر: <h1> </h1> و <h2> </2> و <h3> </h3>
تگ
های اچ در واقع موقعیت تیتر ها را درون مطلب مشخص می کنند. اچ یک تیتر
اصلی مطلب شما است. اچ دو زیر تیتر مطلب شما خواهد بود و اچ سه تیتر های
فرعی هستند که درون زیر تیتر جای می گیرند.
تگ اچ یک در بهینه سازی سایت برای موتور های جستجو اهمیت ویژه ای دارد. در هر مطلب باید تلاش کنید که کلمات کلیدی متن درون تگ اچ یک قرار بگیرند. اچ دو هم در درجه بعدی اهمیت از نظر بهینه سازی موتورهای جستجو قرار دارد و بهتر است استفاده از آن را فراموش نکنید.
تگ های تعیین فرمت متن
تگ
های دیگری که احتمالا به وفور در یک صفحه وب استفاده شوند، کدهایی هستند
که شیوه نمایش متن را مشخص می کنند. مثلا تگ <p> </p> برای
مشخص کردن پاراگراف ها به کار می رود و تگ <strong> </strong>
برای تاکید بر بخش های مهم متن با بولد کردن آن استفاده می شوند. در خصوص
تگ های فرمت بندی متن می توانید دوباره به درس آشنایی اولیه با زبان اچ تی
ام ال مراجعه کنید.
علاوه بر این تگ های دیگری را هم ممکن است در یک صفحه وب ببینید. این تگ ها بسته به مورد، برای درج عکس یا لینک، ایجاد لیست های بولت دار و لیست های عددی، یا ایجاد فرم ها استفاده می شوند. همچنین علاوه بر تگ هایی مانند <p> ممکن است طراح از تگ های دیگری هم برای شکل دهی به متون استفاده کرده باشد. برای مثال در سایت درسنامه بیشتر شکل دهی به متن با استفاده از تگ <div> و ارجاع به صفحه استایل شیت (سی اس اس) سایت انجام گرفته است.
در پایین ترین بخش کدها هم که می توانید بسته شدن تگ های اصلی و پایان سایت را ببینید. تگ های <html> یا <body> و عکس ترتیب باز شدن بسته می شوند و معمولا آخرین عبارت هر صفحه وب تگ </html> است.
گشت و گذار میان کدهای یک صفحه وب
برای
جلوگیری از تکرار مکررات، زیاد به کدها و تگ های بخش Body نپرداختیم. اما
بگذارید کمی در سورس کدهای سایت های مختلف سرک بکشیم و ببینیم در آنجا چه
چیزهای جالبی می توانیم پیدا کنیم!
اول از همه سراغ سایت مشهور و پرکاربرد گوگل می رویم. حتما با خود می گویید که یک لوگو، یک کادر جستجو و دو دکمه چقدر کد نیاز دارد که تازه بخواهیم درون آن سرک هم بکشیم! خب، دکمه View Source را بزنید تا ببینیم چه خبر است.
نکته: برای دیدن سورس صفحه در نسخه های جدید فایرفاکس به دنبال چیزی در منوی View نباشید، بلکه بر روی صفحه وب راست کلیک کرده و گزینه View Source را انتخاب کنید.
اوه اوه، اینجا چه خبر است! این همه کد؟ بگذارید آن را کمی مرتب کنیم ببینیم چه هستند.
حالا خیلی بهتر شد. چه جالب، داک تایپ را همانگونه که گفته ایم، خلاصه به کار برده. بعد تگ html، سپس تگ head و بعد هم meta و title را می بینیم. در ادامه یک اسکریپت بلند بالا که وظیفه اش راحت ساختن جستجو برای ما است. مثلا اینکه ۱۰ پیشنهاد بیشتر جستجو شده را درباره عبارت مورد نظر ما، نشان دهد یا اینکه بدون زدن Search جستجو را شروع کند.
حال برویم سراغ Body
همانگونه که می بینید در تگ بادی، رنگ زمینه، رنگ متن، رنگ لینک ها و… را مشخص کرده است. در اولین بخش صفحه لوگوی گوگل در میان تگ h1 قرار گرفته است. بعد از آن کدهای منوی مشکی بالای صفحه گوگل را با تگ li می بینیم. سپس نوبت به کادر و دکمه های جستجو و در نهایت منوی کم رنگ پایین صفحه می رسد. البته در این میان هم دوباره سر و کله چند اسکریپت گنده پیدا می شود.
در بسیاری از سایت ها ممکن است اسکریپت هایی را در میان Body یا Head ببینید که مشترک هستند. کارآیی آنها چیست؟ تعدادی از این اسکریپت ها متعلق به سیستم های آمارگیری و شمارش بازدیدکنندگان سایت هستند، که معروف ترین آنها گوگل آنالیتیکز (Google Analytics) است (برای اطلاعات بیشتر میتوانید به دوره «مبانی گوگل آنالیتیکز» مراجعه کنید). در این اسکرین شات پر و پیمان، همانطور که مشاهده می کنید، هم اسکریپت گوگل آنالیتیکز قرار دارد، هم لینک سایت متر (که یکی از ساده ترین سیستم های آمارگیری وب سایت است) به چشم می خورد و هم پایین تر از آن می توانید کد اسکریپت جمع و جور پلاس وان گوگل را ببینید.
Firebug، کاراگاه پرکار فایرفاکس
حتما
شما هم ترغیب شده اید که کمی در میان سایت های مختلف سرک کشیده و کشفیات
جدید داشته باشید، اما دیدن سورس صفحه و بالا و پایین رفتن درون آن کمی سخت
است. آیا راه بهتری هم برای دیدن کدهای سایت وجود دارد؟ یا اینکه می شود
فقط به کدهای بخش خاصی از یک سایت نگاه بیاندازیم و آنچه را دوست داریم یاد
بگیریم؟
راه حل، استفاده از افزونه بسیار جذاب و کاربردی Firebug در مرورگر فایرفاکس است. با این کار تنها با یک کلیک به کدهای هر بخش از سایت دسترسی خواهید داشت.
برای نصب این افزونه در فایرفاکس به این آدرس رفته و بر روی دکمه Download Now کلیک کنید:. پس از دقایقی در پنجره باز شده، دکمه Install Now را زده و افزونه را نصب کنید. آنگاه با زدن دکمه Restart فایرفاکس تان را ریست کنید.
حالا وقت آن است که به جان سایت مورد علاقه تان بیافتید. با راست کلیک بر روی هر بخش سایت و انتخاب گزینه Inspect Element کدهای اچ تی ام ال مربوط به آن قسمت را در پنجره کوچکی پایین صفحه مرورگرتان خواهید دید.
فراموش نکنید که هدف این نیست که شما برنامه نویس وب بشوید! هدف این است که مبانی اچ تی ام ال و فناوری های اصلی به کار رفته در اینترنت را بیاموزید. بنابراین از تجربه کردن واهمه نداشته باشید و در صفحات مختلف سرک بکشید. اطمینان داشته باشید که چیزهای جالبی کشف می کنید.
اگر قبلا در بیان ثبت نام کرده اید لطفا ابتدا وارد شوید، در غیر این صورت می توانید ثبت نام کنید.