Introdução ao HTML básico e

HTML5
HTML, ou HyperText Markup Language, é uma linguagem de marcação
usada para descrever a estrutura de uma página da web. Ele usa
uma sintaxe ou notação especial para organizar e fornecer
informações sobre a página ao navegador. Os elementos geralmente
possuem tags de abertura e fechamento que circundam e dão
significado ao conteúdo. Por exemplo, existem diferentes opções
de marcas para colocar ao redor do texto para mostrar se é um
título, um parágrafo ou uma lista.
A parte do HTML HyperText vem dos primeiros dias da web e de seu
caso de uso original. As páginas geralmente continham documentos
estáticos que continham referências a outros documentos. Essas
referências continham links de hipertexto usados pelo navegador
para navegar até o documento de referência, de forma que o
usuário pudesse ler o documento de referência sem ter que
procurá-lo manualmente.
À medida que as páginas da web e os aplicativos da web ficam
mais complexos, o Consórcio W3 atualiza a especificação HTML
para garantir que uma página da web possa ser exibida de forma
confiável em qualquer navegador. A última versão do HTML é
HTML5.
1- Diga olá aos elementos HTML
<h1> Hello World!</h1>

2- Título com o elemento h2

h1: títulos principais
h2: subtítulos
h3, h4, h5 e h6: diferente níveis de subtítulos

3- Informar com o elemento de parágrafo

p: parágrafo
br: quebra de linha

4- Preencha o espaço em branco com o texto de espaço

reservado
Os desenvolvedores da Web tradicionalmente usam o texto lorem
ipsum como texto de espaço reservado. O texto lorem ipsum foi extraído
aleatoriamente de uma passagem famosa de Cícero da Roma Antiga.

5- HTML sem comentários

Comentários: <!-- -->

6- Comente o HTML
===§===
7- Excluir elementos HTML
===§===

8- Introdução aos elementos HTML5

HTML5 apresenta tags HTML mais descritivas. Estes
incluem main, header, footer, nav, video, article, section e outros.
Essas tags fornecem uma estrutura descritiva ao seu HTML, facilitam a
leitura do seu HTML e ajudam na otimização do mecanismo de pesquisa
(SEO) e na acessibilidade. A main tag HTML5 ajuda os mecanismos de
pesquisa e outros desenvolvedores a encontrar o conteúdo principal da
sua página.
Ex:

<main>
<h1>Hello World</h1>
<p>Hello Paragraph</p>
</main>

Observação: muitas das novas tags HTML5 e seus benefícios são

abordados na seção Acessibilidade aplicada.

9- Adicione imagens ao seu site

Você pode adicionar imagens ao seu site usando o img elemento e
apontar para o URL de uma imagem específica usando o src atributo.
Ex: <img src="https://www.freecatphotoapp.com/your-image.jpg">
Observe que os img elementos são de fechamento automático.
Todos os img elementos devem ter um alt atributo. O texto dentro de
um altatributo é usado para leitores de tela para melhorar a
acessibilidade e é exibido se a imagem falhar ao carregar.
Nota: Se a imagem for puramente decorativa, usar um alt
atributo vazio é uma prática recomendada.
Idealmente, o alt atributo não deve conter caracteres especiais, a
menos que seja necessário.
Vamos adicionar um alt atributo ao nosso img exemplo acima:
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A
business cat wearing a necktie.">
10- Link para páginas externas com elementos âncora
Você pode usar elementos a ( anchor ) para criar um link para conteúdo
fora de sua página da web.
a os elementos precisam de um endereço da web de destino
denominado href atributo. Eles também precisam de texto âncora.
Ex: <a href="https://freecodecamp.org">this links to
freecodecamp.org</a>

11- Link para seções internas de uma página com

elementos âncora
Os elementos a ( anchor ) também podem ser usados para criar links
internos para pular para diferentes seções em uma página da web.
Para criar um link interno, você atribui o href atributo de um link a
um símbolo hash # mais o valor do id atributo para o elemento que
deseja vincular internamente, geralmente mais abaixo na página. Em
seguida, você precisa adicionar o mesmo id atributo ao elemento ao
qual está vinculando.
Um id é um atributo que descreve exclusivamente um elemento.
Ex:

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

target = "_blank": faz com que o documento vinculado seja aberto em

uma nova guia
12- Aninhar um elemento âncora dentro de um parágrafo
Você pode aninhar links em outros elementos de texto. Também chamado
de anchor text
Ex:

<p>
Here's a <a target="_blank"
href="http://freecodecamp.org"> link to
freecodecamp.org</a> for you to follow.
</p>

13- Faça links mortos usando o símbolo de hash

Às vezes, você deseja adicionar a elementos ao seu site antes de saber
para onde eles serão vinculados.
Isso também é útil quando você está alterando o comportamento de um
link usando JavaScript, o que aprenderemos mais tarde.
Ex: href=”#”

14- Transforme uma imagem em um link

Transformar a imagem em um link (morto)
Ex: <a href=”#”><img src=”...” alt=”...”></a>

15- Criar uma lista não ordenada com marcadores

O HTML possui um elemento especial para a criação de listas não
ordenadas ou listas de estilo de marcadores.
Listas não ordenadas começam com um <ul> elemento de abertura, seguido
por qualquer número de <li> elementos. Finalmente, as listas não
ordenadas fecham com um </ul>
Ex:

<ul>
<li>milk</li>
<li>cheese</li>
</ul
16- Crie uma lista ordenada
HTML possui outro elemento especial para a criação de listas
ordenadas ou listas numeradas.
Listas ordenadas começam com um <ol> elemento de abertura, seguido por
qualquer número de <li> elementos. Finalmente, as listas ordenadas são
fechadas com a </ol> tag.
Ex:

<ol>
<li>Garfield</li>
<li>Sylvester</li>
</ol>

17- Crie um campo de texto

input: obter informações do usuário
Ex: <input type="text">
Observe que o input elementos são de fechamento automático.

18- Adicionar texto de espaço reservado a um campo de

texto
O texto de espaço reservado é o que é exibido em seu input elemento
antes de o usuário inserir qualquer coisa.
placeholder: texto de espaço reservado
Ex: <input type="text" placeholder="this is placeholder text">
19- Crie um elemento de formulário
Você pode construir formulários da web que realmente enviam dados a um
servidor usando nada mais do que HTML puro. Você pode fazer isso
especificando uma ação em seu form elemento.
form: formulário enviado à um servidor
Ex: <form action="/url-where-you-want-to-submit-form-data"></form>
Ex:

<form action="http://freecodecamp.org">
<input type="text" placeholder="cat photos URL">
</form>

20- Adicionar um botão de envio a um formulário

Vamos adicionar um submit botão ao seu formulário. Clicar neste botão
enviará os dados do seu formulário para o URL que você especificou com
o action atributo do formulário.
Ex: <button type="submit">this button submits the form</button>

21- Use HTML5 para exigir um campo

Você pode exigir campos de formulário específicos para que seu usuário
não possa enviar seu formulário até que ele ou ela os preencha.
Por exemplo, se você quiser tornar um campo de entrada de texto
obrigatório, basta adicionar o atributo required dentro do seu input
elemento.
Ex: <input type="text" required>
22- Crie um conjunto de botões de rádio
Você pode usar botões de opção para perguntas em que deseja que o
usuário dê apenas uma resposta entre várias opções.
Os botões de rádio são um tipo de input.
Cada um de seus botões de opção pode ser aninhado em seu próprio label
elemento. Ao envolver um input elemento dentro de um label elemento,
ele associará automaticamente a entrada do botão de opção ao elemento
de rótulo ao seu redor.
Todos os botões de opção relacionados devem ter o mesmo name atributo
para criar um grupo de botões de opção. Ao criar um grupo de opções,
selecionar qualquer botão de opção desmarcará automaticamente os
outros botões do mesmo grupo, garantindo que apenas uma resposta seja
fornecida pelo usuário.
Ex:

<label>
<input type="radio" name="indoor-outdoor">Indoor
</label>

É considerada prática recomendada definir um for atributo no label

elemento, com um valor que corresponda ao valor do id atributo
do input elemento. Isso permite que tecnologias assistivas criem um
relacionamento vinculado entre o label e o input elemento filho.
Caso o name estiver diferente no mesmo label, poderá selecionar MAIS
DE UMA OPAÇÂO
Ex:

<label for="indoor">
<input id="indoor" type="radio" name="indoor-
outdoor">Indoor
</label>
23- Crie um conjunto de caixas de seleção
Os formulários costumam usar caixas de seleção para perguntas que
podem ter mais de uma resposta. Ou seja, servem para marcar mais de
uma opção
Caixas de seleção são um tipo de input.
Ex:

<label for="loving">
<input id="loving" type="checkbox"
name="personality">Loving
</label>

24- Use o atributo value com botões de rádio e caixas

de seleção
Quando um formulário é enviado, os dados são enviados ao servidor e
incluem entradas para as opções selecionadas. Entradas de tipo radio
e checkbox relatam seus valores a partir do value atributo.
Ex:

<label for="indoor">
<input id="indoor" value="indoor" type="radio"
name="indoor-outdoor">Indoor
</label>
<label for="outdoor">
<input id="outdoor" value="outdoor" type="radio"
name="indoor-outdoor">Outdoor
</label>

Aqui, você tem duas radio entradas. Quando o usuário envia o

formulário com a indoor opção selecionada, os dados do formulário irão
incluir a linha: indoor-outdoor=indoor. Isso vem dos atributos name
e value da entrada "interna".
Se você omitir o value atributo, os dados do formulário enviado usarão
o valor padrão, que é on. Nesse cenário, se o usuário clicasse na
opção "interna" e enviasse o formulário, os dados do formulário
resultantes seriam indoor-outdoor=on, o que não é útil. Portanto,
o value atributo precisa ser definido como algo para identificar a
opção.
25- Verificar botões de rádio e caixas de seleção por
padrão
A caixa de seleção ou botão de opção já fica selecionada por padrão
Ex: <input type="radio" name="test-name" checked>

26- Aninhar muitos elementos em um único elemento div

O div elemento, também conhecido como elemento de divisão, é um
contêiner de uso geral para outros elementos.
Usar uma tag de propósito genérico div para envolver vários elementos
permite ao desenvolvedor aplicar um estilo comum a cada um dos
elementos envolvidos, agrupar elementos com o mesmo significado, criar
um 'pacote' de layout diferente e assim por diante. // A mais usada

27- Declare o tipo de documento de um documento HTML

Os desafios até agora cobriram elementos HTML específicos e seus
usos. No entanto, existem alguns elementos que fornecem a estrutura
geral da sua página e devem ser incluídos em todos os documentos HTML.
Na parte superior do documento, é necessário informar ao navegador
qual versão de HTML sua página está usando. HTML é uma linguagem em
evolução e é atualizada regularmente. A maioria dos principais
navegadores suporta a especificação mais recente, que é HTML5. No
entanto, as páginas da web mais antigas podem usar versões anteriores
do idioma.
Você fornece essas informações ao navegador adicionando a <!
DOCTYPE ...> tag na primeira linha, onde a ... parte é a versão do
HTML. Para HTML5, você usa <!DOCTYPE html>.
O ! e DOCTYPE em maiúsculo são importantes, especialmente para
navegadores mais antigos. O html não diferencia maiúsculas de
minúsculas.
Em seguida, o resto do código HTML precisa ser envolvido em html
tags. A abertura <html> vai diretamente abaixo da <!DOCTYPE html>
linha e o fechamento </html> vai no final da página.

<!DOCTYPE html>
<html>
<!-- Your HTML code goes here -->
</html>
28- Defina o cabeçalho e o corpo de um documento HTML
Você pode adicionar outro nível de organização em seu documento HTML
dentro das html tags com os elementos head e body. Qualquer marcação
com informações sobre sua página vão para a head tag. Então, qualquer
marcação com o conteúdo da página (o que é exibido para um usuário)
iria para a body tag.
Elementos de metadados, tais como link, meta, title, e style,
tipicamente, vão para dentro do head elemento.

<!DOCTYPE html>
<html>
<head>
<!-- metadata elements -->
</head>
<body>
<!-- page contents -->
</body>
</html>