در قسمت قبل با HTML و مباحثی که به نحوی به آن مرتبط می‌شدند آشنا شدیم. در این مطلب قصد داریم اولین فایل HTML خودمان را درست کنیم و با استفاده از مرورگر آن را نمایش دهیم.
همانطور که می‌دانید HTML یک زبان برچسب یا نشانه گذاری است و برای استفاده از آن شما باید به یک مجموعه از تگ‌ها مراجعه کنید. بیایید ابتدا با اساسی‌ترین تگ‌های HTML آشنا شویم.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
به کدهای زیر دقت کنید:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> </body> </html> |
این یک فایل استاندارد HTML است. برای نمایش آن کافی‌ست این کدها را در یک ویرایشگر کد قرار داده و آن را با پسوند .html یا .htm ذخیره کنید. بعد از آن فایل را با استفاده از مرورگر باز نمایید. برای هماهنگی با این مطلب فایل را test1.html بگذارید.
اما این کدها چه معنی می‌دهند؟
بیایید از خط اول شروع کنیم:
|
1 |
<!doctype html> |
خط اول عبارتی است که ما آن را معرفی نامه/اظهار نامه می‌نامیم. در حقیقت این کد به مرورگر می‌گوید که این فایل از چه نسخه HTML استفاده می‌کند. البته این موضوع همیشه رعایت نمی‌شود اما این وجود یک استاندارد است. مرورگرهای مدرن نیز حتی بدون نوشتن این قسمت به صورت پیشفرض کدها را به صورت HTML5 مشاهده می‌کنند.
برای اینکه با خط‌های بعدی آشنا شویم نیاز است که ابتدا با ساختار تگ‌های HTML آشنایی پیدا بکنیم.
آموزش پیشنهادی برای شما : آموزش کامل HTML و HTML5
ساختار تگ‌های HTML
تگ‌های HTML در دو حالت ارائه می‌شوند. تگ‌هایی که تگ بسته منحصر به فرد دارند و تگ‌هایی که خودشان، خودشان را می‌بندند.
هر کدام از تگ‌ها یک فضای کاری دارند. یعنی در خود یکسری محتوا را قبول می‌کنند. برای مشخص کردن مرز شروع و پایان تگ ما از تگ شروع و تگ پایان استفاده می‌کنیم. به ساختار زیر دقت کنید:
|
1 |
<TagName> Content </TagName> |
تگ باز شدن با استفاده از علامت بزرگ و کوچک ریاضی <> و نام تگ پیاده‌سازی می‌شود، همچنین تگ بستن با استفاده از همان موارد به اضافه یک علامت Forward Slash قبل از نام تگ پیاده‌سازی می‌شود. در بین باز و بسته شدن تگ نیز محتوا قرار می‌گیرد.
حالت دوم تگ‌ها، تگ‌هایی هستند که نیاز به تگ بستن ندارند. در واقع این تگ‌ها خودشان به صورت خودکار بسته می‌شوند. به این تگ‌ها Self Closing می‌گویند. در ادامه مطالب با این نوع تگ‌ها نیز آشنا خواهیم شد.
بیایید به کدهای‌مان باز گردیم:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> </body> </html> |
در کدهای بالا از خط دوم به بعد ما با ۴ تگ سر و کار داریم:
<HTML>: تمام کدهای مربوط به فایل HTML در بین این تگ (تگ باز و تگ بستن) قرار می‌گیرد. محتوای خارج از این تگ به عنوان کد HTML شناخته نمی‌شود. می‌توانید به HTML به عنوان یک چیزبرگر نگاه کنید، نان ابتدایی و انتهایی چیزبرگر همان HTML هستند.
<Head>: اطلاعاتی راجع به وبسایت را تحویل مرورگر، موتورهای جستجوگر، بات‌ها و… می‌دهد. ما در ابتدا کمتر با این تگ سر و کار داریم. المان‌های غیر بصری –غیر دیداری از چشم کاربر- در این قسمت قرار می‌گیرد.
<Title>: این تگ منحصرا باید در داخل <head> و </head> استفاده شود. محتوای بین این دو تگ، عنوان وبسایت را مشخص کرده و روی تب‌های مرورگر قرار می‌دهد.
<Body>: این تگ بدنه وبسایت شما را تعیین می‌کند. در واقع هر چیزی که بین این دو تگ استفاده شود در مرورگر به شما نمایش داده می‌شود. در این قسمت است که ما تصاویر، متن‌ها، لیست‌ها و کلی عنصر دیگر را به وبسایت‌مان اضافه می‌کنیم. پس کار اصلی ما در این دوره پرداختن به این تگ و محتوای میان آن است.
نکته ۱: هر تگی که زودتر باز شود دیرتر از همه بسته خواهد شد. برای مثال به تگ head و title توجه کنید:
ابتدا تگ head باز شده و سپس تگ title اما روند بسته شدن آن‌ها برعکس است، ابتدا تگ title بسته شده و سپس تگ head. این یکی از قوانین اصلی در تو در تو نویسی کدهای HTML است.
آشنایی با تگ P
حال که با ضروری‌ترین تگ‌های HTML آشنا شدیم بیایید با تگ‌های مهم دیگری آشنا شویم. قبل از هر کاری فایل test1.html را یک بار دیگر در مرورگر باز کنید. در صفحه مرورگر چه چیزی ظاهر می‌شود؟ هیچ! خالی است. چرا؟ به این دلیل که ما هیچ محتوایی را در قسمت بصری HTML که همان تگ Body است قرار ندادیم. اولین تگی که ما از مجموعه تگ‌های Body یاد می‌گیریم تگ <p> </p> است. از این تگ برای تعریف یک پاراگراف خطی در HTML استفاده می‌شود. به مثال زیر دقت کنید.
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p>This is a new Paragraph</p> </body> </html> |
همانطور که می‌توانید مشاهده بکنید تگ <p> دارای تگی برای بسته شدن نیز است. پس مرز مشخصی دارد و محتوای مشخصی در آن قرار می‌گیرد.
فایل test.html را در یک ویرایشگر کد باز کرده و براساس کدهای زیر تغییرات جدید را اعمال کنید. بعد از آن فایل را ذخیره کرده و در مرورگر اجرا کنید.
شما موفق شدید! صفحه شما حال خالی نیست و در آن یک متن جدید قرار دارد.
چالش: سعی کنید که همان کلمه Paragraph را در کدهای بالا به یک خط جدید بیاورید. به احتمال زیاد شما اینگونه عمل می‌کنید:
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p>This is a new Paragraph</p> </body> </html> |
این کار را انجام دهید و یک بار دیگر مرورگر را باز کنید، آیا تغییر آنچنان که می خواستید اعمال شد؟
خیر! چرا؟!
HTML فرمان‌هایی را که در محیط متنی مانند Word انجام می‌شود را نادیده می‌گیرد. HTML از Enter پشتیبانی نمی‌کند بجای آن برای اینکه بتوانید یک Paragraph را به یک خط جدید بیاورید نیاز است که از یک تگ جدید استفاده کنید.
تگ <br />
تگ <br /> یک تگ Self closing است. به این معنا که تگی برای بسته شدن ندارد، پس محتوایی نیز در بین آن قرار نمی‌گیرد (چون مرز مشخصی ندارد). به مثال زیر که در آن می‌خواهیم Paragraph را به یک خط جدید بیاوریم دقت کنید:
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <p>This is a new <br /> Paragraph</p> </body> </html> |
حال مانند کد بالا فایل test1.html را تغییر دهید و در مرورگر اجرا نمایید. آیا Paragraph به خط جدید آمد؟
آرههههههههههههههههههههههههههههههههههههههه
آموزشاتون خعلی خوبن مح ت هر سایتی ک میرفتم آدم نمیتونست خوب بفهمه ولی این تا الان عالیهههههههههههههههههه👍
بسیار عالی و روان . سپاس گزارم
خیلی وقت بود میخواستم html کار کنم اما فرصت نمیشد. با کمک این سایت شروع میکنم البتهههههههههههههههههه اگر وسطش داستان مالی نشه و نگید برای ما بقی بیایید پک آموزشی بخرید و خلاصه همینجوری که شروع کردید تا آخرش پیش برید.
تا جایی که من میدونم تگ اسلش نمیخواد.