2. Introdução
• HTML – HyperText Markup Language(Linguagem de formatação
de hipertexto), é uma linguagem de formatação.
• Todo documento HTML é composto de Tags. Este é o nome dados
aos comandos HTML.
Exemplo:
<xxxx>
</xxxx>
3. • Para iniciar a escrever HTML sempre começamos pela estrutura básica da
página, que é a seguinte:
<html>
<head>
<title>Titulo da página</title>
<meta http-equiv="content-language" content="pt-br" />
<meta name="language" content="pt-br" />
<meta name="keywords" content="minhas, palavras, chave, entram, aqui" />
<link type="text/css" rel="stylesheet" href="estilo.css" />
<script src="funcoes.js" type="text/javascript" language="javascript"></script>
</head>
<body>
Conteudo da página
</body>
</html>
4. Tags de Título
• Exemplo:
<H1> Este é o primeiro nível </H1>
<H2> Este é o segundo nível </H2>
<H3> Este é o terceiro nível </H3>
<H4> Este é o quarto nível </H4>
<H5> Este é o quinto nível </H5>
<H6> Este é o sexto nível </H6>
5. Fontes
• Usar fontes mais comuns;
• Usamos a tag <font>, e o fechamento </font>;
• Dentro desta tag, na de abertura somente, inserimos os atributos, que
servem para reforçar um comando. Eles são separados uns dos outros por
um espaço, e seus valores devem estar entre aspas. Veja um exemplo:
<font face="arial" size="4" color="#ff0000">Olá pessoal</font>
• Podem ser utilizados o nome em inglês para as cores mais comuns (como
'red' para vermelho), ou o código hexadecimal dela. Exemplo:
Preto: #000000
Vermelho: #FF0000
Verde: #00FF00
6. Formatação de Texto
• <strong> Texto </strong> ou <b> Texto </b> -
Texto fica em Negrito.
• <u> Texto </u> - Texto fica Sublinhado.
• <em> Texto </em> ou <i> Texto </i> - Texto fica
em Itálico.
• <center> Texto </center> Texto fica
centralizado.
7. Páragrafos
• Basta envolver o texto em <p></p> para indicar que ele pertence a
uma paragrafo.
Exemplo:
<p>Texto do paragrafo 1</p>
<p>Texto do paragrafo 2</p>
8. Quebras de Linha
• Caso você queira simplesmente mudar de
linha, ao invés de mudar de parágrafo,
coloque a tag <br />.
9. Listas
• Você pode usar listas para criar menus
simples ou organizar temas e textos em
sua página.
• O HTML permite definir duas categorias
distintas de listas: Ordenadas e Não
Ordenada.
10. Lista Ordenada
Exemplo:
<OL>
<LI> Primeiro item de uma lista ordenada</LI>
<LI> Segundo item de uma lista ordenada</LI>
<LI> Terceiro item de uma lista ordenada</LI>
</OL>
Produz o seguinte resultado:
1. Primeiro item de uma lista ordenada
2. Segundo item de uma lista ordenada
3. Terceiro item de uma lista ordenada
11. Lista Não Ordenada
Exemplo:
<UL>
<LI> Primeiro item de uma lista não ordenada</LI>
<LI> Segundo item de uma lista não ordenada</LI>
<LI> Terceiro item de uma lista não ordenada</LI>
</UL>
Produz o seguinte resultado:
> Primeiro item de uma lista não ordenada
> Segundo item de uma lista não ordenada
> Terceiro item de uma lista não ordenada
12. Alinhamentos
• Os atributos de alinhamento são:
- Left: Alinhamento à esquerda
- Rigth: Alinhamento à direita
- Center: Centralizado
- Justify: Texto justificado
13. Imagens
A tag para inserir uma imagem em sua
página é a seguinte:
<img src="nome do arquivo de imagem que vai aparecer" alt="Texto
Alternativo para o caso da imagem não ser carregada"
border="espessura da borda da imagem" />
14. Links
• Links são os pontos clicáveis do
documento HTML que levam a qualquer
outro documento da sua página ou site na
Internet.
Exemplo:
<a href="nome do lugar a ser levado" title="Titulo do Link">descrição</a>
15. Linhas
Com as linhas é possível que você crie separações entre
textos e imagens. É muito simples criar uma linha. Basta
incluir a tag <hr />.
Ela possui os seguintes atributos:
- Width (largura)
- Align
- Color
- Noshade (Define se a linha vai ter um efeito
tridimensional. Se você não incluir este atributo, a linha
terá o efeito tridimensional.)
16. Formulários
• Os formulários são áreas reservadas para a entrada de dados,
onde o internauta pode preencher livros de visitas, pedidos de
compra, cadastros, enfim, várias possibilidades exsitem para o uso
de formulários.
Exemplo:
<form name="nome_do_formulario" action="url" method="método">
17. • Atributos que podem ser usados com a
tag <form>:
• Name;
• Action;
• Method;
18. • Objetos de controle do formulário:
- Input:
Indica um tipo de objeto inserido no formulário, TYPE é o seu parâmetro
principal.
Tipos suportados pelo parâmetro TYPE.
Text;
Checkbox;
Radio;
Reset;
Submit;
Password;
- Além de INPUT, temos também o objeto <textarea>...</textarea>. Ele é
usado para campos onde os textos serão longos.
- Finalizando temos um objeto chamado <select>, que assim como o
<textarea>, não utiliza a marcação padrão <input type> para campos de
formulário.
19. Tabelas
• As tabelas são definidas com a tag <table>.
• Use <tr> para uma nova linha;
• Use <td> para uma nova célula;
Exemplo:
<table border="1">
<tr>
<td>linha 1, célula 1</td>
<td>linha 1, célula 2</td>
</tr>
<tr>
<td>linha 2, célula 1</td>
<td>linha 2, célula 2</td>
</tr>
</table>
20. HTML e os caracteres especiais
A linguagem HTML permite que caracteres especiais sejam
representados por seqüências de escape, indicadas por três partes:
um & inicial, um número ou cadeia de caracteres correspondente
ao caractere desejado, e um ; final. Isso é muito útil para quando
você tiver problemas de codificação de texto em sua página.
Exemplos:
Entidade Caractere
á á
â â
à à
ã ã