Overmundo Lab: Noções de HTML para Não-Desenvolvedores

Noções de HTML para não-
desenvolvedores
aula A3
Overmundo Lab módulo A: Introdução à internet colaborativa «
Instituto Overmundo (cc) Alguns direitos reservados.
1 O que é HTML? Para que serve? Como funciona? O
que eu preciso saber para mexer com HTML?
2 Primeiras noções e fundamentos do HTML. <head> e

<body>.
3 Comandos de formatação de texto. , .

Links com <a>. Imagens: <img>. Listas: <ul> e
<ol>. Introdução às folhas de estilo (CSS).
4 O que fazer com o HTML? Quando usar? O bom e

velho método de “tentativa e erro”.
Overmundo Lab
» aula A3 // resumo
Noções de HTML para não-

desenvolvedores
O professor explora com os alunos as linguagens de
marcação próprias da internet, fornecendo noções
básicas de HTML (HyperText Markup Language), de
modo a familiarizá-los com sistemas de edição
colaborativa. São introduzidos comandos básicos de
formatação de textos, links, listas e tabelas. O aluno é
levado a praticar, com base nos exemplos e exercícios
propostos.
Overmundo Lab 3
debate
metodologia HTML ou HyperText Markup Language
(“linguagem de marcação para hipertexto”) é
Aula constituída de exposição oral em torno o principal padrão de estrutura visual e
de 40 minutos, com abertura para debate e formatação de páginas web. É o HTML que
comentários sobre as referências citadas e define a posição dos elementos em uma
utilizadas. O professor pode ainda realizar determinada interface web e suas principais
com os alunos a dinâmica proposta abaixo. características, relacionando texto, imagem e
outros objetos multimídia. Junto com o CSS,
Cascade StyleSheet, que cuida do
sugestões de dinâmica alinhamento de estilos e esquemas de cores, e
o XML, que atribui valores semânticos e
O professor pode sugerir aos alunos uma das dinâmicos às páginas, o HTML é a base
três dinâmicas a seguir: na primeira, ele fundamental de todo o código que opera a
repassa comandos básicos de formatação de web.
texto e páginas simples em HTML estático
para os alunos, pedindo que cada um crie, no Um documento HTML nada mais é do que um
Bloco de Notas (Notepad), um pequeno arquivo de texto escrito com parâmetros da
arquivo de texto a ser salvo como HTML; na linguagem convencionada HTML. Este arquivo,
segunda dinâmica, o professor pede que os que recebe na maior parte das vezes a
alunos criem um blog e os direciona a editar extensão “.HTML”, é então lido e interpretado
um dos posts do blog em modo-texto, isto é, por um navegador (Internet Explorer, Mozilla
diretamente no código; na terceira e última Firefox, Google Chrome, Opera, Safari etc.). A
dinâmica, o professor recomenda que os atual versão do código utilizado é a 4.0, mas o
alunos editem um verbete na Wikipedia – o HTML5, considerado a próxima grande revisão
sistema de linguagem de marcação wiki é da linguagem, está já em processo inicial de
levemente diferenciado dos códigos HTML. implementação e testes. Chamado de
linguagem de marcação, o HTML funciona a
partir de “tags”, isto é, etiquetas que atribuem
critérios de avaliação valores a determinadas expressões. Assim,
uma etiqueta indica que o valor é ativo e
Em qualquer dos casos, o professor deverá outra, que o valor é inativo. Na prática, se
avaliar os resultados, levando em você pretende colocar a palavra Overmundo
consideração os comandos básicos de HTML e em negrito, deve escrever
os efeitos obtidos. Overmundo, sendo
 a tag responsável por “abrir” o
negrito, e , a tag responsável por
“fechar” o negrito.
Ainda que a programação seja tarefa de um

profissional desenvolvedor ou webdesigner, a
familiaridade com os comandos básicos do
HTML pode auxiliar desde o gestor de projetos
ao próprio usuário final, que almeja editar
conteúdos publicados por ele próprio com
autonomia.
Overmundo Lab
Instituto Overmundo (cc) Alguns direitos reservados. 4
leitura recomendada leitura complementar
▪ RAMALHO, José Antônio Alves. ▪ APRENDER HTML. Curso Básico
HTML 4 prático e rápido. São Paulo: de HTML. Disponível em:
Berkeley Brasil, 1999. (Série <http://aprenderhtml.webs.com/>.
Ramalho.)
▪ WIKIPEDIA. HTML. Disponível
▪ SPYER, Juliano. Conectado. Rio em:
de Janeiro: Jorge Zahar, 2007. <http://pt.wikipedia.org/wiki/HTML>.
▪ WIKIPEDIA. CSS. Disponível em:

<http://pt.wikipedia.org/wiki/Cascadin
g_Style_Sheets>.
Overmundo Lab
websites
créditos ▪ Aprender HTML.
Overmundo Lab <http://aprenderhtml.webs.com/>
um projeto Instituto Overmundo
▪ Jakob Nielsen's UseIt
planejamento didático <http://www.useit.com/>
Viktor Chagas (coordenação)
Helena Aragão
Olívia Bandeira ▪ Nebulosa's Home Page.
Oona Castro <http://nebulosabar.com/SiliconValley
Thiago Camelo /Heights/6882/>
identidade visual
▪ NVU.
Viktor Chagas
<http://net2.com/nvu/>
rede de oficineiros
Viktor Chagas (coordenação) ▪ W3C HTML4 Specification.
Douglas Vieira <http://www.w3.org/TR/html401/>
Helena Aragão
Olívia Bandeira
Oona Castro ▪ W3C HTML5 Specification.
Saulo Frauches <http://www.w3.org/TR/html5/>
Thiago Camelo
+ ▪ Webdesigner Depot.
Claudia Rangel
Daniel Duende
<http://www.webdesignerdepot.com>
Marcelo Cabral
Sergio Rosa ▪ ZenGarden.
Thiago Skárnio <http://www.csszengarden.com/>
Yussef Abrahim
Overmundo Lab
• <http://lab.overmundo.org.br>
• <http://delicious.com/overmundo>
Creative Commons <CC BY-NC-SA 3.0> •
atribuição •
uso não-comercial •
compartilhamento pela mesma licença •

Overmundo Lab
Secretaria de
Cidadania Cultural
Overmundo Lab

Overmundo Lab: Noções de HTML para Não-Desenvolvedores

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Overmundo Lab: Noções de HTML para Não-Desenvolvedores

Caricato da

Copyright:

Formati disponibili

Noções de HTML para não-

2 Primeiras noções e fundamentos do HTML. <head> e

3 Comandos de formatação de texto. <strong>, <em>.

4 O que fazer com o HTML? Quando usar? O bom e

Noções de HTML para não-

Ainda que a programação seja tarefa de um

▪ WIKIPEDIA. CSS. Disponível em:

Creative Commons <CC BY-NC-SA 3.0> •

compartilhamento pela mesma licença •

Potrebbero piacerti anche