Esta imagem foi inserida com <img
src=servers.gif align=middle>
Para inserir imagens no documento usa-se o marcador:
<img src=URL align=left|right|top|middle|bottom height=n width=n vspace=n hspace=n border=n alt=string usemap=#string ismap>
O atributo src especifica o URL onde está a imagem. O atributo align serve para definir o alinhamento da imagem que pode ser left ou right (à esquerda ou à direita, respectivamente, em relação ao bloco), top, middle ou bottom (superior, no centro ou inferior, respectivamente, em relação à linha). Os atributos height e width especificam as dimensões, em pixels, na vertical e na horizontal, respectivamente, da imagem. A maior vantagem de usar estes dois atributos é que, se especificados, o browser não precisa esperar chegar a imagem para mostrar a página, pois já saberá de antemão o espaço que a imagem ocupará. Os atributos vspace e hspace especificam a distância, em pixels, entre a imagem e o texto, na vertical e na horizontal respectivamente.
No caso de a imagem servir como um link, ou seja, estar dentro de um marcador a, o atributo border definirá a largura, em pixels, da borda ao redor da imagem. Em especial, border=0 significa não por borda ao redor da imagem. O atributo alt define um texto alternativo que será mostrado se por algum motivo a imagem não puder ser exibida (por exemplo, a pessoa que acessou a página não dispõe de um terminal gráfico). Os atributos usemap e ismap serão explicados na próxima seção. Veja um exemplo de utilização deste marcador:
Esta imagem foi inserida com <img
src=servers.gif align=middle>
A maioria dos browsers só reconhece imagens nos formatos gif e jpg, por isso tenho cuidado ao usar imagens em outros formatos. O melhor mesmo seria converter a imagem para um dos dois formatos citados anteriormente. Os browsers mais recentes reconhecem duas extensões do formato gif: imagens gif com fundo transparente e imagens gif animadas. Existem diversos programas para criar uma imagem com fundo transparente. Se você usa Unix e possui um interpretador PERL, pode usar o transgif. Para criar imagens animadas pode-se usar o gif animator ou o gif construction set (gifcon). É preciso ter cuidado ao usar imagens gif com fundo transparente e imagens gif animadas pois nem todos os browsers entendem estes formatos.
Para criar um mapa clicável é preciso usar, junto com o marcador img, os atributos ismap, para especificar que a imagem é clicável, e usemap para especificar o nome do mapa que define as regiões clicáveis da imagem. O mapa é definido com o marcador:
<map name=string></map>
O atributo name especifica o nome do mapa. Para definir regiões clicáveis usa-se o marcador:
<area nohref|href=URL shape=rect|circle|poly|default coords=x alt=string target=string>
Se queremos definir uma região onde ao clicar sobre ele nada acontece, devemos usar o atributo nohref (sem argumentos), caso contrário deve-se usar o atributo href para especificar o URL que será acessado ao clicar sobre aquela região. O atributo alt serve para definir uma mensagem que será exibida pelo browser ao posicionar o cursor mouse sobre aquela região (tem função semelhante ao atributo title do marcador a. O atributo target define a janela onde o documento especificado no atributo href será exibido e tem como default o valor _self, significando a mesma janela que contém o link. O formato da região é definido pelo atributo shape e pode ser rect (retângulo), circle (círculo), poly (polígono fechado) ou default (todas as regiões não delimitadas por um marcador area).
O valor de coords (x) deve ser definido de acordo com o formato da região:
Veja um exemplo de como criar um mapa clicável:
<img src=mapamundo.gif ismap usemap=#mapamundo border=0 alt="Mapa-mundi">
<map name=mapamundo>
<area href=brasil.html shape=circle coords=275,150,40>
<area href=asia.html coords=110,140,160,180>
<area nohref shape=poly coords=70,175,110,175,100,240>
<area href=oceanos.html shape=default>
</map>
Java applets são programas escritos na linguagem Java, desenvolvida pela Sun Microsystems. Estes programas podem já estar codificados em linguagem de máquina (geralmente identificados pela extensão class) ou em código fonte (geralmente identificados pela extensão java). Para executar um applet é necessário, portanto, que o browser possua uma máquina virtual Java embutida, em outras palavras, seja capaz de interpretar e executar programas em Java.
O applet é transferido pelo servidor e executado pela máquina cliente. Apesar dos problemas de segurança que podem acarretar, applets são um poderoso recurso dentro da WWW. Geralmente um applet gera uma imagem animada, eventualmente com sons associados, que interage com o usuário. Para inserir um applet no documento usa-se o marcador:
<applet code=URL codebase=URL name=string align=left|right|top|middle|bottom alt=string height=n width=n vspace=n hspace=n></applet>
O atributo code define o URL onde está o applet. Eventualmente este applet faz referências a outros arquivos, normalmente usando URL's relativos, neste caso o atributo codebase é usado para especificar o URL absoluto do applet, o qual será usado para resolver os URL's relativos. O atributo name é usado para especificar o nome do applet. Os atributos alt, align, height, width, vspace e hspace têm função análoga aos atributos de mesmo nome do marcador img. Outra de forma de definir um texto alternativo que será exibido se o applet não puder ser executado é usando o marcador:
<textflow></textflow>
A vantagem é que usando este marcador é possível definir um conteúdo alternativo bem mais elaborado para ser exibido no lugar do applet, podendo inclusive conter imagens, ao passo que usando-se o alt só podemos definir um texto sem formatação. É possível passar parâmetros para o applet com o marcador:
<param name=string value=string>
O atributo name especifica o nome do parâmetro e value o seu
valor. Abaixo temos o exemplo de um applet que implementa o famoso
jogo-da-velha com sons e animação. A partida já foi terminada, sendo
que o autor jogou com o 
:
Para inserir este applet, foi usado o seguinte código:
<center>
<applet code=TicTacToe.class width=120 height=120>
<textflow><i>Aqui deveria aparecer o jogo da velha !!</i></textflow>
</applet>
</center>