Você não está conectado. Conecte-se ou registre-se

[HTML] Entendendo tags e seu funcionamento

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

waghcwb

avatar
Membro elite

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):
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?  scratch

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


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...



"May the force be with you, young grasshopper!"




Não há assuntos pouco interessantes; apenas há pessoas pouco interessadas.
Ver perfil do usuário
Compartilhar este artigo em: BookmarksDiggRedditDel.icio.usGoogleLiveSlashdotNetscapeTechnoratiStumbleUponNewsvineFurlYahoo!Smarking

Olá,
Obrigado por compartilhar connosco.

Até Mais...

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum