به جای اینکه بپردازیم به تاریخچه ی وب و از اینکه از کجا آغاز شد و مقدمات کاملا تئوری که فقط باعث خسته شدن شما می شود سعی می کنیم مطالب تئوری را بسیار خلاصه کنیم و در حد نیاز از آن ها استفاده کنیم. (مقدمات تئوری اولیه را به خود شما واگذار می کنم) و بیشتر به مسایل عملی می پردازیم. قبل از مطالعه ی این مقاله شما باید اطلاعاتی در مورد صفحات وب و نحوه ی مدیریت فایل ها و صفحات وب در حد تئوری داشته باشید.

برای طراحی یک صفحه ی وب شما کلا دو روش در پیش دارید :

1- استفاده از Editor های HTML مثل FrontPage و یا DreamViewer و...

2- استفاده از کدنویسی HTML

در روش اول ایجاد صفحات وب بسیار آسان است و شما با اشیای گرافیکی و اشکال سرو کار داری. در این روش شما هیچ گاه خودتان را با کدنویسی درگیر نخواهید کرد. در روش دوم که روش موردنظر ماست شما باید با استفاده از نوشتن کدها صفحه ی وب موردنظر خود را ایجاد کنید که این روش نسبت به روش اول نیاز به وقت و دقت بیشتری دارد.

ساختار HTML و نحوه ی نوشتن کدها :

در این قسمت می خواهیم بدانیم که ساختار HTML چگونه است. باید بدانید که HTML مخفف کلمات HyperText Markup Language به معنای زبان نشانه دار ابر متن می باشد. همان طور که از اسم این زبان برنامه نویسی پیداست تمام کدها به صورت قسمت به قسمت و هر قسمت با نشانه و یا علامتی مشخص می شوند که این علامت ها اساس زبان HTML را تشکیل می دهند.

بقیه ی مقاله در ادامه ی مطلب

 به جای اینکه بپردازیم به تاریخچه ی وب و از اینکه از کجا آغاز شد و مقدمات کاملا تئوری که فقط باعث خسته شدن شما می شود سعی می کنیم مطالب تئوری را بسیار خلاصه کنیم و در حد نیاز از آن ها استفاده کنیم. (مقدمات تئوری اولیه را به خود شما واگذار می کنم) و بیشتر به مسایل عملی می پردازیم. قبل از مطالعه ی این مقاله شما باید اطلاعاتی در مورد صفحات وب و نحوه ی مدیریت فایل ها و صفحات وب در حد تئوری داشته باشید.

برای طراحی یک صفحه ی وب شما کلا دو روش در پیش دارید :

1- استفاده از Editor های HTML مثل FrontPage و یا DreamViewer و...

2- استفاده از کدنویسی HTML

در روش اول ایجاد صفحات وب بسیار آسان است و شما با اشیای گرافیکی و اشکال سرو کار داری. در این روش شما هیچ گاه خودتان را با کدنویسی درگیر نخواهید کرد. در روش دوم که روش موردنظر ماست شما باید با استفاده از نوشتن کدها صفحه ی وب موردنظر خود را ایجاد کنید که این روش نسبت به روش اول نیاز به وقت و دقت بیشتری دارد.

ساختار HTML و نحوه ی نوشتن کدها :

در این قسمت می خواهیم بدانیم که ساختار HTML چگونه است. باید بدانید که HTML مخفف کلمات HyperText Markup Language به معنای زبان نشانه دار ابر متن می باشد. همان طور که از اسم این زبان برنامه نویسی پیداست تمام کدها به صورت قسمت به قسمت و هر قسمت با نشانه و یا علامتی مشخص می شوند که این علامت ها اساس زبان HTML را تشکیل می دهند. برای مثال در صورتی که با برنامه ی Microsoft Word کار کرده باشید وقتی که یک عبارت را Bold می کنید ، بر روی دکمه ی B کلیک می کنید و عبارت موردنظر به صورت تیره نوشته می شود. این کار در html با استفاده از نشانه ی </b><b> (که در اصطلاح به این نشانه ها Tag می گویند) انجام می شود.

بعد از این توضیحات این سوال پیش می آید که ما باید کدهای HTML را در کجا تایپ کنیم ؟ معمولا کدهای HTML بوسیله ی یک ادیتور متن ساده انجام می گیرد. برای مثال در صورتی که از سیستم عامل ویندوز استفاده می کنید NotePad و در صورتی که از Linux استفاده کنید Gedit برای شما بهترین گزینه خواهد بود. حتما در هنگام تایپ کدها دقت کنید که از برنامه هایی مثل MS Word در ویندوز که کاراکترهای اضافی مخصوص به خود را به فایل اضافه می کنند ، استفاده نکنید.

گفتیم که HTML یک زبان علامت دار قسمت به قسمت است که هر یک از این علامت ها را Tag (تگ) می گوییم هر تگ در HTML با دوعلامت بزرگ تر و کوچکتر مشخص می شود و باز می شود و با دوعلامت بزرگتر و کوچکتر و یک اسلش بسته می شود. برای مثال تگ تیره کردن متن بصورت </b><b> استفاده می شود. به صورت زیر :

<b> متن موردنظر شما برای تیره شدن </b>

فقط در مواردی ما تگ پایانی یعنی <  /> را نداریم که در هنگام دستورات به آن اشاره خواهم کرد.

شکل کلی یک صفحه ی HTML :

هر صفحه ی HTML از دوبخش کلی تشکیل می شود یکی اعلان نسخه ی HTML (آخرین توضیحات در مورد نسخه های HTML و زبان های مبتنی بر SGML در سایت http://www.w3.org موجود است.) و دیگری تگ HTML می باشد که اصلی ترین قسمت یک برنامه ی HTML است.

مهم ترین قسمت یک برنامه ی HTML تگ HTML است که خود دارای دوبخش اصلی است. یکی HEAD که شامل عنوان صفحه و دیگر تنظیماتی که در مرورگر نمایش داده نخواهند شد و فقط برای بارگذاری تنظمات صفحه قرار می گیرند و دیگری BODY است که کد اصلی برای نمایش محتویات صفحه ی WEB را دربر می گیرد.

بنابر توضیحاتی که ارائه شد شکل کلی یک برنامه ی HTML به صورت زیر است

1    <!DOCTYPE HTML PUBLIC-//W3C/DTD HTML4.0 Transitional//EN">   اعلان نسخه و زبان صفحه

2    <HTML>  html باز شدن تگ 

3    <HEAD>  head باز شدن تگ 

4    تنظیمات صفحه در این قسمت قرار می گیرد

5    </HEAD> head بسته شدن تگ 

6    <BODY> body باز شدن تگ 

7    کدها برای نمایش صفحه ی وب

8    </BODY> body بسته شدن تگ 

9    </HTML>    html بسته شدن تگ 

شکل کلی یک Tag در HTML :

بعد از اینکه شکل کلی یک صفحه ی HTML را بررسی کردیم می رسیم به شکل کلی یک تگ در HTML با اینکه هر یک از تگ ها در HTML با هم تفاوت زیادی دارند ولی بین آنها خواص زیر مشترک است و معمولا به فرم زیر در برنامه ظاهر می شوند:

<tag title="مقدار" ID="مقدار" CLASS="مقدار" STYLE="مقدار"Matneh Moredeh Nazar  </tag>

همان طور که می بینید بعد از tag> عبارت title قرار گرفته است بدون اینکه تگ بسته شود به عبارتی دیگر عبارت هایی مثل title و style و class و ... که در داخل تگ قرار می گیرند و بر عملکرد دستور یا نگ تاثیر می گذارند صفات Tag می گویند. چهار صفت ذکر شده در دستور بالا در بین بیشتر دستورات HTML مشترک هستند و تقریبا در تمامی دستورات HTML کاربرد دارند. در هر تگ شما می توانید تمامی صفت های آن تگ را ذکر کنید و یا اینکه هیچ صفتی ذکر نکنید. بسته به نوع خواسته ی شما صفت ها با هم تفاوت خواهند داشت. دقت داشته باشید که معمولا هر صفتی دارای یک مقدار است که در مثال بالا باید به جای کلمه ی فارسی مقدار ، مقدار یا Value آن صفت را ذکر کنید که هر صفت مقدار مخصوص به خود را دارد. مثلا برای صفت title شما باید عبارت شامل کاراکترو یا حرف را ذکر کنید و برای صفتی مانند color باید کاراکتری در مبنای 16 برای مشخص کردن رنگ موردنظر ذکر کنید. لازم به ذکر است که هر تگ ضفات مخصوص به خود را دارد که در دستورات دیگر و تگ های دیگر قابل استفاده نیستند. برای مقدار دهی صفت ها همان طور که در مثال بالا به آن اشاره شده است کافی است که نام صفت و علامت مساوی و یک کوتیشن (" را بذارید مقدار موردنظر را وارد کنید و کوتیشن (" را ببنید.

اما شرح چند صفت ذکر شده در مثال بالا :

صفت title : با استفاده از این صفت شما می توانید هنگامی که ماوس بر روی عبارت موردنظر شما قرارگرفت مقدار داده شده در این عبارت به عنوان tooltip ماوس به نمایش درآید.

صفت های id,class,style : هرسه ی این صفت ها برای اعمال صفت های متعدد به تگ استفاده می شود که بحث شیوه نامه ها (Styles) به طور کامل شرح داده خواهند سد.

 

یک مثال ساده :

می خواهیم یک صفحه ی HTML ساده درست و اجرا کنیم تا مطالب گفته شده را به مرحله ی اجرا در آوریم. با استفاده از یک ادیتور متن متناسب با سیستم عامل خود کدهای زیر را در فایلی با نام test.html در میز کار خود ذخیره کنید. (بدون شماره ها تایپ کنید) :

1    <!DOCTYPE HTML PUBLIC-//W3C/DTD HTML4.0 Transitional//EN">

2    <HTML>

3    <HEAD><TITLE> My First Program In HTML </TITLE></HEAD>

4    <BODY>

5    <B> Hello World, This Is My First Program In HTML Programing </B>

6    </BODY>

7    </HTML>

بعد از تایپ کدها فایل موردنظر را ذخیره کنید و فایل test.htm و یا test.html را اجرا کنید که شکلی همانند شکل زیر خواهید دید :

توضیح کد :

در خط اول نسخه ی HTML به همراه زبان موردنظر برنامه اعلان شده است. در خط دوم تگ HTML باز شده و درخط 7 بسته شده است. در خط سوم تگ HEAD باز شده و در همان خط بسته شده است. دقت کنید که در این تگ یک تگ دیگر به نام title استفاده شده است. (با صفت title اشتباه نگیرید.) که باعث می شود نوار عنوان مرورگر اینترنتی شما به متن My First Program In HTML (همان طور که در شکل بالا می بینید) تبدیل شود. در خط چهام تگ BODY یا بدنه ی اصلی برنامه باز شده و در خط 6 بسته شده است. در خط پنجم متنی برای نمایش در پنجره ی مرورگر اینترنتی قرار داده شده است. دقت کنید که این متن در تگ تیره کردن متن یعنی <b/>و <b> قرار داده شده است تا به صورت تیره نشان داده شود.

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

از این قسمت به بعد سعی می کنیم پرسش های مروری را هم در آخر قسمت ارائه کنیم با آن ها میزان یادگیری خود را بسنجید :

 

پرسش های مروری :

1- HTML مخفف چه کلماتی و به چه معنی است ؟

2- به طور کلی از چه روش هایی می توان یک صفحه ی وب را طراحی کرد؟

3- صفات tagها را تعریف کنید و محل قرار گیری آن ها را در TAG بنویسید.

4- شکل کلی یک صفحه ی HTML را رسم کنید.

5- مرجع زبان های مبتنی بر SGML چه سایتی است ؟ (سعی کنید سری هم به این سایت بزنید.)

 

یک پرسش برای افراد علاقه مند به جستجو :

 SGML چیست و از کجا آغاز شد و جدیدترین نسخه ی SGML چیست؟

پاسخ های خودنان برای این سوال را می توانید در قسمت نظرات همین مطلب ارائه کنید.

موفق و موید باشید.

بهرام بهرام بیگی

 

نوشته شده در تاریخ جمعه 20 مرداد 1385    | توسط: بهرام بهرام بیگی    | طبقه بندی: طراحی وب،     |
نظرات()