Exercícios com HTML e CSS

  1. Abra um editor de texto (por exemplo o notepad), um IDE (por exemplo Visual Studio Code) ou um editor online (por exemplo o CodePen) e coloque lá o código HTML colocado aqui. Caso não esteja no editor online grave como exercicio1.html e abra o ficheiro num browser à sua escolha.
    1. Veja atentamente o código e verifique o que faz cada uma das tags, vendo o que o browser mostra em cada caso.
    2. Adicione no final uma nova hiperligação que permita aceder à secção "Texto".
    3. Adicione uma nova secção com o título "Ligações Interessantes" que contenha uma lista com 3 items:
      • Google (com uma ligação para http://www.google.pt/)
      • Elementos HTML (com uma ligação para http://www.w3.org/TR/html-markup/)
      • MIM (com uma ligação para o site do mestrado)
    4. Experimente retirar a linha <meta charset="utf-8">. O que é que acontece?
       
  2. Crie um novo ficheiro denominado exercicio2.html ou use o editor online e tente criar uma nova página cujo aspecto seja o seguinte:

     
  3. Tente fazer a seguinte tabela em HTML:

     
  4. Tente mostrar o seguinte em HTML (use esta imagem e este morcego):

     
  5. Crie um novo ficheiro chamado exercicio5.html contendo o seguinte código HTML e no mesmo directório um crie um outro ficheiro chamado exercicio5.css com o seguinte conteúdo CSS. Em alternativa coloque o contéudo no editor online no separador correspondente. Abra o ficheiro exercicio5.html num browser ou visualize o resultado no editor.
    1. Veja atentamente o código e verifique o que faz cada uma das tags e dos elementos CSS, vendo o que o browser mostra em cada caso.
    2. Mude a cor do primeiro parágrafo para branco sobre fundo vermelho.
    3. Mova o segundo parágrafo para que este fique um pouco afastado do lado esquerdo da página (afaste da margem).
    4. Como poderia colocar apenas a palavra "rato" a vermelho no segundo parágrafo sem mudar a côr das outras palavras? (sugestão: use a tag span)
       
  6. Voltando ao exercicio 3, e usando CSS, coloque os títulos da tabela em branco com fundo preto, as linhas ímpares com fundo cinzento claro, as linhas pares com fundo cinzento escuro e todas as células com o texto alinhado ao centro.

     
  7. Vá a esta página e descarregue o template apresentado. Depois, altere o ficheiro index.html e style.css (dentro da pasta css) a seu gosto de modo a tornar a página personalizada (por exemplo tornar a sua página pessoal com o seu CV ou uma página de um evento, aplicação, etc.)