آموزش طراحی وب سایت - مقدماتی - قسمت دوم
آموزش طراحی وب سایت - مقدماتی - قسمت دوم
در این جلسه آموزشی با مباحث : شروع کار با HTML ، شروع یک پاراگراف جدید ، شروع یک سطر جدید ، افزودن توضیحات و ... آشنا خواهید شد .
جلسه دوم :
در این جلسه آموزشی طراحی وب سایت مباحث زیر مطرح می شوند :
- شروع کار با HTML
- طراحی اولین وب سایت
- مشاهدۀ صفحه در مرورگر
- شروع یک پاراگراف جدید
- شروع یک سطر جدید
- ایجاد سرتیتر (Heading)
- پیش فرمت کردن متن
- افزودن توضیحات در طراحی وب سایت
- درج کاراکترهای ویژه
- ویژگی های عام در HTML
- ویژگی ID
- ویژگی CLASS
- ویژگی STYLE
- ویژگی TITLE در طراحی سایت
شروع کار با HTML
در این فصل مفاهیم اولیۀ ساخت صفحات وب سایت به زبان HTML را بررسی خواهیم کرد. از این پس برای سادگی و نیز درک بهتر کدهای HTML ، از ویرایشگر متنی NotePad استفاده می کنیم. برای این منظور ویرایشگر NotePad را اجرا نمود . کد HTML موردنظر خود را در آن تایپ نمایید و سپس آن را با پسوند .htm یا .html ذخیره نمایید. در نهایت برای مشاهدۀ صفحه از یک مرورگر، مانند Internet Explorer استفاده نمایید.
ساخت اولین صفحۀ وب سایت
زبان HTML از تعداد زیادی تگ تشکیل می شود. هر یک از این تگ ها دارای ویژگی هایی نیز می باشند. این تگ ها تعیین می کنند که یک صفحه چگونه باید در مرورگر برای کاربری که از طریق اینترنت آن را مشاهده می کند، نمایش داده شود. هر تگ در داخل < > قرار می گیرد. تعداد زیادی از تگ های HTML دارای تگ شروع و تگ پایان هستند.
توجه: زبان HTML نسبت به حروف بزرگ یا کوچک حساس نیست، ولی ما برای تمایز بین تگ های HTML و دیگر عناصر، آنها را با حروف بزرگ نمایش می دهیم.
< HTML> معروف ترین و ساده ترین تگ در زبان HTML است. تمام دستورات و تگ های HTML باید بین HTML و / HTMLقرار گیرد.
تگ HEAD باید بلافاصله بعد از تگ HTMLقرار گیرد. این تگ باید با تگ HEAD خاتمه یابد. به طور کلی هر صفحۀ HTML از دو قسمت HEAD و BODY تشکیل می گردد. در بخش HEAD برخی ویژگی های صفحه مانند عنوان آن تعیین می شود. مهمترین تگی که در داخل HEAD قرار می گیرد، تگ TITLE نیز با تگ TITLE خاتمه می یابد. عنوان یک صفحه، توضیحی در مورد صفحه است که در نوار عنوان مرورگر ظاهر می شود.
توجه: توضیحی که برای عنوان یک صفحه قرار می گیرد، فقط می تواند شامل حروف و اعداد باشد.
کل بدنۀ صفحه، باید در بین تگ های BODY و /BODY قرار بگیرد. قسمت بدنه، بخش اصلی هر صفحۀ وب سایت است که شامل متن، تصویر، جدول ها و عناصر دیگری است که کاربر در هنگام ملاقات صفحه در وب سایت ، آنها را مشاهده خواهد کرد.
نکته: هر چند تگ های HTML ، HEAD و BODY ، اختیاری هستند، ولی توصیه می شود حتماً از آنها استفاده نمایید.
مثال :
مشاهدۀ صفحه در مرورگر
برای مشاهدۀ صفحه ای که ساخته اید، از یک مرورگر مانند IE و یا Netscape استفاده نمایید. این کار باعث می شود تا درستی صفحۀ وب سایت خود را در اینترنت بررسی نمایید. مرورگر، صفحۀ حاوی کدهای HTML را خوانده و تگ های آن را تفسیر نموده و آن را به نمایش در می آورد. با توجه به اینکه مرورگرهای مختلف ممکن است صفحۀ شما را به طرق مختلفی تفسیر نموده و نمایش دهند. بهتر است آن را در مرورگرهای دیگر نیز مشاهده نمایید.
برای مشاهدۀ صفحه در IE دو روش زیر وجود دارد، که به طور مشابه در مرورگرهای دیگر نیز قابل انجام است.
روش اول: آدرس کامل صفحۀ وبی که ساخته اید را در نوارد آدرس تایپ نمایید و کلید Enter را فشار دهید. به عنوان مثال اگر صفحۀ خود را در پوشۀ WebSite از درایو C با نام Index.htm ذخیره نموده اید، آدرس C:/WebSite/Index.htm را در نوار آدرس تایپ نمایید.
روش دوم: از منوی File ، گزینه Open را انتخاب نموده و از فرمی که ظاهر می شود دکمۀ Browse را کلیک نمایید. سپس از کادر محاوره Open فایل موردنظر را پیدا نمایید و دکمه Open از این کادر محاوره ای را کلیک نمایید. پس از انتخاب فایل، دکمۀ OK را کلیک نمایید.
شروع یک پاراگراف جدید
یک پاراگراف، متنی شامل یک یا چند سطر است، که مفهوم تقریباً مستقلی دارد و از سطر جدیدی شروع می شود. در اغلب صفحات وب سایت معمولاً از متون و پاراگراف ها بسیار استفاده می شود. در صورتی که شما در نوشتن پاراگراف خود از کلید Enter برای رفتن به سطر جدید استفاده نمایید، معمولاً اغلب مرورگرها آن را نادیده می گیرند. در HTML برای شروع یک پاراگراف جدید، باید متن مورد نظر را در بین تگ های باز و بسته یP و /P قرار داد. برای ترازکردن پاراگراف، باید از ویژگی ALIGN این تگ استفاده نمایید.
مثال:
ایجاد پاراگراف به صورت چپ چین
P ALIGN=¢¢left¢¢
پاراگراف موردنظر
تگ باز و بسته /P
نکته: مقدار ویژگی ALIGN می تواند یکی از مقادیر زیر باشد:
- Left : چپ چین
- Right : راست چین
- Center : وسط چین
- Justify : تراز از راست به چپ
نکته: وجود تگ /P برای پایان پاراگراف، اختیاری است، ولی در صورتی که بخواهید بعداً از شیوۀ نامه (CSS) استفاده نمایید، وجود آن ضروری است.
مثال :
شروع یک سطر جدید
برای شروع یک سطر جدید، باید از تگ BR استفاده نمود. نام این تگ از کلمۀ Break به معنای شکستن گرفته شده است. به این معنی که هر متنی که بعد از BR قرار بگیرد، شکسته شده و در سطر جدید قرار می گیرد. این تگ برخلاف تگ های دیگری که تا اینجا آموختید، تگ پایان ندارد.
مثال :
این تگ در مواردی که بخواهید یک سطر خالی ایجاد کنید، نیز کاربرد دارد. برای این منظور باید آن را به تنهایی استفاده کنید.
نکته: اغلب مرورگرها، فضاهای خالی درج شده در هنگام تایپ نمودن کد HTML در ویرایشگر را نادیده می گیرند برای در فضای خالی[1] باید از در متن HTML استفاده نمود.
نکته: در صورتی که می خواهید مرورگر فضاهای خالی درج شده در کد HTML صفحه را در نظر بگیرد، باید متن موردنظر را در بین تگ های باز و بسته PRE و /PRE قرار دهید.
ایجاد سرتیتر (Heading)
سرتیترها عناوینی از یک صفحه هستند که باعث وضوح بیشتر صفحه شده و موجب می شوند کاربر سریع تر به اطلاعات خود دست یابد. سرتیترها به صورت Bold نمایش داده می شوند.
شش سطح از سرتیترها در HTML وجود دارند که با H6,H5,H4,H3,H2,H1 بیان می شوند. تگ H درشت ترین و تگ H6 ریزترین سرتیتر است. این تگ ها دارای تگ پایان نیز می باشند. متنی که می خودهید به عنوان سرتیتر ظاهر شود را مثلاً برای درشت ترین اندازه در بین تگ های H1و /H1 قرار دهید. همین طور برای اندازه های دیگر از تگ مناسب آن استفاده نمایید.
مثال :
نکته: مرورگرها معمولاً به طور پیش فرض، سرتیتر را به صورت چپ چین نمایش می دهند. برای تغییر تراز سرتیتر باید از ویژگی ALIGN آن استفاده کرد. این ویژگی می تواند دارای مقادیر left, right, center باشد.
پیش فرمت کردن متن (PreFormat)
همان طور که قبلاً اشاره شد، معمولاً مرورگرها فاصله های درج شده در متن را نادیده می گیرند. تگ PRE باعث می شود مرورگر هر متنی که بین PREو /PRE قرار دارد را از این قاعده مستثنی نماید. به عبارت دیگر در این مورد مرورگر فواصل درج شده در متن را در نظر می گیرد. هنگامی که شما متنی را پیش فرمت می نمایید، در مرورگر در هنگام نمایش آن، علاوه بر لحاظ نمودن فواصل موجود در متن، حتی برای تنظیم متن با اندازۀ پنجرۀ مرورگر، عمل wrapping نیز انجام نمی دهد. در این مورد خود برنامه نویس باید فواصل را به طور مناسب تنظیم نماید. یکی دیگر از فواید این تگ، ایجاد جدول های ساده در متن بدون استفاده از تگ TABLE می باشد. با توجه به عمل پیش فرمت، فواصل موجود بین ستون های جدول در مرورگر به خوبی نمایش می یابد.
مثال :
افزودن توضیحات (Comments)
توضیحات، قسمت هایی که از یک سند HTML هستند که حاوی دستور یا تگ HTML نیستند و مرورگر آنها را نادیده می گیرد. توضیحات متونی هستند که برنامه نویس برای اطلاع خود به کد HTML اضافه می نماید. مثلاً توضیحی برای علت استفاده از یک دستور و یا به خاطر سپردن کاری که باید بعداً در آن نقطه انجام شود.
برای اضافه کردن توضیحات باید آنها را در بین علائم <!—و --> قرار دارد. مرورگر هر متنی که در بین این دو علامت قرار داشته باشد را نادیده می گیرد.
مثال :
نکته: در مواردی که برنامه نویسان وب سایت از کدهای جاوا اسکریپ در بین کدهای HTML استفاده می کنند ولی با مرورگری سروکار دارند که کدهای جاوا اسکریپت را پشتیبانی نمی کند، نمی توانند برای پنهان کردن این کدها از دید مرورگر، آنها را به توضیحات تبدیل نمایند.
درج کاراکترهای ویژه
در HTML استاندارد می توان کاراکترهای ویژه ای که بر روی صفحه کلید وجود ندارند را جهت نمایش در مرورگر، درج نمود. هر کاراکتر کد اسکی منحصر به فردی است. برای درج یک کاراکتر خاص در متن، باید از علامت &#?; استفاده کرد. به جای ? کد اسکی آن کاراکتر قرار می گیرد. همچنین هر کاراکتر در HTML دارای نام مشخصی است که در صورت دانستن نام آن می توان از علامت &?; استفاده نمود. به جای ? باید نام کاراکتر ویژه را قرار داد.
مثال: درج کاراکتر Ó با کد اسکی 169 (نام معادل آن © است.)
© Microsoft Corporation
یا به صورت زیر:
&#copy; Microsoft Corporation
که خروجی آن در مرورگر به صورت زیر است:
Ó Microsoft Corporation
نکته: برای یافتن کد کاراکترهای ویژه می توانید از جدول های اسکی در انتهای برخی کتاب ها و یا از واژه پرداز Word از طریق منوی Insert گزینۀ Symbol استفاده نمایید.
توجه: کاراکترهای &,‘‘,>,< از دید HTML جزء کاراکترهای ویژه محسوب می گردند، چون هر یک از آنها جزء کلمات کلیدی در HTML هستند. مثلاً علائم <> برای تگ های HTML استفاده می شوند. در صورتی که می خواهید از آنها استفاده دیگری بنمایید، باید آنها را به صورت فوق درج نمایید، لازم به ذکر است که کد این کاراکترها به ترتیب برابر 38, 34, 62, 60 و معادل اسمی آنها به ترتیب برابر کلمات & , " , > , < است.
ویژگی های عام در HTML
قبل از اینکه این فصل را به پایان ببریم، بد نیست نگاهی به چند ویژگی عمومی که تقریباً در تمام تگ های HTML قابل استفاده هستند، بیندازیم. این ویژگی ها شامل ID ، CLASS ، STYLE و TITLE هستند.
ویژگی ID
این ویژگی یک شناسۀ یکتا به دستوری از HTML نسبت می دهد. از این شناسه در ارجاع های بعدی به این دستور استفاده می شود. نامی که برای شناسه انتخاب می شود، باید ترکیبی از حروف و ارقام باشد، به طوری که با رقم شروع نشود. یکی از کاربردهای ID در شیوه نامه ها است که بعداً در مورد آن بیشتر صحبت خواهیم کرد.
ویژگی CLASS
این ویژگی، نام کلاسی است که این دستور از HTML به آن کلاس تعلق دارد را تعیین می کند. این ویژگی باعث می شود که بتوانیم مجموعه ای از دستورات HTML را به دلخواه انتخاب نموده و آنها را در یک کلاس مشخص قرار دهیم. بعداً می توانیم برای تمام دستوراتی که متعلق به این کلاس هستند، عمل معینی را انجام دهیم، یک کاربرد این ویژگی در شیوه نامه ها است.
ویژگی STYLE
ویژگی STYLE این امکان را می دهد که بتوانیم قواعد خاصی را تعریف نماییم وآن را در کل صفحه تعمیم دهیم. کاربرد اصلی این ویژگی در شیوه نامه است. با استفاده از این ویژگی می توان قواعد شیوه نامه را برای کل سند HTML تعریف و اعمال کرد.
ویژگی TITLE
این ویژگی برای ایجاد متن توضیحی[2] برای یک عنصر HTML به کار می رود. وقتی نشانگر ماوس در مروگر بر روی این عناصر قرار گیرد، این متن توضیحی برای راهنمایی کاربر، نمایان می شود.
خلاصه ی جلسه :
در این فصل به طور مقدماتی با مبانی HTML آشنا شدید و برخی تگ های آن را یاد گرفتید. HTML ، معروف ترین تگ در زبان HTML است. تمام دستورات و تگ های HTML باید بین HTML و /HTM قرار گیرد. تگ HEAD باید بلافاصله بعد از تگ HTML قرار گیرد. این تگ باید با تگ /HEAD خاتمه یابد. به طور کلی هر صفحۀ HTML از دو قسمت HEAD و BODY تشکیل می گردد. در بخش HEAD برخی ویژگی های صفحه مانند عنوان آن تعیین می شود. مهمترین تگی که در داخل تگ HEAD قرار می گیرد، تگ TITLE است. تگ TITLE نیز با تگ /TITLE خاتمه می یابد. عنوان یک صفحه، توضیحی در مورد صفحه است که در نوار عنوان مرورگر ظاهر می شود. کل بدنۀ صفحه باید در بین تگ های BODY و /BODY قرار بگیرد. قسمت بدنه، بخش اصلی هر صفحۀ وب سایت است که شامل متن، تصویر، جدول ها و عناصر دیگری است که کاربر در هنگام ملاقات صفحه در وب، آنها را مشاهده خواهد کرد.
برای شروع یک پاراگراف جدید، باید متن مورد نظر را در بین تگ های باز و بسته P و /P قرار داد. برای تراز کردن پاراگراف جدید باید از ویژگی ALIGN این تگ استفاده نمایید. برای شروع یک سطر جدید باید از تگ BR ریزترین سرتیتر است. متنی که می خواهید به عنوان سرتیتر ظاهر شود را مثلاً تگ پایانی است.
شش سطح از سرتیترها در HTML وجود دارند که با H1 تا H6 بیان می شوند. تگ H1 درشت ترین و تگ <H6> ریزترین سرتیتر است. متنی که می خواهید به عنوان سرتیتر ظاهر شود را مثلاً برای درشت ترین اندازه بین تگ های H1 و /H1 قرار دهید.
معمولاً مرورگرها فاصله های درج شده در متن را نادیده می گیرند. تگ PRE باعث می شود مرورگر هر متنی که در بین PRE و /PRE قرار دارد را از این قاعده مستثنی نماید. به عبارت دیگر در این مورد مرورگر فواصل درج شده در متن را در نظر می گیرد. به این عمل پیش فرمت کردن متن گفته می شود.
توضیحات قسمت هایی از یک سند HTML هستند که حاوی دستور یا تگ HTML نیستند و مرورگر آنها را نادیده می گیرد. توضیحات، متونی هستند که برنامه نویس برای اطلاع خود به کد HTML اضافه می نماید. برای اضافه کردن توضیحات باید آنها را در بین علائم <!—و --> قرار داد.
کاراکترهای &,‘‘,>,< از دید HTML جزء کاراکترهای ویژه محسوب می گردند. چون هر یک از آنها جزء کلمات کلیدی در HTML هستند. معادل اسمی آنها به ترتیب برابر & , " , > , < است.
ویژگی های عام HTML به ویژگی هایی گفته می شود، که تقریباً در تمام تگ های HTML قابل استفاده هستند، این ویژگی ها شامل ID ، CLASS ، STYLE و TITLE هستند.