HTML BÁSICO – PARTE 2 – TAGS INICIAIS

Conhecendo novas tags do html

Olá pessoal, boa tarde!
Hoje iremos falar sobre algumas tags importantes do html.
Espero que gostem!

Conheça os outros artigos

ATRIBUTOS

Antes de falar sobre outras tags, devemos conhecer o que é ATRIBUTO.

Atributos são propriedades adicionais que as tags possuem. Algumas tags possuem atributos específicos e alguns atributos são globais, podendo ser aplicados a qualquer tag.

Atributos são escritos dentro da tag, seguidos por um sinal de igual e depois entre aspas são declaradas as informações do atributo.

 

 

TÍTULOS H1, H2 … H6

Em HTML, quando queremos indicar um título, devemos declará-lo com as tags <h1>, <h2>, <h3> até o <h6>, sendo o mais importante o <h1> e o <h6> de menor importância.

 

 

Os mecanismos de busca (Google, Yahoo e Bind) utilizam essas tags como meio de identificação do seu Site, portanto, devemos levar em consideração a ordem e relevância.

Geralmente utilizamos a tag <h1> para representar o título(logo) do site, pois será o primeiro elemento no qual os mecanismos de busca irão interpretar.
O <h2> colocamos para a descrição do site. O <h3> torna-se o título dos artigos do site e assim por diante.

Os navegadores especiais para acessibilidade também interpretam o conteúdo dessas tags de maneira a diferenciar seu conteúdo e facilitar a navegação do usuário pelo documento.

TEXTO

Conforme aprendemos na aula passada, a tag <p> é utilizada para apresentar texto em uma página.
Quando queremos representar um texto longo, com diversos parágrafos, cada parágrafo deve ser iniciado com um novo <p>.

 

 

ÊNFASE NO TEXTO

Quando queremos dar ênfase em alguma palavra ou em algum texto, utilizamos as tags <strong> para deixar o texto em negrito e a tag <em> para deixar o texto em itálico. Existe também a tag <small>, que diminui o texto.

 

 

CITAÇÃO

Tem o propósito de fornecer informações sobre algo dito por alguém. Existem 2 tags, o <blockquote> e o <q>.

<blockquote>: fornece a delimitação de um parágrafo citado que pode conter várias linhas. Esta tag destaca o parágrafo, deslocando-o um pouco para a direita (dependendo da direção do texto). O uso de blockquote como forma de indentar o texto foi definido como inadequado pela W3C em favorecimento ao uso de folhas de estilo.

Blockquote ainda possui um atributo chamado cite. Cite serve para determinar a página fonte da citação, ou seja, de qual página da internet veio tal citação.

ESTÁ GOSTANDO DESTE ARTIGO?

Então não deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a crescer ainda mais.

 

 

 

<q>: A tag Q tem a mesma finalidade que blockquote, mas a diferença é que ela apenas delimita uma pequena porção dentro do texto. Então, se blockquote serve para identificar um parágrafo inteiro que tenha sido citado, q serve apenas para identificar uma pequena frase.

Existem uma curiosidade na tag <q> quanto aos browsers. O browser Internet Explorer, simplesmente, não modifica a formatação do texto. Já o Mozilla Firefox irá substituir as tags <q> por aspas (“).

 

 

COMENTÁRIO

Os comentários são utilizados para deixar o código compreensível ao programador. Eles não aparecem na tela, somente nó código fonte.
Aula passada eu passei uma forma de comentar o código HTML. <!– –>
Existe outra forma que eu utilizo muito e que poupa tempo.
Essa forma é utilizada para comentar várias linhas de código que você não queira que seja visualizado pelo usuário.
Você pode utilizar a própria abertura da tag para começar um comentário e finalizar utilizando o fechamento da mesma.
Ex: <!–p>teste</p–>

 

 

IMAGENS

As imagens são declaradas pela tag <img> e pelos atributos src e alt. O atributo “src” indica o local da imagem e o “alt”, um texto alternativo para a imagem caso não possa ser visualizada ou carregada.

 

 

Com a chegada do HTML5, foram introduzidas 2 novas tags para imagem <figure> e >figcaption>. O <figure> é inserida antes da tag <img>, define a imagem com a tag <img> e o <figcaption> permite adicionar uma legenda para a imagem.

 

 

PRATICANDO

Agora que vocês já conheceram novas tags, vamos praticar?

  • Crie uma nova pasta em sua área de trabalho com o nome do seu site
  • Importe uma imagem qualquer para dentro desta pasta
  • Crie o documento index.html com ó código abaixo e salve dentro da pasta
  • Após finalizado o documento, abra-o em algum navegador.

 

 

Opa! Nesse código apareceram coisas novas. Serão parte do tema da próxima aula!.

FINALIZANDO

Bom galera, espero que vocês tenham aprendido e que tenham gostado dessa aula.
Próxima aula iremos tratar de tags para criar: lista, links e tabela.

Em caso de dúvidas não deixem de perguntar e caso tenham gostado da aula deixem seus comentários para ajudar a TWD a continuar com o trabalho de transmitir conhecimento.

Muito obrigado e até a próxima.

Envie um Comentário

Comentários

Seja o primeiro a comentar

Artigos Relacionados