۳) آموزش مقدمات HTML - درج تصویر و لینک کردن

به نام خدا

درس اول

درس دوم 

---

بخش اول : درج تصویر

صفحه ی وبی که قبلا باهاش کار می کردی رو واسه اضافه کردن تصویر باز کن!

طبق شکل قبل از تگ ِ font، با فشردن Enter، جایی برای نوشتن کدهای جدید باز کن!

بعد تگ Image رو تایپ کن و بین دو گیومه "" آدرس تصویر مورد نظر رو تایپ کن!

نکته : چون فعلا در محیط اینترنت نیستی نمی تونی از تصاویر موجود در اینترنت استفاده کنی، بنابراین باید از تصاویر موجود توی کامپیوترت بهره ببری، برای این کار لازمه که آدرس تصاویر رو طبق شکل زیر تایپ کنی!

اگه میخوای وقتی بازدیدکننده، ماوس رو روی تصویر نگه میداره، یه نوشته به نمایش در بیاد باید طبق شکل از ویژگی ِ alt استفاده کنی!

اگه میخوای دور عکس یه حاشیه یا یه نوار باریک قرار بگیره باید طبق شکل از ویژگی ِ Border استفاده کنی!

میتونی با ویژگیهای ِ width و height ، عرض و ارتفاع تصویر رو طبق شکل تغییر بدی!

بخش دوم : لینک کردن

لینک یعنی پیوند، در واقع با لینک کردن، صفحات وب به هم پیوند میخورن و میتونی از یه صفحه به صفحه ی دیگه بری!

از تگ a برای لینک کردن استفاده میشه!

حالا اگه میخوای تصویر رو مثلا به یه تصویر دیگه لینک کنی، باید طبق شکل، تگ image رو بین تگ اول و تگ ِ آخر  ِ a قرار بدی!

من تصویر لوگوی دانشگاه رو به لوگوی همکلاسی لینک کردم، پس اگه روی لوگوی دانشگاه کلیک کنم، آدرس لوگوی همکلاسی باز میشه!

می تونستم به جای لوگوی همکلاسی، یه تصویر بزرگ تر از لوگوی دانشگاه رو بزارم تا هر کس روی تصویر کوچیک کلیک میکنه، تصویر بزرگ واسش باز شه، یا میتونستم آدرس یه سایت دیگه، مثل سایت دانشگاه رو بزارم یا حتی می تونستم آدرس یه فایل pdf، word یا mp3 رو بزارم!

چند نکته :

۱ : alt، border و ... در این درس و face،color و... در درس قبلی، تگ نیستند!

اینا رو توی تگ اول می نویسیم و با اونا ویژگیهای تگ رو تعیین می کنیم، اسمشون هم ویژگی هست!

۲ : رعایت ترتیب در نوشتن ویژگیها مهم نیست، یعنی فرقی نمی کنه alt رو اول بنویسی یاborder  رو!

۳ : فضای خالی بین تگ ها هیچ تفاوتی در صفحه ی وب ایجاد نمیکنه، برای همین می تونی به میزان کافی از دکمه های Enter و Space برای ایجاد نظم در برنامه نویسی استفاده کنی!

۴ : استفاده از حروف کوچک یا حروف بزرگ و یا هر دوش برای برنامه نویسی با زبان ِ HTML، هیچ تفاوتی نداره!

تمرین :

1- تصویر  ِ صفحه ی وب رو به یه فایل صوتی لینک کن!

2 – تصویر  ِ صفحه ی وب رو به یه فایل word لینک کن!

3 – به جای تگ تصویر، یه کلمه بین تگ اول و آخر  ِ a، تایپ کن و ببین چی میشه!