Embed Size (px)
Citation preview
Hypertext Markup Language
• Originalmente proposta por Tim Berners-Lee no final da década de 1980
• Com o objetivo de ser um mecanismo onde qualquer pessoa pudesse disseminar documentos científicos
HTML
• As especificações da linguagem HTML são publicadas pelo W3C (World Wide Web Consortium)
• http://www.w3.org/html/
HTML
• HTML - Linguagem de Marcação de HiperTexto
• Documento de texto contendo tags de marcação que informam ao browser como o documento deve ser exibido (renderizado)
Estrutura Básica
• Um documento HTML é composto por tags, atributos, valores e filhos (que podem ser um simples texto ou outros elementos)
Estrutura Básica
• Os parágrafos dentro de um documento HTML, são definidos através do elemento p
• Um elemento p ocupa todo o espaço horizontal definido pelo elemento pai
• Caso seja necessário utilizar uma quebra de linha, podemos utilizar o elemento br
Parágrafos
• Dentro do HTML é possível definir títulos de uma maneira hierárquica
• Para definirmos esta hierarquia utilizamos as tags de cabeçalho h1, h2, h3, h4, h5 e h6
Cabeçalhos
• Com os links é possível que o usuário possa navegar entre documentos diferentes
• Estes links podem ligar uma página com outra (link interno) ou para uma página em outro site (link externo)
• A tag responsável por criar links é a tag a, juntamente com o atributo href
Links
• O atributo target informa onde o documento será aberto
_blank – nova janela ou aba
_self – mesma janela ou frame relativo ao link
_parent – frame pai relativo ao link
_top – mesma janela do documento do link
Links
• São links que apontam para seções dentro da mesma página
• Para utilizarmos o conceito de âncoras é necessário utilizarmos o atributo name no link e o caractere # no destino (âncora)
Âncoras
• A tag img permite a inserção de imagens dentro páginas HTML
• A tag img possui o atributo src onde é definido o caminho até a imagem
• O atributo alt pode ser utilizado para exibir um texto alternativo caso a imagem não consiga ser carregada
Imagens
• O conceito de tabelas foi criado para exibir dados tabulares
• Geralmente utilizado em listagens e relatórios
Tabelas
• table – define os limites da tabela
• tr – define uma linha da tabela
• th – define uma célula de cabeçalho
• td – define uma célula
Tabelas
Propriedades importantes
• colspan – utilizado para mesclar células em uma linha (horizontalmente)
• rowspan – utilizados para mesclar células em uma coluna (verticalmente)
Tabelas
Tags para organização
• thead – define o cabeçalho da tabela
• tbody – define o corpo da tabela
• tfoot – define o rodapé da tabela
Tabelas
• Em um documento HTML é possível utilizar três tipos de listas, devendo ser utilizada de acordo com seu valor semântico semântica
• Lista de definição
• Lista ordenada
• Lista sem ordem (não ordenada)
Listas
• Através dos formulários os usuários podem interagir com as páginas web, podem enviar informações
• A tag form define a área do formulário
• O atributo action define o destino das informações do formulário
Formulários
• A tag input dependendo do valor do atributo type pode assumir diversas formas
• text
Formulários
• A tag select permite ao usuário escolher um ou mais itens de uma lista
• multiple
Formulários
• A tag textarea exibe uma caixa de texto na qual o usuário pode inserir um texto, inclusive com quebras de linha
Formulários
• A tag label é utilizada para definir um “rótulo”, um titulo para um determinado campo
Formulários
• SILVA, Maurício Samy. HTML 5. 1ª ed. São Paulo: Novatec Editora, 2011.
• Apostila K19. Disponível em: <http://www.k19.com.br/downloads/apostilas/> Acesso em abril de 2013
• W3Schools. Disponível em: <http://www.w3schools.com/> Acesso em abril de 2014
Referências
![019 programacao web-html[1]](https://img.document.onl/doc/110x75/555e24f0d8b42a384f8b4e3b/019-programacao-web-html1.jpg)
![52464384 Informatica Programacao Web HTML Css Php[1]](https://img.document.onl/doc/110x75/55cf98af550346d033991258/52464384-informatica-programacao-web-html-css-php1.jpg)
