آموزش HTML
تاریخچه:
در سال 1990 ميلادي فيزيكداني به نام Tim Burners Lee روشي را ابداع نمود كه به وسيله آن, متون بر روي اينترنت از طريق اتصالهاي فوق متن, يا-Hypertext Markup Language - HTML منتقل مي شد. فوق متن در واقع متني است كه به صورت خطي و پشت سر هم ذخيره نشده و در واقع بين قسمتهاي مختلف صفحات حاوي متن , ارتباطات و اتصالات خاصي وجود دارد . زبان علامت گذاري فوق متن يا اچ تي ام ال نيز در واقع يك نوع زبان برنامه نويسي كامپيوتري است كه چگونگي قرار گرفتن و ارتباط بين متنها ,تصاوير و ساير عناصر موجود در يك صفحه را توضيح داده و در خود نگه مي دارد.
در واقع همين صفحات به هم پيوسته بودند كه وب جهاني يا WWW را بنا نهادند. امروزه صفحات اچ تي ام ال به عنوان رابط اصلي و استاندارد اينترنت مورد توافق همگان قرار گرفته اند. اين صفحات مي توانند علاوه بر نشان دادن متنهاي ساده , با تحت پوشش قرار دادن تصاوير گرافيكي, صداها و حتي ويدئو, يك برنامه محاوره اي و تعاملي كامل را در اينترنت بوجود آورند.
همانطور كه مي دانيد صفحات وب و اچ تي ام ال فقط در اينترنت يافت نمي شود بلكه امروزه شبكه هاي كامپيوتري بسياري از شركتهاي معتبر در سراسر دنيا از صفحات وب براي فراهم كردن اطلاعات تجاري و اقتصادي خود استفاده مي كنند. همچنين در ساخت و نمايش تبليغات تجاري در شبكه هاي تلويزيوني ويا بر روي CDها يا DVDهاي تبليغاتي مختلف ,امروزه اچ تي ام ال انتخاب اول مي باشد. بعلاوه شركت ماكروسافت نيز اچ تي ام ال را به صورت مستقيم در رابطهاي مختلف بزرگترين سيستم عامل دنيا يعني ويندوز قرار داده است .به عنوان مثال فايلها, پوشه ها و درايوهاي مختلف , همگي از طريق پيوندهاي اچ تي ام ال و به صورت رابط وب به نمايش گذاشته مي شوند.
XML درواقع مخفف كلمه Extensible Markup Language يا زبان علامت گذاري قابل توسعه مي باشد .در برنامه نويسي اچ تي ام ال ما از دستوراتي استفاده مي كنيم كه از قبل , در استانداردهاو قواعد دستوري آن زبان تعريف شده وكار مشخصي انجام ميدهند. در صورتي كه در زبان ايكس ام ال ما مي توانيم از دستوراتي با نامهاي اختصاصي كه توسط خودمان تعريف مي شوند,استفاده كنيم . برتري زبان XHTML كه ما به آن اچ تي ام ال توسعه يافته مي گوئيم, اين است كه چگونگي نشان دادن داده ها را در اختيار ما قرار داده در صورتي كه ايكس ام ال توانايي نحوه سازماندهي اين داده ها را در اختيار ما مي گذارد
وب چيست؟
وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها.
اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند.
تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند.
کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار ميکنند
نحوه كار كرد وب؟
اطلاعات وب داخل فايلهائی به نام Web Pages و يا صفحات وب قرار دارند.
اين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند.
برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده ميشود.
دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند.
مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد.
استاندارد هاي وب
World Wide Web Consortium يا W3C متولی تعيين استانداردهای وب است.
HTML, CSS and XML از مهمترين استانداردهای تصويب شده وب ميباشند.
آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .
اچتمل هستند و در اين قسمت با عناصر و تگ های پايه و مهم آشنا خواهيد شد . تگ هااجزا تشکيل دهنده عناصر
سر تيترها
سر تيترها با کمک تگ های <h1>تا<h6> تعيين ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالی قبل و بعد
از هر سر تيتر اضافه خواهد کرد.
<h1>This is the first heading</h1>
<h2>This is the second heading</h2 >
<h3>This is the third heading</h3>
<h4>This is the forth heading</h4>
<h5>This is the fifth heading</h5>
<h6>This is the sixth heading</h6>
پاراگرافها
پاراگرافها با کمک تگ <p> معرفی ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالی قبل و بعد از آن اضافه خواهد کرد.
<p>This is a paragraph</p>
توضيحات اضافي در HTML
برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد. برای اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرورگرها تگ های comment را در نظر نگرفته و محتوی آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود.
<!-- This is a comment -->
سطر جديد
برای رفتن سر سطر جديد از تگ br استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ br از نوع تگ های خالی بوده و دارای تگ انتهائی نميباشد.
تگ <font>
در نسخه های 3.2 و قبلی تر زبان اچتمل از تگ <font> برای تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود.
شناسه های تگ<font>
Attribute Example کاربرد
size="number" size="2" تعیین اندازه قلم
size="+number" size="+1" افزایش اندازه قلم
size="-number" size="-1" کاهش اندازه قلم
face="face-name" face="Times" تعیین نام قلم
color="color-value" color="#eeff00" تعیین رنگ قلم
color="color-name" color="red" تعیین رنگ قلم
تگ <span>
تگ <span> سبب تعريف محدوده و گستره ای مشخص ميشود. تمامی المان هائی که درون تگهای <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبيل استايل (Style) و يا سمت و جهت نمايش متون dir بر خلاف تگ های <p> و <div> مرورگرها هيچ سطر جديدی به اول يا آخرالمان<span>اضافه نمی کنند.
تگ <div>
تگ <div> سبب تعريف محدوده و گستره ای مشخص ميشود. تمامی المان هائی که درون تگهای <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبيل استايل (Style) و يا سمت و جهت نمايش متون dirبر خلاف تگ <span> مرورگرها يک سطر جديد به اول و آخر المان <div> اضافه می کنند.
رنگ و يا تصوير پس زمينه فاکتور بسيار مهمی در طراحی صفحات اچتمل بوده و استفاده از رنگ و يا تصوير مناسب نقشی تعيين کننده در خوانا بودن صفحات دارد.
شناسه bgcolor برای رنگ پس زمينه
شناسه bgcolor رنگ پس زمينه را تعيين ميکند. مقدار رنگ پس زمينه ميتواند نام رنگ ، مقدار آن بر اساس استاندارد RGB و يا حتی مقدار هگزادسيمال باشد.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
شناسه Background برای تصوير پس زمينه:
برای تعيين تصويری که به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه background استفاده ميشود.مقدار اين شناسه URL يا آدر س تصوير (image) ميباشد.اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر باشد، تصوير زمينه تکثير خواهد شد تا حدی که تمام صفحه نمايش از تصوير زمينه پوشانده شود.
نکات مهم: اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميکنيد به نکات زير توجه کنيد :
• هرتصويری با فرمت gif و يا jpg قابل استفاده به عنوان تصوير زمينه ميباشد.
• از تصاوير بزرگتر از ده کيلوبايت ظرفيت به هيچ وجه استفادا نکنيد، در غير اين صورت سرعت load صفحه بشدت پايين خواهد آمد.
• از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد.
• از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد.
• در رزولوشنهای مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد.
• پر مصرف ترين رنگهای زمينه وب سايتها، رنگهای سفيد، سياه و خاکستری ميباشند.
نکته مهم در سازگاری با نسخه های جديد اچتمل و XHTML
شناسه های bgcolor و background در تگ<body> در نسخه 4 اچتمل و XHTML پشتيبانی نميشوند و در واقع از رده خارج محسوب ميشوند. در عوض کنسرسيوم W3C استفاده از Style Sheet ها را توصيه ميکند و در واقع در نسخه 4 اچتمل و استاندارد جديد XHTML تمامی اطلاعات مربوط به نمايش يا presentation و layout بايد در style sheet ها قرار گيرند.
مقدمه:
از چند سال پيش در كشورمان، استفاده از كامپيوتر با سرعت سرسامآوری جای خود را در تمامی عرصهها باز كرد و سيل كامپيوترهای شخصی و تجهيزات جانبی آنها به سوی كشور سرازير شد. اما بايستی اعتراف كرد كه با وجود اين كه سرعت سوق به سوی تكنولوژی ديجيتال در ايران روند خوبی را طی نموده، اما در زمينه ارائه اطلاعات و پردازش آن به زبان فارسی تشتتی در اين ميان ايجاد گرديد. يكی از عوامل موثر در اين ناهماهنگی، نبود الگويی واحد برای ذخيره و پردازش و نمايش اطلاعات بر روی رسانههای جديد اطلاعرسانی همچون كامپيوتر در سطح ملی است.
نرمافزارهای متفاوت، با فرمتهای مختلف، كدهای فارسی گوناگون و ... در حال استفادهاند و روزانه ميزان قابل توجهی از اطلاعات را در خود جای میدهند. اگر از آن دسته از مراكزی كه به دليل عدم آگاهی كافی اطلاعات را به صورت ناقص جمعآوری و وارد میكنند (كه حدود 80 درصد جامعه مورد نظر را تشكيل میدهند) بگذريم به تفرق، اختلاف و اعمال سليقههای مختلف در ساير مراكز خواهيم رسيد كه برای نمونه به اختلاف در مورد كدنويسههای به كار رفته برای حروف فارسی روی كامپيوتر میتوان اشاره كرد.
نتيجه ادامه روند جاری
در مورد مراكزی كه به هر حال مشغول سرمايهگذاری در بخش ورود، پردازش و نمايش اطلاعات هستند مسئله به نوع ديگری خود را نشان خواهد داد. اين گونه مراكز تا زمانی كه پای خود را از محدوده مركز خود فراتر نگذاشتهاند مشكلی نخواهند داشت، ولی به محض آنكه بخواهند با مراكز اطلاعاتی و تحقيقاتی ديگر ارتباط برقرار كرده يا به مبادله اطلاعات با اين مركز بپردازند متوجه خواهند شد كه سالها سرمايههای خود را بر باددادهاند.
همين مشكل در سطح ملی برای ايجاد يك مركز اطلاعات ملی رخ خواهد نمود. زمانی اين مشكل ملی بيشتر نمود پيدا میكند كه بحث شبكه جهانی اينترنت نيز به ميان آيد.
اينترنت به عنوان كليدی برای ارتباط با ديگر مراكز اطلاعاتی - به علت در دسترس بودن آسان و همچنين حجم عظيم اطلاعات موجود در آن- يكی از مهمترين موضوعاتی خواهد بود كه به علت عدم وجود يك سيستم جهانی برای ذخيره، بازيابی، پردازش و نمايش اطلاعات و به طور كلی مبادله اطلاعات كه جنبههای ملی نيز داشته باشد، دارای نقاط ضعفی است كه ما را از بهرهبرداری مناسب در جهت منافعمان باز میدارد.
راه حل چيست؟
از زمانی كه اولين گزارش «زبان فارسی و كامپيوتر» در سال 1356 در دانشكده رياضی و كامپيوتر دانشگاه صنعتی شريف ارائه شد، تا امروز كه شبكه اينترنت چهره ديگری به اطلاعرسانی داده است، مدت زيادی میگذرد. امروزه ديگر محدوديتهای سختافزاری يا نرمافزاری نمیتواند مانع پيادهسازی يك سيستم ذخيرهسازی، نمايش، و تبادل اطلاعات چندزبانه گردد. امروزه مؤسسات بزرگ استانداردسازی چون ايزو ( ISO ) و W3 Consortium نيز، در استانداردهايشان مشكلات و مسائل مربوط به جهانیسازی را در نظر میگيرند تا امر تبادل اطلاعات چند زبانه را تسهيل نمايند. اما به نظر میرسد كه به دليل عدم حضور ايرانيان و فارسیزبانها در اين روند، زبان فارسی قدری غريب مانده و كمتر به آن توجه شده است. به عنوان مثال، هنوز در بين صدها مجموعهنويسه( Character Set ) ثبت شده در اينترنت توسط يانا (Internet Assigned Number Authority)، تنها يك مجموعهنويسه ثبت شده متعلق به زبان فارسی است كه آن هم كد پيج اختصاصی شركت آيبيام است. حتی در مورد استاندارد كلی تبادل اطلاعات نيز قالبی كه مورد توافق همه باشد وجود ندارد. سه قالب موجود، ايران سيستم، استاندارد 2900 و استاندارد 3342 ، هر يك ايراداتی دارند كه سبب شده است شركتها و مؤسسات داخلی به جدولهای خاص خود روی آورند تا بتوانند نيازهای خود را تا حدی رفع سازند.
اخيراً راهحلهايی در هر يك از مسائل خاص مربوط به تبادل اطلاعات برای بينالمللیسازی در نظر گرفته شده است كه با وجود اين كه اين موارد كاملتر از جداولی است كه در ايران برای حل مشكلات تبادل اطلاعات زبان فارسی ايجاد گرديده، ولی به خاطر عدم وجود مراجع موثق در مورد خط و زبان فارسی برای استانداردگذاران، مسائل خاص اين زبان يا در نظر گرفته نشده و يا به شكل ناقص منظور شده است. خوشبختانه بسياری از اين استانداردها امكان گسترش بعدی را در نظر گرفتهاند كه روند تصحيح را تسهيل میكند.
يونیكد چيست؟
از جمله استانداردهای بينالمللی كه كاملتر از بقيه استانداردهای موجود به رفع نيازهای مربوط به تبادل اطلاعات چندزبانه پرداختهاست، میتوان به استاندارد يونیكد اشاره كرد.
اين استاندارد، تقريباً توسط تمامی شركتهای بينالمللی كامپيوتری، مانند آيبيام، مايكروسافت، و سان، و نيز موسسات ملی استاندارد در كشورهای مختلف جهان برای تبادل اطلاعات چندزبانه مورد توافق قرار گرفته است و سرعت رشد بسيار زيادی نيز در ميان كاربران دارد. همينطور، در حال حاضر كليه استانداردهای جديدی كه برای شبكه اينترنت طراحی میشوند، اين دو استاندارد را بهعنوان كدپيج پيشفرض میپذيرند كه استاندارد XML و زبان جاوا از آن جملهاند.
به زبان ساده میتوان گفت كه يونیكد روشی برای تبديل متون به رشتههای عددی قابل ذخيره در كامپيوتر است. روشهای گوناگونی برای اين كار وجود دارند، ولی مزيت يونیكد نسبت به آنها، اين است كه يك روش كامل جهانی است؛ به اين معنی كه حروف همه زبانهای دنيا و تمامی علائم مورد استفاده همه مردم جهان در آن آمدهاند و همچنين در همهجا قابل نمايش است و نياز به امكانات خاصی ندارد. البته يونیكد هنوز جوان است ولی امروزه بسياری نرمافزارهای رايج در جهان (از جمله همه مرورگرهای جديد اينترنت) آن را پشتيبانی میكنند.
از مهمترين مزايايی كه يونیكد برای زبان فارسی دارد (مثل بسياری زبانهای ديگر) میتوان موارد زير را نام برد:
1. در نسخه استاندارد هر نرمافزاری كه از اين استاندارد پشتيبانی كند، میتوان فارسی نوشت يا متون فارسی را خواند. بدين ترتيب ديگر نيازی به تأمين نسخههای خاص فارسی يا عربی نيست.
2. برای خواندن متون فارسی كه توسط شركت خاصی نوشته شدهاند، نيازی به داشتن فونت خاص آن شركت نداريم و هر متن فارسی كه با استاندارد يونیكد، كدگذاری شده باشد، با هر فونت يونیكدی قابل مشاهده است.
3. امكان استفاده همزمان از زبانهای فارسی و انگليسی را تأمين میكند.
4. بدون استفاده از فونتهای خاص امكان استفاده از علائم خاص را فراهم میكند.
به بيان ديگر، «استاندارد يونیكد» استاندارد جهانی كدگذاری كاركترهاست كه برای پردازش كامپيوتری متون به كار میرود. اين استاندارد همان كاراكترها و كدهای استاندارد ISO/IEC 10646 را داراست و كاملا با آن سازگار است. پس در واقع هر پيادهسازی سازگار با يونیكد، با ISO/IEC 10646 نيز سازگار است.
يونیكد امكان كدگذاری همه كاراكترهای مورد استفاده در نوشتن زبانهای دنيا را فراهم آوردهاست. اين استاندارد از كدگذاری 16بيتی استفاده میكند كه برای بيش از65000 نويسه (كاراكتر) جا فراهم میكند. اگر چه 65000 نويسه برای كدگذاری اكثر نويسههايی كه در زبانهای مهم دنيا استفاده میشود كافی است، با اين حال يونیكد شيوهگسترشی بهنام UTF-16 فراهمكردهاست كه امكان اضافهكردن حدود يك ميليون نويسه ديگر را نيز میدهد. اين دامنه برای كليه نويسههای عالم، از جمله پوشش كامل همه خطهای باستانی (همچون خط ميخی) نيز كافی است.
يونیكد برای كليه نويسههای مورد استفاده در زبانهای عمده دنيا كد تعيينكردهاست. بهعلت گستردهبودن فضای تخصيص نويسه، اين استاندارد بسياری از نمادهای لازم برای حروفچينی را نيز در بر گرفتهاست. از خطهای مورد پشتيبانی اين استاندارد میتوان به لاتين (دربرگيرنده اكثر زبانهای اروپايی)، سيريليك(روسی، صربی)، يونانی، عربی (شامل عربی، فارسی، اردو، كردی)، عبری، هندی، ارمنی، آسوری، چينی، كاتاكانا و هيراگانا(ژاپنی)، و هانگول (كرهای) اشارهكرد. بهعلاوه، تعداد زيادی نماد رياضی و فنی علائم نقطهگذاری، پيكان، و علامتهای متفرقهدر اين استاندارد وجود دارد. اين استاندارد برای علامتهای تركيبشونده يا اعرابها نيز كدهايی در نظر گرفتهاست كهاز جمله آنها علامتهايی چون «˜» (مد)هستند كه در تركيبب حروف پايه، حروف تغييرلحن يافتهای چون «ñ» را میسازند.
به طور كلی، بعضی از مشخصات يونیكد به شرح زير است:
نويسههای شانزدهبيتی
يكیسازی (اختصاص يك كد به نويسههای مشترك در چند زبان مختلف)
نويسه، نه شكل (يك «ع»، و نه چهارتا: «ﻋ»، «ﻌ»، «ﻊ»، «ﻉ»)
بار معنايی (حرفبودن، مقدار عددی، ...)
در استاندارد يونیكد، نويسههای فارسی در بلوك مربوط بهخط عربی قرار دارند. اين بلوكبرای دربرگرفتن نويسههای زبانهايی كهاز خط عربیاستفادهمیكنند، مثل فارسی، اردو، پشتو، سندی، و كردی گسترش يافته است. اين بلوك نشانههای قرآنی از قبيل نشانههای سجده و پايان آيه، و علائم وقف را نيز در بردارد.
در يونیكد با وجود يكیسازی كدهای حروف مشترك، برای حروف فارسی كه بار معنايی يا نمايشی متفاوت با حروف عربی دارند، نويسههای جداگانه درنظر گرفتهشدهاست. يعنی كليه حروف خاص فارسی (پ، چ، ژ، گ) و نيز «ك» و «ی» فارسی كهبا حرف مشابهدر عربیتفاوت نمايشی دارند، مكانجداگانهای بهخود اختصاص دادهاند. كليه اعرابهای متداول حضور دارند و ميان شكلفارسی/اردو و عربی ارقام نيز بهعلت شكل و رفتار متفاوت، تفاوتهايی منظور گشتهاست.
از طرف ديگر، علائم نقطهگذاری چون نقطه و فاصله كهشكلی كسانیدر خطهای لاتين و عربی دارند، كد يكسان دارند. علائمیچون پرانتز نيز، بسته به جهت متن، آينهای میشوند، به طور مثال، نويسه 0028 نماينده «پرانتز باز» است، و نه«پرانتز سمتچپ». يونیكد اتصالمجازی و فاصله مجازی را نيز تحتنامهای «اتصال با عرضصفر» و «بیاتصالی با عرضصفر» بهرسميت میشناسد.
اصطلاحات:
نويسه: در مقابل character. كوچكترين واحد متن. مثلاً يك حرف لاتين، يك اعراب فارسی، يكی علامت نقطهگذاری، يك نشانه بريل، يا يك نماد رياضی
شكل: در مقابل glyph. كوچكترين واحد نمايش متن. برای بعضی نويسهها مثل حروف فارسی و هندی ممكن است چند شكل موجود باشد. مثلاً « ﺑ » و « ﻊ » از اشكالنمايشی محسوب میشوند
مجموعهنويسه: در مقابلcharacter set. مجموعهای از نويسهها كهبههر نويسه عددی اختصاصمیدهد كه نماينده آن نويسه محسوب میشود و در تبادل اطلاعات مورد استفادهقرار میگيرد
مجموعه كد: در مقابل codepage. سيستمی كه بههر نويسه دنباله مشخصیاز بايتها را متناظر میكند. مجموعهنويسهها میتوانند بهشكل يا چند مجموعهكد قابل استفادهباشند.
وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثلا ضخيم بودن و يا مورب و ايتاليک بودن ) ميباشد و در اين درس با اين گروه از تگهایformatting آشنا خواهيد شد:
<b> , <big> , <code> , <del> , <em> , <i> , <ins> , <kbd> , <pre> , <s> , <samp> , <small> , <strike> , <strong> , <sub> , <sup> , <tt> , <u> , <var>
نحوه ديدن سورس کدهای اچتمل (HTML Source)
o اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در منوی View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوری باز کرده و قابل ذخيره توسط شما برای استفاده های بعدی ميباشد.
o اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد برای ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند.) و سپس برای ديدن کد اچتمل اختصاصی هر صفحه بايد پس از "Right Click" روی هر صفحه "View Source" کرده و کد اچتمل هر فريم را جداگانه ببينيد.
o اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!
تگ هاي فرمت دهي
Start Tag Purpose کاربرد
<b>
Defines bold text نمايش توپر
<big>
Defines big text نمايش در اندازه بزرگ
<em>
Defines emphasized text نمايش بصورت تاکيد شده
<i>
Defines italic text نمايش ايتاليک يا کج
<small>
Defines small text نمايش در اندازه کوچک
<strong>
Defines strong text نمايش قوی ؟!
<sub>
Defines subscripted text نمايش پايين تر از خط افقی
<sup>
Defines superscripted text نمايش بالاتر از خط افقی
<ins>
Defines inserted text نمايش به صورت خط زير
<del>
Defines deleted text نمايش به صورت خط خورده
<s> Deprecated. Use <del> instead از رده خارج
<strike> Deprecated. Use <del> instead از رده خارج
<u> Deprecated. Use styles instead از رده خارج
در محيط وب، صفحات اچتمل با کمک پيوندها به يکديگر متصل ميشوند. اصطلاح ابرمتن(Hyper Text) در مقابل متن خطی قرار دارد. در يک متن معمولی خواندن به شکل خطی و از ابتدا به انتها ميباشد و در مقابل در يک متن مختلط با کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد.اين کار با کمک عنصری معلوم الحال! به نامA ياAnchor ميسر ميگردد.
تگ Anchor و شناسه href
برای ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها ميتوانند به بخش ديگری از همان صفحه، صفحات ديگر وب، تصاوير، فايلهای صوتی يا حتی فيلم ها و ... اشاره کنند.
فرم کلی يک پيوند به قرار زير است:
<a href="url">Some Text</a>
در مثال بالا تگ <a> برای ايجاد پيوندی به صفحه ای ديگر که آدرس اينترنتی آن url ميباشد بکار رفته است. برای تعيين مقصد و يا آدرس صفحه جديد از شناسه ای به نام href که همان hyerlink reference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتی صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــی (و يا تصويری ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روی آن کليک خواهد کرد ميان تگهای <a> و </a> قرار داده ميشود و هر چند که در مثال بالا اين بخش متن "Some Text" است ولی ميتواند حتی يک تصوير باشد.
برای نمونه کد اچتمل زير پيوندی به سايت google.com ايجاد خواهد کرد:
<a href="http://www.google.com/">Visit Google Site</a>
و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روی پيوند توسط بازديدکننده، مرورگر به سايت Google خواهد رفت.
Visit Google Site
شناسه target در پيوندها:
با کمک شناسه target امکان تعيين مقصد پيوند جديد فراهم ميشود. در مثال بالا پس از کليک روی پيوند، مرورگر سايت google.com را باز کرده و جايگزين سايت فعلی خواهد شد. اگر ميخواهيد که مرورگر پيوند را در صفحه ای جديد باز کند بايد از شناسه target و مقدار "_blank" برای آن استفاده کنيد . مثال زير سبب باز شدن سايت google.com در پنجره جديدی خواهد شد:
<a href="http://www.google.com/" target="_blank">Visit Google Site</a>
Visit Google Site
شناسه Name :
با کمک شناسه name ميتوانيد پيوندها را نام گذاری کنيد.پيوندهای نامگذاری شده امکان حرکت ميان قسمتهای مختلف يک صفحه يا page را فراهم ميکنند. در اينصورت مثلا برای رفتن به آخر يک متن ديگر نيازی به Scrool down کردن تمامی صفحه نيست و کافی است که بازديدکننده روی پيوندی که به آخر صفحه اشاره ميکند کليک کند.
استفاده از پيوندهای نامگذاری شده شامل دو مرحله است:
1- ايجاد يک پيوند نامگذاری شده (اين قسمت به عنوان لنگر کار خواهد کرد.) :
فرم کلی يک پيوند نام گذاری شده به قرار زير است:
<a name="label">Text to be displayed</a>
وظيفه شناسه name تعيين نام برای پيوند است و مقدارآن همان نام پيوند ميباشد. نام پيوند هم هر نام لاتينی ميتواند باشد. در فرم کلی بالا، نام پيوند label و متنی که بعنوان پيوند نمايش داده ميشود عبارت "Text to be displayed" خواهد بود. مثال زير به ايجاد يک پيوند نامگذاری شده با نام top ميپردازد:
<a name="top">Here is top of my page!</a>
2- ايجاد يک پيوند به پيوند نامگذاری شده ديگر:
برای دادن لينک به پيوندی نام گذاری شده، کافی است که پيوندی معمولی ايجاد کرده و در قسمت href آن ابتدا url مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاری شده را درج کنيد. مثال زير ايجاد پيوندی است که به لينک نامگذاری شده ای به نام top اشاره ميکند:
<a href="http://www.Iranhtml.com/www/index.cgi#top"> Goto Top! </a>
در اثر کليک روی پيوند بالا مرورگر مستقيما به ابتدای بخش top صفحه http://www.Iranhtml.com/www/index.cgi خواهد رفت.
لگر مقصد پيوند در همان صفحه قرار دارد نيازی به قيد url نيست و فقط نويسه # و سپس نام پيوند کافی است:
<a href="#top"> Goto Top! </a>
Target Attributes کاربرد حالتهای مختلف شناسه target
target="_blank" مرورگر پيوند را در يک پنجره جديد باز ميکند.
target="_self" مرورگر پيوند را همان پنجره باز ميکند. (حالت پيش فرض يا default)
target="_parent" مرورگر پيوند را فريم parent باز ميکند. (کاربرد در مبحث فريمها)
target="_top" مرورگر پيوند را در فريم مادر و اصلی باز ميکند.(روشی خوب برای نجات از شر فريمها )
فهرستهای نامرتب
فهرستهائی هستند از يک يا چند قلم اطلاعات که معمولا با دايرهای کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ<ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد.
داخل تگهای<li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد.
فهرستهای مرتب
اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتی از اعداد به جای دايره های کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهای نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد.
فهرستهای تعريفی
فهرست تعريفی فهرستی است از اصطلاح ها و تشريح و توصيف آنها.
فهرستهای تعريفی با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهای <dt> و <dd> تعريف ميشوند.
Start Tag Purpose کاربرد
<ol>
Defines an ordered list تعريف فهرستهای مرتب
<ul>
Defines an unordered list تعريف فهرستهای نامرتب
<li>
Defines a list item تعريف يک آيتم و قلم از يک فهرست
<dl>
Defines a definition list تعريف فهرستهای تعريفی
<dt>
Defines a definition term تعريف اصطلاح در فهرستهای تعريفی
<dd>
Defines a definition description تعريف معنی و شرح اصطلاح در فهرستهای تعريفی
جدولها
برای تعريف جداول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ <tr> تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ <td> ايجاد ميشوند. نام های td و tr به ترتيب خلاصه شده table row و table data ميباشند.
محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.
مثال زير جدولی است با دو سطر و سه ستون :
کد اچتمل جدولی با دو سطر و سه ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3
جدولها و شناسه border و dir :
محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.
• در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزی با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعنی جدولی بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.
• در مثال بالا شناسه dir يا direction و مقدار rtl برای آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامی سلولهای جدول اعمال خواهذ شد.
• ساده ترين جدول ممکن در اچتمل، جدولی است با يک سطر و يک ستون!
سرستون در جداول
• سرستونها در جداول با کمک تگ <th> تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش ميدهد:
کد اچتمل جدولی با سه سطر و سه ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<th>سرستون ا</th>
<th>سرستون 2</th>
<th>سرستون 3</th>
</tr>
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
سرستون ا سرستون 2 سرستون 3
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3
فرمها ( Forms )
از طريق استفاده از عنصر <form> و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه های ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ های form و input و ... به چگونگی ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسی خواهد پرداخت.
توجه داشته باشيد که برای پردازش اطلاعات دريافتی از کاربر بايد با يکی از زبانهای cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائی داشته باشيد. مثالهای cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.
فرمها
تمامی عناصر و تگهائی که تاکنون ديده ايد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form> معرفی ميشوند، طراح سايت را قادر به جمع آوری و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهی از عناصر و تگهای درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند کرد و لازم به ذکر است که تمامی تگهای مربوط به فرمها بايد درون تگهای <form> و <form/> قرار ميگيرند.
درون تگ فرم گروه زيادی از عناصر و تگهای مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطری(text fields)، عناصر ورود متنهای چند سطری (Textarea)، منوهای drop-down و radio buttons و ...
به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه ای به نام type به تعيين نوع اطلاعات ورودی اختصاص دارد. مقادير ممکن برای اين شناسه به قرار زيرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضی از type های کاربردی خواهيم پرداخت:
وروديهای متن
اگر ميخواهيد که بازديدکننده اطلاعاتی از قبيل متن، اعداد و ... را وارد کند از شناسه ای با مقدار "text" استفاده ميشود.
کد اچتمل نمايش توسط مرورگر
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
First name:
Last name:
<form dir="rtl" >
نـــــــــــــــام:
<input type="text" name="firstname">
<br>
نام خانوادگی:
<input type="text" name="lastname">
</form>
نـــــــــــــــام:
نام خانوادگی:
توجه داشته باشيد که تگ <form> چيزی را به نمايش نخواهد گذاشت بلکه تگهای درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسی بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوری است که اغلب مرورگرها در حالت پيش فرض برای وروديهای متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهای متن را تغيير دهيد بايد از شناسه ای به نام size استفاده کنيد.
وروديهای Radio Buttons
اگر ميخواهيد که بازديدکننده گزينه ای را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" برای شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
Male
Female
<form dir="rtl">
<input type="radio" name="sex" value="male"> مرد
<br>
<input type="radio" name="sex" value="female"> زن
</form>
مرد
زن
همانطور که مشاهده ميشود فقط امکان يکی از گزينه ها برای کاربر ميسر است.
وروديهای Checkboxes
اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "checkbox" برای شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
I have a bike
I have a car
<form dir="rtl">
<input type="checkbox" name="bike">
دوچرخه دارم
<br>
<input type="checkbox" name="car">
ماشين دارم
</form>
دوچرخه دارم
ماشين دارم
شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button)
در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروی اين دکمه "Submit" ، اطلاعات درون فرم به فايلی ديگر ارسال خواهند شد. برای تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه ای به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلی است که به دريافت و سپس پردازش اطلاعات دريافتی خواهد پرداخت. معمولا فايلهای بخش action برنامه ها و اسکريپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد.
تعيين مقدار "submit" برای شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد.
کد اچتمل نمايش توسط مرورگر
<form name="input" action="form_action.cgi">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username:
<form name="input" action="form_action.cgi" dir="rtl">
نام کاربر
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
نام کاربر
در مثال بالا در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متنی ساده است به سمت فايلی که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان Perl با نام form_action.cgi در سمت سرور به ذخيره و سپس نمايش متنی خبری خواهد پرداخت.
تگ img و شناسه src يا source
در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهای خالی است، بدين معنا که فقط دارای يک يا چند شناسه و attribute بوده و دارای تگ انتهائی يا <img/> نيست.
مهمترين شناسه برای درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه اچتمل، در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:
<img src="url">
مقدار url آدرس اينترنتی تصوير ميباشد و مثلا اگر تصويری که قرار است که در صفحه درج شود در همان دايرکتوری قرار دارد و نامش me.jpg ، کافی است که به جای url فقط نام تصوير يعنی me.jpg را بنويسيد و اگر تصوير در سايتی ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com دارای url ی برابر http://www.google.com/images/logo.gif است.در اين url نام تصوير logo.gif بوده، در دايرکتوری images قرار داشته و روی وب سايت google.com قرار دارد.
شناسه های width و height در تگ img
کاربرد شناسه های width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديری غير از مقادير واقعی طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويری را با قيد ابعاد آن شرح ميدهد:
<img src="http://www.google.com/images/logo.gif" width="276" height="110" >
توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه های width و height قيد کنيد، اينکار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لود شدن تمامی تصاوير مرورگر شروع به نمايش قالب و چارچوب کلی صفحه خواهد کرد.)
وبلاگها و اضافه کردن تصاوير:
اگر وبلاگی داشته و ميخواهد که تصويری به آن اضافه کنيد دو حالت مختلف ممکن است که پيش آيد:
• الف) تصوير روی سايتی ديگر قرار داشته و شما هم ميخواهید از آن تصوير که در سايتی ديگر قرار دارد استفاده کنيد. در اين حالت از آدرس مستقيم تصوير در شناسه src استفاده کنيد، مانند :
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
در اين مثال تصوير روی سايت google.ca قرار داشته و لزومی به ذخيره آن توسط شما نيست.
• ب) تصویر روی هارد کامپيوتر شما است و هنوز بروی وب منتقل نشده است. در اين حالت چون اغلب سيستم های وبلاگ امکان ذخيره تصاوير را به شما نمی دهند بايد ابتدا تصويرتان را با کمک FTP يا روشهای ديگر به روی سايتی ديگر منتقل کنيد. شرکتهای مختلفی فضای مجانی برای ساخت صفحات وب و ذخيره اطلاعات و تصاوير در اختيار شما قرار ميدهند
چند نکته مهم:
• اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير)
• استفاده از تصاوير، سرعت لود شدن صفحات را پايين می آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
• لود تصويری با حجم 50 کيلوبايت برای کسی که از مودمی با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد.
• برای ديدن مشخصات تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد.
• برای ذخيره تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش "Save picture as" آنرا ذخيره کنيد.
منابع:
مركز محاسبات دانشگاه صنعتی شريف www.sharif.ac.ir
سازمان مديريت و برنامهريزی كشور
شورای عالی انفورماتيك http://www.unicode.org/
گرد آورنده: احسان خوشخرام
در سال 1990 ميلادي فيزيكداني به نام Tim Burners Lee روشي را ابداع نمود كه به وسيله آن, متون بر روي اينترنت از طريق اتصالهاي فوق متن, يا-Hypertext Markup Language - HTML منتقل مي شد. فوق متن در واقع متني است كه به صورت خطي و پشت سر هم ذخيره نشده و در واقع بين قسمتهاي مختلف صفحات حاوي متن , ارتباطات و اتصالات خاصي وجود دارد . زبان علامت گذاري فوق متن يا اچ تي ام ال نيز در واقع يك نوع زبان برنامه نويسي كامپيوتري است كه چگونگي قرار گرفتن و ارتباط بين متنها ,تصاوير و ساير عناصر موجود در يك صفحه را توضيح داده و در خود نگه مي دارد.
در واقع همين صفحات به هم پيوسته بودند كه وب جهاني يا WWW را بنا نهادند. امروزه صفحات اچ تي ام ال به عنوان رابط اصلي و استاندارد اينترنت مورد توافق همگان قرار گرفته اند. اين صفحات مي توانند علاوه بر نشان دادن متنهاي ساده , با تحت پوشش قرار دادن تصاوير گرافيكي, صداها و حتي ويدئو, يك برنامه محاوره اي و تعاملي كامل را در اينترنت بوجود آورند.
همانطور كه مي دانيد صفحات وب و اچ تي ام ال فقط در اينترنت يافت نمي شود بلكه امروزه شبكه هاي كامپيوتري بسياري از شركتهاي معتبر در سراسر دنيا از صفحات وب براي فراهم كردن اطلاعات تجاري و اقتصادي خود استفاده مي كنند. همچنين در ساخت و نمايش تبليغات تجاري در شبكه هاي تلويزيوني ويا بر روي CDها يا DVDهاي تبليغاتي مختلف ,امروزه اچ تي ام ال انتخاب اول مي باشد. بعلاوه شركت ماكروسافت نيز اچ تي ام ال را به صورت مستقيم در رابطهاي مختلف بزرگترين سيستم عامل دنيا يعني ويندوز قرار داده است .به عنوان مثال فايلها, پوشه ها و درايوهاي مختلف , همگي از طريق پيوندهاي اچ تي ام ال و به صورت رابط وب به نمايش گذاشته مي شوند.
XML درواقع مخفف كلمه Extensible Markup Language يا زبان علامت گذاري قابل توسعه مي باشد .در برنامه نويسي اچ تي ام ال ما از دستوراتي استفاده مي كنيم كه از قبل , در استانداردهاو قواعد دستوري آن زبان تعريف شده وكار مشخصي انجام ميدهند. در صورتي كه در زبان ايكس ام ال ما مي توانيم از دستوراتي با نامهاي اختصاصي كه توسط خودمان تعريف مي شوند,استفاده كنيم . برتري زبان XHTML كه ما به آن اچ تي ام ال توسعه يافته مي گوئيم, اين است كه چگونگي نشان دادن داده ها را در اختيار ما قرار داده در صورتي كه ايكس ام ال توانايي نحوه سازماندهي اين داده ها را در اختيار ما مي گذارد
وب چيست؟
وب شبکه ای است متشکل از تمامی کامپيوترهای دنيا، شبکه ای از شبکه ها.
اينترنت، وب، WWW ، web يا World Wide Web همگی يک چيزند.
تمامی کامپيوترهای وب ميتوانند با هم ارتباط داشته باشند.
کامپيوترهای موجود در وب با کمک استاندارد ارتباطی يا پروتوکل HTTP با هم ارتباط برقرار ميکنند
نحوه كار كرد وب؟
اطلاعات وب داخل فايلهائی به نام Web Pages و يا صفحات وب قرار دارند.
اين فايلها يا صفحات روی Web Server يا کامپيوترهای سرويس دهنده وب ذخيره شده اند.
برای ديدن صفحات وب از نرم افزاری به نام مرورگر و يا Web Browser استفاده ميشود.
دو مرورگر Internet Explorer و Netscape Navigator جزو معروفترين مرورگرها حساب ميشوند.
مرورگر Internet Explorer متعلق به شرکت مايکروسافت و مرورگر Netscape Navigator متعلق به شرکت نت اسکيپ ميباشد.
استاندارد هاي وب
World Wide Web Consortium يا W3C متولی تعيين استانداردهای وب است.
HTML, CSS and XML از مهمترين استانداردهای تصويب شده وب ميباشند.
آخرين استاندارد HTML استاندارد XHTML 1.0 ميباشد .
اچتمل هستند و در اين قسمت با عناصر و تگ های پايه و مهم آشنا خواهيد شد . تگ هااجزا تشکيل دهنده عناصر
سر تيترها
سر تيترها با کمک تگ های <h1>تا<h6> تعيين ميشوند. <h1> معرف بزرگترين سر تيتر و <h6> معرف کوچکترين سر تيتر است. مرورگر به هنگام نمايش يک سر تيتر بصورت اتوماتيک يک سطر خالی قبل و بعد
از هر سر تيتر اضافه خواهد کرد.
<h1>This is the first heading</h1>
<h2>This is the second heading</h2 >
<h3>This is the third heading</h3>
<h4>This is the forth heading</h4>
<h5>This is the fifth heading</h5>
<h6>This is the sixth heading</h6>
پاراگرافها
پاراگرافها با کمک تگ <p> معرفی ميشوند.مرورگر به هنگام نمايش يک پاراگراف بصورت اتوماتيک يک سطر خالی قبل و بعد از آن اضافه خواهد کرد.
<p>This is a paragraph</p>
توضيحات اضافي در HTML
برای نوشتن شرح و توضيحات در مورد کدهای اچتمل بايد از تگ خاصی استفاده کنيد. برای اينکار بايد متن و شرحتان را درون علائم <-- و --!> قرار دهيد. مرورگرها تگ های comment را در نظر نگرفته و محتوی آنها را نمايش نخواهد داد و فقط شرح و توضيحات برای برنامه نويس و ديگر افرادی که احتمالا در آينده با کد اچتمل کار خواهند کرد مفيد خواهد بود.
<!-- This is a comment -->
سطر جديد
برای رفتن سر سطر جديد از تگ br استفاده ميشود.در اينحالت يک پاراگراف جديد ايجاد نميشود. تگ br از نوع تگ های خالی بوده و دارای تگ انتهائی نميباشد.
تگ <font>
در نسخه های 3.2 و قبلی تر زبان اچتمل از تگ <font> برای تعيين نام قلم، رنگ و اندازه متون استفاده ميشود. در اين تگ شناسه face نام قلم ، شناسه size انداره قلم و شناسه color معرف رنگ متن خواهد بود.
شناسه های تگ<font>
Attribute Example کاربرد
size="number" size="2" تعیین اندازه قلم
size="+number" size="+1" افزایش اندازه قلم
size="-number" size="-1" کاهش اندازه قلم
face="face-name" face="Times" تعیین نام قلم
color="color-value" color="#eeff00" تعیین رنگ قلم
color="color-name" color="red" تعیین رنگ قلم
تگ <span>
تگ <span> سبب تعريف محدوده و گستره ای مشخص ميشود. تمامی المان هائی که درون تگهای <span> و <span/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبيل استايل (Style) و يا سمت و جهت نمايش متون dir بر خلاف تگ های <p> و <div> مرورگرها هيچ سطر جديدی به اول يا آخرالمان<span>اضافه نمی کنند.
تگ <div>
تگ <div> سبب تعريف محدوده و گستره ای مشخص ميشود. تمامی المان هائی که درون تگهای <div> و <div/> قرار خواهند گرفت خواص آنرا به ارث خواهند برد، خواصی از قبيل استايل (Style) و يا سمت و جهت نمايش متون dirبر خلاف تگ <span> مرورگرها يک سطر جديد به اول و آخر المان <div> اضافه می کنند.
رنگ و يا تصوير پس زمينه فاکتور بسيار مهمی در طراحی صفحات اچتمل بوده و استفاده از رنگ و يا تصوير مناسب نقشی تعيين کننده در خوانا بودن صفحات دارد.
شناسه bgcolor برای رنگ پس زمينه
شناسه bgcolor رنگ پس زمينه را تعيين ميکند. مقدار رنگ پس زمينه ميتواند نام رنگ ، مقدار آن بر اساس استاندارد RGB و يا حتی مقدار هگزادسيمال باشد.
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
شناسه Background برای تصوير پس زمينه:
برای تعيين تصويری که به عنوان پس زمينه صفحه نمايش داده ميشود از شناسه background استفاده ميشود.مقدار اين شناسه URL يا آدر س تصوير (image) ميباشد.اگر ابعاد تصوير کوچکتر از ابعاد صفحه مرورگر باشد، تصوير زمينه تکثير خواهد شد تا حدی که تمام صفحه نمايش از تصوير زمينه پوشانده شود.
نکات مهم: اگر از تصاوير پس زمينه در صفحات اچتمل استفاده ميکنيد به نکات زير توجه کنيد :
• هرتصويری با فرمت gif و يا jpg قابل استفاده به عنوان تصوير زمينه ميباشد.
• از تصاوير بزرگتر از ده کيلوبايت ظرفيت به هيچ وجه استفادا نکنيد، در غير اين صورت سرعت load صفحه بشدت پايين خواهد آمد.
• از تصاوير زمينه هماهنگ با ديگرتصاوير صفحه استفاده کنيد.
• از تصاوير زمينه هماهنگ با متون صفحه استفاده کنيد.
• در رزولوشنهای مختلف به ديدن و آزمايش تصاوير پس زمينه بپردازيد.
• پر مصرف ترين رنگهای زمينه وب سايتها، رنگهای سفيد، سياه و خاکستری ميباشند.
نکته مهم در سازگاری با نسخه های جديد اچتمل و XHTML
شناسه های bgcolor و background در تگ<body> در نسخه 4 اچتمل و XHTML پشتيبانی نميشوند و در واقع از رده خارج محسوب ميشوند. در عوض کنسرسيوم W3C استفاده از Style Sheet ها را توصيه ميکند و در واقع در نسخه 4 اچتمل و استاندارد جديد XHTML تمامی اطلاعات مربوط به نمايش يا presentation و layout بايد در style sheet ها قرار گيرند.
مقدمه:
از چند سال پيش در كشورمان، استفاده از كامپيوتر با سرعت سرسامآوری جای خود را در تمامی عرصهها باز كرد و سيل كامپيوترهای شخصی و تجهيزات جانبی آنها به سوی كشور سرازير شد. اما بايستی اعتراف كرد كه با وجود اين كه سرعت سوق به سوی تكنولوژی ديجيتال در ايران روند خوبی را طی نموده، اما در زمينه ارائه اطلاعات و پردازش آن به زبان فارسی تشتتی در اين ميان ايجاد گرديد. يكی از عوامل موثر در اين ناهماهنگی، نبود الگويی واحد برای ذخيره و پردازش و نمايش اطلاعات بر روی رسانههای جديد اطلاعرسانی همچون كامپيوتر در سطح ملی است.
نرمافزارهای متفاوت، با فرمتهای مختلف، كدهای فارسی گوناگون و ... در حال استفادهاند و روزانه ميزان قابل توجهی از اطلاعات را در خود جای میدهند. اگر از آن دسته از مراكزی كه به دليل عدم آگاهی كافی اطلاعات را به صورت ناقص جمعآوری و وارد میكنند (كه حدود 80 درصد جامعه مورد نظر را تشكيل میدهند) بگذريم به تفرق، اختلاف و اعمال سليقههای مختلف در ساير مراكز خواهيم رسيد كه برای نمونه به اختلاف در مورد كدنويسههای به كار رفته برای حروف فارسی روی كامپيوتر میتوان اشاره كرد.
نتيجه ادامه روند جاری
در مورد مراكزی كه به هر حال مشغول سرمايهگذاری در بخش ورود، پردازش و نمايش اطلاعات هستند مسئله به نوع ديگری خود را نشان خواهد داد. اين گونه مراكز تا زمانی كه پای خود را از محدوده مركز خود فراتر نگذاشتهاند مشكلی نخواهند داشت، ولی به محض آنكه بخواهند با مراكز اطلاعاتی و تحقيقاتی ديگر ارتباط برقرار كرده يا به مبادله اطلاعات با اين مركز بپردازند متوجه خواهند شد كه سالها سرمايههای خود را بر باددادهاند.
همين مشكل در سطح ملی برای ايجاد يك مركز اطلاعات ملی رخ خواهد نمود. زمانی اين مشكل ملی بيشتر نمود پيدا میكند كه بحث شبكه جهانی اينترنت نيز به ميان آيد.
اينترنت به عنوان كليدی برای ارتباط با ديگر مراكز اطلاعاتی - به علت در دسترس بودن آسان و همچنين حجم عظيم اطلاعات موجود در آن- يكی از مهمترين موضوعاتی خواهد بود كه به علت عدم وجود يك سيستم جهانی برای ذخيره، بازيابی، پردازش و نمايش اطلاعات و به طور كلی مبادله اطلاعات كه جنبههای ملی نيز داشته باشد، دارای نقاط ضعفی است كه ما را از بهرهبرداری مناسب در جهت منافعمان باز میدارد.
راه حل چيست؟
از زمانی كه اولين گزارش «زبان فارسی و كامپيوتر» در سال 1356 در دانشكده رياضی و كامپيوتر دانشگاه صنعتی شريف ارائه شد، تا امروز كه شبكه اينترنت چهره ديگری به اطلاعرسانی داده است، مدت زيادی میگذرد. امروزه ديگر محدوديتهای سختافزاری يا نرمافزاری نمیتواند مانع پيادهسازی يك سيستم ذخيرهسازی، نمايش، و تبادل اطلاعات چندزبانه گردد. امروزه مؤسسات بزرگ استانداردسازی چون ايزو ( ISO ) و W3 Consortium نيز، در استانداردهايشان مشكلات و مسائل مربوط به جهانیسازی را در نظر میگيرند تا امر تبادل اطلاعات چند زبانه را تسهيل نمايند. اما به نظر میرسد كه به دليل عدم حضور ايرانيان و فارسیزبانها در اين روند، زبان فارسی قدری غريب مانده و كمتر به آن توجه شده است. به عنوان مثال، هنوز در بين صدها مجموعهنويسه( Character Set ) ثبت شده در اينترنت توسط يانا (Internet Assigned Number Authority)، تنها يك مجموعهنويسه ثبت شده متعلق به زبان فارسی است كه آن هم كد پيج اختصاصی شركت آيبيام است. حتی در مورد استاندارد كلی تبادل اطلاعات نيز قالبی كه مورد توافق همه باشد وجود ندارد. سه قالب موجود، ايران سيستم، استاندارد 2900 و استاندارد 3342 ، هر يك ايراداتی دارند كه سبب شده است شركتها و مؤسسات داخلی به جدولهای خاص خود روی آورند تا بتوانند نيازهای خود را تا حدی رفع سازند.
اخيراً راهحلهايی در هر يك از مسائل خاص مربوط به تبادل اطلاعات برای بينالمللیسازی در نظر گرفته شده است كه با وجود اين كه اين موارد كاملتر از جداولی است كه در ايران برای حل مشكلات تبادل اطلاعات زبان فارسی ايجاد گرديده، ولی به خاطر عدم وجود مراجع موثق در مورد خط و زبان فارسی برای استانداردگذاران، مسائل خاص اين زبان يا در نظر گرفته نشده و يا به شكل ناقص منظور شده است. خوشبختانه بسياری از اين استانداردها امكان گسترش بعدی را در نظر گرفتهاند كه روند تصحيح را تسهيل میكند.
يونیكد چيست؟
از جمله استانداردهای بينالمللی كه كاملتر از بقيه استانداردهای موجود به رفع نيازهای مربوط به تبادل اطلاعات چندزبانه پرداختهاست، میتوان به استاندارد يونیكد اشاره كرد.
اين استاندارد، تقريباً توسط تمامی شركتهای بينالمللی كامپيوتری، مانند آيبيام، مايكروسافت، و سان، و نيز موسسات ملی استاندارد در كشورهای مختلف جهان برای تبادل اطلاعات چندزبانه مورد توافق قرار گرفته است و سرعت رشد بسيار زيادی نيز در ميان كاربران دارد. همينطور، در حال حاضر كليه استانداردهای جديدی كه برای شبكه اينترنت طراحی میشوند، اين دو استاندارد را بهعنوان كدپيج پيشفرض میپذيرند كه استاندارد XML و زبان جاوا از آن جملهاند.
به زبان ساده میتوان گفت كه يونیكد روشی برای تبديل متون به رشتههای عددی قابل ذخيره در كامپيوتر است. روشهای گوناگونی برای اين كار وجود دارند، ولی مزيت يونیكد نسبت به آنها، اين است كه يك روش كامل جهانی است؛ به اين معنی كه حروف همه زبانهای دنيا و تمامی علائم مورد استفاده همه مردم جهان در آن آمدهاند و همچنين در همهجا قابل نمايش است و نياز به امكانات خاصی ندارد. البته يونیكد هنوز جوان است ولی امروزه بسياری نرمافزارهای رايج در جهان (از جمله همه مرورگرهای جديد اينترنت) آن را پشتيبانی میكنند.
از مهمترين مزايايی كه يونیكد برای زبان فارسی دارد (مثل بسياری زبانهای ديگر) میتوان موارد زير را نام برد:
1. در نسخه استاندارد هر نرمافزاری كه از اين استاندارد پشتيبانی كند، میتوان فارسی نوشت يا متون فارسی را خواند. بدين ترتيب ديگر نيازی به تأمين نسخههای خاص فارسی يا عربی نيست.
2. برای خواندن متون فارسی كه توسط شركت خاصی نوشته شدهاند، نيازی به داشتن فونت خاص آن شركت نداريم و هر متن فارسی كه با استاندارد يونیكد، كدگذاری شده باشد، با هر فونت يونیكدی قابل مشاهده است.
3. امكان استفاده همزمان از زبانهای فارسی و انگليسی را تأمين میكند.
4. بدون استفاده از فونتهای خاص امكان استفاده از علائم خاص را فراهم میكند.
به بيان ديگر، «استاندارد يونیكد» استاندارد جهانی كدگذاری كاركترهاست كه برای پردازش كامپيوتری متون به كار میرود. اين استاندارد همان كاراكترها و كدهای استاندارد ISO/IEC 10646 را داراست و كاملا با آن سازگار است. پس در واقع هر پيادهسازی سازگار با يونیكد، با ISO/IEC 10646 نيز سازگار است.
يونیكد امكان كدگذاری همه كاراكترهای مورد استفاده در نوشتن زبانهای دنيا را فراهم آوردهاست. اين استاندارد از كدگذاری 16بيتی استفاده میكند كه برای بيش از65000 نويسه (كاراكتر) جا فراهم میكند. اگر چه 65000 نويسه برای كدگذاری اكثر نويسههايی كه در زبانهای مهم دنيا استفاده میشود كافی است، با اين حال يونیكد شيوهگسترشی بهنام UTF-16 فراهمكردهاست كه امكان اضافهكردن حدود يك ميليون نويسه ديگر را نيز میدهد. اين دامنه برای كليه نويسههای عالم، از جمله پوشش كامل همه خطهای باستانی (همچون خط ميخی) نيز كافی است.
يونیكد برای كليه نويسههای مورد استفاده در زبانهای عمده دنيا كد تعيينكردهاست. بهعلت گستردهبودن فضای تخصيص نويسه، اين استاندارد بسياری از نمادهای لازم برای حروفچينی را نيز در بر گرفتهاست. از خطهای مورد پشتيبانی اين استاندارد میتوان به لاتين (دربرگيرنده اكثر زبانهای اروپايی)، سيريليك(روسی، صربی)، يونانی، عربی (شامل عربی، فارسی، اردو، كردی)، عبری، هندی، ارمنی، آسوری، چينی، كاتاكانا و هيراگانا(ژاپنی)، و هانگول (كرهای) اشارهكرد. بهعلاوه، تعداد زيادی نماد رياضی و فنی علائم نقطهگذاری، پيكان، و علامتهای متفرقهدر اين استاندارد وجود دارد. اين استاندارد برای علامتهای تركيبشونده يا اعرابها نيز كدهايی در نظر گرفتهاست كهاز جمله آنها علامتهايی چون «˜» (مد)هستند كه در تركيبب حروف پايه، حروف تغييرلحن يافتهای چون «ñ» را میسازند.
به طور كلی، بعضی از مشخصات يونیكد به شرح زير است:
نويسههای شانزدهبيتی
يكیسازی (اختصاص يك كد به نويسههای مشترك در چند زبان مختلف)
نويسه، نه شكل (يك «ع»، و نه چهارتا: «ﻋ»، «ﻌ»، «ﻊ»، «ﻉ»)
بار معنايی (حرفبودن، مقدار عددی، ...)
در استاندارد يونیكد، نويسههای فارسی در بلوك مربوط بهخط عربی قرار دارند. اين بلوكبرای دربرگرفتن نويسههای زبانهايی كهاز خط عربیاستفادهمیكنند، مثل فارسی، اردو، پشتو، سندی، و كردی گسترش يافته است. اين بلوك نشانههای قرآنی از قبيل نشانههای سجده و پايان آيه، و علائم وقف را نيز در بردارد.
در يونیكد با وجود يكیسازی كدهای حروف مشترك، برای حروف فارسی كه بار معنايی يا نمايشی متفاوت با حروف عربی دارند، نويسههای جداگانه درنظر گرفتهشدهاست. يعنی كليه حروف خاص فارسی (پ، چ، ژ، گ) و نيز «ك» و «ی» فارسی كهبا حرف مشابهدر عربیتفاوت نمايشی دارند، مكانجداگانهای بهخود اختصاص دادهاند. كليه اعرابهای متداول حضور دارند و ميان شكلفارسی/اردو و عربی ارقام نيز بهعلت شكل و رفتار متفاوت، تفاوتهايی منظور گشتهاست.
از طرف ديگر، علائم نقطهگذاری چون نقطه و فاصله كهشكلی كسانیدر خطهای لاتين و عربی دارند، كد يكسان دارند. علائمیچون پرانتز نيز، بسته به جهت متن، آينهای میشوند، به طور مثال، نويسه 0028 نماينده «پرانتز باز» است، و نه«پرانتز سمتچپ». يونیكد اتصالمجازی و فاصله مجازی را نيز تحتنامهای «اتصال با عرضصفر» و «بیاتصالی با عرضصفر» بهرسميت میشناسد.
اصطلاحات:
نويسه: در مقابل character. كوچكترين واحد متن. مثلاً يك حرف لاتين، يك اعراب فارسی، يكی علامت نقطهگذاری، يك نشانه بريل، يا يك نماد رياضی
شكل: در مقابل glyph. كوچكترين واحد نمايش متن. برای بعضی نويسهها مثل حروف فارسی و هندی ممكن است چند شكل موجود باشد. مثلاً « ﺑ » و « ﻊ » از اشكالنمايشی محسوب میشوند
مجموعهنويسه: در مقابلcharacter set. مجموعهای از نويسهها كهبههر نويسه عددی اختصاصمیدهد كه نماينده آن نويسه محسوب میشود و در تبادل اطلاعات مورد استفادهقرار میگيرد
مجموعه كد: در مقابل codepage. سيستمی كه بههر نويسه دنباله مشخصیاز بايتها را متناظر میكند. مجموعهنويسهها میتوانند بهشكل يا چند مجموعهكد قابل استفادهباشند.
وظيفه گروهی از تگ های اچتمل فرمت دهی و تعيين شکل نمايش متون ( مثلا ضخيم بودن و يا مورب و ايتاليک بودن ) ميباشد و در اين درس با اين گروه از تگهایformatting آشنا خواهيد شد:
<b> , <big> , <code> , <del> , <em> , <i> , <ins> , <kbd> , <pre> , <s> , <samp> , <small> , <strike> , <strong> , <sub> , <sup> , <tt> , <u> , <var>
نحوه ديدن سورس کدهای اچتمل (HTML Source)
o اگر ميخواهيد که سورس کدهای اچتمل صفحات وب را ببينيد کافی است که در منوی View مرورگرتان حالت Source يا Page Source را انتخاب کرده و مرورگر کد اچتمل را درون اديتوری باز کرده و قابل ذخيره توسط شما برای استفاده های بعدی ميباشد.
o اگر صفحه مورد نظر از مجموعه فريمها (Frameset) استفاده کرده باشد برای ديدن سورس کد اصلی فريمها کافی است که ابتدا با کمک روش بالا به مشاهده سورس کدهای اچتمل پرداخته (لازم به توضيح است که در اين حالت فقط تعاريف کلی فريمها قرار دارند.) و سپس برای ديدن کد اچتمل اختصاصی هر صفحه بايد پس از "Right Click" روی هر صفحه "View Source" کرده و کد اچتمل هر فريم را جداگانه ببينيد.
o اگر طراح سايت با کمک Java Script مانع ديدن سورس توسط شما ميشود، ابتدا در منوی Tools/Internet Options.../Security/Custom Level مرورگرهای اکسپلورر امکانات جاواسکريپت مرورگر را غير فعال کرده (disable) و سپس مراحل بالا را تکرار کنيد!!!
تگ هاي فرمت دهي
Start Tag Purpose کاربرد
<b>
Defines bold text نمايش توپر
<big>
Defines big text نمايش در اندازه بزرگ
<em>
Defines emphasized text نمايش بصورت تاکيد شده
<i>
Defines italic text نمايش ايتاليک يا کج
<small>
Defines small text نمايش در اندازه کوچک
<strong>
Defines strong text نمايش قوی ؟!
<sub>
Defines subscripted text نمايش پايين تر از خط افقی
<sup>
Defines superscripted text نمايش بالاتر از خط افقی
<ins>
Defines inserted text نمايش به صورت خط زير
<del>
Defines deleted text نمايش به صورت خط خورده
<s> Deprecated. Use <del> instead از رده خارج
<strike> Deprecated. Use <del> instead از رده خارج
<u> Deprecated. Use styles instead از رده خارج
در محيط وب، صفحات اچتمل با کمک پيوندها به يکديگر متصل ميشوند. اصطلاح ابرمتن(Hyper Text) در مقابل متن خطی قرار دارد. در يک متن معمولی خواندن به شکل خطی و از ابتدا به انتها ميباشد و در مقابل در يک متن مختلط با کمک پيوندها ميتوان از يک متن به هر صفحه ديگر در وب متصل شد.اين کار با کمک عنصری معلوم الحال! به نامA ياAnchor ميسر ميگردد.
تگ Anchor و شناسه href
برای ايجاد پيوند به صفحات ديگر از تگ <a> استفاده ميشود. پيوندها ميتوانند به بخش ديگری از همان صفحه، صفحات ديگر وب، تصاوير، فايلهای صوتی يا حتی فيلم ها و ... اشاره کنند.
فرم کلی يک پيوند به قرار زير است:
<a href="url">Some Text</a>
در مثال بالا تگ <a> برای ايجاد پيوندی به صفحه ای ديگر که آدرس اينترنتی آن url ميباشد بکار رفته است. برای تعيين مقصد و يا آدرس صفحه جديد از شناسه ای به نام href که همان hyerlink reference ميباشد، استفاده ميشود و مقدار اين شناسه در واقع همان آدرس اينترنتی صفحه مقصد است. بخش قابل رويت پيوند و در واقع متــنــی (و يا تصويری ) که توسط مرورگر نمايش داده خواهد شد و بازديدکننده روی آن کليک خواهد کرد ميان تگهای <a> و </a> قرار داده ميشود و هر چند که در مثال بالا اين بخش متن "Some Text" است ولی ميتواند حتی يک تصوير باشد.
برای نمونه کد اچتمل زير پيوندی به سايت google.com ايجاد خواهد کرد:
<a href="http://www.google.com/">Visit Google Site</a>
و مرورگر پيوند بالا را به شکل زير نمايش داده و در اثر کليک روی پيوند توسط بازديدکننده، مرورگر به سايت Google خواهد رفت.
Visit Google Site
شناسه target در پيوندها:
با کمک شناسه target امکان تعيين مقصد پيوند جديد فراهم ميشود. در مثال بالا پس از کليک روی پيوند، مرورگر سايت google.com را باز کرده و جايگزين سايت فعلی خواهد شد. اگر ميخواهيد که مرورگر پيوند را در صفحه ای جديد باز کند بايد از شناسه target و مقدار "_blank" برای آن استفاده کنيد . مثال زير سبب باز شدن سايت google.com در پنجره جديدی خواهد شد:
<a href="http://www.google.com/" target="_blank">Visit Google Site</a>
Visit Google Site
شناسه Name :
با کمک شناسه name ميتوانيد پيوندها را نام گذاری کنيد.پيوندهای نامگذاری شده امکان حرکت ميان قسمتهای مختلف يک صفحه يا page را فراهم ميکنند. در اينصورت مثلا برای رفتن به آخر يک متن ديگر نيازی به Scrool down کردن تمامی صفحه نيست و کافی است که بازديدکننده روی پيوندی که به آخر صفحه اشاره ميکند کليک کند.
استفاده از پيوندهای نامگذاری شده شامل دو مرحله است:
1- ايجاد يک پيوند نامگذاری شده (اين قسمت به عنوان لنگر کار خواهد کرد.) :
فرم کلی يک پيوند نام گذاری شده به قرار زير است:
<a name="label">Text to be displayed</a>
وظيفه شناسه name تعيين نام برای پيوند است و مقدارآن همان نام پيوند ميباشد. نام پيوند هم هر نام لاتينی ميتواند باشد. در فرم کلی بالا، نام پيوند label و متنی که بعنوان پيوند نمايش داده ميشود عبارت "Text to be displayed" خواهد بود. مثال زير به ايجاد يک پيوند نامگذاری شده با نام top ميپردازد:
<a name="top">Here is top of my page!</a>
2- ايجاد يک پيوند به پيوند نامگذاری شده ديگر:
برای دادن لينک به پيوندی نام گذاری شده، کافی است که پيوندی معمولی ايجاد کرده و در قسمت href آن ابتدا url مقصد و سپس نويسه # و در نهايت نام پيوند نامگذاری شده را درج کنيد. مثال زير ايجاد پيوندی است که به لينک نامگذاری شده ای به نام top اشاره ميکند:
<a href="http://www.Iranhtml.com/www/index.cgi#top"> Goto Top! </a>
در اثر کليک روی پيوند بالا مرورگر مستقيما به ابتدای بخش top صفحه http://www.Iranhtml.com/www/index.cgi خواهد رفت.
لگر مقصد پيوند در همان صفحه قرار دارد نيازی به قيد url نيست و فقط نويسه # و سپس نام پيوند کافی است:
<a href="#top"> Goto Top! </a>
Target Attributes کاربرد حالتهای مختلف شناسه target
target="_blank" مرورگر پيوند را در يک پنجره جديد باز ميکند.
target="_self" مرورگر پيوند را همان پنجره باز ميکند. (حالت پيش فرض يا default)
target="_parent" مرورگر پيوند را فريم parent باز ميکند. (کاربرد در مبحث فريمها)
target="_top" مرورگر پيوند را در فريم مادر و اصلی باز ميکند.(روشی خوب برای نجات از شر فريمها )
فهرستهای نامرتب
فهرستهائی هستند از يک يا چند قلم اطلاعات که معمولا با دايرهای کوچک و سياه رنگ در شروع نمايش داده ميشوند. يک فهرست از نوع نامرتب با تگ<ul> شروع شده و هر رقم اطلاعات با تگ <li> مشخص ميگردد.
داخل تگهای<li> ميتوانيد از پاراگرافها، تگهای br ، تصاوير و حتي فهرستهای ديگر استفاده کنيد.
فهرستهای مرتب
اين نوع فهرست بسيار شبيه فهرستهای نامرتب بوده و فقط مرورگر به هنگام نمايش اقلام اطلاعاتی از اعداد به جای دايره های کوچک سياه رنگ استفاده ميکند. يک فهرست از نوع مرتب با تگ <ol> شروع شده و همانند فهرستهای نامرتب هر رقم اطلاعات با تگ <li> مشخص ميگردد.
فهرستهای تعريفی
فهرست تعريفی فهرستی است از اصطلاح ها و تشريح و توصيف آنها.
فهرستهای تعريفی با <dl> شروع شده و هر ذوج اصطلاح و تعريف مربوط به آن با تگهای <dt> و <dd> تعريف ميشوند.
Start Tag Purpose کاربرد
<ol>
Defines an ordered list تعريف فهرستهای مرتب
<ul>
Defines an unordered list تعريف فهرستهای نامرتب
<li>
Defines a list item تعريف يک آيتم و قلم از يک فهرست
<dl>
Defines a definition list تعريف فهرستهای تعريفی
<dt>
Defines a definition term تعريف اصطلاح در فهرستهای تعريفی
<dd>
Defines a definition description تعريف معنی و شرح اصطلاح در فهرستهای تعريفی
جدولها
برای تعريف جداول از تگ <table> استفاده ميشود. يک جدول از يک يا چند سطر که با کمک تگ <tr> تعريف ميشوند، تشکيل ميشود. هر رديف يا row از يک يا چند سلول، خانه يا cell تشکيل گرديده که با کمک تگ <td> ايجاد ميشوند. نام های td و tr به ترتيب خلاصه شده table row و table data ميباشند.
محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.
مثال زير جدولی است با دو سطر و سه ستون :
کد اچتمل جدولی با دو سطر و سه ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3
جدولها و شناسه border و dir :
محتوی يک سلول ميتواند متن، تصوير، فهرستها، جداول ديگر، پاراگرافها و ... باشد.
• در مثال بالا شناسه border مرز جدول را مشخص ميکند، مقدار 1 مرزی با ضخامت يک پيکسل را نمايش خواهد داد و مقدار صفر جدول را بدون مرز نمايش خواهد داد. توجه داشته باشيد که حالت پيش فرض يعنی جدولی بدون شناسه border ، جداول بدون مرز را نمايش خواهد داد.
• در مثال بالا شناسه dir يا direction و مقدار rtl برای آن، سبب تعيين نمايش جهت متون از راست به چپ خواهد شد و چو ن در داخل تک table تعريف شده است به تمامی سلولهای جدول اعمال خواهذ شد.
• ساده ترين جدول ممکن در اچتمل، جدولی است با يک سطر و يک ستون!
سرستون در جداول
• سرستونها در جداول با کمک تگ <th> تعريف ميشوند. مثال زير نحوه تعريف سرستونها را در جداول نمايش ميدهد:
کد اچتمل جدولی با سه سطر و سه ستون نمايش جدول روبرو توسط مرورگر
<table border="1" dir="rtl">
<tr>
<th>سرستون ا</th>
<th>سرستون 2</th>
<th>سرستون 3</th>
</tr>
<tr>
<td>رديف 1، سلول 1</td>
<td>رديف 1، سلول 2</td>
<td>رديف 1، سلول 3</td>
</tr>
<tr>
<td>رديف 2، سلول 1</td>
<td>رديف 2، سلول 2</td>
<td>رديف 2، سلول 3</td>
</tr>
</table>
سرستون ا سرستون 2 سرستون 3
رديف 1، سلول 1 رديف 1، سلول 2 رديف 1، سلول 3
رديف 2، سلول 1 رديف 2، سلول 2 رديف 2، سلول 3
فرمها ( Forms )
از طريق استفاده از عنصر <form> و چند تگ مرتبط قادر به دريافت اطلاعات از بازديدکنندگان صفحاتتان و يا تبادل اطلاعات بين صفحات مختلف خواهيد شد. با کمک اين گروه از تگ ها قادر به نمايش باکسهای ورود اطلاعات متن (text fields) ، چک باکسها (check-boxes) ، راديو باتونها (radio-buttons) و ... شده و همچنين امکان گذاشتن دکمه های ارسال (submit button) و يا حذف (reset) را خواهيد داشت. اين فصل با شرح تگ های form و input و ... به چگونگی ايجاد ارتباط با بازديدکنندگان و گرفتن اطلاعات از آنها بصورت لاتين و يا فارسی خواهد پرداخت.
توجه داشته باشيد که برای پردازش اطلاعات دريافتی از کاربر بايد با يکی از زبانهای cgi از قبيل ASP، perl، PHP، CFM ، JSP يا Java آشنائی داشته باشيد. مثالهای cgi مدرسه وب از ربان اسکريپت Perl استفاده ميکنند.
فرمها
تمامی عناصر و تگهائی که تاکنون ديده ايد فقط به نمايش اطلاعات پرداخته اند و هيچکدام به گرفتن و اخذ اطلاعات از کاربر نپرداخته اند. فرمها که با تگ <form> معرفی ميشوند، طراح سايت را قادر به جمع آوری و اخذ اطلاعات از بازديدکننده سايت خواهند کرد. عنصر فرم و گروهی از عناصر و تگهای درون آن به دريافت و ارسال اطلاعات به سمت وب سرور کمک خواهند کرد و لازم به ذکر است که تمامی تگهای مربوط به فرمها بايد درون تگهای <form> و <form/> قرار ميگيرند.
درون تگ فرم گروه زيادی از عناصر و تگهای مختلف قابل استفاده هستند از قبيل عناصر ورود متن يک سطری(text fields)، عناصر ورود متنهای چند سطری (Textarea)، منوهای drop-down و radio buttons و ...
به عنوان پر مصرف ترين تگ مربوط به ورود اطلاعات بايد از تگ <input> نام برد. در اين تگ شناسه ای به نام type به تعيين نوع اطلاعات ورودی اختصاص دارد. مقادير ممکن برای اين شناسه به قرار زيرند:
text , checkbox , radio , password , hidden , submit , reset , button , file , image
در ادامه به شرح بعضی از type های کاربردی خواهيم پرداخت:
وروديهای متن
اگر ميخواهيد که بازديدکننده اطلاعاتی از قبيل متن، اعداد و ... را وارد کند از شناسه ای با مقدار "text" استفاده ميشود.
کد اچتمل نمايش توسط مرورگر
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
First name:
Last name:
<form dir="rtl" >
نـــــــــــــــام:
<input type="text" name="firstname">
<br>
نام خانوادگی:
<input type="text" name="lastname">
</form>
نـــــــــــــــام:
نام خانوادگی:
توجه داشته باشيد که تگ <form> چيزی را به نمايش نخواهد گذاشت بلکه تگهای درون آن توسط مرورگر نمايش داده خواهند شد. در مثال فارسی بالا به شناسه dir و مقدار rtl آن توجه داشته باشيد.لازم به يادآوری است که اغلب مرورگرها در حالت پيش فرض برای وروديهای متن اندازه 20 کاراکتر را در نظر ميگيرند و اگر ميخواهيد که اندازه پيش فرض وروديهای متن را تغيير دهيد بايد از شناسه ای به نام size استفاده کنيد.
وروديهای Radio Buttons
اگر ميخواهيد که بازديدکننده گزينه ای را از بين چند گزينه محدود انتخاب کند، از مقدار "radio" برای شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
Male
Female
<form dir="rtl">
<input type="radio" name="sex" value="male"> مرد
<br>
<input type="radio" name="sex" value="female"> زن
</form>
مرد
زن
همانطور که مشاهده ميشود فقط امکان يکی از گزينه ها برای کاربر ميسر است.
وروديهای Checkboxes
اگر ميخواهيد که بازديدکننده يک يا چند گزينه را از بين چند گزينه محدود انتخاب کند، از مقدار "checkbox" برای شناسه type استفاده کنيد:
کد اچتمل نمايش توسط مرورگر
<form>
<input type="checkbox" name="bike">
I have a bike
<br>
<input type="checkbox" name="car">
I have a car
</form>
I have a bike
I have a car
<form dir="rtl">
<input type="checkbox" name="bike">
دوچرخه دارم
<br>
<input type="checkbox" name="car">
ماشين دارم
</form>
دوچرخه دارم
ماشين دارم
شناسه Action و دکمه Submit در فرمها ( Form's Action Attribute & Submit Button)
در فرمها برای ارسال اطلاعات کسب شده از دکمه ای به نام ارسال يا Submit Button استفاده ميشود و در اثر کليک کاربر بروی اين دکمه "Submit" ، اطلاعات درون فرم به فايلی ديگر ارسال خواهند شد. برای تعيين مقصد ارسال اطلاعات بايد درون تگ form از شناسه ای به نام action استفاده کنيد. مقدار شناسه action آدرس يا url فايلی است که به دريافت و سپس پردازش اطلاعات دريافتی خواهد پرداخت. معمولا فايلهای بخش action برنامه ها و اسکريپت هائی نوشته شده با ربانهای cgi مانند ASP، Perl ، PHP و ... بوده و وظيفه آنها دريافت اطلاعات فرمها و سپس پردازش آنها ميباشد.
تعيين مقدار "submit" برای شناسه type سبب نمايش دکمه Submit يا ارسال خواهد گرديد.
کد اچتمل نمايش توسط مرورگر
<form name="input" action="form_action.cgi">
Username:
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
Username:
<form name="input" action="form_action.cgi" dir="rtl">
نام کاربر
<input type="text" name="user">
<input type="submit" value="Submit">
</form>
نام کاربر
در مثال بالا در باکس ورودی متن، کلمه ای را وارد کرده و دکمه ارسال را کليک کنيد. مرورگر به محض کليک دکمه ارسال، اطلاعات درون فرم را که در اين مثال متنی ساده است به سمت فايلی که در شناسه action تعيين شده است ارسال کرده و در اين مثال برنامه ای به زبان Perl با نام form_action.cgi در سمت سرور به ذخيره و سپس نمايش متنی خبری خواهد پرداخت.
تگ img و شناسه src يا source
در زبان اچتمل تصاوير را با کمک تگ <img> تعريف ميکنند. تگ <img> از نوع تگهای خالی است، بدين معنا که فقط دارای يک يا چند شناسه و attribute بوده و دارای تگ انتهائی يا <img/> نيست.
مهمترين شناسه برای درج و تعريف يک تصوير src يا source نام دارد و مقدار اين شناسه آدرس يا URL تصوير ميباشد. تصاويری که مرورگر در يک صفحه وب نمايش ميدهد ميتوانند در همان دايرکتوری صفحه اچتمل، در ديگر دايرکتوريهای همان سايت و يا در فضای بيکران وب قرار داشته باشند.
شکل ساده درج يک تصوير:
<img src="url">
مقدار url آدرس اينترنتی تصوير ميباشد و مثلا اگر تصويری که قرار است که در صفحه درج شود در همان دايرکتوری قرار دارد و نامش me.jpg ، کافی است که به جای url فقط نام تصوير يعنی me.jpg را بنويسيد و اگر تصوير در سايتی ديکر قرار دارد url کامل آنرا بنويسيد. مثلا تصوير لوگو سايت google.com دارای url ی برابر http://www.google.com/images/logo.gif است.در اين url نام تصوير logo.gif بوده، در دايرکتوری images قرار داشته و روی وب سايت google.com قرار دارد.
شناسه های width و height در تگ img
کاربرد شناسه های width و height تعيين عرض و ارتفاع نمايش تصوير است. اگر از اين شناسه ها استفاده نکنيد، مرورگر ابتدا تصوير را لود کرده و سپس طول و عرض آنرا يافته و در نهايت نمايش ميدهد. با نوشتن مقاديری غير از مقادير واقعی طول و عرض تصوير ميتوانيد به تغيير شکل و ابعاد آن بپردازيد و آنرا مثلا کوچکتر، بزرگتر و يا کشيده تر نمايش دهيد. مثال زير نحوه درج تصويری را با قيد ابعاد آن شرح ميدهد:
<img src="http://www.google.com/images/logo.gif" width="276" height="110" >
توصيه ميشود که حتما ابعاد تصوير را با کمک شناسه های width و height قيد کنيد، اينکار سبب کمک به مرورگر در تسريع شروع نمايش صفحه خواهد شد.(در واقع با قيد ابعاد تصوير، مرورگر قبل از لود تصوير ميداند که چه مقدار از صفحه نمايش بايد به تصوير بايد اختصاص داده شود و قبل از لود شدن تمامی تصاوير مرورگر شروع به نمايش قالب و چارچوب کلی صفحه خواهد کرد.)
وبلاگها و اضافه کردن تصاوير:
اگر وبلاگی داشته و ميخواهد که تصويری به آن اضافه کنيد دو حالت مختلف ممکن است که پيش آيد:
• الف) تصوير روی سايتی ديگر قرار داشته و شما هم ميخواهید از آن تصوير که در سايتی ديگر قرار دارد استفاده کنيد. در اين حالت از آدرس مستقيم تصوير در شناسه src استفاده کنيد، مانند :
<img src="http://www.google.ca/images/hp0.gif" width=258 height=78 >
در اين مثال تصوير روی سايت google.ca قرار داشته و لزومی به ذخيره آن توسط شما نيست.
• ب) تصویر روی هارد کامپيوتر شما است و هنوز بروی وب منتقل نشده است. در اين حالت چون اغلب سيستم های وبلاگ امکان ذخيره تصاوير را به شما نمی دهند بايد ابتدا تصويرتان را با کمک FTP يا روشهای ديگر به روی سايتی ديگر منتقل کنيد. شرکتهای مختلفی فضای مجانی برای ساخت صفحات وب و ذخيره اطلاعات و تصاوير در اختيار شما قرار ميدهند
چند نکته مهم:
• اگر در يک صفحه اچتمل از 10 تصوير استفاده شده باشد، مرورگر بايد 11 فايل را لود کند.( خود صفحه به علاوه 10 تصوير)
• استفاده از تصاوير، سرعت لود شدن صفحات را پايين می آورد.با احتياط از تصاوير استفاده کنيد و به اندازه و حجم تصوير توجه داشته باشيد.
• لود تصويری با حجم 50 کيلوبايت برای کسی که از مودمی با سرعت 28kbps استفاده ميکند حداقل 15 ثانيه طول خواهد کشيد.
• برای ديدن مشخصات تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش properities آدرس،ابعاد و ظرفيت تصوير را ببينيد.
• برای ذخيره تصاوير در وب کافی است که روی تصوير Right click کرذه و سپس در بخش "Save picture as" آنرا ذخيره کنيد.
منابع:
مركز محاسبات دانشگاه صنعتی شريف www.sharif.ac.ir
سازمان مديريت و برنامهريزی كشور
شورای عالی انفورماتيك http://www.unicode.org/
گرد آورنده: احسان خوشخرام
+ نوشته شده در ساعت توسط احسان خوشخرام
|