HTML: A minha primeira página HTML com CSS externo (+ Cores em HTML)

Deves elaborar os seguintes cursos:

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