در این آموزش می خوایم در مورد چیدمان عکس ها و نحوه قرار دادن لینک به نقاط مختلف یک صفحه در HTML توضیحاتی رو بدم .
تنظیم قرارگرفتن عکس ها در صفحه
برای این که بتونیم یه متن رو در کنار یه عکسی بنویسیم باید در تگ عکس از یکی از فرمان های زیر استفاده کنیم :
align=”right”
align=”left”
با استفاده از این فرمان ها می تونیم به عکس ها بگیم که در سمت راست صفحه یا در سمت چپ صفحه قرار بگیرن . این نکته رو در نظر بگیرید که اگه از این فرمان ها استفاده کنید متنی که بعد عکس می نویسید در کنار عکس نشان داده می شود . و اگر از این فرمان ها استفاده نکنید متن و عکس در دو سطر نشان داده می شود . تگ عکس با استفاده از این فرمان به صورت زیر در می آید :
<img src=”عکس مورد نظر ” align=”right” />
اگه از این تگ استفاده کنید عکس مورد نظر در سمت راست صفحه نمایش داده می شود و حالا می تونید متن رو تایپ کنید و نگران قرار گرفتن متن در زیر عکس هم نباشید چون متن هم در سمت چپ عکس نشان داده خواهد شد مثل کد زیر :
<img src=”tag_in_html.jpg” align=”right” /> شما این متن رو در سمت چپ عکس مشاهده می فرمایید و هرمتنی که بنویسید در کنار عکس نشان داده خواهد شد .
شما این متن رو در سمت چپ عکس مشاهده می فرمایید و هرمتنی که بنویسید در کنار عکس نشان داده خواهد شد .
برای نشان دادن عکس در سمت چپ هم کافیست align رو برابر left قرار بدید .
</ “img src=”image.jpg” align=”left >
استفاده از متن جایگزین (کامنت) برای تصاویر
از شناسه alt برای وارد کردن متن جایگزین برای عکس در تگ </ img> استفاده می شود . موقعی که مرورگر به هر دلیلی نتواند عکس مورد نظر شما رو در صفحه نمایش دهد به جای آن این کامنت رو نشان می دهد . و می تواند به بیننده بفهماند که چه چیزی رو از دست داده . از این شناسه مانند مثال زیر استفاده می شود :
alt=”کامنت مورد نظر “
این شناسه رو در تگ عکس به این صورت قرار می دهیم :
<img src=”Learn_Html.jpg” alt=”آموزش html ” />
این کامنت رو به عنوان جانشین عکس در تگ img وارد می کنیم . تا هر وقت عکس به نمایش در نیامد این کامنت نشان داده شود . توصیه می کنم تا حدامکان برای عکس های صفحه خود از این شناسه استفاده کنید ، در این صورت صفحه شما می توان د برای کاربر مفید واقع شود . موتور های جستجو هم وقتی صفحه ایی رو ایندکس می کنند نمی توانند تصاویر رو ببینند و فقط نام تصویر و کامنت جایگزین آن را می خوانند پس برای تصاویری که به موضوع صفحه شما مرتبط هستند و یا می خواهید بازدید کنندگان بتوانند آن را در موتور های جستجو پیدا کنند حتماً از این کامنت استفاده کنید .
ساختن لینک به نقاط مختلف یک صفحه
تصور کنید که یه صفحه بلند دارید و می خواهید بیننده با کلیک بر روی یک نقطه معین دوباره به اول صفحه بازگردد . یا ممکن است بخواهید صفحه رو به چندین قسمت تقسیم کنید و در بالای صفحه فهرستی برای آن درست کنید که بیننده با کلیک کردن بر روی عنوان هر قسمت به آن قسمت در صفحه برود. در این موارد شما می توانید از پیوندهای نامگذاری شده که در قسمت های مشخصی از صفحه شما قرار دارند که شما می خواهید به آن نقطه لینک بسازید استفاده کنید ، شما می توانید به هر قسمت از صفحه لینک بسازید اما فعلاً در مورد لینک به بالای صفحه توضیح میدم .
حتماً در سایت ها دید که وقتی به پایین صفحه می روید یه لینکی وجود داره که با کلیک بر روی اون دوباره به بالای صفحه بر می گردید ، حالا می خوایم یه همچین لینکی رو درست کنیم . برای این کار به قسمت BODY در متن HTML خود بروید ، درست بعد از تگ <body> تگ زیر رو تایپ کنید :
<a name=”top”></a>
شما می تونید هر نامی رو بین دو دابل کوتیشن قرار دهید من اینجا top قرار دادم تا درک بهتری از این موضوع داشته باشیم . حالا به جایی در قسمت BODY بروید که می خواهید از آن جا لینکی به بالای صفحه ایجاد کنید و فرمان زیر رو تایپ کنید :
<a href=”#top”> بازگشت به بالا </a>
حالا اگه لینک بازگشت به بالارو کلیک کنید به بالای صفحه می روید . اگه بخواید یه تصویر یا حالت خاصی به این لینک بدید می تونید از CSS استفاده کنید .
علامت # به مرورگر می فهماند که مقصد پیوند نامگذاری شده در همین صفحه است . اگه شما یه پیوندی با نام “UP” ساخته بودید حالا باید از “UP#” به جای “top#” استفاده می کردید .
با استفاده از این روش نه تنها می توانید لینکی بسازید که بازدید کننده با کلیک بر روی اون به قسمت دیگری از همان صفحه برود ، بلکه می توانید از این روش در لینک هایی که در دیگر صفحات قرار دارند استفاده کنید و بازدید کننده رو به قسمت مشخصی از یک صفحه دیگر بفرستید . تنها نکته ایی که وجود دارد این است که در صفحه مقصد باید لینک های نام گذاری شده وجود داشته باشند و از این نام گذاری در لینکی که در صفحه مبداء قرار دارد استفاده شود .
سلام . باید تو قسمت style دیو بنویسی “background-size=”cover
سلام استاد یه سوالی هست . . . من یه Div دارم می خواهم وقتی عکسی درونش بذارم هم اندازه اش باشه . . . استاد باید چی کار کنم؟؟