HTML de Amanhã

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

HTML de Amanhã

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML de Amanhã

Caricato da

Copyright:

Formati disponibili

Passa a passo para construir uma pgina pessoal - Parte 1

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

4.2. Localize a pasta que voc criou no passo1

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

Vamos alterar o alinhamento do texto e deix-lo centralizado

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

Exemplo de formatao de texto:

Salve o arquivo e atualize/abra a pagina incio

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

Nome dado ao frame

Barra de rolagem desabilitada

Potrebbero piacerti anche