HTML елемент img

Употреба: когато искаме да вмъкнем изображение, което да бъде част от съдържанието на страницата.

Например: снимка на продукт, лого и пр.

Не използвайте img елемент, когато желате изображението да бъде фон - това се прави изцяло със CSS!

HTML елемент img

Елемента няма съдържание!

Има два задължителни атрибута:

src - URL на файлът, от който искате да се зареди изображението.

alt - кратко описание (2-3 думи) на съдържанието на изображението.

Атрибута src

Като стойност задаваме URL - за предпочитане е да бъде релативен път до файла с изображението.

Но ако вашия файл е разположен на друг сървър - задавате абсолютното URL.

Какво е Hotlinking

Не използвайте URL към изображения които се намират на чужд сървър (hotlinking) тъй като това натоварва въпросния сървър.

Повечето сървъри забраняват това автоматично.

Атрибута alt

Атрибута alt дава алтернативно (текстово) описание на съдържанието, което представяме с изображението. Използвайте го винаги, за да бъде вашето съдържание достъпно.

Текстът в alt е текстът, който ще се появи до placeholder, когато изображението не може да бъде заредено

Текстът в alt се използва от гласовите браузъри!

Една чудесна възможност да сложите в него ключова дума за SEO!

Атрибути width и height

HTML5 поддържа атрибутите width и height, чрез които указваме колко пиксела да заема даденото изображение.

Това може да направим и със CSS, което е предпочитания вариант, тъй като дава много повече възможности!

За да не променяме оригиналните пропорции, трябва да зададем само width или само height. Браузърът автоматично ще изчисли другото измерение.

Анимирани (gif) изображения?

Съвременните браузъри поддържат .gif файлове!

gif by Belthazor1@deviantart.com

HTML елемент img - полезни ресурси

Повече за HTML images

Oбщо описание за употребата на изображения в HTML: HTML Images@w3schools

Сбит справочник за HTML img елемента: HTML <img> Tag@w3schools

Преоразмеряване на изображения с ImageMagick

Инсталирайте ImageMagick за Windows

Ако искате да преоразмерите всички изображения от дадена папка (big/) в друга папка (small), отворете някакъв терминал (GitBash) и следвайте инструкциите по-долу

            # бъдете сигурни че имате подобма структура:
            images/
            ├── big
            │   └── img1.jpg
            └── small/


            # влезте в папака big/
            cd images/big

            # преоразмеряване на всички изображения с разширение .jpg до такива с широчина 250 пиксела и запазване в папка "../small"
            magick mogrify -resize 250 -path ../small *.jpg

        

HTML елемент a (anchor)

            <a href="URL">content</a>
        

URL – идентификатор на ресурс в WWW или на локален файл. Задължителен атрибут!

content – това, което ще се изобрази в страницата като линк. Може да бъде текст, изображение или друг HTML елемент.

Ако пропуснете content, то браузърът няма да изобрази линка!

Браузърите слагат дефоултен CSS за посетени/непосетени линкове. Детайлното им оформление ще разгледаме в частта за CSS.

Атрибут target

            <a href="URL" target="_blank">content</a>
        

Атрибута target задава къде да се отвори ресурсът към който сочи линка.

Стойности:

_self: това е дефоултната стойност. Ресурсът ще се отвори в текущия таб/прозорец.

_blank: ресурсът ще се отвори в нов таб/прозрец на браузера

frame_id: ресурсът ще се отвори в зададения фрейм. Ще разгледаме по-подробно в темата за iframes.

Атрибут title

            <a href="URL" title="more info">content</a>
        

title е глобален атрибут, който често се употребява при хипер-линкове.

В него можем да зададем допълнителна информация, която ще се изобрази като tooltip, когато мишката е върху елемента.

Позиционирайте мишката върху долния линк, и вижте какво прави атрибута title

what is tooltip

SEO и title атрибута

            <a href="images/redApples.jpg" title="buy red apples">
                <img src="images/redApples.jpg" alt="red apples">
            </a>
        

Линк към bookmark в страницата

При дълги документи можем да маркираме отделни секции (bookmarks) в страницата ни, и да сложим линкове, които сочат към тях.

Използва се, когато слагаме съдържание на нашата страница

Линк, който да навигира страницата в началото и пр.

Когато искаме външен линк, да отвори страницата ни в определената секция

Линк към bookmark в страницата - как?

За целта са необходими 2 HTML елемента:

Единият ще маркира секцията (bookmark), мястото в документа към което искаме да направим прехода. Това се осъществява като добавим атрибут id (или name) към съответния елемент.

Вторият елемент ще бъде самия линк (a елемент), които ще ни отведе до маркираното място в страницата.

Линк към bookmark в страницата - как?

            
            Към Chapter 4

            

            
            
Chapter 4
            
Lorem ipsum dolor sit amet, consectetur
        

Разгледайте внимателно примера на следващата страница, в който участва дадения фрагмент.

Линк към bookmark в страницата - приемр

Кликнете "edit on Codepen" за да разгледате примера директно в codepen.

See the Pen Link to bookmark in the page by Iva Popova (@webdesigncourse) on CodePen.

Повече за HTML hyperlinks

Общо описание за употребата на хипер-линкове в HTML: HTML Links@w3schools

Сбит справочник за HTML a елемента: HTML <a> Tag@w3schools

Структура на проекта

Работете в папка HW със следната структура:

            HW/
            ├── images/
            │   ├── CV/
            │   │   └── IvaPopova.png
            │   └── personalPage/
            │       ├── my_cat1.png
            │       ├── my_cat2.png
            │       ├── my_cat3.png
            │       ├── my_dog1.png
            │       └── my_dog2.png
            ├── pages/
            │    ├── CV.html
            │    └── personalPage.html
            ├── index.html
        

Имената на файловете с изображенията са примерни.

Трябва да добавите и index.html, който да е в главната папка на проекта (HW/) и ще служи за home страница. В него ще сложите линкове към вашите домашни

CV update (CV.html)

Добавете ваша снимка в CV-то си.

Включите линкове към сайтовете на компаниите за които сте работили и университетите в който сте учили.

Валидирайте CV.html!

Personal Page update (personalPage.html)

Добавете секция "Домашни Любимци" в която поместете няколко (поне 5) снимки на любими ваши животни. Използвайте width/height за да изглеждат снимките по-добре. Бихте могли да добавите и линкове към сайтове свързани с тези животни.

Разбира се, вместо "Домашни Любимци", можете да използвате каквато и да е друга тематика (книги, държави, планини и пр.), но изискванията за изображения и линкове остават.

Ако ще използвате изображения от Интернет, уверете се, че те са с необходимите права за ползване.

Валидирайте personalPage.html

Създаване на главна (home) страница на проекта

Уверете се, че в главната папка (hw/) сте създали файла index.html

Сложете заглавие на страницата. Например: "Списък със реализирани от мен задачи"

В него добавете линкове към:

CV.html

personalPage.html

Валидирайте index.html