22
Minicurso HTML Instrutor: Wilker Iceri

Minicurso HTML

Embed Size (px)

DESCRIPTION

Minicurso de HTML oferecido aos alunos da FATEC.

Citation preview

Page 1: Minicurso HTML

Minicurso HTMLInstrutor: Wilker Iceri

Page 2: Minicurso HTML

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.

Page 3: Minicurso HTML

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>.

Page 4: Minicurso HTML

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

Page 5: Minicurso HTML

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

Page 6: Minicurso HTML

Minha primeira página Web• Editor de texto.• Estrutura de diretórios de um projeto Web.

Page 7: Minicurso HTML

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)

Page 8: Minicurso HTML

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

Page 9: Minicurso HTML

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

Page 10: Minicurso HTML

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

Page 11: Minicurso HTML

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

Page 12: Minicurso HTML

Formatação de textosAs tags mostradas abaixo alteram o estilo de um texto.

Acessar o exemplo

Page 13: Minicurso HTML

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

Page 14: Minicurso HTML

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

Page 15: Minicurso HTML

Formulário

Acessar o exemplo

Page 16: Minicurso HTML

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

Page 17: Minicurso HTML

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

Page 18: Minicurso HTML

• Novas <tags> semânticas• Novos atributos• Vídeo e Áudio• Gráficos 2D/3D• Armazenamento Local• Banco de dados SQL Local• E muito mais

Page 19: Minicurso HTML

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

Page 20: Minicurso HTML

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

Page 21: Minicurso HTML

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

Acessar o exemplo

Page 22: Minicurso HTML

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!