HTML (Linguagem de marcação de hipertexto) é a linguagem designada para criar páginas da web
Passo 1 - Introdução
Para criar um arquivo html pode usar simlplesmente um editor de texto como o WordPad ou até mesmo o Bloco de Notas. Mas se você preferir criar páginas mais complexas, é recomendado editores mais sofisticados como o FrontPage, Macromedia Dreamweaker,etc..
Passo 2 - Começando uma página
o corpo básico de uma página HTML, é composto pelas tags:
<HTML>
<BODY>
</BODY>
</HTML>
Toda Tag tem que ser fechada, se você abre uma tag <HTML>, obrigatóriamente você deverá fechar com uma barra </HTML>
Não há necessidade de organização, mas uma HTML bem organizada facilita a compreensão e edição.
Passo 3 - A página
Abra o editor de texto de sua preferência, eu recomendo mesmo o bloco de notas pela sua simplicidade.
Primeiramente, digita-se os comandos básicos:
<HTML>
<BODY>
</BODY>
</HTML>
Para adicionar um título na página é necessário digitar as tags <HEAD> e <TITLE> que fica entre as tags <HTML> e </HTML>.
<HTML>
<HEAD>
<TITLE>seu título vai aqui
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Este Título não é um cabeçalho, esse é o texto que aparece na navbar do navegador.
Na Tag Body que vem a configuração padrão da página.
No seu editor de texto,vá em salvar como e no menu dropdown mude de Documentos de texto (*.txt) para Todos os Arquivos. Salve com o nome página1.html
Passo 4 - configurações básicas
Para alterar a cor do plano de fundo usa-se o atributo bgcolor na tag <BODY>.
<BODY bgcolor="#FFA500">
O HTML usa também um código de cores, não é necessário gravá-las (é Lógico) por isso existe infinitas tabelas dispoíveis na Web por aí.
Neste link há uma tabelá com a maioria das cores: http://www.mxstudio.com.br/Conteudos/Dreamweaver/Cores.htm
Uma página com esse background ficaria assim:
<HTML>
<HEAD>
<TITLE>Página de exemplo
</TITLE>
</HEAD>
<BODY bgcolor="#FFA500">
</BODY>
</HTML>
Para colocar uma imagem no plano de fundo não é tão difícil, usa-se o atributo background.
<BODY background="imagem_fundo.jpg">
A imagem tem que estar salva na mesma pasta que o HTML o você pode colocar um diretório ou o link da imagem, EX:
<BODY background="C:\Users\imagem_fundo.jpg"><BODY background="http://www.site.com/imagem_fundo.jpg">
Você também mudar a cor do texto de toda a página com o atributo Text
<BODY text="#CC0000">
Então você poderá juntar esses atributos na tag <BODY><HTML>
<HEAD>
<TITLE>Página de exemplo
</TITLE>
</HEAD>
<BODY bgcolor="#FFA500" background="imagem_fundo.jpg" text="#CC0000">
</BODY>
</HTML>
Passo 5 - Textos
Uma das formas de se fazer textos em HTML é com a tag <Hx>
X é o tamanho da fonte, considere 1 a fonte maior e 6 a menor.
Escreva o texto entre as tags <BODY> e </BODY>
Um exemplo usando uma letra de tamanho médio
<HTML>
<HEAD>
<TITLE>Página de Exemplo
</TITLE>
</HEAD>
<BODY>
<H3>O texto será escrito aqui</H3>
O texto que fica de fora das tags fica com o tamanho padrão
</BODY>
</HTML>
Se você não quebrar a linha, um texto ficará do lado do outro.
usa a tag <BR> , esta não precisa ser fechada.
<BODY>
<H3>Parágrafo 1</H3>
<BR>
<H3>Parágrafo 2</H3>
</BODY>
Você também pode usar a tag <P> para configurar páginas.
Para alinhar seu texto ao centro você pode usar:
<P align="center">seu texto aqui</P>
Você, ao invés de "center", pode usar "left" (esquerda) ou "right" (direita).
Um atributo mais fácil para as definições da letra é o Font, EX:
<font color="#FFA500" face="arial" size="12">
O "size" é medido em pixels.
Para a formatação da letra você pode usar outras tags como:
<B></B> para escrever em negrito
<I></I> para escrever em itálico
<U></U> para escrever sublinhado
<SUB></SUB> para escrever subscrito
<SUP></SUP> para escrever sobrescrito
Você pode usar mais de um, EX:
<I><U>texto itálico e sublinhado</U></I>
Passo 6 - Imagens
Para inserir uma imagem usa-se a tag Img.
Nela se define a borda, tamanho, alinhamento, etc.
<img src="Imagem.jpg" height="50px">
Na imagem.jpg você deve colocar o diretório da imagem ou sua URL, assim como no background, no começo da postagem.
O atributo Height pode ser medido em pixels ou porcentagem. Ele muda a resolucção da imagem inteira, mas para mudar a largura (isso pode distorcer a imagem) vocÊ adiciona o atributo Width, que também pode ser medido em pixels ou porcentagem.
Passo 7 - Links
A tag que define o Link é a <A href="link"></A>
EX:
<A href="http://www.site.com/">Texto que irá aparecer</A>
No link, você coloca o diretório de onde está uma outra página HTML salva no seu computador, ou coloca a URL do site que você quer ir, como no exemplo.
Ex. Diretório:
<A href="C:\Users\Página.html">Texto que irá aparecer</A>
Se você não colocar nada no texto (Roxo), irá aparecer o próprio link para você clicar, ex:
Com o texto:
Que Isso Nerd
Sem o texto:
http://www.queissonerd.tk/
Para você mudar as cores do link da sua página você muda lá na tag <BODY>
<BODY link="Código da cor" vlink="Código da cor" alink="Código da cor">
vlink é a cor do link visitado
alink é a cor que o link fica quando o mouse está em cima.
Observação Imporante:
Para visualizar como está seu HTML abra o arquivo com o navegador de sua preferência.
0 comentários:
Postar um comentário