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.
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>.
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.
<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–>
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.
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 D.E a continuar com o trabalho de transmitir conhecimento.
Muito obrigado e até a próxima.
Jake60346 Designer Express
Jake60346 Designer Express
