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 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. 1.5. Dê o nome que desejar a pasta. Não use espaços nem acentuação. Passo 2. Abra o Bloco de Notas.
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 Indica o fim do código HTML Insere um texto na barra da janela do Indica o início e fim do local reservado para escrever o cabeçalho Texto que aparecera no Deixa o texto que estiver entre <b> e </b> em negrito - O texto pode ser em letras maiúsculas ou minúsculas. Passo 4. Salvar a página HTML. 4.1. Vá até o menu Arquivo e selecione a opção Salvar 4.2. Localize a pasta que você criou no passo1 4.3. Altere a opção Salvar como tipo: coloque Todos os arquivos, veja na figura abaixo:
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. 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. Observe que dependendo no instalado em seu computador o ícone da página pode se diferenciar. Neste do nosso exemplo estamos usando o Mozilla Firefox. 5.2. O 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 Texto que aparecera no
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. 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<br> cor de fundo<body bgcolor="red"> imagem de fundo<body background="nome da figura">
Formatação de textos : parágrafo<p> </p> alinhamento a esquerda <left> </left> alinhamento centralizado<center> </center> negritar<b> </b> <h1></h1>... <h4> </h4> sublinhar<u></u> itálico<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 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. Inserção de imagens : 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">