کدنویسی در وب؛ آشنایی با زبان HTML

کدنویسی در وب

در رایانه یکی از نیازهای موجود، ارائه و نمایش متن به کاربران است. در این راستا نیاز به استانداردی برای نمایش متون وجود دارد. به همین منظور استانداردهایی برای کدگذاری کاراکترها به وجود آمده که از جمله این استانداردها اسکی (ASCII) و یونیکد (Universal Character Code (Unicod)) هستند. به وسیله‌ی این استانداردها و به کمک یک ویراستار متن مانند نرم افزار Notepad می‌توان پرونده‌های متنی ساده (Plain Text) با پسوند txt، ایجاد و ویرایش کرد و به نمایش درآورد. همان طور که می‌دانید ارائه‌ی متون، محدود به نمایش ساده ی آنها نمی‌شود اکثر کاربردهای رایانه نیازمند نمایش متون همراه با عناصری مانند جداول، خطوط، تصاویر و چندرسانه ای می‌باشد. یک روش برای نمایش این عناصر به همراه متون این است که از نشانه گذاری استفاده کنیم. نشانه گذاری کردن متن به این معنی است که درون متن از نشانه‌هایی استفاده کنیم که برنامه‌های پردازش متن به جای این نشانه ها عناصر مشخصی مانند تصویر، جدول و غیره را به نمایش درآورند و این نشانه ها را به عنوان متن در نظر نگیرد. برای این منظور استاندارد «قالب متن غنی شده» (Rich Text Format) طراحی شده است. پرونده‌های مطابق با این قالب معمولاً دارای پسوند rtf. هستند و به وسیله ی نرم افزارهایی مانند ورد (Word) یا وردپد (Word Pad) می‌توانند به نمایش درآیند و ویرایش شوند.

«قالب متن غنی شده» بیشتر برای کارهای صفحه آرایی مناسب بوده و به منظور ایجاد پرونده حاوی متن کتب و جزوات مناسب است. اشکال قالب متن غنی شده این است که اولاً حجم پرونده آن زیاد است؛ ثانیاً نمایش و ویرایش آن نیازمند استفاده از نرم افزارهای پیچیده و گران قیمت مانند ورد است. ثالثاً برای استفاده در شبکه ی اینترنت مناسب نیست، زیرا علاوه بر آن که حجم پرونده‌های آن زیاد است کار کردن با نرم افزارهایی مانند ورد برای بیشتر مردم به دلایل مختلف از جمله بلد نبودن کار با این نرم افزار امکان پذیر نیست ضمن این که بسیاری از اشخاص علاقه دارند تا به نرم افزار خاصی وابسته نباشند و بتوانند به سادگی مطالب خود را در هر نرم افزاری ایجاد و ویرایش کنند و به نمایش درآورند به این منظور به زبان استانداردی به منظور ایجاد فرامتن (Hypertext) نیازمندیم.  

فرامتن، متنی است حاوی عناصری مانند تصویر، جدول و غیره که برای استفاده در اینترنت مناسب است و مشکلات گفته شده را ندارد. تولید فرامتن به سادگی و بدون نیاز به نرم افزارهای پیچیده امکان پذیر است هر چند که استفاده از نرم افزارهایی مانند دریم ویور (Dream Weaver) کار تولید فرامتن را ساده تر می‌کند به زبان استاندارد فرامتن زبان HTML یا زبان «نشانه گذاری فرامتن» (Hypertext Markup Language) گفته می‌شود. دقت شود که نشانه‌های زبان HTML به صورت فرمان‌های متنی است که به سادگی می‌توان این فرمان‌ها را به وسیله ی نرم افزارهای ساده ای مانند Notepad درون یک پرونده متن ساده وارد کرد تا پرونده متن تبدیل به فرامتن شود.

لازم به ذکر است که پسوند یک پرونده به زبان HTML نیز htm. یا html. (و نه txt.) می‌باشد. به دلیل این که زبان HTML به منظور استفاده در اینترنت طراحی شده است مرورگرهای وب (Web Browser) می‌توانند پرونده‌های فرامتنی نوشته شده به این زبان را نمایش دهند. آخرین نسخه ی استاندارد این زبان ۴.۰۱ HTML است. البته این زبان دارای عیب‌هایی نیز هست. مثلاً این که پرونده‌های فرامتنی از ساختار یکپارچه و منسجمی‌برخوردار نیستند وجود ساختار منسجم باعث می‌شود تا عمل درج، حذف، ویرایش و جست وجوی داده ها توسط نرم افزارها ساده تر گردد. توجه کنید که هدف از اینترنت ایجاد یک شبکه ای حاوی داده‌ها و اطلاعات است که کاربران بتوانند با اتصال به آن به جست‌وجو پرداخته و اطلاعات مورد نظر خود را دریافت کنند. در واقع انتظاراتی که از اینترنت وجود دارد بسیار شبیه انتظاراتی است که از یک بانک اطلاعاتی می‌رود. اکثر داده‌های موجود در اینترنت در قالب پرونده html هستند هر چند که این زبان کیفیت نمایش متن را بهبود می‌بخشد ولی همان طور که گفته شد دارای قالب منسجم و یکپارچه نیست تا نرم افزارها به خصوص موتورهای جست‌وجو (Search Engine) بتوانند با آن مانند یک پرونده حاوی داده برخورد کنند. بنابراین استاندارد دیگری مورد نیاز بود که علاوه بر داشتن خصوصیات فرامتن، قابلیت انعطاف و انسجام را داشته باشد. 

آشنایی با زبان HTML

اهداف رفتاری پس از آموزش این فصل هنرجو می‌تواند:

• ویژگی‌های زبان HTML را توضیح دهد؛
• یک سند ساده HTML را تولید کند.

ایجاد یک پرونده به زبان HTML

برای آشنایی با روش ایجاد صفحات وب به زبان HTML ابتدا یک پرونده‌ی ساده را در این زبان ایجاد می‌کنیم برای این کار برنامه‌ی Notepad را باز کرده سپس خط زیر را در آن وارد می‌کنیم (توجه کنید که شماره خطوط را نباید وارد کنید.

تکه کد ۱

این پرونده را به نام index.html ذخیره کنید سپس آن را در پنجره‌ی مرورگر اینترنت باز کنید همان طور که می‌بینید محل نمایش سند در پنجره‌ی آن خالی است محل سفید رنگ محل نمایش سند خالی است هر چند که منوها و نوار ابزار ممکن است دیده شوند حال بیایید به تحلیل اولین برنامه که نوشته‌ایم بپردازیم. لازم به ذکر است که برنامه‌های به زبان HTML حاوی عناصری هستند که هر یک را می‌توان همانند یک دستور در زبان VB در نظر گرفت با این تفاوت که هر عنصر دارای دو تگ به نام‌های تگ شروع و تگ پایان است. هر تگ شروع بین <…> و هر تگ پایان بین <…/> قرار می‌گیرد؛ و نام عنصر نیز باید به جای سه نقطه در تگ نوشته شود. همان طور که می‌بینید عنصر html در تکه کد بالا دارای دو تگ <html> و <html/> به عنوان تگ‌های شروع و پایان است.

صفات و خصوصیات عناصر: صفت مربوط به هر عنصر درون تگ شروع آن نوشته می‌شود.

هر صفت مانند یک متغیر عمل می‌کند که می‌تواند مقداری را در خود ذخیره کند دادن مقدار به یک صفت باعث تأثیر و تغییر در عملکرد یک عنصر می‌شود. به عنوان مثال دادن مقدار Arial به صفت face از عنصر font باعث تغییر خط نمایش متن به خط Arial می‌شود. (در مورد عنصر font و صفات آن در قسمت‌های بعدی شرح می‌دهیم). توجه کنید که هر عنصر و صفات آن فقط روی متن بین دو تگ شروع و پایان تأثیر می‌گذارند (در تکه کد زیر کلمه‌ی «سلام» متنی است که بین دو تگ شروع و پایان قرار گرفته است، بنابراین می‌گوییم کلمه‌ی «سلام» درون عنصر html نوشته شده است و کلمه‌ی «سلام» را محتوای عنصر html در نظر می‌گیریم. پس هرگاه صحبت از محتوای درون عنصر شود منظور آن چیزی است که بین دو تگ شروع و پایان عنصر نوشته شده است). دقت شود که صفات نه در درون عنصر بلکه درون تگ شروع عنصر نوشته می‌شوند بنابراین محتوای این عنصر به حساب نمی‌آیند همان طور که می‌بینید صفت xmlns درون تگ شروع عنصر html نوشته شده است. تگ شروع html در خط ۱ مشخص می‌کند که از آن به بعد هرآنچه که در پرونده موجود است تا تگ پایان html در خطوط ۲ باید به زبان html تعبیر شود. از آنجا که در این سند بین تگ شروع و تگ پایان html چیزی ننوشته ایم. بنابراین اجرای این پرونده باعث میشود تا در محل سند در پنجره ی مرورگر چیزی به نمایش در نیاید بیایید توسط این برنامه پیام «سلام» را نمایش دهیم، برنامه ی فوق را به شکل زیر تغییر می‌دهیم.

تکه کد ۲

ذخیره و اجرا کردن این پرونده باعث می‌شود که کلمه ی «سلام» در بالا و سمت چپ محل نمایش سند در پنجره ی مرورگر به نمایش درآید. توجه کنید که تگ html دارای صفات زیادی است و یکی از آنها xmlns است. این صفت از نوع رشته ای است مقداری که به این صفت در تکه کد قبلی داده ایم تعیین می‌کند که این پرونده در واقع به زبان XHTML (تفاوت‌های زبان HTML و XHTML در ادامه مباحث آمده است.) است.

اضافه کردن توضیح (Comment): برای افزودن یک توضیح به سند (که در محل نمایش سند در پنجره ی مرورگر به نمایش در نیاید) باید آن را بین دو نشانه ی <–…–!> قرار دهیم.

به تکه کد زیر توجه کنید که در آن عبارت چاپ در خروجی به عنوان توضیح در سند قرار داده شده است.

تکه کد ۳

نکته: بهتر است پرونده ی سند را با استفاده از مجموعه کاراکترهای ۸ – UTF ذخیره کنید. در این صورت اگر در سند خود کاراکترهای غیرانگلیسی مثلاً (فارسی) به کار برده باشید، سند شما با مرورگرها و ماشین‌های بیشتری در اینترنت سازگار خواهد بود. برای این که مجموعه ی کاراکترهای سند را در Notepad مشخص کنید، از لیست بازشو به نام Encoding در پایین پنجره‌ی Save As استفاده کنید.

در استاندارد یونیکد سه روش برای شماره گذاری کاراکترها وجود دارد. در روش ۸ – UTF برخلاف استاندارد ASCII تمامی زبان‌های موجود در استاندارد یونیکد را مورد حمایت قرار می‌دهد. تگ html دارای صفت دیگری به نام dir از نوع رشته ای است از طریق این صفت می‌توان جهت نوشتن متن را در سند تعیین کرد که برای انگلیسی از چپ به راست (Left To Right) و برای فارسی از راست به چپ (Right To Left) است برای این که جهت متن را از راست به چپ تعیین کنید مقدار این صفت را برابر رشته ی rtl و برای چپ به راست برابر رشته ی “ltr” قرار دهید. مثال 

تکه کد ۴

توجه کنید که عنصر DOCTYPE در خط اول برنامه به منظور تعریف نوع سند به کار می‌رود و در ابتدای برنامه‌های به زبان XHTML نوشته می‌شود تا صفحه وب طراحی شده به شکل استاندارد باشد و در مرورگرهای مختلف به درستی نشان داده شود.

خروجی تکه کد ۴ در شکل ۱ مشاهده می‌شود.

شکل ۱- اولین متن فارسی از راست به چپ

تمرین:  یک سند به زبان HTML ایجاد کنید که یک پاراگراف متن به زبان فارسی را از راست به چپ به نمایش درآورد از صفت dir برای این کار استفاده کنید. 

وارد کردن کاراکترهای خاص

همه‌ی کاراکترهای یک مجموعه کاراکتر را از طریق صفحه کلید به راحتی نمی‌توان وارد کرد، بنابراین در سند HTML می‌توان کد کاراکتر مورد نظر را وارد کرد. به عنوان مثال اگر بخواهیم کاراکتر را نمایش دهیم کافی است از شماره‌ی آن در مبنای ۱۰ که برابر ۱۶۵ است استفاده کنیم. حال اگر بخواهیم عبارت Hello¥ را در محل نمایش سند در پنجره‌ی مرورگر به نمایش درآوریم باید کد کاراکتر را در مبنای ۱۰ پس از #& وارد کنیم (به تکه کد زیر توجه کنید).

تکه کد ۵

شکل ۲-  نمایش کاراکتر خاص

برخی از کاراکترها دارای نام هستند و احتیاجی نیست تا از کد آنها استفاده کنیم. مثلاً کاراکتر > دارای نام lt& و کاراکتر < دارای نام gt& و کاراکتر & دارای نام amp& است. بنابراین اگر بخواهیم عبارت Hello & به نمایش درآید. باید آن را به صورت amp Hello & وارد کنیم. همچنین کاراکتری وجود دارد که نام آن nbsp& است. این کاراکتر یک نوع کاراکتر فاصله (Space) است که اگر به جای کاراکتر فاصله بین دو کلمه قرار گیرد این دو کلمه همواره در کنار هم قرار می‌گیرند. به این معنی که اگر هر دو کلمه در انتهای سطر جانشوند، هردو به سطر بعدی منتقل می‌شوند. در صورتی که اگر کاراکتر فاصله بین این دو کلمه باشد و یکی از دو کلمه در انتهای سطر جاشود، فقط کلمه ی دوم به سطر بعدی منتقل می‌شود.