1) O documento apresenta uma aula introdutória sobre HTML, definindo sua estrutura e principais elementos como cabeçalho, títulos, parágrafos, links, listas e tabelas. 2) É explicado que o HTML foi desenvolvido por Tim Berners-Lee em 1992 no CERN para permitir a troca de informações na web. 3) São mostrados exemplos básicos de código HTML para ilustrar o uso de elementos como cabeçalho, links, listas e tabelas.
9. Links
<a href=“#titulo”> Link </a>
<h1 name=“titulo”> Título 1 </h1>
<a href=“index.html#titulo”> Link </a>
Atributo name:
<a href="mailto:luciana.santana@avansys.com.br">
Enviar e-mail
</a>
Link para um e-mail:
<a href=“link.html” target="_blank|_self|_parent|_top|framename“>
Texto do link
</a>
Atributo target:
10. Listas
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Lista não ordenada:
<dl>
<dt>Item 1</dt>
<dd>Primeiro item da lista</dd>
<dt>Item 2</dt>
<dd>Segundo item da lista</dd>
</dl>
Lista de definição:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Lista ordenada:
• Item 1
• Item 2
1. Item 1
2. Item 2
Item 1
Primeiro item da lista
Item 2
Segundo item da lista
13. Elementos em bloco Elementos em linha
<div> <span>
<p> <a>
<h1><h2><h3><h4><h5><h6>
<ul><ol><li>
<dl><dt><dd>
14. Test Drive
1. Criar um diretório com seu nome para que suas páginas estejam juntas
2. No notepad++, criar um arquivo de texto chamado index.html que será sua
página inicial
3. Estruturar uma página HTML com:
1. Um title
2. Uma div contendo o título “Treinamento HTML / CSS” (usando
marcação de cabeçalho) e uma lista ordenada de links que será o
menu com os seguintes links
a. Layout - layout.html
b. Link - link.html
c. Tabela - table.html
d. Formulário - form.html
obs: os links de tabela e formulário devem abrir em outra aba
21. colspan e rospan
Tabela de Contas
Tipo de
Despesa
Descrição Valor
Doméstica
Luz R$ 100,00
Água R$ 90,00
Externa Almoço R$ 200,00
Total R$ 390,00
<table cellspacing=‘1’ cellpadding=‘5’ border=‘1’>
<tr>
<th colspan=“3”> Tabela de Contas</th>
</tr>
<tr>
<th> Tipo de Despesa </th>
<th> Descrição </th>
<th> Valor </td>
</tr>
<tr>
<td rowspan=“2”> Doméstica </td>
<td> Luz </td>
<td> R$ 100,00 </td>
</tr>
<tr>
<td> Água </td>
<td> R$ 90,00 </td>
</tr>
<tr>
<td> Externa </td>
<td> Almoço </td>
<td> R$ 200,00 </td>
</tr>
<tr>
<td colspan=“2”> Total </td>
<td> R$ 390,00 </td>
</tr>
</table>
22. Test Drive
1. Criar um arquivo chamado table.html
2. Estruturar uma página HTML com as tabelas abaixo:
a. As tabelas devem ter borda, espaçamento entre células e
espaçamento interno
Função Pontuação Valor
Manual Automática Soma
23. Form
Action - Especifica para onde enviar
o formulário de dados, quando um
formulário for enviado.
Method – get ou post
• GET
• Acrescenta dados para a URL em
pares nome / valor
• Limite para a quantidade de dados
(depende do browser)
• POST
• Mais seguro
• Sem limitação de tamanho
Vamos ver de perto
30. Form - enctype
<form enctype=“application/x-www-form-urlencoded”>
Padrão. Todos os caracteres são codificados antes de serem enviadas (espaços são
convertidos em símbolos "+", e caracteres especiais são convertidos para valores HEX ASCII)
<form enctype=“multipart/form-data”>
Não caracteres são codificados. Este valor é necessário quando você estiver usando
formulários que possuem um arquivo de controle de upload
<form enctype=“text/plain”>
Espaços são convertidos em símbolos "+", mas sem caracteres especiais são codificados
31. Form - detalhes
Tabindex
<input type=“text” tabindex=“1” />
<input type=“password” tabindex=“2” />
<input type=“submit” tabindex=“3” />
Name - identifica o campo
<input type=“text” name=“nome”/>
Value - valor do campo
<input type=“checkbox” name=“opcao” value=“opcao1”/>
32. Test Drive
1. Criar um arquivo chamado form.html
2. Estruturar 2 formulários
1. Um com método get com:
a. nome
b. e-mail
c. sexo
d. a mensagem sendo passada para sucess.html, onde haverá uma
mensagem de sucesso
e. Uma página sucess.html com uma mensagem de sucesso
2. Um com método post com:
a. nome
b. e-mail
c. foto
d. data
e. feedback sobre a aula
f. opção de receber lista de exercícios
g. enviar para luciana.santana@avansys.com.br
CERN, o Laboratório Europeu de Física de Partículas, em Genebra, na Suíça.
Pesquisa de física de partículas, muitas vezes envolve a colaboração entre os institutos de todo o mundo.
Tim estava trabalhando em uma seção de serviços de computação do CERN, quando teve a idéia de permitir que pesquisadores de sites remotos do mundo para se organizar e cultivar juntos asinformações.
Mas, longe de simplesmente fazer disposição uma grande quantidade de documentos de pesquisa, como os arquivos que podem ser baixados para computadores individuais, ele sugeriu que você realmente pode vincular o texto nos próprios arquivos.
E assim surgiu o HTML - Hyper Text Markup Language
O HTML possui duas partes primordiais:
O HEAD, onde incluímos o titulo, os metadados e as chamadas e códigos css e javascript.
Metadados são informações sobre dados.
A tag <meta> fornece metadados sobre o documento HTML que não serão exibidos na página, mas legíveis por máquina.
No BODY, incluímos tudo o que será visível.
_blank: Opens the linked document in a new window or tab
_self: Opens the linked document in the same frame as it was clicked (this is default)
_parent: Opens the linked document in the parent frame
_top: Opens the linked document in the full body of the window
ul --> Unordered Lists
ol --> Ordered Lists
dl --> Definition Lists
O <thead>, <tbody> e elementos <tfoot> não afetarão o layout da tabela por padrão.
No entanto, você pode usar CSS para mudar como esses elementos afetam o layout da tabela.
Dentro de um elemento <button> você pode colocar conteúdo, como texto ou imagens. Esta é a diferença entre este elemento e os botões criada com o elemento <input>.
Nota: Se você usar o elemento <button> em um formulário HTML, navegadores diferentes podem apresentar valores diferentes. Use <input> para criar botões em um formulário HTML.