پاسخ : آموزش مقدماتي و پيشترفته Html link در حالت عادي کليه لينکهاي داخل يک صفحه برنگ آبي هستند ولي اگر بخواهيد رنگ آنها را تغيير دهيد اين خصوصيت را بکار مي بريد و مانند هميشه يا نام رنگ و يا کد هگز آنرا مي نويسيد. البته خصوصيت ديگري هم در اين ارتباط هست که بخواهيد رنگ لينک فعال يا همان لينکي که در حال کليک کردن بر روي آن هستيد تغيير کند بايد از خصوصيت alink و اگر رنگ لينکهاي مشاهده شده را بخواهيد تغيير دهيد از خصوصيت vlink استفاده مي کنيد. <body link=”#990000” alink=”#009900” vlink=”#000099
پاسخ : آموزش مقدماتي و پيشترفته Html Html 4.01 و تفاوتهاي آن با نسخه 4.0 HTML 4.01 نسخه اصلاح شده 4.0 ميباشد که براي هماهنگي با نسخه جديد يعنيXHTML و نسل بعدي زبان وب که XML باشد، در وب منتشر شد. اين نسخه با تغييرات کمي عرضه شد اما شما مجبور هستيد که اين قوانين را رعايت کنيد اگر ميخواهيد وب سايت شما هماهنگي بيشتري با نسخه جديد داشته باشد. بعضي از اين تغييرات را در اين بخش برايتان ميگويم ولي نکات اساسي در اين زمينه را در بخش XHTML خواهم گفت. بهتر است که شما بعد از فراگيري مجموعه HTML 4 قوانين بکار برده شده در XHTML را رعايت کنيد تا در آينده وب سايت شما به مشکل جدي برنخورد.استفاده يکسري تگها از طرف انجمن W3C ديگر توصيه نميشود وحتي بعضي از آنها ممنوع شدند. براي شروع کدنويسي در HTML 4.01 اولين چيزيکه بايد رعايت کنيد DTD آن فايل است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمايش ميدهند ولي در آينده ممکن است اينچنين نباشد. همانطور که ميدانيد DTD بايد قبل ازتگ <HTML> نوشته شود. براي اين نسخه سه مدل در نظر گرفته شده است که در مدل اول صفحه شما فقط از تگهاي استاندارد و قابل قبول استفاده خواهد کرد: کد: <!DOCTYPE HTML PUBLIC ‘’-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”> اگر در آن صفحه تگهاي از رده خارج هم بکار برده ايد بايد از اين مدل DTD استفاده کنيد: کد: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> همچنين اگر از عنصر Frame استفاده ميکنيد اين مدل را بکار بريد: کد: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> بعد از مشخص کردن DTD آن صفحه بايد دقت کنيد که در اين نسخه بايد کليه تگها ، پايان دهنده داشته باشند. بعضي از تگها يا تگ پايان دهنده نداشتند و يا نوشتن آنها اجباري نبود مانند <img>,<p> . اما همه بايد بسته شوند و آنهاييکه تگ پايان دهنده نداشتند، در همان تگ و قبل از بستن تگ با علامت > بايد علامت slash يعني/ را بگذارند. مانند: کد: <img src=”…/images/mypic.gif” /> اين قبيل تگها را بدين صورت بکار بريد: <meta/>, <br/>, <blockquote/>, <hr/>, <basefont/>, <Q/>, <li/>, <dt/>, <dd/>, <img/>, <area/>, <frame/>, <input/>, <param/>, <bgsound/> نکته: اگر تگ <a> در حالت Anchor بود يعني حالتيکه لينک به يکي از نقاط داخل همان صفحه پيوند داده خواهد شد، بايد آنرا بصورت <a/> بنويسيد. اينها قوانيني بودند که در اين نسخه تغيير کردند تا اين نسخه با XHTML سازگار شود.
پاسخ : آموزش مقدماتي و پيشترفته Html آموزش Xhtml زبان XHTML که مخفف EXtensible HyperText Markup Language در تاریخ 26 ژانویه سال 2000 منتشر شد و به قول بعضيها همان HTML 5 میباشد که در واقع اینچنین نیست. این زبان نسل جدید زبان وب ميباشد که داراي یکسري اصول و قوانین خاص است تا کمبودهايHTML را در مورد دستگاههاي کوچک الکترونیکي که به وب هم متصل ميشوند مانند تلفنهاي همراه، را جبران کند. مدتي است که وب آماده معرفي زبان آينده خود يعني XML است که XHTML اين وظيفه را بعهده دارد. در اين نسخه کدهايHTML بايد در DTD نوشته شوند. هر مرورگر وب ، داخل خود يک نوع DTD دارد و به همين دليل است که يکسري از دستورات نسخه هاي مختلف HTML در بعضي از مرورگرها نمايش داده نميشوند. از اين به بعد شما بايد دستورات HTML را در DTD خاص خود بکار بريد، چون انجمن ميخواهد يک استاندارد را معين کند تا هماهنگي لازم بين زبان وب و کليه User-agent ها برقرار شود. User-agent برنامه هاي تحت وب مانند مرورگرها را گويند. W3C پيشنهاد داده که HTML بايد يک برنامه کاربردي تحت XML باشد تا برنامه نويسان وب مجبور به رعايت استاندارد آن شوند. با قبول کردن DTD برايXHTML و نوشتن آن ، بايد اصول و قوانين اين نسخه را هم رعايت کنيد البته اگر ميخواهيد صفحات شما سازگاري بيشتري با نسل آينده وب داشته باشد. پس ابتدا از DTD براي اين نسخه شروع ميکنيم . همانطور که ميدانيد DTD براي نسخه هاي HTML لازم نبود و بدون آن هم صفحات بخوبي نمايش داده ميشدند ولي براي XHTML نوشتن و تعيين آن اجباري است. در حال حاضر سه نوع DTD براي حالتهاي مختلف وجود دارد: حالت اول براي صفحه اي است که فقط از دستورات صحيح XHTML استفاده شده و براي مرورگرهايي است که از CSS پشتيباني ميکنند، کد: <! DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> حالت بعدي براي صفحه اي است که مخلوطي از کدهاي HTML و XHTML باشد و مرورگرهاييکه از CSS پشتيباني نميکنند هم آنرا نمايش دهند، کد: <! DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> و حالت آخر هم براي استفاده عنصر فريم Frame در صفحه است، کد: <! DOCTYPE HTML PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”> فراموش نکنيد که نوشتن يکي از آنها اجباري است. حالا نکاتي را که بايد در اين نسخه رعايت کنيد: نوشتن تگهاي</head></body> که در HTML اجباري نبود در XHTML اجباري است. وجود تگهاي پايان دهنده اجباري است مانند: <p>….</p>, <hr/>, <br/> کليه تگها و خصوصيات آنها بايد بصورت حروف کوچک انگليسي نوشته شود. مانند: <body bgcolor=”#ffcc45”> مقادير خصوصيات در تگها بايد بين دو علامت “…” قرار گيرند. ترتيب قرار گرفتن تگها داخل هم بايد رعايت شود، کد: کد: <b><i> TEXT </b></i> روش غلط <b><i> TEXT </i></b> روش صحيح بعضي از خصوصيات در HTML نياز به مقداردهي نداشتند اما در XHTML آنها را بايد مقداردهي کنيم، کد: کد: <input type=”radio” checked> روش غلط <input type=”radio” checked=”checked”> xhtml روش صحيح در در تگ <pre> فقط از متن بايد استفاده کنيد و داخل آن از تگهاي ديگر نميتوانيد استفاده کنيد. يک فرم را داخل فرم ديگر نبايد بکار بريد. دستورات فايل CSS بايد به صورت حروف کوچک نوشته شوند و بهتر است که براي Style sheet از فايل خارجي استفاده کنيد. کليه خصوصياتي را که ميتوان با style sheet کنترل کرد از خصوصيات HTML آنها بهتر است استفاده نشود. دستورات زبان جاوااسکريپت هم بهتر است در فايل خارجي باشد و توسط تگ <link> فراخواني شوند ولي اگر ميخواهيد داخل XHTML DTD از آنها استفاده کنيد بايد مانند زير عمل کنيد: کد: کد: <script language=”JavaScript” type=”text/javascript”> <![CDATA [ document.write(“ Hi Friends “); ] ]> </script> ديگر از تگ <!-- ….. --> براي بيان نظريه و توضيح نميتوانيد استفاده کنيد. در صورت نياز مانند زير عمل شود، کد: <[CDATA […comment…] ]> همانطور که ميبينيد يکسري محدوديتهايي هست که در HTML نبود و سادگي زبان HTML که باعث محبوبيت فراوان آن شده در نسل جديد دارد از بين ميرود ولي در عوض به گفته W3C دو خاصيت بسيار مهم در نسخه جديد زبان وب وجود دارد، Extensibility و Portability .
پاسخ : آموزش مقدماتي و پيشترفته Html Cascading Style Sheet آموزش استایل شیت استایل شیت ها یکی از مفید ترین عناصر وب میباشند که یکی از مزیتهای آن ساخت یک فایل و الگوی مشترک و استفاده آن در کلیه صفحات سایت می باشد. همین امر که از تکرار یک سری کد جلوگیری میکند باعث محبوبیت این عنصر در نزد طراحان وب شده است. با استایل شیت چه کارهایی میتوانید انجام دهید؟ با این عنصر شما میتوانید مدل، اندازه، رنگ و نوع آرایش متن ، رنگ زمینه و حاشیه صفحات و جدولها ، تنظیمات لیستها و همچنین عکسها را کنترل کنید. تعیین الگو و style هر style باید برای یک تگ خاص تعریف شود . به محتوای داخل تگی که میخواهیم یک style نسبت دهیم selector یا انتخاب کننده میگویند که الگوی تعریف شده در تگ آغاز کننده یک عنصر تا تگ پایان دهنده آن تاثیر خواهد داشت. برای تعیین و تعریف یک الگو ابتدا باید selector را مشخص و بنویسیم مانند h1 سپس خصوصیات و مقادیر آنها را بین دو علامت { } بگذاریم که طرز نوشتن خصوصیت و مقدار آن بین { } به این ترتیب میباشد: ابتدا خصوصیت را نوشته سپس علامت : میگذاریم و بعد مقدار مشخصه آنرا مینویسیم ، کد: h1 { color:green } اگر بخواهیم چند خصوصیت را به یک selector نسبت دهیم ، بعد از هر کدام یک ; میگذاریم، کد: h1 { color:green; text-align:center } روشهای تعریف الگو و style Style ها را به سه روش میتوان تعریف کرد: روش اول: به عنوان یک الگوی خارجی که اطلاعات در یک فایل نوشته میشود و با پسوند .css ذخیره میشود که در تگ <link> داخل قسمت head آدرس دهی و فراخوانده میشود. روش دوم: style را میتوانیم در قسمت head نوشته و جاسازی کنیم که با تگهای<style></style> مشخص میشوند. روش سوم: با قرار دادن style به عنوان خصوصیت در یک تگ و مقدار دهی آن. مانند تگ زیر: کد: <div style=”color:green”> نکته: اگر برای یک selector به چند روش style تعیین شود، آن الگویی که به تگ نزدیکتر است اجرا خواهد شد، پس طبق این اصل روش سوم نسبت به بقیه مؤثرتر است. در ضمن هیچ محدودیتی در تعیین selector ها ویا خصوصیات آنها نیست. به مثال زیر توجه کنید: کد: <style> body { color:yellow; background-color:red } h1,h2, h3, p { color:green } </style> تعریف الگو از طریق class گاهی اوقات یک style به روشهای اول یا دوم تعریف میشود، اما شما نمیخواهید که آن الگو در همه جا اعمال شود، پس میایید یک اسم واحد برایselector انتخاب میکنید ، بدین ترتیب که بلافاصله بعد از selector یک نقطه میگذارید و اسمی را مینویسید. پس از این کار در هر تگی که نیاز به آن الگو هست خصوصیت class=” “ را مینویسیم و برابر با آن اسم قرار میدهیم، کد: کد: <head> <style> p.name { color:green } </style> </head> <body> <p class=”name”>……..</p> </body> فراخوانی فایل css در تگ <link> ارزش واقعی style sheet زمانی به چشم میاید که یکبار آنرا تعریف کنید و در تمام صفحات از آن بهره ببرید. برای این منظور شما فقط از طریق روش اول میتوانید اینکار را انجام دهید، بدین ترتیب که style ها را در برنامه ویرایشگر متن مانند notepad مینویسید و سپس آن فایل را با پسوند .css ذخیره کرده و در دایرکتوری اصلی وب سایتتان قرار میدهید. css مخفف Cascading Style Sheet است. نکته: دراین روش نیازی به نوشتن تگهای<style></style> نیست و فقط selector ها و خصوصیات را مینویسید. در صورت رعایت نکردن این موضوع الگوهای تعریف شده در آن فایل در صفحات اعمال نخواهند شد. پس از ذخیره فایل style sheet میتوانید برای هر صفحه که میخواهید آنرا فراخوانی کنید، برای انجام این عمل باید تگ <link> را در قسمت head قرار دهید و سه خصوصیت مربوط به آنرا وارد کنید. خصوصیت rel=” “ است که برابر با کلمه stylesheet قرار میدهید و سپس type=” " وبا text/css مقداردهی میشود و در آخر با خصوصیت href=” “ فایل را آدرس دهی میکنید، کد: <link rel=”stylesheet” type=”text/css” href=”آدرس فایل “> این تگ نیازی به پایان دهنده ندارد.
پاسخ : آموزش مقدماتي و پيشترفته Html خصوصيات استايل شيت قسمت اول در اين قسمت ميپردازيم به خصوصيات style ها که ابتدا از عنصر متن شروع ميکنيم که در تگهاي <p><div><span> بيشتر کاربرد دارد. Style براي عنصر متن text-align محل قرارگيري متن در يک سطر را کنترل ميکند و با justify, left, center, right مقداردهي ميشود. text-indent براي دندانه دار کردن متن بکار ميرود و با عدد مقدار دهي ميشود که اگر در مقياس پيکسل باشد بعد از عدد بايد px نوشته شود مانند: text-indent:20px و اگر با درصد مقداردهي شود بايد علامت % را بگذاريد. letter-spacing اندازه بين حروف را کنترل ميکند که براي حروف فارسي مناسب نيست و با عدد مقداردهي ميشود که بعد از عدد px يا em نوشته ميشود که در em بين حروف فاصله اي به اندازه حرف m توليد ميشود. line-height براي کنترل فاصله خطوط از هم بکار ميرود و با عدد سپس px مقداردهي ميشود. font-family براي تعيين نوع فونت بکار ميرود که در اين خصوصيت ميتوانيد چندين فونت را قرار دهيد که اگر سيستم بيننده سايت يک از آن فونتها را نداشت از ديگري استفاده کند، بدين صورت:font-family:Arial, Tahoma, Times New Roman font-style آرايش فونت را از لحاظ اريب بودن تعيين ميکند که ميتوانيد از normal, italic, oblique استفاده کنيد. font-weight آرايش حروف را از لحاظ ضخامت تعيين ميکند که به دو روش مقدار ميدهيد ، با کلمات lighter, normal, bold, bolder و يا با اعداد بين 100 تا 900 . font-size اندازه حروف را به سه مدل کنترل ميکند : در مدل absolute sizes از کلمات xxsmall, small, medium, large, xlarge, xxlarge در مدل relative sizes از smaller, larger استفاده ميکنيم و در مدل font-point-size اعداد 1 تا 12 قرار ميدهيم که بعد از عدد pt بايد بنويسيم . نکته: شما ميتوانيد چند خصوصيت بالا را که مربوط به font ميباشد را يکجا بصورت خلاصه تعريف کنيد که در اين حالت نيازي به نوشتن خصوصيات نيست و فقط مقادير آنها را به ترتيب زير مينويسم: کد: font-style,font-weight,font-size,font-family کلمه font را به عنوان selector مينويسيم و مقاديرخصوصيات را به ترتيب بالا با رعايت فاصله دربين { } قرار ميدهيم، کد: font { italic bold 20pt “Arial” Tahoma } Color رنگ متن را تعيين ميکند که هم اسم رنگ و يا کد هگز رنگ را مينويسيد. text-decoration اين خصوصيت وظيفه کشيدن خط براي حروف را دارد که ميتوان از underline براي کشيدن خط زير حروف، از overline در بالاي حروف، line-through بر روي حروف استفاده کرد و اگر نيازي به کشيدن خط نيست از none استفاده ميشود، همچنين blink که براي چشمک زدن حروف بکار ميرود ولي مرورگر اينترنت اکسپلورر آنرا نمايش نميدهد. text-transform اين خصوصيت حروف را براي بعضي از زبانها مانند انگليسي کوچک و بزرگ ميکند و کاربردي براي فارسي ندارد. مقادير مربوط به آن none, capitalize, uppercase, lowercase است. Style براي زمينه صفحه و يا جدولها background-color توسط اين خصوصيت رنگ زمينه را کنترل ميکنيد که اسم رنگ يا مقدار مخلوط سه رنگ قرمز، سبزوآبي را که rgb مينامند مينويسيد براي هر رنگ از عدد 0 تا عدد 255 در نظر گرفته شده است. Style=”background-color: rgb(10,255,0)” داخل پرانتز عدد 10 نمايانگر رنگ قرمز و 255 رنگ سبز و 0 رنگ آبي است که شما هم بايد به همين ترتيب بنويسيد. background-image توسط اين خصوصيت ميتوانيد يک عکس به زمينه صفحه يا جدول اضافه کنيد. کد: background-image: { url ( www.sitename.com/images/image.gif ) } background-repeat زمانيکه بوسيله خصوصيت بالا يک عکس به زمينه صفحه يا يک جدول اضافه ميکنيد، آن عکس نسبت به اندازه اي که دارد آنقدر تکرار ميشود تا زمينه صفحه را پر کند اما توسط اين خصوصيت ميتوانيد تکرار آن را کنترل کنيد که اگر مقدار را repeat-x قرار دهيد فقط يک رديف بصورت افقي تکرار ميشود و اگر repeat-y باشد بصورت عمودي و no-repeat باشد همان عکس فقط ديده ميشود بدون تکرار. background-attachment اگر مقدار اين خصوصيت را fixed قرار دهيد عکسي که در زمينه صفحه است ثابت ميماند و عناصر و محتواي صفحه با scroll کردن بالا و پايين خواهند شد ولي اگر مقدار را scroll بگذاريم همراه با بقيه عناصر حرکت ميکند. background-position به کمک اين خصوصيت محل قرارگيري عکس در زمينه صفحه را تعيين ميکنيد که مقادير آن عبارتند از، top,bottom,center,left,right نکته: شما ميتوانيد همه خصوصيات مربوط به زمينه background يا چند تا از آنها را بطور يکجا تعريف کنيد که با اين موضوع آشنا هستيد. و اما ترتيب قرار گرفتن آنها بدين صورت است، background-color,background-image,background-repeat, background-attachment,background-position به مثال زير دقت بفرماييد: کد: کد: background: { green url(image.gif) no-repeat fixed bottom } style=” background: green url(image.gif) no-repeat scroll bottom right “
پاسخ : آموزش مقدماتي و پيشترفته Html خصوصيات استايل شيت قسمت دوم style براي حاشيه margin margin براي افزودن حاشيه به کناره هاي عناصر داخل صفحه مانند پاراگرافها، عکسها يا حتي خود صفحه بکار ميرود که توسط اين خصوصيت حاشيه را در چهار طرف با دادن مقادير عددي بر حسب پيکسل و يا درصد ميتوانيد کنترل کنيد. به اين نکته توجه فرماييد که اگر براي هر طرف مقادير متفاوت ميخواهيد بکاربريد پس بايد چهار مقدار با فاصله از هم بنويسيد مانند: margin:20px 45px 40px 100px که اولين عدد از سمت چپ مربوط به حاشيه بالاي عنصر و بترتيب براي راست، پايين و چپ محاسبه ميشود. و يا ميتوانيد دو عدد بکار بريد که مقدار اول حاشيه بالا و پايين و مقدار دوم حاشيه چپ و راست را کنترل ميکند و همچنين اگر حاشيه ها بايد بمقدار مساوي باشند فقط يک عدد کافي است. padding اين خصوصيت هم مانند margin عمل ميکند. Style براي کادر border border اين خصوصيت عناصر صفحه را داخل يک کادر قرار ميدهد که در سه قسمت مقدار دهي ميشود، اولين مقدار مدلهاي مختلف کادر را تعيين ميکند که مقادير آن عبارتند از: none, dotted, dashed, solid, double, groove, ridge, inset, outset دومين مقدار مربوط به تعيين ضخامت کادر است که با thin,medium,thick و يا با عدد بهمراه px و آخرين مقدار رنگ کادر را کنترل ميکند، مانند: کد: style=” border: groove thin green” نکته: شما ميتوانيد خصوصيات حاشيه و کادر يک طرف را هم تعيين کنيد. بطور مثال فقط حاشيه يک عنصر از بالا يا رنگ کادر در طرف چپ ، که براي اين موضوع کافيست تا خصوصيت را نوشته و يک خط تيره گذاشته و سپس اسم سمت مورد نظر را وارد کنيد و در آخر هم مقدار دهي آن. کد: margin-top: 40px padding-left: 100px border-bottom: dotted Style براي کنترل طول height و عرض width height, width همانطور که ميدانيد اين دو خصوصيت براي کنترل ابعاد يک عنصر مانند جدول و يا يک عکس بکار ميروند که با عدد بر حسب پيکسل و با علامت مشخصه px و يا با درصد مقدار دهي ميشوند در ضمن شما ميتوانيد مقدار auto هم قرار دهيد که آن عنصردر اندازه حقيقي خود ظاهر شود. Style براي قرار گرفتن دو عنصر در کنار هم alignment float اين خصوصيت مانند align عمل ميکند و با none, left, right مقداردهي ميشود محل قرار گيري دو عنصر را در کنار هم کنترل ميکند. clear اين خصوصيت برعکس float است و مشخص ميکند که در کدام طرف يا در هر دو سمت هيچ عنصري نباشد که با none, left, right, both هم مقداردهي ميشود. Style براي ليستها lists list-style-type نوع ترتيب قرارگرفتن ليستها را کنترل ميکند که عدد يا علامت ابتداي هر گزينه در ليست بيايد که ميتوانيد از مقادير none, disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha استفاده کنيد. list-style-image اگر بخواهيد بجاي مقادير بالا از عکس دلخواه خودتان براي علامتهاي ابتداي گزينه ها استفاده کنيد ميتوانيد اين خصوصيت را بکار بريد. کد: کد: list-style-image: url ( images/bullet.gif ) list-style-position اين خصوصيت گزينه هاي ليست را دندانه دار ميکند و با inside, outside مقدار دهي ميشود که بصورت پيش فرض براي ليستها outside در نظر گرفته ميشود. نکته: بهتر است در اين خصوصيات تگ li را به عنوان selector انتخاب کنيد و همچنين اين سه خصوصيت را ميتوانيد بصورت خلاصه و يکجا بکار بريد کد: کد: li { list-style: circle url(bullet.gif) inside } <li style=” list-style: circle url(images/bullet.gif) inside “> همانطور که مشاهده ميکنيد ترتيب قرار گرفتن مقادير ابتدا type سپس image و در آخر position است. Style براي scrollbar اگر شما بخواهيد رنگ scrollbar مرورگر را تغيير دهيد ميتوانيد style زير را به قسمت head صفحه اضافه کنيد: کد: <style type="text/css"> body { scrollbar-base-color: orange; scrollbar-arrow-color: green; scrollbar-darkshadow-color: blue; } </style> البته متناسب با رنگ آميزي صفحه ميتوانيد نام رنگها را تغيير دهيد. در هر عنصر ديگري که از scrollbar استفاده ميشود هم ميتوانيد با اضافه کردن خصوصيت style=” “ به تگ مربوطه، رنگ آنرا کنترل کنيد. بطور مثال براي تغيير رنگ scrollbar در textarea داخل يک فرم ، بصورت زير عمل ميکنيد: کد: <form> <textarea cols="10" rows="10" style="scrollbar-base-colorink;scrollbar-arrow-colorurple;"> Text in the box </textarea> </form> Style براي نشانگر موس cursor بيشتر مواقع نشانگر موس بصورت يک فلش است که براي تغيير دادن شکل آن در صورت نيازاز خصوصيات زير استفاده کنيد: cursor: auto نشانگر بصورت معمول نمايش داده ميشود. cursor: crosshair بشکل علامت مثبت است. cursor: default شکل پيش فرض خود را دارد. cursor: hand مانند لينکها شکل دست بخود ميگيرد. cursor: e-resize بصورت فلش شرقي غربي است. cursor: n-resize فلش شمالي جنوبي است. cursor: ne-resize فلش شمالشرقي به جنوبغربي. cursor: nw-resize برعکس حالت بالا. cursor: help يک علامت سوال اضافه ميکند. cursor: move فلش در چهارجهت . cursor: text بشکل نشانگر برروي متن است. cursor: wait شکل ساعت شني براي انتظار را اضافه ميکند.
پاسخ : آموزش مقدماتي و پيشترفته Html فارسي نويسي در وب چند سالي است که با مطرح شدن يونيکد Unicode سايتهايي به زبانهاي غير از انگليسي زياد شده و در همين راستا ايرانيان عزيز هم عقب نشسته و شروع به ساختن سايتهاي فارسي کرده که جا دارد همين جا از همه کساني که براي ايران و ايراني زحمت ميکشند تشکر و قدرداني کنم. شما هم با استفاده از اين تکنيک ميتوانيد حروف فارسي را در وب بکاربريد بدون آنکه بيننده سايت شما نيازي به نصب فونت جديد در سيستم خود داشته باشد، البته ميتوانيد هر نوع فونت به غير از آنهايي که استاندارد ويندوز هستند را بکار بريد ولي همان فونت را بايد در اولين صفحه سايت قرار دهيد تا کاربر آنرا دانلود کرده و نصب کند تا متنهاي سايت شما را بتواند به درستي مشاهده کند ، اينرا در نظر داشته باشيد که براي همه خوشايند نيست اينکار و اين موضوع شايد باعث از دست دادن بيننده شود که يک نمره منفي براي وب سايت به حساب مي آيد. خب دوستان براي راه اندازي يک وب سايت فارسي ابتدا بايد سيستم عاملي داشته باشيد که فارسي ساز داشته باشد و يا مانند ويندوز XP, 2000 سازگار با زبان فارسي باشد تا توانايي تايپ فارسي را داشته باشيد، در ضمن بهتر است که از برنامه هايي نظيرMS Word يا FrontPage از مجموعه آفيس مايکروسافت استفاده کنيد چون ميتوانيد مستقيم فارسي بنويسيد و آنرا بصورت فايلhtml ذخيره کنيد. با هر برنامه اي که راحت هستيد ، متن را وارد کنيد و سپس به سورس source صفحه برويد و تگ زير را در قسمتHead وارد کنيد، <meta http-equiv=”content-type” content=”text/html;charset=utf-8”> اين تگ، encoding مرورگر را براي استفاده از حروف و علامتهاي يونيکد تنظيم ميکند. براي ديدن و تنظيم encoding يک صفحه بصورت دستي بايد وارد منوي view در مرورگر شويد و برروي Encoding رفته واز ليست باز شده گزينه مورد نظر را انتخاب کنيد. اما وظيفه آن، تنظيم مرورگر بيننده براي نمايش صحيح حروف و علامتهاي بکار گرفته شده دروب سايت شما است چون هر کدام از آنها علامت و فونت خاص خود را دارند. تا بحال با يک نامه فارسي درايميل خود برخورد کرده ايد که يکسري حروف عجيب و غريب داشته باشد؟ اگر جوابتان بله است از اين به بعد وارد encoding شويد و آنرا روي Utf-8 بگذاريد. خب حالا نوبت به انتخاب فونت رسيده که يک فونت مناسب بايد استاندارد بوده و خاصيت يونيکد را هم داشته باشد. بهترين فونتها در سيستم عامل ويندوز که مناسب فارسي نويسي هستند عبارتند از: Arial, Tahoma, Times New Roman پس از انتخاب فونت، بهتر است که خصوصيات lang=”fa”, dir=”rtl” را به تگهايي مانند <body>, <font>, <p>, <div>, <span> اضافه کنيد که خصوصيت lang=” ” مشخص کننده زبان بکار گرفته شده و fa نمايانگر فارسي farsi است و همينطور خصوصيت dir=”rtl” که جهت نوشتن را تعيين ميکند و rtl نمايانگر راست به چپright to left است. نکته: اگر خصوصيت dir=”rtl” را در تگ <body> بکار بريد، محل قرار گرفتن scroll bar در مرورگر از طرف راست به طرف چپ منتقل ميشود که اين خاصيت فقط در مرورگر اينترنت اکسپلورر IE عمل ميکند. ممکن است شما بعد از ذخيره صفحه با يک مشکلي برخورد کنيد که بيشتر در مرورگر هاي نسخه قديمي مانند IE 5.5 به پايين مشاهده ميشود و آن ديدن حرف ي بزرگ در وسط کلمه بجاي نوع کوچک است مانند: ا ي نترنت که براي برطرف کردن آن دو راه وجود دارد: اولين راه قرار دادن نسخه جديد فونت بکار گرفته شده در سايت براي دانلود کردن آن توسط بيننده وب سايت و نصب آن که هر کسي شايد بدرستي نتواند آنرا انجام دهد و اما راه حل دوم ، ابتدا صفحه مورد نظر را در برنامه FrontPage باز کنيد و به قسمتHTML در پايين برنامه رفته که در اين قسمت سورس کد را خواهيد ديد و کدی را حذف و بجاي آن کد ي را قرار ميدهيد و سپس صفحه جديد را دوباره ذخيره ميکنيد. دقت کنيد، در صورتي حروف فارسي را به اين شکل خواهيد ديد که encoding برابر با windows-1252 باشد، يعني: <meta http-equiv="content-type" content="text/html;charset="windows-1252"> يک نکته ديگر را بخاطر بسپاريد که اگر عنوان صفحه را فارسي تايپ کنيد يعني در قسمت<title> در بعضي از مرورگرها نمايش داده نخواهد شد.
پاسخ : آموزش مقدماتي و پيشترفته Html بررسی و امتحان کردن صفحات زمانيکه شما نوشتن کدهاي html را در برنامه notepad يا ويرايشگرهايHTML تمام کرديد، بعد از ذخيره کردن آن فايل با يکي از پسوندهاي .htm يا .html و با استفاده از مرورگر وب خود آنرا امتحان کنيد تا نتيجه کارتان را مشاهده و اگر مشکلي هم داشت برطرف شود. مشکلاتي مانند نمايش نادرست صفحه يا حتي غلطهاي ديکته اي که زياد هم به چشم ميخورند. شما اين صفحات را قبل از اينکه روي سرور بگذاريد تا ديگران هم ببينند، بر روي کامپيوتر خود ميتوانيد امتحان کنيد ولي اگر از فايلهاي ASP يا CGI استفاده کرده ايد نياز به يک وب سرور براي چک کردن آنها داريد. شرکت مايکروسافت دو نرم افزار دارد که توسط آنها ميتوانيد يک وب سرور درست کنيد و اينگونه فايلها را هم مشاهده کنيد. يکي از آنها IIS که مخفف Internet Information Services است و بر روي ويندوزهاي 2000 و XP نصب ميشود و ديگري PWS که مخفف Personal Web Server است و بر روي ويندوزهاي98 و ME اجرا ميشود. سعي کنيد هر صفحه را در مرورگرهاي مختلف چک کنيد که معروفترين آنها عبارتند از: Internet Explorer ( IE ), Netscape Navigator ( NN ), Opera, Mozilla چون بعضي از تگها در همه مرورگرها اجرا نميشوند و همچنين اينرا در نظر داشته باشيد که سيستمهاي عامل هم با يکديگر فرق دارند. بطور مثال فونتها و طرز نمايش صفحه داخل مرورگر Netscape در سيستم عامل Windows با Macintosh فرق ميکند. برنامه هايي بنام HTML validator موجود ميباشند که با کمک آنها ميتوانيد عيب هاي صفحات را پيدا کنيد. بطور مثال اگر تگ پايان دهنده اي را فراموش کرديد آنرا پيدا کرده و بعضي از آنها حتي آن مشکل را رفع هم ميکنند. اگر از ويرايشگرهايي مانند Microsoft FrontPage يا Macromedia Dreamweaver استفاده ميکنيد، خود اين نرم افزارها برايتان عيب يابي ميکنند و نيازي به برنامه اضافي براي اين کار نداريد. براي تأييد صفحات وب سايتتان که مزيت اين آدرس در اين است که بعد از رفع عيوب احتمالي، به شما اجازه استفاده از لوگوي مخصوص خودشان را در اين زمينه ميدهند که نمايانگر بي نقص بودن صفحات ميباشد. که وظيفه تأييد و اعلان کدهايHTML, XHTML, CSS, … را بعهده دارند. از نکاتيکه هنگام چک کردن يک صفحه نبايد فراموش کنيد ، امتحان کردن لينکها است تا همه آنها به آدرس درست پيوند داده شوند. يکسري برنامه هم در اين زمينه وجود دارد که به آنها site-management tools گفته ميشود. بخاطر بسپاريد که يک طراح و برنامه نويس حرفه اي وب قبل از اينکه سايت خود را در سرور اصلي راه اندازي کند تا ديگران به آن دسترسي داشته باشند، بايد از همه لحاظ صفحات را تست کند و حتي بعد از راه اندازي يک مدت را براي امتحان کامل توسط متخصصان و افراد عادي در نظر بگيرد و سپس اقدام به تبليغ سايت بين بينندگان و کاربران کند. البته باز هم ممکن است مشکلاتي وجود داشته باشد که آنها را بعهده بينندگان بگذاريد تا با نظرات خود شما را مطلع کنند.
پاسخ : آموزش مقدماتي و پيشترفته Html upload و راه اندازي سايت بعد از آماده کردن صفحات سايت و رفع ايراد آنها حالا نوبت به راه اندازي و برپايي وب سايتتان رسيده است. براي اينکار نياز به يک فضاي امن در يک سرور داريد. سرور، يک کامپيوتر متصل به اينترنت است که محتواي وب سايت شما بر روي هارد ديسک آن قرار خواهد گرفت که به اين عمل web hosting يا ميزباني وب ميگويند. يکبار تنظيمات اوليه توسط متخصصان انجام ميشود و از آن به بعد تمام کسانيکه به اينترنت دسترسي دارند ميتوانند سايت شما را هم ببينند. شما بايد فايلهاي خود را بر روي سرور upload کنيد، يعني اطلاعات را از کامپيوتر خود به کامپيوتر اصلي بفرستيد. Upload بر عکس اصطلاح download است که در دانلود اطلاعات را از کامپيوتر ديگري جمع آوري کرده و در کامپيوتر خود ذخيره مي کنيد. پيدا کردن سرور مناسب براي upload کردن صفحات نياز به يافتن يک فضاي مناسب با امنيت بالا داريد. بطور معمول شرکتهاي سرويس دهنده اينترنت (ISP) اين فضا را به شما اجاره خواهند داد. براي برپايي يک سايت معمولي نياز به 5 الي20 مگابايت فضا داريد. سايتهايي هم هستند که اين فضا را بطور رايگان دراختيار شما مي گذارند که در عوض تبليغات خود را در صفحات سايت شما جاي ميدهند. در نظر داشته باشيد که شرکتهاي اينترنتي زيادي با قيمتهاي متفاوت وجود دارند که شما بايد قيمتها را نسبت به امکاناتيکه در اختيار شما قرار ميدهند، بسنجيد و سپس اقدام به اجاره فضا کنيد. ثبت اسم و دامنه سايت Domain Registartion پس از پيدا کردن سرور مناسب نوبت به ثبت اسم وب سايت ميرسد که اين کار شامل هزينه اضافي ميباشد و ميتوانيد در همان شرکتي که ميزباني سايت شما را به عهده دارد، آنرا به ثبت برسانيد. البته اسم مورد نظر شما نبايد از قبل رزرو شده باشد. سايتهايي وجود دارند که اسم مورد نظر خود را ميتوانيد در آن جستجو کنيد تا اگر آن اسم رزرو نشده باشد، اقدام به ثبت آن کنيد. ي Upload کردن فايلها توسط FTP چند روش براي انتقال محتواي سايت شما بر روي سرور وجود دارد. بهترين راه استفاده از پروتکل FTP که مخفف File Transfer Protocol ميباشد. براي استفاده از اين سرويس برنامه هايي هست که اينکار را براي ما انجام ميدهند. معروفترين برنامه ها Cute FTP و WS FTP ميباشند. يکي از امکاناتي که شرکت ميزبان در اختيار شما بايد قرار دهد همين سرويس ميباشد که مشخصات لازم مانند password يا همان کلمه رمز را به شما ميدهند و شما اطلاعات لازم را در برنامه FTP وارد کرده و به دايرکتوري مشخص در سرور وصل ميشويد. زمانيکه اين ارتباط برقرار شود بايد عمل انتقال فايلها را انجام داد که بيشتر برنامه هاي FTP داراي دو پنجره ميباشند که يکي محتواي کامپيوتر خودتان را و ديگري دايرکتوري رزرو شده در سرور را نشان ميدهد. عمل انتقال فايلها به دو روش انجام ميشود، يکي بصورت ASCII که مخصوص انتقال فايلهاي داراي متن مانند خود صفحات HTML و ديگري بصورت Binary که مخصوص انتقال فايلهاي گرافيکي، صوتي و تصويري ميباشد. دقت کنيد که اگر اشتباه انتخاب کنيد فايلها خراب شده و قابل استفاده نميباشند ، اما نگران اين موضوع نباشيد، داخل برنامه هاي مربوطه گزينه اي هست که بطور اتوماتيک اينکار را انجام ميدهد و فقط شما بايد آنرا فعال کنيد. پس از عمل upload و تنظيمات مربوط به سرور، صفحه اصلي سايت شما در اختيار بينندگان قرار خواهد گرفت که از طريق همان صفحه به تمام سايت شما دسترسي خواهند داشت.
پاسخ : آموزش مقدماتي و پيشترفته Html موتورهاي جستجو در اين بخش ميخواهم در مورد سايت هاي جستجو يا موتورهاي جستجوگر search engines و اهميت آنها براي سايت شما صحبت کنیم. هر هدفي را که از ساخت يک وب سايت دنبال ميکنيد ، تا زمانيکه سايت شما شناخته نشده باشد، به آن هدف نخواهيد رسيد. بطور معمول ، هدف از ساخت يک وب سايت يا اطلاع رساني است يا کسب درآمد و يا ميتواند هر دو آنها باشد که به نظر من اين آخري از همه بهتر است. در هر حال شما بعد از راه اندازي سايتتان نياز به يک تبليغات گسترده براي جلب بيننده بيشتر داريد، اين نکته را هميشه در ذهن بسپاريد، هر چه بيننده وب سايت شما بيشتر باشد، موفقيت شما بيشتر خواهد بود، هر بيننده برابر با يک امتياز و يا شايد هم بيشتر. يکي از اساسي ترين راههاي جذب بيننده، ثبت صفحات سايت در موتورهاي جستجوگر search engines است، چون هر کسي در هر کجا که باشد ميتواند سايت شما را پيدا کند. موتور جستجوگر چيست؟ در حال حاضر تعداد زيادي سايت جستجوگر مانند، AltaVista, Mama, Yahoo, Google داريم که هر کدام از اينها توسط برنامه هاي گردشگر بنام spider, web crawler, robot مرتب در وب بدنبال صفحات جديد و يا تغييريافته ميگردند و به محض پيدا کردن آنها، اطلاعات مورد نظر را در پايگاه داده ايDatabase خود، ليست ميکنند تا در موقع لزوم و بهنگام جستجو در اختيار کاربران قرار دهند. زمانيکه شما بدنبال يک کلمه کليديkeyword در آن سايتها مي گرديد، اطلاعات پايگاه داده اي آنها را جستجو ميکنيد و سپس نزديکترين مطالب به کلمه کليدي را براي شما نمايان ميکنند که هر چه آن کلمه دقيق تر باشد، شما به مطلب مورد نظر زودتر و راحت تر دسترسي پيدا ميکنيد. چگونه صفحات در پايگاه داده اي Database ليست ميشود؟ هنگاميکه robot ها و يا يک برنامه گردشگر ديگر بطور اتوماتيک گردش خود را شروع ميکند، به محض يافتن يک سايت جديد در وب ابتدا به سراغ فايلي بنام robots.txt ميگردد، سپس مطالب قسمت HEAD و بدنبال آن اطلاعات نوشته شده در متاتگها را جمع آوري ميکند و پس از يک پردازش دقيق با استفاده از يک الگوريتم مخصوص، صفحات را در پايگاه داده اي خود ذخيره و ليست ميکند. فايل robots.txt چيست؟ robots.txt يک فايل متني است که اين فايل را ميتوانيد در سرور و در دايرکتوري وب سايت خود قرار دهيد تا تنظيمات گردش برنامه هاي گردشگر را در آن کنترل کنيد و در حقيقت زحمت اين برنامه ها را کم کنيد. اما اطلاعاتي که در اين فايل بايد قرار گيرد الگوي خاصي دارد که در زير به آن اشاره شده و در آن سطح دسترسي گردشگرها را با ذکر نامشان معين ميکنيد، User-agent: Disallow: اين دو خط را در فايل متني وارد و آنرا با پسوند txt ذخيره ميکنيد. User-agent به برنامه هايي ميگويند که براي وب ساخته ميشوند تا در اختيار کاربران قرار گيرند و گردشگر ها مانند robot ها و crawler ها از اين قبيل هستند و هر سايت جستجو يک گردشگر با اسم مشخص دارد، مانند سايت گوگل که بنام Googlebot معروف است. براي تعيين سطح دسترسي بايد نام برنامه را در خط اول بنويسيد و در خط دوم هم نام فايلها يا دايرکتوري هاييکه نبايد ليست شوند را مينويسيد. اگر بطور کل نميخواهيد سايت شما ليست شود طبق دستور زير عمل ميکنيد: User-agent: * Disallow: / نقش متاتگها meta tags براي موتورهاي جستجو شما درباره ساخت متاتگها در بخش HEAD مطالبي را آموختيد. در اين قسمت نقش آنها را در search engine ها ياد خواهيد گرفت. گردشگرها بيشتر به متاتگها حساس هستند تا اطلاعاتي را در اختيارشان قرار دهند. اطلاعاتي را که شما در متاتگها بايد وارد کنيد به شرح زير ميباشند: معرفي کلمات کليدي keywords توصيف Description کوتاهي درباره سايت که در بعضي از سايتهاي جستجو عمل نميکند. معرفي برنامه سازنده سايت که به اسم Generator معروف است. معرفي سازنده و طراح سايت که بنام Author معروف است. مشخص کردن کپي رايت . تعيين تاريخ انقضا صفحات اگر مرتب در حال تغيير هستند. هر موتور جستجوگر اصول و قوانين خاص خود را براي ليست و ذخيره کردن ( index ) سايت شما و تعيين رتبه آن ( Page Ranking ) دارد که متا تگها در اين مورد نقش اساسي دارند و شما در انتخاب و تعيين آنها بايد بسيار دقت کنيد. بطور مثال بکار بردن کلماتيکه در متا تگها به عنوان keyword انتخاب نموده ايد در متن داخل همان صفحه در رتبه بنديpage ranking صفحه بسيار موثر خواهد بود. منظور از رتبه بندي( Page Ranking ) چيست؟ اگر شما داخل يکي از سايتهاي جستجو مانند گوگل بدنبال کلمه اي گشته باشيد متوجه ميشويد که بعضي از سايتها در همان صفحه هاي اول هستند ولي بقيه در صفحه هاي آخر، که اين ترتيب بر اساس رتبه بندي يک سايت است که آن سايت در ابتدا نشان داده شود يا در آخر ليست باشد. اگر اصول و قوانين رتبه بندي يک موتور جستجو را رعايت کنيد ، سايت شما هم بعد از مدتي در صفحات ابتدايي نمايش داده خواهد شد. در بخش بعدي مطالبي را در مورد بهترين و معروفترين سايت جستجو يعني گوگل جمع آوري کردیم که براي ثبت و رتبه بندي سايت شما بسيار مفيد است.
