Aula 01:

Tempo: 17:27 min

Descrição: Nessa videoaula iniciaremos um novo curso focado em HTML, desde o básico ao
avançado. Nosso objetivo é aprendermos todas as etapas e elementos de HTML. Iniciaremos o
curso explorando todos os pontos desta linguagem de marcação, ou seja, visando instruir a
todos os níveis de usuários, principalmente aqueles que nada sabem a respeito de
desenvolvimento de sites ou tecnologias web, explorando e, principalmente, entendendo
realmente o que estamos fazendo. O curso abrangera diversos tópicos, desde as bases até a
construção de um website pessoal usando recursos de HTML, CSS e JavaScript de forma básica,
desta forma, o usuário estará apto a seguir na área de webdesign com uma base sólida e
consistente. Nesta aula faremos uma introdução ao que será visto no curso bem como
configuraremos o nosso ambiente de trabalho. Vale ressaltar que usaremos somente
ferramentas gratuitas no decorrer do curso, não tendo necessidade de o usuário possui
conhecimentos prévios de desenvolvimento web ou criação de sites.

Metodologia de Desenvolvimento: A metodologia utilizada aqui é conhecer todos os recursos

disponíveis com relação ao HTML. Partiremos do básico, estudando a estrutura de páginas
HTML e passando pelos mais diversos componentes disponíveis na linguagem, tais como links,
imagens e diversos elementos pertinentes, até o desenvolvimento e publicação de uma página
feita em HTML.

Tecnologias e Recursos: Notepad++, Google Chrome, Firefox, Opera, Internet Explorer, HTML,
XHTML

Aula 02:

Tempo: 23:35 min

Descrição: Nessa videoaula iniciaremos os nossos estudos em desenvolvimento web. Muitas

tecnologias e terminologias são necessárias e fazem parte da profissão de quem trabalha com
sites, desta forma precisamos entender e conceituar estes elementos. Esta videoaula traz
explicações sobre itens que alguns webdesigners ignoram ou até desconhecem, ou seja, será
estudado as bases sobre navegadores ou browsers, como funcionam e suas diferenças.
Aprenderemos também o que são servidores de internet ou de sites e ainda aprenderemos a
bases sobre protocolos, o que são e a que se destinam esses recursos, onde salientaremos o
protocolo HTTP. Na parte prática estudaremos como funciona a comunicação entre browsers e
servidores e como os mesmos atuam em cada etapa de aplicações web.
Tecnologias e Recursos: Notepad++, Google Chrome, Firefox, Opera, Internet Explorer, HTML,
XHTML

Aula 03:

Tempo: 22:45 min

Descrição: Nessa videoaula começaremos a por a mão na massa. Vamos estudar de forma
bastante consistente as partes disponíveis em um arquivo HTML e como os mesmos são
compostos. Faremos uma introdução teórica a respeito do elemento HEAD, para que serve, o
que faz e como funciona, bem como o elemento BODY, onde, da mesma forma, explicaremos
para que serve, o que faz e como funciona. Na parte prática dessa videoaula criaremos o nosso
primeiro script HTML, aprenderemos como mudar o título da página e como declarar as partes
corretas de um arquivo HTML, ou seja, criaremos um arquivo totalmente funcional e que pode
ser executado em um browser real, mantendo o nosso primeiro contato com esta tecnologia.

Tecnologias e Recursos: Notepad++, Google Chrome, Firefox, Opera, Internet Explorer, HTML,
XHTML, head, body, title

Aula 04:

Tempo: 23:59 min

Descrição: Nessa videoaula vamos estudar um pouco sobre padronização da linguagem HTML
e suas diferenças. Começaremos a aula tratando sobre W3C e o que é esta organização e,
principalmente, qual sua finalidade. Prosseguiremos aprendendo um pouco sobre a história
desta tecnologia e suas versões, bem como as diferenças entre a linguagem HTML tradicional e
(X)HTML. Na parte prática de nossa aula veremos as regras de como escrever um documento
XHTML bem formado e como proceder para que o nosso documento seja um documento
(X)HTML válido, em virtude desta linguagem seguir as regras de um documento XML.

Tecnologias e Recursos: Notepad++, Google Chrome, Firefox, Opera, Internet Explorer, HTML,
XHTML, regras (https://www.devmedia.com.br/busca/?txtsearch=regras)

Aula 05:
Tempo: 17:21 min

Descrição: Nessa videoaula vamos aprender de maneira mais formal

o que são TAG’s. Embora já tenhamos utilizado as mesmas, ainda
não havíamos nos focado em entender como funcionam e
principalmente como são escritas, sua sintaxe e ainda como identificar
uma TAG. Ainda na parte teórica relembraremos as regras que
norteiam a escrita de TAG’s e atributos. Na parte prática desta aula,
vamos escrever um documento HTML procurando entender o uso de
TAG’s e como utilizar as regras de escrita, também veremos como
escrever TAG’s compostas e únicas, ou autocontidas, como o browser
interpreta estes elementos e como escrever seus atributos.

Tecnologias e Recursos:

Notepad++, Google Chrome, Firefox, Opera, Internet

Explorer, HTML, XHTML, TAG, atributos

Aula 06:

Tempo: 18:37 min

Descrição: Nessa videoaula vamos aprender de maneira correta o que são os DOCTYPES e os
NAMESPACES. Iniciaremos a aula entendendo conceitualmente o que são e quais os tipos
fornecidos em HTML para os DOCTYPES de uma página, recurso este disponível em diversas
páginas existentes na internet. Daremos continuidade a vídeoaula entendendo o que são os
namespaces, que também fazem parte de diversos sites já implementados. Na parte prática de
nossa videoaula iremos criar um arquivo implementando os recursos de DOCTYPES e
NAMESPACES, que será bastante importante para utilizarmos como base para as demais
videoaulas.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, doctypes, namespaces

Aula 07:

Tempo: 16:14 min

Descrição: Nessa videoaula vamos aprender alguns recursos que muitos webdesigners ignoram
ou deixam de implementar. Procuraremos entender de forma mais concisa e correta a real
funcionalidade da TAG HEAD e a necessidade de compreendermos e utilizarmos os seus
recursos, mostraremos os motivos de a TAG TITLE ser empregada e principalmente utilizada de
forma a auxiliar o nosso site a aparecer nos sites de busca, também será mostrado um
exemplo de aplicação para que esta tag nos traga mais acessos e uma melhor indexação
através dos sistemas de busca. Neste sentido daremos início e apresentação ao SEO, que é o
estudo de técnicas para melhorar o ranking de sites em sistemas de busca.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, head, title, seo

Aula 08:

Tempo: 17:48 min

Descrição: Nessa videoaula vamos aprender um pouco mais sobre

melhorias de nosso site em sistemas de busca, para isso
começaremos a estudar o uso de meta tags e para que são usadas.
Aprenderemos as bases de meta tags e os motivos de sua
importância, após, aprenderemos como inserir em nosso código html a
descrição que aparece em alguns sistemas de busca bem como
aprenderemos a inserir as palavras chaves utilizadas por esses
sistemas, e para isso necessitaremos aprender como funcionam e
quais ao parâmetros das meta tags em questão. Finalizaremos a
nossa vídeoaula tratando sobre como utilizar meta tags para
redirecionar nossos usuários ou recarregar uma página de forma
automática.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, head, description, keywords, refresh

Aula 09:

Tempo: 19:46 min

Descrição: Nessa videoaula vamos aprender como modificar alguns

elementos visuais de nossa página através do elemento body. Este
elemento é o responsável por formatar a parte visível ao usuário, ou
seja, o corpo da página, aprenderemos como mudar vários atributos
deste elementos, tais como a cor da página, como colocar uma
imagem de fundo em nosso site, ajustar margens e setar o idioma de
nossa página. Aprenderemos também como ajustar cores para links
visitados e links ativos, bem como alterar as cores de textos utilizando
o esquema de cores RGB, onde veremos como usar diferentes
tonalidades e tipos de cores ou através do próprio nome das cores.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, body, bgcolor

Aula 10:

Tempo: 19:46 min

Descrição: Nessa videoaula vamos tratar de diversos tópicos relativos

a formatação textual. Iniciaremos a aula aprendendo diversas formas
de deixar um texto em negrito, através das tags Strong e b (bold).
Daremos continuidade aprendendo a colocar um texto em sublinhado
e ainda como formatar este texto em itálico. Aprenderemos também
como utilizar todos estes recursos de uma única vez. Também será
visto como deixar um texto sobrescrito e ainda subscrito, estes
recursos muito utilizados em fórmulas matemáticas e símbolos
químicos. Finalizaremos a aula aprendendo sobre quebras de linhas e
como dar espaçamento entreas linhas de nosso texto.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, strong, bold, italico, sobrescrito, subescrito,
br, quebra de linha

Aula 11:

Tempo: 18:53 min

Descrição: Nessa videoaula vamos aprender como trabalhar com

fontes. Aprenderemos como utilizar uma tag com fim específico para o
trabalho com fontes que é a tag FONT. Esta tag nos permite controlar
várias características dos nossos textos. Começaremos aprendendo
como mudar as cores dos textos, forma essa muito semelhante a
empregada com o elemento body, sendo que podemos utilizar o
formato RGB como também utilizar os nomes das cores.
Prosseguiremos abordando como mudar o tamanho das fontes,
deixando as maior ou menores de acordo com as nossas
necessidades, também veremos os tamanhos de fontes disponíveis.
Finalizaremos a aula aprendendo um pouco sobre as fontes
disponíveis e como mudar a fonte utilizada.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, font, size, face

Aula 12:

Tempo: 17:15 min

Descrição: Nessa videoaula começaremos a trabalhar com

parágrafos. Estes são importantes recursos para criarmos blocos de
textos e conteúdos diversos. Através dos parágrafos podemos
organizar os nossos textos das mais diversas formas e alinhamentos
possíveis, como por exemplo, a direita, esquerda, centralizado e
justificado. Nesta aula, também, iniciaremos um breve estudo sobre
CSS, sendo que já falamos sobre o mesmo, mas pela primeira vez
escreveremos atributos baseados nesta linguagem. Nesta aula
trabalharemos com o atributo style, sendo que através do mesmo
criaremos um contorno ou borda em nossos blocos de textos feitos
através da tag p.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, parágrafo, style

Aula 13:

Tempo: 16:38 min

Descrição: Nessa videoaula aprenderemos sobre cabeçalhos. Não

mais os cabeçalhos head, como vistos anteriormente, mas sim
cabeçalhos HTML. Quando trabalhamos com textos temos a
necessidade de organizar os mesmos em seções e subseções, ou
seja, títulos e subtítulos onde o conteúdo deve seguir uma certa
hierarquia, desta forma lançamos mão de cabeçalhos, ou headings.
Estes elementos têm comportamento semelhante aos títulos do editor
de textos word, e tem finalidade semelhante. Sua forma é denotada
por HX, onde X deve ser trocado pelo grau de importância da seção,
iniciando de 1 até 6, onde 6 é o elemento de mais baixa importância
em nosso texto.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet Explorer, HTML, XHTML, cabeçalhos

Aula 14:

Tempo: 15:39 min

Descrição: Nessa videoaula aprenderemos sobre blocos de citações.

Muitos blogs e sites se utilizam dos recursos de blockquotes para citar
ou referenciar conteúdo disponibilizado em outras páginas de internet
ou ainda outras fontes, como por um exemplo, citar trechos de livros
ou textos impressos. Continuaremos explorando as principais
funcionalidades desta TAG, aprendendo de forma prática como utilizar
a mesma e os seus principais atributos, que neste caso, é apenas um,
o endereço do site de onde está sendo retirado o conteúdo da TAG.
Finalizamos utilizando recursos de CSS para melhorar o aspecto
visual da TAG, deixando com uma aparência mais elaborada e bem
acabada.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet Explorer, HTML, XHTML, blockquote

Aula 15: Listas Não Ordenadas

Tempo: 16:08 min

Descrição: Nessa videoaula iniciaremos os nossos estudos referentes

a listas. Listas são elementos muito utilizados em diversos sites,
inclusive para montar menus e elementos de navegação. Vamos
iniciar nossos estudos de listas tratando sobre a utilização e
implementação de listas não ordenadas. Iniciamos nossos estudos
procurando entender à finalidade da utilização das listas e como
realizar sua implementação básica. Na parte prática da videoaula,
trataremos sobre a criação prática de listas e seus diferentes atributos,
bem como criar listas aninhadas, em outras palavras, uma lista dentro
de outra.
Tecnologias e Recursos: Notepad++, Google
Chrome, Firefox, Opera, Internet Explorer, HTML, XHTML, ul, li, lista

Aula 16: Listas Ordenadas

Tempo: 15:08 min

Descrição: Nessa videoaula daremos continuidade aos nossos

estudos sobre listas, onde será dada ênfase especial às listas
ordenadas. As listas ordenadas são elementos cujos itens têm certa
relação de hierarquia, ou seja, devem seguir uma ordem predefinida
entre os seus elementos. Iniciamos a videoaula tratando dos aspectos
teóricos destes elementos, buscando um correto entendimento e,
após, partimos para a parte prática, onde aprenderemos como criar
diversos tipos de listas utilizando para isso o atributo type, que neste
caso nos dá uma gama de diversos formatos para a lista.
Aprenderemos também como utilizar o atributo start, para mudar a
numeração de nossos elementos

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet Explorer, HTML, XHTML, ol, li, lista
ordenada

Aula 17:

Tempo: 16:05 min

Descrição: Nessa videoaula aprenderemos um pouco mais sobre tags

de formatação de textos. Desta vez vamos ver a utilização das tags
PRE e HR. A tag PRE tem por finalidade mostrar um texto
preformatado, ou seja, respeita os espaços e quebras de linha que
fazem parte do texto, sem a necessidade de deixarmos explicito isso,
esta tag, geralmente, tem seu conteúdo renderizado em um tipo de
fonte diferente, geralmente courier, mas este recurso depende
exclusivamente do browser que estiver utilizando. Finalizaremos a
aula aprendendo como utilizar a tag HR e suas diferentes definições
de acordo com a versão do HTML em questão, veremos também os
atributos desta tag e os motivos de os mesmos pelos quais não devem
ser utilizados em aplicações novas ou aplicações modernas.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet Explorer, HTML, XHTML, pre, hr
Aula 18:

Tempo: 17:12 min

Descrição: Nessa videoaula vamos iniciar nossos estudos a respeito

de um dos mais importantes itens em páginas, os hiperlinks ou
simplesmente links. Os hiperlinks são recursos que nos possibilitam
interligar páginas das mais diferentes formas, podendo enviar o
usuário para um site específico ou uma página dentro do nosso
próprio site. Neste momento vamos aprender de forma conceitual o
que são os hiperlinks e sua sintaxe básica. Na parte prática da
videoaula aprenderemos como criar nossos primeiros links,
direcionando nossos usuários para sites externos ou ainda como criar
links para as páginas de nossos próprios sites.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, a, links, href

Aula 19:

Tempo: 16:22 min

Descrição: Nessa videoaula prosseguiremos tratando sobre

hiperlinks. Como visto, hiperlinks são recursos para criar atalhos entre
páginas, desta vez vamos aprender como criar links que abrem em
novas janelas, ou abas, dessa forma o usuário conserva a janela atual
do sei site, podendo ser um recurso interessante para não perdermos
a visita de um usuário. Aprenderemos também como disponibilizar
arquivos para download e as implicações de colocar um arquivo no
formato zipado, aproveitando para criar uma pasta interna de arquivos
para download. Finalizaremos a aula ensinando como criar um link
automatizado de email, onde o usuário clica e abre o programa de
envio de e-mails padrão do computador do usuário.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, a, links, href, target, download, nova
janela, mailto

Aula 20:
Tempo: 16:34 min

Descrição: Nessa videoaula daremos prosseguimento aos estudos

voltados a hiperlinks. Até este momento criamos links que podem ser
úteis em uma série de situações, desta vez não será diferente e
aprenderemos como trabalhar com âncoras, que são links que podem
funcionar dentro de uma página única ou ainda servir de atalho para
uma determinada região de um documento. Na parte prática, iremos
criar uma página mais elaborada, com um menu de navegação
utilizando listas não ordenadas e diversos parágrafos, com o auxilio de
âncoras faremos com que este menu envie o usuário para o
respectivo conteúdo e permita que o mesmo retorne ao topo da
página, navegando através dos links de âncoras.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, a, links, href, target, âncoras, menu

Aula 21:

Tempo: 17:11 min

Descrição: Nessa videoaula começaremos os nossos estudos sobre

imagens e HTML. Muitos sites utilizam o recurso de inserção de
imagens e se beneficiam dos efeitos visuais ocasionados pelas
mesmas. Neste momento do curso, aprenderemos não somente como
inserir uma imagem em nosso documento, mas também quais tipos de
imagens são recomendados para que nossos usuários tenham uma
boa experiência, bem como quais os principais tipos de imagens
suportados por browsers. Buscaremos, também, entender como
funcionam as estruturas de diretórios, visando manter uma melhor
organização dentro dos arquivos de nosso site, separando
documentos do tipo html de nossas imagens. Na parte prática,
veremos como inserir uma imagem utilizando caminho relativo e
caminho absoluto.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, img, imagem, diretórios, relativo, absoluto

Aula 22:
Tempo: 16:56 min

Descrição: Nessa videoaula daremos continuidade ao nosso estudo

sobre imagens de HTML. Na aula anterior, vimos como usar caminhos
relativos e absolutos, nesta aula faremos um breve complemento
destas instruções, explicando os motivos de, sempre que possível,
optar pelo uso de caminhos relativos. Aprenderemos como utilizar o
atributo ALT, que é responsável por criar um texto alternativo para
nossas imagens, de tal forma que, quando um browser não conseguir
carregar a imagem, seja devido a problemas técnicos de conexão
como ainda devido a remoção da imagem, possamos passar uma
pequena instrução ao usuário. Por fim, finalizamos a aula
demonstrando a utilização do atributo TITLE e sua finalidade em
páginas HTML.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, img, imagem, alt, title, acessibilidade

Aula 23:

Tempo: 18:26 min

Descrição: Nessa videoaula continuaremos abordando o assunto

imagens, visto que para muitos iniciantes no webdesigner este pode
ser um assunto crucial na qualidade de seu trabalho. Desta vez
aprenderemos de forma mais concisa como definir a largura e altura
de nossas imagens, inclusive ressaltando os problemas advindos do
redimensionamento de imagens baseadas em bitmaps, ou seja,
imagens que utilizam pixels em suas medidas. Aprenderemos,
também, como colocar uma borda em nossas imagens, realçando a
mesma para que fique mais visível, conforme a necessidade do
desenvolvedor do site e das necessidades que o projeto nos traz.
Veremos como adicionar um espaçamento entre a imagem e o texto,
utilizando o exemplo da aula anterior, desta forma causando um efeito
visual mais agradável para o usuário.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, img, imagem, width, largura, height, altura, b
orda, border, espaçamento, vertical, horizontal
Aula 24:

Tempo: 16:49 min

Descrição: Nessa videoaula finalizaremos os nossos estudos relativos

ao uso de imagens, visto que abordamos praticamente tudo que
compreende este tópico. Desta vez, trataremos sobre os image maps,
ou ainda, mapas de imagens. Estes elementos, bastante empregados
em diversos sites, podem ser considerados de difícil utilização e
entendimento, principalmente para quem esta iniciando seus estudos

de html, visto que, além de utilizarmos parâmetros no elemento

utilizamos também o elemento map, que fica externo ao nosso
elemento de imagem. Utilizaremos um subelemento, chamado <área>
que possui diversos parâmetros para que criemos links em
determinadas regiões de nossas imagens, fazendo com que uma
única imagem possua diversas regiões clicáveis em vez de apenas um
único link.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, img, imagem, mapa de imagem, image map

Aula 25:

Tempo: 16:29 min

Descrição: Nessa videoaula começaremos os nossos estudos a

respeito da utilização de tabelas. Tabelas, de acordo com a W3C, são
elementos que devem armazenar dados tabulares, ou seja, devemos
utilizar as tabelas para formatar dados, não para a criação de layouts
ou demais elementos visuais de uma página. Desta forma,
aprenderemos o básico sobre a utilização do elemento <table>, que é
o elemento básico na criação de tabelas. Veremos, também, como
criar as linhas e colunas de nossas tabelas. Na parte prática,
aprenderemos como, além de criar a estrutura básica, inserir dados
em uma tabela, colocar uma borda para tornar a mesma visível,
ajustar a largura da tabela e suas colunas.

Tecnologias e Recursos: Notepad++, Google

Chrome, Firefox, Opera, Internet
Explorer, HTML, XHTML, table, width, coluna, linha
Aula 26:

Aula 27:

Aula 28:

Aula 29:

Aula 30:

Aula 31:

Aula 32:

Aula 33:

Aula 34:

Aula 35:

Aula 36:

Aula 37:

Aula 38:

Aula 39:
Aula 40:

Aula 41:

Aula 42:

Aula 43:

Aula 44:

Aula 45:

Aula 46:

Aula 47:

Aula 48:

Aula 49:

Aula 50: