چگونه یک تصویر را در html باز کنیم. درج گرافیک در یک سند HTML

1. در یک پوشه HTMLیک پوشه ایجاد کنید درس 3، که در آن تمام صفحات وب دریافتی در طول درس خود را ذخیره می کنیم.

2. به اشیاء گرافیکی که می تواند در ترکیب گنجانده شود وب-صفحات شامل انواع مختلفی از نقاشی ها، عکس ها و کلیپ های ویدئویی است. صدای نمایش اغلب استفاده می شود وب-صفحات ما فقط درج تصاویر را در نظر خواهیم گرفت. مرورگرها فقط قادر به نمایش سه نوع فایل گرافیکی هستند: فرمت های فایل GIF, JPEGو PNG. فرمت فایل GIFبه شما امکان می دهد تصاویر متحرک بسازید. JPEG- فایل ها معمولا برای ذخیره تصاویر عکاسی استفاده می شوند. فرمت جدید معرفی شده PNGکیفیت تصویر خوب و اندازه فایل گرافیکی کوچکی را ارائه می دهد.

برای درج یک تصویر در یک ترکیب وبتگ -page اعمال می شود با صفات فراوان این تگ همتای پایانی ندارد. ویژگی اصلی و اجباری تگ یک صفت است SRC. مقدار این ویژگی آدرس فایل گرافیکی درج شده یا به طور دقیق آن است URL.

برچسب بزنید همچنین ممکن است شامل ویژگی باشد ALT= "[متن]". هنگامی که مرورگر با چنین برچسبی روبرو می شود، متن را روی صفحه نمایش می دهد "تصویر"و شروع به بارگذاری تصویر از فایل در جای خود می کند تصویر.گیف. صفت ALTممکن است برای مرورگرهای قدیمی که از تصاویر پشتیبانی نمی کنند، یا اگر مرورگر به طور خودکار تصاویر را بارگیری نمی کند، ضروری باشد. در صورتی که تصویر گرافیکی همچنان توسط مرورگر نشان داده شود، زمانی که کاربر نشانگر ماوس را روی این تصویر گرافیکی می‌برد، متن نمایش متن جایگزین به‌عنوان یک راهنمایی نمایش داده می‌شود.

3. به یک پوشه درس 3فایل را کپی کنید تصویر.گیف (\\tserver\students\VKT\IS\تکنولوژی کار با نرم افزار\Files for work).

4. ایجاد کنید دفترچه یادداشتفایل جدید و متن را در آن تایپ کنید HTML-سند این فایل را با نام ذخیره کنید page1.htmدر پوشه درس 3و آن را در پنجره مرورگر مشاهده کنید.

5. به طور پیش فرض، تصویر گرافیکی دقیقاً همانطور که ایجاد شده است نشان داده می شود و ابعاد عمودی و افقی خود را حفظ می کند. با این حال، ما این فرصت را داریم که به صلاحدید خود ابعاد تصویر را به صراحت تنظیم کنیم. برای این کار از ویژگی ها استفاده می شود HEIGHTو WIDTH. مقادیر آنها بر حسب پیکسل یا درصد اندازه پنجره مرورگر مشخص می شود.

لازم به ذکر است که مرورگرها تلاش می کنند تا نسبت های تصویر را حفظ کنند، بنابراین تنظیم صریح ابعادی که نسبت ها را تغییر می دهد می تواند توسط مرورگر نادیده گرفته شود و اندازه هایی را انتخاب می کند که تا حد امکان به اندازه هایی که کاربر مشخص می کند نزدیک باشد. اما نسبت های تصویر را نقض نکنید. معمولا برای وب-صفحات نقشه‌هایی از اندازه‌هایی را آماده می‌کنند که وقتی به عنوان بخشی از نمایش داده می‌شوند استفاده می‌شوند وب-صفحات اگر یک تصویر باید چندین بار با اندازه‌های مختلف نمایش داده شود، تهیه چندین فایل گرافیکی آسان‌تر از ارائه تصاویر خود برای نمایش کنترل نشده به مرورگر است که می‌تواند کل طرح‌بندی صفحات وب را مختل کند. اندازه درج شده را تغییر دهید HTML-سند page1.htmتصاویر. فایل را با همین نام ذخیره کنید و در مرورگر خود مشاهده کنید.

6. صفاتی وجود دارد HSPACEو VSPACE، به شما امکان می دهد مقدار فضای خالی را که تصویر گرافیکی را از سایر عناصر طراحی اطراف آن جدا می کند، مشخص کنید. وب-page، به عبارت دیگر، تورفتگی تصویر را تنظیم کنید. صفت HSPACEافست افقی را بر حسب پیکسل و ویژگی را تنظیم می کند VSPACE- به صورت عمودی لطفاً توجه داشته باشید که این ویژگی‌ها را فقط می‌توان به‌عنوان مقادیر عددی نشان‌دهنده فاصله در پیکسل مشخص کرد. هیچ شرطی برای مقدار تهی برای این ویژگی ها وجود ندارد، اما به طور معمول هر مرورگر از یک مقدار غیر تهی کوچک استفاده می کند. تغییر دادن HTML-سند page1.htmبا اضافه کردن قطعه کد زیر:

7. فایل را با همین نام ذخیره کرده و در مرورگر خود مشاهده کنید. اندازه پنجره مرورگر را تغییر دهید، آن را باریک کنید، به اندازه نصف عرض صفحه نمایشگر. همانطور که می بینیم، تصویر بلافاصله بعد از اولین جمله، جایی که برچسب را قرار داده ایم، درج می شود . اگر اندازه افقی پنجره مشاهده مرورگر را به گونه ای کاهش دهیم که اولین جمله و نقاشی روی یک خط قرار نگیرند، ابتدا جمله نمایش داده می شود و سپس نقاشی در زیر آن نمایش داده می شود و در لبه سمت چپ فشار داده می شود. پنجره مشاهده در سمت راست آن، متنی که به دنبال آن قرار می گیرد شروع به نمایش می کند به طوری که خط پایه خط با لبه پایین تصویر منطبق است.

8. تورفتگی های تصویر را از روی متن با تغییر تنظیم کنید HTML-سند page1.htmبه روش زیر:

9. فایل را با همین نام ذخیره کرده و در مرورگر خود مشاهده کنید.

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

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

اضافه کردن به HTML-سند page1.htmدر برچسب صفت تراز کردنبا معنی ترک کردو ببینید که چیدمان تصویر و متن اطراف آن چگونه تغییر کرده است.

11. تغییر در برچسب HTML-سند page1.htmمقدار ویژگی تراز کردنبر میانهو ببینید که چیدمان تصویر و متن اطراف آن چگونه تغییر می کند.

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

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

12. استفاده از یک ویژگی مرزما می توانیم ضخامت حاشیه اطراف طرح را تعیین کنیم. مقدار مشخصه عددی است که ضخامت را بر حسب پیکسل نشان می دهد. مقدار پیش فرض صفر است که مرز را نامرئی می کند. به نقاشی خود یک حاشیه 5 پیکسل بدهید.

13. طرح رنگ HTML-سند با ویژگی های قرار داده شده در داخل تگ تعیین می شود .

· bgcolor- رنگ پس زمینه سند را مشخص می کند.

· متن- رنگ متن سند را تعیین می کند.

· ارتباط دادن- رنگ عنصر متن انتخاب شده را تعیین می کند، با کلیک بر روی آن، یک پیوند ابرمتن دنبال می شود.

برچسب بزنید همچنین ممکن است شامل ویژگی باشد background= "[نام فایل]"، که تصویری را مشخص می کند که به عنوان پس زمینه متن و سایر تصاویر عمل می کند. مانند هر تصویر دیگری، پس زمینه باید با فرمت ارائه شود GIF(فایل با پسوند *.gif) یا JPEG(فایل با پسوند *.jpgیا *.jpeg). مرورگرها کل فضای پنجره ای که سند در آن باز است را با کپی های متعدد از تصویر پس زمینه پر می کنند، همانطور که در طول ساخت و ساز فضاهای بزرگ دیوارها با کاشی های کوچک (و یکسان) پوشانده می شود.

برای درج عناصر گرافیکی، از تگ استفاده کنید .

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

در صورت امکان، باید از فایل های گرافیکی کوچک استفاده کنید تا زمان بارگذاری صفحه توسط مرورگر را کاهش دهید. استفاده از تصاویر گرافیکی با حجم کل بیش از 100 کیلوبایت در یک صفحه به سختی ارزش دارد. بارگذاری چنین صفحه ای برای اکثر کاربران زمان بسیار زیادی طول می کشد و همه تا پایان بارگذاری منتظر نمی مانند.

گرافیک باید به صورت فایل با پسوند .jpg .gif ارائه شود.

بسیاری از کاربران برای افزایش سرعت مرور اینترنت، پشتیبانی گرافیکی را در مرورگر خود غیرفعال می کنند. ویژگی Alt به شما امکان می دهد متنی ایجاد کنید که در صورت لزوم به جای تصاویر گرافیکی نمایش داده شود.

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

، در یک خط - برچسب جدید قرار می گیرد

مثال:

کد HTML:

نمایش مرورگر:

اضافه کردن پس زمینه به یک سند html

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

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

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

مثال:

کد HTML:

نمایش مرورگر:

قرار دادن متن در اطراف گرافیک در یک سند html

اگر می خواهید یک گرافیک به طور ارگانیک در طراحی صفحه وب شما جا بیفتد، ویژگی ALIGN تگ به شما در این امر کمک می کند. .

این ویژگی اجازه می دهد تا دو مقدار مشخص شود - چپ راست.

مقدار سمت چپ باعث می شود که مرورگر تصویر را در سمت چپ متن و سمت راست در سمت راست آن قرار دهد. اگر می‌خواهید فقط بخش خاصی از متن قالب‌بندی شود، باید از تگ BR با ویژگی CLEAR استفاده کنید که نشان‌دهنده موقعیتی در متن است که مکانیسم بسته‌بندی متن از آن لغو شده است. مقادیر چپ، راست، همه صفت CLEAR به شما امکان می دهد تعیین کنید که متن از چه سمتی - چپ، راست، هر دو - عاری از گرافیک باشد.

لازم به ذکر است که اگر قبلاً از ویژگی ALIGN برای تراز کردن متن با گرافیک در یک صفحه وب خاص استفاده کرده اید، نمی توانید گزینه ای را برای قرار دادن متن در اطراف گرافیک تنظیم کنید.

ویژگی ALIGN به شما امکان می دهد متن را بین دو گرافیک قرار دهید. در این حالت، تگ هایی که تصاویر را توصیف می کنند باید بالای متنی که بین آنها محصور می شود قرار گیرند.

مثال:

کد HTML:

کار آزمایشگاهی شماره 5

هدف کار:آموزش استفاده از تصاویر گرافیکی استاتیک و پویا در اسناد www. یاد بگیرید که ارتباطات بین فایل های فرامتن و پیوندها به نقاط درون یک سند HTML را پیاده سازی کنید.

تکمیل کار

تگ مسئول سازماندهی پیوندها در HTML است …، که اغلب از الگوی زیر استفاده می کند:

ویژگی تگ href می تواند به یک مکان در یک صفحه (پیوندهای داخلی)، یک فایل در یک دیسک محلی یا یک منبع اینترنتی اشاره کند.

1. برای ایجاد یک عکس، با کلیک بر روی آن به لینک، باید کد را تنظیم کنید: ، جایی که End به معنای رفتن به انتهای صفحه است.

شکل 1.1 کد کامل HTML را نشان می دهد.

شکل 1.1. سند HTML

در شکل 1.2. سند در مرورگر ارائه شده است.

شکل 1.2. سند در مرورگر

کنترل سوالات

قرار دادن اشیاء گرافیکی در فایل های HTML.

برای درج تصاویر در یک سند HTML، از ساختار زیر استفاده کنید (کامل ارائه شده است):

توضیحات هر پارامتر این طرح:

src-نام فایل گرافیکی با پسوند (*.jpg، *.gif، *.png پشتیبانی می شود). اگر فایل در دایرکتوری دیگری است، مسیر آن را ارائه دهید.

تراز کردن -تراز تصویر در سند: چپ - در امتداد لبه چپ. راست - در امتداد لبه سمت راست.

بالایا texttop- لبه بالایی تصویر را با خط بالای خط متن فعلی تراز کنید.

وسط- خط پایه خط متن فعلی را با مرکز تصویر تراز می کند.

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

پایینیا خط پایه- لبه پایین تصویر را با خط پایه خط متن فعلی تراز کنید.

absbottom- لبه پایین تصویر را با لبه پایین خط متن فعلی تراز می کند.

مرز- قاب دور عکس مقدار پیش فرض 0 (بدون قاب) است.

عرض-عرض تصویر بر حسب پیکسل

ارتفاع -ارتفاع تصویر بر حسب پیکسل

Hspace -افست افقی تصویر گرافیکی بر حسب پیکسل. پارامتر مورد نیاز نیست

Vspace -افست عمودی بر حسب پیکسل. پارامتر مورد نیاز نیست

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

نام -نام تصویر را مشخص می کند. برای یک تصویر معمولی که با چیزی مرتبط نیست، این پارامتر اصلا ضروری نیست.

lowsrc -نام یک فایل گرافیکی با پسوند حاوی تصویر جایگزین با کیفیت پایین تر (و در نتیجه اندازه کوچکتر) نسبت به تصویر مشخص شده در پارامتر src. مرورگرهایی که از این گزینه پشتیبانی می کنند ابتدا تصویر را از lowsrc بارگذاری می کنند و سپس آن را با تصویر src جایگزین می کنند. پارامتر مورد نیاز نیست

برای درج تصاویر در HTMLدو فرمت اصلی استفاده شده GIF و JPEG هستند. فرمت GIF می‌تواند انیمیشن‌های ساده (بنرهای پویا) را ذخیره کند، JPEG برای تصاویر با رنگ‌های زیاد، مانند عکس‌ها، عالی است. فرمت سوم برای گرافیک وب PNG است، اما در طراحی وب زیاد استفاده نمی شود. هر تصویری با فرمت‌های GIF یا JPEG با استفاده از تگ در یک صفحه وب قرار می‌گیرد؛ هیچ برچسب بسته شدنی وجود ندارد.

ویژگی SRC

از طریق ویژگی srcآدرس (URL) فایل تصویر مشخص شده است، یعنی. مرورگر با استفاده از مسیر (URL) مشخص شده در این ویژگی، تصویر مورد نظر را در فهرست سایت پیدا می کند. برای راحتی، همه تصاویر سایت در یک پوشه جداگانه قرار می گیرند که معمولاً نام دارد تصویر. به عنوان مثال، هر تصویر را ترجیحا با فرمت کوچک بگیرید و با نام آن در تصویر پوشه ایجاد شده ذخیره کنید primer.jpg. در ادامه برای آموزش به آن اشاره می کنیم.

خوب، بیایید سعی کنیم یک عکس در صفحه درج کنیم؟ ما کد را می نویسیم (مسیر - URL، نوشته شده بسته به محل پوشه با تصاویر):

src="image/primer.jpg" >

مواردی که بدون آن نمی توانید یک وب سایت ایجاد کنید: ∼ ∼

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

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

صفحه html خود را با تصاویر زیاد نکنید، صفحه باید سبک باشد و بازدیدکنندگان را نترساند. بازدیدکننده باید همیشه اطلاعات اصلی را جذب کند و حواسش پرت نشود؛ فقط در صورت لزوم تصاویر را در HTML وارد کنید.

در صفحه ویژگی‌های تگ BODY، قبلاً گفتم که تصاویر می‌توانند پس‌زمینه یک صفحه html باشند، و اکنون به شما خواهم گفت که چگونه می‌توان از همین تصاویر در سطح بالاتری نسبت به پس‌زمینه استفاده کرد.

و بنابراین، برای درج یک عکس در یک صفحه HTML، به یک برچسب نیاز دارید که دارای مهمترین ویژگی SRC می باشد. این ویژگی برای نشان دادن آدرس تصویر مورد نیاز است. فرض کنید باید یک تصویر image.jpg را در جایی در صفحه html قرار دهید، و تصویر ما در همان پوشه (دایرکتوری) با صفحه قرار می گیرد، سپس باید کد html زیر را بنویسید:

اگر تصویر و صفحه html در پوشه ها یا دایرکتوری های مختلف هستند، باید مسیر تصویر را نسبت به صفحه بنویسید. مثلا صفحه html ما در پوشه یا دایرکتوری اخبار قرار دارد، در همان دایرکتوری یا پوشه یک زیر شاخه (فولدر) پاپ وجود دارد که image.jpg ما در آن قرار دارد، سپس برای درج آن باید اینطور بنویسید. :

علاوه بر ویژگی src تگ چند ویژگی اختیاری اما مهم دیگر وجود دارد:

• عرض - عرض تصویر (شما می توانید پیکسل یا درصد را مشخص کنید).
• ارتفاع - ارتفاع تصویر (شما می توانید پیکسل یا درصد را مشخص کنید).

اگر این ویژگی ها را مشخص نکنید، مرورگر ابعاد واقعی تصویر را بارگذاری می کند. با این حال، نباید با مقادیر این ویژگی ها زیاده روی کرد، زیرا افزایش طول یا عرض تصویر می تواند آن را مخدوش کند، که باعث خراب شدن آن می شود، به عنوان مثال، عکس یک شخص، که در آن نسبت های فرد را تغییر می دهد. تغییر دادن.

همانطور که قبلاً نوشتم، ابعاد تصویر را می توان هم به پیکسل و هم به درصد مشخص کرد. بگذارید فقط یک مثال بزنم:

نمونه دیگری از کدهای html:

مواردی وجود دارد که امکان نمایش گرافیک از جمله تصاویر در مرورگر غیرفعال می شود و برای اینکه صفحه شما معنی خود را از دست ندهد از ویژگی alt استفاده کنید که در صورت بارگذاری نشدن تصویر در صفحه متن جایگزین می نویسیم. . کد html به عنوان مثال:

• سمت چپ - تصویر در سمت چپ و متن کنار آن در سمت راست قرار خواهد گرفت.
• سمت راست - تصویر در سمت راست و متن کنار آن در سمت چپ قرار خواهد گرفت.

در اینجا کد HTML آمده است:

متن کنار عکس

و مرورگر خروجی زیر را خواهد داشت:

متن کنار عکس

کد HTML برای مقدار مناسب:

متن کنار عکس

صفحه html به شکل زیر خواهد بود:

متن کنار عکس

برای جلوگیری از پیچیده شدن متن در اطراف تصویر، می توانید از تگ BR که قبلاً ذکر شد در صفحه Formatting Text in HTML استفاده کنید. به هر حال، تگ BR دارای یک ویژگی واضح است، با مقادیر ارزش خاص خود:

• سمت چپ - متنی را که در سمت چپ تراز می شود قرار ندهید.
• سمت راست - متنی را که در سمت راست تراز می شود قرار ندهید.
• همه - متن را بسته بندی نکنید، که در لبه های چپ و راست تراز می شود.

بدون ویژگی align، متن به طور پیش‌فرض در سمت راست تصویر قرار می‌گیرد و تقریباً یکدست می‌شود. اگر می‌خواهید متن به صورت نزدیک به تصویر نپیچد، می‌توانید از ویژگی‌های زیر استفاده کنید:

• vspace - حاشیه های بالا و پایین را به پیکسل می سازد.
• hspace - حاشیه های جانبی (چپ و راست) را به پیکسل می سازد.

من یک کد html ساده را به عنوان مثال می زنم:

این خیلی عکس زیباست

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

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

صفحه html به شکل زیر خواهد بود:

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

تاریخ انتشار: ۲۵ اردیبهشت ۱۳۹۱