Introdução à Programação HTML e CSS Parte 1

Um site bem concebido fornece aos clientes informações sobre uma empresa, detalhes sobre como a encontrar ou contactar, bem como a possibilidade de fazer compras e encomendas. Empresas de todas as dimensões podem usar sites para gerar tráfego e chegar a mais clientes do que nunca.

A base de muitas páginas Web — cuja coleção forma um site — são as linguagens de programação HTML e CSS. Aprender a utilizar estas linguagens, usadas para criar e formatar o conteúdo de uma página Web, é um passo importante para criar as suas próprias páginas Web bem concebidas.

Temas do curso:

Lição 1: Primeiros passos com HTML

TEMA A: Noções básicas de HTML

• HTML — informações gerais
• Anatomia de uma etiqueta HTML
• Primeiros passos
• Atividade 1-1: Analisar uma página Web

TEMA B: Elementos básicos de páginas Web

• A etiqueta de título
• Etiquetas de parágrafo e quebra de linha
• Etiquetas básicas de formatação de texto
• Atividade 1-2: Utilizar HTML para adicionar elementos básicos

TEMA C: Criar listas

• Listas ordenadas
• Listas não ordenadas
• Itens de lista
• Atividade 1-3: Criar uma lista HTML
• Resumo
• Perguntas de revisão

Lição 2: Fazer mais com HTML

TEMA A: Imagens em HTML

• A etiqueta de imagem
• Definir a origem de uma imagem
• Definir texto alternativo para a imagem
• Dimensionar imagens
• Atividade 2-1: Adicionar uma imagem em HTML

TEMA B: Ligações em HTML

• Criar uma ligação para outra página Web
• Ligações internas
• Atividade 2-2: Adicionar uma ligação

TEMA C: Tabelas em HTML

• Estrutura de uma tabela em HTML
• Linha de cabeçalho da tabela
• Linhas de dados da tabela
• Atividade 2-3: Criar uma tabela HTML
• Resumo
• Perguntas de revisão

Lição 3: Primeiros passos com CSS 

TEMA A: Noções básicas de CSS 

• CSS: folhas de estilo em cascata 

• A etiqueta <style> 

• Tipografia e hierarquia em CSS 

• Atividade 3-1: Criar uma área de estilos com a etiqueta <style> 

TEMA B: Cores em CSS 

• Alterar a cor de um elemento de uma página Web 

• Nomes de cores em CSS 

• Sistema de cores RGB 

• Sistema de cores hexadecimal 

• Cor de fundo 

• Atividade 3-2: Adicionar cores CSS de várias formas 

TEMA C: Utilizar identificadores CSS adicionais 

• Utilizar nomes de ID em CSS 

• Utilizar nomes de classes em CSS 

• Atividade 3-3: Utilizar um nome de ID para aplicar estilos 

• Resumo 

• Perguntas de revisão 

Lição 4: Formatar texto com CSS 

TEMA A: Famílias de tipos de letra 

• O que é um tipo de letra? 

• Utilizar a propriedade font-family 

• Com serifa ou sem serifa 

• Nomes de tipos de letra 

• Tipos de letra adicionais 

• Tipos de letra alternativos 

• Atividade 4-1: Alterar a família de tipos de letra em CSS 

TEMA B: Tamanho do tipo de letra 

• A propriedade font-size 

• Píxeis 

• EMs 

• Atividade 4-2: Alterar o tamanho do tipo de letra do texto 

TEMA C: Mais propriedades CSS para texto 

• A propriedade font-style 

• A propriedade font-weight 

• A propriedade line-height 

• A propriedade text-align 

• Atividade 4-3: Personalizar texto com propriedades adicionais 

TEMA D: Notação abreviada para tipos de letra 

• Notação abreviada em CSS 

• Notação abreviada em CSS para tipos de letra 

• Atividade 4-3: Utilizar na prática a notação abreviada para tipos de letra em CSS 

• Resumo 

• Perguntas de revisão 

Lição 5: Técnicas avançadas de formatação com HTML e CSS 

TEMA A: Agrupar elementos 

• O que é um elemento de agrupamento? 

• Formatação em linha ou em bloco 

• Atividade 5-1: Utilizar as etiquetas <span> e <div> para agrupar elementos de uma página Web 

TEMA B: Dimensões de div 

• Ajustar a largura de uma div 

• Ajustar a altura de uma div 

• Transbordamento 

• Atividade 5-2: Ajustar o estilo de um bloco div 

TEMA C: O modelo de caixa CSS 

• O modelo de caixa CSS 

• Margens CSS 

• Bordas CSS 

• Preenchimento CSS 

• Atividade 5-3: Ajustar o estilo de um bloco div 

• Resumo 

• Perguntas de revisão