Embed Size (px)
Citation preview
1ª Aula PHP
Revisão HTML
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>
• 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>
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>
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
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.
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>
Quebras de Linha
• Caso você queira simplesmente mudar de linha, ao invés de mudar de parágrafo, coloque a tag <br />.
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.
Lista OrdenadaExemplo:
<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 ordenada2. Segundo item de uma lista ordenada3. Terceiro item de uma lista ordenada
Lista Não OrdenadaExemplo:
<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
Alinhamentos
• Os atributos de alinhamento são:
- Left: Alinhamento à esquerda
- Rigth: Alinhamento à direita
- Center: Centralizado
- Justify: Texto justificado
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" />
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>
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.)
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">
• Atributos que podem ser usados com a tag <form>:
• Name;
• Action;
• Method;
• 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.
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>
HTML e os caracteres especiaisA 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
á áâ âà àã ã
