طراحی سایت
ساناتک
جمعه 25 تير 1395
3
تگ body چیست

برای به خاطر سپردن کدهای پیچیده چه می شود کرد؟!

اگر به این فکر می کنید که کد تگ هایی مانند doctype یا meta را که پیچیده هستند چگونه می شود حفظ کرد باید به شما بگوییم که اصلاً نگران این موضوع نباشید، حتی بسیاری از کدنویسان حرفه ای هم این کدهای پیچیده را از بر نیستند و آن ها را از منابع معتبر یا از پروژه های آماده قبلی خود کپی و پیست می کنند. در مورد این کتاب هم شما می توانید همین کار را انجام دهید و نگران این موضوع نباشید.

البته برنامه های ساخت وب قدرتمند مانند Dreamweaver خودشان این کار را برای کاربر انجام می دهند و بخشی از این کدهای پیچیده را به جای کاربر می نویسند.

تگ های دیگرِ head

مواردی مثل CSS markup و JavaScript هم در تگ head نوشته می شوند، ولی هرموقع که به آن ها نیاز پیدا کردیم در موردشان توضیح می دهیم.

تگ body چیست؟

بخش هیجان انگیز کتاب از اینجا آغاز می شود(!). تمام مواردی که در یک صفحه وب می بینیم در تگ body نوشته شده اند: عناوین، پاراگراف ها، عکس ها، هر آدرس ارجاع دهنده ای که در صفحه نوشته می شود و عناوین زیر صفحه همه و همه در این بخش نوشته می شوند.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
</body>
</html>

ساده ترین صفحه های وب در دنیا:

عنوان انتخاب شده برای این بخش به نظر صحیح نمیاید از آنجا که ساده ترین صفحه وب دنیا را در یکی از مثال ها دیدیم، همان که هیچ محتوایی نداشت و فقط از یک عنوان Untitled Document تشکیل شده بود. اما برای استفاده از تمام چیزهایی که تاکنون یاد گرفته ایم می توانیم یک صفحه وب ساده طراحی کنیم؛ بیایید کار را شروع کنیم:

نرم افزار ویرایش متن خود را باز کرده و کدی را که در زیر نوشته ایم در یک صفحه جدید وارد کنید، اگر هم حوصله این کار را ندارید می توانید یواشکی کد را کپی کرده و در آن پیست کنید(!) از نظر ما موردی ندارد.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>The Most Basic Web Page in the World</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>The Most Basic Web Page in the World</h1>
<p>This is a very simple web page to get you started.
Hopefully you will get to see how the markup that drives
the page relates to the end result that you can see on
screen.</p>
<p>This is another paragraph, by the way. Just to show how it
works.</p>
</body>
</html>

 

زمانی که کاملاً آن را تایپ کردید با عنوان basic.html ذخیره اش کنید.

 

اگر در notepad برنامه را نوشته اید بر روی file و سپس save کلیک کنید، از منوی باز شده به پوشه ای در my Documents که در آن فولد web خود را ساخته بودید بروید و در قسمت filename نام فایل خود را وارد کنید برای مثال:index.html سپس در قسمت Encoding گزینه UTF-8 را انتخاب کرده و با فشردن کلید save فایل را ذخیره کنید.

اگر هم در مک هستید TextEdit را باز کنید و بعد از اطمینان از اینکه در مدِ plainmode قرار دارید بر روی file و سپس  save as کلیک کنید. فولدر Sites را پیدا کرده و نام و Encoding فایل خود را به ترتیب index.html و UTF-8 انتخاب کنید و گزینه Save را بزنید، سیستم به شما اختار می دهد که فایلی plaintext را با پسوندی غیر از .txt ذخیره می کنید، اما ما می خواهیم با همان فرمت .html فایل خود را ذخیره کنیم پس بر روی گزینه Don’t Append کلیک کرده و فایل شما ذخیره می شود.

اهمیت UTF-8

اگر در ذخیره فایل خود UTF-8 را انتخاب نکرده و آن را نادیده بگیرید به عنوان یک شهروند آمریکایی هیچ مشکلی ندارید و سایت را به خوبی خواهید دید، اما برای مثال اگر یک نفر در کره سایت شما را بارگزاری کند تمام سایت برایش مبهم و ناخوانا خواهد بود؛ از آنجا که مرورگر او بر روی زبان کره ای تنظیم شده و انگلیسی را نمی شناسد، اما UTF-8 تقریباً تمام زبان ها را پشتیبانی می کند و بر روی تمام سیستم ها موجود است پس یادتان باشد انتخاب آن کار بسیار مهمی است.

بعد از ذخیره فایل با استفاده از Windows Explorer یا Finder در مک فایل خود را پیدا کرده و در مرورگرتان باز کنید، در شکل2.7 می بینید که اولین سایت شما چگونه در یک مرورگر نشان داده شده است.

simple web page

عکس2.7: نمایش یک پیجِ ساده

تعداد بازدید: 257
مطالب دیگر آموزش طراحی سایت
روش های انتخاب تگ با استفاده از classوضعیت های گوناگون یک لینک در یک صفحه وبstyle دهی گروهی به چندین تگانتخاب زمینه کاری در CSS با خصوصیت idکاربرد دستور em و italics در CSS
 
زمان ثبت
چهارشنبه 30 تير 1395 19:12
رضا عبداللهی
من کدهایی که زیاد استفاده میکنم رو تو یه فایل دارم
تو این چند ساله تقریبا همه چیزهایی که میخوام رو جمع کردم
خیلی راحت ازشون کپی پیست میکنم
زمان ثبت
یکشنبه 11 مهر 1395 11:06
مرتضی اسدی
هم باید کد مربوط به utf-8 رو تو هدر فایل html نوشت و هم باید خود فایل رو به صورت utf-8 ذخیره کرد
@

با عضویت در خبرنامه در جریان آخرین اخبار و مطالب سایت قرار بگیرید