Bom hoje vamos falar de tags vazias e como elas funcionam. Primeiro vamos ao conceito da tag vazia: ela se caracteriza principalmente por não ter conteúdo, como as que vimos no tópicos passado, a tag vazia tem a seguinte sintaxe < nome da tag />, bem simples.
Vamos enumerar algumas mais usadas:
<br /> => essa tag pula uma linha, observe a figura abaixo
Observe que no código HTML o texto está em linhas separadas, já na visualização em navegador estão na mesma linha, qualquer navegador vai entender desse jeito.
Agora veja o mesmo código com a tag <br />
Veja como ficou apos a colocarmos a tag, a visualização ficou "igual" ao código HTML, porque agora o navegador compreende que é para pular uma linha
<hr /> => Essa tag cria uma linha horizontal na pagina, vou usar o mesmo código de cima e vou mostrar como funciona.
Coloquei bem colado na tag "br" de proposito para mostrar algo interessante, a tag "hr" cria uma linha do tamanho da tela, e a pagina na internet funciona como se fosse um "MS Word" chego no limite da linha, ele automaticamente pula para a linha de baixo, tem como modificar isso usando uma outra linguagem web chamanda CSS, que veremos mais para frente.
<img /> => Essa é a tag de imagem, essa acredito que seja a mais complexa tag vazia, vamos para a sintaxe mais simples dela <img src="nome da imagem.jpg"/>
O src vem do inglês source que significa fonte, ou seja deve-se colocar aqui o destino da imagem. Lembrando que não é igual ao caminhos que encontramos no nosso computador. Farei um tópico explicando como são os caminhos em um servidor web e como acessá-los.
Incrementando uma pouco mais a tag "img" colocamos a função border, que do inglês significa borda, se border=0 ficará sem borda, se border=1 ficará com borda veja como fica a tag <img border=0 src="nome da imagem.jpg"/>
Observe a imagem
A mesma imagem mais um com border=1 e outro com border=0 respectivamente. Por padrão toda imagem tem border=0, porem quando usamos uma imagem como link usando a tag de conteudo <a><img /><a/>, o padrão da borda passa de "0" para "1" e deixara uma borda azul entorno da imagem na proxima imagem veremos isso melhor.
Veja que na primeira imagem não há a função border e a imagem ganhou uma borda azul, e na de baixo com o border a imagem ficou sem a borda azul.
Obs:Vejam como que funciona a tag de conteúdo
Função width que do inglês quer dizer largura, aqui você pode acertar a largura da imagem, as unidades de medidas postarei mas para a frente
Função height que do inglês quer dizer altura, aqui você pode acertar a altura da imagem.
Bom espero que tenham gostado, duvidas por favor escrever nos cometário, compartilhem esses tópico no Facebook, Twitter para ajudar a divulgar meu trabalho
Nenhum comentário:
Postar um comentário