Aula 01

- Nesta primeira aula, aprenda como a Internet surgiu e evoluiu at o que temos hoje em dia.
Um apanhado geral de todos os inventores e invenes que fizeram parte da evoluo da
maior rede mundial.

Aula 02
- Voc sabe como surgiu a linguagem HTML? Conhece a evoluo desde a HTML1 at HTML5?
Sabe quais so as principais funes W3C? Veja nessa aula a resposta para todas essas
perguntas e muito mais.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 03
- Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.
Aula 04 - Aula 100% prtica de HTML5 com CSS3. Conhea as tags bsicas e saiba como criar
um documento no novo padro.
O DOWNLOAD DO PACOTE feito clicando nos cones ao lado.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 05
- O Curso de HTML5 continua com a construo de um site completo utilizando HTML5 + CSS3
+ JavaScript.
Para o download do PACOTE 1 do Curso basta clicar no anexo ao lado.
Nesta Aula do Curso de HTML5 voc vai aprender:
- Como utilizar o !DOCTYPE para HTML5
- Como definir as reas de HEAD e BODY no HTML5
- Diferena entre as tags H1, H2, H3, H4, H5 e H6 em documentos HTML5
- Como definir as reas DIV, HEADER e HGROUP no HTML5
- Como definir um pargrafo no documento HTML5
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 06
- Curso de HTML5 um projeto do site CursoEmVideo.com e vai criar um site completo
utilizando a tecnologia mais recente do mercado: o HTML5. O professor Gustavo Guanabara
chega na sexta aula e vai explicar um pouco mais sobre ttulos, pargrafos, quebras de linha e
smbolos especiais em HTML5.
Hierarquia de ttulos em HTML5 com HGROUP: entenda que a hierarquia de ttulos no
depende apenas de ordem em um mesmo grupo de ttulos. Tudo uma questo de significado
ou semntica HTML5.
Pargrafos em HTML5 com P: Os pargrafos delimitam textos agrupados em HTML5. Todo
pargrafo deve estar limitado com a tag P e /P.

Quebras de linha usando HTML5 com BR: A quebra de linhas vai desviar a reproduo do texto
no incio da linha abaixo da atual. A tag BR no possui fechamento.
Quebra de palavras em HTML5: Usando a nova tag WBR em HTML5, voc consegue criar
quebra de palavras em seu site. Qualquer palavra muito longa pode ser feita utilizando a tag
WBR.
Hifenizao em HTML5: No caso de criar uma palavra grande, voc pode utilizar a marca SHY
para gerar a separao de slabas com hifenizao. uma das maneiras mais simples de
separar slabas em HTML5.
Caracteres especiais e smbolos em HTML5: Os caracteres especiais permitem criar alguns
smbolos em seu site feito em HTML5, como nbsp lt gt le ge pound yen euro copy reg trade
pernil sum infin times plusmn oplus radic ne delta lambda omega phi larr rarr uarr darr harr
spades clubs hearts diams.

Aula 07
- HTML5 uma tecnologia nova e que rompe com alguns conceitos estabelecidos na verso 4.0
da linguagem. Agora, tudo aquilo que feito em HTML5 tem um carter semntico, enquanto
a parte visual e de formatao ficar por conta das folhas de estilo CSS.
Semntica em HTML5: a partir de agora, as tags HTML5 possuem uma funo semntica, o que
diz para o navegador e mecanismos de busca que cada rea do documento tem um
significado. Nessa aula, vamos compreender algumas tags novas.
Itlico em HTML5: Utilizando a tag I e a tag EM
Tags depreciadas HTML: Antigamente, a tag U era utilizada para sublinhar trechos de texto.
Agora, tudo realizado via CSS, com text-decoration: underline em uma SPAM. As tags S ou
STRIKE foram substitudas pela tag DEL.
Tipos de text-decoration com CSS: Entenda os tipos de decorao para textos em CSS como
undeline, overline, line-through e none.
Herana de caractersticas em CSS3
Formataes de Negrito em HTML5 com CSS3: O parmetro text-weight como normal, bold e
bolder.
Alinhamento de textos em HTML5 com CSS: A formatao com o align no cdigo HTML
tambm foi depreciada. A partir de agora, utilizaremos o text-align do CSS com os valores left,
right, center e justify.
Indentao de pargrafos com HTML5: Utilizando text-indent em CSS voc pode causar
deslocamentos laterais no incio de pargrafos.
Configurao global nas CSS: Utilizando a tag STYLE do HTML5, voc pode criar formataes de
folha de estilo que vo funcionar para todos os objetos em uma pgina.
Tags de formatao em HTML5: Entenda o funcionamento de tags como SUP, SUB, CODE e
PRE.
Na prxima aula, falaremos um pouco mais sobre formatao aprendendo a trabalhar com
cores em HTML5.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 08
- O Curso de HTML5 est de volta com os cdigos de cores utilizando o HTML5 e CSS3.
Algumas tags e parmetros foram descontinuadas do HTML4 para o HTML5, incluindo o FONT
COLOR e o BGCOLOR da tag BODY. A partir de agora, devemos utilizar o parmetro STYLE de
qualquer tag e utilizar as configuraes de background-color e color do CSS.
A utilizao de cores atravs de seus nomes (como red, green, blue, etc) algo bastante
limitado. Por conta disso, vamos aprender nesse vdeo, como utilizar o cdigo para cores RGB.
Para o cdigo de cores #60453E, por exemplo, temos as quantidades de vermelho/red (60),
verde/green (45) e azul/blue (3E). A juno desses cdigos vai gerar uma cor nica, em um
espectro que possui milhes de combinaes. Cada valor representado em base
hexadecimal.
Outra maneira de utilizar cores em CSS utilizando o modificador rgb(), passando as
quantidades de vermelho, verde e azul em valores representados na base decimal.
Em HTML5 e CSS3, utilizando o rgba() nas CSS3, podemos ainda incluir a configurao do canal
alpha, que vai de 0 at 1.
Em HTML5 e CSS3, tambm podemos criar cores utilizando a representao percentual de
Matiz (Hue), saturao (Saturation) e luminosidade (Brightness) utilizando a funo hlsa() das
folhas de estilo.
De maneira similar, temos tambm a funo hlsa() para indicar tambm o canal alpha.
Podemos tambm colocar imagens no fundo do site utilizando o parmetro background e
utilizar a funo url() do CSS para carregar uma imagem.
Gostaramos de pedir sinceras desculpas pela qualidade do udio. Tivemos um problema
durante a gravao, que impossibilitou capturar o udio do microfone profissional. Tal situao
pode causar certo desconforto, mas no impede o aprendizado. Provavelmente, tal falha no
ocorrer novamente. Sorry
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 09
- Como inserir uma imagem em HTML5? Nessa aula, veremos como utilizar a tag IMG para
inserir fotos em um site feito em HTML5.
Qual a diferena entre PNG e JPG? O formato PNG ligeiramente maior, mas possibilitam
transparncias. O formato JPEG mais otimizado, pois suporta compresso sem uma perda
perceptvel na qualidade visual.
Utilizando os parmetros WIDTH ou HEIGHT, voc pode redimensionar uma imagem pelo
HTML. Porm, a melhor maneira de se diminuir o tamanho do arquivo utilizar um editor de
imagens para realizar o redimensionamento.
Outra coisa muito importante utilizar a opo de Exportar para Web do seu editor de
imagem. Isso gera um arquivo menor ainda, mais otimizado para ser utilizado em sites
construdos com HTML5. Durante a aula, ser mostrado como reduzir um arquivo de exemplo
em praticamente 300KB.
Como carregar uma imagem em HTML5 que esteja em uma outra pasta?
Novos parmetros FIGURE e FIGCAPTION. O HTML5 ganhou um carter semntico, e utilizar
legendas de imagens em HTML5 um timo recurso para otimizar seu site para mecanismos
de busca, tcnicas conhecidas como SEO.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 10
- Formatar imagens utilizando folhas de estilo CSS algo muito simples e requer o
conhecimento de alguns parmetros especficos em HTML5 e CSS3. Nessa aula, voc ver
como criar um efeito de transparncia e animao com CSS em uma legenda que vai flutuar
sobre a foto, que tambm ter uma elegante borda simulando um retrato sobre a mesa.
Estilos CSS em arquivos separados
Quando as formataes com folhas de estilo CSS comeam a ficar grandes demais, o ideal
trabalhar com arquivos CSS externos. Para isso, utilizamos a tag LINK com o parmetro REL de
valor STYLESHEET.
Comentrios em CSS
Para comentar pedaos de cdigo em CSS, utilizamos os caracteres /* e logo aps a descrio
do comentrio, colocamos */
Referenciando CLASS e ID
A diferena entre CLASS e ID dentro das CSS na referncia. Para usar o CLASS, utilizamos o
caractere de ponto (.) e para o ID, utilizaremos a cerquilha (#)
Tamanho de objetos em CSS
Utilizando os parmetros WIDTH (largura) e HEIGHT (altura), voc pode modificar o tamanho
de um objeto utilizando CSS.
Posio de objetos em CSS
Utilizando os parmetros TOP (topo) e LEFT (esquerda)
Utilizando o POSITION em CSS Diferena entre RELATIVE e ABSOLUTE
Existem dois tipos de posicionamento para CSS: com o POSITION RELATIVE, ele ter a
localizao feita em relao sua posio atual. Para POSITION ABSOLUTE, ele ter a
localizao feita em relao a todo o contedo.
CSS com BOX-SIZING com o parmetro BORDER-BOX.
Modificando opacidade com CSS utilizando o parmetro OPACITY.
Utilizando o HOVER em um objeto com CSS vai fazer com que uma formatao especfica
TRANSITION com CSS adiciona efeitos de transio ao modificar caractersticas visuais em um
objeto.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 11
- Menus e listas em HTML5.
Nessa aula, vamos aprender como criar um menu em HTML5 utilizando a nova tag NAV.
Alm disso, veremos como criar listas em HTML5 utilizando as tags OL UL e LI.
A tag OL (Ordered lists) vai criar uma lista ordenada. Utilizando os valores do parmetro TYPE,
voc pode criar uma lista ordenada numrica (1), alfabtica (a/A) ou em algarismos romanos
(i/I). O parmetro START da tag OL vai indicar onde vai comear a contagem dos itens. O
parmetro START aceita apenas valores numricos, independente da maneira utilizada para
numerar.
A tag UL (Unordered lists) vai criar uma lista com demarcadores ou lista no-ordenada. O
parmetro TYPE para OL suporta os valores CIRCLE, SQUARE ou DISC. Para a tag UL, o
parmetro START simplesmente no funciona.
Podemos tambm criar hierarquia com listas, utilizando tags OL e UL aninhadas. No vdeo, ns
veremos como criar um menu utilizando uma lista.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 12
- Criando links em sites HTML5.
Vamos entender como realizar ligaes entre sites ou entre pginas dentro de um mesmo site.
Para criar um link em HTML5, basta criar uma ncora utilizando a tag A.
O parmetro Hypertext Reference, ou HREF. Ele cria uma referncia hipertexto para outras
pginas.
O parmetro TARGET da tag A vai permitir indicar em qual janela o contedo ser aberto. O
valor _blank vai permitir abrir em uma janela em branco, enquanto o parmetro _self vai abrir
o contedo na janela atual.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 13
- Veja como criar um menu suspenso utilizando apenas HTML5 e CSS3 nessa aula do professor
Gustavo Guanabara.
A partir do HTML5, a tag NAV utilizada para criar reas de navegao. Com o CSS3, podemos
configurar posicionamento, cores, efeitos de transio e outros comportamentos. Nessa aula,
veremos como transformar uma lista com demarcadores em um menu flutuante para o nosso
site.
Para realizar essas configuraes, aprenderemos alguns parmetros de CSS3, como:
Modificar o formato da lista, eliminando os demarcadores com o LIST-STYLE
Utilizando o TEXT-TRANSFORM com o valor UPPERCASE, alteramos todas as letras de cada
item para maisculas, independente da maneira que foram escritas.
Com a configurao DISPLAY com o valor INLINE-BLOCK, voc vai conseguir alterar a posio
de cada item da lista.
As propriedades BACKGROUND-COLOR e COLOR modificam a cor do objeto.
Com o PADDING, vamos configurar o espao interno de cada objeto, enquanto o MARGIN vai
definir o espao externo de cada um deles.
O POSITION do CSS3, vai configurar qual ser a base de movimentao em relao ao seu
objeto container. Os valores aceitos so ABSOLUTE e RELATIVE.
As propriedades LEFT e TOP vo configurar a posio do objeto em suas grandezas em pixels
para o lado esquerdo e borda superior, respectivamente.
Utilizando a propriedade DISPLAY com o valor NONE, podemos esconder determinados
objetos utilizando CSS3.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 14
- Vamos aprender alguns efeitos bem interessantes utilizando o CSS3.
Utilizando o modificador :HOVER aplica o efeito quando movemos o mouse por cima de um
objeto.
Com o seletor TRANSITION, podemos monitorar alteraes nos objetos e fazer efeitos de
transio.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 15
- Template HTML5 grtis. A construo de interfaces em HTML5 necessita da organizao das
reas do nosso site. Podemos fazer isso em qualquer tag, incluindo DIV, HEADER, ARTICLE,
FOOTER e muitas outras.
O modificador WIDTH vai configurar a largura de um objeto. O posicionamento em CSS pode
ser ABSOLUTE ou RELATIVE.
A centralizao de um objeto em CSS3 utilizando o parmetro MARGIN.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 16
- Nessa aula, veremos como criar cabealhos para sites HTML5 utilizando CSS3 e alguns
parmetros adicionais para realizar uma formatao.
- Os modificadores BORDER-TOP, BORDER-BOTTOM, BORDER-LEFT e BORDER-RIGHT configura
linhas em volta do objeto e aceita valores como SOLID, DOTTED, DASHED, etc.
Para carregar imagens via CSS, podemos utilizar o modificador BACKGROUND usando a funo
URL para carregar o arquivo no fundo dos objetos. Utilizando o parmetro NO-REPEAT para
que ele no repita o objeto.
Para a configurao de texto, utilizaremos FONT-FAMILY, FONT-SIZE, COLOR e TEXT-SHADOW.
Alm disso, configuramos os espaos internos e perifricos dos objetos com os parmetros
MARGIN e PADDING e suas variaes MARGIN-BOTTOM e MARGIN-TOP.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 17
Como mudar a fonte de um site usando CSS3 e um arquivo True Type Font (TTF) com fontes
personalizadas em CSS3.
Utilizando o modificador @FONT-FACE das CSS3, com o FONT-FAMILY e o SRC, poderemos
criar fontes personalizadas utilizando CSS3.
O usurio que visita o seu site no precisa ter a fonte instalada. Ela instalada
automaticamente.
Como usar Google Fonts para inserir uma fonte personalizada do seu site utilizando o
@IMPORT.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.

Aula 18
Como usar as tags SECTION, ASIDE e FOOTER. O HTML5 possui algumas tags que do
significado ao contedo da pgina.
SECTION: Cria uma sesso que vai poder conter vrios artigos (ARTICLE) ou objetos.
ASIDE: So contedos perifricos, que esto diretamente relacionados ao contedo do artigo
principal.
FOOTER: o rodap da pgina ou do contedo especfico.
Para configurar essas tags e utilizar o posicionamento correto, utilizaremos o CSS3 com os
modificadores DISPLAY: BLOCK e o FLOAT para gerar uma flutuao.

Caso seja necessrio interromper a flutuao, utilizaremos o modificador CSS CLEAR:BOTH

para elimin-la.

Aula 19
Como criar tabelas em HTML5? Veremos nessa aula, como utilizar as tags TABLE, CAPTION, TR,
TD e muitas outras usadas para criar tabelas em sites HTML.
Cada linha da tabela em HTML ser uma Table Row, ou TR.
Cada clula de dados ser uma Table Data, ou TD.
Observao: A partir do HTML5, os fechamentos das tags /TR e /TD so opcionais e podem ser
omitidas.
Utilizando CSS3, podemos utilizar alguns modificadores para formatar a tabela, usando
BORDER para criar bordas slidas para TABLE, TR e TD.
O modificador BORDER-SPACING das CSS modifica o espao entre as clulas de uma tabela.
No HTML, podemos realizar ROWSPAN, que vai criar uma expanso de linha nas clulas.
De maneira similar, utilizando COLSPAN, teremos uma expanso de coluna nas clulas de uma
tabela HTML5.
Aula do Curso de HTML5 criado pelo professor Gustavo Guanabara para o portal
CursoemVideo.com.