O que o aluno deve aprender
- O que são TAGS
- As ESTRUTURAS EXISTENTES
- O que são ATRIBUTOS
- Quais os ESTILOS
- CRIAR UMA PAGINA PRINCIPAL DE SITE
- E UMA PAGINA DE BLOG COMPLETA
Desenvolvimento Front-End
Curso HTML 5
Navegador
Software
Brackets - funciona nas 3 plataformas (MAC , Linux , Windows); (sublime),(drawever)
Download endereço: [Link] (grátis)
- Clicar no botão azul
- (xhtml foi trocado por html 5)
UNIDADE 1
BRACKETS – (A) Abrir pasta
(B) Exercicios limpos
(C) Ai aparece na aba Lateral
PROJETO -
(A) ARQUIVO NOVO
(B) SALVAR NA PASTA UNIDADE 3 COMO ARQUIVO .HTML
Elementos da estrutura básica de um arquivo HTML
Código:
<!DOCTYPE html>
<-- Determinação do tipo de documento muito importante>
<html Lang = “pt-BR” > <-- Atributos lang=” lingua do html” >
<head>
<-- cabeçalho Onde ficam as Instruções >
</head>
<body>
<-- Corpo da página é o que o usuario ve no momento >
</body>
</html>
Adicionando as primeiras Tags
Código:
<!DOCTYPE html>
<html Lang = “pt-BR” >
<head>
<title> Primeira Página<-- O que aparece no topo do navegador > </title>
<meta charset =”utf-8”> <-- Possui vários atributos, mas esse atributo serve
para atribuir um grupo de caracteres no body sendo o utf8 universal >
</meta>
</head>
<body>
<p> Até amanhã </p> <-- P de parágrafo >
</body>
</html>
Pré vizualização da pagina web
(A)clicar em LIVE PREVIEW (RAIO)
- Por default ele coloca o chrome como navegador padrão para o tipo de aplicação
(B) habilitar o live preview experimental para vizualizar em tempo real as mudanças (abre no
segundo navegador)
(C) com crhome é mais automático
(D)abrir o local do arquivo HTML salvo e arrastar até o navegador também dá para verificar.
Adicionando INSERINDO ESPAÇO NO TEXTO
Código:
<!DOCTYPE html>
<html Lang = “pt-BR” >
<head>
<title> Primeira Página<--! O que aparece no topo do navegador --> </title>
<meta charset =”utf-8”> <-- ! Possui vários atributos, mas esse atributo serve
para atribuir um grupo de caracteres no body sendo o utf8 universal -->
</meta>
</head>
<body>
<p> Até amanhã </p> <--! P de parágrafo -->
</body>
</html>
Utilizar o para adicionar espaços
Estudando o Elemento Head (parte pensante da
pag)
- Ficam:
Metadados
Estilos
Scripts
Head é a cabeça
Body é o corpo
Html é a junção destes dois Elementos.
No HEAD ficam os metadados – Metadados são informações sobre a página e o
conteúdo publicado.
Elementos do HEAD :
title
base
link
meta
style
Exemplo com elemento link (para lincar estilo)
<!DOCTYPE html>
<html Lang = “pt-BR” >
<head>
<title> Primeira Página<--! O que aparece no topo do navegador --> </title>
<meta charset =”utf-8”> <-- ! Possui vários atributos, mas esse atributo serve
para atribuir um grupo de caracteres no body sendo o utf8 universal -->
</meta>
<link rel=”stylesheet” href=”[Link]”>
</head>
<body>
<p> Até   amanhã </p> <--! P de parágrafo -->
</body>
</html>
Caracteres do euro
<!DOCTYPE html>
<html Lang = “pt-BR” >
<head>
<title> Primeira Página<--! O que aparece no topo do navegador --> </title>
<meta charset =”utf-8”> <-- ! Possui vários atributos, mas esse atributo serve
para atribuir um grupo de caracteres no body sendo o utf8 universal -->
</meta>
</head>
<body>
<p> 15,99 € </p> <--! P de parágrafo -->
</body>
</html>
Libra = &Pound; ç= &aceddil;
Aplicando um estilo em uma pagina HTML (aplicando css com o
style).
- serve para personalizar a aparência de uma página.
<!DOCTYPE html>
<html Lang = “pt-BR” >
<head>
<title> Primeira Página<--! O que aparece no topo do navegador --> </title>
<meta charset =”utf-8”> <-- ! Possui vários atributos, mas esse atributo serve
para atribuir um grupo de caracteres no body sendo o utf8 universal -->
</meta>
<style>
<--! Personalizar por exemplo o background do body (RGB) -->
body {
background: #F00; <--! vermelho-->
font-family: Arial , sans-serif;
color: #00f
</style>
</head>
<body>
Esta é a segunda unidade.
</body>
</html>
Aplicando um script em uma pagina HTML (aplicando Javascript
no HTML).
- serve para personalizar a aparência de uma página.
<!DOCTYPE html>
<html Lang = “pt-BR” >
<head>
<title> Primeira Página<--! O que aparece no topo do navegador --> </title>
<meta charset =”utf-8”> <-- ! Possui vários atributos, mas esse atributo serve
para atribuir um grupo de caracteres no body sendo o utf8 universal -->
</meta>
<style>
<--! Personalizar por exemplo o background do body (RGB) -->
body {
background: #F00; <--! vermelho-->
font-family: Arial , sans-serif;
color: #00f
</style>
<script>
function escreverNome( ) {
<--!atribuindo um valor no caso uma string ao paragrafo identificado como nome-->
[Link] = “Samuel Cardoso”;
}
<--!quando esta janela do navegador for carregada chama essa função->
[Link] = escreverNome;
</script>
</head>
<body>
<p id =”nome” >
</p>
</body>
</html>
Aprendendo a trabalhar com a tag META
Metadados servem para identificar o que os dados de uma pagina
<!DOCTYPE html>
<html Lang = “pt-BR” >
<head>
<title> Primeira Página<--! O que aparece no topo do navegador --> </title>
<meta charset =”utf-8”> <-- ! Possui vários atributos, mas esse atributo serve
para atribuir um grupo de caracteres no body sendo o utf8 universal -->
< meta name=”author” content=”Samuel cardoso”> <-- ! diz para o
computador quem é o autor da pagina -->
< meta name=”generator” content=”Brackets”> <-- ! diz para o computador
qual o software gerou a página -->
< meta name=”keywords” content=”HTML 5, Curso HTML , Curso Front-
End”> <-- ! diz para o computador qual as palavras chaves para encontrar a
página -->
< meta name=”description” content=”pagina do curso de HTML 5”> <-- !
dá uma descrição da página -->
< meta name=”application-name” content=”CondoConnect”> <-- ! dá um
nome a aplicação da página -->
</head>
<body>
</body>
</html>
Aprendendo a trabalhar com a tag “META Refresh” para
atualizar a página de tempos em tempos (Recarregar a página)
Metadados servem para identificar o que os dados de uma pagina
<!DOCTYPE html>
<html Lang = “pt-BR” >
<head>
<title> Primeira Página<--! O que aparece no topo do navegador --> </title>
<meta charset =”utf-8”> <-- ! Possui vários atributos, mas esse atributo serve
para atribuir um grupo de caracteres no body sendo o utf8 universal -->
< meta name=”author” content=”Samuel cardoso”> <-- ! diz para o
computador quem é o autor da pagina -->
< meta name=”generator” content=”Brackets”> <-- ! diz para o computador
qual o software gerou a página -->
< meta name=”keywords” content=”HTML 5, Curso HTML , Curso Front-
End”> <-- ! diz para o computador qual as palavras chaves para encontrar a
página -->
< meta name=”description” content=”pagina do curso de HTML 5”> <-- !
dá uma descrição da página -->
< meta name=”application-name” content=”CondoConnect”> <-- ! dá um
nome a aplicação da página -->
<--!_________________INSERINDO O META REFRESH____________-->
< meta HTTP-equiv=”refresh” content=”1”> <-- ! o content tem o atributo
de tempo que será necessário para a pagina atualizar no caso 1 segundo -->
<script>
function sorteioNumero( ) {
[Link] = [Link]( ) * 50 ;
// o [Link] da um numero quebrado de 0 a 1
[Link] = sorteioNumero;
</script>
</head>
<body>
<p id =”resultado” >
</p>
</body>
</html>