HTML Основи - Показване на изображения

• Може 4, 2024

След като публикувате текста на уебсайта си и го форматирате по свой вкус, е време да подправите страницата с няколко изображения. Изображенията не само могат да добавят цвят и живот на вашите страници, но и можете да ги използвате, за да генерирате текстови ефекти, които биха били трудни или невъзможни за правилен текст и форматиране. Например, изборът на вашия шрифт обикновено ще бъде ограничен до малкия брой шрифтове, за които можете да сте сигурни, че са инсталирани на компютрите на посетителите, тъй като ако не разполагат с шрифта, те няма да го видят на вашия сайт! Всеки път, когато публикувате текст с недостъпен шрифт, компютрите на посетителите ще го направят във всеки наличен шрифт, който е най-близък по стил, който често може да унищожи дизайна на уебсайта Ви.

От друга страна, ако използвате програма за редактиране на изображения, за да заснемете текст с фантастичен шрифт и да го публикувате като GIF или JPEG на вашия сайт, всеки посетител ще го види точно както сте възнамерявали - тъй като сега е снимка на текст, а не самия текст. Това може да ви освободи да използвате фантастични шрифтове в заглавките си и да ги групирате по необичайни начини.

Основният маркер, използван за показване на изображения, е следният:



Горният код ще работи перфектно в HTML. Ако използвате XHTML или искате да сте сигурни, че вашият сайт е готов за XHTML, трябва да добавите наклонена черта, за да затворите маркера, тъй като в XHTML не можете да използвате отворени маркери:



'Src' е кратък за източник и ще го използвате, за да определите пътя на файла към вашето изображение - с други думи, за да кажете на браузъра си къде може да се намери изображението на вашия сайт. Ако държите изображенията си в същата папка като вашите уеб страници, няма нужда да изброявате папката в текста на 'src' - можете просто да въведете името на файла на изображението.

След като посочите своя източник на изображения, можете да подобрите тази основна рамка с различни незадължителни атрибути, за да извлечете максимума от вашите изображения. Един атрибут, който почти винаги трябва да използвате, е атрибутът „alt“. Това ви позволява да определите какъв текст трябва да показва браузърът, ако по някаква причина не е в състояние да покаже вашето изображение. Текстът „alt“ се подготвя по следния начин:



Друг полезен набор от атрибути са етикетите „ширина“ и „височина“. Те ви позволяват да показвате изображения с различен размер от действителния размер на изображението. Можете да ги използвате за ощипване на вашето изображение, така че да се вписва идеално в цялостния ви дизайн на страницата. Въпреки това, като цяло е за предпочитане да промените действителния размер на изображението с помощта на програми за редактиране на изображения и след това да публикувате изображението онлайн, по две причини. Първо, софтуерът за редактиране на изображения почти винаги ще ви даде по-добър външен вид от настройването на размера на ръка. Второ, промяната на етикетите „ширина“ и „височина“ не променя действителния размер на файла на изображението, така че ако имате огромно изображение, което се показва като миниатюра, изображението ще отнеме толкова време, колкото ще се зареди и ще дъвче точно както голяма честотна лента, сякаш сте я показали в пълен размер.

Когато посочвате размера на изображението, можете да изброите височината, ширината или и двете. Размерите се определят от пиксела, както можете да видите по-долу:



Можете също така да „подравните“ вашите изображения, за да ги работи безпроблемно с потока на вашия текст. Ако изберете подравняване вляво, текстът ще започне отдясно на изображението. Ако изберете правилното подравняване, изображението ще се покаже от дясната страна на страницата, а текстът ви ще излезе от лявата страна на изображението и след това ще се прекъсне до нов ред.

Изравняването на изображението се задава, както следва:



Можете също така да зададете подравняването на "отгоре", "отдолу" или "средно", за да направите линията на изображението горе или отдолу на текстовия ред. Ако не зададете подравняване, изображението по подразбиране ще бъде „отдолу“.

Като странична бележка можете да включите своите атрибути на изображение (src, подравняване, alt и т.н.) в произволен ред в маркерите за изображения. Моето лично предпочитание е да изброя първо атрибута 'src', тъй като това е най-основният атрибут и трябва да бъде включен във всеки образен маркер, но можете да използвате каквато последователност ви се струва най-естествена.

Инструкции Видео: Учим HTML за 1 Час! #От Профессионала (Може 2024).