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

Cadastro no Portal Alfamídia Online

Este é um curso disponível para assinantes Alfamídia, mas oferecido gratuitamente por 24 horas para você poder experimentar. Basta cadastrar seu e-mail para ter acesso ao curso. Pagando uma mensalidade, no valor de R$ 45,00, você também terá acesso aos mais de 300 cursos pagos, sem compromisso de tempo mínimo.

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 do Curso
Arquivo Exemplo 1
Aula 1 - Construção do HTML do Texto Principal
Aula 1 - Construção do CSS do Texto Principal
Aula 1 - Definição das Fontes
Arquivo Exemplo 2
Aula 1 - Posicionamento da Imagem Principal
Aula 1 - CSS da Imagem Principal
Arquivo Exemplo 3
Aula 1 - Criação do Rodapé
Aula 1 - Criação do Menu
Aula 1 - Criação do Menu - 2
Aula 1 - Formulário do Template
Arquivo Exemplo 4
Aula 1 - Responsividade
Aula 1 - Desafios
Arquivo Exemplo 5
Arquivo Exemplo Completo

Estudo de HTML - Site Responsivo de Cursos

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

Estudo de HTML 3 - 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

templates e frameworks - bootstrap, font-awesome
arquivo do exemplo com font-awesome
templates e frameworks - ícones do font-awesome
templates e frameworks - layout do menu
Exemplo Template Kelvin
templates e frameworks - grid do bootstrap
Arquivo mostrando grids do bootstrap
templates e frameworks - grid em diferentes tamanhos
templates e frameworks - container e container-fluid
Arquivo do Template Knight
templates e frameworks - 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