Como criar uma página em HTML: um guia para iniciantes
O desenvolvimento web começa com a primeira página de HTML.
Economize R$320 na compra do seu curso. Use o código e comece a aprender!
Aprenda do zero as principais ferramentas para tecnologias, como HTML, CSS, JavaScript, Ajax e APIs e crie páginas e apps com layouts atraentes e profissionais. Garanta sua primeira oportunidade no mercado de tecnologia.
Combine suas habilidades em design com conhecimentos em desenvolvimento para criar apps de ponta a ponta e desenhar layouts do seu jeito. Torne-se um profissional diferenciado e aumente as suas oportunidades de trabalho.
O que é HTML?
HTML (Hypertext Markup Language) é o código utilizado para estruturar e exibir uma página web e seu conteúdo. Por exemplo, o conteúdo pode ser estruturado em vários parágrafos, listas com marcadores ou por meio de imagens e tabelas de dados.
O HTML não é uma linguagem de programação; é uma linguagem de marcação utilizada para dizer ao seu navegador como exibir as páginas web que você visita. O HTML é composto por uma série de elementos utilizados para fazer com que o conteúdo apareça ou se comporte de determinada maneira. Por exemplo, as tags podem colocar links em palavras ou em imagens, colocar palavras em itálico, aumentar ou diminuir uma fonte, etc.
Fonte: Unsplash
Como criar uma página em HTML?
As tags são escritas em um editor de texto. O exemplo mais simples é o bloco de notas, mas recomendamos usar o Notepad++. Você pode baixá-lo no site oficial e instalar em apenas dois cliques.
A principal vantagem desse editor de texto é que ele possui realce de sintaxe. Isso significa que partes do seu código vão ser destacadas em uma cor específica. Isso simplifica a escrita do código e ajuda a evitar erros.
Estrutura básica de um documento HTML
Uma página web possui um conjunto básico de tags. São elas:
- <!DOCTYPE html> se refere ao tipo de documento. No passado, quando a HTML estava no começo (por volta de 1991-1992), os doctypes definiam um conjunto de regras que uma página HTML tinha que seguir para ser considerada boa. Isso incluía uma verificação automática de erros e outras funções úteis. No entanto, hoje em dia, ninguém liga muito para isso e a tag se tornou algo mais parecido com um artefato histórico que deve ser habilitado para que tudo funcione do jeito certo.
- <html></html> se refere ao elemento <html>. Essa tag “envolve” todo o conteúdo da página e é também conhecido como elemento raiz.
- <head></head> o elemento <head> funciona como um recipiente para tudo que você deseja incluir em uma página HTML, mas não é o conteúdo exibido aos usuários da sua página.
- <title></title> o elemento <title> estabelece o título da sua página, que aparece no topo do navegador da página que está sendo carregada. É também o texto que descreve a página quando ela é favoritada.
- <body></body> o elemento <body> contém todo o conteúdo que é exibido aos usuários quando visitam sua página, seja ele texto, imagens, vídeos, jogos, trilhas de áudio ou qualquer outro elemento.
- <meta charset=”utf-8″>: este elemento estabelece a codificação UTF-8 no seu documento, que inclui a maioria dos caracteres de todos os idiomas do mundo. Assim, o documento consegue processar qualquer conteúdo textual que você incluir nele.
Trabalhando com texto: formato e cor
Fonte: Unsplash
Para trabalhar com o texto, usamos a tag font. Por definição, a tag font funciona como uma espécie de “invólucro” para o texto, controlando as propriedades que podem mudar a aparência dele.
A tag font é aplicada da seguinte forma:
<p>Criando sites <font>"Nubex"</font></p>
A tag possui 3 atributos:
- Cor: determina a cor do texto. O parâmetro de cor pode ser especificado com o nome da cor (por exemplo: “vermelho”, “azul” ou “verde”) ou com um código hexadecimal (por exemplo: #fa8e47).
- Size: determina o tamanho do texto. Pode ter valores de 1 a 7 (o valor predeterminado é 3, que corresponde a Times New Roman, tamanho 13.5). Outra opção para configurar esse atributo é usar o “+1” ou “-1”. Isso significa que o tamanho da fonte será alterado em mais ou menos 1 em relação a esse tamanho base.
- Face: determina a família de fontes a ser utilizada.
Vejamos um exemplo do uso desses atributos:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>mudamos a cor do texto com a ajuda do HTML</title> </head> <body> <p>Desenvolvedor de páginas web <font size="6" color="#fa8e47" face="serif">"Nubex"</font></p> </body> </html>
Aplicamos uma tag de fonte a uma palavra, atribuímos o tamanho 6, a cor laranja e a família de fontes “Serif”.
Adicionando imagens
O código insere a imagem no lugar correto na página. Fazemos isso utilizando o atributo src (de source, fonte) que contém o caminho do arquivo de imagem.
<img src="images/ebac-icon.png" alt="imagem teste">
O atributo alt (de alternative ou alternativa) especifica um texto que vai descrever a imagem aos usuários que não podem vê-la por conta de problemas de visão ou erros no carregamento da página. Esse texto deve proporcionar ao leitor informação suficiente para ter uma ideia do que está na imagem. Assim, no lugar de “imagem teste”, o melhor seria escrever “Logo da EBAC: quatro letras orientadas em sentido horário, formando um quadrado”, por exemplo.
<img src="images/ebac-icon.png" alt="Logo da EBAC: quatro letras orientadas em sentido horário, formando um quadrado">
Verifique se todas as tags estão fechadas
Todas as tags são fechadas pelos sinais de maior e menor <nome da tag>. Com exceção de algumas, a maioria das tags possui tags de encerramento correspondentes. Por exemplo, <html> tem sua própria tag de encerramento </html>. Verifique se todas as tags estão fechadas, antes de salvar o código.
Salve seu documento HTML
Salve o arquivo na extensão .html. Depois, você pode abri-lo no navegador.
Fonte: Unsplash
Tags mais importantes para HTML básico
Vamos dar uma olhada em alguns elementos básicos do HTML que você vai usar para marcar o texto.
Cabeçalho
Da mesma forma que um livro possui título, título de capítulos e subtítulos, um documento HTML também. O HTML inclui seis níveis de cabeçalho: <h1> (en-US)–<h6> (en-US), mas normalmente não utiliza mais do que 3 ou 4:
<h1>Mi cabeçalho principal</h1> <h2>Mi cabeçalho de nível superior</h2> <h3>Mi subtítulo</h3> <h4>Mi sub-sub-título</h4>
Parágrafo
O elemento <p> é usado para parágrafos de texto; normalmente é utilizado para marcar um conteúdo textual:
<p>Este é um parágrafo só</p>
Listas e índices
A maior parte do conteúdo web é composto de listas e o HTML possui elementos especiais para elas. A marcação de uma lista sempre consiste de pelo menos dois elementos. Os tipos de listas mais comuns são as listas numeradas e as listas não-ordenadas:
- As listas não-ordenadas são listas nas quais a ordem dos artigos não importa, como uma lista de compras. Elas são marcadas pelo elemento <ul>.
- As listas numeradas são listas nas quais a ordem dos elementos é importante, como em uma receita. Elas são marcadas pelo elemento <ol>.
Cada elemento dentro das listas se encontra dentro do elemento <li> (de list item ou elemento de lista).
<p>A Ebac oferece cursos nas seguintes áreas:</p> <ul> <li>design</li> <li>programação e dados</li> <li>gaming</li> <li>software</li> <li>marketing</li> <li>moda</li> </ul> <p>que vão mudar sua vida... </p>
Hyperlinks
Os links são o que fazem com que a internet seja a internet. Para adicionar um link, você deve usar um elemento simples: <a> (de anchor ou âncora). Para converter o texto de um parágrafo em link, você deve fazer o seguinte:
- Selecione o texto.
- Envolva o texto em um elemento <a>:
<a>Cursos EBAC</a>
- Copie no Clipboard
- Atribua ao elemento <a> o atributo href (de hypertext reference ou link de hipertexto):
<a href="">Cursos EBAC</a>
- Copie para o Clipboard
- Complete o valor do atributo com a URL a que deseja linkar:
<a href="https://ebac.mx/cursos">Cursos EBAC</a>
Estilo
A tag <style> é utilizada para definir estilos para os elementos de uma página. A tag <style> deve ser utilizada dentro de <head>. Você pode especificar mais de uma etiqueta <style>.
Sintáxe:
<head> <style type="text/css"> ... </style> </head>
Tabelas
Para criar uma tabela, você usa o elemento <table></table>, que contém os elementos da tabela, além de todos os elementos que devem estar dentro dela.
Fonte: Unsplash
Exemplos de páginas web simples em HTML
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" > <title>Profissão: Cientista de Dados</title> </head> <body> <h1>Por que aprender Data Science?</h1> <p>Ela está entre os 10 maiores segmentos emergentes; possui crescimento anual de 47%, segundo um estudo do Linkedin. A análise de dados pode ser aplicada em diversos setores:</p> <ul> <li>medicina,</li> <li>bancos,</li> <li>empresas privadas;</li> <li>supermercados,</li> <li>grandes escolas.</li> </ul></p> <p>Por ser uma profissão com maior demanda do que oferta, é uma das áreas mais bem pagas do mercado de trabalho.</p> </body> </html>
Se você gostou do que leu até agora, aprenda a criar páginas em HTML de forma profissional no nosso curso online de Engenheiro Front-End. Em 9 meses, com a ajuda do nosso professor Gian Souza você vai desenvolver projetos em HTML que poderão integrar seu portfólio profissional. O curso vai prepará-lo para iniciar uma carreira em TI.
Engenheiro Front-end
Economize R$320 na compra do seu curso. Use o código e comece a aprender!
Aprenda do zero as principais ferramentas para tecnologias, como HTML, CSS, JavaScript, Ajax e APIs e crie páginas e apps com layouts atraentes e profissionais. Garanta sua primeira oportunidade no mercado de tecnologia.
Combine suas habilidades em design com conhecimentos em desenvolvimento para criar apps de ponta a ponta e desenhar layouts do seu jeito. Torne-se um profissional diferenciado e aumente as suas oportunidades de trabalho.
Receba artigos do blog, acompanhe as últimas notícias da EBAC e fique por dentro das novidades!
