HTML5 (3) - <b>, <i>, <em>, <del>, <style>, text-align (center, left, right, justify)

A tag b faz com que o texto fique em negrito.

Ex:

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p><b>Processo</b> em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>


Executando:



A tag i é utilizada para que o texto fique com formatação em itálico.


Ex:

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p><i>Processo</i> em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>



Executando:



A tag em é utilizada para que o texto fique com formatação em ênfase.

Ex:

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p><em>Processo</em> em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>


Executando:



A tag del é utilizada para dizer que o texto foi deletado.

Ex:

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p><del>Processo</del> em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>


Executando:



Existem duas formas de configurar o estilo:

1. Adicionando a tag style dentro do elemento que deseja configurar o estilo, com o objetivo de configurar um único elemento.
Obs.: Para configurar o estilo basta colocar os atributos dentro do (atributo 1; atributo 2;...).


Antes de utilizarmos o style precisamos saber alguns atributos:

O atributo text-align alinha o texto de acordo com o seu valor:

- center(centro)

Ex:
<h1 style= "text-align: center;">Aprendendo e Evoluindo</h1>


Executando:




- left(esquerda)

Ex:
<h1 style= "text-align: left;">Aprendendo e Evoluindo</h1>


Executando:




- right(direita)

Ex:
<h1 style= "text-align: right;">Aprendendo e Evoluindo</h1>


Executando:



- justify(esquerda e direita)

Ex:
<p style= "text-align: justify;">Processo em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>


Executando:



O atributo text-indent tem o objetivo de colocar uma margem de acordo com seu valor (um número em px).

Ex:
<h2>Evolução</h2>
<p style="text-indent:50px;">Processo em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>


Executando:


2. Adicionando a tag style dentro do head para configurar o estilo, com o objetivo de configurar vários estilos de elementos com estilos iguais.
Obs.: Para configurar o estilo basta colocar os atributos dentro do {( atributo 1; atributo 2;...)}.


Ex.1:

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
<style>
 h1 {
     text-align: center;
     }
</style>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h1>Evolução</h1>
        <p>Processo em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>


Executando:




Ex.2:

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
<style>
 h1,h2 {
     text-align: center;
     }
</style>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p>Processo em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>



Executando:


HTML5 (2) - <p>, <br/>, &nbsp; , <sup>, <sub>, símbolos

A tag é utilizada para parágrafos.

Ex:

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p>Processo em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>


Executando:


A tag <br/> é utilizada para quebra de linhas.

Ex:

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p>Processo<br/> em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>


Executando:


A tag &nbsp; é utilizada para fazer um espaço.


Ex:

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p>Processo&nbsp; &nbsp; &nbsp; &nbsp; em que há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>


Executando:



A tag sup gera um resultado sobrescrito.


Ex:


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p>Processo<sup> em que</sup> há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>


Executando:


A tag sub gera um resultado sobrescrito:

Ex:


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title>Aprendendo e Evoluindo</title>
</head>
<body>
    <div>
        <h1>Aprendendo e Evoluindo</h1>
        <h2>Evolução</h2>
        <p>Processo<sub> em que</sub> há modificação constante e progressiva, alterando um estado ou uma condição.</p>
    </div>
</body>

</html>


Executando:



Símbolos:


&lt;<&ne;&reg;®&uarr;
&gt;>&Delta;Δ&trade;&darr;
&le;&delta;δ&permil;&darr;
&ge;&lambda;λ&sum;&pades;
&pound;£&omega;ω&infin;&clubs;
&yen;¥&phi;φ&times;×&hearts;
&euro;&larr;&plusmn;±&diams;
&copy;©&Rarr;&oplus;&amp;&

HTML5 - <html>, lang, <head>, meta, charset, <title>, <body>, <div>, <h1,…>

Comandos Básicos do HTML5:

Utilizando o programa “notepad++” e colocando alguns comandos básicos:


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <meta charset= "UTF-8"/>
    <title></title>
</head>
<body>
     <div></div>
</body>

</html>



Para a organização e classificação de informações extremamente comum na internet a utilização de tags.

Tag são dados usados para classificar e organizar arquivos, páginas e outros conteúdos.

A tag html indica que a linguagem é html.



<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <meta charset= "UTF-8"/>
    <title></title>
</head>
<body>
     <div></div>
</body>

</html>


O atributo lang especifica o idioma do conteúdo do elemento, no caso do pt-br o idioma é o português (Brasil):


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title></title>
</head>
<body>
     <div></div>
</body>

</html>



A tag head é um elemento que providencia informações gerais sobre o documento, incluindo seu título e links para scripts e folhas de estilos.

<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <meta charset= "UTF-8"/>
    <title></title>
</head>
<body>
     <div></div>
</body>

</html>



A tag meta  com o atributo charset= UTF-8é utilizada para evitar problemas com sinais e acentuações:


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <meta charset= "UTF-8"/>
    <title></title>
</head>
<body>
     <div></div>
</body>

</html>


A tag body é utilizada para colocarmos todo conteúdo do site, cores para os textos, links, plano de fundo ou imagens de fundo.


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <meta charset= "UTF-8"/>
    <title></title>
</head>
<body>
     <div></div>
</body>

</html>



A tag title é o título da pagina.


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <meta charset= "UTF-8"/>
    <title></title>
</head>
<body>
     <div></div>
</body>

</html>



Ex: Colocando um título: Olá, Mundo!


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <meta charset= "UTF-8"/>
    <title>Olá, Mundo!</title>
</head>
<body>
     <div></div>
</body>

</html>


Clicando em “Executar” e depois em “Launch in ...”, dependendo do navegador que deseja utilizar:


Depois de clicar o navegador abrirá:



A tag div é utilizada para alterar o estilo em partes específicas da página e posicionar objetos que irão aparecer no site.


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title></title>
</head>
<body>
    <div></div>
</body>

</html>



A tag h1,.. é utilizada para títulos e subtítulos.

Ex.: Colocando um título "Aprendendo e Evoluindo" e um subtítulo "HTML5":


<!DOCTYPE html>
<html  lang=  “pt-br”>
<head>
    <title><meta charset= "UTF-8"/>
    <title></title>
</head>
<body>
     <div>
     <h1>Aprendendo e Evoluindo</h1>
     <h2>HTML5</h2>
     </div>
</body>

</html>


Executando:



Obs.: Caso você queira assistir vídeo aulas sobre HTML5 é só acessar o link: