Aula 03
•Transferir como ODP, PDF•
0 gostou•340 visualizações
O documento discute elementos básicos de HTML como títulos, parágrafos, ênfase em texto, imagens, comentários e formatação de texto. Explica as tags <H1> a <H6> para títulos, <p> para parágrafos, <strong>, <em> e <small> para ênfase, <img> e <figure> para imagens e como formatar texto com tags como <font>.
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Destaque
Semelhante a Aula 03
Semelhante a Aula 03 (20)
Mais de Jorge Ávila Miranda
Mais de Jorge Ávila Miranda (20)
Último
Último (8)
Aula 03
- 1. Html e CSS
- 2. HTML ● Títulos: – Há seis níveis de Títulos em HTML, de <H1> a <H6> :
- 3. HTML ● Parágrafos – Quando exibimos qualquer texto em nossa página, é recomendado que ele seja sempre conteúdo de alguma tag filha da tag <body> . – A marcação mais indicada para textos comuns é a tag de parágrafo: <p>Exemplo de parágrafo</p> <p>Outro Parágrafo</p>
- 4. HTML ● Marcações de ênfase – Quando queremos dar uma ênfase diferente a um trecho de texto, podemos utilizar as marcações de ênfase. – Podemos deixar um texto “mais forte” com a tag <strong> ou deixar o texto com uma “ênfase acentuada” com a tag <em> . Também há a tag <small> , que diminui o tamanho do texto. <p>Estude para passar no<strong>ENEM</strong></p>
- 5. HTML ● Imagens: – A tag <img> define uma imagem em uma página HTML e necessita de dois atributos preenchidos: src e alt . – O primeiro aponta para o local da imagem e o segundo, um texto alternativo para a imagem caso essa não possa ser carregada ou visualizada. – O HTML 5 introduziu duas novas tags específicas para imagem: <figure> e <figcaption> . – A tag <figure> define uma imagem com a conhecida tag <img> . Além disso, permite adicionar uma legenda para a imagem por meio da tag <figcaption> .
- 6. HTML <figure> <img src=”img/produto.jpg” alt=”Foto do produto”> <figcaption>essa figura é um exemplo</figcaption> </figure>
- 9. Formatando textos ● Primeiramente iremos aprender a criar diversos níveis de cabeçalhos que podem ser usados para criar títulos (cabeçalhos) para textos que se encontram no corpo de sua página web , ou seja, dentro da tag body.
- 10. Formatando textos ● Para isso utilizamos a tags:
- 11. Exercicio
- 12. Formatando textos ● Agora iremos conhecer a tag p. Utilizamos a tag p para criarmos parágrafos em nosso texto. ● Esta tag possui um atributo denominado de align, com esse atributo definimos como será feito o alinhamento de nosso parágrafo, o alinhamento padrão é à esquerda (left), porém, podemos utilizar: à direta (right), centralizado (center) e justificado (justify). ● Vejamos exemplo alguns exemplo para entendermos a sintaxe desta tag.
- 15. Formatando textos ● Como podemos notar a tag p é responsável por inserir quebra de linha entre um parágrafo e outro, além de definir o alinhamento do mesmo através de seu atributo align. ● No exemplo acima podemos constatar que o alinhamento padrão da tag p é o esquerdo. ● Até então a quebra de linha em nossa página HTML é feita pelo próprio browser, porém é interessante que tenhamos controle sobre isso, uma vez que, em algumas situações precisamos definir como ocorrerá a quebra de linha. Para isso, utilizamos a tag br
- 17. Estilizando textos ● Anteriormente aprendemos a mudar a cor do texto de nossa página web, para isso utilizamos o atributo text da tag body, porém, ao utilizarmos esse atributo definimos a cor da fonte de todo texto presente em nossa página web. ● No entanto, em algumas situações precisamos utilizar diferentes cores em nosso texto, por exemplo: utilizar a cor azul no título do texto e a cor preta no corpo do texto.
- 18. Estilizando textos ● Para esse caso a utilização do atributo text não solucionará nosso problema, todavia, a tag font funcionará perfeitamente. ● A utilização da tag font não se limita apenas a trocar a cor de uma determinada parte do texto, mas também o tamanho da fonte e o tipo, para isso utilizamos os atributos existentes nessa tag, que são: face, size e color.
- 19. Estilizando textos ● O atributo face é responsável por definir qual o tipo de fonte será utilizada (ex: Times New Roman, Georgia, Arial, etc), o atributo color é responsável por definir a cor da fonte (seus valores são os mesmos do atributo text), já o atributo size é responsável por definir o tamanho da fonte. Vejamos exemplos da utilização da tag font.
- 20. Estilizando textos Note que apenas a primeira linha do texto será alterada com os efeitos da tag font. O resto do texto manterá a formatação definida na tag body.
- 21. Exercicio
- 22. Exercicio
- 23. Resolução