Графика и изображения в HTML, «IMG» маркер за вмъкване на изображения и атрибути за тяхната регистрация

Този човек е известно само,
че той не е в затвора, но защо не седнете - не е известно.
Марк Твен.

Графика и изображения в HTML, «IMG» маркер за вмъкване на изображения и атрибути за тяхната регистрация

T си е урок за това как да вмъкнете картинка в HTML. как да го организира, как да се направи текст поток около изображения и т.н. Известно е, че изображенията направят сайта още по-привлекателен и различен от другите ресурси, така че възможността за използване на маркера и неговите атрибути са много полезни в днешния Интернет. Но най-важното тук - чувство за мярка!







P ereizbytok графики ще доведат за претегляне, HTML-страници и, съответно, ще се увеличи времето си натоварване. В допълнение, наличието на голям брой снимки ще отвлече вниманието на посетителя от основното съдържание на сайта (разбира се, ако графикът не е основното съдържание на сайта). Така че, когато да се спре и да използва изображенията в HTML кода, само когато това е необходимо. А ще имате и щастие!

В урока за атрибутите на тялото маркер, вече говорихме за това как можете да използвате снимка като HTML-документ фон. Сега нека да поговорим за графиките, използвани в "горния слой» HTML-страници.

§ 1. Как да вмъкнете картинка

L За да вмъкнете картинка в маркера HTML IMG се използва с задължителен атрибут на SRC. Този атрибут казва пътя на браузъра, за да графичен файл. Т.е. да вмъкнете картина с logo.jpg име на определено място на страницата (толкова дълго, колкото на страницата, и картината се намира в същата папка (директория)) трябва да бъде на това място, поставете следния HTML-кода:

Аз е образ и страница са разположени в различни директории (папки), трябва да укажете пътя до изображението по отношение на страницата. Например, ако на HTML страница е в (папка) сайта на директория, е поддиректория (папка) изображения, и в която е наш образ logo.jpg, а след това я поставете в същата директория (папка), което трябва да напишете:

В последния случай, браузърът ще покаже кода, както следва:

P omimo задължителен атрибут SRC в тага IMG има няколко допълнителни атрибути. Нека ги разгледаме по-подробно.

§ 2. Размери Images

Н achnom с атрибути, които ви позволяват да определите размера на изображението (или по-скоро, за трасиране на място в размера на страниците). Ето кои са те:







  • ширина - ширината в пиксели на изображението, или процент;
  • височина - височина на изображението в пиксели или проценти.

    E Ако използвате тези атрибути, браузърът първо ще отпусне място в графика, подготовка на формата на документа се покаже текста и едва след това да се зареди изображението. В същото време, той постави на изображението в избрания размер на правоъгълника, дори и ако действителният ширината и височината на изображението по-големи (компрес) или по-малко (участък). В случай, че тези атрибути не са използвани, браузърът ще се зареди изображението веднъж, а на изхода става за нея текст и други елементи се забави.

    Ирен W, и височина на изображението може да бъде определен в пиксели (с размерите на картината ще бъде постоянна, независимо от разделителната способност на екрана), и като процент (размер на картината, ще зависи от разделителната способност на екрана на потребителя). Например:

    § 3. Алтернативен текст

    Ако потребителят в настройките на браузъра, за да забраните на изображението, е възможно вместо на алтернативен текст дисплей картина, която би обяснило, че трябва да има изостават от графика. Това се постига чрез прилагане на ALT атрибута.

    В този случай, браузърът ще запази място на страницата за снимката, но вместо това от снимките показват текста, който пиша в стойността на ALT атрибут:

    P за повторно, това ще се случи, ако потребителят е избрал графика. Ако не е, картината ще се скрие алтернативен текст.

    § 4. Необходимо е хармонизиране на изображения

    С познатия подравняването атрибут можете да контролирате подравняването на изображения във връзка с други елементи на HTML-страници. В подравняване атрибут има няколко стойности, но ние сме най-голям интерес в момента две:
  • лявата - изображението се намира в левия край на страницата и на текста увива около изображението в дясно;
  • Точно така - изображението се намира от дясната страна на страницата и на текста и другите елементи текат около изображението в ляво.

    N Например, HTML-код

    браузърът ще покаже пътя

    Тя ще изглежда така:

    D За да спрете опаковане на текстови изображения могат да бъдат използвани BR маркер (познат от предишния раздел за форматиране на текста в HTML). Ние имаме ясна BR етикет атрибут. което може да отнеме три стойности:

  • лявата - прекратяване на Пренасяне на текста изображения подредени в левия край;
  • Точно така - прекратяване на Пренасяне на текста изображения подредени в десния край;
  • всички - текстови изображения прекратяване обтичане и подравнени в ляво и в дясно.

    § 5. Създаване на подложка около снимки

    P повторно подразбиране, изображенията са вградени в страницата много близо до текста и другите елементи. Ако този дисплей не е изпълнено, тогава можете да зададете полетата около изображението. Това се прави с помощта на следния маркер атрибути IMG:

  • vspace - създава горните и долните граници;
  • hspace - създава страничните полета (ляво и дясно).

    Н Стойностите на тези атрибути е определено в пиксели. Например, ако имаме малко добавка предишния пример:

    получаваме следното:

    Със същото е и с начина, по който цялата "състав" изглежда преди (по-горе).

    § 6. рамката около изображението

    Областта на снимки може да създаде черна рамка с помощта на граничния атрибут. Стойността на този атрибут е посочено в пиксели и определя дебелината на рамката. Например, HTML-код:

    браузърът изглежда така:

    § 7. Заключение

    H и този раздел на HTML таговете. които са необходими, за да вмъкнете снимки на страниците на сайта е завършена. В следващия раздел ще говорим за това как да се създават връзки, и как да свържете картина в HTML.

    Споделете тази страница: