Minicurso HTML
Instrutor: Wilker Iceri
O que é HTML?
• Linguagem de marcação de hipertexto.
• Utiliza um conjunto de <tags>.
• Cada <tag> descreve um conteúdo no...
Tags HTML
• Existem dois tipos de tags:
1. Tags que englobam outras tags/textos, como por exemplo a tag <p></p>:

2. Tags ...
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 par...
Estrutura Básica

•A declaração DOCTYPE define o tipo do documento, nesse caso estamos definindo um documento
HTML5.
• Os ...
Minha primeira página Web
• Editor de texto.
• Estrutura de diretórios de um projeto Web.
Atributos
• Os atributos fornecem informações adicionais para uma <tag>.
• Os atributos são informados na tag de abertura....
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...
Parágrafos
• A tag <p></p> define um parágrafo no documento HTML.
• A maioria dos browsers adicionam uma margem antes e ap...
Links
• A tag <a></a> pode ser usada de duas maneiras:
• Para criar um link para um documento HTML interno ou externo.
• P...
Imagens
• A tag <img /> define uma imagem.
• Atributos importantes em uma imagem:
• src: define o local da imagem.
• alt: ...
Formatação de textos
As tags mostradas abaixo alteram o estilo de um texto.

Acessar o exemplo
Tabelas
• A tag <table> define uma tabela.
• A tag <tr> define uma linha.
• A tag <td> define uma coluna.
• As tabelas não...
Listas
• Existem 3 tipos de listas:
• <ul></ul> - lista não ordenada (a mais usada)
• <ol></ol> - lista ordenada
• <dl></d...
Formulário

Acessar o exemplo
Elementos em bloco
• Os elementos HTML são divididos em dois grupos, existem os elementos em bloco e os
elementos inline (...
Elementos em linha (inline)
• Os elementos inline ocupam somente a largura necessária
• Exemplos de elementos em bloco: sp...
• Novas <tags> semânticas
• Novos atributos
• Vídeo e Áudio
• Gráficos 2D/3D
• Armazenamento Local
• Banco de dados SQL Lo...
Novas tags estruturais
• Principais tags estruturais que vieram com o HTML5:
• <header></header> - define o cabeçalho da p...
Vídeo
• A tag <video> define um vídeo.
• A tag <source> define recursos para elementos de mídia, como <video> e <audio>.

...
Áudio
• A tag <audio> define um áudio.

Acessar o exemplo
Projeto Final
• Faça a marcação das páginas web conforme o layout que está na pasta Minicurso
HTML/Fontes/Projeto Final/la...
Upcoming SlideShare
Loading in …5
×

Minicurso HTML

610 views

Published on

Minicurso de HTML oferecido aos alunos da FATEC.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
610
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
43
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Minicurso HTML

  1. 1. Minicurso HTML Instrutor: Wilker Iceri
  2. 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. 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. 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. 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. 6. Minha primeira página Web • Editor de texto. • Estrutura de diretórios de um projeto Web.
  7. 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. 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. 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. 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. 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. 12. Formatação de textos As tags mostradas abaixo alteram o estilo de um texto. Acessar o exemplo
  13. 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. 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
  15. 15. Formulário Acessar o exemplo
  16. 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. 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. 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. 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. 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. 21. Áudio • A tag <audio> define um áudio. Acessar o exemplo
  22. 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!

×