Альтернативный текст

Картинки в HTML – шпаргалка для новичков

Прежде, чем ответить на вопрос « как вставить картинку в HTML? », следует отметить, что перегружать веб-страницы огромным количеством графического материала не стоит, поскольку это не только улучшит визуальное восприятие ресурса пользователем, но и увеличит время загрузки страницы.

При создании веб-сайтов чаще всего используют графические форматы PNG , GIF и JPEG , а для дизайнерских работ с изображениями — графический редактор Adobe Photoshop , обладающий богатыми возможностями для сжатия и изменения размера изображений без потери качества, что является невероятно важным для веб-разработки.

Как вставить изображение в HTML?

Для того чтобы вставить изображение на HTML-страницу, используется одиночный простой тег:

где xxx — адрес изображения. В том случае, если картинка находится в одной директории со страницей, тег будет выглядеть как:

Однако скоростной и стабильный интернет добрался ещё не во все уголки земного шара, и бывает так, что изображение на веб-сайте попросту не загружается. Для таких случаев существует понятие альтернативного текста.

Он показывается на месте картинки в момент его недоступности, загрузки или в режиме работы браузера « без картинок ». Добавляется он с помощью атрибута alt тега .

Пример добавления альтернативного текста к графическому файлу:

Назначение размеров картинки в HTML

Для того чтобы изменить размеры отображения графического файла, используют теги height и width , где height — высота, а width — ширина, измеряемые в пикселях.

При использовании данных атрибутов браузер сначала выделяет место для графического контента, подготавливает общий макет страницы, отображает текст, после чего загружает саму картинку.

Рисунок помещается в прямоугольник с заданными размерами, а в том случае, если параметры меньше или больше исходных, картинка растягивается или сжимается.

Если атрибуты height и width не используются, браузер загружает изображение сразу, задерживая отображение текста и прочих элементов страницы.

Данные параметры можно указать как в пикселях (размер картинки постоянен и не зависит от разрешения экрана пользователя), так и в процентах (размер картинки зависит от разрешения экрана).

Следует помнить, что в тот момент, когда вы изменяете исходный размер изображения, необходимо сохранять его пропорции.

Для этого достаточно указать значение только одного из параметров ( ширины или высоты ), а значение второго браузер вычислит в автоматическом режиме.

Расположение картинки в HTML

Как и ко многим тегам HTML, к применим атрибут align , который выполняет выравнивание изображения:

 — картинка располагается выше текста;

 — картинка располагается ниже текста;

 — картинка располагается слева от текста;

 — картинка располагается справа от текста.

Картинка-ссылка

В HTML для создания ссылки используется тег :

Для того чтобы задать графическую ссылку, необходимо всего лишь объединить тег изображения с тегом ссылки.

Делается это следующим образом:

Как видите, графическая вставка может быть ссылкой и при клике переадресовывать на любой адрес, записанный в полном или сокращённом варианте.

Как можно сделать картинку фоном в HTML?

Изображение можно не только вставлять на страницу в качестве видимого объекта, но и сделать фоновым. Для определения картинки как фона необходимо в теге прописать атрибут background=”xxx” , где xxx — адрес картинки, указанный таким же способом, как в примерах выше.

Для примера зададим такую текстурную картинку в роли фоновой:

Сохраните изображение в папке с заготовленной заранее страницей и пропишите следующие строки:

   
Фон с текстом.
  

Фоновая картинка на странице задана.

На этом информация о тегах и атрибутах, необходимых для вставки изображения на HTML страницу сайта, исчерпана.

Источник

Applying An Image Texture To Text With HTML And CSS

Join the DZone community and get the full member experience.

This is the ultimate guide to adding texture on text in an HTML page.

On my blog Coding Dude, I often discuss basic and advanced CSS coding. In this tutorial I will show you some more advanced CSS and JavaScript techniques to create visual effects.

So, you have an HTML page with a big nice title. You could make it nicer by putting a texture or pattern on top of text in HTML.

This post I will show a few CSS tricks that will allow you to get nice textured text effects with minimal effort.

For this we will use a couple of seamless and non-seamless textures that you can download for free:

Method 1 – Using the CSS background-clip Property

There’s no CSS property for an HTML text element where you can indicate placing a texture on text. So how do we then apply an image to the text?

We’ll actually need a background layer where the image is set as the background and a foreground layer where the text sits. Then, using CSS, we instruct the browser to clip a portion of the background using the shape of the text in front.

Create an HTML file and add:

h1 class="lava-text">LAVA TEXTh1>

Then, create a CSS file, include it in your HTML file and add the following code:

 background: url(http://www.textures4photoshop.com/tex/thumbs/lava-magma-seamless-texture-free-download-70.jpg) no-repeat center center;

 -webkit-text-fill-color: transparent;

 -webkit-background-clip: text;

 font-family:Catamaran,sans-serif;

 -webkit-text-stroke: 3px #ffaa00;

Want to use a different texture? Simply change the background property to your image.

Here’s the result using the wood texture:

And with some minor CSS modifications and the watercolor texture:

background: url(http://www.textures4photoshop.com/tex/thumbs/watercolor-paint-background-free-thumb32.jpg) repeat center center;

Method 2 – Using svg clippath to Add Texture to Text

SVG can be very useful sometimes for creating text effects. Let’s see how we can add the textures to a text.

We will put in the background image as a simple img element and add a SVG text element inside a clippath element. clipath elements allow using SVG elements as kind of a mask.

img class="svg-clip" src="http://www.textures4photoshop.com/tex/thumbs/lava-magma-seamless-texture-free-download-70.jpg"/>

Lava text

One advantage of this method is that you can use any vector shape as a mask for the texture, not only text.

Method 3 – Using svg fill To Add a Pattern to Text

This method is similar to the previous method using svg .

The difference is that instead of clippath we will now use a fill image for our text. For this we will need to define a pattern element and an image inside.

 image xlink:href="//www.textures4photoshop.com/tex/thumbs/graffiti-wall-texture-free-1-thumb28.jpg">image>

 text x="0" y="0.8em" width="100%" textlength="650" class="headline">Grafittitext>

That’s it. You can change the font used by specifying it in the CSS. Here’s the end result and the full code:

Method 4 – Using mask-image with a PNG texture to Create a Stamp Text Effect

For this method, you will need a texture with transparency. So, something like this grunge PNG grunge texture will work just fine.

The HTML code for this method of applying texture to a text is similar with the other methods:

 h1 class="stamp-text">STAMP CSSh1> 

But the CSS is slightly different as we will make use of the mask-image CSS property:

 -webkit-mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png"); -o-mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");

 -moz-mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");

 -ms-mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");

 mask-image: url("//www.textures4photoshop.com/tex/thumbs/crack-grunge-texture-PNG-thumb24.png");

The mask-image property indicates an image with transparency that will act as a mask. So, where it image is transparent the element on which the mask is applied will also be transparent.

For the H1 element, I added a slight rotation to give it more of a stamp text effect. The end result and the full code looks like this:

Method 5 – Adding Texture on Text With canvas And a Little JavaScript

With this method, we’ll have to use a bit of JavaScript and some creativity. Don’t worry, it’s only a few lines.

The idea is to create an HTML5 canvas and draw the text with a texture. To make things more convenient, we are going to use CSS to configure the texture image. Also, the text we are going to draw in the canvas will be taken from the canvas element itself. We can place text in the canvas element because the browser will just ignore it.

Источник

HTML Images

Images can improve the design and the appearance of a web page.

Example

Example

Example

HTML Images Syntax

The HTML tag is used to embed an image in a web page.

Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image.

The tag is empty, it contains attributes only, and does not have a closing tag.

The tag has two required attributes:

Syntax

The src Attribute

The required src attribute specifies the path (URL) to the image.

Note: When a web page loads, it is the browser, at that moment, that gets the image from a web server and inserts it into the page. Therefore, make sure that the image actually stays in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon and the alt text are shown if the browser cannot find the image.

Example

The alt Attribute

The required alt attribute provides an alternate text for an image, if the user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The value of the alt attribute should describe the image:

Example

If a browser cannot find an image, it will display the value of the alt attribute:

Example

Tip: A screen reader is a software program that reads the HTML code, and allows the user to «listen» to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Image Size — Width and Height

You can use the style attribute to specify the width and height of an image.

Example

Alternatively, you can use the width and height attributes:

Example

The width and height attributes always define the width and height of the image in pixels.

Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads.

Width and Height, or Style?

The width , height , and style attributes are all valid in HTML.

However, we suggest using the style attribute. It prevents styles sheets from changing the size of images:

Example

Images in Another Folder

If you have your images in a sub-folder, you must include the folder name in the src attribute:

Example

Images on Another Server/Website

Some web sites point to an image on another server.

To point to an image on another server, you must specify an absolute (full) URL in the src attribute:

Example

Notes on external images: External images might be under copyright. If you do not get permission to use it, you may be in violation of copyright laws. In addition, you cannot control external images; they can suddenly be removed or changed.

Animated Images

HTML allows animated GIFs:

Example

Image as a Link

To use an image as a link, put the tag inside the tag:

Example

Image Floating

Use the CSS float property to let the image float to the right or to the left of a text:

Example

The image will float to the right of the text.

The image will float to the left of the text.

Tip: To learn more about CSS Float, read our CSS Float Tutorial.

Common Image Formats

Here are the most common image file types, which are supported in all browsers (Chrome, Edge, Firefox, Safari, Opera):

Abbreviation	File Format	File Extension
APNG	Animated Portable Network Graphics	.apng
GIF	Graphics Interchange Format	.gif
ICO	Microsoft Icon	.ico, .cur
JPEG	Joint Photographic Expert Group image	.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG	Portable Network Graphics	.png
SVG	Scalable Vector Graphics	.svg

Chapter Summary

• Use the HTML element to define an image
• Use the HTML src attribute to define the URL of the image
• Use the HTML alt attribute to define an alternate text for an image, if it cannot be displayed
• Use the HTML width and height attributes or the CSS width and height properties to define the size of the image
• Use the CSS float property to let the image float to the left or to the right

Note: Loading large images takes time, and can slow down your web page. Use images carefully.

HTML Exercises

HTML Image Tags

Tag	Description
	Defines an image
	Defines an image map
	Defines a clickable area inside an image map
	Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник