Autor:
Laura McKinney
Data De Criação:
3 Abril 2021
Data De Atualização:
1 Julho 2024
Contente
HTML (HyperText Markup Language) é uma linguagem básica para a construção de páginas da web. Foi criado como uma linguagem de codificação fácil e flexível. Quase todas as páginas da web na Internet são desenvolvidas com alguma forma desse código (ColdFusion, XML, XSLT). HTML é fácil de entender, mas você pode continuar aprendendo sobre ele por muito tempo se estiver interessado em sua funcionalidade abrangente. Para adicionar cor e diversão ao seu site, você pode aprender CSS básico assim que se acostumar com uma página HTML básica.
Passos
Parte 1 de 4: Construindo um Documento
Abra um editor de texto simples. O bloco de notas é uma boa opção e pode ser baixado gratuitamente. Você pode escrever HTML com a maioria dos editores de texto, mas softwares mais complexos com recursos de formatação automática podem dificultar a organização de sua página HTML.
- Não use o TextEdit, pois ele geralmente salva o arquivo em um formato que seu navegador pode não reconhecer como HTML.
- Você também pode usar um editor de HTML online. Programas dedicados de edição de HTML não são recomendados para iniciantes.
Salve um arquivo como uma página da web. Escolha Arquivo → Salvar como no menu na parte superior. Altere o formato do arquivo para "Página da Web", ".html" ou ".htm". Salve o arquivo onde possa encontrá-lo facilmente.- Não há diferença entre essas três opções.
Abra o arquivo em um navegador. Clique duas vezes no arquivo e ele será aberto automaticamente como uma página da web em branco no seu navegador. Como alternativa, você pode abrir um navegador, como o Firefox ou Internet Explorer, e usar Arquivo → Abrir arquivo para selecionar o documento.
- Este site não está online. Ele pode ser visto apenas no seu computador.
Atualize a página da web e veja as alterações feitas. Digite o seguinte em seu documento em branco: Olá. Salve o documento. Atualize a página da web em branco em seu navegador e você deverá ver a palavra "Hello" em negrito no topo da página. Sempre que quiser testar seu novo HTML durante este tutorial, salve o documento .htm e atualize a janela do navegador para ver como o HTML é compilado.- Se você vir as palavras ""e"'' Aparece no seu navegador, o arquivo não foi compilado corretamente em HTML. Tente um editor de texto diferente ou um navegador diferente.
Aprenda as tags. Os comandos HTML são escritos em "tags" que dizem ao navegador como compilar e exibir sua página da web. Eles são sempre escritos entre aspas simples, e não são exibidos na página da web como você os usou no exemplo acima: - é uma "carta inicial" ou "carta inicial". Qualquer coisa escrita após esta tag será definida como "negrito" (negrito em uma página da web).
- é uma "marca de fim" ou "marca de fechamento", que você pode distinguir pelo símbolo / sinal. Isso denota o fim do texto em negrito. A maioria das tags (não todas) precisa de uma tag final para funcionar, portanto, certifique-se de incluí-la.
Construa seu documento. Exclua tudo em seu documento HTML. Recomece com o seguinte texto, exatamente como foi escrito (sem os pontos de bala). Este código HTML informa ao navegador que tipo de HTML você está usando e que todo o seu HTML será colocado dentro das tags. e .
Adicione as tags head (head) e body. Os documentos HTML são divididos em duas partes. A seção "superior" é para informações especiais, como o título da página. A seção "corpo" contém o conteúdo principal da página. Adicione ambas as seções ao seu documento e lembre-se de incluir as tags finais. O texto recém-adicionado está em negrito:
Dê um título à sua página. A maioria das cartas na seção principal não é importante para aprender com um iniciante. A tag de título é fácil de usar, entretanto, e determinará o que aparecerá como o nome da janela do navegador ou na guia do navegador. Coloque as tags de início e fim do título dentro das tags head e escreva os cabeçalhos que desejar entre essas tags:
Minha primeira página HTML.
Parte 2 de 4: formatação de texto
Adicione texto ao seu corpo. Para esta seção, trabalharemos apenas com tags de corpo. O outro texto ainda estará em seu documento, mas economizaremos espaço ao não repeti-lo neste tutorial. Escreva o que quiser entre os cartões e , e aparecerá como o primeiro conteúdo da sua página. Por exemplo:
- Segui as instruções do wikiHow para escrever uma página HTML.
Adicione títulos para o texto. Organize sua página com tags de título, que instruem o navegador a exibir o texto entre eles em um tamanho de fonte maior. Essas tags também são usadas por mecanismos de pesquisa e outras ferramentas para determinar do que trata seu site e como ele está organizado.
é o maior título, e você pode criar títulos menores até
. Experimente-os em sua página:Bem vindo a minha pagina.
- Segui as instruções do wikiHow para escrever uma página HTML.
Meu objetivo hoje:
Metas concluídas:
- Aprenda a usar títulos.
Metas não cumpridas:
- Saiba mais tags de formatação de texto.
Saiba mais tags de formatação de texto. Você já viu a tag "forte", mas existem muitas outras maneiras de formatar seu texto. Experimente essas marcas ou com várias marcas de uma vez para a mesma sequência de texto. Lembre-se de adicionar tags finais nas costas!
- Texto importante, exibido em negrito no navegador.
- Texto enfatizado, exibido em itálico no navegador.
- Texto um pouco menor que o normal. Este texto será redimensionado automaticamente se usado em um título.
O texto não é mais relevante, exibido com um traço no corpo.- O texto é inserido depois de outros documentos, exibido com sublinhados.
Organize o texto em sua página. Você deve ter notado que pressionar a tecla "enter" não é suficiente para que o texto apareça em outra linha. Essas tags podem ajudá-lo a criar parágrafos e quebras de linha ou organizar seu texto de outras maneiras:
Abreviação de "parágrafo", a tag (parágrafo) manterá todo o texto entre essas tags em um parágrafo e o separará do texto acima e abaixo dele.
Esta tag irá gerar quebras de linha. Não adicione uma tag final a ele, pois não interfere com nenhum outro conteúdo. Use esta tag em poemas ou linhas de endereço, não em parágrafos.Se você precisa exibir o texto com muita precisão, esta tag define o texto dentro dele como uma fonte de largura fixa (cada letra tem a mesma largura) e permite que você crie intervalos Espaços em branco e quebras de linha conforme desejar para a edição regular, em vez de tags.
Esta tag define o tipo de texto citado em uma fonte.
Você pode descrever a fonte mais tarde com citar cartão.
Adicione texto de legenda invisível. As tags de comentário não são exibidas na página da web. Eles permitem que você faça anotações no documento HTML sem afetar o conteúdo. Não adicione uma tag final.
- Os cartões que vão sozinhos sem tags finais são chamados de "tags vazias".
Combine-os. A melhor maneira de lembrar essas tags é usá-las em seu site. Aqui está um exemplo usando os cartões nas etapas que você aprendeu até agora. Tente prever como eles aparecerão no navegador, copie-os para o seu documento e descubra. propaganda
Parte 3 de 4: Adicionando links e imagens
Aprenda sobre atributos. As tags podem conter informações adicionais escritas dentro delas, chamadas de atributos. Esses atributos são representados por palavras adicionais dentro das próprias tags, na forma nome da propriedade = "valor específico". Por exemplo, qualquer tag HTML pode ter o atributo title:
O parágrafo de introdução está aqui.
Dê um título ao parágrafo "Introdução", que aparecerá quando você passar o mouse sobre o parágrafo na página da web.
Links para outros sites. Uso de cartões para criar um hiperlink para qualquer outra página da web. Insira o URL da página da web para vincular usando o atributo href. Aqui está um exemplo com links para a página da web que você está lendo:
Adicione o atributo id à tag. Outro atributo que qualquer tag HTML pode usar é o elemento "id". Em qualquer cartão, escreva id = "vidu" ou use qualquer nome que não contenha espaços. Ele não produz nenhum efeito visível, mas o usaremos na próxima etapa.
- Por exemplo, adicione o seguinte ao seu documento:
Este parágrafo é usado como exemplo para descrever como funciona o atributo id.
- Por exemplo, adicione o seguinte ao seu documento:
Link para um elemento com um certo id. Agora podemos usar a tag de hiperlink, , para vincular a outro local na mesma página. Em vez de um URL, usaremos o símbolo #, seguido pelo valor de id ao qual queremos nos vincular. Por exemplo, Este texto será vinculado ao texto com o id "vidu".
- Todos os valores HTML diferenciam maiúsculas de minúsculas. "#VIDU" e "#vidu" serão vinculados ao mesmo local.
- Se a sua página for curta o suficiente para exibir a página inteira de uma vez, você provavelmente não notará nada acontecendo ao clicar no link do navegador. Redimensione a janela até que a barra de rolagem apareça e tente novamente.
Adicionar fotos. Cartão
é uma tag vazia, o que significa que nenhuma tag final é necessária. Todas as informações de que o navegador precisa para exibir a imagem são adicionadas usando atributos. Aqui está um exemplo para exibir o logotipo do wikiHow, com uma descrição para cada atributo por trás:
- Propriedades src = "" informa ao navegador onde está a foto. (Observe que postar uma foto do site de outra pessoa é considerado impróprio - e a foto desaparecerá quando a página não estiver mais ativa.)
- Propriedades estilo = "" Ele pode fazer muitas coisas, mas o mais importante é usado para definir a largura e a altura de uma imagem em pixels. (Você também pode usar os atributos separados largura = "" e altura = "" em vez disso, mas isso pode levar a problemas estranhos de redimensionamento se você usar CSS.)
- Propriedades alt = "" é uma breve descrição da imagem que o usuário verá se houver falha no carregamento da imagem. Isso é considerado um requisito, pois é usado para leitores de tela para visitantes cegos do site.
Parte 4 de 4: Saiba mais como adicionar e colocar seu site online
Confirme seu HTML. A validação de HTML verifica se há erros em seu código. Se o seu site não estiver sendo exibido corretamente, a validação pode ajudá-lo a encontrar o erro que está causando o problema. Ele também pode lhe ensinar mais sobre HTML determinando que o código parece bom em exibição, mas não é mais recomendado devido a novas atualizações no padrão HTML. Usar HTML inválido não torna seu site inútil, mas pode causar problemas ou exibição instável em navegadores diferentes.
- Experimente um serviço de validação online gratuito do W3C ou pesquise outra ferramenta de validação de HTML 5 online.
Saiba mais tags e atributos. Existem muitas outras tags e atributos HTML e muitos lugares para aprendê-los:
- Experimente w3schools e HTML Dog para mais tutoriais e listas completas de tags.
- Encontre uma página da web que você goste da aparência e, em seguida, use a função "Exibir código-fonte da página" do seu navegador para obter o código HTML. Copie-o em seu documento e estude como funciona.
- Leia outros artigos e aprenda como criar tabelas em HTML, usar metatags para aumentar suas chances de encontrá-lo por meio de mecanismos de pesquisa ou usar uma divisão. definir uma área na página) e extensão (usado para especificar o estilo do elemento de texto) para ajudar no estilo por meio de CSS.
Coloque seu site online. Escolha um serviço para hospedar seu site e, em seguida, você pode carregar quantas páginas HTML desejar para seu domínio da web pessoal. Para fazer isso, você precisará usar um software de upload de FTP, mas muitos serviços de aluguel na web também oferecem esse serviço.
- Ao criar links para páginas ou imagens que estão diretamente no seu site, você precisará usar o endereço completo do site. Por exemplo, se o seu nome de domínio for www.chuyengiahtmlsieudang.com, então o texto está nessas tags terá um link para "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Adicione estilos com CSS. Se sua página HTML parece um pouco monótona, tente aprender o básico de CSS para adicionar cores, fontes diferentes e melhor controle sobre onde os elementos são colocados. Vincular uma "folha de estilo" CSS a uma página HTML permitirá que você faça mudanças drásticas na hora, ajustando automaticamente o estilo de todo o texto em uma determinada tag. Você pode brincar um pouco com a camada de formatação básica aqui ou mergulhar em tutoriais mais detalhados no Tutorial de CSS do HTML Dog.
Adicione JavaScript ao seu site. JavaScript é uma linguagem de programação usada para adicionar muitas funcionalidades às suas páginas HTML. Os comandos JavaScript são inseridos entre as tags de início e fim e pode ser usado para adicionar botões interativos, calcular problemas matemáticos e muito mais. Descubra mais nos exemplos w3c. propaganda
Adendo
- A declaração doctype (Declaração de Tipo de Documento usada) usada neste tutorial é "loose HTML 4.0.1 transitional" (HTML 4.0.1 não é uma transição tight), um formato fácil. para iniciantes usarem. Usar () uma alternativa para ter o navegador compilado em um formato HTML 5 estrito, que é o estilo padrão recomendado (embora menos comumente usado).
Atenção
- O objetivo do HTML é manter o conteúdo em um formato global. Não tem controle sobre a apresentação do seu site, como a cor de fundo e o posicionamento exato dos elementos. Embora ainda existam tags que permitem que você faça isso, é uma boa ideia usar CSS para criar um site mais controlável e consistente.
O que você precisa
- Um editor de texto simples, como NotePad ou TextEdit
- Um navegador da web, por exemplo, Internet Explorer ou Mozilla Firefox
- (Opcional) Um editor de HTML, como Adobe Dreamweaver, Aptana Studio ou Microsoft Expression Web
