Curso de HTML 5 COMPLETO e com Projetos Práticos para WEB

Estamos iniciando uma nova seção, onde iremos falar sobre os atributos globais. Nessa aula iremos aprender o que são esses atributos e por que eles são importantes.

Nessa aula iremos aprender sobre o atributo global accesskey e entender como ele pode nos ajudar com teclas de atalho.

Nessa aula iremos aprender sobre um dos atributos globais mais conhecidos de todos, o atributo class.

Nessa aula iremos conhecer o atributo global contenteditable e aprender a editar o conteúdo de nossos elementos, mesmo que eles não sejam tags de formulário.

Nessa aula iremos conhecer o atributo data- e entender como ele pode nos ajudar a armazenar dados dentro de uma tag.

Nessa aula iremos conhecer o atributo global dir e aprender a mudar a direção de leitura em nossos sites.

Nessa aula iremos conhecer o atributo global draggable e aprender a arrastar elementos em nossa página.

Nessa aula iremos conhecer o atributo dropzone e entender como ele está associado com o atributo draggable.

Nessa aula iremos conhecer o atributo hidden e aprender a ocultar elementos em nossa página.

Um dos primeiros atributos que aprendemos quando estudamos HTML é o atributo id. Iremos falar sobre ele nessa aula.

Nessa aula iremos conhecer o atributo lang e entender como ele nos ajuda a definir o idioma de nossa página ou de um trecho HTML.

Nessa aula iremos conhecer o atributo spellcheck e entender como ele nos ajuda com a correção ortográfica do HTML de nossa página.

Nessa aula iremos falar sobre outro atributo muito usado, o atributo style. Iremos entender como ele nos ajuda a estilizar nossos elementos HTML.

Nessa aula iremos falar sobre o atributo global tabindex e aprender a realizar tabulação em nosso código HTML.

Nessa aula iremos falar sobre o atributo title e aprender a definir títulos ou descrições em nossas tags.

Nessa aula iremos conhecer o atributo translate e entender como ele está relacionado com a tradução de nossas páginas.

Veja nesta aula onde você pode baixar o código desenvolvido nesta seção

Veremos nesta aula sobre a tag principal e inicial do arquivo HTML.

O que é a tag Doctype? É o que veremos nessa aula.

Por que usar os comentários? Como eles podem nos ajudar? Será explicado nesta aula.

Veremos outra tag principal do arquivo HTML, o body.

Nessa aula veremos sobre outra tag importante do HTML, a tag head. O que será que ela faz?

Veremos uma das filhas do head, a title. Uma tag muito importante também.

O que a tag meta pode fazer? Vamos descobrir.

Nessa aula entenderemos o que a tag p faz.

Nesta aula veremos uma tag muito utilizada, a tag h1.

Veremos a tag h2, o segundo título da nossa página.

Nessa aula veremos sobre o terceiro título, a tag h3.

Continuando sobre títulos, veremos o quarto título, a tag h4.

Será que nossa página terá que ter um quinto título? Pode ser que sim. É isso que veremos nessa aula, a tag h5.

Veremos sobre a tag h6. Será necessário para nossa página? Vamos descobrir.

Nesta aula veremos sobre a tag style, que pode nos ajudar definir o estilo do arquivo HTML.

Aprenderemos em como podemos usar a tag script.

A tag div, uma das mais conhecidas e utilizadas. Como usá-la? Veremos isso nessa aula.

A tag span também é bem conhecida. Mas em que momento eu posso usar essa tag? É o que veremos.

Nessa aula aprenderemos a como usar a tag link.

O que é a tag noscript? Vamos descobrir.

O que é a tag embed? Veremos isso nesta aula.

Nessa aula aprenderemos sobre a tag object.

Tag param. Como utilizar essa tag? É isso que iremos ver nesta aula.

Como a tag base pode nos ajudar? Aprenderemos nessa aula.

O que é e como usar a tag iframe? Veremos isso nessa aula.

A tag a pode ser de grande ajuda na nossa página. Mas como? Vamos descobrir.

Nesta aula falaremos sobre a tag img e como ela nos ajuda.

Continuando sobre imagens, falaremos sobre a tag figure.

O que a tag figcaption faz? Vamos descobrir nessa aula.

Veremos sobre a tag audio e como podemos usá-la.

Veremos nesta aula sobre a tag video e como podemos usá-la.

Como a tag source pode nos ajudar? É o que veremos.

Aprenderemos sobre a tag picture e como ela pode nos ajudar.

O que é a tag track? Vamos descobrir nessa aula.

Como podemos utilizar a tag table? É o que veremos.

Aprenderemos nesta aula sobre a tag tr.

Veremos nesta aula sobre a tag td.

O que é a tag thead? Vamos descobrir.

Aprenderemos sobre o corpo da nossa tabela, a tag tbody.

Veremos nesta aula sobre o rodapé da nosso tabela, a tag tfoot.

O que a tag th faz? Veremos isso nessa aula.

Como a tag template pode nos ajudar? Veja isso nesta aula.

Veremos o que a tag colgroup faz em uma tabela.

Nesta aula aprenderemos sobre a coluna da nossa tabela, a tag col.

Nessa aula falaremos sobre a tag caption. O que ela faz nas colunas?.

Falaremos sobre a tag header, o cabeçalho da nossa página.

Nesta aula aprenderemos qual é a importância da tag main na nossa página.

Pra que serve a tag footer? Veremos isso nesta aula.

Quando teremos que usar a tag article? Vamos descobrir nesta aula.

Aprenderemos sobre a tag section nesta aula.

Como podemos usar a tag aside? Vamos descobrir nesta aula.

Como podemos usar a tag nav? É o que veremos nessa aula.

Como podemos usar a tag address? Vamos descobrir nesta aula.

Veremos nessa aula sobre a tag details.

Em continuação da aula anterior, como podemos usar a tag summary? Veja nessa aula.

No que a tag ul pode nos ajudar? Vejamos nesta aula.

Em continuação da aula anterior, como a tag ol nos ajuda? Veremos isso nessa aula.

A tag li pode nos ajudar de que maneira? Vamos descobrir.

Nessa aula veremos como usar a tag map.

A tag area é um complemento da tag map. Mas como podemos usá-la?.

Como podemos usar a tag abbr? Vejamos nesta aula.

O que a tag b faz? Veremos isso nessa aula.

Por que é necessário usar a tag bdi? Vamos descobrir.

Quando teremos que usar a tag bdo em nossos documentos? Aprenderemos isso nessa aula.

Como usar a tag blockquote? Veremos isso nesta aula.

Nesta aula aprenderemos sobre a tag q.

Nesta aula veremos sobre a tag br e como ela pode nos ajudar.

A tag wbr tem uma semelhança com a tag br, mas possui uma diferença. Vamos descobrir que diferença é essa.

Por que usar a tag cite? Veja isso nesta aula.

O que é a tag data e como pode nos ajudar? Veja nesta aula.

Quando usar a tag del? Aprenderemos isso nessa aula.

Veja nessa aula sobre a tag ins e como usá-la.

Aprenderemos nessa aula sobre a tag dfn.

Por que utilizar a tag em? Nessa aula veremos isso.

A tag hr é bem conhecida. Mas como usá-la? Vamos descobrir.

Veremos nesta aula sobre a tag i.

Por que usar a tag kbd? Aprenderemos isso nesta aula.

Nesta aula falaremos sobre a tag mark. O que essa tag faz? Vamos descobrir.

Falaremos nesta aula sobre a tag ruby.

Veremos sobre a tag rp e como podemos usá-la.

Relacionado com a tag ruby, falaremos sobre a tag rt.

Veremos nesta aula sobre a tag s.

Como usar a tag small? Veja nesta aula.

A tag strong é bem conhecida. Mas como pode nos ajudar?

Como utilizar a tag sub? Veja nessa aula.

Nesta aula aprenderemos sobre a tag sup.

O que é a tag time? Veremos isso nessa aula.

Por que usar a tag u? Vamos descobrir.

Como utilizar a tag pre? Vejamos nessa aula.

Como utilizar a tag samp? Veremos isso nessa aula.

Veremos nesta aula sobre a tag var e como podemos usá-la.

Vejamos como utilizar a tag code.

Por que precisamos usar a tag dl no nosso documento HTML? Veremos isso nesta aula.

Nesta aula veremos sobre a tag dt e como podemos usá-la.

Quando utilizar a tag dd? Veremos isso nesta aula.

A tag form é bem útil. Mas quando usá-la?

A tag input ganhou muitas atualizações. Mas como podemos utilizá-la?

Como a tag button pode nos ajudar? Vamos descobrir.

Continuando sobre formulário, falaremos sobre a tag fieldset.

Como a tag legend pode nos ajudar? Veja nesta aula.

Quando utilizar a tag select? Veremos isso nesta aula.

Nesta aula falaremos sobre a tag option.

Quando utilizar a tag optgroup? Descobriremos nessa aula.

O que é a tag datalist? Vamos descobrir.

A tag textarea é bem utilizada em nosso formulários. Mas como podemos usá-la?

Vejamos o que é a tag dialog.

Como utilizar a tag output? Veremos nesta aula.

Quando utilizar a tag meter? Veremos isso nessa aula.

Vejamos como utilizar a tag progress nesta aula.

Como utilizar a tag canvas? Vamos descobrir.

Nesta aula falaremos sobre a tag svg e como utilizá-la.

Quando utilizar a tag hgroup? Veja nesta aula.

A tag marquee é bem conhecida. Mas como podemos usá-la?

Nesta seção vamos falar sobre os eventos no HTML5. Já imaginou aprender sobre todos eles? Então aperte o play e não vamos perder tempo!

Agora vamos ver sobre os eventos de impressão, já ouviu falar deles? Aperte o play e confira!

Você já ouviu falar do evento beforeunload? Sabe qual a função dele? Vamos conferir juntos nessa aula!

Que tal tentarmos causar um erro e ver se ele vai acontecer? Ficou curioso? Vamos pro código!

Nesta aula vamos falar sobre o evento hashchange e vamos aprender o que ele pode fazer! Aperte o play e vamos pro código!

Você já ouviu falar do evento load? Sabe qual a função dele? Vamos conferir juntos nessa aula!

Agora vamos aprender sobre os eventos online e offline. Bora pro vídeo!

Nesta aula vamos falar sobre o evento pageshow e vamos aprender o que ele pode fazer! Aperte o play e vamos pro código!

Você já ouviu falar do evento resize? Sabe qual a função dele? Vamos conferir juntos nessa aula!

Você sabe qual a função do evento unload? Que tal aprendermos qual a função desse evento? Aperte o play e vamos lá!

Nesta aula vamos falar sobre o evento blur e vamos aprender o que ele pode fazer! Aperte o play e vamos pro código!

Você já ouviu falar do evento change? Sabe qual a função dele? Vamos conferir juntos nessa aula!

Você sabe qual a função do evento contextmenu? Que tal aprendermos qual a função desse evento? Aperte o play e vamos lá!

Nesta aula vamos falar sobre o evento focus e vamos aprender o que ele pode fazer! Aperte o play e vamos pro código!

Você já ouviu falar do evento input? Sabe qual a função dele? Vamos conferir juntos nessa aula!

Nesta aula vamos aprender sobre o evento invalid, que pode acontecer nos campos do nosso formulário. Bora pro código!

Nesta aula vamos falar sobre o evento reset e vamos aprender o que ele pode fazer! Aperte o play e vamos pro código!

Sabe o que o evento search pode fazer? Vamos conferir isso nesta aula!

Agora vamos ver o evento select acontecendo nos formulários, bora pro vídeo!

Você sabe qual a função do evento submit? Que tal aprendermos qual a função desse evento? Aperte o play e vamos lá!

Nessa aula, vamos conferir qual a função do evento keydown. Ficou curioso? Aperte o play e não perca essa aula!

Sabe o que o evento keypress pode fazer? Vamos conferir isso nesta aula!

Você sabe o que o evento keyup pode fazer? Vamos conferir isso nesta aula!

Nessa aula, vamos conferir qual a função do evento click. Ficou curioso? Aperte o play e não perca essa aula!

Você já ouviu falar do evento dbclick? Sabe qual a função dele? Vamos conferir juntos nessa aula!

Você sabe qual a função do evento mousedown? Que tal aprendermos qual a função desse evento? Aperte o play e vamos lá!

Nesta aula vamos falar sobre o evento mousemove e vamos aprender o que ele pode fazer! Aperte o play e vamos pro código!

Falando sobre os eventos de mouse, vamos conferir qual a função do mouseout? Aperte o play e confira!

Ainda sobre os eventos de mouse, vamos conferir qual a função do mouseover? Aperte o play e confira!

Por fim, nos eventos de mouse, vamos conferir qual a função do mouseup? Aperte o play e confira!

Você sabe qual a função do evento wheel? Que tal aprendermos qual a função desse evento? Aperte o play e vamos lá!

Nesta aula vamos falar sobre o evento mouseenter e vamos aprender o que ele pode fazer! Aperte o play e vamos pro código!

Agora vamos ver o evento mouseleave e o que ele faz, bora pro vídeo!

Sabe o que o evento drag pode fazer? Vamos conferir isso nesta aula!

Nessa aula, vamos conferir qual a função do evento dragend. Ficou curioso? Aperte o play e não perca essa aula!

O que é o dragenter e como funciona? Veja nesta aula.

Em continuação da aula anterior, aprenderemos nesta aula sobre o dragleave.

Aprenderemos nessa aula sobre o dragover.

Como o dragstart funciona? Veremos isso nesta aula.

Terminando o ciclo dos eventos arrastáveis, aprenderemos sobre o drop.

Um evento conhecido, mas como ele nos ajuda? Descubra nesta aula.

Quando o evento copy funciona? Nesta aula aprenderemos sobre isso.

Semelhante ao evento da aula anterior, aprenderemos sobre o cut.

O que o evento paste e como funciona? Aprenda nessa aula.

Iremos aprender sobre vários eventos depois dessa aula, mas antes vamos preparar nosso servidor no nosso computador para escutarmos os próximos eventos.

Vamos descobrir sobre o evento abort e como ele pode nos ajudar.

O que é o evento canplay e quando ele acontece? Aprenda nesta aula.

Nesta aula iremos aprender sobre o evento canplaythrough e vamos descobrir a diferença desse evento com o evento da aula passada.

Descubra nessa aula sobre o evento cuechange e como podemos utiliza-lá.

O evento durationchange é parecido com o evento da aula passada, mas iremos descobrir qual é a diferença que ocorre no durationchange.

Quando esse evento ocorre? Veja nesta aula.

Continuando sobre mídia, o que  evento ended faz? Descubra nesta aula.

Veremos nessa aula sobre o evento error.

O que o loadeddata faz com as mídias? Nessa aula aprenderemos sobre isso.

Descubra nessa aula sobre o loadedmetadata.

Ainda falando sobre mídia, veremos nessa aula sobre o loadstart e o que esse evento faz.

Um evento que usamos no dia a dia, falaremos sobre o pause.

Um evento bem conhecido, o evento play.

Em relação com a aula anterior, veremos sobre o evento playing.

Sobre mídia, o que o progress faz? Descubra isso nesta aula.

O que é o ratechange? Veja isso nessa aula.

O que  evento seeked faz? Descubra isso nessa aula.

Parecido com o evento da aula anterior, falaremos sobre o evento seeking.

Ainda sobre mídia, o que o stalled faz? Veremos isso nessa aula.

Aprenderemos nessa aula sobre o evento suspend.

Nessa aula falaremos sobre o timeupdate e como ele funciona.

Falaremos sobre o evento volumechange.

Quando o evento waiting acontece? Descubra nessa aula.

Como podemos usar o evento toggle? Veja nessa aula.

Os Assets são recursos estáticos que utilizamos em nossos projetos, podem envolver imagens, arquivos de estilos, fontes e muito mais, nesta aula entendemos como trabalhar com imagens no HTML e organizar os nossos recursos corretamente.

Hiperlinks tornam a aplicação Web interativa, nesta aula aprenderemos como criar hiperlinks e algumas informações importantes no uso deste recurso.

Formulários permitem que usuários interajam com a aplicação, em HTML podemos criar formulários e variados tipos de entrada de dados, nesta aula abordamos como criar formulários em HTML e alguns tipos de entrada de dados.

CSS3 é a Linguagem de estilos padrão para formatação de web sites e aplicações baseadas na web. Com CSS3 é possível dar vida a elementos HTML5 que foram estruturados. Nesta aula aprendemos como trabalhar com CSS3 e Por que essa linguagem de estilos é fundamental para a criação de projetos profissionais.

Nesta aula aprendemos a carregar um arquivo CSS externo para nossa aplicação, além de tornar mais organizado explicamos como funciona a tag link e algumas armadilhas no uso de CSS e como evitá-las.

Nesta aula aprendemos como centralizar o conteúdo de nossa página, também aprenderemos como utilizar as classes CSS organizando nossos projetos.

Também veremos algumas dicas e boas práticas ao utilizar CSS.

O Box Model é o modelo padrão para formatação de elementos no HTML, nesta aula aprendemos sobre duas camadas do Box Model, a Margem externa e o Espaçamento Interno.

Também aprenderemos como utilizar corretamente as formatações de Margem com Box-Sizing.

Continuando no Box Model nesta aula aprenderemos a formatar as Bordas dos elementos. Também aprenderemos a formatar somente um dos lados do elemento.

Seletores CSS podem determinar quem deve ser selecionado em um documento, já os Pseudo Seletores são seletores condicionais. Veja Nesta aula como utilizar os Pseudo Seletores em seus projetos.

Utilizar Fontes externas é um dos melhores recursos das folhas de estilo CSS3. Com isso Sites e Aplicações Web se tornam profissionais sem ter que utilizar imagens para criar textos com fontes personalizadas. Nesta aula veja como utilizar fontes no CSS.

JavaScript é uma linguagem de Programação utilizada em 99% dos sites na Web, nesta aula aprendemos como funciona a linguagem e sua importância.

Nesta aula Aprenderemos como importar um arquivo JavaScript ao nosso projeto HTML. Também algumas dicas sobre erros comuns ao utilizar JavaScript em arquivos HTML.

Variáveis são espaços na memória que armazenamos valores, nesta aula aprenderemos a criar variáveis em JavaScript e utilizá-las em nossos projetos.

Eventos no JavaScript são utilizados com muita frequência, e permitem disparar rotinas reagindo a esses eventos, nesta aula aprenderemos a reagir aos eventos criados pelo usuário por meio de sua interação com a aplicação.

Nesta aula aprenderemos a recuperar informações fornecidas pelos formulários HTML5, utilizando a linguagem JavaScript, também como armazenar e manipular essas informações.

JSON - JavaScript Object Notation é um padrão único de comunicação entre dois pontos que podem ser duas aplicações, ou mesmo uma aplicação e uma fonte de dados, aprenda nessa aula como trabalhar com JSON.

Nesta aula aprenderemos a utilizar comandos de decisão para controlar o fluxo de dados e validar informações.

A tag table é muito importante quando trabalhamos com dados tabulares, aprenda como utilizar essa tag e seus elementos filhos para criação de tabelas com linhas e colunas estruturadas.

Quando precisamos formatar elementos dinamicamente e de forma alternada como por exemplos em linhas de uma tabela, os pseudo seletores :nth-child serão de grande utilidade. Aprenda como utilizar esse recurso CSS.

O Laço de Repetição permite executar uma rotina por uma determinada quantidade de vezes, nesta aula aprenderemos a utilizar o laço de repetição For.

Funções são um dos recursos mais importantes e utilizados em JavaScript, nesta aula aprenderemos como utilizar as funções e como funciona seu comportamento em uma aplicação web.

Comentários são muito úteis para documentar uma aplicação e também ignorar trechos de código. Aprenda como funcionam os comentários em JavaScript.

Listas são muito utilizadas para criação de menus e elementos de repetição em formação. Nesta aula aprendemos a utilizar as listas não ordenadas e seus elementos.

Array são matrizes ou vetores, e compreendem uma parte importante do desenvolvimento, nesta aula aprenderemos a trabalhar com Array em JavaScript.

Para Percorrer um array utilizamos o método ForEach que nos ajuda a percorrer array e coleções acessando elementos pelo seu índice.

Uma vez que as classes CSS são extremamente úteis para a criação de aplicações Web, utilizá-las em conjunto com JavaScript permite criar aplicações dinâmicas e profissionais.

Os Eventos de teclado são disparados quando usuários interagem com aplicação, pressionando uma tecla, segurando uma tecla ou soltando uma tecla, nesta aula aprenda como reagir a eventos de teclado.

Para adicionar elementos de um Array utilizamos a função Push. Nesta aula aprenderemos a adicionar elementos em um Array.

No Projeto de Tarefas criaremos um botão para excluir tarefas.

Quando precisamos fatiar uma string em um Array utilizamos a função Split e ela gera um array, veja como nesta aula incrível.

Quando precisamos filtrar um array baseado em uma condição utilizamos o Array Filter, nesta aula aprenderemos a utilizar o Array Filter.

O Confirm é um dos recursos mais antigos do JavaScript, veremos como utilizar Janelas de confirmações no JavaScript.

Para colocar em prática o que aprendemos até aqui, vamos criar um layout de um site, aplicando os conceitos e recursos de HTML5, CSS3 e JavaScript.

Nesta aula aprenderemos a Trabalhar com imagens de Fundo utilizando a propriedade Background-image da Linguagem CSS.

Um dos melhores recursos na CSS3 para alinhar elementos de um bloco, são os recursos de FlexBox Layout. Nesta aula aprenderemos como utilizar esse recurso para alinhar elementos dentro de um container ou um wrapper.

Quando Precisamos posicionar elementos do Layout Podemos utilizar a propriedade position da CSS, cujos valores podem variar dependendo da necessidade do elemento no layout. Veremos nesta aula como posicionar o elemento de forma absoluta na tela, e também como posicionar em relação aos outros elementos do layout.

Nesta aula aprenderemos a trabalhar com os elementos do tipo radio button e elementos que permitem a entrada de datas, e como manipular essas informações.

Nesta aula Criaremos o conteúdo da página inicial do site, utilizando os elementos semânticos do HTML5.

Nesta aula adicionaremos o conteúdo e o rodapé do site com o elemento footer.

Responsive Web Design é um dos conceitos mais importantes na web atualmente, nesta aula aprenderemos como tornar nosso projeto responsivo e fluído para os dispositivos móveis.

Trabalhar com ícones é um trabalho recorrente no desenvolvimento web, por isso aprender como utilizar ícones vetoriais é um diferencial, o FontAwesome produz recursos muito importantes para manipular os ícones via CSS.

Nesta aula veremos como aplicar os efeitos CSS para mostrar o menu aberto num dispositivo móvel.

Nesta aula iremos finalizar o menu responsivo utilizando JavaScript, isso permitirá que um elemento quando clicado chame o menu mostrando o efeito de transição em CSS3.