آشنایی با ساختار اصلی Html (بخش دوم)
در این مطلب قصد داریم شما را با ساختار کلی صفحات Html آشنا کنیم ، برای این کار قدم به قدم همراه ما باشید تا ابتدا با هم یک فایل Html بسازیم. نرم افزار notepad را باز کنید و کلمه Hello World را درون نرم افزار تایپ کنید ، سپس از منوی file روی گزینه save as کلیک کنید ، در پنجره باز شده ، نام فایل خود را hello.html وارد کرده و در بخش encoding گزینه UTF-8 را انتخاب کنید و سپس روی دکمه save کلیک کنید. حال به مسیری که فایل را ذخیره کرده اید بروید و مشاهده می کنید که فایل شما به شکل یکی از مرورگر های ویندوزتان درآمد است ، روی آن کلیک کنید تا فایل شما در مرورگر باز شود ، داخل مرورگر نوشته Hello World را مشاهده خواهید کرد.
تبریک می گوئیم ، این نخستین فایل Html شماست که ایجاد کرده اید ...
حال می خواهیم با ساختار یک صفحه وب در زبان html آشنا شویم ، لطفا ابتدا فایل html خود را با notepad باز کرده و تمام محتوای داخل آن (یعنی همون جمله Hello World) را پاک کنید. سپس کد زیر را کپی کرده و داخل فایل paste نمائید.
<!DOCTYPE html><html><head></head><body>Hello World</body></html>
پس از ذخیره سازی فایل به روشی که در ابتدای مطلب گفته شد ، روی فایل کلیک کنید تا صفحه وب در مرورگر شما اجرا شود و بتوانید خروجی فایل را مشاهده نمائید. در ادامه در مورد تک تک خطوط کد نوشته شده توضیحات ارائه خواهد شد.
| توضیحات درباره کد | کد html |
|---|---|
| همانطور که مشاهده می کنید این خط از ساختار تگ های html پیروی نمی کند ، دلیل آن این است که این کد جزء عناصر اصلی html نیست و تنها برای این نوشته می شود که مرورگر اجرا کننده کد را متوجه این موضوع کند که کدهای نوشته شده پس از آن طبق قواعد html نسخه 5 که آخرین نسخه منتشر شده html است می باشند. لذا وجود آن سبب کاهش خطاهای موجود در کد html شما شده و روی سئوی سایت نیز تاثیر گذار خواهد بود پس حتما در ابتدای تمام فایل های html خود این خط را بنویسید. | <!DOCTYPE html> |
| تمامی عناصر html که شما ا آنها استفاده می کنید در داخل این تگ قرار می گیرند ، بنابراین خط دوم کدهای شما تگ شروعی بوده و خط نهایی کدها نیز باید تگ پایانی باشد که تفاوت آن با تگ ابتدایی ، وجود یک اسلش در ابتدای آن می باشد. همچنین لازم به ذکر است که داخل این تگ دو تگ دیگر قرار می گیرد ، تگ های head و body | <html> |
| در این تگ معمولا کدهایی درج می شود که روی صفحه مرورگر قابل نمایش نیست ، مواردی مثل ارتباط با استایل ها ، اسکریپت ها ، متاتگ ها و ... که در مطالب آتی در مورد آنها مفصلا صحبت می شود و فعلا به درون آن توجه نکنید | <head> |
| بخش اصلی کار شما در این قسمت می باشد و داخل تگ body هر چه نوشته شود روی صفحه ظاهر می شود و می توانید خروجی آن را مشاهده نمائید. | <body> |
در جدول فوق در مورد تگ های اصلی یک سند html و همچنین ساختار اصلی html صحبت شد ، بنابراین هر صفحه html از 3 تگ اصلی تشکیل شده است : html ، head و body که تگ های head و body در واقع فرزندان تگ html هستند و هر آنچه داخل body قرار بگیرد روی صفحه نمایش داده می شود. در مطالب آتی در مورد تگ های داخل body اطلاعاتی عنوان خواهد شد.
