Como criar uma página HTML

Autor: Florence Bailey
Data De Criação: 20 Marchar 2021
Data De Atualização: 1 Julho 2024
Anonim
Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS
Vídeo: Build a Curvaceous Homepage // Wavy Background Tutorial with SVG & CSS

Contente

HTML (Hypertext Markup Language) é a principal linguagem de programação para o desenvolvimento de páginas da web. Criado como uma linguagem de programação simples e conveniente. A maioria das páginas da Internet foi desenvolvida usando uma das formas dessa linguagem (ColdFusion, XML, XSLT). Depois de ler este artigo, você pode continuar seu treinamento usando outros recursos na Internet. Tente pesquisar na internet por outros artigos relacionados a este tópico.

Passos

Método 1 de 1: escrever uma página HTML

  1. 1 Antes de começar a se familiarizar com uma das etapas apresentadas aqui, consulte a seção “O que você precisará”.
  2. 2 O que você deve saber antes de começar a entender este problema:
  3. 3 O básico. Você já ouviu falar da tag? A tag é cercada por colchetes angulares, com a palavra dentro. A tag final é escrita da mesma forma, mas com a adição de uma barra após o primeiro colchete angular. Um atributo é uma palavra opcional em uma tag que é usada para adicionar detalhes a uma tag.
  4. 4 O início do documento. Em qualquer editor de texto que você esteja usando, cole o seguinte:
    html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
    A tag deve ser fechada com a mesma tag, mas com uma barra após o primeiro colchete angular. Existem exceções, como tags META ou DOCTYPE.
  5. 5 DOCTYPE
    • Normalmente, a maioria das páginas da web são configuradas DOCTYPE ”. Isso ajuda a determinar a codificação e também como ela será percebida pelos navegadores da web. A maioria das páginas funcionará sem ele, “mas isso é necessário se você quiser fazer a correspondência (eles regulam os tipos de codificações na Internet e como são usados)... O DOCTYPE para HTML 4.01 é apresentado abaixo :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Este é um dos mais comuns DOCTYPE usado em páginas em toda a Internet.Primeiro, ele aponta para o tipo de página que descreve o ‘html’, em seguida, destaca o tipo de codificação e, por fim, a localização do DOCTYPE, que, como resultado, descreve a página para o navegador da web.
    • Existem diferentes tipos de HTML (diferentes versões desenvolvidas ao longo dos anos), por exemplo, usando novas tags ou tags específicas. Algumas tags estão obsoletas (outras tags mais úteis são usadas no lugar).
    • b> e eu> - é o que se impõe atualmente às tags, pois são utilizadas para transformar texto, mas não especificações, por isso outras tags passam a substituí-las. Marcação forte> é um substituto para b>, e em>, um substituto para eu>.
    • É importante que as tags anteriores sejam substituídas por tags que são mais do que formatação. Se o texto for traduzido, não apenas a formatação, mas também o significado permanecerá o mesmo. Isso é semanticamente correto.
    • No XHTML versão 2.0, o b> e eu> não usado, assim como no HTML versão 3+.
  6. 6 HTML "Regra de encapsulamento".
    • Vamos dar uma olhada nas tags mais importantes atualmente em uso. Durante a criação da página, uma estrutura simples é usada. Se uma tag foi aberta, como resultado, deveria ser fechado... Isso se aplica a toda a estrutura. Aqui está um exemplo válido da estrutura de layout XHTML:
    • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    • html xmlns = "http://www.w3.org/1999/xhtml">
    • cabeça>
    • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
    • título> Olá, mundo! / título>
    • / head>
    • corpo>
    • h1> Olá, mundo! / h1>
    • / body>
    • / html>
    • Código de amostra que emite uma mensagem Olá Mundo... Isso é chamado de teste Olá Mundo.
  7. 7 Cabeçalho
    • O título da página da web é o conteúdo entre a tag cabeça>... Este conteúdo não pode ser visualizado pelo usuário (apenas o título que é mostrado no título da página). Informação entre tags cabeça>, pode incluir outras tags, como:

      • A tag META é usada para informações úteis para mecanismos de pesquisa e outros utilitários.
      • Marca LINK que cria um link entre documentos, por exemplo, para Estilos (CSS).
      • Tag SCRIPT, que inclui quase qualquer codificação web, com a capacidade de acesso remoto (de outro documento).
      • A tag STYLE, que é essencialmente um estilo que pode ser aplicado a uma página.
      • A tag TITLE é o título que aparece como o título de uma página em seu navegador da web.
    • Vamos ver uma demonstração de alguns deles em um cabeçalho de exemplo retirado deste site (ele foi encurtado):
      • cabeça>
      • título> ... / título>
      • meta name = "descrição" content = "..." />
      • link rel = "folha de estilo" type = "text / css" href = "..." />
      • meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
      • style type = "text / css" media = "all"> ... / style>
      • script type = "text / javascript" src = "..."> / script>
      • / head>

        Caso você não tenha notado, as tags individuais foram destacadas, com as informações reais removidas. O exemplo é bastante curto, mostrando quase todas as tags que podem ser encontradas em cabeça>exceto para comentários em HTML (falaremos sobre isso em tags simples).
  8. 8 Tags simples em todos os lugares
    • Vamos seguir em frente e ver outras tags. Tenha cuidado com sua marcação e lembre-se da regra prática, "Encapsulamento".

      • forte> Enfatiza o texto importante.
      • pequeno> Torna o texto menor. O tamanho da fonte é medido em unidades padrão de 1 a 7, 3 é o tamanho do texto padrão. ...
      • pre> Define um bloco de rich text. Por estar correto, esse texto é digitado em fonte do mesmo tamanho e com todos os espaços entre as palavras.
      • em> Mostra o texto como uma frase.
      • del> Texto riscado.
      • ins> Define o texto que foi inserido no documento.
      • h1> Uma das muitas tags de título. As tags deste tipo começam com 'h', com uma diferença no número. Certifique-se de fechar a tag com o mesmo número.
      • p> Define um parágrafo.
      • ! --- ... ---> Ao contrário de outras tags, o comentário deve estar dentro da própria tag. Essas informações só ficam visíveis quando o código é visualizado.
      • blockquote> Mostra uma citação, pode ser usado com a tag cite>.
      • Os poucos exemplos acima não são uma lista completa de tags existentes. Para saber mais sobre outros, visite.
  9. 9 Criando uma estrutura clara
    • As páginas são projetadas para conter dados em conjuntos simples de tags para que possamos analisar as informações em parágrafos. O computador reconhece dados, ele não sabe sobre contexto ou conexão conceitual. Temos que criar páginas HTML amigáveis ​​para o computador. Isso é feito usando a tag div. Ajuda a criar um grande número de páginas. Ele pode ser estilizado com CSS e é mais fácil do que criar grandes tabelas de código para o layout.
      • div> Esta tag é especial porque pode ser estilizada e usar blocos separados de informações que o usuário e o computador podem entender.
    • Vamos dar uma olhada em um layout HTML simples que usa uma tag div.
      • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • html xmlns = "http://www.w3.org/1999/xhtml">
      • cabeça>
      • meta http-equiv = "Content-Type" content = "text / html; charset = utf-8" />
      • título> Olá, mundo! / título>
      • / head>
      • corpo>
      • h1> Olá, mundo! / h1>
      • div id = "contentOne">
      • p> Este é algum texto em div # contentOne. / p>
      • div>
      • p> Um parágrafo em uma subseção de div # contentOne / p>
      • / div>
      • / div>
      • / body>
      • / html>
    • Usar tags div> ajuda a encontrar e modificar estilos ao trabalhar com CSS e Javascript. HTML usará codificação diferente para trabalhar com estilos CSS e Javascript para criar uma experiência de usuário melhor e mais responsiva.

Pontas

  • Depois de ler este artigo, não pare e pense que aprendeu tudo o que precisa saber. Sempre há algo para aprender, especialmente nesta tecnologia.
  • Aprenda, entenda e escreva código.
  • Observe que algumas tags usam apenas>. Para e br são alguns exemplos. Outras tags abertas com> precisam ser fechadas posteriormente. Por exemplo, "div> / div>".
  • As pessoas esperam novas descobertas, então reinvente, projete ou codifique.
  • Depois de aprender muito, tente aprender programação de servidor.
  • Aprenda a trabalhar com CSS e também com Javascript.

Avisos

  • Lembre-se de que HTML trata de edição de conteúdo. Isso significa que o HTML é usado apenas para armazenar conteúdo em um formato reconhecido. Outras mudanças devem ser feitas usando outras tecnologias, como CSS. Também significa fazer "Semanticamente corretomesmo que os outros não o admitam. Outras linguagens de programação ajudam a construir páginas da web (CSS, Javascript e XML). HTML é um construtor de conteúdo.

O que você precisa

  • Um editor de texto que suporta codificação ANSI
  • Um navegador da web como o Internet Explorer ou Mozilla Firefox
  • (Opcional) editor de HTML wysiwyg ou wykiwyg, como Adobe Dreamweaver, Aptana Studio ou Microsoft Expression Web