Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

Índice da Apostila HTML Progressivo

Como criar sites - Curso HTML Progressivo

Primeiramente, a equipe do Curso HTML Progressivo gostaria de parabenizar os estudantes que estão aqui por vontade e interesse próprio.
Nosso objetivo é ofertar um curso de HTML completo, online, grátis e onde não é necessário sequer cadastro. Basta acessar e começar a estudar.

Nesse curso, um iniciante total em criação de sites poderá começar a aprender HTML, desde os seus conceitos mais básicos e simples, sempre com exemplos comentados de códigos. Desde as primeiras aulas nós ensinamos a criar diversos sites e efeitos em HTML.


Nosso curso oferta um diferencial: nós mostramos como fazer, desde o início.

Diferente de outros cursos, não vamos apenas 'jogar' na cara dos leitores os códigos, pois acreditamos que isso mais desmotiva do que ajuda.

Aqui você encontrará aulas, artigos, exercícios, códigos HTML, as melhores aulas em vídeo do Youtube, espaço para tirarmos suas dúvidas.

Se desejar aprender mais sobre esse belo mundo do desenvolvimento, indicamos uma visita ao nosso site base, o Programação Progressiva.


Curso de HTML e CSS com certificado
Obter meu certificado!


Caso seja total iniciante, indicamos a seguinte ordem para seu estudo e caminho para se tornar Webmaster:



Informações sobre HTML

01. O que é HTML ?
02. Qual a diferença entre HTML e XHTML ?
03. Que programa se usa para criar um site ?
04. Qual editor HTML usar pra se criar um site
     Vídeo aula - Introdução ao estudo do HTML e XHTML
05. HTML e CSS: separando conteúdo da exibição
06. Especificações em HTML e Document Type <!DOCTYPE>


Conceitos básicos sobre criação de websites

01. Como criar o primeiro site em HTML
     Vídeo aula - Como criar o primeiro site "Olá Mundo / Hello World" em XHTML
02. O que são tags em HTML: < > e </ >
03. <HTML> a tag principal de um site em HTML
04. Efeito <marquee>: fazendo um texto deslizar em um site
05. O que são atributos de tags
06. Tags aninhadas e identação de um código HTML
07.<head> - O cabeçalho de informações de uma página em HTML
     7.1. <title> - Como criar um título em seu site
     7.2 <meta> tags description e keywords
     7.3 <meta> tag refresh - Como recarregar ou redirecionar uma página
08. A tag <body> - Definindo o corpo de um site
     8.1 O atributo bgcolor: Como alterar a cor de fundo - A tabela de cores
09. O que são e como criar um Link - A tag <a>
     9.1 Links internos e Páginas em um mesmo diretório



Tutorial sobre Formatação de Texto em HTML

01. A importância da formatação de textos no Webdesign
02. Como produzir quebras de linha e fazer parágrafos - As tags <br /> e <p>
03. Textos em negrito, itálico e sublinhado - As tags <b>, <i> e <u>
04. Hierarquia de um documento - As tags de cabeçalho <H1>, <H2>, <H3>, <H4>, <H5> E <H6>
05. Como criar listas ordenadas e não ordenadas
     5.1 Listas ordenadas alfabeticamente, aninhadas e com outros símbolos marcadores
06. A tag <font> - Como alterar a fonte, tamanho e cores de um texto
07. charset <meta> tag - Como escrever símbolos e acentos ortográficos em HTML




Tutoriais sobre Imagens em HTML

01. Introdução - A importância das figuras, sons e vídeos na Internet e Web 2.0
02. Imagens em HTML - JPEG, JPG, GIF e PNG
03. <img> - Como colocar imagens em um site - O atributo src
04. Atributos height e width - Como alterar altura e largura de uma imagem
05. O atributo align para alinhar elementos - Usando textos e imagens em um site
06. Atributos TITLE e ALT - Informações das imagens
07. Como usar imagens em HTML de maneira correta
Vídeo aula - Imagens em sites HTML




Tutoriais sobre Tabelas em HTML

1. Tabela - O que é, para que serve e como usar para criar sites em HTML
2. Como criar tabelas (<tables>), linhas (<tr>) e colunas (<td>) em HTML
3. Títulos (<caption>), Cabeçalho (<thead>), Corpo (<tbody>) e Cabeçalho de corpo (<th>)
4. Atributos colspan e rowspan para expandir células através de linhas e colunas de uma tabela
5. Tamanho(width), espaçamento(cellspacing e cellpadding) e alinhamento(align) em tabelas
6. Cor e imagens em tabelas - Tabelas dentro de outras tabelas (nested tables)
7. Como criar um site usando tabelas como layout
Vídeo aula - Tabelas




Tutoriais sobre Frames em HTML

1. Frames - O que são, para que servem e onde se usa
2. As tags <frameset> e <frame> - Começando a entender e usar frames
3. Como criar um site com frames em HTML
4. Controlando frames: Os atributos name e target - Bordas (borders) e Barra de rolagem (scroll bar)
5. Frames dentro de frames (nested) - Como criar um site coim cabeçalho, menu e rodapé



Tutoriais sobre Formulários em HTML

01. A tag <form>: O que são formulários, para que servem e onde são usados
02. Campo do tipo Caixa de Texto (type="text") em HTML
03. Campo do tipo Caixa de Senha (type="password")
04. Campos de Seleção: Radio Button e Checkbox
05. Menu Drop Down e Caixa de Lista: As tags <select>, <option> e <optgroup>
06. A tag <textarea>: Grandes Áreas de Texto
07. Como criar botões para Enviar (submit) e Limpar (reset)
08. Nomeando, agrupando e organizando campos de um Formulário: As tags <label>, <legend> e <fieldset>



Curso de CSS (Cascading Style Sheets)

Tutorial Básico de CSS

     Vídeo aula - Introdução ao CSS
     Vídeo aula - Sintaxe e Uso do CSS



Tutorial de CSS: Formatação de Textos



Layout de um site em CSS: Box Model (Modelo de Caixas)

Tutorial de CSS sobre Imagens

Tutorial CSS em Links





Tutorial de HTML5



Tutorial de Imagens em HTML5

Como inserir figuras (<figure>) e Legendas (<figcaption>) em HTML5


Curso de SEO

Entendendo o Google



Técnicas de SEO




Monetização de Sites

Google Adsense

15 comentários:

Rodrigo Freitas disse...

Esse curso de HTML está muito bom!!!
As coisas são ensinadas, a gente vai criando sites junto com os tutoriais e vai vendo de verdade como as coisas funcionam, a gente mesmo fazendo e vendo!!!!!

Parabéns!

Ana Maria disse...

Uau! Quanto conteúdo!
As explicações são incríveis, parabéns!!

JulioX disse...

Excelente material, parabéns!

Já estudei a parte de HTML 4.01, ansioso agora pra aprender CSS e HTML 5

Márcio Régis Adauto disse...

Olá amigos,

Gostaria de parabenizar, de todo o coração, a todos que fazem este excelente projeto chamado HTML Progressivo, que vai alem do HTML e explica HTML5, CSS, SEO e até Monetização.

Sou professor de Webdesign e este curso é, de longe, o melhor, mais completo e mais didático que já vi.

A decisão de ensinar o antigo HTML 4.01 sem preocupação com o que está em desuso, e depois introduzir o CSS e HTML5, aí sim explicando o que se usa e o que não se usa mais, foi excelente.

Embora não usemos diversas tags do HTML 4.01, entender toda sua lógica e estrutura é IMPORTANTÍSSIMO, partir diretamente para CSS3 e HTML5 é um erro ABSURDO.

Mais uma vez, parabéns e saibam que sempre indico o Curso HTML Progressivo para meus alunos.

Marluce Chagas disse...

é simplesmente fantástico o tanto de conteúdo e de tanta qualidade que tem nesse site!!!

e só conheci agora!!!!

Anônimo disse...

Ola gostaria de saber o que substitui as tags frames e frameset atualmente? Como faço para juntar várias documentos html? Desde já muito obrigada!! Belo Trabalho.

Leko disse...

Apenas, o melhor site para aprender programação. Parabéns e obrigado por me ensinarem kkkk.

Unknown disse...

Mito bom parabéns

Unknown disse...

Muito bom

Anônimo disse...

Boa tarde, preciso de ajuda...
Estou literalmente "levando uma surra" para fazer algumas alterações dentro do código fonte das páginas do site aqui da empresa.
Em primeiro, preciso inserir um código de acompanhamento do Google dentro do head, já inseri, e deu erro.
Em segundo, preciso alterar as tags title e description das páginas também, e a mesma coisa, altero e qdo rodo, dá erro...
Ou eu estou pulando alguma etapa ou fazendo algo errado.
Meu procedimento:
1- abro o código fonte para editar (estou usando o bloco de notas mesmo)
2- depois das alterações inseridas, salvo o txt.
3- converto esse txt para html (tenho usado um que achei na pesquisa, http://document.online-convert.com/convert-to-html)
4- subo o arquivo já previamente renomeado para o diretório raiz (utilizo o Filezilla)
5- renomeio o html original (por exemplo, o arquivo "index.html" renomeei para "index1.html")
6-atualizo o ftp
7-quando abro a página, dá erro...

Alguém pode me orientar, por favor?

Obs: Adorei esse site, o conteúdo é fantástico, e estou aprendendo muito! Obrigada!

Max disse...

Procuro um CÓDIGO HTML simples que retorne a QUANTIDADE DE DIAS EXISTENTES de um evento a partir de uma data anterior fixada.
Uma app (gadget ou widget) que eu possa colocar num blog ou site, mostrando HÁ QUANTOS DIAS um evento existe desde a data de seu lançamento.

Deve ser algo tão simples, mas tão simples que não se encontra facilmente em buscas na web.

Obrigado!
M.

Gabriel disse...

Este site é mto bomm. otimas explicações

Anônimo disse...

Poderia Ter uma caixa de Pesquisa para pesquisar as tags referentes a que queremos!!! Mas obrigado por seu compartilhamento!!!

Unknown disse...

Sou novo no aprendizado de criação de webpages, por acaso eu tinha alguns manuais, mas eram tão simplificados que a pessoa perdia o interesse pois não entendia o porque de cada tag, atributo e onde usar e porque usar...
Vocês dos cursos Progressivos, fizeram com que o meu interesse acendesse novamente... MUITISSIMO BOM os tutoriais... Hoje estou mais interessado e ir mais longe em questão de programação graças a vocês... PARABENS

Anônimo disse...

Nos meus blogs a Gadget de seguidores está com erro 502 e não mostra os seguidores. Não fiz nenhuma mudança no HTML faz muito tempo. A única mudança que eu havia feito foi mostrar 8 postagens por página em um dos blogs. Porque percebi que uma postagem não estava sendo mostrada. Quando mudei passou a mostrar. Mas até troquei de novo pra testar e não foi isso, além de que não fiz essa mudança no outro blog. Já exclui e recoloquei a gadget e continua o erro.

Tutoriais de HTML e CSS