Passoapasso Parte1 v2

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.

- 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:

Indica o incio do
cdigo HTML
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
Incio e fim do
corpo da pgina.
Tudo o que colocar
aqui neste espao
dever aparecer no
navegador
Deixa o texto que estiver
entre e em
negrito
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

- 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 
cor de fundo<body bgcolor="red">
imagem de fundo<body background="nome da figura">

Deixa o texto que estiver
entre <center> e </center>
alinhado ao centro
Formatao de textos :
pargrafo 
alinhamento a esquerda <left> </left>
alinhamento centralizado<center> </center>
negritar <h1></h1> ... <h4> </h4>
sublinhar
itlico 
cor de texto 
tamanho da fonte 
tipo da fonte 
Juntando tudo em uma linha : 
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 
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"> pgina 2 </a>

veja a figura.

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.

Cdigo indicando qual
pgina html dever ser
aberta, quando o texto
link for clicado.
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.

Indica o fim do link

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:

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>

Nome dado ao frame

Troque por rows, se
desejar em linhas

Barra de rolagem
desabilitada

Passoapasso Parte1 v2

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Passoapasso Parte1 v2

Enviado por

Direitos autorais:

Formatos disponíveis

Passa a passo para construir uma pgina pessoal - Parte 1

Quais ferramentas so necessrias?

Você também pode gostar