HTML e CSS Tags HTML

Prévia do material em texto

2
AGENDA
DO
MÓDULO
{Tags de Texto} 
{Links}
{Imagens}
{Listas}
{Tabelas I}
{Tabelas II}
{Containers}
Agenda do módulo
Anotações
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
3
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
MISSÃO DO 
MÓDULO
Aplicar as principais tags de HTML5
e criar a estrutura de um layout para Blog.
Na programação, o jeito mais fácil de fazer nem sempre irá
se sustentar quando a demanda de acessos em uma página
dobrar ou triplicar, por exemplo. 
Às vezes vale a pena ficar na cama na 
segunda-feira, em vez de passar o resto da 
semana depurando o código de segunda-feira.
Christopher Thompson
4
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Tags de Texto
{01.}
 negrito
 importância
 itálico
 enfatizado
 destaque
 menor
 riscado
 sublinhado
 subscrito
 sobrescrito 
5
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
5
Pense como
o usuário da 
sua solução.
MÃO 
NA MASSA
 > Baixe o template que disponibilizamos 
no GitHub.
 > Edite o artigo para incluir todas as 
tags principais de texto para formatá-lo, 
destacado pelos pontos visuais 
e semânticos das tags.
6
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
O resultado deve ser parecido com:
PULO DO
GATO
 > Editores como o VS Code 
lembram das tags por você!
7
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Seja curioso. Leia de tudo.
Tente coisas novas. O que as 
pessoas chamam de inteligência
se resume a curiosidade.
Aaron Swartz
8
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Links
{02.}
Os links estão presentes desde as primeiras versões 
do HTML e são definidos pela tag , do inglês 
anchor ou âncora.
O link é sempre utilizado com o atributo href, 
que informa a referência para a qual o link está 
apontando.
Faz referência a outras páginas web no conteúdo de 
sua página, como por exemplo um link para um vídeo 
no Youtube.
Promove a ligação entre as páginas do projeto/site.
Para isso, é necessário criar um link com
o caminho relativo de suas páginas, partindo
do caminho do arquivo index.html.
Link de url externa:
Link de caminho relativo:
PULO DO
GATO
 > Você pode organizar as categorias 
em uma pasta separada. 
9
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Uma boa prática é sempre que possível 
adicionar um link de retorno para a página 
principal, isso facilita a navegação
do usuário pelas páginas do seu site.
Não tenhamos pressa, mas 
também não percamos tempo.
José Saramago
MÃO 
NA MASSA
 > Use o template que disponibilizamos para esse 
exercício no GitHub.
 > O objetivo é colocar links para as suas 
redes sociais.
 > Os links devem ser abertos em uma 
nova aba.
 > Um dos links deve ser redirecionado para uma 
outra página criada por você. 
O nome do arquivo será “other-page.html”, e ela 
deve abrir na mesma aba que a página inicial.
10
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Construa uma página com seus principais links:
Ajuda no processo de navegação dentro de uma 
mesma página e funciona como uma espécie de 
sumário.
Link para fragmento:
Adiciona a funcionalidade de envio de e-mail através 
do aplicativo padrão de seu dispositivo.
Link para endereço de e-mail:
PULO DO
GATO
 > Enquanto o link utiliza o href, 
a imagem utiliza o atributo src.
11
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Imagens
{03.}
Você já sabe que no HTML as imagens 
são definidas pela tag . 
Então, para incluir uma imagem em uma página html, 
adicionamos a tag com o atributo src do link 
da imagem.
Lembre-se que ao escolher uma imagem é importante 
que ela venha de um site público e sem direitos 
autorais. Um site que você pode utilizar é o Unsplash.
PULO DO
GATO
 > A ordem dos atributos não 
interfere na renderização da 
imagem.
12
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Ele descreve o conteúdo da imagem, previne
a perda de contexto em eventuais problemas 
que uma imagem possa ter, além de ser muito 
importante no quesito acessibilidade.
Se você quiser informar primeiro o “alt” e depois 
o “src” não tem problema! Apenas por convenção, 
como uma boa prática, o “src” é adicionado primeiro.
Utilize o atributo “alt” nas
suas imagens.
As imagens são do tipo inline.
Isso significa que se adicionarmos outro elemento 
antes ou após elas, não será gerada quebra de linha.
Caso seja do interesse do desenvolvedor que ocorra 
a quebra de linha, basta envolver a tag com 
uma tag do tipo bloco, no caso, usando o . 
MÃO 
NA MASSA
 > Use o template que disponibilizamos 
para esse exercício no GitHub.
 > Você deve apresentar na tela, três 
imagens que te representam, dentro 
da div com classe “images-wrapper”.
13
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
LBônus: você deve colocar uma imagem de 
fundo no site.
Medir o progresso da 
programação por linhas 
de código é como medir
o progresso da construção de 
aeronaves em termos de peso.
Bill Gates
14
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Listas
{04.}
Utilizadas quando a ordem é importante para
o agrupamento e vem acompanhadas de números. 
São definidas pela tag .
Cada item da lista deve ser definido pela tag .
Listas ordenadas: 
Utilizadas quando a ordem não é importante para
o agrupamento de dados. 
São definidas pela tag .
Cada item da lista deve ser definido pela tag .
Listas não ordenadas:
PULO DO
GATO
 > A tag utilizada para identificar os 
itens da lista serão sempre iguais 
(), o que muda é a tag de 
agrupamento ( ou ).
15
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Utilizadas quando é necessário criar subgrupos
de informações dentro de uma lista já existente. 
Para criar uma lista aninhada, basta criar uma lista, 
seja ela ordenada ou não ordenada, dentro de um 
item de uma lista já existente.
Listas aninhadas:
16
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Arroz, feijão, 8 laranjas, 5 maçãs, 2 caixas
de morango, 2 caixas de leite vvcondensado, 1 caixa
de creme de leite e um pacote de bolacha maizena.
Use sua criatividade para dar nome às categorias. 
Lembrando que os produtos precisam ser subitens 
das categorias.
MÃO 
NA MASSA
 > Use o template que disponibilizamos no GitHub..
 > Monte uma lista com os seguintes produtos:
Sempre fiz algo que eu achava 
que estava pouco preparada 
para fazer. Quando você tem 
um momento de incerteza mas 
persiste, é aí que você consegue 
avançar.
Marissa Ann Mayer
No HTML, tabelas são utilizadas 
com o objetivo de:
tabular dados montar gráficos
realizar análises entre outras possibilidades
Tabelas I
{05.}
17
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
18
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
As linhas são determinadas pela tag . 
Elas determinam um conjunto de células distribuídas 
em colunas.
Para definir as colunas de uma linha, usamos a tag .
Essas são as unidades em que o conteúdo de cada 
célula é inserido na tabela.
No HTML existe uma tag específica para descrever
o cabeçalho de uma tabela: é a tag .
coluna
linhas
O objetivo é transformar dados 
em informação e informação em 
entendimento.
Carly Fiorina
PULO DO
GATO
 > Sempre que tiver um problema, 
divida-o em passos para 
resolvê-lo.
19
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Tabelas II
{06.}
20
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
No HTML é possível mesclar linhas através do atributo 
rowspan. Existe um atributo do HTML para mesclar 
células, chamado de colspan.
As tags também possuem colspan e rowspan.
Dentro do contexto da tabela, existem algumas 
tags semânticas que ajudam no processo de 
reconhecimento de conteúdo, que são:
Utilizado para agrupar o conjunto de linhas que fazem 
parte do cabeçalho.
Utilizado para agrupar o conjunto de linhas que fazem 
parte dos dados.
Utilizado para agrupar o conjunto de linhas que fazem 
parte do rodapé.
MÃO 
NA MASSA
 > Crie uma tabela com as seguintes matérias: 
Matemática, Português e História. 
 > Para cada matéria, você deve colocar o nome
 > de 3 alunos e suas respectivas notas. 
 > Para as notas acima de 70, pintar a célula da 
nota de verde. Inferior a 70, pintar de vermelho.
 > Use o template disponível no GitHub.
21
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Existe uma tag específica para definir um título para
a tabela: .
Basta adicioná-la dentro da tag , antes
do com o texto desejado.
22
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
As tags de containers foram pensadas para auxiliar e facilitar a criação 
de interfaces complexas. Elas mantêm o layout da página funcionando 
corretamente.
A deve ser utilizada somente quando não tiver outro elemento de 
semântica para o conteúdo que você deseja trabalhar, como 
ou .
Representa um conteúdo de introdução
ou navegação da página. 
Pode conter alguns elementos de cabeçalho, mas também outros elementos 
como um logo, seções
e formulário de pesquisa.
Representa uma seção de uma página que apresenta um conjunto de links 
de navegação, sejam eles internos ou externos, conforme explicamos em 
aulas anteriores.
Containers
{07.}
PULO DO
GATO
 > Se você deseja apenas agrupar 
estilos, utilize a .
 > Agora, se o objetivo é dividir 
semanticamente um conteúdo 
em sua página, utilize o .
23
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Representa uma seção, um fragmento genérico 
contido em um documento HTML, geralmente com 
um título. 
Deve ser utilizado quando não existir um elemento 
semântico para representar aquela porção
do documento. 
Representa uma composição independente em
um documento, página, aplicação, ou site, que 
é destinado a ser distribuído de forma independente 
ou reutilizável. 
MÃO 
NA MASSA
 > Baixe o template para essa atividade no GitHub. 
 > Troque todas as tags vazias por tags 
correspondentes ao conteúdo que está na 
página. 
 
Note que o CSS está estilizado com as classes. 
Não as altere. Apenas preencha as tags de forma 
que o código fique semântico.
24
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
Representa uma seção de uma 
página que abriga um conteúdo 
secundário relacionado
ao conteúdo principal. 
Muitas vezes contém explicações 
laterais, como a definição de um 
glossário ou conteúdo vagamente 
relacionado, como avisos. 
Representa um rodapé para
a seção da qual ele faz parte. 
É usado como uma ferramenta 
para o usuário obter informações 
adicionais sobre um tópico 
específico.
É utilizado como um sumário ou 
legenda para o conteúdo de um 
elemento .
25
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
DESAFIO
CONQUER
 > Construa uma página HTML com 
uma imagem, um título 
e um breve texto sobre você. 
 > Insira os links das suas redes 
sociais. Eles devem redirecionar 
o usuário para uma nova aba. 
 > Elenque suas skills usando 
uma lista. 
 > Insira em uma tabela as 
linguagens de programação 
que você já sabe, que está 
aprendendo e que deseja 
aprender. 
 > Use o template disponível 
no GitHub.
if (challenge)
 // start
26
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
QUERO MAIS
htmlreference.io
if (interested)
 // gimmemore
Guia de referências em HTML
https://htmlreference.io/
https://www.amazon.com.br/Estere%C3%B3tipos-clich%C3%AAs-Ruth-Amossy/dp/6555411791
https://www.youtube.com/watch?v=7UL4sdAIENU
https://htmlreference.io/
27
H
TM
L 
e 
C
SS
: 
Ta
gs
 H
TM
L
27
Anotações
	Agenda do módulo
	Anotações
	{01.} Tags de Texto
	{02.} Links
	{03.} Imagens
	{04.} Listas
	{06.} Tabelas II
	{05.} Tabelas I
	{07.} Containers
	Botão 14: 
	Botão 15: 
	Botão 9: 
	Botão 10: 
	Botão 11: 
	Botão 12: 
	Botão 20: 
	Botão 21: 
	Botão 22: 
	Botão 6: 
	Page 3: 
	Page 4: 
	Page 5: 
	Page 6: 
	Page 7: 
	Page 8: 
	Page 9: 
	Page 10: 
	Page 11: 
	Page 12: 
	Page 13: 
	Page 14: 
	Page 15: 
	Page 16: 
	Page 17: 
	Page 18: 
	Page 19: 
	Page 20: 
	Page 21: 
	Page 22: 
	Page 23: 
	Page 24: 
	Page 25: 
	Page 26: 
	Page 27: 
	Botão 5: 
	Page 3: 
	Page 4: 
	Page 5: 
	Page 6: 
	Page 7: 
	Page 8: 
	Page 9: 
	Page 10: 
	Page 11: 
	Page 12: 
	Page 13: 
	Page 14: 
	Page 15: 
	Page 16: 
	Page 17: 
	Page 18: 
	Page 19: 
	Page 20: 
	Page 21: 
	Page 22: 
	Page 23: 
	Page 24: 
	Page 25: 
	Page 26: 
	Page 27: 
	Botão 18: 
	Botão 19: 
	Botão 23: 
	Botão 24: 
	Text Field 127: