HTML: A minha primeira página HTML com CSS externo (+ Cores em HTML)
Deves elaborar os seguintes cursos:
Curso HTML: www.w3schools.com/html
Curso CSS: www.w3schools.com/css
Para começar a programar em HTML+CSS, precisamos de:
Um editor de texto ASCII simples. Pode ser o Bloco de Notas, Notepad++, Atom ou outro qualquer.
Um navegador de Internet. Qualquer um serve, preferencialmente o Chrome (ou Firefox).
Uma conta gratuita no Github (para armazenar, editar e ver a página web online)
Exemplo da estrutura básica de um ficheiro HTML (sem CSS)
Ficheiro: ola_mundo.html
Disponível no Github: [Ver] [Executar]
<!DOCTYPE HTML>
<html>
<!-- Esta secção Head serve para fazer declarações iniciais e permite definir o titulo da página -->
<head>
<!-- Para que os caracteres acentuados sejam apresentados corretamente, devemos colocar a seguinte instrução na área de head: -->
<meta charset="UTF-8">
<title> Olá Mundo!</title>
</head>
<!-- Esta secção body é onde escrevemos tudo o que pretendemos que surja na página -->
<body>
<p> Olá Mundo!</p>
</body>
</html>
Caelum (BR)
Alguns dos exemplos foram retirados do curso online da Caelum (BR) disponível em www.caelum.com.br/apostila-html-css-javascript
Para os experimentares deves desencarregar o seguinte ficheiro ZIP (caelum-arquivos-curso-web.zip (9277k)) que se encontra
no final da seguinte página sites.aebenfica.org/apontamentos-tic/programacao/htmlecss
Exemplos práticos
Para perceber como se formata o HTML a partir de um ficheiro CSS externo vamos
criar 3 formatações distintas para o mesmo conteúdo HTML
Clica nos ficheiros de exemplo para visualizar as diferentes formatações da mesma página HTML:
Exemplo sem formatação (não chama nenhum ficheiro CSS): teste123.html. Disponível no Github: [Ver] [Executar]
Exemplo 1 com o ficheiro estilos1.css. exemplo1.html. Disponível no Github: [Ver] [Executar]
Exemplo 2 com o ficheiro estilos2.css. exemplo2.html. Disponível no Github: [Ver] [Executar]
Repositório completo No Github
Executar o código HTML:
lpitta.github.io/HTML-com-CSS-externo/
Exemplo 0: lpitta.github.io/HTML-com-CSS-externo/exemplo0.html
Exemplo 1: lpitta.github.io/HTML-com-CSS-externo/exemplo1.html
Exemplo 2: lpitta.github.io/HTML-com-CSS-externo/exemplo2.html
mfashion: lpitta.github.io/HTML-com-CSS-externo/mfashion.html
Olá Mundo: lpitta.github.io/HTML-com-CSS-externo/ola_mundo.html
Teste 123: lpitta.github.io/HTML-com-CSS-externo/teste123.html
Diz olá: lpitta.github.io/HTML-com-CSS-externo/diz_ola.html
Ver os ficheiros fonte em:
github.com/lpitta/HTML-com-CSS-externo
No DRIVE (Histórico)
As versões mais atuais destes ficheiros de exemplo encontram-se no Github.
Exemplo Mirror Fashion: mfashion.html (retirado dos apontamentos da Caelum)
Este exemplo tem uma imagem disponível na sub-pasta imagens/produtos.
Disponível no Github: [Ver] [Executar]
Testa os teus conhecimentos de HTML
Responde às seguintes 20 questões de escolha múltipla:
www.w3schools.com/quiztest/quiztest.asp?qtest=HTML
No final introduzimos uma pequena função em Javascript que aceita um nome como parâmetro de entrada e envia um alert com o texto "Olá Nome"
Disponível no Github:
Ajuda
Lista de cores HTML: www.w3schools.com/HTML/html_colors.asp
Slider RGB interativo: www.w3schools.com/colors/colors_picker.asp