Minicurso HTML
-
Upload
wilker-iceri -
Category
Technology
-
view
348 -
download
0
description
Transcript of Minicurso HTML
Minicurso HTMLInstrutor: Wilker Iceri
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.
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>.
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
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
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. 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)
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
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
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
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
Formatação de textosAs 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 foram criadas para estruturar um layout
Acessar o exemplo
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
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 (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
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
• Novas <tags> semânticas• Novos atributos• Vídeo e Áudio• Gráficos 2D/3D• Armazenamento Local• Banco de dados SQL Local• E muito mais
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
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
Á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/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!