O documento apresenta um minicurso sobre HTML, ensinando sobre as principais tags e estruturas do HTML, como <p>, <img>, <a>, <ul>, <ol>, <table>, além de novas tags semânticas do HTML5 como <header>, <nav> e <video>. O documento é dividido em seções ensinando sobre títulos, parágrafos, links, imagens, listas, formulários, elementos de bloco e linha, e por fim um projeto final para aplicar os conhecimentos.
2. O que é HTML?
• Linguagem de marcação de hipertexto.
• Utiliza um conjunto de <tags>.
• Cada <tag> descreve um conteúdo no documento.
• Um documento HTML é composto de <tags> e texto.
3. Tags HTML
• Existem dois tipos de tags:
1. Tags que englobam outras tags/textos, como por exemplo a tag <p></p>:
2. Tags sem corpo:
•As tags podem ter atributos.
• A maioria das tags tem valor semântico, as únicas tags sem valor semântico são as tags
<div></div> e <span></span>.
4. Web browser
• Lê o documento HTML e exibe-o como uma página da web.
• O navegador não exibe as tags HTML, ele usa elas para interpretar o conteúdo da página.
Acessar o exemplo
5. Estrutura Básica
•A declaração DOCTYPE define o tipo do documento, nesse caso estamos definindo um documento
HTML5.
• Os textos entre <html></html> descrevem a página web.
• Os textos entre <body></body> são os conteúdos visíveis da página.
• A tag <head></head> é um container para todos os elementos de cabeçalho, como scripts, styles,
meta dados, etc.
• A tag <meta> define meta dados sobre o documento HTML, esses meta dados não são exibidos
na página, porém eles são usados pelos navegadores, sistemas de buscas como o Google, e por
outros serviços.
Acessar o exemplo
6. Minha primeira página Web
• Editor de texto.
• Estrutura de diretórios de um projeto Web.
7. Atributos
• Os atributos fornecem informações adicionais para uma <tag>.
• Os atributos são informados na tag de abertura. Ex: <a href=“#”>Um link</a>
• Sintaxe: atributo=“valor”.
• Caso os valores contenham aspas duplas você pode escapá-las ou usar aspas simples.
•Exemplo 1: <button title=”Wilker “Iceri” “>Minha homepage</button>
•Exemplo 2: <button title=‘Wilker “Iceri” ’>Minha homepage</button>
• Atributos globais (que podem ser utilizados em qualquer tag):
Atributo
Descrição
Class
Especifica um ou mais nomes de classes para o elemento (Poderá ser usado no CSS e
JavaScript para referenciar o elemento)
Id
Especifica um identificador único para o elemento
Style
Especifica um estilo CSS inline para o elemento
Title
Especifica informações extras sobre o elemento (será mostrado quando o usuário colocar o
mouse em cima do elemento)
8. Títulos
• As tags <h1> até <h6> são usadas para definir títulos.
• <h1> define o título mais importante.
• <h6> define o título menos importante.
Acessar o exemplo
9. Parágrafos
• A tag <p></p> define um parágrafo no documento HTML.
• A maioria dos browsers adicionam uma margem antes e após o parágrafo.
• A tag <b></b> define um texto em negrito.
• A tag <br /> define uma quebra de linha.
Acessar o exemplo
10. Links
• A tag <a></a> pode ser usada de duas maneiras:
• Para criar um link para um documento HTML interno ou externo.
• Para criar um link para um elemento no próprio documento HTML.
• Os links são especificados no atributo href.
Acessar o exemplo
11. Imagens
• A tag <img /> define uma imagem.
• Atributos importantes em uma imagem:
• src: define o local da imagem.
• alt: define um texto alternativo para a imagem.
• width: define a largura da imagem.
• height: define a altura da imagem.
Acessar o exemplo
12. Formatação de textos
As tags mostradas abaixo alteram o estilo de um texto.
Acessar o exemplo
13. Tabelas
• A tag <table> define uma tabela.
• A tag <tr> define uma linha.
• A tag <td> define uma coluna.
• As tabelas não foram criadas para estruturar um layout
Acessar o exemplo
14. Listas
• Existem 3 tipos de listas:
• <ul></ul> - lista não ordenada (a mais usada)
• <ol></ol> - lista ordenada
• <dl></dl> - lista de definições
Acessar o exemplo
16. Elementos em bloco
• Os elementos HTML são divididos em dois grupos, existem os elementos em bloco e os
elementos inline (em linha).
• Os elementos em bloco ocupam toda a largura disponível na tela.
• Exemplos de elementos em bloco: div, h1-h6, p, ul, ol, form, etc.
Acessar o exemplo
17. Elementos em linha (inline)
• Os elementos inline ocupam somente a largura necessária
• Exemplos de elementos em bloco: span, b, a, img, etc.
Acessar o exemplo
18. • Novas <tags> semânticas
• Novos atributos
• Vídeo e Áudio
• Gráficos 2D/3D
• Armazenamento Local
• Banco de dados SQL Local
• E muito mais
19. Novas tags estruturais
• Principais tags estruturais que vieram com o HTML5:
• <header></header> - define o cabeçalho da página.
• <nav></nav> - define os links de navegação (menu).
• <section></section> - define uma sessão da página.
• <article></article> - define um artigo (muito utilizada em blogs).
• <footer></footer> - define o rodapé da página.
Acessar o exemplo
20. Vídeo
• A tag <video> define um vídeo.
• A tag <source> define recursos para elementos de mídia, como <video> e <audio>.
Acessar o exemplo
21. Áudio
• A tag <audio> define um áudio.
Acessar o exemplo
22. Projeto Final
• Faça a marcação das páginas web conforme o layout que está na pasta Minicurso
HTML/Fontes/Projeto Final/layout/.
• A imagem usada se encontra na pasta Minicurso HTML/Fontes/Projeto Final/img/.
• O vídeo usado se encontra na pasta Minicurso HTML/Fontes/Projeto Final/resources/.
Bom trabalho!