پاسخ : آموزش HTML [h=2]کدهای آماده HTML قرار دادن موتور جستجوی گوگل در وب سایت با وبلاگ[/h] کد زیر به شما این امکان را می دهد ، که لوگو و لینک موتور جستجوی گوگل را بر روی صفحه وبلاگ یا وب سایت خود قرار دهید . برای استفاده کد زیر را کپی کرده و در صفحه وب خود قرار دهید . دقت نمایید که این کد باید در قسمت < body > صفحه قرار بگیرد . [TABLE="class: ex"] [TR] [TD="class: body"] <!-- Search Google --> <form method="get" action="http://www.google.com/search"> <table > <tr> <td> <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_40wht.gif" border="0" alt="Google" align="absmiddle"></a> <input type="text" name="q" size="31" maxlength="255" value=""> <input type="hidden" name="hl" value="en"> <input type="submit" name="btnG" value="Google Search"> </td> </tr> </table> </form> <!-- Search Google --> [/TD] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] [TABLE] [TR] [TD] [/TD] [/TR] [/TABLE] [/TD] [TD="class: header"] خروجی [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]مقدمه و معرفی زبان HTML[/h] معرفی زبان HTML : عبارت HTML مخفف (Hyper Text Markup Language) است . Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند. HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ از هم جدا شده ، که هر کدام دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود . در يک صحفه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول و ... را قرار داد ، که برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند . [HR][/HR] مفهوم تگ های HTML : تگ های HTML برای نشانه گذاری محتويات صفحات به کار می روند و باعث می شوند که مرورگر بتواند تشخيص دهد هر بخش چه نوع عنصری است. هر تگ HTML ، يک بخش ابتدايی و يک بخش انتهايی دارد که هم نام بوده و به صورت استاندارد طبق شکل کلی زير به کار می روند : < تگ انتها / > محتويات < تگ ابتدا > مثال : < label > ..... < /label > تگ ابتدايی مشخص کننده آغاز تگ و تگ پايانی ، مشخص کننده انتهای تگ است . هر تگ HTML ، بايد حتما در ادامه توسط تگ پايانی بسته شود . کليه نوشته ها و تگ های ديگری که در بين تگ ابتدا و پايان نوشته می شوند ، محتويات تگ را تشکيل می دهند . [HR][/HR] خواص تگ های HTML : هر تگ دارای مجموعه از خواص است که ويژگی های مختلف آنها را تعيين می کند . هر يک از اين خواص را می توان در درون تگ ابتدايي معرفی و مقدار دهی کرد . راهنمايي : در ادامه هر يک از تگ های HTML معرفی شده و در صفحه مربوط به آنها خواص مربوطه نيز در جدول خواص مهم قرار داده شده اند . در ستون نام خاصيت نام آن و در ستون نوع خاصيت انواع مقادير قابل قبول برای آن خاصيت تعيين شده است . مثال : برای مثال تگ < table > دارای خاصيتی به نام Border است ، که به دور جدول کادر يا حاشيه ايجاد می کند . نحوه تعريف و مقدار دهی آن به صورت زير است : توجه : در هنگام تعريف بايد بين خاصيت و مقدار آن علامت = قرار داده و همچنين مقدارها بايد درون علامت " " قرار بگيرند . < table border = "1" > محتويات < /table > راهنمايی 2 : در بخش آموزش تگ ها سعی شده تا با ارائه مثال های مناسب مطالب توضيحی را در عمل نشان داد . برای اين منظور از جدول Example استفاده شده است ، که اين جدول دارای 2 قسمت است . در قسمت کد ، کد واقعی مورد نياز برای هدف ارائه شده و در قسمت خروجی نيز خروجی کد که به صورت اکتيو توسط مرورگر توليد شده ، نشان داده شده است . توجه : تمام مثال های قسمت آموزش HTML بر طبق استانداردهای نرم افزار Microsoft Visual Studio 2005 طراحی شده و توسط مرورگرهاي مطرح Internet Explorer و FireFox تست شده است . نکات مهم : تگ های HTML نسبت به بزرگ و کوچک بودن حروف حساس نيستند ، يعنی تگ های < b > با < B > برابر هستند . می توان يک تگ را در تگ ابتدايي نيز بست . برای اين کار از يک علامت / بعد از نام تگ و خواص مورد نظر تعريف شده استفاده می کنيم . در اين حالت نمی توان متن يا تگ ديگری را به عنوان محتويات برای آن تگ در نظر گرفت . توجه کاربرد اين روش در مورد تگ هايي مثل < table > , < td > , < tr > و ... امکان پذير نيست . Example : < br / > < input type = "text" name ="family" ... / > هر تگ HTML محتویات درون خود را تحت تاثير قرار می دهد . برای مثال تگ < b > برای توپر کردن ( bold ) نوشته به کار می رود و چنانچه متنی بين تگ باز و بسته < b > قرار بگيرد ، توپر می شود .
پاسخ : آموزش HTML [h=2]خصوصيات استاندارد تگ های HTML[/h] در اين قسمت خصوصيات استاندارد تگ های HTML معرفی شده اند . اين خصوصيات در اکثر تگ های HTML مشترک بوده و دارای کاربرد يکسانی هستند . اين خصوصيات به دليل مشترک بودن ، فقط در اين قسمت ذکر شده و از تکرار آنها در صفحات ديگر خودداری شده است . خصوصيات اصلی نکته : اين خاصيت ها در تگ های base , head , html , meta , param , style , title و script وجود ندارد . [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] class[/TD] [TD="class: prbody"] نام کلاس عنصر [/TD] [TD="class: prbody"] مشخص کننده کلاس تگ در کد نويسی برنامه است . اين کلاس در کدنويسی CSS و زبان های اسکريپتی کاربرد دارد . [/TD] [/TR] [TR] [TD="class: prbody"] id[/TD] [TD="class: prbody"] id عنصر [/TD] [TD="class: prbody"] مشخص کننده يک شناسه منحصر به فرد برای تگ در درون سند HTML است . id هر تگ در کدنويسی CSS و زبان های اسکرپيتی کاربرد دارد . توسط id می توان به تگ مورد نظر دست يافت . [/TD] [/TR] [TR] [TD="class: prbody"] style[/TD] [TD="class: prbody"] [/TD] [TD="class: prbody"] يک خاصيت چند مفدارِي است که خصوصيات قالب دهی و اعمال سبک ها ( CSS ) را برای تگ مورد نظر مشخص می کند . [/TD] [/TR] [TR] [TD="class: prbody"] title[/TD] [TD="class: prbody"] text متن [/TD] [TD="class: prbody"] متنی است که به صورت tooltip در يک کادر زرد رنگ ، در هنگام قرار گرفتن موس بر روی عنصر نمايش داده می شود . [/TD] [/TR] [/TABLE] خصوصيات زبان نکته : اين خاصيت ها در تگ های base , br , frame , hr , iframe , param و script وجود ندارد . [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] dir[/TD] [TD="class: prbody"] rtl ltr [/TD] [TD="class: prbody"] تعيين کننده جهت قرار گرفتن نوشته را تعيين می کند ، که يکی از 2 حالت زير را می تواند داشته باشد : ltr : چپ به راست rtl : راست به چپ [/TD] [/TR] [TR] [TD="class: prbody"] language[/TD] [TD="class: prbody"] نام زبان [/TD] [TD="class: prbody"] مشخص کننده زبان برنامه نويسی کد مربوط به تگ است . [/TD] [/TR] [/TABLE] خصوصيات صفحه کليد [TABLE="class: pr, width: 100%"] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] accesskey[/TD] [TD="class: prbody"] کليد میانبر [/TD] [TD="class: prbody"] يک ميانبر صفحه کليد برای دستيابی به عنصر است . [/TD] [/TR] [TR] [TD="class: prbody"] tabindex[/TD] [TD="class: prbody"] عدد number [/TD] [TD="class: prbody"] شماره ترتيبی قرار کرفتن فوکوس صفحه بر روی عنصر مورد نظر را در هنگام فشردن کليد tab مشخص می کند . [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]نمايش کاراکترهای خاص در HTML[/h] بعضی از کاراکترها در زبان HTML دارای معنی خاصی هستند مثل کاراکتر کوچکتر > که به معنای آغاز يک تگ می باشد . اگر بخواهيم در متن صفحات HTML اين نوع کاراکترها را نمايش دهيم ، جهت جلوگيری از تداخل متن با کد صفحه بايد از روش ويژه ای به صورت زير استفاده کنيم : برای نمايش هر کاراکتر از يک واژه مرکب که شامل سه قسمت است استفاده می شود . قسمت اول علامت (&) ، قسمت دوم يک نام از پيش تعيين شده يا علامت # به همراه يک عدد معلوم و قسمت سوم هم علامت ( ; ) است که در پايان قرار می گيرد . برای مثال برای نمايش کاراکتر > بايد بنويسيم : < or < نکته : کليه نام های نمايش کاراکترهای خاص به حروف بزرگ و کوچک حساس هستند . نکته : در زبان HTML ، اگر در هنگام ورود متن بين حروف با فشردن کليد Space Bar فاصله ايجاد کنيد ، در هنگام نمايش در مرورگر اين فاصله ها از بين رفته و حداکثر يک فاصله خالی بين دو واژه نمايش داده می شود . برای افزودن فاصله بين واژه ها بايد از کاراکتر ;nbsp& استفاده کرد که با هر بار وارد کردن اين کاراکتر ، يک فاصله خالی بين دو واژه به وجود می آيد . [TABLE="class: ex"] [TR] [TD="class: prname"] کاراکتر[/TD] [TD="class: prname"] مفهوم کاراکتر[/TD] [TD="class: prname"] نمايش حروفی[/TD] [TD="class: prname"] نمايش عددی[/TD] [/TR] [TR] [TD="class: center"] <[/TD] [TD="class: center"] کوچکتر[/TD] [TD="class: center"] <[/TD] [TD="class: center"] <[/TD] [/TR] [TR] [TD="class: center"] >[/TD] [TD="class: center"] بزرگتر[/TD] [TD="class: center"] >[/TD] [TD="class: center"] >[/TD] [/TR] [TR] [TD="class: center"] &[/TD] [TD="class: center"] علامت " و "[/TD] [TD="class: center"] &[/TD] [TD="class: center"] &[/TD] [/TR] [TR] [TD="class: center"] "[/TD] [TD="class: center"] علامت "[/TD] [TD="class: center"] "[/TD] [TD="class: center"] "[/TD] [/TR] [TR] [TD="class: center"] ¢[/TD] [TD="class: center"] سنت cent [/TD] [TD="class: center"] ¢[/TD] [TD="class: center"] ¢[/TD] [/TR] [TR] [TD="class: center"] £[/TD] [TD="class: center"] پوند pound[/TD] [TD="class: center"] £[/TD] [TD="class: center"] ¥[/TD] [/TR] [TR] [TD="class: center"] §[/TD] [TD="class: center"] [/TD] [TD="class: center"] §[/TD] [TD="class: center"] §[/TD] [/TR] [TR] [TD="class: center"] ©[/TD] [TD="class: center"] علامت کپی رايت[/TD] [TD="class: center"] ©[/TD] [TD="class: center"] ©[/TD] [/TR] [TR] [TD="class: center"] ®[/TD] [TD="class: center"] علامت ثبت شده[/TD] [TD="class: center"] ®[/TD] [TD="class: center"] ®[/TD] [/TR] [TR] [TD="class: center"] ×[/TD] [TD="class: center"] علامت ضرب[/TD] [TD="class: center"] ×[/TD] [TD="class: center"] }[/TD] [/TR] [TR] [TD="class: center"] ÷[/TD] [TD="class: center"] علامت تقسيم[/TD] [TD="class: center"] ÷[/TD] [TD="class: center"] ÷[/TD] [/TR] [/TABLE] [HR][/HR]
پاسخ : آموزش HTML [h=2]تگ های مقدماتی HTML[/h] تگ < html > : محدوده کد صفحه HTML را مشخص می کند و به مرورگر مي فهماند که اين يک صفحه HTML است . فقط کدهاي درون اين محدوده توسط مرورگر اجرا می شود . مثال : در مثال زير بدنه اصلی يک صفحه با تگ < html > مشخص شده است : [TABLE="class: ex, width: 50%"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header, colspan: 2"] کد [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < title > The title of the page < /title > < /head > < body > ... The content of the page ... < /body > < /html > [/TD] [TD="class: body, align: center"] محدوده اصلی صفحه html تگ سر عنوان head تگ عنوان صفحه بدنه اصلی صفحه . . . پايان بدنه اصلی صفحه پايان محدوده اصلی صفحه [/TD] [/TR] [/TABLE] [HR][/HR] تگ < body > : اين تگ بدنه اصلی صفحه HTML را معرفی می کند و شامل کليه محتويات قابل نمايش در صفحه ازقبيل نوشته ها ، عکس ها ، لينک ها و ... است . فقط محتويات اين قسمت توسط مرورگر به عنوان خروجی نمايش داده می شوند . کدهای محتويات خروجی بين تگ باز و بسته < body > تعريف می شوند . [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] alink [/TD] [TD="class: prbody"] نام رنگ rgb(x,x,x) #xxxxxx [/TD] [TD="class: prbody"] مشخص کننده رنگ لينک های فعال در صفحه است . رنگ میتواند به روش های زير تعيين شود : نام رنگ مثل blue يا red . تعيين رنگ به وسيله تابع rgb به صورت زير : ( مقدار رنگ قرمز ، مقدار رنگ سبز ، مقدار رنگ آبی ) rgb اين تابع مقدار 3 رنگ را با هم ترکيب کرده و يک رنگ را ايجاد می کند .که مقدار رنگ توسط عددی بين 0 تا 255 تعيين می شود ، که هر چه عدد بزرگتر باشد ميزان آن رنگ در کل رنگ بيشتر خواهد بود . Example : rgb (10,65,232) نعيين رنگ به صورت عددی ترکيبی در مبنای 16 هگزادسيمال : ميزان رنگ آبی ميزان رنگ سبز ميزان رنگ قرمز # Example : #08FF00 [/TD] [/TR] [TR] [TD="class: prbody"] background [/TD] [TD="class: prbody"] URL نام - مسير فايل [/TD] [TD="class: prbody"] آدرس عکس يا فایلی که به عنوان پس زمينه صفحه مورد استفاده قرار می گيرد را تعيين می کند . [/TD] [/TR] [TR] [TD="class: prbody"] bgcolor [/TD] [TD="class: prbody"] نام رنگ rgb(x,x,x) #xxxxxx [/TD] [TD="class: prbody"] می توان توسط اين خاصيت يک رنگ را به عنوان رنگ پس زمينه صفحه قرار داد . [/TD] [/TR] [TR] [TD="class: prbody"] link [/TD] [TD="class: prbody"] نام رنگ rgb(x,x,x) #xxxxxx [/TD] [TD="class: prbody"] مشخص کننده رنگ کليه لينک های صفحه است . [/TD] [/TR] [TR] [TD="class: prbody"] text [/TD] [TD="class: prbody"] نام رنگ rgb(x,x,x) #xxxxxx [/TD] [TD="class: prbody"] رنگ پيش فرض نوشته های درون صفحه را تعيين می کند که به صورت استاندارد مشکی است . [/TD] [/TR] [TR] [TD="class: prbody"] vlink [/TD] [TD="class: prbody"] نام رنگ rgb(x,x,x) #xxxxxx [/TD] [TD="class: prbody"] رنگ لينک هايی در صفحه که قبلا يکبار کليک شده اند را مشخص می کند و به اين منظور استفاده می شود که کاربر متوجه شود آن لينک را قبلا مشاهده کرده است . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header"] Example [/TD] [/TR] [TR] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < title > The title of the page < /title > < /head > < body > ... The content of the page محتويات قابل نمايش توسط مرورگر ... < /body > < /html > [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]تگ های مقدماتی HTML[/h] تگ < head > : تگ < head > در بر گيرنده ااطلاعات کلی درباره سند وب است که اين اطلاعات Meta-Information به معنای (اطلاعات درباره) ناميده می شود . کليه اطلاعات درون تگ < head > توسط مرورگر نمايش داده نمی شوند .براساس استاندارد HTML فقط تگ های زیر قابل استفاده در بخش head هستند : < base > , < link > , < meta > , < title > , < style > , < script > [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت [/TD] [TD="class: prdes"] شرح [/TD] [/TR] [TR] [TD="class: prbody"] profile [/TD] [TD="class: prbody"] URL مسير [/TD] [TD="class: prbody"] ليستی از آدرس فايل ها يا صفحاتی که در بر گيرنده اطلاعات کلی (meta-information) راجع به محتويات صفحه هستند ، را شامل می شود . [/TD] [/TR] [/TABLE] [HR][/HR] تگ < title > : اين تگ عنوان صفحه را که مرورگر در هنگام باز کردن صفحه در نوار عنوان نمايش می دهد را مشخص می کند . متنی که بين تگ باز وبسته < title > قرار بگيرد عنوان صفحه را تعيين می کند . تگ < title > بايد در قسمت head صفحه قرار بگيرد . عنوان صفحه ارتباطی به نام فايل صفحه ندارد و بهتر است حداکثر تا 15 حرف باشد . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example [/TD] [/TR] [TR] [TD="class: header"] کد [/TD] [/TR] [TR] [TD="class: body"] < html > < head > < title > This is the title of the page عنوان صفحه < /title > < /head > < body > ... < /body > < /html > [/TD] [/TR] [/TABLE] [HR][/HR]
پاسخ : آموزش HTML [h=2]تگ های مقدماتی HTML[/h] تگ <Doctype!> : اين تگ اولين سطر از کد صفحه وب است و به مرورگر نوع و نسخه استفاده شده از زبان برنامه نويسی HTML يا XHTML را اعلام می کند . لازم به ذکر است که هر صفحه فقط می تواند يک نوع Doctype داشته باشد . نکته : تگ < Doctype! > تنها تگی است که تگ انتهايي ندارد و در تگ ابتدايي هم توسط علامت / بسته نمی شود . [h=3] انواع ورژن های قابل استفاده در صفحات وب : 1) HTML : [/h] زبان HTML سه حالت کلی دارد : Strict , Traditional , Frameset کدهای زير بايد در قسمت < Doctype! > جهت استفاده از هر يک از حالت های فوق تايپ شود : [TABLE="class: ex"] [TR] [TD="class: header"] HTML Strict DTD[/TD] [TD="class: prname"] نام[/TD] [/TR] [TR] [TD="class: prbody"] زمانی مورد استفاده قرار می گيرد که طراح بخواهد از شيوه قالب دهی به صفحات (CSS) استفاده نمايد .[/TD] [TD="class: prname"] شرح[/TD] [/TR] [TR] [TD="class: body"] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd" >[/TD] [TD="class: prname"] کد[/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header"] HTML Traditional DTD[/TD] [TD="class: prname"] نام[/TD] [/TR] [TR] [TD="class: prbody"] زمانی مورد استفاده قرار می گيرد که طراح می خواهد از قابليت های جديد HTML استفاده نکند ، زيرا مرورگر بازديد کنندگان سايت ممکن است از شيوه قالب دهی صفحات (CSS) پشتيبانی نکند .[/TD] [TD="class: prname"] شرح[/TD] [/TR] [TR] [TD="class: body"] < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >[/TD] [TD="class: prname"] کد[/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header"] HTML Frameset DTD[/TD] [TD="class: prname"] نام[/TD] [/TR] [TR] [TD="class: prbody"] زمانی مورد استفاده قرار می گيرد که بخواهيم در صفحات از قاب ها (Frames) استفاده کنيم . [/TD] [TD="class: prname"] شرح[/TD] [/TR] [TR] [TD="class: body"] < !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd" >[/TD] [TD="class: prname"] کد[/TD] [/TR] [/TABLE] [HR][/HR] [h=3] 2) XHTML : [/h] زبان XHTML سه حالت کلی دارد : Strict , Traditional , Frameset کدهای زير بايد در قسمت < Doctype! > جهت استفاده از هر يک از حالت های فوق تايپ شود : [TABLE="class: ex"] [TR] [TD="class: header"] XHTML Strict DTD[/TD] [TD="class: prname"] نام[/TD] [/TR] [TR] [TD="class: prbody"] زمانی مورد استفاده قرار می گيرد که طراح بخواهد از شيوه قالب دهی به صفحات (CSS) استفاده نمايد .[/TD] [TD="class: prname"] شرح[/TD] [/TR] [TR] [TD="class: body"] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >[/TD] [TD="class: prname"] کد[/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header"] XHTML Traditional DTD[/TD] [TD="class: prname"] نام[/TD] [/TR] [TR] [TD="class: prbody"] زمانی مورد استفاده قرار می گيرد که طراح می خواهد از قابليت های جديد XHTML استفاده نکند ، زيرا مرورگر بازديد کنندگان سايت ممکن است از شيوه قالب دهی صفحات (CSS) پشتيبانی نکند .[/TD] [TD="class: prname"] شرح[/TD] [/TR] [TR] [TD="class: body"] < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >[/TD] [TD="class: prname"] کد[/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header"] XHTML Frameset DTD [/TD] [TD="class: prname"] نام[/TD] [/TR] [TR] [TD="class: prbody"] زمانی مورد استفاده قرار می گيرد که بخواهيم در صفحات از قاب ها (Frames) استفاده کنيم . [/TD] [TD="class: prname"] شرح[/TD] [/TR] [TR] [TD="class: body"] < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" >[/TD] [TD="class: prname"] کد[/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]تگ های مقدماتی HTML[/h] تگ < meta > : اين تگ اطلاعات کلی درباره مطالب درون صفحه وب ، توضيحات ضروری و واژه های کليدی مرتبط با موضوع صفحه جهت استفاده موتورهای جستجو را شامل می شود . چيدمان مناسب و استفاده از کليد واژه های مرتبط به موضوع صفحه ، باعث بهتر نمايش داده شدن صفحه و سايت در قسمت جستجوی موتورهای جستجو می شود . [h=3]- تعيين کليدواژه ها برای موتورهای جستجو :[/h] موتورهای جستجو ، هنگام جستجو برای يافتن مطالب در مورد يک موضوع خاص ، آن مطلب را با کليدواژه های تعريف شده در سايت مقايسه کرده و در صورت يکسان بودن ، صفحه وب سايت شما را در ليست نتايج جستجو نمايش می دهند . [TABLE="class: ex"] [TR] [TD] < meta name ="keywords" content="Html,CSS,XML,Java Script,VB Script" /> [/TD] [/TR] [/TABLE] [h=3]- تعيين يک توضيح درباره مطالب صفحه :[/h] [TABLE="class: ex"] [TR] [TD] < meta name ="discription" content="Free web teaching on Html,CSS,XML,Java Script and VB script" /> [/TD] [/TR] [/TABLE] [h=3]- تعيين آخرين زمان بازبينی و به روز کردن صفحه :[/h] [TABLE="class: ex"] [TR] [TD] < meta name ="rivised" content="6/11/07" /> [/TD] [/TR] [/TABLE] [h=3]-تعيين زمان refresh شدن صفحه برای هر 5 ثانيه يکبار :[/h] [TABLE="class: ex"] [TR] [TD] < meta http - equiv ="refresh" content="5" /> [/TD] [/TR] [/TABLE] [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] content[/TD] [TD="class: prbody"] متن Text[/TD] [TD="class: prbody"] اطلاعات مربوط به خاصيت تعيين شده در قسمت name يا http-equiv را نگهداری می کند . [/TD] [/TR] [TR] [TD="class: prbody"] http - equiv[/TD] [TD="class: prbody"] content-type[/TD] [TD="class: prbody"] اطلاعات درون content خود را به سرور اتقال می دهد . [/TD] [/TR] [TR] [TD="class: prbody"] name[/TD] [TD="class: prbody"] auther description keywords generator revised others[/TD] [TD="class: prbody"] اطلاعات درون content خود را به نام تعيين شده ارتباط می دهد که می تواند يکی از حالت های زير را داشته باشد : - auther : نام نويسنده یا گروه نويسندگان و طراحان صفحه وب را مشخص می کند . - description : توضيح مختصری راجع به محتويات درون صفحه ارائه می دهد . - keywords : کليدواژه های مورد استفاده موتورهای جستجو را تعيين می کند . - generator : مشخصاتی راجع به نرم افزاری که صفحه با آن طراحی و توليد شده است را ارائه می دهد . - revised : برای اعمال آخرين تاريخ به روز رسانی سايت استفاده می شود . - others : برای ذرج ساير اطلاعات مورد نظر استفاده می شود . [/TD] [/TR] [TR] [TD="class: prbody"] scheme[/TD] [TD="class: prbody"] متن Text[/TD] [TD="class: prbody"] قالبی را برای تفسير و اجرای اطلاعات درون خاصيت content مشخص میکند . [/TD] [/TR] [/TABLE] [HR][/HR]
پاسخ : آموزش HTML [h=2]تگ های مقدماتی HTML[/h] تگ توضيح <!-- ... --> : از اين تگ برای وارد کردن توضيحات درون بخش کدنويسی صفحه وب استفاده می شود . محتویات درون اين تگ به طور کامل توسط مرورگر ناديده گرفته شده و بروی صفحه نمايش داده نمی شوند . از توضيحات می توان برای تشريح کدهای صفحه برای افراد ديگر و يا علامت گذاری آنها برای فهم بهتر و ويرايش در آينده استفاده کرد . نکته : از اين تگ همچنين می توان برای مخفی کردن اسکريپت ها از ديد مرورگرهای قديمی که امکان اجرای اسکريپت ها را ندارند، نيز استفاده کرد . مرورگرهای جديد به طور هوشمند محتويات درون اين نوع تگ ها را بررسی کرده و چنانچه حاوی کدهای اسکرپت باشند آنها را اجرا کرده و در غير اين صورت آنها را نمايش نمی دهند . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < !-- This text will not display -- > < p > This text will display < /p >[/TD] [TD="class: body"] This text will display [/TD] [/TR] [/TABLE] [HR][/HR] تگ < base > : اين تگ يک آدرس پايه برای کليه لينک های موجود در صفحه تعيين می کند . مثال : فرض کنيد که آدرس يک عکس در صفحه به صورت زير است : < img src="http://www.DeveloperStudio.ir/images/smile.gif" / > در صورتی که تگ < base > در قسمت head به صورت زير وارد شود : < head > < base href="http://www.DeveloperStudio.ir/images/" > < /head > در هنگام وارد کردن عکس فوق در صفحه ، می توان برای وارد کردن آدرس عکس فقط ادامه مقدار آدرس عکس را در تگ < img > به صورت زير وارد کرد : < img src="smile.gif" /> [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] href[/TD] [TD="class: prbody"] URL[/TD] [TD="class: prbody"] مشخص کننده آدرس پيش فرض برای کليه لينک های صفحه است . [/TD] [/TR] [TR] [TD="class: prbody"] target[/TD] [TD="class: prbody"] blank self parent top[/TD] [TD="class: prbody"] مقصد باز شدن پنجره کليه لينک های صفحه را تعيين می کند .چنانچه درون تگ يک لينک ، مقدار اين خاصيت به صورت جدا تعيين شود اين قاعده برای آن لينک زير پا گذاشته می شود . اين خاصيت میتواند يکی از مقادير زير را داشته باشد : - blank : تمام لينک ها در يک پنجره جديد باز خواهند شد . - self : تمام لينک ها در همان پنجره يا قابی که کليک شده اند باز خواهند شد . -parent : تمام لينک ها در قاب اصلی يا مادر باز خواهند شد . -top : تمام لينک ها در همان پنجره ای که کليک شده اند به طور کامل باز خواهند شد . [/TD] [/TR] [/TABLE]
پاسخ : آموزش HTML [h=2]تگ های قالب بندی متن[/h] تگ < p > : برای ايجاد يک پاراگراف جديد در صفحه به کار می رود . هر متنی که در بين تگ باز و بسته < p > قرار بگيرد ، محتويات آن پاراگراف را تشکيل می دهد . با ايجاد يک پاراگراف جديد ، نوشته به ابتدای خط بعدی انتقال می يابد . [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] align[/TD] [TD="class: prbody"] left right center justify[/TD] [TD="class: prbody"] تراز بندی افقی نوشته را در پاراگراف تعيين می کند ، که می تولند يکی از حالت های زير را داشته باشد : -left : نوشته را از سمت چپ تراز می کند . -right : نوشته را از سمت راست تراز می کند . -center : نوشته در وسط صفحه يا خانه جدول تراز می شود . -justify : نوشته به اندازه ای که کل عرض صفحه يا خانه جدول را پر کند ، کش می آيد . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < p > This is a sample paragraph < /p > < p > This is another paragraph < /p >[/TD] [TD="class: body"] This is a sample paragraph This is another paragraph [/TD] [/TR] [/TABLE] [HR][/HR] تگ < h1 > - < h6 > : اين تگ معمولا برای ايجاد تيترها و عنوان ها مورد استفاده قرار می گيرد . متنی که قرار است به عنوان تيتر نمايش داده شود ، بین تگ باز و بسته قرار می گيرد . < h1 > بزرگترين سایز نوشته را ارائه داده و با بزرگتر شدن عدد بعد از h ، سايز نوشته آن کاهش می يابد و < h6 > کوچکترين سايز نوشته را ارائه می دهد . [TABLE="class: pr"] [TR] [TD="class: header, colspan: 3"] خواص مهم [/TD] [/TR] [TR] [TD="class: prname"] نام خاصيت [/TD] [TD="class: prname"] نوع خاصيت[/TD] [TD="class: prdes"] شرح[/TD] [/TR] [TR] [TD="class: prbody"] align[/TD] [TD="class: prbody"] left right center justify[/TD] [TD="class: prbody"] تراز بندی افقی نوشته را برای متن عنوان تعيين می کند که می تولند يکی از حالت های زير را داشته باشد : -left : نوشته را از سمت چپ تراز می کند . -right : نوشته را از سمت راست تراز می کند . -center : نوشته در وسط صفحه يا خانه جدول تراز می شود . -justify : نوشته به اندازه ای که کل عرض صفحه يا خانه جدول را پر کند ، کش می آيد . [/TD] [/TR] [/TABLE] [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < h1 > This is header 1 < /h1 > < h2 > This is header 2 < /h2 > < h3 > This is header 3 < /h3 > < h4 > This is header 4< < /h4 > < h5 > This is header 5 < /h5 > < h6 > This is header 6 < /h6 > [/TD] [TD="class: body"] [h=1]This is header 1[/h] [h=2]This is header 2[/h] [h=3]This is header 3[/h] [h=4]This is header 4[/h] [h=5]This is header 5[/h] [h=6]This is header 6[/h] [/TD] [/TR] [/TABLE] [HR][/HR] تگ < br > : به کاربردن اين تگ باعث ايجاد يک خط جديد و انتقال نوشته به اول سطر پايينی می شود . همچنين به وسيله آن می توان يک خط خالی ايجاد کرد . نکته : تگ < br > دارای تگ پايانی نيست و ترکيب < br > ... < /br > غلط است . اين تگ بايد به وسيله يک علامت / در درون تگ ابتدايی بسته شود . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی[/TD] [/TR] [TR] [TD="class: body"] < p > My name is : < br / > Mehrdad < /p >[/TD] [TD="class: body"] My name is : Mehradad [/TD] [/TR] [/TABLE] [HR][/HR] تگ < hr> : به کاربردن اين تگ باعث ايجاد يک خط افقی درون صفحه می شود ، که پهنای آن همواره کمی کمتر از عنصر در برگيرنده آن (مثل خانه جدول يا صفحه) است . به طور مثال در بالای تيتر تگ < hr > ، يک خط افقی قرار داده ايم . نکته : اين تگ نيز همانند تگ < br > دارای تگ پايانی نيست و بايد در تگ ابتدايي بسته شود . [TABLE="class: ex"] [TR] [TD="class: header, colspan: 2"] Example[/TD] [/TR] [TR] [TD="class: header"] کد[/TD] [TD="class: header"] خروجی [/TD] [/TR] [TR] [TD="class: body"] This is a line < hr / > ok![/TD] [TD="class: body"] This is a line[HR][/HR] ok! [/TD] [/TR] [/TABLE]
