HTML به زبان ساده (جلسه آموزشی دوم)
و اما ادامه آموزش!
اول از همه، جواب تمرین جلسه اول را می‌دهم. همان طور که همگی عزیزان درست حل کردید، برای اضافه کردن یک پاراگراف دیگر کافی است یک بار دیگر از جفت تگ <p> و </p> استفاده کنید.
بنابراین کد به صورت زیر خواهد بود:
<html>
<body>
<p>My first paragraph</p>
<p>My second paragraph</p>
</body>
</html>
سوال!!
به نظر شما در HTML این امکان وجود دارد که در داخل یک تگ، از یک تگ دیگر استفاده کنیم؟!
خب کافی است خودتان امتحان کنید! یک فایل HTML خالی ایجاد کنید (همان‌طور که در جلسه اول گفته شد به‌وسیله نوت پد) و کد بالا را به‌صورت زیر تغییر دهید:
<html>
<body>
<p>My first paragraph <p>My second paragraph </p> </p>
</body>
</html>
فایل رو ذخیره کرده و باز کنید.
حال میتوانید حتما به سوال بالا جواب بدهید. نه؟! جواب این است که بله! می‌توان تگهای HTML را در داخل هم به‌کار برد.
نکته مهم 1: زمانی که تگ‌ها را به‌صورت تو در تو به‌کار می‌برید (مثل کد بالا)، باید یک نکته ساده اما بسیار اساسی را به یاد داشته باشید: تگی که زودتر باز می‌شود، دیرتر بسته می‌شود!
معنی این حرف این است که کد زیر یک کد اشتباه است:
<html>
<body>
<p>
This is my first paragraph.
</body>
</p>
</html>
به این دلیل که تگ body زودتر باز شده و بعد از آن تگ p آمده است. بنابراین ابتدا باید </p> ظاهر شود و سپس </body>. اما در کد بالا اوضاع برعکس است!
نکته مهم 2: اگر پیش‌تر با یکی از زبان‌های برنامه نویسی مثل جاوا یا سی شارپ یا پاسکال یا… کار کرده باشید، حتما با مفهوم کامپایل شدن کد آشنا هستید. اما اگر از قبل تجربه برنامه نویسی نداشته‌اید، باید به زبان ساده بگویم که با کامپایل شدن، کدهای نوشته شده قبل از اجرا شدن، از نظر وجود خطاهای دستوری بررسی می‌شود (مثل اشتباه نوشتن کلمات رزرو شده و…).
از نظر دستوری، کد HTML بالا درست نیست اما باید توجه کنید که HTML فاقد کامپایلر است! یعنی چه؟!!
یک فایل خالی دیگر ایجاد کنید و کدهای بالا را عینا در آن وارد و سپس آن را باز کنید. می‌بینید که مرورگر آن را بدون هیچ مشکل یا پیغام خطایی باز می‌کند.
برای این که کمی موضوع را بیشتر متوجه شوید، این بار کدهای زیر را در فایلی جدید ریخته و باز کنید!
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
این بار هم مرورگرتان کدها را بدون مشکل و به شکل درست نمایش می‌دهد. زیرا مرورگرتان بصورت خود جوش(!) کدهای بالا را به همراه تگهای پایانی در نظر می‌گیرد!
اما شما به عنوان یک طراح سایت هیچ گاه نباید به این موضوع تکیه کنید! زمانی که در حال طراحی یک صفحه وب هستید تعداد تگ‌هایی که باید به‌کار ببرید گاهی بسیار زیاد خواهند شد و اگر در استفاده درست آن‌ها دقت نکنید ممکن است ایرادات ناخواسته‌ای در نتیجه به‌وجود بیاید!
زنگ تفریح!!
نوبتی هم باشه نوبته استراحته! پس پنج دقیقه استراحت کنید و بعد ادامه درس! من هم کمی استراحت کنم!
.
.
.
.
.
خب در ادامه این جلسه با مفهوم Attribute یا صفت آشنا می‌شوید.
Attribute چیست؟
• تگهای HTML می‌توانند صفت داشته باشند.
• صفت‌ها در واقع، اطلاعات اضافی‌تری درباره یک تگ ارایه می‌دهند!
• صفت‌ها همیشه و همیشه در تگ آغازین مشخص می‌شوند.
• ساختار صفت‌ها به‌صورت زوج‌های “نام/مقدار” بکار می‌روند.
به مثال زیر توجه کنید تا بیشتر متوجه شوید:
لینک‌ها در کد HTML به‌وسیله تگ <a> مشخص می‌شوند. آدرس لینک مورد نظر به‌وسیله صفتی به نام href مشخص می‌شود.
کد زیر را در یک فایل جدید قرار داده و اجرا کنید.
<html>
<body>
<a href=”http://www.google.com”>This is a link</a>
</body>
</html>
نتیجه مشابه تصویر زیر خواهد بود:
با کلیک بر روی لینک بالا، به سایت گوگل خواهید رفت!
در واقع، تگ a بدون صفت href نباید بکار برده شود. این href است که مشخص می‌کند آدرس لینک مورد نظر چیست!
برای امتحان کافی است یک بار تگ a را بدون صفت href به‌کار ببرید.
نکته 1: یادتان باشد که در صفت‌ها، مقدار باید همواره بین دو “ (دابل کوتیشن) و یا دو ‘ (سینگل کوتیشن) قرار بگیرد (مانند مثال href در بالا). در واقع صفت‌ها همواره به صورت زیر استفاده می‌شوند:
Name=”value”
یا
Name=’value’
نکته2: در بعضی مواقع خاص، زمانی که خود مقدار value دارای کاراکتر “ است، مجبوریم از تک کوتیشن استفاده کنیم! مثلا:
Name= ’Joe “ShotGun” Nelson’
مهمترین Attributesها:
یکی از مهمترین صفت‌ها، id است که یک نام منحصر به‌فرد برای تگ ایجاد می‌کند. مثال:
<p id=”first_paragraph”> this a paragrapgh. </p>
در مثال بالا، به پاراگراف نام first_paragraph را اختصاص داده‌ایم. با این نام می‌توان در زبان جاوا اسکریپ، جی کوئری و CSS به این پاراگراف دسترسی پیدا کرد!
نکته: زبان جاوا اسکریپ یک زبان Client-side (سمت گیرنده) است که روی مرورگر کاربر اجرا می‌شود. برعکس زبان PHP که server-side است و سمت سرور اجرا شده، نتیجه به مرورگر کاربر منتقل می‌شود.
توجه کنید که جاوا اسکریپت هیچ ارتباطی با زبان برنامه نویسی جاوا ندارد!
اگر با جاوا اسکریپت، جی کوئری، پی اچ پی، سی اس اس آشنا نیستند، نگران نباشید. برای یاد گرفتن این‌ها، ابتدا باید HTML را به‌خوبی بشناسید. ضمن اینکه، به امید خدا و اگر عمری باقی باشد پس از پایان یافتن این سری آموزش به سراغ این‌ها هم خواهیم رفت.
