Criação de Sites com HTML

Este curso é organizado em conteúdos sobre HTML 5 e CSS, mostrando os recursos das duas linguagens através de exemplos práticos, e aulas práticas em que são estudados diversos sites e templates gratuitos.

Nível: introdutório
Lições: 175
Área: Web Design

Você pode contratar este curso de forma avulsa

Consulte o valor ou faça a contratação online:

Disciplinas e Conteúdo do Curso

Introdução a Linguagens Web – HTML 5 e CSS 1

Uma breve história do HTML
Nossa primeira página html
Comentários em html
Criando links em html
Alguns comandos de formatação de parágrafos
Agora propomos nosso primeiro desafio, para fixar os conteúdos já vistos e trabalhar algumas novas tags.
Referências do Exercício
Criando uma página html - Solução do desafio
Utilizando imagens no HTML 5
Elementos de agrupamento, incluindo listas ordenadas e não ordenadas
Uso de Iframe no html 5
Introdução a tabelas
Introdução a tabelas - colspan e rowspan
Introdução ao CSS
Especificando CSS diretamente na página HTML
Inspecionando elementos no Chrome
Seletores - Parte 1
Seletores - Parte 2
Representação de cor em CSS
Fontes em CSS - Os 5 tipos genéricos
Fontes em CSS - Selecionando uma fonte
Fontes em CSS - font-style, font-variant, font-weright, font-size
Cor e imagem no fundo em CSS
Atributos de texto
Layout de links em CSS
Mensagem de final de curso

Introdução a Linguagens Web – HTML 5 e CSS 2

Introdução a formulários em HTML
Introdução a formulários em HTML - Parte 2
Introdução a formulários em HTML - Parte 3
Introdução a Formulários em HTML - parte 4
Posicionamento em CSS - margin e padding
Posicionamento em CSS - Largura e centralização de elementos
Posicionamento em CSS - Atributo float
Posicionamento em CSS - Atributo display
Estudo de um formulário com layout CSS
Estudo de um formulário com layout CSS - Continuação
Arquivo do Exemplo de Formulário com CSS
Posicionamento em CSS - Atributo position - Parte I
Posicionamento em CSS - Atributo position - Parte II
Posicionamento em CSS - Atributo position - Parte III
Desafio - Página com layout simples e duas colunas
Desafio HTML
Solução desafio

Estudo de HTML - Site de Yoga

Apresentação
Construção do HTML do Texto Principal
Arquivo Exemplo 1
Construção do CSS do Texto Principal
Definição das Fontes
Posicionamento da Imagem Principal
Arquivo Exemplo 2
CSS da Imagem Principal
Criação do Rodapé
Arquivo Exemplo 3
Menu 1
Menu 2
Formulários
Arquivo Exemplo 4
Dispositivos móveis
Desafios
Arquivo Exemplo 5
Arquivo Exemplo Completo

Estudo de HTML - Site Responsivo de Cursos

Apresentação
Estrutura do Site
Topo do Site
Código do topo do site
Posicionando o menu
Código do posicionamento do menu
Configurando as tags
Código da configuração das tags
Inserindo imagens
Código da inserção de imagens
Configurando o elemento footer
Código da configuração do elemento footer
Configurando o layout para dispositivos móveis
Código da configuração do layout para dispositivos móveis
Transições
Código das transições
Desafio
Código do desafio

Estudo de HTML - Site de Viagens

Aula 1
Site de Viagens - Apresentação
Site de Viagens - Topo do Site
Aula 3
Site de Viagens - Código HTML das imagens
Aula 4
Site de Viagens - Código CSS das imagens
Aula 5
Site de Viagens - Ajustando as imagens
Aula 6
Site de Viagens - Rodapé
Aula 7
Site de Viagens - Layout para telas com no máximo 800 pixels

Estudo de HTML - Site com Bootstrap

bootstrap, font-awesome
arquivo do exemplo com font-awesome
ícones do font-awesome
layout do menu
Exemplo Template Kelvin
grid do bootstrap
Arquivo mostrando grids do bootstrap
grid em diferentes tamanhos
container e container-fluid
Arquivo do Template Knight
aprendendo a utilizar

HTML 5 e CSS 3

O que sera visto no extensivo HTML5 e CSS3
Os principais elementos estruturais
border-radius e a relação entre imagem e padding
Atributo position
Menu Dropdown com dois niveis
Incluindo textos e títulos
Estilizando links e botões
Inserindo font
Continuando a inserção de font
Finalizando a inserção de font
assets e reset
Icones e desafio
Icones e resolução
Flex
Containers
Gradients
Background gradients
Desafio, alinhamento e menu
Resolução do desafio
Fieldset form
Input text
input email

Web Design Responsivo – CSS 3 Flexible Box

CSS3 Flexible Box
Fazendo a estrutura do site
Configurando a div tudo
Configurando as div's cont1, cont2 e cont3
Incluindo conteúdo dentro da div cont3
Incluindo conteúdo dentro das div’s cont2 e cont1
Configurando o css do menu