لطفا از تمام مطالب دیدن فرمایید.
تگ های فونت ، لینک ، تصویر ، کامنت گذاری
سلام خب بریم سراغ قسمت پنجم ، از این به بعد مخوایم با تگ های پیشرفته تر آشنا بشیم تگ هایی که انعطاف پذیزی بالاتری دارن و کارایی بیشتری هم دارند سعی میکنم از تگ هایی که به متون مربوط میشن شروع کنم تا زیاد از مبحث قبلی دور نشیم
توی مباحث قبل شما با چندین نوع تگ آشنا شدید که همگی کار مشخصی داشتند و به نوعی یک حالت کلیشه ای را دار ا بودند اما تگ هایی وجود داره که میشه با کمی بیشتر باهاشون کار کرد یعنی فقط با بردن یک کلمه تگ شروع و اتمام نیابد ، خب بریم سر معرفیمون
تگ اول : تگ font> :
امکاناتی که این تگ به ما میده اینه که میتونیم خانواده فونت رو مشخص کنیم ، رنگ فونت رو مشخص کنیم ، اندازه فونت رو مشخص کنیم :نمونه بالا یک نمونه میشه گفت کامل بود که لپ مطلبو میرسونهکد HTML:<font size="5" color="brown" face="Arial">This Is a Test</font>توی قسمت اول تگ من اندازه متن رو نشون دادم این قسمت رو شما میتونید یک عدد بین 1 تا 7 قرار بدید در حال حاظر من اندازه فونت رو توی حالت متوسط گذاشتم ، قسمت بعد رنگ فونت رو مشخص کردم در این قسمت میتونید نام رنگ مورد نظر یا کد رنگتان را وارد کنید . به طور مثال برای رنگ مشکی میتوان از کلمه "black" یا کد رنگ "000000#" iاستفاده کرد اگر با کد رنگ ها آشنایی ندارید استفاده نمایید ، در قسمت سوم این تگ من نوع فونت رو مشخص کردم شما میتونید نام فونت ها رو توی این قسمت بزارید نمونه هاش دیگه ای که میشه گذاشت : " georgia , tahoma , arial , times new roman , vardena " و بسیاری دیگر است ، نتیجه کد بالا به شکل زیر خواهد شد :
This Is a Test
------------------------------------------
حالا ببینیم ساخت لینک یا پیوند به صفحه دیگر توی html به چه شکلی هست ، لینک ها بسیار با اهمیت هستن توی html حتما شما نوشته هایی رو دیدید که وقتی روش کلیک میکنید به صفحه ای دیگر انتقال پیدا می کنید این ها همان لینک ها هستن ، لینک ها به شکل زیر نوشته میشن :
کد HTML:
<a href="http://clobiran.com">This Is a Test</a>
توی تگ بالا متن به صفحه وارد شده در تگ پیوند خورده است نتیجه به شکل زیر میشه:
این تگ قسمت های دیگه ای هم داره مثل نحوه انتقال به صفحه مشخص شده که با " target " مشخص میشه با این کد میتوان مشخص کرد لینک در صفحه فعلی باز شه در صفحه جدید باز شه در صفحه مادر باز شه و ...
کد HTML:
<a href="http://clobiran.com" target="_blank">This Is a Test</a>
این قسمت تگ را میشه چهار نام گذاشت
قسمت بعد تگ عنوان لینک هست که با title شروع میشود ، این محتویات این قسمت تگ در صورتی که موس را روی لینک بگیرید نمایش داده میشود .
نتیجه به رو خودتون تست کنید اینجا نمیشه لینک با عنوان گذاشت
خب اینم از تگ لینک ------------------------------------------ خب بریم سراغ تگ تصویر که با img> شروع میشه این تگ برای نمایش تصاویر کاربرد داره . در ضمن ای تک از جمله تگ هایی هستش که نیازی به بسته شدن یا تگ انتهایی نداره ...
که تصاویر رو نشون میده اما این تگ چه قسمت هایی داره :
قسمت alt زمانی کاربرد داره که مشکلی توی لود شدن تصویر از سرور به وجود بیاد و تصویر لود نشه اگر چنین چیزی بشه متن alt در داخل کادر تصویر به نمایش در خواهد آمد یا به صورت متن به جای تصویر خواهد آمد
قسمت width & height برای مشخص کردن طول تصویر است طول و ارتفاع تصویر شما مساوی 200*150 باشه (در مثال آخر این مبحث مشاهده کنید ....) قسمت border برای آن است که شما بخواهد در دورتان کادر وجود داشته باشد یا خیر در صورت خیر بودن باید این قسمت را مساوی 0 قرار دهید و در غیر اینصورت از 0 بالاتر بزارید معمولا بین 1 تا 3
خب با توضیحات بالا مثال زیر رو میزنیم که کامل شده کد تصویر اولیه هستش :
خب شما میتونید تصاویر رو هم لینک کنید فقط کافیه کد تصاویر رو در میان کد لینک قرار بدید ...
- "_blank" => باز شدن لینک در صفحه جدید
- "_parent" => باز شدن لینک در صفحه مادر
- "_self" => باز شدن لینک در صفحه فعلی
- "_top" => باز شدن لینک در بالا صفحه
قسمت بعد تگ عنوان لینک هست که با title شروع میشود ، این محتویات این قسمت تگ در صورتی که موس را روی لینک بگیرید نمایش داده میشود .
کد HTML:
<a href="http://clobiran.com" target="_blank" title="This Is a Test">This Is a Test</a>
خب اینم از تگ لینک ------------------------------------------ خب بریم سراغ تگ تصویر که با img> شروع میشه این تگ برای نمایش تصاویر کاربرد داره . در ضمن ای تک از جمله تگ هایی هستش که نیازی به بسته شدن یا تگ انتهایی نداره ...
کد HTML:
<img src="http://clobiran.com/uploads_user/1000/1/0_9176.jpg">

- src
- title
- alt
- width
- border
- height
قسمت alt زمانی کاربرد داره که مشکلی توی لود شدن تصویر از سرور به وجود بیاد و تصویر لود نشه اگر چنین چیزی بشه متن alt در داخل کادر تصویر به نمایش در خواهد آمد یا به صورت متن به جای تصویر خواهد آمد
قسمت width & height برای مشخص کردن طول تصویر است طول و ارتفاع تصویر شما مساوی 200*150 باشه (در مثال آخر این مبحث مشاهده کنید ....) قسمت border برای آن است که شما بخواهد در دورتان کادر وجود داشته باشد یا خیر در صورت خیر بودن باید این قسمت را مساوی 0 قرار دهید و در غیر اینصورت از 0 بالاتر بزارید معمولا بین 1 تا 3
خب با توضیحات بالا مثال زیر رو میزنیم که کامل شده کد تصویر اولیه هستش :
کد HTML:
<img src="http://clobiran.com/uploads_user/1000/1/0_9176.jpg" title="تصویر آزمایشی" alt="تصوری آزمایشی" width="200" height="150" border="0">
کد HTML:
<a href="http://clobiran.com" target="_blank" title="تصویر آزمایشی"><img src="http://clobiran.com/uploads_user/1000/1/0_9176.jpg" alt="تصوری آزمایشی" width="200" height="150" border="0"></a>
یه سری تذکرات :
------------------------------------------ خب یه مبحث دیگه بگم و برای امروز کافیه ... کامنت گذاشتن در html خیلی سادست ، کامنت ها برای اینکه اگر بخوایم در زمان دیگری کدها رو ویرایش کنیم کارمون راحت باشهو یا تیکه کدی رو که فعلا" لازمش نداریمو غیر فعال نگه داریم ، کامنت ها هیچ تاثیری در کد ندارند و به طور کلی نقش هویج رو اجرا میکنن توی کد ها
شوخی کردم کامنت ها خیلی مهمن همیشه توی کاراتون کامنت بزارید ، کامنت چیزیه که توی تمام زبون های برنامه نویسی وجود داره
کامنت گرازی توی html خیلی سادست و هر جا بخواید کامنت شه باید <--! برای شروع گذاشته بشه و در پایان --> بشه تا کامنت بشه به مثال های زیر توجه کنید کامنت کردن متن:
کامنت کردن چند خط نوشته(فرقی نمیکنه):
کامنت کردن یه تکه کد :
کلا شکل کلی کامنت گذاری همین استو بست
--------------------------------------------- خب امروز با چه چیزایی آشنا شدیم :
اما بحثشون طولانی بود تا بعد خداحافظ
- نیازی به گذاشتن طول و ارتفاع تصویر نیست تصویر خودبخود میتواند تنظیم میشود اما وارد کردن طول و ارتفاع بر بالارفتن سرعت لود صفحه تاثیر مستقیم دارد.
- واحد اندازه گیری تصویر بر حسب پیکسل میباشد زمانی که در کد مینویسیم width="200" منظور همان width="200px" هست
- رعایت نظم در نوشتن قسمت ها در همه تگ ها در html سرعت لود را بالا میبرد در مورد تصاویر src =>title =>alt =>width =>border =>height شکل کلی می باشد
- در صورت قرار دادن تصویر در قالب یک لینک یک کادر یک پیکسلی آبی ممکن است در دور تصویر ایجاد شود که اگر کد کادر مقدار 0 داده شود یا شده باشد این کادر از بین میرود .
- در صورتی که تصاویر در میان تگ <center> و </center> قرار بگیرید به وسط صفحه هدایت میشود .
- در تمام تگهایی که src وارد شده است وارد کردن //:http الزامیست و وارد نکرد .www هیچ لزومی ندارد، اگر //:http وارد نشود کد شما درست اجرا نمیشود مثلا در کد تصاویر و لینک ها .
------------------------------------------ خب یه مبحث دیگه بگم و برای امروز کافیه ... کامنت گذاشتن در html خیلی سادست ، کامنت ها برای اینکه اگر بخوایم در زمان دیگری کدها رو ویرایش کنیم کارمون راحت باشهو یا تیکه کدی رو که فعلا" لازمش نداریمو غیر فعال نگه داریم ، کامنت ها هیچ تاثیری در کد ندارند و به طور کلی نقش هویج رو اجرا میکنن توی کد ها
شوخی کردم کامنت ها خیلی مهمن همیشه توی کاراتون کامنت بزارید ، کامنت چیزیه که توی تمام زبون های برنامه نویسی وجود داره
کامنت گرازی توی html خیلی سادست و هر جا بخواید کامنت شه باید <--! برای شروع گذاشته بشه و در پایان --> بشه تا کامنت بشه به مثال های زیر توجه کنید کامنت کردن متن:
کد HTML:
<!-- این یک کامنت است -->
کد HTML:
<!--
این یک کامنت است
کامنتها در مرورگر نمایش داده نمی شوند
-->
کد HTML:
<!-- <a href="http://clobiran.com">clobiran.com</a> -->
--------------------------------------------- خب امروز با چه چیزایی آشنا شدیم :
- با تگ فونت و قسمت های مختلف این تگ آشنا شدیم
- با تگ لینک و قسمت های مختلف این ت آشنا شدیم
- با تگ تصویر و قسمت های مختلف آن آشنا شدیم
- با روش کامنت گذاری در html اشنا شدیم
اما بحثشون طولانی بود تا بعد خداحافظ
برچسبها:
تاريخ : سهشنبه 05 شهریور 1392 | 20:46 | نویسنده : کـــــوچـــــولـــــو |
ارسال نظر(1)
لطفا از دیگر مطالب نیز دیدن فرمایید














