Para quem trabalha ou deseja começar a trabalhar com programação para internet tem a obrigação de conhecer este conceito. O HTML (HyperText Markup Language - linguagem de marcação de hipertexto) pode ser resumido como etiquetas para formatação de texto na web. Isso mesmo etiquetas ou tags como é mais comum de ser ouvido... Hoje vamos abordar algumas das tags mais usuais e, de algum modo, básicas para criação de sites.
Padrões comuns
Após muito tempo de desenvolvimento e criação de sites os próprios programadores e designers perceberam que alguns códigos eram mais fáceis de se dar manutenção que outros. Foi então que começou-se a utilizar padrões de desenvolvimento. Não iremos nos aprofundar nesses tais padrões pois não é bem o objetivo deste artigo. Isso foi muito vantajoso para as empresas que percebeu que eles estavam ganhando em performance nas atribuições que envolviam o código HTML. Algumas dessas regras são usadas até os dias de hoje. Vejamos algumas regras mais comuns.
- Tirando as poucas excessões, toda tag deve possuir uma tag relativa de fechamento. O fechamento se dá com o mesmo nome da tag de abertura contudo iniciando-se com a barra. Exemplo: <TagHTML></TagHTML>, <html></html>, etc...
- Obedece-se uma hierarquia encadeada chamada identação. Isto significa dizer que a toda tag criada dentro de outra, deverá estar na linha inferior com afastamento de margem aproximadamente 1cm a mais que a tag superior (ver figura01, anexada ao e-mail).
- As Tags de fechamento devem estar localizadas sempre no mesmo afastamento de margem que a Tag de abertura relativamente anterior (ver figura01, anexada ao e-mail).
- Além dessas, se você estiver iniciando um trabalho com alguma equipe pode ter certeza de que irá encontrar outras personalizadas a necessidade desta equipe.
Imagem 1
Estrutura básica
Até algum tempo atrás, nós tínhamos browsers (aquile programa usado para acesar páginas da internet, dos quais podemos citar o Firefox e o Internet explorer) mais antigos e a estrutura básica de um documento em HTML deveria ser seguido a risca caso contrário versões diferentes ou outros modelos de browsers modificariam a estrutura de seu site. Para que isso não acontecesse foi definida uma estrutura básica para que fossem feitas páginas web.
Uma página HTML atualmente não precisa seguir rigidamente essa estrutura uma vez que temos atualmente melhoramentos dos programas interpretadores de tags. De qualquer forma a estrutura básica de desenvolvimento de muitas empresas seguem essas regrinhas para a estrutura de um arquivo HTML.
Todo documento HTML deve possuir as tags HTML, HEAD, TITLE e BODY, assim como as de seu fechamento. A estrutura ficaria mais ou menos assim:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD> <BODY>
</BODY>
</HTML>
A tag HTML informa ao browser que o que será lido a partir de agora é um documento voltado para web.
Já a tag HEAD indica dados sobre o próprio documento que está sendo lido. Aqui poderemos encontrar o título da página, tempo de atualização, descrição do autor, liguagens de programação global, estilos de formatação (CSS) e muitas outras informações.
A tag TITLE, "filha" de HEAD, define o título da página (localizado na barra de título do browser). Se o seguinte texto "Minha primeira página" estivesse entre a tag de abertura e a tag de fechamento de TITLE, este seria o título do documento quando aberto.
O corpo da página e todo seu conteúdo fica com a tag BODY. Ali poderá ser colocado textos, imagens, tabelas, formulários tudo o que desejar ser exibido ao usuário.
Montando o documento
Para se criar um arquivo HTML no Windows, abra o Bloco de notas (ou notepad) que pode ser aberto clicando-se no botão INICIAR - EXECUTAR. No campo apropriado digite o texto NOTEPAD e em seguida clique em OK.
Em seguida, copie o HTML abaixo e cole-o no bloco de notas.
<HTML>
<HEAD>
<TITLE>
Minha primeira página
</TITLE>
</HEAD> <BODY>
Iniciando o teste.
Minha primeira página em HTML. Isto é apenas um teste.
Fim de teste.
</BODY>
</HTML>
Ainda no bloco de notas vá em arquivo (ou file), Salvar (Save) e escolha um local de fácil acesso. Dê o nome do arquivo de "Principal.html"; assim mesmo: dentro de aspas duplas. Clique em salvar.
Agora abra seu arquivo. Voilá!
Note que as quebras de linhas feitas no exemplo não foram exibidos. Isto porque para cada formatação exigida requer-se uma tag HTML.
No mercado existem editores mais ágeis na criação de páginas HTML como o por exemplo o Macromedia Dreamweaver, Edit plus, entre outros... Eu oriento não utilizar editores mais robustos para não afetar o aprendizado. Não utilizar por enquanto. Aprenda primeiro e só depois que já se sentir a vontade com o HTML utilize um bom editor.
Apresentando informações aos usuários
Conforme dito anteriormente o BODY será a tag responsável por transmitir alguma informação ao usuário. Contudo ele sozinho não pode fazer muita coisa. Vejamos algumas outras tags que farão de seu documento HTML uma experiência mais agradável ao usuário.
Existem tags para fazer títulos dos textos de seu documento. São muito simples e variam seu tamanho de 1 a 6. Estou falando da tag <H1>Seu título aqui</H1>. Mude sua numeração e veja a diferença. Note que esta tag já gera espaçamento para a próxima linha como um parágrafo...
Seus textos estão sem graça? Sempre aquela mesma fonte de cor preta? Seus problemas acabaram! A tag <FONT>Seu texto aqui</FONT> pode resolver este problema. Esta tag pode-se considerar especial pois possui três atributos no mínimo interessantes: Face - que declara no tipo da fonte a ser usado -, Color - que defina a cor do texto - e Size - estabelece o tamanho da tag. "Mas como usar?" você deve estar se perguntando, pios eu respondo, a tag Font deve ser declarada da seguinte forma: <FONT FACE="nome da fonte" COLOR="cor" SIZE="tamanho">Seu texto</FONT>, onde:
*** o nome da fonte segue os padrões dos editores comuns como o MSWord (exemplo: verdana, arial, tahoma, etc),
*** cor significa um valor em hexadecimal (um número de base 6) precedido por um # (exemplo: #000000, #FFFFFF, #A035FF... Como opção você poderá usar os nomes das cores em inglês mesmo como yellow, orange, red, blue...), e
*** tamanho um número inteiro preferenciamente entre 1 e 3.
- Parágrafos e quebra de linhas:
Para se criar parágrafos use a tag <P> meu parágrafo</P>. Note que esta tag não exige seu fechamento, contudo pode ser interessante usar o seu fechamento devido a algum padrão usado como um bloco.
Já as quebras de linhas (quando você tecla ENTER no teclado durante a edição de um texto) são definidas pela tag <BR>. Esta tag não possui fechamento.
Numeradas: O agrupamento OL informa o tipo das listas que serão usadas. OL significa Ordened list. Seus itens deverão ser declarados com as tags LI, conforme demosntra o exemplo:
<OL>
<LI>Primeiro</LI>
<LI>Segundo</LI>
<LI>Terceiro</LI>
</OL>
Não numeradas: Usa como agrupadora a tag UL que significa Unordened List. Segue exemplo:
<UL>
<LI>Primeiro</LI>
<LI>Segundo</LI>
<LI>Terceiro</LI>
</UL>
Com a tag <HR> você pode introduzir linhas como divisórias entre os seus textos.
Um recurso muito usado na web hoje são as imagens. Opte sempre por Gifs e JPGs como formato preferencial de imagens para web.
Para inserir imagens use a tag <IMG SRC="local da imagem">. Note que esta tag não possui fechamento. A propriedade SRC da tag IMG indica um local válido com o nome da imagem. Aqui temos observações a fazer: Caso o arquivo esteja no mesmo diretório que a imagem apenas o nome da imagem e sua extensão deverá ser informado. Agora se a imagem estiver em uma pasta localizada no mesmo nível do arquivo HTML, precisaremos informar ao SRC que precisamos acessar a tal pasta antes de encontrar a imagem. desta forma declaramos o nome da pasta seguida por uma barra ("/") e só então escrevemos o nome da imagem. Este procedimento pode ser efetuado por quantas pastas forem necessárias para localizar a imagem. Exemplo: <IMG SRC="documentos_globais/prediletos/imagens/foto.jpg"> indica que a imagem encontra-se na pasta "imagens" dentro da pasta "prediletos" que também encontra-se em uma pasta de nome "documentos_globais"...
Para criarmos links ou ligações para outras páginas dentro ou fora de seu site declaramos o endereço ou simplesmente o nome do arquivo html. A tag usada é o A. Exemplo <A HREF="local">texto_exibido</A>, onde:
*** local é o endereço HTTP do site externo ou o nome do arquivo HTML do seu site. Note que para os casos em que seu arquivo HTML estiver em subpastas lembre-se das regras citadas no item imagens.
*** texto_exibido é o texto que deverá ser exibido para o usuário clicar. Perceba que neste momento no lugar do texto você pode usar imagens como link. Muito bom para criar banners de publicidade! Dica: se você estiver usando uma imagem como link use a propriedade BORDER="NO" da tag IMG para remover o efeito de borda criado pela tag A. Exemplo:
<A HREF='artigos.html'>
<IMG SRC="imagemArtigos.gif" BORDER="NO">
</A>
A construção de tabelas no HTML obedece alguns critérios:
- Toda linha deve possuir ao menos uma célula (coluna);
- Toda célula (ou coluna) é dependente de uma linha para ser criada;
- Tanto as células quanto as colunas podem ser mescladas mas o controle para isso deve ser feito por você. Então, tenha muita atenção quando utilizar esta propriedade.
- A tabela toda (incluindo linhas e colunas) pode ter borda (ou não), cor da borda, espessura da borda, tamanho, altura e cor da tabela (entre outras propriedades).
- As linhas podem ter cores, tamanho, altura e alinhamento do texto interno.
- As células (colunas) podem ter cores, tamanho, altura, alinhamento do texto interno e a propriedade de mesclagem de coluna ou linha.
Vejamos um exemplo completo para comentar:
<table border="2" bordercolor="RED" width="300" height="450" bgcolor="YELLOW">
<tr bgcolor="LIGHTGREEN" width="100%" height="100" align="center">
<td rowspan="3" bgcolor="ORANGE" align="center" width="8">
T r ê s - l i n h a s - e s t ã o - m e s c l a d a s
</td>
<td align="left"> A </td>
<td align="center"> B </td>
<td align="rigth"> C </td>
</tr>
<tr height="300">
<td valign="top">1</td>
<td valign="middle">0</td>
<td valign="bottom">0</td>
</tr>
<tr height="50">
<td bgcolor="LIGHTGREEN" colspan="3">
Três células estão mescladas
</td>
</tr>
</table>
Vamos lá: Simplesmente a tag TABLE inicia uma tabela. A tag TR inicia uma linha mas só existirá se a TD, a tag de célula, existir. Note que todas possuem seus respectivos fechamentos.
As propriedades: Em table usamos BORDER. Esta propriedade se vier com o valor 0 indica que não haverá exibição de borda. caso contrário o número será a espessura da borda.
BORDERCOLOR indica uma cor à borda.
WIDTH largura da tabela. Pode ser um valor inteiro em pixels (o menor elemento que uma imagem pode ter, um pontinho da imagem) ou uma porcentagem.
HEIGHT Altura da imagem. Também pode vir em pixel ou porcentagem.
BGCOLOR (background color) cor de fundo.
ALIGN Alinhamento horizontal do texto. Seus valores podem ser left (esquerda), center (centro) ou right (direita).
VALIGN Alinhamento vertical do texto. Seus valores podem ser Top (alto), Middle (Meio) ou Bottom (baixo).
ROWSPAN Esta propriedade serve para mesclar linhas. Deve ser usada apenas em TDs. Seu valor indica a quantidade de células que serão mescladas abaixo desta. Note que nas linhas abaixo desta suprimiu-se uma célula (coluna) por linha devido a sua mesclagem.
COLSPAN Mesclagem de célula (coluna). Deve ser usada apenas em TDs. Seu valor indica a quantidade de células que serão mescladas lateralmente a ela. Note que nas células ao lado desta suprimiu-se uma célula (coluna) para cada unidade informado na propriedade.
Formulários são campos e botões que são usados para comentários ou comunicação de alguma forma entre usuários e empresas. Não entraremos em detalhes de como ocorre os envios dos dados neste momento porque não vem ao caso deste artigo. A idéia é iniciar a prática desta seção que é muito usada em sistemas dinâmicos na internet. Prometo criar um artigo em breve para tratar este assunto.
Para se criar um formulário, você precisará utilizar a tag <FORM> a qual servirá para delimitar a área limite deste formulário. Alguns comandos só funcionarão com a presença desta tag.
Nos formulários nós teremos campos de texto, caixas para marcação multipla, caixas para marcação única, caixas suspensas, áreas de texto maiores e botões.
Para nossos estudos, inicialmente trabalharemos com apenas 2 tipos: Texto comum e senha.
O campo de texto comum é realizado pela tag INPUT (significa de entrada) com o tipo definido TEXT. Ou seja: <INPUT TYPE="TEXT">. Note que esta tag não possui fechamento.
O campo de senha deve ser uma tag INPUT do tipo "PASSWORD". Ou seja: <INPUT TYPE="PASSWORD">. Note que esta tag não possui fechamento. Este campo permite que campos secretos como o de senha, ao ser digitado algo dentro exibe apenas estrelinhas ou bolinhas (dependendo do browser do cliente).
- caixas para marcação multipla
Esta é a forma mais simples de trabalhar questões de multipla escolha. A tag INPUT recebe o tipo CHECKBOX. Ou seja: <INPUT TYPE="CHECKBOX">. Note que esta tag não possui fechamento. Geralmente o texto de escolha visivel ao cliente fica ao lado direito desta tag.
- caixas para marcação única
Outra tag de marcação é a INPUT do tipo RADIO. Contudo, diferente de checkbox, a propriedade NAME deve existir e para que o sistema não permita multipla escolha os nomes do grupo de respostas deverá obrigatoriamente possuir o mesmo nome. Exemplo:
1) Quem descobriu o brasil?<BR>
<INPUT TYPE="RADIO" NAME="descobriuBrasil">Noé<br>
<INPUT TYPE="RADIO" NAME="descobriuBrasil">Luiz Inácio Lula da Silva<br>
<INPUT TYPE="RADIO" NAME="descobriuBrasil">Pedro Alvares cabral<br>
<INPUT TYPE="RADIO" NAME="descobriuBrasil">Papai Noel
Toda caixa suspensa deve possuir um agrupador e suas opções. O agrupador para caixas suspensas chama-se SELECT. Suas opções são chamadas pela tag OPTION. Veja o exemplo:
<SELECT>
<OPTION>Opção 1</OPTION>
<OPTION>Opção 2</OPTION>
<OPTION>Opção 3</OPTION>
</SELECT>
Os chamados TEXTAREA foram criados para digitação de textos mais longos como é o caso de campos de endereço, campos de edição de e-mail ou mesmo um editor de texto como o word (na versão web...). Eles são declarados das seguinte forma:
<TEXTAREA ROWS="numero_linhas" COLS="numero_colunas"></TEXTAREA>
Onde ROWS indica um número de linhas e COLS o número de colunas que o browser precisará dispor para montá-lo. Na verdade estas características funcionam semelhante ao width e height. Isso define a largura e a altura do campo.
Por fim os botões. Nesta categoria podemos dividir em 3 tipos de INPUTs:
- SUBMIT é o botão usado para enviar os dados digitados em seu formulário. Exemplo: <INPUT TYPE="SUBMIT" VALUE="OK">. O campo VALUE funciona como rótulo do botão, aquilo que virá escrito no botão visulamente falando.
- RESET é o botão de faz a limpeza de todos os campos do formulário. Exemplo: <INPUT TYPE="RESET" VALUE="Limpar formulário">.O campo VALUE funciona como rótulo do botão, aquilo que virá escrito no botão visulamente falando.
- BUTTON é o botão sem ação. Ele é usado para que o desenvolvedor use, por meio de outras linguagens de programação, uma ação específica. Não entraremos em detalhes agora em relação a isto também. Exemplo: <INPUT TYPE="BUTTON" VALUE="Meu botão">. O campo VALUE funciona como rótulo do botão, aquilo que virá escrito no botão visulamente falando.
Exemplo de formulário:
<FORM>
Usuário: <INPUT TYPE="text"><br>
Estado:
<SELECT>
<OPTION>GO</OPTION>
<OPTION>DF</OPTION>
<OPTION>MG</OPTION>
</SELECT><br>
Interesses:
<INPUT TYPE="checkbox">Filmes
<INPUT TYPE="checkbox">Livros
<INPUT TYPE="checkbox">Músicas<br>
Sexo:
<INPUT TYPE="radio" name="sexo">Masculino
<INPUT TYPE="radio" name="sexo">Feminino<br>
Senha: <INPUT TYPE="password"><br><br>
<INPUT TYPE="Submit" value="Enviar">
<INPUT TYPE="reset" value="Limpar">
<INPUT TYPE="button" value="Fechar">
</FORM>
Existe muito a ser dito ainda. Espero que tenham gostado. É pouco pra quem já sabe mas para quem não sabe ou não lembra isso pode dar até um "nó nas tripas"...hehehehe.
Espero receber comentários sobre o texto, ok?
Então até o próximo artigo!
Abraços!
