HTML به زبان ساده (جلسه آموزشی سوم)
سرفصل‌ها (headings) در HTML با تگهای <h1> تا <h6> مشخص می‌شوند. از تگ <h1> برای تعریف سر فصل با درشت‌ترین فونت و از <h6> برای ریزترین فونت استفاده می‌شود.
مثال 1: یک فایل خالی ایجاد و کدهای زیر را در آن وارد و در مرورگر خود باز کنید:
<html>
<body>
<h1>This is a (h1) heading</h1>
<h2>This is a (h2) heading</h2>
<h3>This is a (h3) heading</h3>
<h4>This is a (h4) heading</h4>
<h5>This is a (h5) heading</h5>
<h6>This is a (h6) heading</h6>
</body>
</html>
نتیجه مانند تصویر زیر خواهد بود:
چند نکته در رابطه با headingها:
• از تگهای h1 تا h6 فقط برای تعریف سرفصل‌ها در متن استفاده کنید. هیچ وقت از این تگ‌ها برای اینکه بخشی از متن را برجسته (bold) نمایید، استفاده نکنید! زیرا موتورهای جست و جو مثل گوگل، از سرفصل‌ها استفاده می‌کنند تا ساختار و محتوای یک سایت را شاخص گذاری کند.
• وجود سرفصل ها مهم است! کاربران زمانی که از سایتتان بازدید می‌کنند، با مشاهده سرفصل ها به آسانی می فهمند سایتتان درباره چیست!
• بهتر است از تگ h1 برای سرفصل اصلی، از h2 برای سرفصل‌های فرعی، از h3 برای سرفصل‌های با درجه اهمیت کمتر (و به همین ترتیب تا h6) استفاده کنید.
تگ <hr>:
به زبان خیلی ساده، این تگ یک خط افقی در صفحه ایجاد می‌کند.
مثال2:
<html>
<body>
<p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
<hr><p>This is a paragraph</p>
<html>
<body>
از این تگ می‌توان برای جدا کردن عناصر در صفحه استفاده کرد.
نوشتن توضیحات در HTML:
اگر تجربه برنامه نویسی داشته باشید، حتما با کامنت‌ها آشنا هستید. اگر نه، باید عرض کنم که توضیحات (comment) همان طور که از نامش پیداست، باعث می‌شوند که کدها خواناتر و قابل فهم‌تر شوند.
ویژگی مهم توضیحات این است که کامنت‌ها از سوی مرورگرها نادیده گرفته می‌شوند و نمایش داده نمی‌شوند.
استفاده از کامنت‌ها باعث می‌شود که نگه داری کد ساده‌تر شود؛ تصور کنید که بعد از چند ماه کدهای خود را بخواهید تغییر دهید. اگر از کامنت‌ها استفاده مناسب نکرده باشید، احتمالا باید زمانی صرف کنید تا کدها را درک کنید (این قضیه موقعی که تعداد خطوط کدها زیاد می‌شود، بیشتر به چشم می آید.).
اما قالب استفاده از کامنت‌ها به صورت زیر است:
<html>
<body>
<– This comment will not be displayed –!>
<p>This is a regular paragraph</p>
</body>
</html>
کامنت‌ها، با کاراکترهای <!– شروع می‌شوند و با –> به پایان می‌رسد. کامنت‌ها را میتوانید هر جایی از کد که خواستید استفاده کنید.
اما می‌رسیم به سوال‌های آرزو خانوم از طرفدارای پر و پا قرص برنامه (!):
1- ما می‌توانیم دابل کوتیشن رو به جای سینگل کوتیشن هم استفاده کنیم و برعکس حالا هر جا که دلمان خواست!
جواب: بله… در متن جلسه دوم هم عرض کردم که مقدار صفت ها باید بین دو کاراکتر ” و یا ‘ قرار بگیرد.
مثل:
Name=”value”
یا
Name=’value’
این بستگی به شما دارد که از کدام یکی استفاده کنید! یا دابل کوتیشن و یا سینگل کوتیشن!
2- برای مورد خاص هم یعنی اگر بخواهیم دابل کوتیشن رو در صفحه نمایش نشان دهم، از سینگل کوتیشن برای کل عبارت استفاده کنیم!؟
جواب: بله… یک زمانی که متن ما خودش دارای کاراکتر دابل کوتیشن (“) هست! خب وقتی خود متن شامل ” باشد و ما هم در پایان متن از ” استفاده کنیم، مرورگر گیج خواهد شد!!
چرا؟! چون مرورگر زمان خواندن کدها برای نمایش، وقتی با اولین ” برخورد کرد، فکر می‌کند متن اینجا تمام می‌شود درصورتی گه این طور نیست! مثال:
name = “amir ” hossein”.
در مثال بالا، مرورگر وقتی به name می رسد انتظار یک رشته بین دو کاراکتر ” را دارد! اما اتفاقی می‌افتد که بعد از خواندن amir، به کاراکتر ” رسیده و تصور می‌کند متن اینجا تمام خواهد شد! پس مقدار name برابر amir می‌شود! بعد از آن، به کاراکترهای hossein می‌رسد و از خودش می‌پرسد پس این کاراکترها چی هستند؟!
برای این که این اتفاق‌های ناخواسته نیوفتد، از تک کوتیشن استفاده می‌شود!
3- برای استفاده در جاهای دیگر از پاراگرافی که اسمش را first_paragraph گذاشتیم باید چطور عمل کنید؟ یعنی از چه کدی استفاده کنیم تا فراخوانی شود؟ اصلا کجاها می‌شود از آن استفاده کرد؟ و چه مدلی؟
جواب: عجله نداشته باشید! در زبان‌هایی مثل جاوا اسکریپ یا PHP و یا حتی jQuery و البته CSS از طریق همین نام گذاری‌ها به تگ‌ها دسترسی پیدا می‌کنیم!
برای روشن شدن موضوع یک مثال ساده بزنم! از CSS برای استایل دادن به کدهای HTML استفاده می‌شود. مثال رنگ دادن یا قرار دادن یک تصویر در بک گراند صفحه، تغییر دادن فونت نوشته‌ها، تغییر دادن رنگ نوشته‌ها، چپ چین یا راست چین کردن متن‌ها و…
تمامی این کار به وسیله کدهایی که به کدهای HTML اضافه می‌شوند، انجام خواهد شد.
با علامت گذاری تگ‌ها بوسیله id منحصربفرد، به‌راحتی می‌توانیم تگ‌ها را از هم تشخیص بدهیم. به عنوان مثال، می‌توانیم بگوبیم تگ p با شناسه (id) برابر با fire_paragraph، فونت و رنگش چی باشد.
این که چطور فراخونی می‌شود یا کجا استفاده می‌شود، بحث الان نیست! عجول نباشید. آسیاب به نوبت! در HTML ما کاری به این کارها نداریم!!
4- هرموقع از id استفاده کردیم یعنی اینکه بهش اسم دادیم یا آدرس یا بخشی از حافظه را به آن اختصاص دادیم یا چیز دیگر؟
جواب: نه حافظه‌ای به آن اختصاص نمی‌دهیم. بگذارید id را یک جور دیگذ براتون بگویم! در واقع با id، ما تگ‌ها را “برچسب گذاری” می‌کنیم. با این کار، هر تگی یک نامی دارد که ما با آن نام می‌شناسیم. همین!
بحث اختصاص حافظه در زبان‌های برنامه نویسی به این مفهوم هست که ما به عنوان برنامه نویس، بخش کوچکی از حافظه اصلی را در اختیار می‌گیریم، نام گذاری می‌کنیم و در آن مقدار قرار می‌دهیم (از عدد گرفته تا رشته و…). این بخش از حافظه تا زمانی که برنامه ما درحال اجرایش در اختیار ماست و بعد از تمام شدن برنامه آزاد می‌شود.
ما در HTML با حافظه کاری نداریم. اگذ یادتون باشد در جلسه اول گفتم که HTML زبان برنامه نویسی نیست! فقط یک زبان نشانه گذاری هست!
5- منظور از ” سمت گیرنده ” و ” سمت سرور ” چیست؟
سرور، کامپیوترهای قدرتمندی هستن که یک سایت بر روی آن قرار می‌گیرد. سرورها باید همیشه فعال باشند تا سایت شما قابل دسترسی باشد.
زمانی که شما از طریق مرورگرتان یک سایت را درخواست می‌کنید، مثلا www.itresan.com، صفحات این سایت از سرور درخواست می‌شود و بر روی مرورگر کاربران یا همان گیرنده نمایش داده می شود! جاوا اسکریپت یک زبان سمت گیرنده هست! چراکه کدهای آن بر روی کامپیوتر کاربر اجرا می‌شود و هیچ کاری با سرور ندارد.
اما PHP یک زبان سمت سرور هست! چرا که کدهای آن بر روی سرور اجرا می‌شود و نتیجه به‌صورت کدهای HTML به سمت گیرنده اسال می‌شود. کاربران هیچ وقت قادر به دیدن کدهای PHP نیستند!
برای این که ماجرا شفاف‌تر شود، فرض کنید تکه کدی داشته باشیم که ساعت را نمایش می‌دهد.
اگر این تکه کد را به زبان جاوا اسکریپت بنویسیم، ساعتی که نمایش داده می‌شود، ساعت کامپیوتر خودمان است. چون کد جاوا اسکریپت مورد نظر روی کامپیوتر خودمان اجرا شده. درسته؟
اگر این تکه کد را به زبان PHP بنویسیم، ساعتی که نمایش داده می‌شود، ساعت سرور هست. چون کد مورد نظر روی کامپیوتر سرور اجرا شده و نتیجه به سمت کامپیوتر ما فرستاده شده! باز هم درسته؟!!
6- چطور می‌توانم ارورها را بگیرم وقتی که مرورگر هیچ اروری نمی‌دهد و یا در زمان ذخیره هم ارور نمی‌دهد؟
در HTML چیزی به نام ارور وجود ندارد! تنها اتفاقی که می‌افتد این است که درصورتی که تگ‌ها را درسته استفاده نکنید، مرورگر در نمایش صحیح سایت با مشکل مواجه می‌شود.
این نکته را باید بدونید که کسی در نوت پد کد نمی‌نویسد! ما به این دلیل از نوت‌پد استفاده می‌کنیم که در اثر نوشتن زیاد، تگ‌ها را یاد بگیرید. نرم افزارهای زیادی هستند که در نوشتن کدها کمک زیادی به شما می‌کنند.
راه گرفتن ارورها، نوشتن کد و آزمایش آن در مرورگر و دیدن نتیجه هست.
مهمترین نکته در HTML برای اینکه با مشکلی برخورد نکنید، همان است که خدمتتون عرض شد:
1- بستن تگ‌هایی که باز می‌کنید.
2- رعایت کردن ترتیب بسته شدن تگ‌ها در زمان استفاده از تگهای تو در تو (تگی که زودتر باز می‌شود، دیرتر بسته خواهد شد).
khorshide toos
