Seguinte Lesson

Conteúdo

Bytes4Future – PowerUP Aula 1 – Introdução ao HTML Conteúdo

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

 – permite criar um parágrafo de texto.
  – quebra de linha.
<hr> – linha horizontal na largura da página.
 – texto em negrito.
 – mesmo aspecto do só que para definir texto com forte importância.
 – texto em itálico.
 mesmo aspecto do , só que usado para dar ênfase a um texto.
 – texto sublinhado(underline).
<ins> – mesmo aspecto do , mas usado para citação.
<smal> – colocar o texto mais pequeno
 – colocar o texto com marcação (realce amarelo)
<del> – colocar o texto riscado
 – colocar o texto em expoente(linha de cima)
 – 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.

Module anterior

Voltar para Module