Como criar uma página da Web simples com HTML: 9 etapas (com fotos)

ThiTeaches você como escrever uma página web simples com HTML (linguagem de marcação de hypertext). HTML é um dos principais componentes da World Wide Web, compõe a estrutura das páginas da Web. Depois de criar sua página da Web, você pode salvá-lo como um documento HTML e visualizá-lo no seu navegador da Web. Criar uma página HTML é possível usando editores básicos de texto encontrados em computadores Windows e Mac.

Passos

Parte 1 de 6:

Adicionando uma cabeça ao seu HTML

1. Abra um editor de texto. Em um computador executando o sistema operacional Windows, você geralmente usa o bloco de notas ou notepad ++, enquanto os usuários de MacOS usarão usuários Textedit e Chromeos usarão texto:

janelas - Abrir Começar

, digitar bloco de anotações, ou bloco de anotações++ e clique Bloco de anotações ou "Notepad ++ ou sublime" No topo da janela.

Mac OS - Clique Holofote

, digitar Textedit, e clique duas vezes Textedit No topo dos resultados.

Chromeos - Abrir lançador e clique em texto. (O ícone diz código de código).

2. Digitar e pressione ↵ Enter. Isso informa ao navegador da Web que este é um documento HTML.

3. Digite e pressione ↵ Enter. Esta tag de abertura para o seu código HTML.

4. Digite e pressione ↵ Enter. Esta é a tag que abre sua cabeça HTML. As informações da cabeça HTML que geralmente não são exibidas na sua página da web. Esta informação pode incluir, o título, meta de dados, folhas de estilo CSS e outros idiomas de script.

5. Digitar . Esta é a tag para adicionar um título à sua página.

6. Digite um título para sua página da web. Este pode ser qualquer título que você deseja nomear sua página da Web.

7. Digite e pressione ↵ Enter. Esta é a tag para fechar sua tag de título.

8. Digite e pressione ↵ Enter. Esta é a etiqueta para fechar sua cabeça. Seu código HTML deve procurar algo assim.

Parte 2 de 6:

Adicionando um corpo e um texto ao seu HTML

1. Digite abaixo os fechados "Cabeça" marcação. Esta tag abre o corpo do seu documento HTML. Tudo o que vai nas exibições do corpo HTML na página da Web.

2. Digitar . Esta é a tag para adicionar uma posição ao seu documento HTML. Um título é um texto negrito grande que normalmente entra no topo do seu documento HTML.

3. Digite um cabeçalho para sua página. Este pode ser o título da sua página ou uma saudação.

4. Digite após o texto de cabeçalho e pressione ↵ Enter. Esta tag fecha seu cabeçalho.

Adicione cabeçalhos adicionais como você vai. Existem seis títulos diferentes que você pode criar usando as tags através de. Estes criam cabeçalhos de tamanhos diferentes. Por exemplo, para criar três cabeçalhos diferentes em sucessão, você pode escrever o seguinte:

As rubricas mostra a prioridade ou importância do texto. Mas não é necessário usar um cabeçalho mais alto se você quiser usar qualquer título inferior. Pode-se usar diretamente H3, mesmo que não haja H1 em seu post.

5. Modelo . Esta é a tag para abrir um parágrafo. O texto do parágrafo é usado para exibir o texto normal de tamanho.

6. Digite algum texto. Esta pode ser uma descrição para sua página da Web ou qualquer outra informação que você deseja compartilhar.

7. Digite após o seu texto e pressione ↵ Enter. Esta é a tag para fechar o texto do parágrafo. O seguinte é um exemplo de texto do parágrafo em HTML:

Você pode adicionar várias linhas de parágrafo seguidas para criar uma série de parágrafos sob uma posição.

Você pode alterar a cor de qualquer texto, enquadrando o texto com as tags e. Certifique-se de digitar sua cor preferida no "cor" seção (você vai manter as citações). Você pode transformar qualquer texto (e.G., cabeçalhos) em uma cor diferente com este conjunto de tags. Por exemplo, para transformar o texto de um parágrafo azul, você escreveria o seguinte código: Baleias são criaturas majestosas.

Você pode adicionar negrito, itálico e outros formatos de texto usando HTML.A seguir, exemplos de como você pode formatar texto usando tags HTML:

Se você usar texto em negrito e itálico para ênfase, não apenas para o estilo, use os elementos e em vez de . Isso facilita a sua página da Web quando usar tecnologias como um leitor de tela ou o modo leitor fornecido em alguns navegadores.

Parte 3 de 6:

Adicionando elementos adicionais ao seu HTML

1. Adicione uma foto à sua página. Você pode adicionar uma imagem ao seu HTML usando as seguintes etapas:

Modelo Para abrir sua tag de imagem.
Copie e cole a URL da imagem após o "=" assinar aspas.
Modelo > Após a URL da imagem para fechar sua tag de imagem. Por exemplo, se a URL da imagem for "http: // minha foto.com / lago", Você escreveria o seguinte:

2. Link para outra página. Você pode adicionar um link ao seu HTML usando as seguintes etapas:

Modelo Para abrir sua tag de link.

Copie e cole URL após o "=" assinar aspas.

Modelo > Após o URL para fechar a parte do link do HTML.

Digite um nome para o link após o suporte de fechamento.

Digite após o nome do link para fechar o link HTML. O seguinte é um exemplo de um link para o Facebook.

3. Adicione uma ruptura de linha para o seu HTML. Você pode adicionar uma ruptura de linha digitando para o seu html. Isso cria uma linha horizontal que pode ser usada para dividir seções diferentes da sua página.

Parte 4 de 6:

Personalizando cores

1. Confira a lista de nomes e códigos oficiais de cores HTML. O Consórcio World Wide Web (W3C) gerencia uma lista oficial de cores que você encontrará em https: // W3.Org / Wiki / CSS / Propriedades / Cor / Palavras-chave. Cada cor tem um nome oficial, código hexadecimal de 6 dígitos e um valor decimal. Você pode usar qualquer um desses valores para adicionar cores a elementos da sua página da Web. Para este exemplo, usaremos os nomes oficiais de cores.

2. Definir a cor de fundo na tag. Você estará fazendo isso adicionando o estilo Atributo à tag. Vamos dizer que você queria fazer a cor de fundo da página inteira lavanda:

3. Definir a cor do texto para qualquer tag. Você também pode usar o estilo atributo para especificar qual cor você gostaria que todo o texto dentro de uma tag específica seja. Por exemplo, digamos que você queria fazer o texto em uma das suas tags azul da meia noite:

A mudança de cor afetará apenas o texto dentro dessa tag. Se você começar outra tag depois que também deve ser azul da meia noite, Você precisará definir o atributo estilo lá também.

4. Definir a cor de fundo para um cabeçalho ou parágrafo. Semelhante a como você define a cor de fundo para a tag do corpo, você também pode definir cores de fundo para outras tags. Digamos que você queria fazer a cor de fundo de um cinza claro, e a cor de fundo de um cabeçalho de estilo H1 lightskeblue, você usaria:

Parte 5 de 6:

Fechando seu documento HTML

1. Digite para fechar o seu corpo. Depois de terminar de adicionar todo o seu texto, imagens e outros elementos ao corpo do seu documento HTML, adicione esta tag na parte inferior do documento HTML para fechar o corpo do documento HTML.

2. Digite para fechar seu documento HTML. Esta tag fica abaixo da tag para fechar seu corpo HTML no final do seu documento HTML. Isso informa ao navegador da Web, não há mais código HTML após essa tag. Seu documento HTML inteiro deve ser algo assim:

Parte 6 de 6:

Salvando e abrindo sua página da web

1. Converta seu documento para texto simples (somente usuários de Mac). Clique no Formato item de menu na parte superior da tela e clique em Fazer texto simples No menu suspenso resultante.

Este passo não é necessário nem possível no Windows.

2. Clique Arquivo. Está na barra de menus no topo da tela.

3. Clique Salvar como. Está no menu suspenso abaixo "Arquivo".

Como alternativa, você pode pressionar Ctrl+S (Windows) ou ⌘ comando+S (Mac) para fazê-lo.

4. Digite um nome para o seu documento HTML. Digite tudo o que você deseja nomear seu documento no "Nome do arquivo" (Windows) ou "Nome" Caixa de texto (Mac).

5. Alterar o tipo de arquivo do documento. Você precisará alterar o documento de um arquivo de texto para um arquivo HTML. Use as etapas a seguir para alterar o tipo de arquivo:

janelas - Clique no "Salvar como tipo" Caixa suspensa, clique em Todos os arquivos, e então digite .html No final do nome do arquivo.

Mac OS - Substitua o .TXT No final do nome do arquivo com .html em vez de.

Chromeos - Clique no "Salvar como" botão. Nomeie o arquivo com .html no fim. O começo é com você.

6. Clique Salve . Está no fundo da janela. Fazer isso criará um arquivo HTML.

Arquivos HTML normalmente abrem com o seu navegador da Web padrão.

7. Feche seu editor de texto. Neste ponto, você está pronto para abrir seu arquivo HTML no seu navegador para que você possa visualizar sua página da Web.

8. Abra o documento HTML com o seu navegador. Na maioria dos casos, você poderá clicar duas vezes no documento HTML para fazer isso. Se clicar duas vezes no documento resultar em um erro, faça o seguinte:

janelas - Clique com o botão direito do mouse no documento, selecione Abrir com, e clique no seu navegador preferido.

Mac - Clique no documento uma vez, clique em Arquivo, selecione Abrir com, e clique no seu navegador preferido.

9. Edite o documento HTML, se necessário. Você pode notar um erro na sua página HTML. Para alterá-lo, você pode editar o texto do documento HTML:

No Windows, você pode clicar com o botão direito do mouse no documento e clicar Editar No menu suspenso resultante (se você tiver o Notepad ++ instalado, isso dirá Edite com o bloco de notas++ em vez de).

No Mac, você vai querer clicar no documento para selecioná-lo, clique em Arquivo, selecione Abrir com, e clique Textedit. Você também pode arrastar o documento para o Textedit.

No Chrombook, feche o aplicativo de texto, abra arquivos, encontre seu arquivo e clique nele.

Amostra HTML

Folha de fraude HTML

Página de exemplo com html

Vídeo.

Ao usar este serviço, algumas informações podem ser compartilhadas com o YouTube.

Pontas

As tags devem sempre ser fechadas em uma imagem espelhada de suas contrapartes abertas. Por exemplo, deve ser fechado como .

Você pode adicionar texto de rolagem lateral ao seu site usando a tag, mas tenha em mente que esta tag pode não ser reconhecida por alguns navegadores.

Muitas pessoas Use o bloco de notas++ escrever e compilar seu código.

Se você quiser centrar uma imagem em sua página, você pode digitar após o nome da imagem no img tag (por exemplo).

Avisos

É melhor hospedar suas próprias imagens em Imgur ou semelhante se você planeja fazer upload de imagens para sua página da web. Postar fotos de outras pessoas pode resultar em violação de direitos autorais.

Compartilhe na rede social:

Como criar uma página da web simples com html

Passos

Amostra HTML

Vídeo.

Pontas

Avisos