منظور از وب چيست؟
وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها.
اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند.
تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند.
کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار ميکنند .
نحوه کارکرد وب چگونه است؟
اطلاعات وب داخل فايلهائی به نام Web Pages و يا صفحات وب قرار دارند.
اين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند.
برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده ميشود.
دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند.
مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد.
مرورگرها چگونه به خواندن صفحات وب ميپردازند؟
يک مرورگر با کمک يک Request درخواستی برای خواندن يک صفحه از وب سرور ميکند.
اين Request يا درخواست بر اساس استاندارد ارتباطی يا پروتوکل HTTP بوده و شامل آدرس صفحه مورد نظر ميباشد.
آدرس يک صفحه وب چيزی شبيه http://www.khaterat.com/faq.html است. بخش //:http نوع پروتوکل و يا استاندارد ارتباطی را تعيين ميکند، www.khaterat.com نام دومين يا Domain است و faq.html نام صفحه ای است که بايد خوانده شود.
مرورگرها چگونه صفحات وب را نمايش ميدهند؟
چگونگی نمايش يک صفحه وب بصورت مستتر در آن وجود دارد.
مرورگرها از روی دستورالعملهای داخل صفحات وب و با کمک تگ ها به نمايش صفحات ميپردازند.
وظيفه اصلی تگ های اچتمل ( HTML tags ) بيان چگونگی نمايش اطلاعات ميباشد.
يک تگ اچتمل چيزی شبيه

اين تگ پاراگراف است!

است.
چه کسانی استاندارد های وب را تعيين ميکند؟
تعيين استاندارد های وب ربطی به شرکتهای مايکروسافت و يا نت اسکيپ ندارد.
World Wide Web Consortium يا W3C متولی تعيين استانداردهای وب است.
HTML, CSS and XML از مهمترين استانداردهای تصويب شده وب ميباشند.
آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .

عناصر ( Elements )

يک فايل اچتمل متنی از نوع text است که از عناصر يا element ها تشکيل ميشود و برای ايجاد عناصر از تگ ها يا tags استفاده ميشود. در اين فصل با عناصر و تگ ها اچتمل آشنا خواهيد شد.

درس قبلی، درس بعدی

تگ های اچتمل (HTML Tags)
با کمک تگ های اچتمل عناصر و يا Elements ساخته ميشوند.
در زبان اچتمل حدود 80 عنصر تعريف شده است.
تگ های اچتمل بوسيله دو نويسه (char) > و < ساخته ميشوند.
تگ های اچتمل معمولا بصورت زوج ظاهر ميشوند، مانند test
تگ اول در يک زوج تگ مثلا تگ شروع و تگ دوم مثلا تگ پايانی نام دارد.
متن بين تگ اول و تگ دوم در يک زوج تگ محتوای عنصر يا element content ناميده ميشود، مثلا "test"
تگ های اچتمل را ميتوانيد بوسيله حروف لاتين کوچک (lower case) و يا بزرگ (upper case) بنويسيد و case sensitive نيستند. برای مثال دو تگ و معادل هم هستند ولی شديدا توصيه ميشود که به خاطر سازگاری با XHTML از حروف کوچک استفاده شود.

عناصر اچتمل (HTML Elements)

مثال بخش مقدمه را در نظر بگيريد:




This is my first html page. This text is bold


*** نمونه ای از يک عنصر اچتمل:This text is bold

عنصر اچتمل بالا با تگ شروع شده و با تگ پايان می يابد. محتوای اين عنصر عبارت "This text is bold" است. لازم به ذکر است که کاربرد تگ نمايش توپر يا bold متون است.

*** مثال دوم يک عنصر اچتمل (معلوم الحال) :
This is my first homepage. This text is bold

عنصر اچتمل بالا با تگ شروع شده و با تگ پايان می يابد. همانطور که ميبينيد گاهی يک عنصر حاوی يک يا چند تگ ديگر ميباشد.وظيفه تگ تعيين بدنه اصلی يا body يک متن اچتمل است.لازم به يادآوری است که تنها اطلاعات بخش يک فايل اچتمل در صفحه مرورگر نمايش داده خواهد شد.

شناسه های يک تگ (Tag Attributes)

تگ ها ميتوانند حاوی اطلاعات اضافی ديگر باشند، به اين اطلاعات شناسه يا Attribute ميگويند و وظيفه آنها بيان ديگر اطلاعات يک عنصر يا Element ميباشد. مثلا در مورد تگ شناسه ای به نام bgcolor وجود دارد که رنگ زمينه متن (background) را تعيين ميکند برای نمونه اگر ميخواهيد که رنگ زمينه صفحه اچتملتان سياه باشد کافی است که به شکل زير عمل کنيد :

در مثال زير تگ دارای چهار شناسه مختلف با نامهای width، height ، align و border و مقادير center، 60، 100 و 0 ميباشد.


......

شناسه ها به صورت کلی "مقدار=نام" يا "name=value" نوشته ميشوند و هميشه به تگ شروع يک عنصر يا Element اضافه ميشوند و نهايتا اگر در يک عنصر يا Element شناسه ها قيد نشوند از مقادير قراردادی يا default آنها استفاده خواهد شد مثلا در تگ body اگر شناسه bgcolor نوشته نشود از رنگ سفيد برای زمينه صفحه استفاده خواهد شد.
مقدار يک شناسه را ميتوانيد داخل نويسه های " و يا ' بنويسيد و اختيار دست شما است فقط در مواردی که مقدار يک شناسه شامل نويسه " هم ميشود بايد از نويسه ' استفاده شود.

تگ های اصلی ( Basic Tags )

تگ ها ( tags ) اجزا تشکيل دهنده عناصر يا elements های اچتمل هستند و در اين فصل با عناصر و تگ های پايه و مهم:

,
,

....

, ,


آشنا خواهيد شد . يکی از بهترين روش های يادگيری تگ های اچتمل ديدن مثالها و تغيير آنها ميباشد و با کمک اديتور اختصاصی ما و با استفاده از امکانات فارسی نويسی آن به صورت آنلاين ميتوانيد به مطالعه و يادگيری مثالها پرداخته، کدهای اچتمل را تغییر داده و با کليک روی دکمه "نمايش نتايج" به مشاهده نتايج بپردازيد.
درس قبلی، درس بعدی

مثالها :

مثالی ساده از يک صفحه اچتمل
در اين مثال بسيار ساده جمله "!Hellow World" در صفحه مرور گر نمايش داده ميشود و در واقع محتوا و متن عنصر body تماما نمايش داده خواهد شد.

پاراگرافهای ساده:
چگونگی نمايش متون با کمک تگ

و بصورت پاراگرافی

نمايش متون فارسی:
چگونگی نمايش متون فارسی. برای جزئيات بيشتر به فصل فارسی نويسی مراجعه کنيد.

مثالهای بيشتر:
سر تيترها (Headings)
سر تيترها با کمک تگ های

تا

تعيين ميشوند.

معرف بزرگترين سر تيتر و

معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالی قبل و بعد از هر سر تيتر اضافه خواهد کرد.

This is a heading


This is a heading


This is a heading


This is a heading


This is a heading

This is a heading

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
پاراگرافها (Paragraphs)
پاراگرافها با کمک تگ

معرفی ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالی قبل و بعد از آن اضافه خواهد کرد.

This is a paragraph


This is another paragraph

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.

سطر جديد (Line Breaks)
برای رفتن سر سطر جديد از تگ
استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ
از نوع تگ های خالی بوده و دارای تگ انتهائی (مثلا
) نميباشد.

This
is a para
graph with line breaks

مثال بالا در صفحه مرورگر بدين شکل نمايش داده خواهد شد.
کامنت ها در اچتمل (Comments)

برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد. برای اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرور تگ های comment را در نظر نگرفته و محتوی آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود. (به محل نويسه "!" توجه کنيد! فقط يکی و آنهم در ابتدا)

مثالی در مورد comments و نحوه استفاده از آن
چند نکته کاربردی:

توجه داشته باشيد که بدليل وجود مرورگرهای متفاوت (اکسپلورر، نت اسکيپ، ..) و به دليل تفاوت دقت نمايش صفحه نمايش کامپيوترها، صفحات اچتمل با اندکی تفاوت در حالتهای مختلف نمايش داده ميشوند و هميشه سعی کنيد که صفحاتتان را نه تنها با اکسپلورر که معروفترين مرورگر است بلکه با نت اسکيپ و حتی مرورگرهای کامپيوترهای مکينتاش چک کرده و همچنين در دقت های نمايش 800x600 و 1024X768 آن را امتحان کنيد.

از نظر فاصله و سطر بندی، متنی که در صفحه اديتورتان تايپ ميکنيد با چيزی که مرورگر نمايش خواهد داد متفاوت خواهد بود.هميشه به ياد داشته باشيد که فاصله های اضافی (space) و خطهای خالی متن در صفحه اديتور توسط مرورگر در نظر گرفته نشده و نمايش داده نخواهد شد.

برای نمايش بيش از يک فاصله خالی بايد از نويسها يا ترکيب کاراکتری خاصی (None Breaking Space) استفاده کنيد. در بخش ( Entities ) نهادها به اين مطلب بيشتر پرداخته خواهد شد.

فاصله های اضافی بين کلمات در يک متن اچتمل توسط مرورگرها ديده نخواهد شد و در نمايش هميشه تبديل به يک فاصله (space) خواهد شد. در ضمن يک خط خالی در متن اديتور بصورت يک فاصله يا space نمايش داده خواهد شد.

برای ايجاد يک سطر جديد هيچگاه از يک تگ

خالی استفاده نکنيد و به جای آن از تگ
استفاده کنيد..

مرورگرها به هنگام نمايش بعضی عناصر بصورت اتوماتيک يک سطر خالی قبل و بعد از آن عنصر نمايش خواهند داد. برای نمونه اين گروه از عنصرها ميتوان از پاراگراف (

) و سرتيترها () نام برد.

تگ

يا Horizontal Roler سبب نمايش يک خط افقی خواهد شد و در واقع بخش های مختلف مطالب اين صفحات با کمک اين تگ از هم جدا شده اند.
مثالهای بيشتر:

باز هم مثال پاراگرافها
اين مثال بعضی از مقادير قراردادی عناصر پاراگراف را شرح ميدهد.

ترازبندی پاراگراف ها
اين مثال نحوه تراز بندی يک پاراگراف را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت پاراگراف در وسط ناحيه نمايش داده خواهد شد.
( "align="center )

رفتن سر سطر جديد
اين مثال نحوه استفاده از تگ
را در يک متن اچتمل نشان ميدهد.

سر تيترها
اين مثال نحوه استفاده از تگهای

....

را در يک متن اچتمل نشان ميدهد.

ترازبندی سر تيترها
اين مثال نحوه تراز بندی يک سر تيتر را با کمک شناسه يا attribute ای به نام align نشان ميدهد. در اين حالت سر تيتر در وسط ناحيه نمايش داده خواهد شد.
( "align="center )

نمايش خطوط افقی
اين مثال نحوه نمايش خطوط افقی با استفاده از تگ
ميباشد.

استفاده از comment
اين مثال نحوه استفاده از comment در کدهای اچتمل را نمايش ميدهد.

تعيين رنگ زمينه صفحه
اين مثال نحوه تعيين رنگ زمينه صفحه را با کمک يکی از شناسه های (attribute ) عنصر body با نام bgcolor نشان ميدهد. (Background Color)
( "bgcolor ="blue )

تگهای اصلی
در جدول زير عناصر معرفی شده در اين فصل به همراه لينکهای مربوطه جهت مطالعه بيشتر آورده شده است. توجه داشته باشيد که برای هر عنصر فهرستی از شناسه ها يا Attributes موجود است و همچنين به شناسه های کنارگذاشته شده (Deprecated) در نسخه های آينده اچتمل توجه داشته باشيد و سعی کنيد که از آنها استفاده نکنيد.

سؤالات مربوط به فارسی نويسی را ميتوان به سه گروه عمده تقسيم کرد:
- چگونه فارسی بنويسم ؟
- چگونه فارسی بخوانم؟
- چگونه صفحات اچتمل فارسی را نمايش دهم؟

در مورد فارسی نويسی و فارسی خوانی اگر از اديتور آنلاين ما در بخش مثالها استفاده ميکنيد نيازی به فارسی سازی نداريد و با کمک اديتور مزبور بايد به راحتی قادر به تايپ فارسی و لاتين باشيد.اگر ميخواهيد که در هر حال سيستمتان را فارسی کنيد، مطالعه صفحات زير راهنمای بسيار خوبی برای فارسی سازی ميباشند:

* راهنمای فارسی سازی ويندوز
* استفاده از استانداردِ یونيکد
 
دو نکته بسيار مهم در مورد فارسی نويسی:

روش کدگزاری UTF-8
اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:


در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخيص داده و ديگر مثلا نيازی به تعيين دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود.

شناسه يا attribute ی به نام dir
جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ی به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد :


dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ
مثلا برای نمايش جمله فارسی "سلام بر دنيای وب!" با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود:

سلام بر دنيای وب


سلام بر دنيای وب

در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:

,

, , , , ,
+ نوشته شده در چهارشنبه بیست و پنجم فروردین ۱۳۸۹ ساعت 16:20 توسط داود حمیدیان  | 
,

, , 
 ,