Voltar para Página Inicial
COMO CRIAR UMA PÁGINA PESSOAL (PASSO-A-PASSO)
*Linguagem html
Significa HyperText Markup Language (linguagem de hipertexto), baseada em marcas (inglês tags). Aparecem sempre entre < >.
*Estrutura básica de uma página
Começa com o tag <HTML>, que identifica o começoo da mesma, e termina com </HTML>, que identifica o final. O interior está dividido em duas grandes áreas:
- o cabeçalho: compreendido entre os tags <HEAD> e </HEAD>. Inclui um título, assim:
<HEAD>
<TITLE> Escreva aqui o que sairá na barra de título do navegador</TITLE>
</HEAD>
- o corpo: compreendido entre <BODY> e </BODY>. Assim:
<BODY>
Escreva aqui o título do conteúdo da página que será mostrado pelo navegador
</BODY>
* Configurações da página
Acrescentando-se ao tag <BODY> alguns comandos é possível modificar algumas configurações como: cor ou figura para o fundo, cor da letra, cor dos links, ... O processo é bastante simples, assim:
- Cor de fundo: Acrescenta-se ao tag <BODY> o comando BGCOLOR=cor desejada em inglês ou código da cor em html.
- Cor no link: Acrescenta-se ao tag <BODY> o comando LINK=cor desejada em inglês ou código da cor em html.
- Cor no link já visitado: Acrescenta-se ao tag <BODY> o comando VLINK=cor desejada em inglês ou código da cor em html.
- Figura no fundo da página: Acrescenta-se ao tag <BODY> o comando BACKGROUND=cor desejada em inglês ou código da cor em html.
Assim, o tag <BODY> inteiro seria, por exemplo:
<BODY BGCOLOR=magenta TEXT=blue LINK=black VLINK=white>
*Alguns comandos para formatação
-Formatação da fonte: O tag <FONT> e </FONT>, permite formatar as fontes utilizadas. É possível modificar o tamanho, a cor e o tipo de fonte.
-Tamanho da fonte: Utiliza-se o comando SIZE=X, onde X pode ser qualquer tamanho de 1 à 8.
-Cor da fonte: Utiliza-se o comando COLOR=X, onde X corresponde a cor da fonte a ser utilizada (nome em inglês ou código da linguagem html).
-Tipo de fonte: Utiliza-se o comando FACE=X, onde X indica o nome da fonte a ser utilizada (é necessário que a mesma conste na memória do computador).
Um exemplo de formatação de fonte, seria:
<FONT SIZE=2 COLOR=blue FACE=Times New Roman> </FONT>
-Itálico: <I>Escreva aqui a(s) palavra(s) que apresentarão tal formato</I>
-Negrito: <B>Escreva aqui a(s) palavra(s) que apresentarão tal formato</B>
-Sobrescrever: <SUP>Escreva aqui a(s) palavra(s) que apresentarão tal formato</SUP>
-Subescrever: <SUB>Escreva aqui a(s) palavra(s) que apresentarão tal formato</SUB>
-Sublinhado: <U>Escreva aqui a(s) palavra(s) que apresentarão tal formato</U>
-Não formatar texto: <PRE>Escreva aqui a(s) palavra(s) que apresentarão tal formato</PRE>, este tag apresenta o texto de maneira como foi digitado, respeitando todos os comandos dados e seu estilo de diagramação, contudo não aceita o texto justificado.
-Tamanho: Os títulos e subtítulos de páginas são marcados com <HX> e </HX>, onde X é um valor entre 1 e 6. O maior é o 1 e os sucessivos têm a metade do tamanho anterior.
-Quebrar uma linha:Permite iniciar nova linha (equivale ao comando "Enter" no "Word". Assim: <BR>
-Linha divisória: O comando <HR> inclui uma linha horizontal divisória. Acrescentando-se alguns "subcomandos" podemos modificar largura, espessura e posição desta linha divisória, assim:
-Alinhamento: O alinhamento à esquerda é o formato padrão, para qualquer outro tipo deve ser adicionado ao tag inicial o modificador ALIGN=X, onde X é CENTER (centralizado) ou RIGHT (à direita), ou simplesmente acrescentar o comando <CENTER> e </CENTER>
Resumidamente, alinhamentos são definidos assim:
-Centralizado: <CENTER> </CENTER>
-Justificado: <P ALIGN=justify> <P>
-À esquerda: <P> </P>
-À direita: <P ALIGN=right> <P>
* Listas
-Numeradas: As listas aparecem enumeradas de 1 até o número desejado. O tag fica assim:
<OL>
<LI>nome do item 1
<LI>nome do item 2
<LI>nome do item 3
segue-se assim até o número desejado
</OL>
-Não numeradas: As listas não apresentam numeração. Assim:
<UL>
<LI>primeiro item
<LI>segundo item
<LI>terceiro item
segue-se de acordo com a quantidade de itens
</OL>
* Tabelas
Uma tabela vai entre os tags de início <TABLE> e fim </TABLE>. Cada linha inicia com <TR> e termina com </TR>. Entre cada linha encontram-se distribuídas as colunas, que iniciam com o tag <TD> e terminam com </TD>. O processo repete-se tantas vezes quantas linhas e/ou colunas se deseja, assim:
<TABLE>
<TR>
<TD>Escreva aqui o conteúdo da célula A1</TD>
<TD>Escreva aqui o conteúdo da célula B1</TD>
...(assim por diante para as células C1, D1, E1, ...)
</TR>
<TR>
<TD>Escreva aqui o conteúdo da célula A2</TD>
<TD>Escreva aqui o conteúdo da célula B2</TD>
...(assim por diante para as células C2, D2, E2...)
</TR>
...(assim por diante para linha 3, 4, 5...)
</TABLE>
-Formatação de tabelas: O conteúdo das células é formatado de acordo com os critérios vistos para formatação de fontes. Algumas formatações específicas para tabelas são:
*Bordas de tabelas: Incluir na marca inicial <TABLE BORDER=X>, no qual X é um número inteiro que indica ao navegadora espessura da borda em pixels.
*Tamanho da tabela: Incluir na marca inicial <TABLE WIDTH=X>, onde X é uma porcentagem que indica uma largura variável proporcional à janela do navegador.
*Inserindo Imagens, Backgrounds e Links
-Imagens: Apenas dois tipos de extensão são lidas pelo browser: ".gif" e ".jpg"(ou ".jpeg"), outras extensões devem ser repassadas para estes tipos. A tag <IMG SRC="nome da imagem.gif(ou .jpg)"> permite inserir a imagem "nome da imagem.gif(ou .jpg)" no trabalho (Nota: a imagem deverá localizar-se no mesmo diretório que do arquivo que a contém - caso esteja em diretório diferente é necessário acrescentar a tag a localização, assim: <IMG SRC="/diretório que a contém/nome da imagem.gif(ou. jpg)"> - e o nome deve ser escrito tal e qual como foi salvo originalmente - cuidar espaçamentos e maiúsculas/minúsculas).
-Possíveis atributos de imagens: Utilizam-se alguns comandos já conhecidos - WIDTH=comprimento, HEIGHT=altura e BORDER=largura da borda(valor igual a zero elimina a borda) - e, além destes, o comando ALT=descrição da imagem, que permite acrescentar uma sucinta descrição do conteúdo da imagem (caso a mesma esteja oculta o seu conteúdo é sabido pela descrição). A tag completa da inserção de uma imagem poderia ser esta:
-Backgrounds: O background ou textura substitui a cor usada como atributo na tag <BODY>, para isso acrescenta-se a esta tag o comando BACKGROUND="nome da textura.gif(ou .jpg)" - a textura em questão, tal como no caso de inserção de imagens, deve localizar-se no mesmo diretório que do arquivo que a contém e deve ser escrita examente com o nome que foi salva originalmente.
-Links: Para ser possível criar um Link é necessário, obrigatoriamente, ter a certeza do destino do mesmo. Após tal constatação, a tag completa da inserção de um link poderia ser esta: