Você está na página 1de 9

Passa a passo para construir uma pgina pessoal - Parte 1

Quais ferramentas so necessrias? - Editor de texto bsico (sem formataes): use o Bloco de Notas (no use o MS Word e WordPad) - Navegador (browser): voc pode usar qualquer um a seguir: Internet Explorer, Mozilla Firefox, Google Chrome, etc (neste passo a passo vamos utilizar o navegador Mozilla Firefox) Faa passo a passo o exemplo a seguir e depois repita os procedimentos para cria a sua pgina pessoal. Passo 1. Crie uma pasta que ir armazenar a pgina. Veja o exemplo: 1.1. D um duplo clique no cone do meu computador (fica na rea de trabalho)

1.2. D um duplo clique no cone do disco local (drive C:) 1.3. Clique com o boto direito do mouse na parte sem cones (na parte branca). Dever aparecer um menu semelhante a figura abaixo:

1.4. Selecione a opo: Novo - Pasta. Assim voc dever criar uma nova pasta.

1.5. D o nome que desejar a pasta. No use espaos nem acentuao. Passo 2. Abra o Bloco de Notas.

Passo 3. Coloque o seguinte texto. Isso j um cdigo HTML.


Indica o incio do cdigo HTML Incio e fim do corpo da pgina. Tudo o que colocar aqui neste espao dever aparecer no navegador Indica o fim do cdigo HTML Insere um texto na barra da janela do navegador Indica o incio e fim do local reservado para escrever o cabealho Texto que aparecera no navegador Deixa o texto que estiver entre <b> e </b> em negrito

- O texto pode ser em letras maisculas ou minsculas. Passo 4. Salvar a pgina HTML. 4.1. V at o menu Arquivo e selecione a opo Salvar

4.2. Localize a pasta que voc criou no passo1

4.3. Altere a opo Salvar como tipo: coloque Todos os arquivos, veja na figura abaixo:

4.4. D um nome para a pgina. No exemplo estamos chamando de inicio.html OBS: nomes de pginas NO podem ter espaos e NO podem ter acentuao. Pela padronizao da Internet os nomes devem ser em letras minsculas. OBS2: Para ser uma pgina da Internet dever ter a extenso .html. Assim coloque o nome da pgina e .html. Veja a figura abaixo:

5. Vamos abrir a pgina para verificar o que foi feito at agora. 5.1. V at a pasta que foi criada no passo 1 a qual ns salvamos a pgina. D dois cliques no cone da pgina. Observe que dependendo no navegador instalado em seu computador o cone da pgina pode se diferenciar. Neste do nosso exemplo estamos usando o Mozilla Firefox.

5.2. O navegador padro do seu computador dever abri-la. Neste caso abriu como Mozilla FireFox

Vamos ver como a gente conseguiu fazer a pgina com o HTML.


Insere um texto na barra da janela do navegador Texto que aparecera no navegador

A partir deste ponto, podemos alterar a pgina e colocar a configurao que desejarmos. Como alterar o cdigo HTML da nossa primeira pgina? V at a pasta que est a pgina, clique com o boto direito em cima do cone da pgina selecione a opo abrir com - Bloco de Notas. Veja na figura Abaixo.

Vamos alterar o alinhamento do texto e deix-lo centralizado


Deixa o texto que estiver entre <center> e </center> alinhado ao centro

- Salve o arquivo. Como ele j foi salvo e j tem um nome, desta vez s clicar no menu Arquivo - Salvar. - Abra o navegador. Se no apareceu a modificao, clique no boto de atualizar a pgina ou pressione a tecla F5. Veja a figura abaixo que mostra a pgina com o texto centralizado.

Veja a seguir mais comandos de formatao de texto Comandos gerais :


quebra de linha<br> cor de fundo<body bgcolor="red"> imagem de fundo<body background="nome da figura">

Formatao de textos :
pargrafo<p> </p> alinhamento a esquerda <left> </left> alinhamento centralizado<center> </center> negritar<b> </b> <h1></h1> ... <h4> </h4> sublinhar<u></u> itlico<i> </i> cor de texto<font color="red"> </font> tamanho da fonte< font size = "+2"> </font> tipo da fonte< font face="arial"> </font> Juntando tudo em uma linha : < font face ="arial" color="red" size= "1"> </font>

Exemplo de formatao de texto:

Salve o arquivo e atualize/abra a pagina incio

OBS: as cores devem ser escritas com o seu nome em ingls ou ento se pode colocar o seu cdigo. Para saber o cdigo das cores, digite o texto tabela de cores em um site de busca. Vejamos um exemplo: a cor red (vermelho) tem o cdigo #FF0000. Veja na figura abaixo como ficaria colocando o cdigo da cor e no o seu nome.

Inserindo uma Imagem Veja o exemplo a seguir: Vamos colocar a imagem bicicletaMotorizada.jpg em nossa pgina. 1 - coloque a imagem (figura) na mesma pasta que esta localizada a sua pgina html.

2 - descubra o nome da imagem. importante que no tenha espaos no nome da figura e caso tenha mude o seu nome para que no tenha espaos. O nome da imagem tem de ser completo com a sua extenso, no nosso caso o nome da figura completo : bicicletaMotorizada.jpg Caso no esteja aparecendo o nome completo da figura, clique com o boto direito e v a propriedades, verifique o Tipo de arquivo, no nosso caso um arquivo JPG, assim sua extenso .jpg. Outras extenses podem existir, como: GIF, BMP entre outras.

3 - coloque o comando no seu cdigo html para inserir uma imagem. Salve e abra a pgina no navegador.

Veja a figura abaixo que mostra como ficou a pgina. Se vc deseja poder colocar a imagem mais abaixo ou mais acima. Para pular de linhas vc tem de usar a tag <BR> para cada linha que desejar pular.

Os tag para a insero de imagens so : inserindo a imagem<img src="nome da img"> colocando um rtulo (alt)<img src="nome da imagem" alt="seu texto aqui"> alinhamento do texto em relao a imagem: <img src="nome da img" align= "top"> <img src="nome da img" align= "middle"> <img src="nome da img" align= "bottom"> Uma pgina feita de vrias outras pginas, assim podemos dizer que uma home Page contm vrios arquivos HTML e que podem ser navegados atravs dos links. Para criar um simples link de uma pgina para outra vamos ter de criar mais uma pgina html. Vamos cham-la de pagina2.html. Lembre-se de salv-la como a primeira pgina, com extenso html e como tipo todos os arquivos. Veja a figura e faa igual ao cdigo mostrado.

Na pasta, agora vo ficar dois arquivos HTML, alm do arquivo da figura.

Vamos criar um link de um arquivo para o outro, vamos comear pelo arquivo inicio.html e colocar neste um link para o arquivo pagina2.html. Coloque o seguinte cdigo html no arquivo inicio.html: <a href="pagina2.html" target= "_blank"> veja a figura.
Cdigo indicando qual pgina html dever ser aberta, quando o texto link for clicado.

pgina 2

</a>

Indica o fim do link Cdigo indicando que a pgina html dever ser aberta em nova janela. Troque por _top para abrir na mesma janela Texto que aparecer para o internauta clicar.

Agora quando voc clicar no texto pgina 2 a pgina 2 ser aberta em uma nova janela, caso queira que esta pgina seja aberta na mesma janela troque o comando _blank por _top. Voc pode tambm criar um link na pgina 2 para a pgina inicio.html.

Criando Frames Quando for colocar uma pgina no ar, ou seja, deix-la on-line hospedada em algum servidor, preciso que sua pgina inicial seja chama de ndex.html. Esta pgina de ndex dever chamar as outras pginas que a compe. Vamos ver como fazer isso Vamos criar um terceiro arquivo html, dentro da mesma pasta que esto os outros arquivos que j usamos. Esse arquivo dever ser salvo com o nome ndex.html e dever ter o mesmo cdigo mostrado na figura abaixo:
Troque por rows, se desejar em linhas

Nome dado ao frame

Barra de rolagem desabilitada

Agora chame no navegador o arquivo que acabou de criar e salvar, index.html. Dever aparecer do lado esquerdo a pagina2.html e do lado direito a pagina incio. Assim voc criou dois frames com aas duas pginas e foi dado os nomes de menu e corpo, veja isso na figura que mostra o cdigo do index.html.

OBS: quando voc criar um link e deseja abrir uma pgina dentro de um frame s colocar o nome do frame no parmetro target. Ficaria assim: <a href="pagina2.html" target= "menu"> pgina 2 </a>