HTML: A minha primeira página HTML com CSS externo

Publicado a 27/02/2015, 06:42 por Luis Pitta -org-   [ atualizado a 31/03/2019, 15:52 ]


Deves elaborar os seguintes cursos:

Precisamos de ter, somente um:
  • Editor de texto ASCII simples. Pode ser o Bloco de Notas, Notepad++, Atom ou outro qualquer.
  • 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): 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/

    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:


    No DRIVE (Histórico)

    As versões mais atuais destes ficheiros de exemplo encontram-se no Github.

    HTML + CSS




    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:




    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 GithubHTML [Ver] [Executar

    Javascript: [Ver]



    Ajuda