Curso de HTML5, CSS e JavaScript

Aqui, você irá aprender 3 linguagens essenciais para criar páginas Web: HTML5, CSS e JavaScript.

Se você está começando, vou explicar de uma maneira bem grosseira: HTML5 é para colocar as coisas na página, CSS é para deixar bonito.
Ou seja, HTML5 separa os elementos da interface em seções, tabelas, formulários, parágrafos, etc., enquanto a linguagem CSS formata esses elementos com cores, bordas, espaçamento, etc.
A linguagem JavaScript detecta a interação do usuário e permite manipular os elementos da interface, aprimorando a experiência do usuário.

HTML5 - Criando a primeira página

O que é HTML?

  • Linguagem padrão para construção de páginas Web definida pelo W3C
  • É uma linguagem interpretada pelo browser, chama-se linguagem client-side, ou seja, roda no lado cliente da arquitetura cliente-servidor
  • Não é linguagem de programação, é de marcação
  • Isto é, não tem IF, FOR, WHILE, variáveis, etc.
  • A sigla vem de: HyperText Markup Language
  • Os comandos da linguagem chamam-se tags (lê-se: téguis ... rs)
  • Toda tag é escrita assim: <nomedatag>
  • Toda tag abre assim: <nomedatag> e fecha assim: </nomedatag> (há exceções!)
  • Entre a abertura e o fechamento da tag vai o conteúdo que vai ser MARCADO por aquela tag, por isso é uma linguagem de marcação.
  • Há algumas tags que têm atributos: <nomedatag atributo1="valor" atributo2="valor"> e fecha assim: </nomedatag>
  • Escreva todas as tags e seus atributos em letras minúsculas

Como começar uma página? (o mínimo)

Abra o bloco de notas ou qualquer editor de texto que não pareça o Word.


<!DOCTYPE HTML>
<html>
<head>
	<title>Título que aparecerá
	na barra de cima (de título) do navegador
	</title>
</head>
<body>
	Aqui vai o conteúdo da página.
</body>
</html>
Salve o arquivo com a extensão HTML. Exemplo: index.html

A página index.html é a primeira página de um site.
Não use espaços, caracteres especiais ou hífen nos nomes das páginas.
Escreva os nomes separando as palavras com underline e dê um nome curto (sem abreviações), mas que tenha relação com o conteúdo da página.
Por exemplo, se você fizer uma página sobre o frango à milanesa, salve como frango_milanesa.html.

Como começar uma página? (o suficiente)

Vamos colocar algumas tags importantes no cabeçalho da página (a tag de cabeçalho é: <head>).


<!DOCTYPE HTML>
<html>
<head>
	<title>Título que aparecerá na barra de cima (de título) do navegador</title>
	<!-- Descrição da página que pode ser usada por mecanismos de busca -->
	<meta name="description" content="Descrição do conteúdo da página">
	<!--Definição da codificação de caracteres da página-->
	<meta charset="utf-8" />
	<!--Definição que faz com que a página
	se adapte a diferentes dispositivos (mas não é só isso)-->
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
	Aqui vai o conteúdo da página
</body>
</html>
Voltar ao Índice