Carregar apresentação
A apresentação está carregando. Por favor, espere
1
HTML Professor Luiz José Hoffmann Filho
2
Histórico HTML SGML (Standard Generalized Markup Language) XML SGML
Origem: CERN Popularização: navegador Mosaic (1993) Primeira Grande Guerra: IE x Netscape (Versões próprias do HTML); Padronização: W3C ( e HTML HTML <- fim da guerra HTML XHTML <- HTML 4.01 em XML XHTML HTML padrão atual
3
Funcionamento O ponto central do uso de HTML é o uso de TAGS. Exemplo de TAG: <TAG [atributos]> conteúdo </TAG> Ao receber um documento HTML, um navegador analisa os tags contidos no documento. Se reconhecer o tag, renderiza a tag, se não reconhecer, ignora. Exemplo: Parágrafo sintaxe básica: <p> ... </p>
![Funcionamento O ponto central do uso de HTML é o uso de TAGS. Exemplo de TAG: <TAG [atributos]> conteúdo </TAG>](http://slideplayer.com.br/slide/17253636/100/images/3/Funcionamento+O+ponto+central+do+uso+de+HTML+%C3%A9+o+uso+de+TAGS.+Exemplo+de+TAG%3A+%3CTAG+%5Batributos%5D%3E+conte%C3%BAdo+%3C%2FTAG%3E.jpg "Ao receber um documento HTML, um navegador analisa os tags contidos no documento. Se reconhecer o tag, renderiza a tag, se não reconhecer, ignora. Exemplo: Parágrafo. sintaxe básica: <p> ... </p>")
4
Atributos Todos os elementos do HTML podem ter atributos.
Os atributos provem informação adicional para um elemento. Os atributos são sempre especificados em um tag de começo. Os atributos estão sempre em pares nome/valor como <p id=paragrafo1> conteúdo </p> Atributos Globais: Valem para quase todos os tags; Atributos locais: valem somente para uma tag especíca.
5
html5 Estrutura básica de um arquivo html5 Tags básicas:
Seleção de metadados (<meta>) Markup básico: <p>, <h1>, <h2> ... Imagens: <img ... > Links: <a href ... > Listas: <ol>, <ul>, <li> Tabelas: <table> Entrada de dados: <form>
6
Estrutura de um arquivo Html5
Exemplo de um arquivo HTML5 mínimo. <!DOCTYPE html> <html> <head> <title>Título do documento</title> </head> <body> Conteúdo do documento...... </body> </html>
7
Estrutura de um arquivo html5
8
Validação A W3C mantém um site que valida páginas em
Use com gosto.
9
Tags básicas O conjunto de tags é muito grande, e inviável de ser apresentado. Sendo assim, o conjunto foi dividido em grupos, sendo que somente alguns de cada grupo serão apresentados. Seleção de metadados: <meta> Markup básico: <p> ... </p> e <h1> ... </h1> Imagens: <img ... > Blocos: <div> Estilo: <style>, <class> Links: <a href ... > Listas: <ol>, <ul>, <li> Tabelas: <table> Entrada de dados: <form>
10
Seleção de metadados: <metA>
O tag <meta> fornece informações sobre o documento que não são mostrados, mas que podem ser utilizados em buscadores; Exemplo: <head> <meta name="aula" content="Programação Web"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content=”Luiz Hoffmann"> <meta charset="UTF-8"> </head>
11
Markup básico: <p>...</p> e <h1>...</h1>
Exemplo: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Exemplo de uso dos tags <p> e <h1> </title> </head> <!-- Este é um comentário de várias linhas --> <body> <h1> Este é um cabeçalho de nível 1 </h1> <h2> Este é um cabeçalho de nível 2 </h2> <p style="color:green">Este é um parágrafo em cor verde.</p> <p style="color:blue">Este é um parágrafo em cor azul.</p> </body> </html>
12
Imagens: <img ...> Principais tipos de Imagens usados:
GIF Cores de 8 bits (256 cores), qualidade baixa. Permite transperência; JPG/JPEG Cores de 24 bits (16 milhões de cores), qualidade alta. Normalmente gera arquivos menores que o GIF. PNG versão livre do GIF, que permite transparência e o mesmo número de cores do JPG. Porém, os arquivos são um pouco maiores do que JPEG. Uso: <img src=...., alt=... />
13
Blocos: <div> O tag <div> é frequentemente utilizado para conter um outro elemento html, como um link, imagem, etc.; O tag <div> não necessita de atributos, mas os atributos style e class são comuns; Quanto utilizado junto com o CSS, o tag <div> pode ser utilizado com um bloco de estilo.
14
Estilo: <style> e <class>
Os tag <style> e <class> são utilizados para definir parâmetros de estilo da página html. Que podem ser locais ou globais.
15
Links: <a href ...> O tag <a> (anchor ) é usado para acessar outra página(link), ou outra parte da mesma página. O atributo mais comum é o href: Para referenciar uma página externa: <a href=" Para referenciar uma parte da própria página: Criar um ponto de destino: <h2 id="destino Destino"</h2> Referência: <a href=" target="_blank"</a>
16
Listas: <ol>, <ul>, <li>
Listas não ordenadas (<ul> ... <li> ... </ul>) Listas ordenadas (<ol> ... <li> ...</ul>) Listas de denição (<dl> ... <dt> ... <dd> ...</dl>)
17
Tabelas: <table>
cabeçalhos: <th> .. <th> linha: <tr> ... <tr> elemento: <td> ... <td> Atributos: rowspan, colspan (agregar linhas ou colunas)
18
Entrada de dados: <form>
Para o usuário preencher dados e mandá-los ao servidor, normalmente usa-se o tag <form>; Este tag permite vários tipos de interação: digitação, seleção em menu, seleção de opções, entre muitos outros. Dentre os atributos deste tag, destacam-se: action indica a url da aplicação que deve ser chamada quando o usuário clica no botão submit. get os dados de entrada são anexados à url (alguns servidores podem por limites no tamanho da url); post os dados de entrada são enviados no corpo da mensagem. Exemplo:
19
Get x Post Ao clicar no botão “submit”, o navegador envia os dados do formulário para o servidor; A url da aplicação que irá tratar os dados contidos no formulário é indicada pelo atributo action. O protocolo HTTP permite duas formas de enviar os dados, usando o método GET e o método POST. Para decidir qual método usar, em especial para envio de senhas, leia A implementação de aplicativos indicado na url do atributo action será visto na parte deste curso que lida com os servidores (em especial, servlets e PHP).
20
Entrada de dados: tags mais comuns
<input> <tag_select> <textarea> <tag_button>
21
Exercícios Preparar uma página que inclua os seguintes elementos:
título com o nome do aluno; texto com uma pequena saudação; todos os tags recomendados. Incluir na página anterior as seguintes informações: autor; palavras-chave. Fazer com que a página tenha três parágrafos: a saudação já existente; uma descrição da sala de aula; uma descrição da roupa de um colega ao lado. Incluir headers (<H1>) para cada um dos parágrafos. Formatar o nome do colega (que aparece no parágrafo da roupa) de forma a aparecer: todo o nome em ênfase, com o sobrenome adicionalmente forte (strong). Inserir em sua página a poesia "Batatinha quando nasce...", em destaque (<BLOCKQUOTE>), e se lembrando de mudar de linha onde requerido.
22
Exercícios Inserir um lista como a seguinte:
23
Exercícios Introduza comentários em todos os pedaços de seu HTML para indicar a que exercício eles se referem. Introduza no final da página seu endereço. Separe a sua página em seções (de acordo com os exercícios), usando barras horizontais. À partir da página produzida pelos exercícios anteriores, crie uma página distinta para cada uma das seções (não perca a página original!). Não se esqueça de criar títulos e headers em cada página. Faça uma página com links para cada uma dessas novas páginas. Os links têm que estar adequadamente inseridos em um texto. Retorne à página original, com todas as seções, e inclua uma nova seção, em seu início, que tenha links relativos para trechos dessa mesma página, um link para cada seção. Para isso, você precisará definir âncoras em cada seção.
24
Exercícios Inclua a tabela a seguir em sua página:
25
Exercícios Inclua na sua página o seguinte formulário:
Apresentações semelhantes
