Curso de HTML básico - FreeCodeCamp

Tags básicas

<h>
A tag <h(1-6)> é utilizada para definir um título na sua página. Ela possui uma hierarquia de 1 a 6. Exemplo:

Exemplo de uso da tag <h>

<p>
A tag <p> é utilizada para definir um parágrafo na sua página. Exemplo:

Exemplo de uso da tag <p>

<b>
A tag <b> é utilizada para colocar um texto em negrito. Exemplo: Termo em negrito
<i>
A tag <i> é utilizada para colocar um texto em itálico. Exemplo: Termo em itálico.
<sup>
A tag <sup> é utilizada para colocar um texto para cima. Sendo muito utilizada na matemática. Exemplo: 102
<sub>
A tag <sub> é utilizada para colocar um texto para baixo. Exemplo: H2O.
<u>
A tag <u> é utilizada para colocar um texto em sublinhado. Exemplo: Termo com a tag <u>
<big>
A tag <big> é utilizada para deixar um texto grande. Exemplo: Termo com a tag <big>
<small>
A tag <small> é utilizada para deixar um texto pequeno. Exemplo: Termo com a tag <small>
<strong>
A tag <strong> é utilizada para deixar um texto em destaque, semelhante ao negrito da tag <b>, mas a tag <strong> possui semântica. Exemplo: Termo com a tag <strong>
<em>
A tag <em> é utilizada para deixar um texto em ênfase, semelhante ao itálico da tag <i>, mas a tag <em> possui semântica. Exemplo: Termo com a tag <em>
<q>
A tag <q> é utilizada para indicar uma citação simples. Exemplo: O motivo da guerra é a paz.- Sun Tzu.
<blockquote>
A tag <blockquote> é usada para fazer uma citação completa. Exemplo:
Por vezes, nem sempre o confronto direto será a solução mais inteligente a ser tomada. É preciso encontrar outras formas de lidar com um problema sem que isso seja a força bruta. Use sua mente, explore possibilidades e aprenda a sair por cima de forma digna e criativa.
<ins>
A tag <ins> é utilizada para indicar que um texto foi inserido, ela é semelhante a tag <u>, mas a tag <ins> possui semântica. Exemplo: Termo com a tag <ins>
<del>
A tag <del> é utilizada para indicar que um texto foi deletado, mas deve ser lido. Exemplo: Termo com a tag <del>
<abbr>
A tag <abbr> é geralmente utilizada em abreviações, ela diz o significado ao passar o mouse por cima. Exemplo: HTML
<mark>
A tag <mark> adiciona uma marcação ao texto, semelhante ao uso de um marca-texto. Exemplo: Termo com a tag ><mark>

Comentários

Você pode inserir comentários nos seus códigos, eles são invisíveis e não apareceram no navegador. Geralmente são utilizados para fazer anotações sobre o próprio código, para assim serem lidos por si ou por outro desenvolvedor. Para colocá-los, você usa a tag <!---->

Style e color

Você também pode inserir estilos no seu código, usando CSS.

Tag style

Existem alguns atributos que você pode colocar na tag style, alguns deles são: color, background-color, font-family, font-size, text-allign.

Como usar CSS no seu código?

Existem 3 formas de adicionar CSS, elas são: inline, interna e externa.

Inline

Você usa CSS no próprio código que você quer estilizar. Existem muitas desvantagens nessa forma, sendo recomendada a ser usada quando é estritamente necessária, é preferível utilizar a forma interna e externa. Exemplo:

CSS inline

Interno

Você coloca o código CSS no head do seu código HTML. Essa forma é recomendada quando o código CSS se aplica a apenas uma página, não sendo recomendada quando passa a ser duas ou mais, pois dificulta mudanças no código CSS do site.

Externo

Você adiciona o código CSS por meio de um código no head do seu código HTML. O código utilizado é <link rel="stylesheet" href="nomedoarquivo.css">. Essa forma é recomendada quando o site é composto por mais de uma página, favorecendo futuras mudanças no código do site e uma melhor organização.

Links

Links externos

Você pode adicionar links externos ao seu código HTML por meio da tag <a>. Exemplo com um link externo:

Links internos

Você pode adicionar links internos ao seu código HTML por meio da mesma tag, mas linkando a um arquivo do seu mesmo servidor. Exemplo com um link interno: Curso de HTML

Colocando imagens

Você pode adicionar imagens ao seu site por meio da tag <img>

Imagens externas

Você pode adicionar imagens externas ao seu site por meio da tag img linkando para uma imagem externa. Exemplo de uso:

Imagens internas

Você pode adicionar imagens do seu próprio computador para o site. Exemplo:

gato fofo paradinho

Imagens clicáveis

Também é possível fazer uma imagem clicável.

gato fofo paradinho

Colocando vídeos

Você pode colocar vídeos no seu site por meio da tag <video>

Vídeos internos

É possível colocar vídeos internos no site. Exemplo:

Vídeos externos

Também é possível adicionar vídeos externos, principalmente por meio da incorporação. Exemplo:

Listas

É possível adicionar listas ao seu site, existem 3 tipos de lista: ordenada, não ordenada, definição.

Listas não ordenadas

Listas não ordenadas, assim como o nome diz, elas não possuem uma ordem. Para colocá-las utilize a tag <ul>. Exemplo de lista não ordenada:

Atributos

Existem alguns atributos que podem ser atribuidos às listas não ordenadas, eles são: type="disc, square, circle".

Listas ordenadas

Como o nome diz, são listas que possuem uma ordem. Para colocá-las utilize a tag <ol>. Exemplo de lsita ordenada:

    Receita de bolo - Preparo

  1. Bata na batedeira as claras em neve, adicione as gemas uma a uma e continue batendo, junte o açúcar e bata mais um pouco.
  2. Junte a farinha peneirada e o leite bem quente e mexa bem, sem bater, por último coloque o fermento.
  3. Leve para assar em forma redonda sem buraco no meio, untada e enfarinhada em forno pré-aquecido em temperatura média por no máximo 30 minutos ou quando tiver dourado e bem sequinho.
  4. Cresce bastante e fica bem fofinho.

Atributos

Existem alguns atributos que podem ser atribuidos às listas ordenadas, eles são: type="A, a, I, i, 1".

Listas de definição

Listas de definição são listas que servem para listar, organizar e definir termos. Para colocá-las use a tag <dl>

HTML
HyperText Markup Language, usado para o conteúdo de um site.
CSS
Cascading Style Sheets, usado para o estilo de um site.
JavaScript
Usado para a interatividade de um site.

Tables

É uma forma de formatar informações para os usuários, parecido com o que acontece no Excel. Para colocá-los use a tag <table>. Exemplo:

Jogo de 02/02/2020
Time 1 Time 2 Time 3 Time 4 Time 5
30 40 50 70 70
20 30 40 50 60
40 50 60 70 80

Atributos

Um atributo pode ser usado para uma coluna ocupar mais espaço, ele é denominado como: colspan=""

Divs e Spans

Inlines e blocks

Antes de falar sobre Divs e Spans, é importante entender o conceito de um elemento inline e um elemento block. O HTML tem duas formas principais de mostrar um elemento no navegador, elas são inline e blocks.

Block

Um elemento block, assim como o nome diz, ocupa um bloco na página, pegando todo o espaço da tela em que ele está inserido, elementos blocks não podem ficar um ao lado do outro. Exemplo de elemento block:

Block1

Block2

Como você pode observar, eles não conseguem ocupar a mesma linha, pois eles ocupam um bloco na tela.

Inline

Um elemento inline não ocupa todo o espaço da página em que ele está inserido, podendo ficar um ao lado do outro. Exemplo de elemento inline:

Inline1 Inline2

Como você pode observar, eles conseguem ocupar a mesma linha, desde que haja espaço.

Agora que você entendeu o conceito de inline e blocks, podemos entender Spans e Divs

Spans

Spans são elementos inline, eles são usados como contêiner para outros códigos HTML. Para colocá-los use a tag <span>. Exemplo:

Span1 Span2

Divs

Divs são elementos block, eles também são usados como contêiner para outros códigos HTML. Para colocá-los use a tag <div>. Exemplo:

Div1
Div2

Input e Forms

Input

Tags input permitem que você coloque espaços no site onde usuários podem colocar informações. Para colocá-los use a tag <input>. Exemplo:


Atributos

Existem alguns atributos que você pode adicionar, alguns deles são: type="date, file, range, radio, checkbox, submit, password."

Form

A tag <form> é usada para armazenar todos as tags <input>

Iframes

Iframes são elementos que permitem que você coloque outro site no seu próprio site. Para colocá-los use a tag <iframe>. Exemplo:

Atributos

Existem alguns atributos que você pode adicionar, alguns deles são: frameborder, width, height.

Metatags

Metatags são colocadas no head do seu código

<meta name="description" content="Escreva aqui">
Essa tag coloca uma descrição no seu site.
<meta name="author" content="Escreva aqui">
Essa tag define o autor do site