Aprenda HTML com este material online gratuito!

[prog_web 0]

Obs.: Não sei se este é a seção adequada para este post, se não for me desculpem.

 

Siga este roteiro e comece a aprender HTML:

 

Iniciando no HTML: Prólogo

Bem-vindos ao iniciando no HTML. Através de todos estes capítulos vamos descobrir a linguagem utilizada para a criação de páginas web: o Hyper Text Markup Language, mais conhecido como HTML...

http://www.htmlstaff.org/ver.php?id=3138

 

Iniciando no HTML: Introdução ao HTML

HTML é a linguagem com que se escrevem as páginas web. As páginas web podem ser vistas pelo usuário mediante um tipo de aplicação chamada navegador (browser). Podemos dizer portanto, que o HTML é a linguagem usada pelos navegadores para mostrar as...

http://www.htmlstaff.org/ver.php?id=3139

 

Iniciando no HTML: Sintaxes do HTML

O HTML é uma linguagem que baseia sua sintaxe em um elemento de base que chamamos etiqueta (tag). A etiqueta apresenta frequentemente duas partes...

http://www.htmlstaff.org/ver.php?id=3140

 

Iniciando no HTML: Sua primeira página

Podemos já com estes conhecimentos, e mais algum outro, criar nossa primeira página. Para isso, abra seu editor de textos e, copie e cole o seginte texto em um novo documento...

http://www.htmlstaff.org/ver.php?id=3141

 

Iniciando no HTML: Formato de parágrafos em HTML

Nos capítulos anteriores apresentamos a título de exemplo, algumas etiquetas que permitem dar formato ao nosso texto. Neste capítulo veremos com mais detalhe, as etiquetas mais amplamente utilizadas e exemplificaremos algumas delas posteriormente...

http://www.htmlstaff.org/ver.php?id=3142

 

Iniciando no HTML: Formatando o texto

Além de tudo relativo à organização dos parágrafos, um dos aspectos primordiais da formatação de um texto, é o da própria letra. É muito comum e prático, apresentar o texto ressaltado em negrito, itálico e outros. Paralelamente, o uso de índices e...

http://www.htmlstaff.org/ver.php?id=3143

 

Iniciando no HTML: Cor, tamanho e tipo de letra

Apesar de que por razões de homogeneidade e simplicidade de código estes tipos de formatos são controlados atualmente por folhas de estilo cascata (das quais já teremos tempo de falar), existe uma forma clássica e direta de definir cor, tamanho e tipo...

http://www.htmlstaff.org/ver.php?id=3145

 

Iniciando no HTML: Atributos para páginas

As páginas HTML podem ser construídas com uma variedade de atributos que lhe podem dar um aspecto à página muito personalizado. Podemos definir atributos como a cor de fundo, a cor do texto ou dos links. Estes atributos se definem na etiqueta...

http://www.htmlstaff.org/ver.php?id=3146

 

Iniciando no HTML: Listas - Parte 1

São realmente notáveis as possibilidades que o HTML nos oferece em questão de tratamento de texto. Não se limitam ao que vimos até agora, pois vão ainda mais longe. Vários exemplos disso são as listas, que servem para numerar e definir elementos, os...

http://www.htmlstaff.org/ver.php?id=3225

 

Iniciando no HTML: Listas - Parte 2

Continuamos estudando as listas do HTML, que nos possibilita criar estruturas atrativas para apresentar a informação...

http://www.htmlstaff.org/ver.php?id=3226

 

Iniciando no HTML: Listas - Parte 3

Terminamos o assunto das listas estudando as listas de definição. Veremos também a combinação de listas...

http://www.htmlstaff.org/ver.php?id=3227

 

Iniciando no HTML: Caracteres especiais

Uma página web é vista por diferentes países, que usam conjuntos de caracteres distintos. A linguagem HTML nos oferece um mecanismo pelo qual podemos estar seguros que uma série de caracteres raros serão bem vistos em todos os computadores do mundo...

http://www.htmlstaff.org/ver.php?id=3228

 

Iniciando no HTML: Links em HTML

Até aqui, vimos que uma página web é um arquivo HTML no qual podemos incluir, entre outras coisas, textos formatados ao nosso gosto e imagens que veremos mais adiante. Do mesmo modo, um web site poderá ser considerado como um conjunto de arquivos...

http://www.htmlstaff.org/ver.php?id=3229

 

Iniciando no HTML: Links internos

São os links que apontam a um lugar diferente dentro da mesma página. Este tipo de link é essencialmente utilizado em páginas onde o acesso aos conteúdos pode ser prejudicado devido ao grande tamanho da mesma. Mediante estes links, podemos oferecer aos...

http://www.htmlstaff.org/ver.php?id=3230

 

Iniciando no HTML: Links locais

Como dissemos, um site web está constituido de páginas interconexas. No capítulo anterior vimos como linkar diferentes seções dentro de uma mesma página. Resta-nos estudar a maneira de relacionar os distintos documentos HTML que compõem nosso site web...

http://www.htmlstaff.org/ver.php?id=3252

 

Iniciando no HTML: Links locais

Para terminar o tema dos links veremos os três últimos tipos de links que havíamos assinalado...

http://www.htmlstaff.org/ver.php?id=3253

 

Iniciando no HTML: Imagens em HTML

Sem dúvida, um dos aspectos mais vistosos e atrativos das páginas web é o grafismo. A introdução em nosso texto de imagens pode nos ajudar a explicar mais facilmente nossa informação e dar um ar muito mais estético. Porém, o abuso pode nos conduzir a...

http://www.htmlstaff.org/ver.php?id=3275

 

Iniciando no HTML: Alinhamento de imagens com HTML

Vimos em seu momento o atributo align que nos permitia alinhar o texto à direita, esquerda ou no centro de nossa página. Dissemos que este atributo não era exclusivo da etiqueta e sim, que podia ser encontrado em outro tipo de etiquetas...

http://www.htmlstaff.org/ver.php?id=3276

 

Iniciando no HTML: Formatos gráficos para páginas web

O componente gráfico das páginas web tem muita importância, é que o que faz com que estas seja vistosas e o que nos permite aplicar nossa criatividade para fazer o design do site uma tarefa agradável. É também uma ferramenta para aproximar os sites ao...

http://www.htmlstaff.org/ver.php?id=3277

 

Iniciando no HTML: As cores e HTML

As cores possuem um papel muito importante na composição de webs. São indicadas em valores RGB, ou seja, que para conseguir uma cor qualquer misturaremos quantidades de vermelho, verde e azul...

http://www.htmlstaff.org/ver.php?id=3338

 

Iniciando no HTML: Tabelas em HTML

Uma tabela em um conjunto de células organizadas dentro das quais podemos alojar distintos conteúdos...

http://www.htmlstaff.org/ver.php?id=3339

 

Iniciando no HTML: Tabelas em HTML - Atributos para filas e células

Vimos no capítulo anterior que as tabelas estão compostas de linhas que, por sua vez, contém células. As células são delimitadas pelas etiquetas <td> ou pelas etiquetas <th> (se queremos texto em negrito e centralizado) e constituem um entorno...

http://www.htmlstaff.org/ver.php?id=3340

 

Iniciando no HTML: Tabelas em HTML - Atributos da tabela e conclusão

Além dos atributos específicos de cada célula ou linha, as tabelas podem ser adicionalmente formatadas a partir dos atributos que nos oferece a própria etiqueta <table>. A seguir, mostramos aqueles que nos podem parecer à principio mais importantes...

http://www.htmlstaff.org/ver.php?id=3372

 

Iniciando no HTML: Formulários HTML

Até agora vimos a forma na qual o HTML providencia e mostra a informação, essencialmente mediante o texto, imagens e links. Falta ver de que forma podemos trocar informações com nosso visitante. Desde então, este novo aspecto é primordial para a grande...

http://www.htmlstaff.org/ver.php?id=3373

 

Iniciando no HTML: Elementos de formulários - Campos de texto

O HTML nos propõem uma grande diversidade de alternativas na hora de criar nossos formulários. Estas vão desde a clássica caixa de texto até a lista de opções passando pelas caixas de validação...

http://www.htmlstaff.org/ver.php?id=3374

 

Iniciando no HTML: Outros elementos de formulários

Efetivamente, os textos são uma maneira muito prática de fazer chegar a informação do navegante. Porém, em muitos casos, os texto são dificilmente adaptáveis a programas que possam processá-los devidamente ou também pode ser que seu conteúdo não se...

http://www.htmlstaff.org/ver.php?id=3375

 

Iniciando no HTML: Botão submit, apagar campos e outros em formulários HTML

Os formulários têm de dar lugar não somente à informação a tomar do usuário como também, a outra série de funções. Concretamente, permite-nos seu envio mediante seu botão. Também pode ser prático poder propor um botão de Apagar Campos ou também...

http://www.htmlstaff.org/ver.php?id=3376

 

Iniciando no HTML: Frames em HTML

Uma das mais modernas características de HTML são os frames, que foram acrescentados tanto em Netscape Navigator como em Internet Explorer, a partir de suas versões 2.0. Os frames -que significam em português janelas- são uma forma de dividir a página...

http://www.htmlstaff.org/ver.php?id=3377

 

Iniciando no HTML: Frames - Explicação básica

As páginas web que estão feitas com frames se compõem de uma declaração das janelas e tantas páginas em formato HTML corrente como distintas divisões tivermos definido. A declaração ou definição de frames é a única página que realmente devemos aprender...

http://www.htmlstaff.org/ver.php?id=3378

 

Iniciando no HTML: Frames - Criação de uma estrutura simples

Para ilustrar tudo o que viemos explicando podemos ver o exemplo sobre como se criaria a definição de frames da imagem que podemos ver a seguir...

http://www.htmlstaff.org/ver.php?id=3379

 

Iniciando no HTML: Frames - Orientar os links

A única particularidade destacável no exemplo do capítulo anterior, no manejo de frames em geral, trata-se de que cada um dos links que colocamos nas páginas atualizam o frame onde está colocado este link. Por exemplo, se temos link na parte inferior...

http://www.htmlstaff.org/ver.php?id=3418

 

Iniciando no HTML: Frames - Atributos avançados

A parte da criação das janelas propriamente dita, existem muitos atributos com os que configurar sua aparência. Para isso, tanto a etiqueta <frameset> como <frame> admitem diversos atributos que permitem especificar a forma de elementos como as bordas...

http://www.htmlstaff.org/ver.php?id=3419

 

Iniciando no HTML: Vantagens e incovenientes do uso de frames

O desenho com frames é um assunto bastante controvertido, já que distintos desenhadores podem ter outras opiniões...

http://www.htmlstaff.org/ver.php?id=3420

[Guilherme Rambo 4]

Parece bom este material, estou movendo pra seção de referências, e vou botar como destaque lá http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[prog_web 0]

Valeu!

[QuIx 0]

Página adicionada aos favoritos, tópico de alto nível ainda bem que temos users assim hehehe !!!Estou conferindo todas as matérias amigo obrigado.[]'s

[kaka_22 0]

excelente post... tb to conferindo o material, mto bom msm!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[vickEcS 0]

Excelente :]

[heppys 0]

Num tem como colocar o material direto nesse forum, pois aki nao consigo acessar outro link...Fal

[Brian Barnes 0]

Cara, esse post me ajudou muito mesmo! Aprendi muito, tô terminando de ler já!Eu tenho uma pequena dúvida sobre a tag <img> eu usei os atributos "vspace" e "hspace" mas só consegui aumentar o espaço entre objetos, como faço para diminuir os espaços? eu tentei usar valores negativos, por exemplo vspace="-10", mas não funcionou! Alguma dica?valeu

[Paulo de Tarso F. M. 24]

Para formatar isso que você está querendo, você deve utilizar as propriedades CSS margin, meu caro Brian Barnes, pois os atributos hspace e vspace estão em desuso pelos padrões (deprecated). Veja trecho retirado do W3Schools:

The "align", "border", "hspace", and "vspace" attributes of the image element were deprecated in HTML 4.01.

 

The "align", "border", "hspace", and "vspace" attributes of the image element are not supported in XHTML 1.0 Strict DTD.

[MartinsV 0]

Exelente material! É um dos únicos que eu consegui me focar e tenho vontade de ler até o final... lendo e aprendendo http://forum.imasters.com.br/public/style_emoticons/default/graduated.gif hehe!

 

Muito bom... grande achado!

 

Abraços

[lufoliene 0]

U.u... comecei ler hoje as 18 horas... mi emplguei tanto q ja sao 23:51 e aidna estou lendo... muito bom esse cursso online... Bom agora eu vou dormir porque nao to raciocinando muito bem ... acho q li 10 + ... amanha vou ler o resto...Só achei dificil decorar as parada mas com a pratica agente consegue...flw...quandu eu fizer meu site .. vou posta aq para v6 verificarem.. abraços !!

 

BOM DE MAIS

[Z-Kenpachi 0]

Vlws amigo, Comecei o Curso de Web a 2 semanas, ja terminei Fireworks e to no HTML agora,

esse material vai me ajudar Muito!!

 

Obrigado!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif