HTML5: como criar sua primeira página na Web?

Em Desenvolvimento e TI por André M. Coelho

Se você não quiser aprender HTML e começar a criar seu site imediatamente, sem necessidade de codificação, pode usar diversos programas e utilitários para isso. Mas se você quer começar do zero e ter um conhecimento melhorado de como um site funciona, o HTML5 pode ser a ferramenta que você precisa. E nós podemos te ensinar como usá-la da forma correta.

O que é HTML?

HTML, um acrônimo para HyperText Markup Language, é uma linguagem de computador para criar sites e aplicativos da web. Consistindo principalmente em séries de códigos geralmente escritos em um arquivo de texto e salvos como HTML, o código escrito na linguagem HTML se traduz em um texto bonito e bem formatado ou uma combinação de texto e mídia quando visualizado através de um navegador.

Escolhendo seu editor de HTML

Se você está pensando em criar páginas web em HTML, você precisa de um editor de HTML. Existem vários benefícios em usar um editor de HTML.

Um bom editor de HTML manterá seu código limpo e organizado. Ele também detectará quando você abrir uma nova tag e fechá-la automaticamente para evitar que você tenha um código com bugs e, como resultado, reduzir a quantidade de digitação necessária. Atualmente, a maioria dos editores de HTML permite que você visualize sua página da Web para ver como ela ficará em um navegador da Web usando o recurso WYSIWYG.

Existem muitos editores HTML gratuitos e pagos, e um pouco de pesquisa vai te ajudar a encontrar facilmente os melhores.

Blocos de construção básicos de HTML

Depois de decidir sobre o editor de HTML que você deseja usar, o próximo passo é entender os blocos de construção do HTML. Ao codificar em HTML, é essencial entender esses blocos de construção. Eles incluem tags, atributos e elementos. Vamos dar uma olhada básica neles abaixo:

Introdução aos Elementos de HTML

Em HTML, um “elemento” consiste na tag de abertura e fechamento, bem como o conteúdo entre as tags.

No exemplo “Ele é um menino” (em negrito), temos isso em HTML: <b> Ele é um menino </ b>. O texto “Ele é um menino” é cercado por uma tag aberta e fechada. Tudo, incluindo a tag de abertura, o conteúdo e a tag de fechamento é um elemento.

Quando uma tag é aberta, o conteúdo é introduzido e a tag é fechada, temos um elemento.

Um elemento pode estar em uma forma básica ou em uma forma complexa. Por quê? Porque qualquer coisa entre uma tag aberta e uma tag fechada, bem como essas tags, é um elemento. Isso significa que podemos ter elementos dentro de um elemento. Em nosso exemplo atual, “ele é um menino” (<b> Ele é um menino </ b>) é um elemento.

Você notará que dissemos anteriormente que os documentos HTML contêm a tag <body> antes do início do conteúdo. O conteúdo pode incluir centenas de elementos diferentes, mas todos esses elementos fazem parte do elemento “body” (já que o elemento body está aberto, contém conteúdo e é fechado).

Introdução aos Atributos de HTML

Enquanto os documentos HTML basicamente usam tags para tudo, às vezes queremos comunicar informações adicionais dentro de um elemento. Nesse caso, usamos um atributo. O atributo é usado para definir as características de um elemento, é usado dentro da tag de abertura do elemento. Atributos são compostos de um nome e um valor.

Observe que o valor de um atributo é colocado dentro de uma aspa usando o formato <tag attribute = “value”> Seu texto </ tag>.

Exemplo:

<p align = “center”> Ele é um menino </ p>

Neste exemplo, estamos instruindo que “Ele é um menino” está alinhado no centro do documento.

Comandos de HTML básicos

Supondo que você queira criar seu próprio documento HTML básico hoje, como você começou? Desde a criação de títulos de páginas até a criação de formulários, mostraremos como começar a usar o HTML abaixo.

Criando o Elemento HTML <head>

Ao criar um documento HTML, uma das primeiras coisas que você criará é o elemento <head>. Contém metadados (ou dados sobre o documento HTML). Isso inclui informações como o conjunto de caracteres, título do documento, estilos de documentos, scripts, etc.

Alguns dos elementos no <head> incluem o título, que é criado com a tag <title>.

Exemplo:

<title> Este é o título da nossa página </ title>

Este título será exibido na guia do navegador. Também é o que será indexado como o título da página quando os robôs do mecanismo de pesquisa rastrearem seu website.

Isso também inclui o elemento <meta>, que é frequentemente usado para especificar as informações que os mecanismos de pesquisa podem usar para descrever o conteúdo de suas listagens. Isso inclui a descrição, palavras-chave, informações do autor etc. O elemento <meta> também especifica o conjunto de caracteres que o documento HTML usa.

Criando cabeçalhos em HTML

Os títulos desempenham um papel importante no sucesso de um website. Em primeiro lugar, facilitam a leitura do conteúdo de suas páginas pelos leitores. Em segundo lugar, e talvez mais importante, eles comunicam a estrutura de suas páginas da Web aos mecanismos de pesquisa e, portanto, costumam afetar a maneira como seu conteúdo é classificado nos resultados dos mecanismos de pesquisa.

Dito isso, é importante evitar o uso de tags de cabeçalho para tornar o texto grande ou em negrito. Existem outras tags que podem ser usadas para isso (a que chegaremos mais adiante nesta seção). Em vez disso, tags de título devem ser usadas apenas para estrutura.

Existem seis tags de cabeçalho em HTML: <h1> a <h6>, com a tag <h1> indicando o cabeçalho mais importante e a tag <h6> indicando o cabeçalho menos importante.

Para criar cabeçalhos, basta decidir o título que você está criando, abrir o título com a tag de cabeçalho regular e sempre lembrar de fechar as tags quando terminar.

Exemplo de títulos em HTML:

<h1> Este é o seu primeiro título em HTML </ h1> (o maior)

<h2> Este é o seu segundo cabeçalho HTML </ h2>

<h3> Este é o seu terceiro cabeçalho HTML </ h3>

<h4> Este é o seu quarto cabeçalho HTML </ h4>

<h5> Este é o seu quinto cabeçalho HTML </ h5>

<h6> Este é o seu sexto cabeçalho HTML </ h6>

Criando parágrafos

O próximo passo é começar a criar parágrafos. Os parágrafos podem ser criados com a tag <p>.

Exemplo:

<p> Este é seu primeiro parágrafo. </ p>

<p> Este é o seu segundo parágrafo, e você estará criando muitos mais parágrafos. </ p>

Tenha em mente que escrever em HTML é muito diferente de escrever em texto puro. Portanto, se você dividir o texto dentro do HTML sem iniciar um novo parágrafo, realmente não importará quando o texto for exibido pelo navegador. Em vez disso, você deseja usar uma quebra de linha, que é representada pela tag <br>.

Exemplo:

<p> Este é um novo parágrafo.
E eu quero usar várias linhas novas.
Então estou terminando. </ P>

Esse código não sairá da forma abaixo:

Este é um novo parágrafo.
E eu quero usar várias linhas novas.
Então estou terminando.

Na verdade, ele será assim:

Este é um novo parágrafo. E eu quero usar várias linhas novas. Então estou terminando.

Então, como você quebra textos em novas linhas para que elas sejam mostradas como no segundo exemplo acima? Usando as quebras de linha.

Exemplo:

<p> Este é um novo parágrafo. <br> E eu quero usar uma série de novas linhas. <br> Então, estou quebrando tudo. </ p>

Dito isso, é importante observar que a tag de quebra de linha (<br>) é uma tag vazia, portanto, você não precisa fechá-la.

Use o HTML5 para programar sites e criar um design único e cheio de recursos. (Foto: MakeUseOf)

Formatando texto em HTML

O próximo passo é formatar seu texto em HTML. É aqui que você pode indicar se deseja que seu texto fique em negrito, itálico, sublinhado, subscrito, sobrescrito, etc. Esse é um guia básico, portanto, essa seção não será a de finalizar tudo para formatação. Em vez disso, incluiremos apenas algumas tags básicas de formatação. O processo para usar outras formas de formatação é simples – basta encontrar a tag desejada e prosseguir:

Usando negrito: <b> Ele é um menino </ b> sai como Ele é um menino

Usando itálico: <i> Ele é um menino </ i> sai como Ele é um menino

Texto sublinhado: <u> Ele é um menino </ u> sai como Ele é um menino. Vale a pena notar que a tag <u> foi preterida no HTML 4.01 e foi redefinida para representar um texto estilisticamente diferente em HTML5. Como resultado, recomenda-se usar o CSS para indicar o texto que deve ser sublinhado. Como este artigo é um guia básico, estamos simplificando.

Usando o subscrito: <sub> Ele é um menino </ sub> sai como Ele é um menino

Usando sobrescrito: <sup> Ele é um menino </sup> sai como ~~Ele é um menino~~

Para outras tags que podem ser usadas para formatar, você pode querer dar uma olhada no glossário no final deste recurso, onde incluímos muitas tags HTML relevantes.

Listas ordenadas e não ordenadas em HTML

Mais cedo ou mais tarde você terá que criar listas. As listas podem ser ordenadas (isto é, numeradas) ou não ordenadas (isto é, não numeradas).

Aqui está um exemplo de uma lista ordenada:

Item 1
Item 2
Item 3

Aqui está como criá-la:

Aqui está um exemplo de uma lista não ordenada:

Item 1
Item 2
Item 3

Aqui está como criá-la:

A tag <li> é usada para indicar cada item na lista. Ao fazer uma lista, você pode usar a tag <ol> para indicar uma lista ordenada (“o” = ordenada e “l” = lista) ou a tag <ul> para indicar uma lista não ordenada (“u” = desordenada e “ l ”= lista). Nós também podemos ter listas aninhadas ou uma lista dentro de uma lista.

Exemplo:

Item 1
Item 1 aninhado
Item 2 aninhado
Item 2
Item 3

Isso pode ser criado com:

<ul>
<li> Item 1
<ul>
<li> Item 1 aninhado </ li>
<li> Item 2 aninhado </ li>
<li> Item 3 aninhado </ li>
</ ul>
</ li>
<li> Item 2 </ li>
<li> Item 3 </ li>
</ ul>

Como você pode ver, basta abrir outra tag listada – ordenada (<ol>) ou desordenada (<ul>) – dependendo do que você deseja antes de fechar o item que deseja aninhar.

Hyperlinking em HTML

A web é uma rede de páginas massivamente interconectada. Se você criar um site – seja internamente ou externamente, ou ambos – você terá que vincular a outras páginas. Um link para uma página interna em seu site, ou para uma página externa na web, é chamado de hyperlink. Enquanto as pessoas geralmente vinculam um texto, qualquer elemento HTML – uma imagem, por exemplo – pode ser vinculado.

A tag <a> é usada para definir links em HTML, enquanto o atributo “href” é usado para especificar o destino de um link. O link é então colocado em uma cotação após o sinal “igual a” antes que a tag seja fechada.

Para criar um hiperlink, este: <a href=”https://nomedosite.org”> SEU TEXTO DE LINK AQUI </a> aparecerá com o link sendo acessado ao clicar em SEU TEXTO DE LINK AQUI

Agora, suponha que você esteja vinculando a um arquivo local no qual você tenha todas as suas páginas HTML na mesma pasta. Nesse caso, você não precisa incluir um URL de website. Basta adicionar o caminho do arquivo. Por exemplo, se vincular a um arquivo intitulado pagina-sobre.html, seu hiperlink se tornará <a href=”pagina-sobre.html”> SEU LINK DE TEXTO AQUI </a>, que se vincula ao arquivo página-sobre.html.

Se o arquivo HTML que você deseja vincular for local, mas em uma pasta diferente da pasta principal, basta especificar o caminho do arquivo. Por exemplo, se o arquivo estiver na pasta “Arquivos”, no documento principal em que seu documento atual está, seu hiperlink será parecido com este <a href=”files/página-sobre.html”> SEU TEXTO DE LINK AQUI </ a >

Você pode querer especificar como deseja que o link seja aberto, por exemplo, em uma nova janela / guia. Você usará o atributo target para isso.

Exemplos:

<a href=”about-page.html” target=”_blank”> SEU LINK DE TEXTO AQUI </a> especifica que o link deve ser aberto em uma nova guia.

<a href=”about-page.html” target=”_self”> SEU LINK DE TEXTO AQUI </a> especifica que o link deve ser aberto na mesma guia.

Existem outros atributos que podem ser usados para comunicar diferentes maneiras de abrir um link:

_blank – Abra em uma nova aba.
_self – Abra na mesma aba.
_parent – Abrir no quadro pai
_top – Aberto no corpo inteiro da janela
framename – Abrir em um frame nomeado

Você também pode ter uma imagem apontando para um link.

Exemplo:

Isso diz ao navegador para exibir uma imagem extraída do arquivo de imagem “eleeummenino.jpg” e tê-la vinculada a https://nomedosite.org. O atributo “alt” representa o que deve ser mostrado se a imagem não puder ser exibida (devido às configurações do navegador ou a outras coisas que impeçam a exibição de imagens).

Usando imagens em HTML

Imagens são adicionadas a um documento HTML com a tag <img>. A tag <img> é uma tag vazia, por isso não precisa ser fechada.

Exemplo:

Este é um exemplo básico de dizer ao navegador para exibir uma imagem intitulada “eleeummenino.jpg” tirada do mesmo diretório que o documento HTML. O atributo “alt” diz ao navegador para mostrar um texto (conhecido como “texto alternativo”) chamado “Ele é um menino” se por algum motivo as configurações do navegador ou da internet impedirem o navegador de exibir imagens. Se você deseja extrair uma imagem em outro diretório ou em um site externo, o endereço / caminho completo deve ser especificado.

Indo além do básico, também podemos usar outros atributos para personalizar melhor a imagem. Por exemplo, o atributo “style” pode ser usado para especificar a largura, a altura ou ambos.

Exemplo:

Os termos “width” (largura) e “height” (altura) em itálico devem ser substituídas pelos valores reais em “px” (por exemplo, “20px”) que você deseja para a sua imagem.)

Criando tabelas em HTML5

À medida que você se aprofunda no HTML, você vai querer aprender várias maneiras de apresentar informações de uma maneira mais organizada. Uma dessas maneiras é através do uso de tabelas.

Tabelas são criadas com a tag <table>. Cada cabeçalho em uma tabela é especificado com o tag <th> (“table header”) enquanto cada linha é especificada com o tag <tr> (“table row”). Os dados da tabela são então indicados com a tag <td>.

Exemplo:

<table>
<tr>
<th> Cabeçalho da tabela 1 </ th>
<th> Cabeçalho da tabela 2 </ th>
<th> Cabeçalho da tabela 3 </ th>
</ tr>
<tr>
<td> Entrada 1 no cabeçalho 1 </ td>
<td> Entrada 1 no cabeçalho 2 </ td>
<td> Entrada 1 no cabeçalho 3 </ td>
</ tr>
<tr>
<td> Entrada 2 no cabeçalho 1 </ td>
<td> Entrada 2 no cabeçalho 2 </ td>
<td> Entrada 2 no cabeçalho 3 </ td>
</ tr>
<tr>
<td> Entrada 3 no cabeçalho 1 </ td>
<td> Entrada 3 no cabeçalho 2 </ td>
<td> Entrada 3 no cabeçalho 3 </ td>
</ tr>
</ table>

Quando criamos uma tabela como acima, ela é um pouco desorganizada. Para organizar, podemos adicionar alguns estilos ao código. Neste caso, estamos aumentando a largura:

<table style = “width: 100%”>
<tr>
<th> cabeçalho da tabela 1 </ th>
<th> Cabeçalho da tabela 2 </ th>
<th> Cabeçalho da tabela 3 </ th>
</ tr>
<tr>
<td> Entrada 1 no cabeçalho 1 </ td>
<td> Entrada 1 no cabeçalho 2 </ td>
<td> Entrada 1 no cabeçalho 3 </ td>
</ tr>
<tr>
<td> Entrada 2 no cabeçalho 1 </ td>
<td> Entrada 2 no cabeçalho 2 </ td>
<td> Entrada 2 no cabeçalho 3 </ td>
</ tr>
<tr>
<td> Entrada 3 no cabeçalho 1 </ td>
<td> Entrada 3 no cabeçalho 2 </ td>
<td> Entrada 3 no cabeçalho 3 </ td>
</ tr>
</ table>

Isso resulta em algo mais organizado.

Você pode querer ir mais avançado e usar bordas, definir alinhamento horizontal ou vertical para o conteúdo da tabela, introduzir divisores, preenchimento, etc. No entanto, você precisará aprender algum CSS para fazer coisas como essa. Estamos mantendo este tutorial básico e não entraremos neste artigo.

Citações em HTML

Existem diferentes tipos de citações, e essas citações são representadas por diferentes elementos.

Para uma cotação básica, veja um exemplo:

<p> Esta é uma amostra. E <q> Aqui está nossa citação </ q> </ p>

Isto aparece como:

Esta é uma amostra.

E aqui está nossa citação

Quando você usa a tag <q>, aspas são automaticamente adicionadas ao que está dentro da tag.

Você também pode usar blockquotes, o que é feito com a tag <blockquote>.

Exemplo:

<p> Esta é uma amostra. E <blockquote> Aqui está o nosso blockquote. Neste exemplo, tentamos demonstrar como formatar o texto para indicar um blockquote em HTML. Isso é diferente das citações comuns, em que o símbolo “quote” real pode ou não ser adicionado dependendo do estilo CSS, mas o texto é destacado. </ Blockquote> </ p>

Usando comentários em HTML

Ao fazer qualquer forma de codificação, é importante aprender como incluir comentários em seu código. Comentários são usados para tornar seu código mais organizado. Você pode incluir um lembrete para si mesmo ou uma nota para os outros para facilitar as coisas.

Inicialmente, pode não parecer importante, mas quando você começa a escrever centenas ou milhares de linhas de código, e quando as coisas parecem começar a ficar complicadas, os comentários serão úteis.

Comentários não serão exibidos para o espectador pelo navegador. Lembre-se de que eles podem ser vistos no código-fonte.

Comentários também podem ser usados ??em qualquer parte do código. Eles não alteram a função do seu código de nenhuma maneira.

Você pode incluir um comentário abrindo um colchete, incluindo um hífen duplo, adicionando seu comentário, incluindo outro hífen duplo e, em seguida, fechando seu colchete.

Exemplo:

<! – Este é um comentário usado para indicar informações que eu quero lembrar, ou que eu quero que outros tomem nota, quando olhar para este código no futuro ->

Também é importante notar que, especialmente ao depurar, você pode comentar linhas de código. Dessa forma, o código permanece no documento, mas não funciona desde que você o comentou.

Exemplo:

<! – <b> Ele é um menino </ b> ->

Neste caso, enquanto “Ele é um menino” deve sair em negrito, nós o colocamos como comentário e seria ignorado pelo navegador. Nesse cenário, no que diz respeito ao navegador, não temos nada.

Isso também pode ser usado da seguinte maneira:

<b> Ele <! – é um -> menino </ b> que mostra Ele menino. Isso porque comentamos “é um”. Estamos apenas tentando mostrar a você que praticamente qualquer coisa, dentro ou fora de um elemento, pode ser comentada. Você pode incluir uma observação em seu comentário para referência. Ela não altera a natureza do que é exibido.

Usando cores em HTML

Mais cedo ou mais tarde, você desejará usar cores para indicar certos elementos do documento HTML. Isso pode ser feito de três maneiras principais: com o valor HEX, com o valor RGB ou com o nome da cor.

Usar cores em HTML geralmente é feito com o atributo style.

Exemplo 1:

Usando o valor HEX para a cor azul “# 0000FF” estamos dizendo ao navegador para mostrar seu texto (neste caso “Esta é a cor azul”) usando a cor azul.

Exemplo 2:

<p style = “color: rgb (153, 255, 153);”> Esta é a cor verde </ p>

Estamos instruindo o texto a ser destacado na cor verde usando o valor RGB.

Exemplo 3:

<p style = “color: hsl (60,100%, 50%);”> Esta é a cor amarela </ p>

Usando o valor HSL, pedimos que o texto fosse destacado na cor amarela.

Exemplo 4:

<p style = “color: orange;”> Esta é a cor laranja </ p>

Usamos o nome da cor HTML (neste caso, “laranja” – que destacamos no código em itálico) para solicitar que o texto seja realçado na cor laranja.

Obviamente, isso só é viável para textos para os quais você sabe os nomes das cores e pode ser difícil para certas cores que podem ser facilmente feitas com o código HEX ou com o valor RGB. Independentemente disso, você pode encontrar uma lista de 140 nomes de cores HTML compilados por códigos de cores HTML.

Compreensivelmente, você não tem todas as informações necessárias – como código HEX, valor RGB, etc. – para todas as cores. Não entre em pânico – o seletor de cores da W3Schools é uma ótima ferramenta que permite selecionar qualquer cor e mostra todas as informações sobre essa cor, incluindo o código HEX, o valor RGB e o valor HSL.

Usando iFrames em HTML

Em um documento HTML, um iFrame (quadro embutido) pode ser usado para incorporar um arquivo no documento atual. Em essência, você pode usá-lo para exibir outro site ou conteúdo de outra página da Web dentro do atual.

Exemplo:

Com o código acima, estou dizendo ao navegador para exibir o conteúdo de https://websitesetup.org em um quadro diretamente dentro desta página.

Iframes podem ser usados para exibir um site, vídeo, imagens ou qualquer outra forma de conteúdo.

O código para isso é simples:

(basta substituir “URL” pelo link para o site / conteúdo que você deseja exibir.)

Você pode personalizar ainda mais para especificar determinados valores, por exemplo, a altura e a largura do seu iframe.

Exemplo:

Estamos dizendo ao navegador para exibir o iframe usando uma altura de 350 px e largura de 400 px.

Fontes em HTML

Entender como as fontes funcionam é essencial para criar documentos HTML eficazes. Por um lado, as fontes facilitam definir o tamanho do seu texto. Também facilita a definição da cor e da face (ou tipo de fonte) do seu conteúdo.

Para indicar a fonte que seu documento HTML utilizará, você precisará usar a tag <font>. Você pode definir o tamanho da fonte, a cor da fonte ou a face da fonte usando os atributos “tamanho”, “cor” ou “face”.

Tamanho da configuração – exemplo:

<font size = “6”> Indique este texto usando o tamanho da fonte 6 </ font>

Neste exemplo, estamos dizendo ao navegador para exibir nosso texto usando o tamanho da fonte 6. É importante observar que o intervalo de tamanhos de fonte aceitos é de 1 a 7. Qualquer valor acima de 7 será ajustado automaticamente para o tamanho da fonte 7. O padrão tamanho da fonte é 3.

Cor da fonte – exemplo:

<font color = “blue”> Mostrar o nosso texto na cor azul </ font>

Estamos usando a tag <font> para solicitar que o navegador exiba nosso texto na cor azul. Neste exemplo, usamos o nome da cor HTML (“azul”). Isso pode ser substituído pelo código HEX ou pelo valor RGB, se desejar.

Tipo da fonte – exemplo:

Você prefere Verdana ao invés de Times New Romans? É assim que você define:

<font face = “Verdana”> Por favor, exiba este texto na fonte Verdana </ font>

Estamos dizendo ao navegador para exibir nosso texto na fonte Verdana. Você pode simplesmente alterar o valor de face da fonte para indicar qualquer fonte que deseja usar.

É importante observar que as pessoas só poderão ver o texto exibido na fonte que você especificar, se elas tiverem essa fonte instalada no computador. Caso contrário, a face de fonte padrão – geralmente Times New Roman – será exibida. Por esse motivo, é altamente recomendável usar fontes seguras para a Web.

Pode ajudar incluir tantas faces de fontes alternativas quanto possível. Dessa forma, mesmo que eles não tenham sua fonte principal, você pode especificar outras fontes em ordem de importância. Isso é feito com o uso da vírgula.

De volta ao nosso exemplo:

<font face = “Verdana, Helvetica, Arial e Comic Sans”> Por favor, exiba este texto primeiro na fonte Verdana, ou Helvetica, ou Arial, ou Comic Sans… nessa ordem, se a fonte principal não estiver disponível </ font>

Nós instruímos o navegador para mostrar o texto em Verdana. Se Verdana não estiver disponível, em vez de reverter para o padrão Times New Romans, ele pode mostrar Helvetica, ou Arial se Helvetica não estiver disponível ou Comic Sans se Arial não estiver disponível também.

Conclusão

Em conclusão, o HTML é mais complicado do que o que você tem neste guia. Não perca a esperança – se você conseguir entender os conceitos básicos deste guia, você terá um bom começo. É como saber o ABC de uma língua e tudo o mais se torna muito mais fácil.

Se você passou por este tutorial com o objetivo de criar um site incrível, lamentamos o desapontamento. Ele simplesmente não funciona dessa maneira. Este é um tutorial HTML básico. Está aqui para ajudá-lo a desenvolver uma base sobre a qual você possa construir. Você pode ter certeza de que será necessário um esforço significativamente maior – e muito tempo de desenvolvimento, muitas vezes usando uma combinação de idiomas – para criar um site excelente.

Com ferramentas como WordPress, você pode ter um site notável pronto em minutos.

Você pode usar como referência tabelas periódicas de HTML, lista de tags, atributos HTML, uma cheatsheet de HTML, códigos de cores e muito mais.

Ficou alguma dúvida? Deixem suas perguntas nos comentários!

Sobre o autor

No final da década de 90, André começou a lidar diretamente com tecnologia ao comprar seu primeiro computador. Foi um dos primeiros a ter acesso à internet em sua escola. Desde então, passou a usar a internet e a tecnologia para estudar, jogar, e se informar, desde 2012 compartilhando neste site tudo o que aprendeu.

Veja também