Baixado 57 vezes
Carregado porWilker Iceri
Minicurso HTML
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.
Minicurso HTML
- 1.
- 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 • Existemdois 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çãoDOCTYPE 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áginaWeb • Editor de texto. • Estrutura de diretórios de um projeto Web.
- 7. Atributos • Os atributosfornecem 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 Astags 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 3tipos de listas: • <ul></ul> - lista não ordenada (a mais usada) • <ol></ol> - lista ordenada • <dl></dl> - lista de definições Acessar o exemplo
- 15.
- 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çaa 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!