معرفی شبکه های ادهاک ( Adhoc ) و مسیریابی در آ نها
مولتی متر به وسیله AVR و مبدل آنالوگ به دیجیتال
ساخت فیبر مدار چاپی به 4 روش
13 ترفند پیرامون تسک بار جدید ویندوز 7
NI Circuit Design Suite 10.1.372 طراحی مدارات الکترونیک
یک ترفند: افزایش سرعت ویندوز!
نرم افزار طراحی مکانیک Solid Edge ST2 32 bit Portable
Blumentals HTMLPad 2010 Pro v10.0.2.118
نوشتن آسان فرمول های ریاضی با Design Science MathType v6
کنترل کامل شبکه های آموزش چند رسانه ای داخلی با نرم افزار قدرتمند Netsupport School Professional 10.50.5

دانلود کتاب الکترونیکی شناخت و معرفی حافظه RAM و آشنایی با ماژول ها و عملیات در حافظه رم
دانلود رایگان کتاب تعمیر و نگهداری موتورهای نسل جدید دیزل
قالب زیبای پاورپوینت برای ارائه مطالب مربوط به جراحی های پزشکی
دانلود کتاب شبیه سازی و کنترل سیستم قلب و عروق و دستگاه تنفسی
الگوریتم *A حل معمای پازل 8 به زبان ++C برای دانشجویان کامپیوتر
کتاب الکترونیکی آموزش نصب و استفاده از نرم افزار Deep Freeze به صورت فارسی همراه با نسخه جدید نرم افزار
تبلیغات سایت : آموزش مجموعه نرم افزارهای برق به صورت فایل PDF , Word و پاورپوینت
تبلیغات سایت : فروش پايان نامه های كارشناسي برق به صورت فایل وورد
کتاب انگلیسی فیزیولوژی گایتون برای دانشجویان مهندسی پزشکی ، پرتو پزشکی و ...
آموزش قدم به قدم HTML (جلسه پنجم)

در صورت تمایل به کسب اطلاع از آخرین مطالب ارسالی در خبرنامه ثبت نام کنید.

ایمیل :

----- >>>  برای مشاهده نرخ تبلیغات اینترنتی و تبلیغات رایگان شما در الکتروبوت کلید نمایید <<<-----

نویسنده : barzegar.74 |

موضوع پست : آموزش HTML |

تاريخ ارسال : 1390/06/14 |

مشاهده : 2573

 

بسم الله الرحمن الرحیم

تذکر:برای جلوگیری از اشتباه یاد گرفتن کد ها آموزش را دانلود کرده و بخوانید!

آموزش HTML (قسمت 5):

تذکر : به دلیل نیازمند بودن آموزش کامل نشانه ها به پیشنیاز از ذکر آن در این جلسه معذوریم.آموزش کامل  CSS نیز بعد از اتمام آموزش کامل HTML ارائه خواهد شد.

Style  های HTML Styles –CSS) HTML):

CSS برای سبک و فرمت بخشیدن به Element ها استفاده می شود.

با CSS به HTML سبک بدهید!:

CSS با HTML4 معرفی شد تا راه بهتری برای سبک بخشیدن به Element های HTML را تأمین کند.

CSS می تواند با روش های زیر ( در مکان های زیر ) به HTML اضافه شود:

 1- درفایل های Style Sheet مجزا (فایل های CSS)

2- در عنصر style در بخش head

3- در نشانه style در یک Element

استفاده و کاربرد نشانه Style :

ساختار:

Style=”Property(خاصیت)”

استفاده از نشانه  (Style Style Attribute) زمان بر بوده و سودمند نمی باشد.

راه ترجیح داده شده برای اضافه کرن CSS به HTML این است که ساختار و دستورات CSS را در فایل های جداگانه CSS قرار دهید (در این مورد در جلسات بعدی بحث خواهد شد) .

رنگ پس زمینه (Background Color):

خاصیت background-color رنگ پس زمینه را برای یک Element تعریف می کند.

مثال:

< html >
< body style="background-color:yellow;" >
< h2 style="background-color:red;" >This is a heading< /h2 >
< p style="background-color:green;" >This is a paragraph.< /p >
< /body >
< /html >

خاصیت background-color (در عنصر body که باعث تغییر پس زمینه کل صفحه می شود) نشانه قدیمی bgcolor را از رده خارج می کند.

در زیر مثالی از نشانه قدیمی و منسوخ bgcolor مشاهده می کنید:

< html >

< body bgcolor="yellow" >

< h2 >This is a heading< /h2 >

< p >This is a paragraph.< /p >

< /body >

< /html >

نکته: نشانه منسوخ bgcolor فقط در عنصر body قابل استفاده می باشد .

بهتراست که از style ها به جای bgcolor استفاده شود.

نوع ، رنگ و سایز فونت :

خاصیت های font-family ، color و font-size به ترتیب نوع ، رنگ و سایز فونت را تعریف می کنند.

مثال:

< html >
< body >
< h1 style="font-family:verdana;" >A heading< /h1 >
< p style="font-family:arial;color:red;font-size:20px;" >A paragraph.< /p >
< /body >
< /html >

خاصیت های font-family ، color  و font-size تگ قدیمی < font > را از رده خارج می کنند.

تنظیم (چینش) متن (Text Alignment):

خاصیت text-align چینش افقی متن را در یک Element تعریف می کند.

مثال:

< html >
< body>
< h1 style="text-align:center;" >Center-aligned heading< /h1 >
< p >This is a paragraph.< /p >
< /body >
< /html >

در این خاصیت می توان از center ، left  و right به ترتیب برای وسط چین ، چپ چین و راست چین استفاده کرد (در آینده با متغیر های بیشتر آشنا خواهید شد).

خاصیت text-align به صورت وسط چین تگ قدیمی < center > را از رده خارج می کند.

نشانه ها و تگ های حذف شده:

در HTML4 چندین تگ و نشانه حذف شده اند ؛ این بدین معنی است که این تگ ها و نشانه ها در این نسخه و نسخه های بالاتر پشتیبانی نمی شوند.

تگ ها و نشانه های زیر حدف شده هستند از به کار گیری آنها دوری کنید.

تگ	توضیحات
< center >	برای تعریف متون وسط چین به کار می رفت.
< font > و < basefont >	برای تعریف فونت به کار می رفت.
< s > و < strick >	برای تعریف متن به صورت خط خورده به کار می رفت.
< u >	برای تعریف متن زیر خط دار به کار می رفت.

نشانه	توضیحات
align	برای تعریف چیدمان متن به کار می رفت.
bgcolor	برای تعریف رنگ پس زمینه به کار می رفت.
color	برای تعریف رنگ متن به کار می رفت.

به جای همه تگ ها ونشانه های حذف شده بالا از style ها استفاده کنید.

لینک ها در HTML Hyper Links) HTML):

لینک ها همان طور که از نامشان پیداست برای اتصال دو صفحه وب به یکدیگر می شوند.

یک لینک در واقع یک کلمه ، گروهی از کلمات یا یک عکس است که شما می توانید با کلیک بر روی آن به صفحه ای جدید یا به بخش دیگری از همان صفحه منتقل شوید.

هنگامی که شما اشاره گر ماوس را به روی لینک بیاورید اشاره گر ماوس به یک دست کوچک تبدیل می شود.

لینک ها در HTML بوسیله تگ < a > تعریف می شوند.

تگ < a > به دو روش می تواند مورد استفاده قرار گیرد:

1- برای اتصال به صفحه ای دیگر ، که بوسیله نشانه href میسر می شود.

2- برای ایجاد نشانه (علامت) درون یک صفحه ، که بوسیله نشانه name میسر می شود.

ساختار ساده یک لینک در HTML به صورت زیر می باشد:

< a href="url" >Link Text< /a >

نشانه href مقصد لینک را مشخص می کند.

نکته: Link Text یا همان متن لینک همان طور که گفته شد می تواند عکس یا گروهی از کلمات باشد (در ادامه با این حالت آشنا خواهید شد).

مثال:

< a href=”http://www.electrobot.org/” >Electrobot Website< /a >

دستور بالا باعث انتقال کاربر به سایت Electrobot.org می شود.

در دستور بالا (به طور کلی در نشانه href) به جای آدرس سایت می توان اسم صفحه ای از سایت را ذکر کرد تا کاربر به آن منتقل شود.

مثال:

< a href=”Electrobot Homepage.htm” >Electrobot Homepage< /a >

این دستور باعث می شود که کاربری که در سایت Electrobot.org قرار دارد به صفحه ای که اسم Electrobot Homepage دارد منتقل شود؛ به طور کلی اگر اسم صفحه ای (اسم سند (فایل) HTML) در نشانه href درج شود باعث انتقال کاربر به آن صفحه می شود.

نشانه target در لینک:

نشانه target مشخص می کند که صفحه لینک شده کجا باز شود (منظور tab یا صفحه ای جدید است).

مثال زیر صفحه لینک شده را در پنجره یا tab جدیدی از مرورگر باز می کند:

< a href="http://www.electrobot.org/" target="_blank" >Visit Electrobot!< /a >

نشانه name  در لینک:

نشانه name نام یک لینک را مشخص می کند ، این نشانه برای ایجاد یک علامت در درون یک صفحه می شود.

به مراحل مثال زیر توجه کنید:

1- ایجاد علامت:

< a name="tips" >Useful Tips Section< /a >

2- لینک به علامت (در اینجا Useful Tips Section):

< a href="#tips" >Visit the Useful Tips Section< /a >

یا لینک به علامتی در صفحه دیگر (در اینجا لینک به Useful Tips Section در صفحه جدید):

< a href="http://www.Electrobot.org/html_links.htm#tips" >
Visit the Useful Tips Section< /a >

تشریح مثال بالا :

مثال بالا باعث می شود تا کاربر به بخشی از صفحه حاضر یا بخشی از صفحه دیگر منتقل شود.

نکته :در استاندارد HTML5 پیشنهاد شده است که به جای استفاده از نشانه name در تگ < a > از نشانه id استفاده شود. نشانه id در HTML4 در همه مرورگر به درستی کار می کند.(این نشانه و چند نشانه دیگر در توضیح کامل نشانه ها ذکر خواهند شد).

نکته:علامت ها خود نامرئی هستند و به هیچ وجه دیده نمی شوند و فقط باعث انتقال کاربر به یک بخش می شوند.

تذکر:به علامت # در مثال بالا توجه کنید.

چند نکته:

 همیشه یک علامت “/”به آخر آدرس لینک خود اضافه کنید  تا در بعضی جاها در طراحی وبسایت خود دچار مشکل نشوید.

به عنوان مثال اگر شما آدرس لینک را به صورت زیر بنویسید دو درخواست به سرور می دهید:

1- یک علامت “/” به لینک اضافه کن

 2- این لینک را باز کن.

استفاده از عکس به عنوان لینک:

مثال:

< html >

< body >

< p >Create a link of an image:

< a href="http://Electrobot.org/" >

< img src="smiley.gif" alt="HTML tutorial" width="32" height="32" / >

< /a >< /p >

< p >No border around the image, but still a link:

< a href="default.asp" >

< img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" / >

< /a >< /p >

< /body >

< /html >

همانطور که از مثال بالا پیداست برای اینکه قاب اطراف عکس برداشته شود می توانیدborder  را مساوی با 0 قرار دهید.

فرستادن E-Mail بوسیله تگ < a > :

برای فرستادن ایمیل بوسیله تگ < a > می توانید مانند مثال زیر مقدار نشانه href را برابر با :mailto قرار دهید.

مثال:

< html >

< body >

< p >

This is an email link:

< a href="mailto:Electrobot.org@gmail.com?Subject=Hello%20Again" >

Send Mail< /a >

< /p >

< /body >

< /html >

همانطور که می دانید فضاهای خالی در مرورگر ها به 20% تبدیل می شوند ، اگر بخواهیم به صورت استاندارد عمل کنیم باید به جای فضاهای خالی از علامت 20% استفاده کنیم ولی درج فاصله خالی ایرادی ندارد.

همچنین می توانید برای درج Cc ، Bcc و متن ایمیل به صورت زیر عمل کنید:

< html >

< body >

< p >

This is an email link:

< a href="mailto:Electrobot.org@gmail.com?cc=Electrobot.org@yahoo.com&bcc=Electrobot.org@hotmail.com&subject=Hello %20 Again="Thanks%20a%20lot%20for%20your%20HTML%20Learning" >

Send Mail< /a >

< /p >

< /body > 

< /html >

چگونه Frame ها را نادیده بگیریم؟:

برای رهایی از Frame ها می توانید در مقدار نشانه target از top_ استفاده کنید (در مورد Frame ها در جلسات بعدی بحث خواهد شد).

"پـــایــــان جــلســــــه پنجم"

خلاصه جلسه بعد:در جلسه بعد به توضیح کامل درج تصاویر و جدول ها پرداخته می شود.

لینک دانلود مستقیم : فقط کاربران عضو قادر به مشاهده این لینک می باشند. عضویت در سایت

Password : www.electrobot.org

---

برچسب ها : دانلود , آموزش , آموزش HTML , آموزش اچ تی ام ال , دانلود آموزش اچ تی ام ال , دانلود آموزش HTML , دانلود کتاب , دانلود کتاب الکترونیکی , دانلود Ebook , کتاب , کتاب الکترونیکی , کتاب آموزش HTML , کتاب آموزش HTML , آموزش جامع , آموزش کامل , آموزش کامل HTML , آموزش جامع HTML , آموزش جامع اچ تی ام ال , آموزش کامل اچ تی ام ال , قسمت , جلسه , 5 , آموزش HTML جلسه 5 , آموزش ساخت سایت , آموزش طراحی قالب , آموزش طراحی قالب وبلاگ , آموزش طراحی قالب سایت , آموزش قدم به قدم , آموزش مبتدی HTML , آموزش حرفه ای HTML , عناصر , Element , عناصر در HTML , عناصر HTML , المنت های HTML , نشانه , نشانه ها در HTML , سی اس اس , dCSS , استایل ها در HTML , ایجاد لینک , ایجاد تصویر به عنوان لینک , عکس بدون border , HTML Element , HTML Element , HTML Attribute , HTML Attributes , HTML
	نظر بدهيد (3)	گزارش لينک دانلود معيوب	خوراک موضوعی - RSS

توجه : برای مشاهده تمام خبرها اینجا را کلیک نمایید. | تعداد کل اخبار : 136

این سایت به منظور انجام پروژه های دانشجویی  و همچنین ارائه جدید ترین مقاله ها و آموزش های موجود در رشته مختلف دانشجویی به خصوص رشته های کامپیوتری طراحی شده است. در صورت تمایل به تبادل لینک ، لینک ما را با نام پروژه و آموزش دانشجویی در سایت خود قرار دهید و با ما تماس بگیرید.

---

نام کاربری:
کلمه عبور:

نظر شما درمورد ثبت نام در سایت و پرداخت هزینه ماهیانه محدود ، برای دریافت لینک های دانلود مستقیم سایت چیست؟ تاریخ نظر سنجی : 1390.4.12

با این طرح موافق هستم
با این طرح موافق نیستم
برای بنده فرقی نمی کند!


راي دهندگان: : 167

» مطالب ارسالی : 349
» امروز : چهارشنبه 03 اسفند 90
» بازدید های امروز : 2476
» بازدید های دیروز : 2315
» بازدید های ماه : 48942
» نظرات : 211
» افراد آنلاین : 12
» کاربران عضو : 7704
» بازدید کل : 1444673
» تاریخ تاسیس : 1388/7/1

ترجمه متون انگلیسی شما  با هزینه مناسب و قیمت باورنکردنی  با فونت 8 خطی 110 تومان هزینه تایپ صفحه ای 350 تومان

فروشگاه اینترنتی شاپینا

تبلیغ رایگان پروژه یا محصول شما

تبلیغ رایگان پروژه یا محصول شما