درس دوم
در این درس با ساختار یک صفحه html آشنا می شویم. اما قبل از اینکه ساختار یک صفحه وب را معرفی کنیم، بهتر است با مفهوم تگ آشنا شویم، تگ ها دارای سه قسمت اصلی هستند که شامل تگ آغازین، محتوای تگ و تگ پایانی می باشند.
در زیر مثالی از ساختار یک تگ آورده شده است.
<tagname>
تگ ها معمولاً به شکل جفتی استفاده می شوند و ساختار جدیدی با اسم عنصر (element) را به وجود می آورند. در زیر مثالی دیگری از یک تگ آورده شده است:
<tagname> content </tagname>
همان گونه که در مثال بالا می بینیم، یک تگ دارای سه قسمت اصلی است که شامل تگ آغازین، محتوای تگ و تگ پایانی است. در صورتی که به ساختار تگ پایانی دقت کنید، متوجه می‌شوید که با تگ آغازین فقط یک تفاوت کوچک دارد و آن علامت “/” می باشد که پیش از نام تگ در تگ پایانی آمده است.
ساختار اصلی یک صفحه وب (HTML) :
هر صفحه وب یا صفحه html با استفاده از یک تگ <html> آغاز شده و با یک بسته <html/> به پایان می رسد. در حقیقت با استفاده از این عنصر به مرورگر خواهیم گفت که با صفحه ای از نوع html روبه رو شده است و صفحه با تگ <html> شروع و با تگ پایانی<html/> خاتمه پیدا می کند.
در داخل عنصر html دو عنصر اصلی صفحه دیده می شود که شامل عنصر <head> و عنصر <body> است.
عنصر <head> : این عنصر برای نشان دادن قسمت سر صفحه بوده که در آن اطلاعاتی در مورد صفحه قرار می‌گیرد. برای مثال می توان به عنوان و توضیحاتی در مورد آنچه که در قسمت بدنه آمده است را در این عنصر قرار دارد. این قسمت شامل هر چیزی است که در میان بدنه ایجاد شده باشد.
عنصر <body> : یکی دیگر از عنصر هایی که در html وجود دارد، عنصر بدنه می باشد که دارای اطلاعاتی می باشد که بدنه صفحه را مشخص می کند و دارای اطلاعاتی است که باید در پنجره مرورگر به نمایش درآیند. این قسمت از تگ <body> و تگ بسته <body/> و هر آنچه که میان آن دو باشد، درست می شود.
معمولاً آنچه که در قسمت hed صفحه باشد در صفحه نمایش دیده نمی شود. ولی هر چیزی که در قسمت body باشد، در صفحه نمایش قابل مشاهده می باشد. باید دقت کرد که هر تگی که باز می شود، لازم است در جایی بسته شود. البته در این زمینه برخی استثناها وجود دارند. بنابراین باید گفت که سه عنصر hed، body و html ساختار یک صفحه وب را تشکیل خواهند داد. در زیر مثالی از ساختار اصلی یک صفحه نمایش داده شده است.
<html>
<head>
<title> Page title </title>
</head>
<body>
<p> This is a Paragraph </p>
</body>
</html>
ذکر این نکته اھمیت دارد که وقتی عناصر شامل عناصر دیگری باشند، جای قرار گرفتن آن ھا باید مناسب باشد ، یعنی ھر عنصر به طور کامل باید درون عنصر پدرش قرار گیرد. ھر وقت که از یک تگ بسته استفاده میکنید، این تگ بسته، باید وابسته به آخرین تگ بازی باشد که ھنوز بسته نشده!
البته باید به این نکته دقت کرد که هنگامی که عناصر شامل عناصر دیگری هستند، باید جای قرار گرفتن آن ها مناسب باشد. به این معنا که هر عنصر به طور کامل باید داخل عنصر پدر خود قرار گیرد. هر زمانی که از یک تگ بسته استفاده شود، این تگ بسته لازم است به آخرین تگ بازی که هنوز بسته نشده است، وابسته باشد.
به عبارتی دیگر، اول تگ A را باز کنید سپس تگ B را باز کنید، سپس تگ را ببندید و در آخر تگ A را ببندید به عنوان مثال اگر بخواهیم کلمه “پاراگراف” به صورت صخیم دیده شود بایستی از کد زیر استفاده کنیم .
برای مثال در صورتی که اول تگ A باز شده باشد، سپس تگ B باز شود، پس از آن باید تگ B را لست و در آخر تگ A باید بسته شود. برای مثال اگر قصد داشته باشیم کلمه پاراگراف را به شکل ضخیم نمایش دهیم، لازم است از کد زیر استفاده کنیم:
<p> این یک <b> پاراگراف </b> است </p>