HTML e CSS

Afluentes: Desenvolvimento Front-end I, Usabilidade, desenvolvimento web, mobile e jogos, Programação Web

Conteúdo

Os conteúdos de HTML e CSS iremos trabalhar no w3schools. Nesse ambiente podemos aprender, entender, testar os códigos, modificá-los e fazer exercícios propostos no ambiente.

• HTML
• CSS
• HTML Tutorial (dofactory.com)

Para facilitar o trabalho com HTML5/CSS utilizando VSCode, existe uma extensão que basicamente cria no seu navegador um Servidor com atualização automatica para visualização do projeto direto no navegador. Instalação: abrir o VSCode, ir na aba de "extensões" baixar a extensão LIVESERVER e instalar. Execução: criar um arquivo index.html e no código clique com botão direito e execute a opção "Open With Live Server". Automaticamente o site que está sendo feito abrirá no navegador. Enquanto você for trabalhando no código para ver alguma alteração na pagina basta fazer alguma alteração no código basta Salvar o arquivo ou utilizar o atalho CTRL + S).

Atividades

Na última aula vimos a base para a construção de uma página web usando HTML (HyperText Marckup Language) e CSS (Cascading Style Sheets). O HTML a base do documento hipertexto para a Web e o CSS são configurações que dão estilo aos documentos HTML. Os documentos CSS são anexados, ou incluidos, no documento HTML.

Referente aos conteúdos apresentados, vocês deverão fazer as seguintes tarefas de aprendizagem:

Tarefa 1

Faça uma página web em HTML, e alguns estilos, de apresentação de aluno. Algo como um breve currículo seu, foto, disciplinas que já completou, preferências, hobbies, no que trabalhou ou trabalha, etc. Pode colocar fotografias ou outras imagens para ilustrar. Tente deixar o mais bonita possível.

Exemplo

Tarefa 2

Essa atividade deve ser feita de forma sequencial:

1. Construa uma página WEB básica em HTML simples com a frase "Hello World!" como título da página.
2. Crie um documento CSS para alterar a cor de fundo para preto e a cor do texto amarelo.
3. Agora altere o título e adicione um texto para o conteúdo. O texto deve ter cor branca.
   1. Imagine que é um título e texto informando sobre algum tipo de cadastro, ou prova online ou algo assim.
4. Crie um formulário contendo entrada de texto, checkbox, selects, botões e outras coisas mais.
   1. Cada entrada de dados deve ter um label (texto) informando o que é o campo. Por ex.: Nome: [______].
5. Adicione uma imagem na página e coloque um link nela para uma página externa. O link deve abrir a página em uma nova aba.
6. Adicione uma tabela com informações. Essas informações podem ser dados para auxiliar os clientes a preencherem o formulário.
7. Agora vem a parte divertida. Brique com o CSS mudando o estilo dos textos, dos campos de entrada, dos botões, da imagem, etc. Tente deixar a página da forma mais bonita possível.

Tarefa 3 (em grupo)

• Crie um site web de uma empresa fictícia.
• Use um imagem do logotipo e outras imagens que achar conveniente (produtos, ilustrativas de serviços, etc.).
• O site deve ter múltiplas páginas, separada por tópicos.
• Crie uma página no site com um formulário para envio de informações ou perguntas ou algo assim.

Tarefa 4 (opcional e individual para fazer em casa)

• Instalar um servidor web no seu computador em casa (ex. Apache)
• Testar no servidor Web instalado em casa os exercícios feitos em sala.