Aula 1
Sabem o que significa HTML ?
- Acrônimo para HyperText Markup Language;
- Uma linguagem de marcação padrão para estruturar o layout das páginas Web;
- Não podemos realizar: loops e funções;
- Faz parte da tríade web: HTML, CSS e JS;
- Pode ser executada diretamente no navegador, não precisa de um setup;
- Todas as páginas web têm na sua composição HTML.
Como criar um arquivo HTML ?
- Para executar o HTML basta um navegador.
- Em qualquer software que cria texto puro (txt), mas vamos utilizar um editor de código, VS Code;
- Salvar o arquivo do projeto com a extensão .html;
- Abrir este arquivo pelo navegador, copiando seu caminho relativo.
Como instalar o VS Code ?
https://code.visualstudio.com
Primeiro arquivo HTML
- Ambiente organizado é tudo!
- Crie uma pasta com o seu nome na área de trabalho.
- Abra a pasta no VS Code e crie um arquivo “index.html”
<p>Mao na massa!</p>Estrutura Básica
<!DOCTYPE html>
<html lang="pt-PT">
<head>
<title> Hello World</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
O que são tags ?
- Os elementos do HTML são escritos através de tags;
Exemplo:
<p>Ola Bytes</p>Esta tag cria um parágrafo na página web
- Temos uma sintaxe semelhante para quase todas elas;
- Sintaxe é a forma de como é codificado algo em uma linguagem de programação.
Títulos de cabeçalho
São implementados em seis níveis, <h1> é o mais importante e <h6> é o de menor importância. Um elemento de cabeçalho descreve brevemente o tópico da selão em que ele está.
Outras tags
- <p> – permite criar um parágrafo de texto.
- <br> – quebra de linha.
- <hr> – linha horizontal na largura da página.
- <b> – texto em negrito.
- <strong> – mesmo aspecto do <b> só que para definir texto com forte importância.
- <i> – texto em itálico.
- <em> mesmo aspecto do <i>, só que usado para dar ênfase a um texto.
- <u> – texto sublinhado(underline).
- <ins> – mesmo aspecto do <u>, mas usado para citação.
- <smal> – colocar o texto mais pequeno
- <mark> – colocar o texto com marcação (realce amarelo)
- <del> – colocar o texto riscado
- <sup> – colocar o texto em expoente(linha de cima)
- <sub> – colocar o texto em índice(linha de baixo)
- <q> – usada para pequenas citações(“aspas”)
- <blockquote> – usada para citações longas(identação)
Comentário em HTML
Como fazer um comentário em HTML ?
<!– ESCREVE O TEU COMENTÁRIO AQUI –>
O conjunto de símbolos “<!–” identifica o início de um comentário e o conjunto de símbolos “–>” identifica o final do comentário, assim podemos ter um comentário multilinha.
Exercício:
- Na página criada, crie os elementos <h1> a <h6> com o mesmo conteúdo e verifique as diferenças entre eles.
- Crie um título <h1>.
- Crie agora uma tag <p> e escreva a palavra “Lorem” para ser criado um texto aleatório. Clique enter para criar.
- Repita o passo anterior para ter dois parágrafos com texto.
- Entre os dois parágrafos insira a tag <hr> para cirar uma divisão entre os parágrafos.
- Aplique no final de uma linha a tag <br> para verificar a quebra de página.
- No texto existente aplique, ao seu critério, as tags mencionadas de forma a verificar a sua apresentação. Cada tag deve envolver apenas uma palavra do texto.