Passa a passo para construir uma página pessoal - Parte 1

Tamanho: px

Começar a partir da página:

Download "Passa a passo para construir uma página pessoal - Parte 1"

Lucca Pacheco Capistrano
8 Há anos
Visualizações:

1 Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não 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) Faça passo a passo o exemplo a seguir e depois repita os procedimentos para cria a sua página pessoal. Passo 1. Crie uma pasta que irá armazenar a página. 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 botão direito do mouse na parte sem ícones (na parte branca). Deverá aparecer um menu semelhante a figura abaixo: 1.4. Selecione a opção: Novo - Pasta. Assim você deverá criar uma nova pasta Dê o nome que desejar a pasta. Não use espaços nem acentuação. Passo 2. Abra o Bloco de Notas.

Chrome, etc (neste passo a passo vamos utilizar o navegador Mozilla Firefox) Faça passo a passo o exemplo a seguir e depois repita os procedimentos para cria a sua página pessoal. Passo 1.

2 Passo 3. Coloque o seguinte texto. Isso já é um código HTML. Indica o início do código HTML Início e fim do corpo da página. Tudo o que colocar aqui neste espaço deverá aparecer no navegador Indica o fim do código HTML Insere um texto na barra da janela do navegador Indica o início e fim do local reservado para escrever o cabeçalho Texto que aparecera no navegador Deixa o texto que estiver entre e em negrito - O texto pode ser em letras maiúsculas ou minúsculas. Passo 4. Salvar a página HTML Vá até o menu Arquivo e selecione a opção Salvar 4.2. Localize a pasta que você criou no passo Altere a opção Salvar como tipo: coloque Todos os arquivos, veja na figura abaixo:

reservado para escrever o cabeçalho Texto que aparecera no navegador Deixa o texto que estiver entre <b> e </b> em negrito - O texto pode ser em letras maiúsculas ou

3 4.4. Dê um nome para a página. No exemplo estamos chamando de inicio.html OBS: nomes de páginas NÃO podem ter espaços e NÃO podem ter acentuação. Pela padronização da Internet os nomes devem ser em letras minúsculas. OBS2: Para ser uma página da Internet deverá ter a extensão.html. Assim coloque o nome da página e.html. Veja a figura abaixo: 5. Vamos abrir a página para verificar o que foi feito até agora Vá até a pasta que foi criada no passo 1 a qual nós salvamos a página. Dê dois cliques no ícone da página. Observe que dependendo no navegador instalado em seu computador o ícone da página pode se diferenciar. Neste do nosso exemplo estamos usando o Mozilla Firefox O navegador padrão do seu computador deverá abri-la. Neste caso abriu como Mozilla FireFox Vamos ver como a gente conseguiu fazer a página com o HTML. Insere um texto na barra da janela do navegador Texto que aparecera no navegador

Vamos abrir a página para verificar o que foi feito até agora. 5.1. Vá até a pasta que foi criada no passo 1 a qual nós salvamos a página. Dê dois cliques no ícone da página.

4 A partir deste ponto, podemos alterar a página e colocar a configuração que desejarmos. Como alterar o código HTML da nossa primeira página? Vá até a pasta que está a página, clique com o botão direito em cima do ícone da página selecione a opção 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 não apareceu a modificação, clique no botão de atualizar a página ou pressione a tecla F5. Veja a figura abaixo que mostra a página com o texto centralizado. Veja a seguir mais comandos de formatação de texto Comandos gerais : quebra de linha cor de fundo<body bgcolor="red"> imagem de fundo<body background="nome da figura">

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.

5 Formatação de textos : parágrafo alinhamento a esquerda <left> </left> alinhamento centralizado<center> </center> negritar <h1></h1>... <h4> </h4> sublinhar itálico cor de texto tamanho da fonte tipo da fonte Juntando tudo em uma linha : Exemplo de formatação de texto: Salve o arquivo e atualize/abra a pagina início OBS: as cores devem ser escritas com o seu nome em inglês ou então se pode colocar o seu código. Para saber o código das cores, digite o texto tabela de cores em um site de busca. Vejamos um exemplo: a cor red (vermelho) tem o código #FF0000. Veja na figura abaixo como ficaria colocando o código da cor e não o seu nome.

: < font face ="arial" color="red" size= "1"> </font> Exemplo de formatação de texto: Salve o arquivo e atualize/abra a pagina início OBS: as cores devem ser escritas com o seu nome em inglês ou

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

O nome da imagem tem de ser completo com a sua extensão, no nosso caso o nome da figura completo é: bicicletamotorizada.

6 Inserindo uma Imagem Veja o exemplo a seguir: Vamos colocar a imagem bicicletamotorizada.jpg em nossa página. 1º - coloque a imagem (figura) na mesma pasta que esta localizada a sua página html. 2º - descubra o nome da imagem. É importante que não tenha espaços no nome da figura e caso tenha mude o seu nome para que não tenha espaços. O nome da imagem tem de ser completo com a sua extensão, no nosso caso o nome da figura completo é: bicicletamotorizada.jpg Caso não esteja aparecendo o nome completo da figura, clique com o botão direito e vá a propriedades, verifique o Tipo de arquivo, no nosso caso é um arquivo JPG, assim sua extensão é.jpg. Outras extensões podem existir, como: GIF, BMP entre outras. 3º - coloque o comando no seu código html para inserir uma imagem. Salve e abra a página no navegador.

Veja a figura abaixo que mostra como ficou a página. 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.

<img src="nome da img" align= "top"> <img src="nome da img" align= "middle"> <img src="nome da img" align= "bottom"> Uma página é feita de várias outras páginas, assim podemos dizer que uma home Page

7 Veja a figura abaixo que mostra como ficou a página. 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 inserção de imagens são : inserindo a imagem<img src="nome da img"> colocando um rótulo (alt)<img src="nome da imagem" alt="seu texto aqui"> alinhamento do texto em relação a imagem: <img src="nome da img" align= "top"> <img src="nome da img" align= "middle"> <img src="nome da img" align= "bottom"> Uma página é feita de várias outras páginas, assim podemos dizer que uma home Page contém vários arquivos HTML e que podem ser navegados através dos links. Para criar um simples link de uma página para outra vamos ter de criar mais uma página html. Vamos chamá-la de pagina2.html. Lembre-se de salvá-la como a primeira página, com extensão html e como tipo todos os arquivos. Veja a figura e faça igual ao código mostrado. Na pasta, agora vão ficar dois arquivos HTML, além do arquivo da figura.

Vamos criar um link de um arquivo para o outro, vamos começar pelo arquivo inicio.html e colocar neste um link para o arquivo pagina2.html. Coloque o seguinte código html no arquivo inicio.

Indica o fim do link Código indicando que a página html deverá ser aberta em nova janela. Troque por _top para abrir na mesma janela Texto que aparecerá para o internauta clicar.

8 Vamos criar um link de um arquivo para o outro, vamos começar pelo arquivo inicio.html e colocar neste um link para o arquivo pagina2.html. Coloque o seguinte código html no arquivo inicio.html: <a href="pagina2.html" target= "_blank"> página 2 </a> veja a figura. Código indicando qual página html deverá ser aberta, quando o texto link for clicado. Indica o fim do link Código indicando que a página 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 página 2 a página 2 será aberta em uma nova janela, caso queira que esta página seja aberta na mesma janela troque o comando _blank por _top. Você pode também criar um link na página 2 para a página inicio.html.

Criando Frames Quando for colocar uma página no ar, ou seja, deixá-la on-line hospedada em algum servidor, é preciso que sua página inicial seja chama de índex.html.

Esse arquivo deverá ser salvo com o nome índex.

9 Criando Frames Quando for colocar uma página no ar, ou seja, deixá-la on-line hospedada em algum servidor, é preciso que sua página inicial seja chama de índex.html. Esta página de índex deverá chamar as outras páginas que a compõe. Vamos ver como fazer isso Vamos criar um terceiro arquivo html, dentro da mesma pasta que estão os outros arquivos que já usamos. Esse arquivo deverá ser salvo com o nome índex.html e deverá ter o mesmo código 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 início. Assim você criou dois frames com aas duas páginas e foi dado os nomes de menu e corpo, veja isso na figura que mostra o código do index.html. OBS: quando você criar um link e deseja abrir uma página dentro de um frame é só colocar o nome do frame no parâmetro target. Ficaria assim: <a href="pagina2.html" target= "menu"> página 2 </a>

Documentos relacionados

Passa a passo para construir uma página pessoal - Parte 1

Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):