Guia Básico de HTML
O primeiro tutorial que escrevi, mal explicado e cheio de erros, mas acho que apesar dos apesares ele ainda pode ser uma pequena e util referência a quem está começando a brincar de criar páginas.
—
Começando
Bom, como já devem saber, a unica coisa que você precisa pra criar páginas em HTML um um editor de texto qualquer, vamos usar o bloco de notas do windows.
Lembrando, que para o arquivo ser executado como uma página web, é preciso salva-lo com a extensão .html ou .htm
A estrutura básica de uma página HTML é a seguinte:
<head> <!– indica o inicio do cabeçalho –>
<title>Título</title> <!– como da pra ver, indica o título da página –>
</head><!– fecha o cabeçalho –>
<body> <!– abre o corpo da página, é aqui que se coloca todo o conteúdo do site, como tabelas, figuras, texto etc –>
…
</body><!– fecha o corpo da página –>
</html> <!– termina o código HTML –>
Entre as tags <head></head>, também podem ser adicionados efeitos em CSS ou funções em JavaScript.
Propriedades do Corpo
É possível configurar várias opções de uma página utilizando a tag <body>, como a cor do texto ou background.
Para definir a cor do background use:
ou usar uma cor em hexadecimal:
O mesmo pode ser feito com textos e links:
- ALINK é a cor do link ativo;
- VLINK é a cor do link que já foi visitado.
Para adicionar uma figura no funda da página, basta usar o seguinte código:
Você pode deixar a imagem de fundo como um painel fixo(isso só funciona no internet explorer):
Formatando o texto
- Para centralizar um texto, basta digita-lo entre as tags <center></center>
- Para deixar um texto em negrito, use as tags: <b></b>
- Para deixar o texto em itálico, use as tags: <i></i>
Para deixar um texto sublinhado, use: <u></u>
- Para adicionar uma linha acima do texto, use> <s></s>
- Para deixar um texto subscrito, use: <sub></sub>, para fazer o inverso, use: <sup></sup>.
Para entender melhor crie uma página com o código:
- Para fazer uma quebra de linha use a tag <BR>, exemplo:
- Tamanho do texto
Você pode definir o tamanho de um texto utilizando as tags<Hx></Hx>
sendo que x é um valor entre 1 e 6. Quanto menor o numero maior o texto, para entender melhor crie uma página com o código:
- Marquee - Adiciona efeitos de rolagem em um texto, é possível criar vários tipos, mas isso eu explico em uma outra matéria mais especifica.
Para usar o marquee, use as tags: <marquee></marquee>
Agora, crie páginas utilizando todas essas tags que eu passei para treinar.
Existem outras tags q podem ser usadas, mas estas são as principais
A Tag <font>
A tag <font>, é utilizada para definir o tamanho da fonte, a cor e tipo.
Se pode usar os seguintes atributos:
- Face - indica o tipo(fonte)a ser usada;
- Size - indica o tamanho, que deve ser uma valor entre 1 e 7, ao contrario das tags <Hx></Hx>, aqui quanto maior o número, maior será o texto;
- Color - indica a cor.
Exemplo:
Listas
Forma básica de uma lista:
- Listas não ordenadas:
Use as tags: <ul></ul>
Exemplo:
- Listas ordenadas:
Cria uma lista organizada de alguma forma, como por exemplo uma lista numerada.
Usa as tags <ol></ol>
Também se pode atribuir o índice, que pode ser:
- 1 - Numérico
- a - Alfabético, minúsculas
- A - Alfabético, maiúsculas
- I - Algarismos romanos
exemplo:
Treine estas tags.
Links
Para adicionar um link em uma página, basta adicionar o seguinte código:
Também se pode definir onde vai ser aberta a nova página usando “target”.
Exemplo:
Eu explicarei melhor isso quando formos falar de frames.
Para fazer um link para e-mail use:
Imagens
Para inserir uma imagem, use:
Você também pode usar vários atributos:
- Alt - Exibe uma descrição da imagem quando o mouse fica parado na imagem;
- width - Largura da imagem;
- heigth - Altura da imagem.
Exemplo:
Tabelas
As tabelas são muito utilizadas em uma página html, elas permitem organizar textos, links, figuras e o que mias for preciso. Hoje com o uso de tableless as tabelas estão se tornando dispensáveis em muitos casos, mas mesmo com essa nova forma de estruturar páginas, as clássicas tabelas continuam sendo algo que todo desenvolvedor web precisa dominar.
Para definir uma tabela, se usa as tags: <table></table>. para começar, vou mostrar um exemplo:
<table><!– inicia a tabela –> <tr><!– cria uma linha na tabela –> <td><!– cria uma coluna na tabela –> </table><!– fecha a tabela –>
Como na tag <body>, você também pode adicionar alguns parâmetros para a tag <table>:
- Border - Tamanho da borda, exemplo:
- Width - Largura da tabela ou célula;
- Cellspacing - Define o espaço entre as células, ou seja, a largura das linhas de grade;
- Cellpadding - Define o espaço entre o conteúdo e as bordas da célula
- Align - Configura o alinhamento. Exemplo:
- bgcolor - define a cor de fundo da tabela ou célula, funciona do mesmo modo da tag <body>;
- Nowrap - Se você colocar este parâmetro em uma célula, o texto da célula o browser entende que o texto não pode ser dividido em mais de uma linha;
- Colspan- Define o número de colunas de uma tabela a ser ocupado por uma célula na horizontal, por exemplo, se vc colocar: COLSPAN=2 em uma célula, ela ocupara o seu espaço e o espaço de mais uma à direita;
- Rowspan - semelhante ao colspan, só q esse define o espaço verticalmente.
O unico jeito de dominar as tabelas, é treinando muito, vou colocar esse exemplo sem atributo nenhum, e com ele testem por conta própria alguns atributos citados acima.
Frames
Frames são divisões que se pode fazer em uma página, assim exibindor duas páginas ao mesmo tempo.
Estrutura básica:
Perceba que em uma página com frames, não se usa as tags <body></body>, isso pq na página que são definidos os frames, não se pode conter nenhum tipo de conteúdo, como texto, figuras etc..
O exemplo acima, cria uma página dividida em duas partes, uma que ocupa 20% e a outra conseqüentemente 80%
Ao definir frames, é preciso que a soma das divisões seja 100, para ocupar toda a página.
Na tag <frameset> é onde definimos o tipo de frame e o seu tamanho. Veja alguns atributos:
- cols - define frames em colunas;
- rows - define frames em linhas;
- scrolling - indica se o frame deve ter ou não uma barra de rolagem, os valores aceitos são “yes” ou “no”. Exemplo:
- Name - define um nome para o quadro, sem isso, não é possivel utilizar links muito bem.
Links em frames
Quando você adiciona um pagina com links em um frame, os links dessa página serão abertos no mesmo frame onde está a página e, muitas vezes, precisamos que ele abra em outro frame(em menus por exemplo), para isso é só definir os nomes dos frames, e adicionar links com o atributo target.
Exemplo:
Onde “conteudo” é o nome do frame onde a página deve ser aberta
—
É isso, repito que esse foi meu primeiro tutorial, criado a alguns anos. É possível encontrar vários errinhos, mesmo eu tendo feito uma pequena revisão antes de postar aqui.
Até o próximo post o/
Aula 03 « Atividades WEB / Colégio Graham Bell disse,
Maio 13, 2008 às 5:30 am
[...] http://henriquehb.wordpress.com/2008/04/21/guia-basico-de-html/ [...]