Додајте ХТМЛ наслове на Веб слике у 9 једноставних корака
Слике додају живот на своје веб странице и скрећу пажњу гледаоца. Написи пружају додатне информације о вашим веб сликама, али их је тешко додати на веб странице без напредних вјештина ХТМЛ и ЦСС. Ево поузданог начина додавања једноставног, али атрактивног наслова на слику која остаје са сликом гдје год да га премјестите на веб страници.
9 корака до ХТМЛ слике
Додајте натпис на слику и помјерите их где год желите:
- Додајте слику на своју веб страницу.
- У ХТМЛ-у за своју веб страницу поставите ознаку див око слике: <див> <имг срц = "УРЛ" алт = "алтернативни текст" видтх = "видтх" хеигхт = "хеигхт" />
- Додајте атрибу стила ознаку див: <див стиле = "" > <имг срц = "УРЛ" алт = "алтернативни текст" видтх = "видтх" хеигхт = "хеигхт" />
- Поставите ширину дива на исту ширину као и слика, са својом карактеристиком : <див стиле = " видтх: имаге видтх пк; "> <имг срц = "УРЛ" алт = "алтернативни текст" видтх = "видтх "висина =" висина "/>
- За наслове који су нешто мањи од окружења, додајте величину слова величине у див стиле: <имг стиле = "видтх: имаге видтх пк; фонт-сизе: 80%; "> <имг срц = "УРЛ" алт = "алтернативни текст" видтх = "видтх" хеигхт = "хеигхт" />
- Написи изгледају најбоље ако су центрирани испод слике, па додајте својство текста текстуалном стилу: <див стиле = "видтх: имаге видтх пк; фонт-сизе: 80%; тект-алигн: центер; "> имг срц = "УРЛ" алт = "алтернативни текст" видтх = "видтх" хеигхт = "хеигхт" />
- На крају, додајте мало додатног размака између слике и наслова додавањем атрибута стила слици са облагањем стила паддинг-боттом : <див стиле = "видтх: имаге видтх пк; фонт-сизе: 80%; тект- алигн: центер; "> <имг срц =" УРЛ "алт =" алтернативни текст "видтх =" видтх "хеигхт =" хеигхт " стиле =" паддинг-боттом: 0.5ем; " />
- Затим додајте наслов текста испод слике: <див стиле = "видтх: имаге видтх пк; фонт-сизе: 80%; тект-алигн: центер;"> <имг срц = "УРЛ" алт = "алтернативни текст" = "ширина" висина = "висина" стиле = "паддинг-боттом: 0.5ем;" /> Ово је мој наслов
Отпремите веб страницу на свој сервер и тестирајте је у прегледачу.
Написи за напајање
- Ширина : ЦСС димензије могу бити у различитим мерењима, тако да обично морате укључити тип мерења. На примјер: ширина: 100 пк ; Међутим, димензије ХТМЛ слике су увек у пикселима, тако да оставите мерење искључено. видтх = "100"
- Ако ширину ширине ширите од ширине слике, наслов се може појавити поред слике. Ако је то оно што желите, додајте ознаку <бр> директно прије наслова и након ознаке слике.