Aula01 pptx

Prévia do material em texto

DEV Full Stack - HTML e CSS
Aula01 – Estrutura e elementos básicos de uma página web
Eduardo Xavier
Aula 1: Estrutura e elementos básicos 
de uma página web
● Tópicos:
–
–
–
–
–
– Introdução - conceitos básicos e funcionamento 
Estrutura de um documento HTML
Cabeçalhos
Parágrafos e quebras de linha 
Listas
Formatação de textos
Introdução
● O que é HTML?
– HTML significa “HyperText Markup 
Language” (linguagem de marcação de 
hipertexto) que é utilizada para 
produzir páginas na web.
Ela estabelece como um determinado 
elemento deve ser visualizado, não 
sendo, portanto, uma linguagem de 
programação, e sim uma linguagem 
de formatação de conteúdo.
–
Introdução
● Como funciona uma página HTML?
Estrutura de 
Documentos HTML
● Conteúdos, tags e atributos
Estrutura de 
Documentos HTML
● Página
Estrutura de 
Documentos HTML
● Tag 
–
–
Define o início e fim de um documento HTML
O atributo LANG é necessário para que os user-agents saibam qual a 
linguagem principal do documento.
Estrutura de 
Documentos HTML
● Tag 
–
–
 contém informações sobre o documento.
O elemento , por exemplo, define um título, que é mostrado no alto da 
janela do browser.
Estrutura de 
Documentos HTML
● Tag 
– Tudo que estiver contido em será mostrado na janela principal do 
browser, sendo apresentado ao usuário.
 pode conter cabeçalhos, parágrafos, listas, tabelas, links para outros 
documentos, imagens, formulários, animações, vídeos, sons e scripts 
embutidos.
–
Parágrafos e Quebras de Linha
● Tags e 
– A tag define um 
parágrafo.
Browsers adicionam 
automaticamente uma linha
em branco antes e 
depois de cada elemento 
.
A tag insere uma 
quebra de linha e pode 
ser
colocada dentro de 
qualquer texto 
(incluindo
parágrafos).
–
–
A caixa que não tem tampa 
Fica sempre destapada
Dá-me um sorriso dos teus 
Porque não quero mais nada.
(Fernando Pessoa)
Atividade 01
● Cartão de Visitas
–
–
– Construa uma página HTML 
utilizando o que já foi aprendido.
A página servirá como um cartão 
de visitas virtual para apresentar 
você a seus colegas da turma.
Salve a página como 
“seunome.html”
● exemplo: 
xavier.html– Carregue a página em seu 
navegador para verificar se ela 
funciona.
Cabeçalhos
● Tags de Cabeçalho
– Há seis níveis de 
cabeçalhos em HTML:
● de a 
Exemplo:
Este é um cabeçalho de nível 1
Fontes, Tamanhos e Cores
● Até o HTML 4, usava-se a tag para controlar fonte, tamanho e cor de 
textos, mas essa tag não é mais suportada em HTML 5 (foi descontinuada).
Em HTML 5, essas funções são controladas pelo atributo style, que pode ser 
usado em várias tags.●
–
–
–
–
–
Mudou a cor
Mudou a fonte
Mudou o tamanho
Cor e tamanho
Mudou o tamanho
● Exemplos: https://www.w3schools.com/html/html_styles.asp
http://www.w3schools.com/html/html_styles.asp
Atividade 02
● Cartão de Visitas (nova versão)
– Altere o cartão de visitas que você 
construiu na atividade 01, 
utilizando o que já foi aprendido. 
Seja criativo.
A página servirá como um mini- 
currículo online contendo:
–
● Seu nome
Sua data e local de 
nascimento
Quatro habilidades técnicas 
que você possui.
●
●
Meu 
currículo
Mais Recursos para 
Formatação de Textos
● - Texto em negrito
 - Texto importante
 - Texto em itálico
 - Emphasized text
 - Marked text
 - Smaller text
 - Deleted text
 - Inserted text
 - Subscript text
 - Superscript text
●
●
●
●
●
●
●
●
●
● Exemplos: https://www.w3schools.com/html/html_formatting.asp
Importante:
Estas tags e muitas 
outras que tratam de 
formatação podem ser 
facilmente 
substituídas por 
códigos CSS.
http://www.w3schools.com/html/html_formatting.asp
Mais Recursos para 
Formatação de Textos
● Mais ideias:
– Brincando com Cores
● https://www.w3schools.com/html/html_colors.asp
– Comentários
● https://www.w3schools.com/html/html_comments.asp
https://www.w3schools.com/html/html_colors.asp
https://www.w3schools.com/html/html_comments.asp
Listas Simples
● De a cordo com a tag utilizada para definir uma lista, é possível construir uma 
lista ordenada ou desordenada.
–
Tag : Lista ordenada (numerada) Tag 
 : Lista desordenada
Em ambos os casos, cada item da lista utiliza a mesma tag () para ser 
identificado.
–
–
● É possível definir o tipo de numeração ou o marcador dos itens com o 
atributo style
● Exemplos: https://www.w3schools.com/tags/tag_li.asp
https://www.w3schools.com/tags/tag_li.asp
Listas Descritivas
● É possível definir listas compostas onde cada item possui um termo e sua 
respectiva descrição.
–
A tag delimita o início e o fim da lista A 
tag define o termo de cada item
A tag descreve o termo definido
–
–
● Exemplos: https://www.w3schools.com/tags/tag_dl.asp
https://www.w3schools.com/tags/tag_dl.asp
Atividade 03
● Cartão de Visitas (v3.0)
– Altere novamente o seu 
cartão de currículo online, 
utilizando o que já foi 
aprendido.
● Coloque suas habilidades 
técnicas em formato de 
lista.
Altere cores e formatos 
de letras e destaque 
partes importantes.
●
Meu
Currículo 
v3.0
Fim da Aula