اکثر صفحات وب حاوی گرافیک هستند. به شما امکان می دهد اطلاعات را به صورت رنگارنگ و بصری ارائه دهید. در بسیاری از موارد نشان دادن یک تصویر بهتر از ارائه توضیحات متنی طولانی است.

دو روش برای قرار دادن گرافیک در یک صفحه وجود دارد:

• درج تصاویر فردی؛
• پر کردن پس زمینه با یک تصویر

در هر صورت تصویر گرافیکی از فایل گرفته شده است.

درج گرافیک

درج یک تصویر گرافیکی از یک فایل فرمت گرافیکی در یک صفحه با استفاده از تگ انجام می شود (از انگلیسی، image - image) آدرس فایل را به عنوان آرگومان ویژگی SRC مشخص می کند:

< IMG SRC = "адрес_графического_файла" >

آدرس فایل گرافیکی یا URL یا نام فایل است که به صورت اختیاری دارای یک مسیر است. به عنوان مثال، برای نمایش فایل گرافیکی logotip.jpg، تگ را بنویسید:

< IMG SRC = "logotip.jpg" >

برای افزایش نرخ بیت یک تصویر گرافیکی در یک برچسب می توانید از ویژگی (پارامتر اضافی) LOWSRC استفاده کنید که آدرس فایل گرافیکی را به عنوان آرگومان می گیرد. می توانید دو فایل تصویری ایجاد کنید: یکی (مثلاً فرض کنید logotip.jpg است) حاوی تصویری است که از کیفیت بالاو دیگری (به عنوان مثال logotip.gif) یک تصویر با وضوح پایین است. سپس برچسب:

< IMG SRC = "logotip.jpg" LOWSRC = "logotip.gif" >

...به مرورگر دستور می دهد که ابتدا فایل logotip.gif را دانلود کند و سپس به محض دریافت آن را با فایل logotip.jpg جایگزین کند.

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

< IMG SRC = "logotip.gif" WIDTH = 40 HEIGHT = 20 >

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

تگ زیر بسته بندی گرافیک را از فایل logotip.jpg به سمت راست تنظیم می کند (تصویر در سمت چپ متن قرار خواهد گرفت):

< IMG SRC = "logotip.jpg" ALIGN = LEFT >

اگر می خواهید تصویر را در سمت راست متن قرار دهید، به ویژگی نیاز دارید تراز کردنیک آرگومان اختصاص دهید درست:

< IMG SRC = "logotip.jpg" ALIGN = RIGHT >

برای تنظیم حاشیه های اطراف تصویر، باید یک برچسب از فرم بنویسید:

< IMG SRC = "logotip.jpg" ALIGN = LEFT HSPACE = 20 VSPACE = 10 >

در اینجا اعداد 20 و 10 اندازه حاشیه ها را مشخص می کنند.

نمونه ای از به اشتراک گذاری گرافیک و متون را در نظر بگیرید. دفترچه یادداشت را باز کنید ( ویرایشگر متن Notepad) ویندوز. با استفاده از تگ هایی که در بالا توضیح داده شد، کد HTML را در آن بنویسید. در زیر برنامه ای است که مقداری متن و گرافیک را خروجی می دهد. به عنوان یک فایل گرافیکی می توانید از هر کدام از فایل هایی که دارید استفاده کنید. در اینجا از فایل logotip.gif استفاده شده است.

< HTML >

< HEAD >

< TITLE >تمرین 1< / TITLE >

< / HEAD >

< BODY BGCOLOR = "YELLOW" >

< IMG SRC = "logotip.gif " ALIGN = LEFT >

< H1 >متن در اطراف گرافیک در سمت راست قرار می گیرد< / H1 >

برنج. 657. متن در سمت راست دور تصویر می پیچد

فرصت های گسترده ای برای موقعیت یابی دقیق تصاویر (و همچنین سایر عناصر) در صفحه توسط جداولو سبک ها. اینها عناصر HTMLبعدا در نظر گرفته خواهد شد. برای مثال می توانید جدولی را بدون قاب های قابل مشاهده تعریف کنید و تصاویر، متن ها و سایر عناصر را در خانه های این جدول قرار دهید.

این آموزش به نحوه تزئین یک صفحه وب با افزودن گرافیک به آن می پردازد. ما با رایج ترین فرمت های تصویر آشنا می شویم، متوجه می شویم که از کدام برچسب برای افزودن تصاویر به صفحه استفاده می شود، با زیرنویس های جایگزین و تراز بندی متن و گرافیک می پردازیم. همچنین با ویژگی های اصلی تصاویر آشنا می شویم و نحوه تنظیم عرض و ارتفاع تصویر را یاد می گیریم. در مرحله بعد، چند کلمه در مورد استفاده از تصاویر به عنوان پیوند و اینکه ریز عکسها چیستند. ما با چند نکته کلی برای استفاده از گرافیک در یک صفحه وب نتیجه می گیریم.

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

دو فرمت تصویری که در اینترنت استفاده می شود GIF و JPEG هستند. این برنامه که توسط گروه JPEG (گروه مشترک کارشناسان عکاسی) طراحی و نامگذاری شده است، عموماً برای ذخیره تصاویر با انتقال رنگ صاف، مانند عکس ها، استفاده می شود.

تقریباً تمام عناصر گرافیکی دیگر در قالب GIF (فرمت تبادل گرافیکی) ذخیره می شوند، یک فرمت تبادل داده های گرافیکی. اکنون یک قالب گرافیکی جدید دیگر وجود دارد که محبوبیت پیدا می کند: PNG (Portable Network Graphics). انتظار می رود که به مرور زمان جایگزین فرمت GIF شود. با این حال، برای ذخیره مجدد تمام فایل های گرافیکی خود در این فرمت عجله نکنید، در حالی که هنوز توسط همه مرورگرها پشتیبانی نمی شود.

همه تصاویر با استفاده از یک تگ به یک صفحه وب اضافه می شوند که به آن تگ منبع تصویر می گویند . احتمالاً در حال حاضر شما می توانید تعیین کنید که چه چیزی این ورودیاز تگ واقعی تشکیل شده است ، ویژگی آن (scr) و مقدار این ویژگی (مکان). با این حال، از آنجایی که استفاده از ویژگی scr مورد نیاز است، راحت‌تر است که به این ورودی به عنوان یک برچسب عمومی اشاره کنیم. احتمالاً متوجه شده اید که هیچ تگ پایانی مربوطه برای تگ منبع تصویر وجود ندارد. این یک تگ مستقل است، بنابراین فراموش نکنید که در انتهای آن یک اسلش انتهایی اضافه کنید: .

#1058;D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1/transitional.dtd"> First Images e> این گرافیک به اولین صفحه وب من اضافه شده است. p >

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

مثال کد HTML زیر نشان می دهد که چگونه ویژگی alt به تگ اضافه می شود . مانند ویژگی src، ویژگی alt اطلاعات اضافی درباره تصویر را به مرورگر وب می‌گوید، و همچنین می‌تواند همیشه همراه با یک برچسب استفاده شود. .

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

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

اگرچه ویژگی alt را می توان برای هر تگ تعریف کرد ، مراقب باشید به برخی از عناصر گرافیکی پیامک های نامناسب اختصاص ندهید. به عنوان مثال، اضافه کردن برچسب متن جایگزین به عناصر مختلف طراحی خارجی یک صفحه وب منطقی نیست. برای جلوگیری از چنین خطاهایی، می توانید ویژگی alt چنین عناصری را روی یک مقدار خالی (alt=” ”) تنظیم کنید. اگر هیچ مقدار مشخصه دیگری را تنظیم نکنید، مرورگر تصویر را در اندازه اصلی خود نمایش می دهد و لبه بالایی تصویر را با لبه بالایی رشته متنی مجاور تراز می کند. شما می توانید هر دوی این تنظیمات را با استفاده از تگ های شیوه نامه تغییر دهید.

ویژگی های تصویر
برای برچسب ویژگی هایی ارائه شده است که به شما امکان می دهد اندازه تصویر را تغییر دهید. برخی از این ویژگی ها در زیر ذکر شده است.
ارتفاع- مشخص شده بر حسب پیکسل یا درصد - ارتفاع تصویر را مشخص می کند
عرض— مشخص شده بر حسب پیکسل یا درصد — عرض تصویر را مشخص می کند.

تنظیم ارتفاع و عرض تصویر
ابعاد یک تصویر قرار داده شده در یک صفحه وب را می توان با استفاده از ویژگی های ارتفاع و عرض مشخص کرد. 3 مقدار این ویژگی ها یا به عنوان تعداد ثابت پیکسل یا به صورت درصدی از ابعاد صفحه مشخص می شود. به کد HTML زیر نگاهی بیندازید. در تگ اول، ابعاد تصویر اصلی که قبلا در تصاویر قبلی این درس مشاهده کرده اید، 60 پیکسل به صورت عمودی و 60 پیکسل به صورت افقی تنظیم شده است. در تگ دوم، عرض همان تصویر 6 درصد از عرض صفحه و ارتفاع آن 10 درصد از ارتفاع صفحه تنظیم شده است. شکل نشان می دهد که هر دوی این تصاویر در پنجره مرورگر چگونه به نظر می رسند.

وقتی یک تصویر را در پنجره نمایش می‌دهید، مرورگر هر دو مقدار پیکسل و درصد را به یک اندازه خوب کنترل می‌کند. با این حال، به خاطر داشته باشید که رایانه بازدیدکنندگان صفحه وب شما ممکن است روی وضوح صفحه متفاوتی نسبت به وضوح تنظیم شده برای مانیتور تنظیم شده باشد. چه چیزی از این نتیجه می گیرد؟ به عنوان مثال، وضوح مانیتور روی 800x600 تنظیم شده است. در مثال قبلی، گرافیک اضافه شده به صفحه وب با عرض 6 درصد از عرض صفحه تنظیم شد که در آن وضوح 48 پیکسل خواهد بود. اگر همان تصویر را روی مانیتوری با وضوح 1024x800 مشاهده کنید، 6٪ مشخص شده از عرض صفحه قبلاً با عرض 61 پیکسل مطابقت دارد.

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

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

اگر واقعاً می‌خواهید تصویر فضای مشخصی را در عرض صفحه اشغال کند، از آن استفاده کنید مقادیر درصد. در این صورت، در صفحه نمایش هر مانیتور، تصویر همان قسمتی از صفحه را اشغال می کند که در صفحه نمایش شما وجود دارد. اگر می خواهید وضوح تصویر (اندازه آن به پیکسل) ثابت بماند، از مقادیر بیان شده در پیکسل استفاده کنید.

تراز کردن متن و گرافیک
ویژگی align تگ به شما امکان می دهد تصویر را در لبه راست (مقدار راست) یا چپ (مقدار چپ) رشته متن تراز کنید. نمونه هایی از نحوه استفاده از این ویژگی در شکل نشان داده شده است.

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

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

الف>

که در این مورد، پس از اینکه یکی از بازدیدکنندگان صفحه وب روی این تصویر قرار می گیرد، پیام متنی "This is my self-portrait!" در کنار مکان نما نمایش داده می شود. با کلیک بر روی تصویر، سند DOC2.htm که توسط هایپرلینک به آن اشاره شده است، باز می شود.

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

الف>

همانطور که می بینید با کلیک بر روی تصویر thumbnail.jpg فایل تصویر دیگری (image.jpg) باز می شود. رشته متنی که به عنوان مقدار ویژگی alt داده می شود، به بازدیدکننده می گوید که چگونه تصویر اصلی را باز کند.

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

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

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

از آنجایی که ویژگی alt بسیار مهم است (زیرا توصیه می شود برای هر تگ تعریف شود ، در استفاده از آن مراقب باشید. از محتوا اطمینان حاصل کنید پیام متنیهمیشه با خود تصویر مطابقت داشته باشد، در غیر این صورت بازدیدکنندگان صفحه شما ممکن است گمراه شوند. همین تذکر در مورد جهت عکس: مطمئن شوید که تصاویر با اطلاعات متنی ارائه شده در صفحه وب مطابقت دارند. عکس یک هواپیما در سایت سفر هوایی مناسب است، اما در سایت حیات وحش کاملاً اضافی است.

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

اگر تصویر نمایش داده شده در صفحه وب دارای حق چاپ نیست، می توانید آن را در حافظه رایانه خود کپی کنید. برای این کار کافیست روی این تصویر کلیک راست کرده و از منوی باز شده دستور Save Image As را انتخاب کنید. پس از ذخیره تصویر در رایانه خود، می توانید مانند هر نقاشی دیگری از آن استفاده کنید.

کار عملی شماره 2

درج تصاویر در یک سند HTML

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

ادبیات. یادداشت های سخنرانی

3. آمادگی برای کار. یادداشت های سخنرانی با موضوع "گرافیک" را مطالعه کنید.

لیست تجهیزات. یک کامپیوتر.

وظیفه.

5.1. با تگ های اولیه برای درج تصاویر در یک سند HTML آشنا شوید.

5.2. ویژگی های اساسی برای تبدیل تصویر را بیاموزید.

5.4. یاد بگیرید که چگونه تصاویر را در صفحات وب قالب بندی کنید.

ترتیب کار.

6.1. درج تصاویر در یک صفحه وب

1. باز کن برنامه Paintو مطابق مدل سه طرح در آن ایجاد کنید: هر نقاشی در یک فایل جداگانه است.

Fig.1 Fig.2 Fig.3

این فایل ها را به عنوان ذخیره کنید bloc1.gif، bloc2.gif، bloc3.gifدر پوشه شما

2. ویرایشگر متن Notepad را باز کنید و مطابق نمونه یک صفحه وب ایجاد کنید:

کد صفحه وب:

algorithm.html.

6.2. ایجاد خطوط افقیو اشیاء دیگر

1. ویرایشگر متن Notepad را باز کنید و 2 صفحه وب را مطابق نمونه ایجاد کنید:

قطعه کد صفحه وب:

3. سند به دست آمده را در پوشه خود ذخیره کنید و به فایل یک نام بدهید linii.html.

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

5. یک صفحه وب دوم ایجاد کنید.

قطعه کد صفحه وب:

6. سند به دست آمده را در پوشه خود ذخیره کنید و به فایل یک نام بدهید list.html.

7. بدوید مرورگر اینترنتکاوشگر صفحه وب حاصل را در آن مشاهده کنید.

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

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

2. یک نقشه تصویری به گونه ای ایجاد کنید که وقتی ماوس خود را روی یک دستگاه کامپیوتری خاص قرار می دهید، نام آن نمایش داده شود.

3. در همان صفحه، یک خط در حال اجرا ایجاد کنید:

آیا دوست داری بازی کنی بازی های کامپیوتری، عاشق برنامه ریزی برای خودتان هستید!

4. سند به دست آمده را در پوشه خود ذخیره کنید و به فایل یک نام بدهید carta.html.

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

7.1. فایل ها algorithm.html, linii.html، list.html، carta.htmlدر پوشه شما

8. کنترل سوالات.

8.1. کدام تگ برای درج تصاویر در یک سند HTML استفاده می شود؟

8.2. کدام ویژگی به شما اجازه می دهد نام یک فایل تصویری را مشخص کنید؟

8.3. چه ویژگی هایی به شما امکان می دهد اندازه تصویر را تعیین کنید؟

8.4. کدام ویژگی به شما امکان می دهد موقعیت یک تصویر را نسبت به متن اطراف تنظیم کنید؟

8.5. چه ویژگی به شما امکان می دهد ضخامت کادر اطراف تصویر را تعیین کنید؟

8.6. . چه ویژگی هایی میزان فضای خالی در سمت چپ، راست، بالا و پایین تصویر را تعیین می کند؟

8.7. برای ایجاد نقشه های تصویری از چه برچسبی استفاده می شود؟ چه ویژگی هایی استفاده می شود؟

8.8. چه تگ برای ایجاد یک خط در حال اجرا طراحی شده است؟

ضمیمه.

گرافیک

قرار دادن تصاویر گرافیکی در یک صفحه وب فرمت های فایل های گرافیکی

دو فرمت گرافیکی محبوب در اینترنت GIF و JPEG هستند.

معمولا استفاده کنید:

JPEG - برای عکس ها و نقشه های طرح رنگ بسیار پیچیده با انتقال رنگ صاف (در پسوند به صورت JPG نوشته شده است).

GIF - برای آرم ها، کتیبه ها، سرفصل ها، نقاشی ها با حاشیه رنگی واضح.

فرمت GIF

تصاویر در این فرمت از 256 رنگ پشتیبانی می کنند. فرمت GIF دارای سه فرمت است ویژگی های اضافی:

انیمیشن.با استفاده از یک ویرایشگر GIF متحرک، مونتاژ یک "کارتون" ساده آسان است: فریم های جداگانه بکشید، زمان تاخیر را در ترتیب نمایش تنظیم کنید، "فیلم را حلقه کنید" یا فریم ها را فقط یک بار نشان دهید. وقتی انیمیشن آماده شد، به عنوان یک فایل GIF معمولی روی دیسک نوشته می شود. اما این فایل نه یک، بلکه مجموعه ای کامل از GIF ها و اطلاعات پیکربندی مختلف را شامل می شود.

در HTML هیچ تفاوتی بین نمایش یک GIF ساده یا یک انیمیشن متحرک وجود ندارد.

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

اسکن درهم آمیختهبرای GIF های بزرگ اعمال می شود. تصویر به اندازه تصویر اصلی به چهار قسمت تقسیم شده است. قسمت اول شامل 1، 5، 9 و غیره است. خطوط تصویر اصلی دوم - 2، 6، 10، و غیره. سوم - سوم، هفتم، یازدهم و غیره. چهارم - چهارم، هشتم، دوازدهم و غیره.

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

فرمت JPEG

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

قطعا، کیفیت بالااندازه فایل را تحت تاثیر قرار می دهد. ولی فرمت jpegیک ویژگی دارد: در یک ویرایشگر JPG، هنگام نوشتن بر روی دیسک، می توانید درجه کیفیت مورد نیاز خود را مشخص کنید و در نتیجه، با متعادل کردن نوار "کیفیت-اندازه فایل"، به مصالحه لازم دست یابید. در واقع، اگر تنها 10000 رنگ از میلیون‌ها رنگ یک عکس اسکن شده باقی بماند، با جایگزینی رنگ‌های باقی‌مانده با رنگ‌های نزدیک، تشخیص چنین جایگزینی با چشم تقریباً غیرممکن خواهد بود و اندازه فایل به میزان قابل توجهی کاهش می‌یابد.

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

عنصر

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

نحو:

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

ویژگی های:

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

نحو:

عرض(عرض ناحیه را بر حسب پیکسل های اختصاص داده شده در پنجره برای تصویر تنظیم می کند).

نحو:

ارتفاع(ارتفاع ناحیه را بر حسب پیکسل های اختصاص داده شده در پنجره برای تصویر تنظیم می کند).

نحو:

hspace(فضای سفید را بر حسب پیکسل در سمت راست و چپ تصویر مشخص می کند).
نحو:
مرز(ضخامت قاب دور عکس را بر حسب پیکسل تنظیم می کند).
نحو:
vspace(فضای سفید را بر حسب پیکسل در بالا و پایین تصویر مشخص می کند).
نحو:
ismap(اجازه می دهد تا از تصاویری استفاده شود که برخی از قسمت های آنها پیوند دارند و امکان پیمایش را فراهم می کند. چنین تصاویری نقشه نقشه نامیده می شوند، آنها در ارتباط با عنصر استفاده می شوند. . در این حالت، پاسخ به کلیک بر روی نقشه توسط سرور انجام می شود).
نحو:

نقشه استفاده (امکان استفاده از تصاویری که برخی از قسمت‌های آن با کارت‌ها مرتبط هستند را می‌دهد، آنها در ارتباط با عنصر استفاده می‌شوند.

کارت های تصویری

عنصر

عنصر

نحو:

عنصر

عنصر نقاط مهمی را بر روی نقشه تعریف می کند که می توان برای پیوند روی آنها کلیک کرد. عنصر تگ پایانی ندارد. کار با تصاویر نقشه در آن راحت است نرم افزار استانداردبرای ویندوز - ویرایشگر Paint، برای آن تصویر باید به فرمت BMP تبدیل شود. با استفاده از شبکه در حالت های زوم با فشار دادن Ctrl+G و انتخاب ابزار Selection هنگامی که نشانگر ماوس به صورت ضربدری نازک می شود، مختصات مکان نما را می توان با دقت یک پیکسل تعیین کرد. چنین دقتی می تواند هنگام تنظیم مختصات مناطق فعال نقشه بسیار مفید باشد. عنصر از ویژگی های مختلف پشتیبانی می کند:

نحو: URL ">

alt(متن جایگزین را برای مرورگرهایی که پشتیبانی نمی کنند تنظیم می کند این عنصر).
نحو:

عنوان(یک متن جایگزین برای مرورگرها تنظیم می کند که وقتی ماوس را روی این عنصر نگه می دارید ظاهر می شود).

نحو:

شکل ها(شکل ناحیه فعال را روی نقشه و مختصات آن تنظیم می کند، می تواند مقادیر زیر را بگیرد: "دایره" coords=X,Y,R که در آن X,Y,R - مختصات مرکز دایره و شعاع آن , "پلی" coords=X1,Y1, X2,Y2,X3,Y3..., که در آن X1,Y1,X2,Y2,X3,Y3... - مختصات رئوس چند ضلعی، اگر چند ضلعی مستطیل باشد، سپس کافی است رئوس بالا سمت چپ و پایین سمت راست آن را "rect" مشخص کنید = X1,Y1,X3,Y3).
نحو: دایره"کوردها= X، Y، R >

نمونه تصویر - نقشه ها:

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

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

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

در این مثال، ما از یک تصویر GIF استفاده می کنیم که در فایلی به نام pictl.gif قرار دارد که به نوبه خود در پوشه ای به نام images قرار دارد. لازم به ذکر است که اسلش ها اسلش هایی هستند که در جهت مخالف نسبت به زمانی که در مسیرهای فایل سیستم عامل های خانواده DOS و Windows استفاده می شوند، مایل هستند. واقعیت این است که در ابتدا سرورهای وب مبتنی بر سیستم عامل یونیکس بودند که سیستم فایل را با چنین اسلش هایی پشتیبانی می کرد. و حالا مهم نیست چه سیستم عاملی سرور را با وب سایت پشتیبانی می کند، همه مسیرها به یک شکل نوشته شده و به درستی پردازش می شوند. نرم افزارسرور

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

در صورتی که تصویر گرافیکی همچنان توسط مرورگر نشان داده شود، زمانی که کاربر روی تصویر گرافیکی مورد نظر قرار می‌گیرد، متن نمایش متنی جایگزین به‌عنوان یک «اشاره» نمایش داده می‌شود.

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

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

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

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

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

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

حالا وقت آن است که با مثال هایی ببینیم که چگونه می توانیم یک عکس را قرار دهیم و آن را با متنی ترکیب کنیم که باید دور تصویر گرافیکی مورد نظر بپیچد.

لیست 1.11

"http://www.w3.org/TR/htm!4/strict.dtd">




<р>
این متنی است که دور تصویر می پیچد.
این متنی است که دور تصویر می پیچد.

ظاهر این سند HTML هنگام نمایش با استفاده از یک مرورگر در شکل نشان داده شده است. 1.11.

برنج. 1.11. پنجره مرورگر که نتیجه نمایش فایل نشان داده شده در لیست 1.11 را نشان می دهد

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

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

لیست 1.12

"http://www.w3.org/TR/html4/strict.dtd">


<р>این متنی است که دور تصویر می پیچد. align="ift">
این متنی است که دور تصویر می پیچد. این متنی است که دور تصویر می پیچد.
این متنی است که دور تصویر می پیچد.

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

حال بیایید به نحوه عملکرد تراز عمودی نگاه کنیم. اگرچه پارامتر alignment در تگ تصویر درج شده است، بزرگترین تغییرات در متن اطراف تصویر مشاهده می شود. بیایید تأثیر پارامتر تراز عمودی را در یک مثال ببینیم.

برنج. 1.12. پنجره مرورگر که نتیجه نمایش فایل نشان داده شده در لیست 1.12 را نشان می دهد

لیست 1.13

"http://www.w3.org/TR/html4/striqt.dtd">




<р>این متنی است که دور تصویر می پیچد. align="middle">
این متنی است که دور تصویر می پیچد. این متن است
که دور عکس می پیچد
این متنی است که دور تصویر می پیچد.

نتیجه نمایش این سند HTML در شکل نشان داده شده است. 1.13.

برنج. 1.13. پنجره مرورگر که نتیجه نمایش فایل نشان داده شده در لیست 1.13 را نشان می دهد

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

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

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

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

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

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

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

پارامترهایی که در نظر گرفته ایم برای اجرای صحیح فایل های ویدئویی در محتوای صفحه وب کاملاً کافی است. یک مثال مفصل را در نظر بگیرید (شکل 1.14).

فهرست 1.14

"http://www.w3.org/TR/html4/strict.dtd">
.

<р>متن ساده

برنج. 1.14. پنجره مرورگر که نتیجه نمایش فایل نشان داده شده در لیست 1.14 را نشان می دهد

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

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

بنابراین، برای اینکه مشاهده یک صفحه وب با پخش صدا همراه باشد، باید تگ را در کد صفحه وارد کنید. . برچسب نه در بدنه صفحه وب، بلکه در عنوان آن، یعنی بین تگ ها قرار می گیرد و. این تگ دارای یک پارامتر src اجباری است که مقدار آن URL افزونه است فایل صوتی. لازم به ذکر است که مرورگرها دارای ضمانت شناسایی و پخش فایل های صوتی MIDI و WAV هستند. پخش فرمت های دیگر، مانند MP3 و Real Audio، تنها در صورت اتصال ماژول های اضافی به مرورگرها امکان پذیر است.

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

این بحث ما در مورد استفاده از چند رسانه ای و اشیاء گرافیکیدر طراحی صفحات وب و رفتن به قسمت بعدی فصل اول.

در این لحظهتقریباً تمام تصاویر موجود در وب در دو فرمت GIF و JPEG هستند. سومین رقیب شایان ذکر، فرمت PNG، برای پشتیبانی و توجه مرورگر رقابت می کند. به علاوه - بررسی کوتاهفرمت های گرافیکی آنلاین "سه بزرگ". اطلاعات دقیق تر در فصل های اختصاص داده شده به هر یک از فرمت ها ارائه شده است.

gif- GraficInter change Format را می توان قالب فایل وب سنتی نامید. این اولین فرمت فایلی بود که توسط مرورگرهای وب پشتیبانی شد و تا به امروز به عنوان فرمت اصلی گرافیکی وب ادامه دارد.

خواص آن به شرح زیر است:

• - از بیش از 256 رنگ پشتیبانی نمی کند (کمتر ممکن است و اغلب ضروری است).
• - از یک پالت رنگ استفاده می کند.
• - از فشرده سازی بدون تلفات با استفاده از روش LZW استفاده می کند (که مشابه روش مورد استفاده در بایگانی PKZIP است و بنابراین، فایل های GIF عملاً در آینده فشرده نمی شوند).
• - پشتیبانی از اسکن در هم تنیده.
• - یک قالب جریان است، یعنی نمایش تصویر در حین انتقال شروع می شود.
• - به شما امکان می دهد یک ویژگی شفاف را به یکی از رنگ های موجود در پالت اختصاص دهید که هنگام ایجاد به اصطلاح GIF های شفاف استفاده می شود.
• - دارای قابلیت ذخیره چندین تصویر در یک فایل که در ساخت GIF های متحرک استفاده می شود.
• - از قابلیت درج بلوک های کنترلی در فایل پشتیبانی می کند که به شما امکان می دهد نظرات را در فایل وارد کنید (به عنوان مثال در مورد حق چاپ)، تاخیر بین نمایش تصاویر و غیره.

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

دومین فرمت تصویر محبوب در وب JPEG است - گروه مشترک کارشناسان عکاسی. این شامل اطلاعات رنگ 24 بیتی است. این 16.77 میلیون رنگ است، در مقابل 256 رنگ در فرمت GIF. JPEG از آنچه به عنوان فشرده سازی با اتلاف شناخته می شود استفاده می کند. این بدان معنی است که برخی از اطلاعات تصویر در طول فرآیند فشرده سازی دور ریخته می شود، اما در بیشتر موارد کاهش کیفیت تصویر بی ضرر است و اغلب حتی قابل توجه نیست.

عکس ها یا هر تصویری با درجه بندی رنگی صاف بهتر است در فرمت JPEG ذخیره شود زیرا کیفیت تصویر بالاتری را در اندازه فایل کوچکتر ارائه می دهد. با این حال، JPEG نیست بهترین راه حلبرای تصاویر گرافیکی با مناطق تک رنگ، زیرا این فرمت تمایل به لکه دار کردن رنگ ها دارد و فایل حاصل معمولاً تا حدودی بزرگتر از فایل GIF برای همان تصویر خواهد بود.

همچنین فرمت گرافیکی سومی وجود دارد که برای ادامه استفاده در وب رقابت می کند. این فرمت PNG - Portable Net work Graphic است که با وجود برخی مزایا، از سال 1994 کم و بیش در سایه بوده است. اخیراً مرورگرها شروع به پشتیبانی از PNG به عنوان گرافیک درون خطی کرده اند، اما PNG این پتانسیل را دارد که به یک فرمت بسیار محبوب در وب تبدیل شود. به همین دلیل است که در اینجا در "سه بزرگ" گنجانده شده است. PNG می‌تواند رنگ‌های نمایه‌شده 8 بیتی، نیمه‌تون‌های 16 بیتی، یا تصاویر تمام رنگی 24 بیتی را با استفاده از یک طرح فشرده‌سازی بدون اتلاف پشتیبانی کند. این منجر به کیفیت تصویر بالاتر و گاهی اوقات اندازه فایل کوچکتر از فرمت GIF می شود. بعلاوه، فایل های PNGدارای برخی ویژگی‌های عالی، مانند کنترل گامای داخلی، و سطوح شفافیت متغیر (این به الگوی پس‌زمینه اجازه می‌دهد تا از طریق سایه‌های ملایم نمایش داده شود).

از آنجایی که تصاویر وب فقط روی یک صفحه نمایش وجود دارند، از نظر فنی اندازه گیری وضوح آنها بر حسب پیکسل در اینچ (ppi - pixelsperinch) صحیح است. واحد دیگر وضوح، تعداد نقاط در اینچ (dpi - dotsperinch) است که به وضوح تصاویر چاپ شده اشاره دارد و به وضوح دستگاه چاپ بستگی دارد.

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

ایجاد تصاویر با وضوح 72 ppi عملی است (این بهترین راهبرای نمایش روی صفحه)، فقط به ابعاد کلی در پیکسل توجه کنید. در فرآیند ایجاد گرافیک در وب، به هیچ وجه نمی توانید از اینچ استفاده کنید. آنچه اهمیت دارد اندازه تصویر در مقایسه با سایر تصاویر موجود در صفحه و اندازه کلی پنجره مرورگر است.

به عنوان مثال، بسیاری از کاربران همچنان از نمایشگرهای 14 اینچی با وضوح 640x480 پیکسل استفاده می کنند. برای اطمینان از اینکه صفحه نمایش گرافیکی کل فضای صفحه را پر می کند، بهتر است عرض آن از 600 پیکسل بیشتر نباشد (با توجه به اینکه برخی از پیکسل های سمت راست و چپ برای پنجره و نوار اسکرول استفاده می شوند). اندازه سایر دکمه ها و تصاویر صفحه باید بر حسب پیکسل نسبت به بنر اندازه گیری شود که عرض آن 600 پیکسل است.

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

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