برنامه و نرم افزارهای لازم برای کار با html شاید حقیقتا برای کار با کدهای html نیاز به هیچ برنامه ایی نداشته باشید و فقط داشتن یک ادیتور ساده مثل Notepad (که در ویندوز موجود است) کافی باشد. ولی من خودم ترجیح میدم کدهای html را در برنامه FrontPage که جزء مجموعه برنامه های آفیس (office) است بنویسم و یا از نرم افزار Macromedia Dreamweaver استفاده کنم. بنابراین و قبل از شروع اگر مطلبی یا پیشنهادی دارید مطرح کنید.
پاسخ : آموزش HTML به زبان ساده (گام به گام) آموزش HTML برای آموزش html فقط نیاز به ادیتور text (متن) داریم که بهترینشون همون Notepad هستش چون هدف از ایجاد و طراحی html همین بوده که کدها به صورت text باشه. البته برای افزایش سرعت عمل که بشه نتایج رو سریع دید، بلد بودن Macromedia Dreamweaver یا Microsoft FrontPage خوبه ولی صددرصد ضروری نیست. html چیست؟ هر صفحه وب از سه جزء مهم تشکیل شده: 1- محتویات متن یا همان نوشته ها 2- رفرنسها (References) مثل لینک ها، تصاویر، عکس ها و حتی انیمیشن ها و فیلم ها 3- علائم دستوراتی هستند که نحوه نمایش متن و رفرنس ها را مشخص می کنند. بنابراین به یک نکته جالب رسیدیم. همه صفحات وب فقط از متن تشکیل شده (چون رفرنس ها که فقط نمایش داده می شوند و مثلا یک فایل یا همان رفرنس مستقل هستند) بنابراین همه کامپیوترها با هر برنامه و سیستم عاملی می تواند صفحات را خوانده و نشان دهد. پس این جهانی شدن وب را ضمانت می کند به طور خلاصه بحث ما در مورد علائم خواهد بود که نحوه نمایش را نشان می دهد.
پاسخ : آموزش HTML به زبان ساده (گام به گام) فرمت کلی يک فايل HTML: در فرمت ساده ، يک فايل HTML از دو بخش Body و Head ،تشکيل می شود. شکل ساده يک فايلHTML به صورت زير است: کد: <HTML> <HEAD> <TITLE> test page1</TITLE> <HEAD/> <BODY> This is a test. <BODY/> <HTML/> یادگیری هر زبان مستلزم تمرین است. پیشنهاد می کنم همین متن را در Notepad نوشته و آن را به صورت فایلی با نام test1.html در کامپیوتر خود ذخیره کنید. حالا به محلی که فایل را ذخیره کرده اید رفته و این فایل را با اینترنت اکسپلورر خود باز کنید.. صفحه ایی سفید مشاهده خواهید کرد که در بالای آن (سمت چپ) پیغام This is test با فونت پیش فرض (مشکی) نمایش داده شده است. اگر در نوار پایین اینترنت اکسپلورر خود دقت کنید نام صفحه که test page1 است را هم خواهید خواند. این اولین صفحه وب شماست. به دنیای وب و HTML خوش آمدید. تذکر1: می توانید همین متن را در فرانت پیج هم نوشته و اجرا کنید. تذکر 2: نام فایل باید دقیقا به همین صورت test1.html و یا به صورت test1.htm کامل نوشته شده و در کامپیوتر ذخیره شود.
پاسخ : آموزش HTML به زبان ساده (گام به گام) متاتگ و HEAD در صفحات وب به علائمی مثل <HTML> ، <HEAD> ، <TITLE> و <BODY> تگ (tag) یا برچسب گویند. در اینجا چهار برچسب معرفی شد. برچسب های معرفی شده همه دارای پایان هستند یعنی پایان آنها باید معرفی شوند که با علامت / در قبل و یا بعد از نام برچسب آورده می شوند. بعضی برچسب ها ممکن است پایان نداشته باشند. کمی دقیق تر بدون آنکه وارد جزئیات بیشتر شویم. فرض کنید به دلیل استاندارد سازی HTML و به دلیل اینکه متن های نوشته شده ما برای مرورگرها شناخته شده باشد و مرورگر ما (مثل اینترنت اکسپلورر) بداند که متن ما از چه استانداردی تبعیت می کند. کد زیر را در آغاز فایل HTML خود قرار دهید کد: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> این کد ساختار سند html ما را مشخص می کند. کدهای صفحه html می تواند به صورت حروف بزرگ یا کوچک نوشته شوند. DOCTYPE در خط اول باید با حروف بزرگ انگلیسی نوشته شود.
پاسخ : آموزش HTML به زبان ساده (گام به گام) معرفی تگ یا برچسب های استفاده شده: تگ HTML <HTML> ... <HTML/> این تگ ها مشخص می کند که فایل ما یک فایل <HTML> است تمام متن فایل باید در داخل این دو تگ نوشته شود. تگ HEAD <HEAD> ... <HEAD/> در داخل HEAD از برچسب هایی مثل TITLE و META استفاده می شود. کد: <HEAD> <TITLE> ......</TITLE> <META > .......</META > <HEAD/> TITLE برای تعيين عنوان صفحه وب (عنوانی که درStatus Bar اینترنت اکسپلورر ديده می شود)
پاسخ : آموزش HTML به زبان ساده (گام به گام) HTML META متاتگ چیست؟ این سوال ، یکی از سوالاتی است که همیشه برای مبتدیانی که آشنایی ابتدایی با صفحات وب پیدا می کنند. پیش می آید. متا تگ ها در واقع دستورات (تگهایی) هستند که صفحات وب ما را به دنیای خارج معرفی می کنند و صفحات وب ما از طریق این تگ به موتورهای جستجوگر معرفی می شود. در برنامه ایی که قبلا دادم کدهایی را به صورت زیر اضافه می کنیم. پس مثال ما به صورت زیر در می آید: کد: <HEAD> <meta http-equiv="Content-Language" content="fa"> <title>میکرورایانه</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="آموزش رایانه و تجارت الکترونیک ، قطعات و اجزا جانبی کامپیوتر ، نرم افزار و اینترنت"> <meta name="keywords" content="سایت آموزش رایانه تجارت الکترونیک قطعات اجزا جانبی کامپیوتر سخت افزار نرم افزار اینترنت"> </HEAD> کاربردهای آن: http-equiv این متاتگ باعث می شود که اطلاعات اضافی همراه صفحه وب درخواستی شما درhttp header به مرورگر ارسال شود. در این مثال اطلاع داده می شود که صفحات وب ما دارای کاراکترهایی با کدینک utf-8 است. این تگ می تواند تاریخ انقضای صفحه وب را هم تعیین کند . یعنی اگر کسی صفحه وب شما را قبلا یک بار دیده باشد وقتی این زمان فرا برسد و او دوباره آدرس این سایت را در مرورگرش بزند این صفحه از داخل cache لود نخواهد شد بلکه از سرور دانلود می شود . NAME تگ از نوع name در مثال بالا را یه نگاه کنید . در اولین خط مقدار name مساوی با description است یعنی در مورد مطالب سایت شرح می دهد. با این تگ توضیحات سایت شما به موتور های جستجوگر معرفی می شود. اگر این تگ را به وب سایت یا وبلاگ خود اضافه کنید و کسی در گوگل به سایت شما برخورد کند توضیحات داخل این متاتگ را خواهد دید . یعنی گوگل دقیقا از این متاتگ برای ذخیره اطلاعات درباره سایت شما استفاده می کند. پس بکاربردن این متا تگ ها خیلی مهم خواهد بود. در خط دوم تگ از نوع name مساوی با keywords است . یعنی این متاتگ کلمات کلیدی سایت را به موتور های جستجوگر معرفی می کند. متاتگ ها را باید داخل تگHEAD نوشت . در صفحه هایی که از چند فریم درست شده باید در تمام صفحات متاتگ را نوشت.
پاسخ : آموزش HTML به زبان ساده (گام به گام) تگ BODY حالا وارد بحث بدنه اصلی کدهای صفحه وب می شویم. <body> ... </body> تمامی دستورات HTML و عناصر تشکیل دهنده صفحه وب باید بین این تگ قرار بگیرند. اگر به اولین مثال که قبلا ذکر شد، دقت کنید متنی که در صفحه وب نمایش داده می شود. (This is a test.) در بین این دو قرار گرفته است. ممکن است قبل از آنکه نماد < در تگ body بسته شود صفت های صفحه وب (Attributeها) نیز در داخل تگ نوشته شود: مثال2) دستورات زیر را با یک ادیتور مثل Notepad یا با برنامه FrontPage بنویسید و به همان روشی که در قبل ذکر شد در کامپیوترتون با اسم مشخص و گستره فایل (html) یا (htm) با کدینک utf-8 ذخیره کنید (یعنی وقتی با Notepad می خواهید آن را ذخیره کنید save as را کلیک کرده و بعد Encoding را utf-8 و اسم فایل را مثلا test.htm نامگذاری کنید و بعد save را کلیک کنید) و بعد در فولدر مربوطه رفته و آن را با اینترنت اکسپلورر باز کنید (اجرا کنید) : کد: <HEAD> <meta http-equiv="Content-Language" content="fa"> <title>میکرورایانه</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="آموزش رایانه و تجارت الکترونیک ، قطعات و اجزا جانبی کامپیوتر ، نرم افزار و اینترنت"> <meta name="keywords" content="سایت آموزش رایانه تجارت الکترونیک قطعات اجزا جانبی کامپیوتر سخت افزار نرم افزار اینترنت"> </HEAD> <BODY bottomMargin=0 bgColor=#00FFFF leftMargin=20 topMargin=20 rightMargin=0 text = #FF5B48> <b>this is a test. </b> <BODY/> حتما این مثال را انجام دهید و گرنه مطلب را خوب متوجه نخواهید شد. اگر مثال را انجام دهید تغییرات رنگی را متوجه خواهید شد. بتدریج توضیح خواهم داد که چی نوشتم. فعلا فقط به این کد توجه کنید: کد: <BODY bgcolor = “…” background = “…” topmargin = “…” leftmargin = “…” text =”…” link = “…” alink = “…” vlink = “…” > [/code] در این دستور (که در مثال بالا هم آمد) داریم: کد: bgcolor = “رنگ پس زمينه صفحه” background = “ آدرس عکسی که به عنوان پس زمينه در صفحه وب قرار می گیرد “ topmargin = “یک فضای خالی در بالای صفحه بر حسب پيکسل ايجاد می کند” leftmargin = “یک فضای خالی در سمت چپ صفحه بر حسب پيکسل ايجاد می کند” text = “رنگ متن را مشخص می کند” link = “رنگ لینک های موجود در صفحه وب را مشخص می کند” alink = “رنگ لینکهای فعال در صفحه وب را مشخص می کند” (active link) vlink = “رنگ لینکهایی که قبلا کاربر مشاهده کرده را تعیین می کند” (visited link) اگر هر کدام از اینها را تعیین نکنید به صورت پیش فرض تعیین شده در مروگر(اینترنت اکسپلورر) در نظر خواهد گرفت. می توان هیچ کدام را ننوشت. مجددا اولین مثال را نگاه کنید. کلا در برنامه HTML و در نوشتن تگها بزرگ و يا کوچک نوشتن حروف هيچ تاثيری ندارد. این مثال را حتما انجام دهید تا در مورد رنگها و کدها بیشتر توضیح بدهم.
پاسخ : آموزش HTML به زبان ساده (گام به گام) رنگها در صفحات وب در صفحات وب هر رنگی از ترکیب سه رنگ اصلی به وجود می آید که حتما باید به ترتیب نوشته شوند. این رنگها به ترتیب نوشته شدن عبارتند از : اول Red و بعد Green و سرانجام Blue . یعنی همان سه رنگ قرمز و سبز و آبی. برای هر رنگی یک کد دو رقمی هگزا دسیمال تخصیص داده می شود. هگزا دسیمال یعنی عدد درمینای 16. اعداد در مبنای 16 دارای 16 علامت یا نماد هستند: 0 و 1 و 2 و 3 و4 و5 و6 و 7 و8 و9 وA وB وC وD وE وF (بزرگی و کوچکی حروف انگلیسی مهم نیست) البته اگر از این کدگذاری زیاد سر در نیاوردید چندان مهم نیست. ولی چون سیستم کدینک ساده ایی را جایگزین کدینک مینای دو (دودویی یا همان باینری) در کامپیوتر می کند کاربرد زیادی در کامپیوتر دارد برمی گردیم اصل مطلب: هر رنگی در صفخات وب از ترکیب این سه رنگ به وجود می آید که وزن هر رنگ با عددی بین 0 تا 255 مشخص می شود (در مبنای 16 عددی بین 00 تا FF خواهد بود) . مثلا کد رنگ قرمز FF0000 خواهد بود چون رنگهای آبی و سبز ندارد یا مثلا کد رنگ زرد FFFF00 خواهد بود. چون از ترکیب دو رنگ قرمز و سبز تشکیل شده و رنگ آبی ندارد. تمرین حالا برای بهتر فهمیدن رنگها ، برنامه فرانت پیج را اجرا کنید و در داخل آن یک متن بنویسید وهمه آن متن را با موس انتخاب کرده و رنگ دلخواه را از منوی رنگها انتخاب کنید. بعد در همان منو بر روی More Colors کلیک کنید. ارزش یا همان کد رنگ (Value) در بالای پنجره ایی که ظاهر می شود ذکر شده که به ترتیب همان رنگهایی است که ذکر کردم. اگر روی Custom کلیک کنید درمنوی پنجره جدیدی که ظاهر می شود مقادیر ترکیبات سه رنگ اصلی رنگ انتخاب شده در سیستم دهدهی آمده که با تغییرهریک آنها رنگ نهایی (ترکیب شده از سه رنگ مذکور) تغییر خواهد کرد. به این ترتیب با این تمرین می توانید کد انواع ترکیبات رنگ را با سه رنگ اصلی به دست بیاورید. مثال3) دستورات زیر را به همان روشی که قبلا ذکر شد در notepad نوشته و با مرورگر خود اجرا کنید کد: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Language" content="fa"> <title>میکرورایانه</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="description" content="آموزش طراحی صفحات وب"> <meta name="keywords" content="آموزش رایانه تجارت الکترونیک قطعات اجزا جانبی کامپیوتر سخت افزار نرم افزار اینترنت"> </HEAD> <BODY bgcolor="#808000"> <b> <font color="#00FF00">this </font><font color="#C0C0C0">is a test</font> </span> </b> </BODY> </HTML> در این مثال bgcolor رنگ زمینه صفحه و font color رنگ فونت هاست. هر نوشته ایی بین دو تگ <b> .... </b> قرار گیرد به صورت درشت (bold) ظاهر خواهد شد. حالا در این مثال با تغییرکد رنگها و با تغییر محل تگ های </font> و </b> تغییرات را در نوشته this is a test بررسی کنید.
پاسخ : آموزش HTML به زبان ساده (گام به گام) تفاوت های HTML با XHTML اگر چه می توان XHTML را نوع پیشرفته HTML دانست ولی از برخی جهان با هم تفاوت دارند. المان ها، خصیصه ها و مقادیری که در زبان های HTML و XHTML بکار می روند دقیقا یکسان هستند. تفاوت این دو زبان در طرز نوشتن دستورات آنهاست. از نظر HTML فرقی نمی کند که شما از تگ های html، head و body و DOCTYPE استفاده کنید؛ ولی نوشتن این المان ها در XHTML ضروری است. HTML به شما اجازه می دهد که بعضی از تگ های بسته را حذف کنید؛ ولی XHTML چنین نیست و حتی المان های خالی نیز به تگ های بسته نیاز دارند. برای این که سازگاری با برنامه های مرورگر تا حد امکان حفظ شود، یک Space(فضای خالی) و یک اسلش(/) به المان های خالی اضافه کنید. مانند: کد: <img src="logo.gif" /> و برای المان هایی که خالی نیستند، حتماً یک تگ بسته مستقل بنویسید. مانند: کد: <p> code </p> دقت داشته باشید که وجود این اسلش در المان های خالی از نظر HTML صحیح نیست، ولی در حال حاضر تمامی مرورگر ها از آن صرف نظر می کنند. HTML به شما اجازه می دهد که مقادیر خصیصه ها را بدون کوتیشن بنویسید (البته این مقادیر فقط شامل حروف، اعداد و چهار سمبل - ، . ، _ و : می باشد). حذف کوتیشن، XHTML را دچار کابوس می کند و در نتیجه خطا رخ می دهد. HTML نسبت به بزرگی و کوچکی حروف حساس نیست؛ ولی XHTML چنین است. در XHTML باید تمامی المان ها، خصیصه ها و مقادیر از پیش تعریف شده ی آنها را باید با حروف کوچک بنویسید. اگر مقدار خصیصه ای با نام آن یکسان باشد، در HTML می توانید از آن صرف نظر کنید. ولی در XHTML باید مقادیر تمام خصیصه ها را به طور صریح مشخص نمایید.
پاسخ : آموزش HTML به زبان ساده (گام به گام) لیست ها در Html حتما شما هم دیده اید که خیلی از صفحات وب فهرست ها و موارد را به صورت لیست های نقطه دار یا شماره دار نشان می دهند. ایجاد این گونه لیستها در HTML کار ساده ایی است. همچنین شما می توانید لیستهای تو در تو نیز ایجاد کنید. لیستها در ایجاد جداول و فصل بندی ها مهم هستند . لیستهای تو رفته با تگهای < ul > و < ul / > مشخص و ایجاد می شوند و لیست های نقطه دار با تگ < li >. توجه داشته باشید که این گونه لیستها توسط همه مرورگرها حمایت نمی شوند و بعضی از مرورگرها آنها را نشان می دهند. تگ < UL > و < UL / > به ترتیب در آغاز و پایان لیست ظاهر می شود. در ابتدای هر خط از تگ < li > استفاده شده که نقطه را به اول لیست اضافه می کند. ممکن است تعداد تگهای ul زیاد باشد برای اینکه بتوانید به سادگی ابتدا و انتهای هر تگ ul را تشخیص دهید در کد نویسی آنها را کمی تو رفته می نویسیم (مثل شکل بالا ) .
