![[HTML] Entendendo tags e seu funcionamento Empty](https://2img.net/i/empty.gif)
[HTML] Entendendo tags e seu funcionamento Seg 15 Set 2014 - 15:00
Este tutorial foi criado com o intuito de tentar explicar como funcionam as tag's tão usadas no HTML.
Para entender como funcionam as tags antes de tudo devemos saber o que é e para que serve uma estrutura HTML?
Bom, em resumo HTML é a linguagem de marcação essencial em qualquer projeto web, ela é a linguagem responsável por estruturar todo um site, até mesmo agora digitando este texto foi necessário que um desenvolvedor fizesse um código HTML para que eu pudesse digitar aqui, cada botão, cada imagem, texto, tudo que tem em uma página só é possível graças ao HTML
Se fossemos ver uma página web como um corpo humano, o HTML seria o esqueleto deste corpo.
Todo documento HTML é estruturado de maneira hierárquica, existindo elementos pai e elementos filho, por exemplo podemos fazer uma boz e dentro dela nosso texto, a box (geralmente chamada de DIV) é o container para o texto, no caso o elemento pai, e o próprio texto é o elemento filho.
Para que se possa entender melhor, vamos fazer isso na prática. Vamos usar o exemplo do corpo humano dado acima, vamos imaginar uma cabeça, qual seria o elemento filho de uma cabeça? Podemos pegar os olhos como exemplo não? Em HTML ficaria assim (sim sem o ç, em tags HTML não usamos caracteres especiais):
O que vocês viram acima é exatamente um exemplo do que é uma tag (2 naquele caso), para que possamos estruturar a página HTML, usamos as tags, cada tag tem seu nome, função e particularidade.
Em geral, as tags tem uma tag para abrir a estrutura e outra para fechar, por exemplo:
A estrutura das tags é sempre essa:
Tags de fechamento sempre tem uma barra para fechar elas, assim:
Dentro das tags podemos inserir mais elementos filho para ela (que vimos logo acima), ou então nosso conteúdo dentro dela, por exemplo um texto é composto por parágrafos certo? No HTML parágrafos são declarados com a tag p, assim:
Para inserir algum texto ao nosso parágrafo basta inserir o conteúdo dentro da tag
Se você entendeu o que vimos até agora você ja entende a estrutura básica das tags, com o botão direito do seu mouse de um clique e procure a opção inspecionar elemento, agora na aba que apareceu veja o que vimos até agora. Uma página não passa de um grande documento com vários elementos pai e filho, e com seu respectivo conteúdo.
Vamos nos aprofundar ainda mais nas tags
Se relerem o texto, vão notar que no começo do texto eu comentei que na maioria das vezes as tags tem uma tag de abertura e outra para fechar, certo?
Pois é, mas isso é para a maioria dos casos, algumas tags são chamadas self close que são tags que se "auto fecham", com a barra sendo inserida dentro dela mesmo, ficou meio confuso? Veja o exemplo:
Muitas tags são self close mas quais são e quais não são você só vai aprender vendo um curso mais completo voltado ao HTML mesmo.
Que tal aprofundar mais ainda nossos conhecimentos?
Então, você entendeu tudo que foi dito até agora né? Então está quase pronto para se arriscar no mundo da programação web. Mas vamos aprender um pouco mais, ok?
Continuando com o exemplo dos olhos, qual outra características podemos notar nos olhos? Seriam seus atributos certo? Cor dos olhos por exemplo é um atributo que eles tem.
É a mesma coisa para tags, a maioria das tags recebem atributos, e cada atributo faz uma determinada ação, seja ela estrutural, para o design ou outros afins.
Vamos usar o exemplo visto acima da tag img.
A tag img é usada para mostrar uma imagem na tela do usuário, ela tem um atributo em especial que vai "chamar" essa imagem para dentro dela, esse atributo se chama src
Os atributos das tags em geral são incluídos dentro da tag de abertura (ou dentro dela mesmo no caso das tags self close) com o nome dele e o valor. No caso da tag img o nome é src e o valor é link para a imagem.
Mas isso funciona, onde posso ver?
Ja notou esses smileys do fórum? Igual o que usei acima? Então, eles são imagens também, veja um exemplo de como mostrar um
E ele sendo renderizado ficaria assim
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Bem simples não?
Bom, o tutorial fica por aqui, para não me alongar muito e ficar muito chato de ler. Espero que eu tenha conseguido elucidar bem minhas ideias, e qualquer dúvida é só perguntar.
Abraços...
Para entender como funcionam as tags antes de tudo devemos saber o que é e para que serve uma estrutura HTML?
Bom, em resumo HTML é a linguagem de marcação essencial em qualquer projeto web, ela é a linguagem responsável por estruturar todo um site, até mesmo agora digitando este texto foi necessário que um desenvolvedor fizesse um código HTML para que eu pudesse digitar aqui, cada botão, cada imagem, texto, tudo que tem em uma página só é possível graças ao HTML
Se fossemos ver uma página web como um corpo humano, o HTML seria o esqueleto deste corpo.
Todo documento HTML é estruturado de maneira hierárquica, existindo elementos pai e elementos filho, por exemplo podemos fazer uma boz e dentro dela nosso texto, a box (geralmente chamada de DIV) é o container para o texto, no caso o elemento pai, e o próprio texto é o elemento filho.
Para que se possa entender melhor, vamos fazer isso na prática. Vamos usar o exemplo do corpo humano dado acima, vamos imaginar uma cabeça, qual seria o elemento filho de uma cabeça? Podemos pegar os olhos como exemplo não? Em HTML ficaria assim (sim sem o ç, em tags HTML não usamos caracteres especiais):
- Código:
<cabeca>
<olhos></olhos>
</cabeca>
O que vocês viram acima é exatamente um exemplo do que é uma tag (2 naquele caso), para que possamos estruturar a página HTML, usamos as tags, cada tag tem seu nome, função e particularidade.
Em geral, as tags tem uma tag para abrir a estrutura e outra para fechar, por exemplo:
- Código:
<p></p>
A estrutura das tags é sempre essa:
- Código:
<tag>
Tags de fechamento sempre tem uma barra para fechar elas, assim:
- Código:
</tag>
Dentro das tags podemos inserir mais elementos filho para ela (que vimos logo acima), ou então nosso conteúdo dentro dela, por exemplo um texto é composto por parágrafos certo? No HTML parágrafos são declarados com a tag p, assim:
- Código:
<p></p>
Para inserir algum texto ao nosso parágrafo basta inserir o conteúdo dentro da tag
- Código:
<p>Este é um parágrafo, nele posso inserir qualquer texto que eu quiser</p>
Se você entendeu o que vimos até agora você ja entende a estrutura básica das tags, com o botão direito do seu mouse de um clique e procure a opção inspecionar elemento, agora na aba que apareceu veja o que vimos até agora. Uma página não passa de um grande documento com vários elementos pai e filho, e com seu respectivo conteúdo.
Vamos nos aprofundar ainda mais nas tags
Se relerem o texto, vão notar que no começo do texto eu comentei que na maioria das vezes as tags tem uma tag de abertura e outra para fechar, certo?
Pois é, mas isso é para a maioria dos casos, algumas tags são chamadas self close que são tags que se "auto fecham", com a barra sendo inserida dentro dela mesmo, ficou meio confuso? Veja o exemplo:
- Código:
<img />
Muitas tags são self close mas quais são e quais não são você só vai aprender vendo um curso mais completo voltado ao HTML mesmo.
Que tal aprofundar mais ainda nossos conhecimentos?
Então, você entendeu tudo que foi dito até agora né? Então está quase pronto para se arriscar no mundo da programação web. Mas vamos aprender um pouco mais, ok?
Continuando com o exemplo dos olhos, qual outra características podemos notar nos olhos? Seriam seus atributos certo? Cor dos olhos por exemplo é um atributo que eles tem.
É a mesma coisa para tags, a maioria das tags recebem atributos, e cada atributo faz uma determinada ação, seja ela estrutural, para o design ou outros afins.
Vamos usar o exemplo visto acima da tag img.
A tag img é usada para mostrar uma imagem na tela do usuário, ela tem um atributo em especial que vai "chamar" essa imagem para dentro dela, esse atributo se chama src
- Código:
<img src="LINKDAIMAGEM.extensão" />
Os atributos das tags em geral são incluídos dentro da tag de abertura (ou dentro dela mesmo no caso das tags self close) com o nome dele e o valor. No caso da tag img o nome é src e o valor é link para a imagem.
Mas isso funciona, onde posso ver?
Ja notou esses smileys do fórum? Igual o que usei acima? Então, eles são imagens também, veja um exemplo de como mostrar um
- Código:
<img src="http://r27.imgfast.net/users/2711/28/38/97/smiles/1818322634.gif" />
E ele sendo renderizado ficaria assim
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Bem simples não?
Bom, o tutorial fica por aqui, para não me alongar muito e ficar muito chato de ler. Espero que eu tenha conseguido elucidar bem minhas ideias, e qualquer dúvida é só perguntar.
Abraços...
