به پورتال آموزش HTML در سایت Developer1 خوش آمدید . در بخش آموزش HTML ، ما به معرفی و آموزش زبان استاندارد طراحی صفحات وب می پردازيم . در اين قسمت کاربرد ، نحوه کد نويسی ، خواص و ساير اطلاعات مورد نياز در مورد تگ های پر کاربرد 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]
پاسخ : آموزش 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] تگ < 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]
پاسخ : آموزش 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]
پاسخ : آموزش 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]
پاسخ : آموزش 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]
پاسخ : آموزش 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]
پاسخ : آموزش HTML [h=2]تگ های قالب بندی متن[/h] تگ < b > : باعث توپر شدن متنی که درون تگ باز و بسته <b> قرار بگيرد می شود . [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"] < b > This is Bold Text < /b >[/TD] [TD="class: body"] This is Bold Text[/TD] [/TR] [/TABLE] [HR][/HR] تگ < u > : باعث می شود تا متنی که بين تگ باز و بسته <u> قرار بگيرد ، به صورت خط زير دار نمايش داده شود . [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"] < u > This is underline Text < /u >[/TD] [TD="class: body"] This is underline Text[/TD] [/TR] [/TABLE] [HR][/HR] تگ < em > , < i > : باعث می شود تا متن درون آن به صورت کج (italic) نماِش داده شود . [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"] < i > This is italic Text < /i > < em > This is italic Text < /em > [/TD] [TD="class: body"] This is italic Text This is italic Text [/TD] [/TR] [/TABLE] [HR][/HR] تگ < big > : اين تگ باعث نمايش بزرگتر محتويات درون آن نسبت به متن خطوط همجوار می شود . [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"] My name is < big > Mehrdad < /big > [/TD] [TD="class: body"] My name is Mehrdad [/TD] [/TR] [/TABLE] [HR][/HR] تگ < small > : اين تگ باعث کوچکتر نمايش دادن محتويات درون آن نسبت به متن خطوط همجوار در صفحه می شود . [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"] My name is < small > Mehrdad < /small >[/TD] [TD="class: body"] My name is Mehrdad[/TD] [/TR] [/TABLE] [HR][/HR] تگ < strong > : اين تگ باعث نمايش توپر و بزرگتر محتويات درون خود نسبت به متن خطوط همجوار آن می شود . [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"] My name is < strong > Mehrdad < /strong >[/TD] [TD="class: body"] My name is Mehrdad[/TD] [/TR] [/TABLE] [HR][/HR] تگ < cite > : اين تگ باعث نمايش محتويات درون خود به صورت کج و متمايز نسبت به متن خطوط همجوار آن می شود . [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"] My name is < cite > Mehradad < /cite >[/TD] [TD="class: body"] My name is Mehrdad[/TD] [/TR] [/TABLE] [HR][/HR] تگ < address > : از اين تگ معمولا برای نمايش آدرس ها در صفحه های وب استفاده می شود . خصوصيت مهم تگ address اين است که متن درون خود را به صورت کج (italic) نمايش داده و باعث ايجاد يک خط جديد در ابتدا و انتهای آدرس می شود . [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"] < address > Washington DC <br / > New York <br / > 214 Ave. < /address > [/TD] [TD="class: body"] Wshington DC New York 214 Ave. [/TD] [/TR] [/TABLE] [HR][/HR] تگ < pre > : چنانچه در محيط کد نويسی صفحات وب ، بين متن های نوشته شده با کليد space فاصله ايجاد کرده یا با کليد Enter به خط بعدی برويد ، مرورگر اين مسئله را ناديده گرفته ، تمام فاصله ها را از بين برده و حداکثر به اندازه يک کاراکتر فاصله ايجاد می کند . برای جلوگيری از اين مسئله ، از تگ <pre> استفاده می کنيم . اين تگ باعث نمايش متن درون خود با همان شکل و ساختاری که در محيط کد نويسی صفحه وارد شده است ، می شود . همانطور که قبلا ذکر شد ، برای ايجاد فاصله بين حروف از کاراکتر ;nbsp& و رفتن به خط بعدی از تگ < 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"] < pre > This is a pre formatted paragraph it does not have any space or linebrake < / pre > [/TD] [TD="class: body"] this is a pre formatted paragraph it does not have any space or linebrake [/TD] [/TR] [TR] [TD="class: body"] < p > this is a usual paragraph IE doesn't pay attention to line brakes and spaces it shows it like this < /p > [/TD] [TD="class: body"] this is a usual paragraph IE doesn't pay attention to line brakes and spaces it shows it like this [/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]
