<Manual HTML>

Sintaxe básica Página HTML

Todos os elementos abaixo são obrigatórios, mas alguns são editáveis devido aos atributos e seus valores.

Alguns como o favicon são complementares, embora seu uso seja grandemente incentivado.
Outros como as Meta Tags de Pesquisa são também muito importantes para o SEO do site junto aos mecanismos de busca.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="shortcut icon" href="img/favicon.png">
        <title>Document</title>
    </head>
    <body>
        
    </body>
</html>

Título da Pagina ou Site

A utilização da TAG <title> é feita exclusivamente dentro da TAG <head> e serve apenas para que o navegador exiba o título na barra de identificação ou abas.
Servem para ajudar nas Meta Tags de Pesquisa auxiliando o ranking de SEO dos mecanismos de busca.

<title>Title</title>

Charset

A utilização da TAG <meta charset="utf8"> onde utf8 são os tipos de caracteres usados no website.
Neste caso em específico abaixo, serve para informar ao navegador(browser) tais como EDGE, Chrome, Firefox, etc.. que o site contém caracteres(letras) que podem ou não conter acentos ou caracteres latinos como o ç.

<meta charset="utf8">

Viewport

A utilização da TAG <meta name="viewport" content="width=device-width, initial-scale=1.0"> serve para informar ao navegador(browser) tais como EDGE, Chrome, Firefox, etc.. que o site deve ser renderizado priorizando o tamanho da tela do dispositivo seja ele um Laptop, PC, Tablet ou Smartphone.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Favicon

A utilização da TAG <link rel="shortcut icon" href="img/favicon.png"> serve para informar ao navegador(browser) tais como EDGE, Chrome, Firefox, etc.. qual o icone a ser exibido no canto da aba do navegador quando ele estiver aberto.

<link rel="shortcut icon" href="img/favicon.png">

Títulos e sub-títulos

A utilização das TAGs H(n) onde n são números de 1 até 6
Servem para determinar níveis de importância dentro de páginas de internet.
Desse modo caso não existam modificações de estilo feitas em CSS elas tem por padrão tamanhos diferentes sendo <H1> o maior e <H6> o menor tamanho dentre eles.

<h1>Título de maior grandeza</h1>
<h2>Sub-Título</h2>
<h3>Sub-Título</h3>
<h4>Sub-Título</h4>
<h5>Sub-Título</h5>
<h6>Sub-Título</h6>

Resultado obtido:

Título de maior grandeza

Sub-Título

Negrito, Itálico, Sublinhado e Riscado

Embora sejam elementos simples, produzir bons textos demanda a possibilidade de poder altera-los produzindo efeitos estéticos que facilitam a melhor leitura ou separação visual.

Por este motivo foram criadas algumas TAGs tais como:

<b>Negrito</b>
<i>Italico</i>
<u>Sublinhado</u>
<s>Riscado</s>

Que produzem a alteração estética do conteúdo escrito internamente. Não podemos esquecer que podemos combinar uns com os outros produzindo textos ao mesmo tempo Bold e Italico por exemplo <b><i>Negrito e Italico</b></i>

Resultado obtido:

Negrito Italico Sublinhado ~~Riscado~~

Paragrafos

A maioria dos textos para Web são compostos de Títulos e parágrafos sendo assim para produzir um parágrafo utilizamos a seguinte semantica.

<p>
    Todos os elementos abaixo são obrigatórios, mas alguns são editáveis devido 
    aos atributos e seus valores.
    Alguns como o <b>favicon</b> são complementares, embora seu uso seja 
    grandemente incentivado. <br>
    <a href="https://developers.google.com" target="_blank">Meta Tags de Pesquisa</a>
</p>

Resultado obtido:

Quebra de Linhas

Nenhuma TAG é tão simples como a TAG <br> e ao mesmo tempo tão importantes.
De mesmo modo seu uso é meio que auto explicativo, uma vez que a única coisa que a tag faz é quebrar o texto empurrando os próximos elementos para baixo.

<p>
    Sendo desse modo o que você percebe é que ao adicionar uma TAG <br>
    no meio de um texto dentro ou fora de um parágrado a 
    continuação dos elementos vão para a próxima linha.
</p>

Resultado obtido:

Sendo desse modo o que você percebe é que ao adicionar uma TAG
no meio de um texto dentro ou fora de um parágrado a continuação dos elementos vão para a próxima linha.

Tag Center

Por vezes queremos centralizar uma coisa e a única coisa que queremos fazer, em um pagagrafo ou um titulo ou uma imagem e mais nada, para ester casos existe a TAG <center> cujo o objetivo é apenas centralizar o que existe dentro dela.

<center><h3>Titulo Centralizado</h3></center>

Resultado obtido:

Titulo Centralizado

Links

Se tem uma coisa importante em páginas de internet é poder linkar as coisas através de textos, imagens, botões ou icones levando o usuário a abrir uma nova pagina com conteúdo externo ou mesmo a uma parte mais abaixo ou mais acima do seu site.

<p>
   O <b><a href="https://youtube.com" target="_blank">YOUTUBE</a></b> 
   é o site mais acessado mundialmente.
</p>

Resultado obtido:

O YOUTUBE é o site mais acessado mundialmente.

Imagens

O que seria da internet sem imagens? Pouco provavel que ela se tornasse o que é hoje sem conteúdo que melhore a interação e a representação do mundo real, por isso foi criada a TAG <img>.

<img src="coracao.png">

Resultado obtido:

Tabelas

Quando queremos organizar dados de forma organizada no mundo real através de computadores, normalmente utilizamos tabelas, e na internet não é muito diferente, desse modo nasceu a TAG <table> e seus filhos <tr> e <td> sendo tr uma linha e td uma coluna

Ainda existindo a tag <th> que são colunas de titulo ou rótulo de uma coluna em geral.

Tabelas são um tema bem amplo no html devido a união entre linhas e colunas da mesma forma que fazemos no excel unindo (mesclando) celulas. Por isso não fique apenas nesse tutorial, siga este link mais amplo sobre o assunto

<table>
    <caption>Despesas da Casa por Morador</caption>
    <tr>
        <th scope="col">Morador</th>
        <th scope="col">Aluguel</th>
        <th scope="col">Energia + Gas</th>
        <th scope="col">Água</th>
        <th scope="col">Internet</th>
        <th scope="col">Total</th>
    </tr>
    <tr>
        <th scope="row">Francisco</th>
        <td>7</td>
        <td>4,569</td>
        <td>4,569</td>
        <td>4,569</td>
        <td>4,569</td>
    </tr>
    <tr>
        <th scope="row">Laura</th>
        <td>7</td>
        <td>4,569</td>
        <td>4,569</td>
        <td>4,569</td>
        <td>4,569</td>
    </tr>
    <tr>
        <th scope="row">Raj</th>
        <td>7</td>
        <td>4,569</td>
        <td>4,569</td>
        <td>4,569</td>
        <td>4,569</td>
    </tr>
    <tr>
        <th scope="row">Keshana</th>
        <td>7</td>
        <td>4,569</td>
        <td>4,569</td>
        <td>4,569</td>
        <td>4,569</td>
    </tr>
</table>

Resultado obtido:

Despesas da Casa por Morador
Morador	Aluguel	Energia + Gas	Água	Internet	Total
Francisco	7	4,569	4,569	4,569	4,569
Laura	7	4,569	4,569	4,569	4,569
Raj	7	4,569	4,569	4,569	4,569
Keshana	7	4,569	4,569	4,569	4,569

Comentários

Quando o assunto é desenvolvimento, sempre temos que pensar na manutenção do nosso código no futuro, isso porque o que criamos hoje, provavelmente vamos lembrar amanhã, mas não quer dizer que lembraremos daqui a um mês ou até mesmo anos depois.

Por isso nasceu a TAG de  que não produz efeitos estéticos na página web pois ela é ignorada pelo navegador sendo apenas util para que possamos nos guiar na criação de novas funcionalidades num site ou programa e também para quando precisamos dar a manutenção num código feito a muito tempo do qual não lembramos mais o que cada coisa faz.

<!-- Abaixo vai o titulo do Paragrafo -->
<h3>Titulo do Artigo</h3>
<!-- Abaixo é a imagem da matéria ou artigo -->
<img src="coracao.png" class="imgArticle">
<!-- Abaixo é o texto da matéria ou artigo -->
<p>
    Texto qualquer sem importância, qualquer sem importância<br> 
    Importância, Texto qualquer sem importância Texto importância<br>
    Texto qualquer sem importância, Texto qualquer sem importância.<br>
    Texto qualquer sem importância, qualquer sem importância.
</p>
<!-- Fim do Artigo -->

Resultado obtido:

Titulo do Artigo

Texto qualquer sem importância, qualquer sem importância
Importância, Texto qualquer sem importância Texto importância
Texto qualquer sem importância, Texto qualquer sem importância.
Texto qualquer sem importância, qualquer sem importância.

Listas

Quando queremos adicionar uma lista ordenada ou não ordenada utilizamos as TAGS <UL> <LI> e <OL>

<ul>
    <li>Item</li>
    <li>Item</li>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <li>Item</li>
</ul>

<ol>
    <li>Item</li>
    <li>Item</li>
    <ol>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ol>
    <li>Item</li>
</ol>

Resultado obtido:

Item
Item

Item
Item
Item

Item

Item
Item

Item
Item
Item

Item

Embedando conteúdo externo com IFRAMES

Quando precisamos adicionar um conteúdo externo seja um vídeo, mapa ou parte de um site qualquer utilizamos o <IFRAME>;

<iframe src="https://blogger.com/" frameborder="0" allowfullscreen></iframe>