HTML5
HTML5 é a mais recente versão da linguagem HTML. Trouxe novas
funcionalidades e perspectivas em relação ao papel exercido pelo
HTML na Web. HTML traz novas tags, como <header> para
cabeçalhos, <nav> para menus, <video> e <audio> para respectivos
elementos, além de apresentar uma sintaxe mais simples como por
exemplo para declaração do DOCTYPE.
Uma página HTML é composta por alguns elementos básicos. São eles: (i) a declaração
do tipo do documento; (ii) a tag HTML, que armazenará todo conteúdo da página; (iii) o
cabeçalho, que armazena informações estruturais da página; e (iv) o corpo, que
armazenará os conteúdos e formatações da página.
1. <!DOCTYPE html>
2. <html>
3.
4. <head>
5.
6. <title>Hello</title>
7.
8. </head>
9.
10. <body>
11.
12. <p>Olá, mundo!</p>
13.
14. </body>
15.
16. </html>
Digite o código acima em um editor de textos (por exemplo, o bloco de notas ou o
Sublime Text). Salve o arquivo com o título “minha_pagina.html". Página HTML
possuem a extensão “.html”. Agora abra o arquivo em um navegador (como Chrome,
Edge ou Firefox). O navegador irá exibir a seguinte página:
Parágrafos
Como criar parágrafos?
Para se declarar parágrafos em páginas pode-se utilizar a tag <p>. Entretanto, é possível
aplicar diversos tipos de formatações a parágrafos. Veja o exemplo a seguir:
1. <p>
2. <b>Texto em negrito</b><br>
3. <i>Texto em itálico</i><br>
4. <u>Texto sublinhado</u><br>
5. <sub>Texto subscrito</sub><br>
6. <sup>Texto sobrescrito</sup><br>
7. <big>Texto com fonte maior do que o padrão</big><br>
8. <small>Texto com fonte menor do que o padrão</small><br>
9. <em>Texto em itálico</em><br>
10. <strong>Texto em negrito</strong>
11. </p>
Ao exibir nosso código em um navegador veremos o seguinte resultado:
Podemos ainda alterar a fonte usando o atributo style e a propriedade font-family:
1. <!-- Declarando uma única fonte -->
2. <p style="font-family: 'Times New Roman'">Olá, mundo!</p>
3.
4. <!-- Declarando duas possíveis fontes -->
5. <p style="font-family: 'Helvetica, Arial'">Olá, mundo novamente!
</p>
Observe que o trecho...
1. <!-- Declarando uma única fonte -->
... não é mostrado na tela do navegador. Use os símbolos de <!-- e --> para inserir
comentários. Comentários permitem a organização do código.
Quebras de linha
Podemos usar a tag <br> para inserir quebras de linha em nossa página.
Tags de títulos
São 6 ao todo:
1. <h1>Título 1</h1>
2.
3. <h2>Título 2</h2>
4.
5. <h3>Título 3</h3>
6.
7. <h4>Título 4</h4>
8.
9. <h5>Título 5</h5>
10.
11. <h6>Título 6</h6>
Estilos
Estilos
Estilos permitem que sua página tenha diversos tipos de formatações. Eles podem ser
declarados com o atributo style (como mostrado anteriormente) ou com a tag <style>.
No exemplo a seguir vamos demonstrar como alterar a cor de um texto:
1. <style>
2. p { color: red; }
3. </style>
Esse exemplo aplica a cor vermelha a todos os elementos do tipo parágrafo.
Podemos ainda aplicar cores ao fundo. Observe o exemplo a seguir:
1. <style>
2. body { background-color: red; }
3. </style>
Nesse exemplo, o plano de fundo da página foi alterado para a cor vermelha.
Agora vamos construir uma página completa aplicando estilos:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Meus estilos</title>
5. <style>
6. body {
7. background-color: red;
8. color:green;
9. }
10. </style>
11. </head>
12.
13. <body>
14.
15. <p>Olá mundo</p>
16.
17. </body>
18.
19. </html>
Veja que a tag <style> deve ser declarada dentro da tag <head>.
Perceba também que não é uma ideia muito boa, combinar vermelho com verde ;)
Linhas horizontais e listas
Podemos adicionar linhas horizontais usando a tag <hr>.
<hr>
Listas podem ser criadas usando a tag <ul> (listas não ordenadas) ou <ol> (listas
ordenadas) e cada elemento pode ser inserido com a tag <li>.
1. <!-- Lista ordenada -->
2. <ol>
3. <li>Primeiro elemento</li>
4. <li>Segundo elemento</li>
5. <li>Terceiro elemento</li>
6. </ol>
1. <!-- Lista não ordenada -->
2. <ul>
3. <li>Primeiro elemento</li>
4. <li>Segundo elemento</li>
5. <li>Terceiro elemento</li>
6. </ul>
Tabelas
Podemos criar tabelas usando a tag <table>.
Cada linha deve ser declarada com a tag <tr> e cada célula com a tag <td>.
Opcionalmente podemos usar a tag <th> para declarar células que representem a linha
de cabeçalho.
Estruturas de um website
Para que websites sejam bem desenvolvidos, existe um conjunto de tags que indicam
onde cada conteúdo deve ser inserido. Em geral, essas tags são apenas estruturais, ou
seja, ao serem inseridas, não trazem modificações a estrutura da página.
Observe a seguir algumas tags estruturais:
Destaco a tag <div>. Essa tag permite a inserção de divisórias nas páginas, ou seja, são
tags estruturais que permitirão que você organize seu código.
1. <div>
2. <p>Conteúdo de uma div</p>
3. </div>
Construindo uma página completa
Construindo uma página completa
Nesta aula vamos aprender a construir uma página completa. Vamos usar como
exemplo a página demonstrada na aula "Estruturas de um Website".
Agora, vamos criar a estrutura desta página usando HTML:
1. <!DOCTYPE html>
2. <html>
3. <head>
4.
5. <title>Página completa</title>
6. <meta charset="UTF-8">
7.
8. </head>
9.
10. <body>
11.
12. <!-- Cabeçalho -->
13. <header>
14.
15. <nav></nav>
16.
17. </header>
18.
19. <!-- Conteúdo -->
20. <div>
21.
22. <article>
23. <section></section>
24. </article>
25.
26. <aside></aside>
27.
28. </div>
29.
30. <!-- Rodapé -->
31. <footer></footer>
32.
33. </body>
34.
35. </html>
Ao implementar isso, você não verá modificação alguma. O conteúdo deste curso
termina aqui, mas caso queira continuar estudando tópicos mais avançados, sugiro meu
curso de CSS. Com a linguagem CSS, você aprenderá a fazer modificações mais
avançadas em suas páginas HTML.
Alterando as cores
<style> cores </style>
Você pode alterar as cores de seu texto e de sua página com a tag <style>.
Para isso devemos aplicar as chamadas propriedades:
color: altera a cor do texto
background-color: altera a cor de fundo
Para isso, você deve adicionar o nome da cor em inglês ou o código RGB. Por exemplo:
1. <html>
2. <head>
3. <style>
4. body{
5. color: red;
6. background-color:#FFFFFF;
7. }
8. </style>
9. </head>
10. <body>
11. Olá mundo!
12. </body>
13. </html>
Vamos tentar entender o código:
A tag style aplica um determinado estilo à página. No caso, você aplicou um estilo a
tudo que estiver no body. A cor aplicada ao texto é vermelha (red) e ao fundo é branco
(#FFFFFF).
Ainda acho complicado? Então vamos fazer uma aula prática ;)
