Aprenda HTML - Criando seu primeiro website
Página 1 de 1
Aprenda HTML - Criando seu primeiro website
Lição 5: Criando seu primeiro website
Com o que você aprendeu nas lições anteriores está a alguns minutos de criar seu primeiro website.
Como?
Na lição 1 vimos o que é necessário para construir um website: um navegador e o Notepad (ou um editor de texto similar). Uma vez que você esta lendo esta página, provavelmente está com seu navegador aberto. Agora abra outra janela do seu navegador de modo que você tenha duas janelas na tela, uma para ler este tutorial e outra para visualizar o website que você vai construir.
Abra também o Notepad ( Iniciar » Programas » Acessórios):
Agora, estamos prontos para começar!
O que posso fazer?
Vamos começar com algo simples. Que tal uma página que diga: "Hurrah! Esta é a minha primeira página web." Continue e você verá como isto é simples de fazer.
HTML é simples e lógico. O navegador lê HTML de modo idêntico ao que você lê um texto qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a aparecer.
A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML. Isto é feito com a tag
Como sabemos das lições anteriores,
A próxima coisa que o documento precisa é um "head" (cabeça), que fornece informações sobre o documento e um "body" (corpo), que abriga o conteúdo do documento. Como HTML não seria nada se não fosse lógico, a "cabeça" (
Seu documento agora está como mostrado abaixo:
Notar como estruturamos o código em linhas diferentes (usar a tecla Enter para pular para próxima linha) e também a indentação (recuos) do código (usar a tecla Tab para indentar). A príncipio não faz qualquer diferença a maneira como você estrutura (linhas e recuos na digitação) seu documento HTML. Mas um código bem estruturado é mais fácil de ler e entender, é altamente recomendado que você adote uma estrutura clara e nítida para seu HTML, usando linhas e indentação (recuos), como mostrado no exemplo acima.
Se o seu documento está como o mostrado acima, você construiu sua primeira página web - uma página particularmente chata e provalvelmente nada parecido com o que você sonhou fazer quando começou a ler este tutorial, mas de qualquer forma um tipo de website. Isto que você fez será um template base para seus futuros documentos HTML.
Até aqui tudo bem, mas como colocar conteúdo no meu website?
Como você já aprendeu, seu documento HTML é composto de duas partes: um head e um body. Na seção head você escreve informações sobre a página e na seção body você coloca as informações que constituem a página.
Por exemplo, para dar um título ao documento, título este que apareça no topo da barra do navegador você deverá usar a seção"head". A tag para acresentar um título é
Notar que o título não aparece na página propriamente dita. Tudo que você quer que apareça na página é conteúdo e deverá ser colocado entre as tags "body".
Conforme combinamos, queremos uma página dizendo, "Hurrah! Esta é a minha primeira página web." Este é o texto que queremos comunicar e ele deverá ser colocado na seção body. Então digite na seção body o seguinte:
A letra p na tag
Seu documento HTML agora está como mostrado a seguir:
Pronto! Você acaba de construir seu primeiro website!
Agora basta que você salve seu trabalho no HD e depois visualize no navegador:
Agora vá ao seu navegador:
Você deverá ver no seu navegador: "Hurrah! Esta é a minha primeira página web." Parabéns!
Se você quer que o mundo todo veja sua página, vá direto para a Lição 14 e aprenda como fazer upload da sua página para a Internet. Se não, tenha paciência e continue lendo. A brincadeira apenas começou.
Com o que você aprendeu nas lições anteriores está a alguns minutos de criar seu primeiro website.
Como?
Na lição 1 vimos o que é necessário para construir um website: um navegador e o Notepad (ou um editor de texto similar). Uma vez que você esta lendo esta página, provavelmente está com seu navegador aberto. Agora abra outra janela do seu navegador de modo que você tenha duas janelas na tela, uma para ler este tutorial e outra para visualizar o website que você vai construir.
Abra também o Notepad ( Iniciar » Programas » Acessórios):
Agora, estamos prontos para começar!
O que posso fazer?
Vamos começar com algo simples. Que tal uma página que diga: "Hurrah! Esta é a minha primeira página web." Continue e você verá como isto é simples de fazer.
HTML é simples e lógico. O navegador lê HTML de modo idêntico ao que você lê um texto qualquer, de cima para baixo e da esquerda para a direita. Assim um documento HTML inicia com aquilo que deve ser a primeira coisa aparecer na página e termina com a última coisa a aparecer.
A primeira coisa a fazer é dizer ao navegador que você vai "falar" com ele na linguagem HTML. Isto é feito com a tag
- Código:
<html>
- Código:
<html>
Como sabemos das lições anteriores,
- Código:
<html>
- Código:
</html>
- Código:
<html>
- Código:
</html>
A próxima coisa que o documento precisa é um "head" (cabeça), que fornece informações sobre o documento e um "body" (corpo), que abriga o conteúdo do documento. Como HTML não seria nada se não fosse lógico, a "cabeça" (
- Código:
<head>
- Código:
</head>
- Código:
<body>
- Código:
</body>
Seu documento agora está como mostrado abaixo:
- Código:
<html>
<head>
</head>
<body>
</body>
</html>
Notar como estruturamos o código em linhas diferentes (usar a tecla Enter para pular para próxima linha) e também a indentação (recuos) do código (usar a tecla Tab para indentar). A príncipio não faz qualquer diferença a maneira como você estrutura (linhas e recuos na digitação) seu documento HTML. Mas um código bem estruturado é mais fácil de ler e entender, é altamente recomendado que você adote uma estrutura clara e nítida para seu HTML, usando linhas e indentação (recuos), como mostrado no exemplo acima.
Se o seu documento está como o mostrado acima, você construiu sua primeira página web - uma página particularmente chata e provalvelmente nada parecido com o que você sonhou fazer quando começou a ler este tutorial, mas de qualquer forma um tipo de website. Isto que você fez será um template base para seus futuros documentos HTML.
Até aqui tudo bem, mas como colocar conteúdo no meu website?
Como você já aprendeu, seu documento HTML é composto de duas partes: um head e um body. Na seção head você escreve informações sobre a página e na seção body você coloca as informações que constituem a página.
Por exemplo, para dar um título ao documento, título este que apareça no topo da barra do navegador você deverá usar a seção"head". A tag para acresentar um título é
- Código:
<title>
- Código:
<title>Minha primeira página web</title>
Notar que o título não aparece na página propriamente dita. Tudo que você quer que apareça na página é conteúdo e deverá ser colocado entre as tags "body".
Conforme combinamos, queremos uma página dizendo, "Hurrah! Esta é a minha primeira página web." Este é o texto que queremos comunicar e ele deverá ser colocado na seção body. Então digite na seção body o seguinte:
- Código:
<p>Hurrah! Esta é a minha primeira página web.</p>
A letra p na tag
- Código:
<p>
Seu documento HTML agora está como mostrado a seguir:
- Código:
<html>
<head>
<title>Minha primeira página web</title>
</head>
<body>
<p>Hurrah! Esta é a minha primeira página web.</p>
</body>
</html>
Pronto! Você acaba de construir seu primeiro website!
Agora basta que você salve seu trabalho no HD e depois visualize no navegador:
- No Notepad vá ao menu "Arquivo" no topo da janela e escolha a opção "Salvar como...".
- Escolha "Todos os arquivos" no box "Salvar como tipo". Isto é muito importante - caso você não faça isto, o arquivo será salvo como texto e não como documento HTML.
- Salve seu documento com o nome "page1.htm" (a extensão ".htm" indica que se trata de um documento HTML. A extensão ".html" dá o mesmo resultado. Eu sempre uso ".htm", mas você pode escolher a que você preferir .htm ou .html). Você pode salvar o documento onde você quiser no seu HD - esteja certo de salvar em um lugar que depois você possa achar com facilidade.
Agora vá ao seu navegador:
- No menu existente no topo do navegador vá em "Arquivo" e escolha a opção "Abrir" (CTRL+O).
- Clique em "Procurar" no box que aparece.
- Localize o seu documento HTML e clique em "Abrir".
Você deverá ver no seu navegador: "Hurrah! Esta é a minha primeira página web." Parabéns!
Se você quer que o mundo todo veja sua página, vá direto para a Lição 14 e aprenda como fazer upload da sua página para a Internet. Se não, tenha paciência e continue lendo. A brincadeira apenas começou.
Leonard- Membro
- Mensagens : 146
Tópicos semelhantes
» Criando um WebSite em HTML
» Aprenda HTML - Mais tags HTML
» Aprenda HTML - Oque é HTML ?
» Aprenda HTML - O Que são tags ?
» Aprenda HTML - Atributos
» Aprenda HTML - Mais tags HTML
» Aprenda HTML - Oque é HTML ?
» Aprenda HTML - O Que são tags ?
» Aprenda HTML - Atributos
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|
Dom 08 Abr 2018, 18:40 por JorgeZinhoo002
» Ojkjeeeee
Seg 10 Out 2016, 23:19 por Frozen
» Naruto Great Ninja Batle
Dom 09 Out 2016, 14:29 por GuiinhoLP
» Recrutamento de um Designer para jogo de CDZ.
Sex 23 Set 2016, 18:37 por newbie123
» Serviços de suporte maker( Programação , Design , PixelArt ) E Vendas de Jogos
Qui 22 Set 2016, 20:11 por Eduardo
» Serviços de suporte maker( Programação , Design , PixelArt ) E Vendas de Jogos
Qui 22 Set 2016, 20:11 por Eduardo
» Serviços de suporte maker( Programação , Design , PixelArt ) E Vendas de Jogos
Qui 22 Set 2016, 20:09 por Eduardo
» Projeto Dbz
Qua 31 Ago 2016, 23:46 por 157
» Avaliação - Sprites Naruto
Qua 31 Ago 2016, 17:09 por 157
» [Sprites] DBZ (Plix)
Qua 31 Ago 2016, 14:13 por 157
» Super Pack - Bleach V.2
Qua 31 Ago 2016, 13:02 por 157
» [PEDIDO][PROJETO][RECRUTAMENTO] DYNISTYGAMES
Ter 30 Ago 2016, 10:04 por 157
» [PEDIDO][PROJETO][RECRUTAMENTO] DYNISTYGAMES
Ter 30 Ago 2016, 10:03 por 157
» [PEDIDO][PROJETO][RECRUTAMENTO] DYNISTYGAMES
Ter 30 Ago 2016, 10:02 por 157
» [Pedido] Contador de resets na FrmMain
Sáb 13 Ago 2016, 17:45 por killers97
» [Recrutamento]
Qua 10 Ago 2016, 23:09 por Monsters
» Ajuda erro no Cliente e Servidor do EEB 2.6!
Qua 20 Jul 2016, 19:53 por Binholx
» Como criar tilesets para Eclipse Origins 3.0 (POKÉMON)
Qua 29 Jun 2016, 19:46 por Sir Aaron
» Recursos Pokemons
Qua 29 Jun 2016, 19:34 por Sir Aaron
» erro frm flash
Qua 25 maio 2016, 13:51 por vava123
» Pedido - Pack de star wars
Qui 19 maio 2016, 05:06 por edsonpet
» [Ajuda] Sobre como por o servidor on por ip fixo
Ter 17 maio 2016, 16:14 por vava123
» Illusion Dimension - O Misterio do ID: BETA TESTE ONLINE
Sex 06 maio 2016, 20:02 por LksFlorencio
» [NSME] Naruto Shinobi Maker Engine
Qua 23 Mar 2016, 15:11 por luana1457
» Script /base,/casa Igual DBZ Forces
Dom 21 Fev 2016, 07:34 por JorgeZinhoo002
» [Pedido]Colar Tsunade item sprite eclipse origin
Qui 21 Jan 2016, 07:38 por lawllietbr
» [Pedido] Elysium
Sáb 19 Dez 2015, 11:31 por luana1457
» Naruto - Recruta
Ter 15 Dez 2015, 18:40 por Uchiha ~
» [Avaliação] - Kirito from Sword Art Online; Red and Pikachu from Pokemon.
Qua 25 Nov 2015, 13:43 por Thanakii
» [Avaliação] - Kenpachi Zaraki from Bleach; Libra Shiryu From Saint Seiya.
Qua 25 Nov 2015, 12:55 por Thanakii
» Demonstração de Sprites (Á VENDA!)
Qua 25 Nov 2015, 12:40 por Thanakii
» [Sistema de Reset]Para Eclipse .
Ter 24 Nov 2015, 16:51 por VithorUchi
» Cada Guild Nascer em Certo Mapa
Qui 12 Nov 2015, 06:13 por fabiofeijó_HIT
» Dragon Ball z Fusion A Grande Volta
Qui 29 Out 2015, 15:17 por fabiofeijó_HIT
» Ajuda com Ip fixo
Seg 26 Out 2015, 16:07 por GalaxyHells15
» Como Fazer um GUI no Eclipse Origins
Dom 18 Out 2015, 22:10 por Jeanleee
» Shisui Susanoo
Dom 18 Out 2015, 20:23 por Jeanleee
» Fantasy Art Online
Dom 18 Out 2015, 16:41 por daviih123
» Ajuda !!
Seg 05 Out 2015, 12:13 por andersonzika
» como passar o usuário e senha para o MainMenu?
Seg 28 Set 2015, 22:03 por Bëzerk
» Ru time ero 13 Type mismatch
Seg 28 Set 2015, 09:08 por andredarle
» Jarvis 1.3 Download
Qua 23 Set 2015, 18:42 por soares125
» [Avaliação/Disponibilização]Árvore 64x64
Qua 23 Set 2015, 15:15 por Over~
» Mlk's Zikas Signatures
Ter 22 Set 2015, 21:15 por Aikawa Reborn'
» Pedido de Sistemas
Dom 20 Set 2015, 18:05 por cleyton_05
» [AjudaEEB]Gerador de EXP
Qua 16 Set 2015, 14:04 por Over~
» [Avaliar] Base, Humano e Goblin.
Seg 14 Set 2015, 22:51 por .iBlaz3.
» Fabrica do Tio Cronos!
Dom 13 Set 2015, 21:31 por [ADM]Cronos
» [PixelArt] Minion - Meu malvado favorito
Dom 13 Set 2015, 12:51 por [ADM]Cronos
» [Avaliar] Goku Dragon Ball Z
Qua 05 Ago 2015, 21:36 por Setrux