Conceitos básicos de html
Autor: Sandoval | Publicado: 2011-06-18T17:33:00-07:00


O html é linguagem simples e estática baseada em tags. Vamos
ver um exemplo &lt;html&gt;&lt;/html&gt; está é uma tag html. Ela abre
com &lt;html&gt; e fecha com &lt;/html&gt;. Está tag delimita o conteúdo
da página.
Alem desta temos outras tags muitos importantes como a tag
&lt;head&gt;&lt;head&gt; que define o cabeçalho da página com algumas
Informações como &lt;title&gt;&lt;/title&gt; que defini o título da página.
O corpo da página web deve ser definido dentro das tags &lt;body&gt;
&lt;/body&gt;. Como os formulários que preenchemos.

Vamos ver como fica o exemplo de uma pequena página.
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Minha primeira página&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
HTML -&gt;HyperText Markup Language -&gt;
Linguagem de Formatação de Hipertexto
&lt;/body&gt;
&lt;/html&gt;


Formatando fonte
Para formatar fonte usamos a tag &lt;font&gt;&lt;/font&gt;, nessa tag vamos
Definir algumas propriedades face = nome da fonte, e color =
cor no padrão RGB.
&lt;FONT FACE="Verdana" COLOR="#0000AA“ SIZE=“8+”&gt;BlueStar&lt;/FONT&gt;


Criando links
Em html podemos fazer links (ligações) para imagens, vídeos,
ou outras páginas web. Vamos ver como se faz.
Veja o &lt;A HREF="http://www.icmc.usp.br/ensino/material/html/caminhos.html"&gt;
tutorial da USP&lt;/A&gt; sobre html.
O &lt;a é o inicio da nossa tag pra gerar um link. HREF é o caminho
que será aberto pelo browser. O texto tutorial da usp será o texto
sublinhado que aparecera sublinhado para usuário clicar e abrir a
página especificada em href.


Inserindo imagens
Para inserir imagens usamos a tag &lt;img src=‘’/&gt; repare que
essa abrimos e fechamos tag de uma só vez.
&lt;IMG SRC = "/logo/logo.gif“/&gt;


Tabelas
&lt;html&gt;
&lt;head&gt;&lt;head&gt;
&lt;body&gt;&lt;!-- Isto é um comentario html --&gt;
&lt;FONT FACE="Verdana" COLOR="#0000AA" size='8+'&gt;BlueStar&lt;/FONT&gt;
&lt;!-- Definindo uma tabela com borda --&gt;
&lt;table border='1'&gt;
&lt;tr&gt;&lt;!-- abre uma nova linha na tabela --&gt;
&lt;td&gt;linha1, coluna1&lt;/td&gt;&lt;!-- abre e fecha coluna--&gt;
&lt;td&gt;linha1, coluna2&lt;/td&gt;
&lt;/tr&gt;&lt;!-- fecha uma nova linha na tabela --&gt;
&lt;tr&gt;
&lt;td&gt;linha2, coluna1&lt;/td&gt;
&lt;td&gt;linha2, coluna2&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;


Formulários
Todo o formulário em html começa com a tag &lt;form&gt;&lt;/form&gt; e entre essas
duas tags devemos colocar os campos, mas antes disso vamos ver os principais
atributos de &lt;form&gt;
Action: especifica a url para onde será enviado os dados do form
Method: especifica o método utilizado no envio dos dados que
podem ser get ou post.


Inserindo campos no formulário
Basicamente quase todos tipos de campos são a mesma tag a
&lt;input&gt;, sempre utilize a propriedade name para que o serivdor
Consiga identificar os valores de cada campo,apenas mudamos
a propriedade type que pode ser:
•Text: campo de texto
•Password: campo para senhas (não mostra o valor digitado)
•Radio: campos de única escolha
•Checkbox: campos de multipla escolha
•Submit: botão que envia os dados para o servidor.


Select
Apresenta uma lista de valores definidos com option.
&lt;SELECT NAME=“curso"&gt;
&lt;OPTION&gt;JSP
&lt;OPTION&gt;Banco de dados
&lt;OPTION&gt;Java
&lt;OPTION&gt;Lógica
&lt;/SELECT&gt;


Outras tecnologias para camada de
apresentação
Ajax: Asynchronous Javascript And XML -&gt; Java Script
assíncrono e xml. Como o nome já diz recupera assíncronamente
dados usando o objeto XMLHttpRequest.
Appet: Carrega um pegueno aplicativo Java com interface awt.
Struts: Existe diversos componentes prontos em HTML.
GWT: Google Web Toolkit. Traz vários recursos Ajax e traz
interface idêntica ao gmail. Programar com GWT é parecido
com swing.

Mesmo nas outras tecnologias de apresentação como Applet ou
GWT você vai precisar usar html. Então comece estudando
HTML para depois passar para outra tecnologia de apresentação
Web.