Foto: Reprodução.
Inserir mídia em geral na sua página HTML não é um procedimento muito complicado. Utilizando de apenas algumas tags e observações gerais que devem ser consideradas, é possível facilmente inserir diversas formas de mídia dentro de sua página web.
Iniciando pelo mais simples: imagens são elementos simples e muito usados em qualquer página web, podendo ser colocada na sua através da tag <img>, que é uma tag sem fechamento. ela vem acompanhada de no mínimo 1 elemento chamado de "src". Essa tag pode ser anexada em qualquer lugar dentro da tag <body> que é onde deve ser inserido todo o conteúdo visível do site. Confira a semântica da tag <img> abaixo:
<img src="NomeDaImagem.jpg" alt="Texto" width="500" height="600">
O argumento "src" recebe um texto indicando o caminho da imagem que você quer que seja inserida. Certificando-se que a imagem esteja na mesma pasta que seu documento html, basta colocar o nome da imagem. Caso não esteja é necessário que você indique melhor o caminho, como por exemplo, indicando em qual pasta está a imagem, resultando em "NomeDaPasta/NomeDaImagem.jpg".
O argumento "alt" possui um texto que será exibido apenas caso a imagem que você referenciou não esteja disponível para exibição em caso de algum possível erro que não permita a exibição da imagem. Essa tag também é usada pelos navegadores em algumas funções de acessibilidade, portanto sempre insira nesse argumento um pequeno resumo do que se trata a imagem.
Os argumentos "width" e "height" indicam largura e altura da imagem dentro do seu documento, respectivamente. Vale ressaltar que esses argumentos podem deformar a sua imagem, com isso, recomendo que defina bem as dimensões de sua figura dentro de um editor de fotos para evitar problemas estéticos.
