تگ a در html، قرار دادن تصویر با html، لینک گذاری روی عناصر

خراب است لطفا اطلاع دهید

جلسه ی سوم

یاد خواهیم گرفت که تگ a در html چیست. با تگ img آشنا می شویم، یاد می گیرید که چگونه عمل گذاشتن لینک روی عکس را انجام دهید

امروز ما یاد می گیریم که چگونه بتوانیم ، رنگ متن ها،سایز آنها و فونت متون را تغییر دهیم.

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

تگ a در html

برای این کار از تگ a در html استفاده می کنیم.

در تگ a، یک عنصر به نام href تعریف می کنیم. در جلوی تگ a درون رو به روی href و سپس مساوی میان دو کوتیشن آدرسی را که قصد دارید با کلیک بر روی آن به آنجا منتقل شوید را می نویسید.

به مثال زیر با تگ a توجه کنید.

 

خروجی کد بالا

متن مورد نظر

توضیح کد بالا:

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

قرار دادن عکس در html

شاید شما بخواهید که در مطالب خود یک عکس بگذارید برای این کار از تگ img استفاده می کنید.

ما در درون تگ img یک عنصر بی نام src تعریف می کنیم. ما در جلوی این کد و درون دو کوتیشن باید مسیر دقیق و اسم عکس خود را بنویسید.

مثلا اگر  شما فایل های قالب خود را در یک فولدر داشته باشد.

و یک فولدر دیگر تحت عنوان images داشته باشید و عکس های شما در این فولدر باشند.

شما باید در جلوی src اینگونه بنویسید.

images/images name شما باید به جای images name نام عکس خود همراه با type آن را بنویسید. به صورت زیر عمل کنید.

test فولادی که سند html ما در آن قرار دارد.

index.html سندی که ما در آن کد های خود را نوشته ایم.

images فولدری که مورد زیر در داخل آن است

p.jpg عکس مورد نظر ما که در پوشه ی بالایی قرار دارد.

برای مثال بالا باید در فایل index.html این آدرس را نوشت. “images/p.jpg”

به کد زیر با تگ img توجه کنید.

 

خروجی ما:

خروجی با تگ img

توضیح کد بالا:

همه موارد توضیح داده شده بجز خط شش

که ما در این قسمت یک تگ img تعریف کرده ایم که در آن عنصر src را قرار داده ایم و سپس آدرس عکس مورد نظر خود را وارد کرده ایم.

گذاشتن لینک برای عکس با تگ a.

شما در جاهای مختلفی نیاز دارید  که عمل گذاشتن لینک روی عکس را انجام دهیم.

یعنی اگر کاربر روی عکس کلیک کرد یه صفحه ای که لینک داده اید می رود.

برای این کار ما باید ترکیبی از تگ a و تگ img را پیدا سازی کنیم.

به کد زیر با دقت توجه کنید.

 

خروجی:

خراب است لطفا اطلاع دهید

خروجی ما

روی عکس بالا کلیک کنید.

همانطور که متوجه شدید به صفحه ی اصلی سایت ما انتقال یافتید.

و این یعنی ما موفق شدیم عمل گذاشتن لینک روی عکس را انجام دهیم.

توضیح این کد

در این کد در خط ششم که ما با تگ a یک لینک تعریف کردیم که به سایت سرزمین کد می رود.

و بع  بین باز شدن و بسته شدن این کد تگ img را قرار دادیم.

ما هر چیزی بین باز شدن و بسته شدن تگ a اگر کاربر روی آنها کلیک کند به همان صفحه ای که قبلا به آن لینک داده بودیم می رویم.

و ما یک تصویر قرار دادیم.

با نوشتن کدی که می تواند عمل گذاشتن لینک روی عکس را انجام شود دیگر می توانید کد های ساده ای بنویسید و برای خود تمرین کنید.

کاربران گرانقدر شما هر چقدر که تلاش کنید، به همان اندازه هم به نتیجه خواهید رسید.

برای یادگیری هر زبان کد نویسی شما نمی توانید که فقط مطالب مربوط به آن کتاب را مطالعه کنید.

باید به صورت عملی هما این کار ها را انجام دهید.

اگر هم شما این موارد را یاد گرفتید بدون انجام دادن و مشاهده ی آنها در مدت کمی این ها را فراموش خواهید کرد.

اگر برای شما مشکلی پیش بیاید می توانید تمامی مشکلات خود را از طریق ایمیل pedram7118@gmail.com با من در میان بگذارید.

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

تغییر رنگ متون

دوستان عزیز برای اینکه ما بتوانیم ، رنگ متنوع را عوض کنیم . باید از کد های css استفاده کنیم .

من به صورت کامل وارد این بحث نمی شوم. ولی به اندازه ی کمی هم باید برای یادگیری بهتر html  زبان css هم بلد باشید.

یادتان می آید که در جلسه ی دوم آموزش html در مورد با صفت ها با شما صحبت کردم.

برای اینکه بتوانید برای هر عنصری در html یک کد css بنویسید. شما باید یک صفت به نام style تعریف کنید و کد های خود را درون این صفت بنویسید.

مثال کد زیر:

 

همانطور که مشاهده می کنید اگر خروجی بگیرید ،

نتیجه به این صورت است.

HELLO

توضیح کد بالا

همه  موارد در جلسه های قبل آموزش داده شده است.

بجز، خط 5.

در خط پنج که تگ h1 است. به مرور گر گفته شد، که عبارت  hello را به صورت سر تیتر و به رنگ قرمز نمایش بده.

ما در جلوی عبارت style در میان کوتیشن ها کد های css خود را پیاده سازی کردیم.

کد های css به زبان گفتاری ما خیلی نزدیک هستند.

رنگ ها به صورت ساده یا همان نوشتن خود رنگ  به صورت RGM و…

می توان نوشت که من زیاد وارد این بحث نمی شوم و در آموزش های CSS به صورت کامل توضیح می دهم.

پس در جلوی color هر رنگی که مورد نظرمان هست می نویسیم.

یعنی برای هر تگی که این کد را اضافه کنید رنگ آن قرمز می شود یعنی اینکه هر رنگی که در جلوی color نوشته شود، برای آن تگ اعمال می شود.

وقتی که شما تگ هایی مثل تگ a و یا هر تگ دیگر را با css ترکیب کنید کار های زیبایی از آب درمی آیند.

font-family

تابع font-family برای مشخص کردن خانواده ی فونت مورد استفاده قرار می گیرد.

به مثال زیر با تابع font-family دقت کنید.

مثال:

 

در جلوی font-family فونت مورد نظر قرار می گیرد.

مشخص کردن سایز فونت

برای این کار تابع font-size را به کار می بریم.

و در جلوی font-size سایز مورد نظر را بر اساس px ،em و… بنویسید.

مثال:

 

در مثال بالا با تابع font-size می بینید که ما هر چقدر مقدار مقدار بیشتری به آن بدهیم متن ما بزرگ تر خواهد شد.

و اگر بخواهید که چند کد را با هم بنویسم به وسیله ی سمیکالن آنها را از هم جدا می کنیم.

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

به کد زیر توجه کنید.

تا همین قدر بدانید کافی است .

مروری بر این جلسه

ما در این جلسه تعدادی از کد های css را آموختیم و آشنایی پایه ای را از این زبان به دست آوردیم.

توانستیم رنگ متن ، اندازه ی آن  و خانواده ی متن را انتخاب کنیم.

 

یاد گرفتم که چگونه بر هر چیز خواصیت لینک ببخشیم.

عمل گذاشتن لینک روی عکس را آموختم.

مرحله ی تگ a در html را گذراندید.

با تگ img آشنا شدیم.

یاد گرفتم که چگونه در مطالب خود عکس قرار دهیم و…

رفتن به جلسه ی بعد

جلسه ی بعد

 

نوشتهٔ قبلی
تگ br و تگ های قالب بندی متن در html
نوشتهٔ بعدی
صفت alt صفت width صفت height صفت dir و چند پروژه با این صفت ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

این فیلد را پر کنید
این فیلد را پر کنید
لطفاً یک نشانی ایمیل معتبر بنویسید.

فهرست