پی سازی (فونداسیون) یک صفحه وب

در این مقاله سعی می کنیم شما را با ساختار کلی یک صفحه ی وب آشنا کنیم.

یادآوری: در مقاله قبل توضیح دادیم که به طور کلی دو نوع تگ در زبان html وجود دارد.

1- تگ هایی که به صورت تکی استفاده میشوند که این تگ ها را اصطلاحا تگ های self close می نامند به عنوان مثال


<br/>

این تگ باعث شکست خط می شود، یعنی یک خط یا یک سطر را خالی کرده و به ابتدای خط بعدی منتقل می شود. این تگ به صورت تک استفاده می شود و تگ زوج ندارد.

2- تگ هایی که به صورت زوج استفاده می شوند و نیاز به تگ باز و بسته دارند.


<title> design web </title>

همان طور که مشاهده می کنید تگ Title را باز کردیم و در انتها آن را بستیم.این تگ برای تعیین عنوان صفحه استفاده می شود.در ادامه با تگ های html بیشتر آشنا خواهید شد.

ایجاد یک سند HTML

برای این منظور یک ویرایشگر متن مورد علاقه را انتخاب کرده و شروع به کدنویسی می کنیم (لازم به ذکر است که توصیه می شود به هیچ وجه از نرم افزارهایی مثل Dreamweaver و visual studio و ... استفاده نشود. در واقع از آنجا که قرار است با تکرار و تمرین کدهای اچ تی ام ال را ملکه ذهن خود کنیم پس یک نرم افزار ویرایشگر متن مثل Notepad یا ++Notepad را مورد استفاده قرار می دهیم) پیش از شروع کدنویسی دانستن این نکته ضروری است که همان طور که ما با یکدیگر به زبان فارسی صحبت می کنیم، زبان اچ تی ام ال هم با مرورگر صحبت می کند اما طرز صحبت کردن اچ تی ام ال متفاوت از شیوه ای است که با یکدیگر صحبت می کنیم. در واقع یک مرورگر کدهای اچ تی ام ال را از بالا به پایین و از چپ به راست می خواند. به عبارت دیگر کدهایی که بالاتر نوشته شوند نسبت به کدهایی که پایین تر نوشته شود زودتر نمایش داده می شوند. برای روش شدن مطلب فوق می توان تصویر زیر را مد نظر قرار داد:

برای شروع کدنویسی به زبان HTML اولین قدم تعیین نسخه HTML ای است که استفاده می کنیم

تعیین نسخه HTML

دستور DOCTYPE در واقع جزئی از تگ های html نیست، بلکه یک دستور راهنما برای مرورگرهای وب است، از آنجایی که کنسرسیوم جهانی وب (w3c) استاندارد های مختلفی از زبان پایه ی وب یعنی HTML را ارائه نموده است،هر کدام از آنها در مقایسه با هم دارای تفاوت هایی هرچند اندک هستند، اما این موضوع سبب می شود که مرورگرهای وب، در برخورد با صفحات مختلف نتوانند در حالت عادی، استاندارد صحیح را شناسایی کنند و لذا به جای پردازش متناسب با استاندارد اصلی، عملیات پیش فرض خود را برای نمایش صفحه انجام می دهند که این موضوع ممکن است با آنچه مورد نظر شما بوده باشد، فرق کند و یا از مرورگری به مرورگر دیگر، صفحات شما به چند شکل مختلف پردازش شوند، لذا برای جلوگیری از بروز چنین مشکلاتی، از دستور راهنمای DOCTYPE استفاده می شود تا نوع نسخه HTML استفاده شده را برای مرورگر مشخص کند.

در واقع استفاده از دستور DOCTYPE در صفحات وب اجباری نیست، بدین معنی که اگر هم از آن استفاده نشود، صفحه و اطلاعات آن همچنان در مرورگر بارگذاری شده و قابل استفاده است، اما کنسرسیوم جهانی وب (W3C) به طور جدی توصیه می کند که در صفحات خود از این دستور استفاده کنیم (مخصوصا در صفحاتی که از نسخه HTML 4.01 یا XHTML 1.0 استفاده می کنند)، لذا به خاطر رعایت استانداردهای توصیه شده W3C می توان گفت که استفاده از آن تقریبا الزامی است، در غیر این صورت علاوه بر اینکه ممکن است صفحات، به درستی در مرورگرهای مختلف نمایش داده نشوند، از نظر اعتبار سنجی (Validation) نیز معتبر نیستند (که این امر در امتیاز و رتبه سایت یا وبلاگ در موتورهای جستجو تاثیر منفی خواهد داشت)

استفاده از دستور DOCTYPE در نسخه های HTML 4.01 و XHTML 1.0 اجباری است، اما هر کدام از این نسخه ها از سه نوع مختلف از این دستور برای سه هدف متفاوت استفاده می کنند. برای مشاهده لیست کامل DOCTYPE ها می توانید از لینک زیر استفاده کنید. مشاهده انواع DOCTYPE ها

ما در آموزش های خود از DOCTYPE مربوط به HTML5 استفاده خواهیم کرد که به این صورت می باشد:


<!DOCTYPE html>

تگ HTML

اولین تگی که در ایجاد یک صفحه وب استفاده می شود تگ HTML می باشد.این تگ یکی از اصلی ترین تگ های زبان HTML است. این تگ از نوع تگ های دارای مکمل است یعنی به <HTML/> نیاز دارد .
با رسیدن به این تگ مرورگر برای اجرای فرامین یک فایل از نوع HTML فراخوانی می شود. تمام دستورات صفحه در بین دو تگ شروع کننده و تمام کننده HTML قرار میگیرند.به طور کلی محتوای درون تگ HTML از دو قسمت تشکیل می شود.1- قسمتی که محتوای آن به کاربر نمایش داده نمی شود،این محتوا درون تگ head قرار می گیرند 2- قسمتی که محتوای اصلی وب می باشد و کاربر این محتوا را در صفحه مشاهده خواهد کرد،محتوای این بخش درون تگ body قرار می گیرند.

تگ head

تگ head تگی از نوع تگهای دارای مکمل است یعنی برای اجرای ان به تگ <head/> نیاز است این تگ بلافاصله بعد از تگ <html> در صفحه وب ظاهر می شود و وظایف متعددی به عهده دارد که عبارتند از :

جدا کردن بخش سر صفحه از مابقی صفحه
تعیین محلی برای قراردادن تگ
تعیین محلی برای قراردادن تگهای (در مقاله ای جداگانه مهمترین تگ های متا را معرفی خواهیم کرد)
محلی برای اضافه کردن فایل ها و کدهای JavaScript
محلی برای اضافه کردن فایل ها و کدهای css به صفحه

تگ Body

این تگ مهم ترین تگ یک صفحه html. است و تمام محتویات قابل مشاهده در یک صفحه وب در این تگ قرار می گیرد این تگ در واقع در بر گیرنده تمامی تگ های نمایش دهنده محتویات صفحه است و در اغلب مواقع رنگ زمینه یا تصویر به کار رفته به عنوان تصویر زمینه به وسیله این تگ کنترل می شود شکل کلی تگ body به این صورت است:


<body>
	محتوای یک صفحه وب
</body>

تایپ متن ساده در صفحه مورد نظر

همانطور که ذکر شد بخش اصلی یک صفحه وب در قسمت بدنه و در بین تگ body قرار میگیرد،برای قرار دادن متن در صفحه به صورت پاراگراف متن مورد نظر راداخل تگ های <p> و <p/> تایپ کنید تگ <p> نشان دهنده پاراگراف بودن متن قرار گرفته در داخل تگ است.زبان HTML وجود فاصله های خالی موجود در متن را تشخیص نمی دهد.در صورت تمایل میتوانید متن یک پاراگراف را به صورت چین چین , راست چین یا وسط چین تنظیم کنید برای این منظور در تگ ابتدای پاراگراف مزبور , شناسه align را با مقادیر center , right , left یا justify مقدار دهی کنید شناسه align برای تراز بندی متن یک پاراگراف مورد استفاده قرار میگیرد و مقادیر ذکر شده در بالا برای این شناسه به کار می رود.
زبان HTML وجود فاصله های خالی موجود در متن را تشخیص نمی دهد.در صورت تمایل میتوانید متن یک پاراگراف را به صورت چین چین , راست چین یا وسط چین تنظیم کنید برای این منظور در تگ ابتدای پاراگراف مزبور , شناسه align را با مقادیر center , right , left یا justify مقدار دهی کنید شناسه align برای تراز بندی متن یک پاراگراف مورد استفاده قرار میگیرد و مقادیر ذکر شده در بالا برای این شناسه به کار میرود.

در ادامه نمونه ای از یک صفحه وب ساده را مشاهده می کنید:


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>پیشگامان صفر و یک فرساد</title>
</head>
	<body>
		<p align=”right”>امیدوارم که این آموزش برای شما مفید واقع شده باشد </p>	
		<p align=”right”>آرزومند بهترین ها برای شما …</p>
	</body>
</html>

مشاهده صفحه طراحی شده در مرورگر

برای این منظور ابتدا فایل html خود را باید با پسوند htm یا html ذخیره کنید.برای این منظور می توانید از کلیدهای ترکیبی ctrl+s استفاده کنید،همچنین در تمامی ویرایشگرها می توانید از منوی فایل گزینه save را انتخاب کنید تا پنجره مربوط به ذخیره فایل ها نمایش داده شود،در پنجره ظاهر شده فایل خود را با پسوند htm یا html ذخیره کنید. حال قصد داریم تا اولین صفحه از وب سایت خود را در یک مرورگر مثل فایرفاکس به نمایش در آوریم. برای این منظور به مسیری که فایل اچ تی ام ال خود را در آن ذخیره کرده رفته و روی نام فایل کلیک راست کرده و گزینه Open را انتخاب می کنیم. در تصویر زیر خروجی کدهایی که در بالا نوشتیم را بر روی مرورگر مشاهده می کنید. به این ترتیب اولین صفحه وب خود را ایجاد کردیم،در جلسات بعدی با آموزش های پیشرفته تری در خدمت شما خواهیم بود.