آشنایی با ساختار اصلی 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 اطلاعاتی عنوان خواهد شد.

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ارتباط با پشتیبان
ارسال از طریق واتساپ