UNIFENAS

HTML
Padres Web e Tecnologia de Cliente

Alfenas
2013

Leandro Goulart
Matheus William
Rodrigo Goulart

HTML
Padres Web e Tecnologia de Cliente

ALFENAS MG
2013

SUMRIO
1 INTRODUO..............................................................................................................3
2 OBJETIVOS...................................................................................................................3
2.1 OBJETIVOS GERAIS................................................................................................3
2.2 OBJETIVOS ESPECFICOS......................................................................................3
2.2.1 DIFERENCIAR O HTML DE VERSES AT O HMTL5...................................3
2.2.2 APROFUNDAR SOBRE CSS.................................................................................3
2.2.3 APRIMORAR SOBRE JAVASCRIPT....................................................................3
2.2.3 CRIAR TABELAS E FORMULRIOS..................................................................3
3 LEVANTAMENTO BIBLIOGRFICO.......................................................................4
4 REFERENCIAL TERICO...........................................................................................6
4.1 HTML..........................................................................................................................6
4.2 CSS..............................................................................................................................7
4.3 JAVASCRIPT.............................................................................................................8
4.4 HMTL5........................................................................................................................9
5 MATERIAL E MTODOS..........................................................................................12
6 PLANO DE EXECUO............................................................................................13
7 RECURSOS..................................................................................................................14
8 PLANO DE TRABALHO............................................................................................15
REFERNCIAS..............................................................................................................16
ANEXOS.........................................................................................................................17

1. INTRODUO
O ponto principal do trabalho ser sobre HTML, na qual uma linguagem de
marcao. No uma linguagem de programao onde se pode construir um
algoritmo, mas uma linguagem declarativa que serve para organizar informaes
em um arquivo de texto que ser visualizado em um browser. A web tambm
abrange vrios tipos de tecnologias padres web:
HTML, HTML5, XML, XHTML, JAVA SCRIPT e CSS. Onde tambm dar
nfase em CSS, HTM5 e a diferena entre HTM4 E HTML5.

2. OBJETIVOS

2.1 Objetivos Gerais:

Aprofundamento sobre novas tags e comandos no mundo HTML.

2.2 Objetivos Especficos:

2.2.1 Diferenciar o HTML de verses at o HTML5;
2.2.2 Aprofundar sobre CSS;
2.2.3 Aprimorar sobre javascript;
2.2.4

Criar tabelas e formulrios.

3. LEVANTAMENTO BIBLIOGRFICO
Livros
Autor (es):

Maurcio Samy Silva

Ttulo:

Construindo sites com CSS e (X)HTML

Edio:

1 edio

Local:

So Paulo

Editora:

Novatec

Ano:

2007

Autor (es):

Silvio Ferreira

Ttulo:

Guia prtico de HTML 5

Edio:

1 edio

Local:

So Paulo

Editora:

Universo dos livros

Ano:

2013

Autor (es):

David Flanagam

Ttulo:

Javascript: O Guia Definitivo

Edio:

4 Edio

Local:

So Paulo

Editora:

Laser House

Ano:

2002

Autor (es):

Luiz Gustavo Amaral

Ttulo:

Cascading Style Sheets (CSS)

Edio:

3 Edio

Local:

So Paulo

Editora:

Novatec

Ano:

2009

Autor (es):

Renata Hiromi Minami Miyagusku

Ttulo:

Desvendando os recursos do CSS

Edio:

3 Edio

Local:

So Paulo

Editora:

Digerati Editorial

Ano:

2007

Sites

Autor (es):

Luiz Antonio Mello

Ttulo do artigo:

A Onda Maldita: como nasceu a Fluminense FM

Endereo
eletrnico:

http://www.actech.com.br/aondamaldita/ creditos.html

Data de acesso:

13 out. 1997

Autor (es):

Eduardo Bertolucci

Ttulo do artigo:

Trabalho de HTML, CSS e JAVASCRIPT

Endereo
eletrnico:

http://www.slideshare.net/ed.be/trabalho-de-html-css-e-javascripteduardo-bertolucci-unopar-2010

Data de acesso:

15 setembro 2011

Autor (es):

Georgieva Tsveti

Ttulo do artigo:

10 diferenas entre HTML4 e HTML5

Endereo
eletrnico:

http://rodrigozandonadiwebdesign.blogspot.com.br/2011/09/10diferencas-entre-html4-e-html5.html

Data de acesso:

14 setembro 2011

4. REFERENCIAL TERICO

4.1 HTML
HTML a abreviatura para Hipertext Markup Language, ou, Linguagem de
Marcao de Hipertexto. um pado de codificao para Web Sites, baseados em
marcaes padronizadas pela W3C. No uma linguagem complexa e torna-se fcil de
entender mesmo para quem nunca teve nenhum tipo de contacto com linguagens de
programao.
Para criar uma pgina ou documento HTML no so necessrios recursos
sofistificados. Basta um editor de textos simples como o Bloco de Notas do Windows,
por exemplo. Existem, no mercado, softwares para edio de HTML mais sofisticados,
porm, estes so empregados por desenvolvedores mais avanados que no trabalham
exclusivamente com HTML, mas tambm com outras tecnologias para a Web.
Um documento HTML composto por marcaes chamadas tags. Cada tag
padronizada e representa um elemento na pgina. A grande maioria das tags so
representadas com marcadores de incio e fim, dentro dos sinais de maior ou menor (< >
). Cada tag tem suas prpias propriedades que podem vir padronizadas ou podem ser
modificadas.
A tag que identifica o incio de um documento HTML <HTML> (sem
distino de letras maisculas e minsculas). Assim, todo documento HTML deve ter
em sua primeira esta marcao. Consequentemente, o final do documento HTML deve
ter a marcao </HTML>. Tudo que vem entre o incio e o fim da tag HTML faz parte
de um documento que ser interpretado pelo browser cliente.

4.2 CSS

CSS validado em padres ou ento recomendaes formais. S com cdigos validos

pode-se garantir que navegadores ou leitores de tela que se baseiam em padres
interceptam de maneira correta.
Assim os cdigos so validados, e tambm um dos requisitos mnimos de
acessibilidade. (IHC2010)
CSS foi conduzida individualmente nos dias 24 e 25 de abril de 2010. No caso de
validao de cdigos CSS, so validados em verso 2.1, que ainda melhor suporte
para navegadores atuais. (IHC2010)
De acordo com Renata Hiromi (2007) O CSS surgiu como uma soluo as deficincias
e limitao que a linguagem HTML comeou a apresentar j h algum tempo.
A principal funo do CSS extrair formatao de uma pgina do cdigo HTML,
separando-a do contedo propriamente dito.
Alm de aumentar o nvel de organizao isso indica que elas podem definir, de
antemo, a formatao de todos os elementos de uma ou vrias pginas.
Com isso, torna-se muito mais fcil manter um padro de fontes, cores e estilos, na
medida em que ser mais prtico modificar tais atributos.
Utilizando um arquivo CSS externo a sua pgina, possvel possuir vrios arquivos
em extenso CSS, e quanto desejar alterar algum layout da pgina, basta a chamada do
arquivo CSS.
De acordo com Ana Laura Gomes (2010) O CSS no uma linguagem de marcao.
Ele uma sequncia de declarao de propriedades e seus valores para a manipulao
de forma com o contedo de uma pgina web ser exibido.
A formatao CSS pode ser aplicada de trs formas distintas:

Atravs de um vnculo com um arquivo CSS;

Atravs de um bloco de formatao dentro da prpria pgina HTML;
Atravs de aplicao de formatao na tag HTML.

Onde sua estrutura de formatao segue o seguinte modelo:

Seletor {formatao 1; formatao 2; formatao 3; formatao n}, onde o seletor
refere-se a
uma tag HTML. (Apostila Tec.Internet 2013)

4.3 JAVA SCRIPT

JavaScript uma linguagem de programao leve, baseada em objetos, especfica para

a criao de aplicaes Internet. Os comandos do Javascript podem ser escritos
diretamente em uma pgina HTML e em qualquer editor de textos simples. O ncleo da
linguagem Javascript se parece com outras linguagens, como C, C++ e Java.
Construes de programao so usados, como if, o operador == e o lao while. O
Javascript interpretado pelo browser. Possui um nmero reduzido de tipos de variveis
(numricas, booleanas e strings) e ainda pode manusear alguns objetos do browser.
uma linguagem no-tipada, ou seja, as variveis no precisam ter um tipo especificado.
O Javascript case-sensitive, isto , caracteres minsculos so interpretados
diferentemente dos caracteres maisculos. Os comandos de Javascript podem ser
inseridos nas pginas de duas formas: pelas tags <script> </script> e como event
handlers, usando-se os tags de HTML: <tag EventHandler=cdigo em Javascript>.
Existem os operados lgicos como == (igual), < (menor), && (e) entre outros;
matemticos como % (obtm o resto de uma diviso), ++ (incremente um valor em uma
unidade), - subtrao de valores entre outros. Tambm existem os controles especiais
como // (linha de comentrio), /* ..*/ (bloco de comentrio); \b (backspace), \t (tab)
entre outros que so usados dentro dos comandos alert(). Comandos condicionais so
comandos que condicionam a execuo de uma certa tarefa veracidade ou no de uma
determinada condio, ou enquanto determinada condio for verdadeira, eles so: if,
for e while. Eventos so fatos que ocorrem durante a execuo do sistema, a partir dos
quais o programador pode definir aes a serem realizadas pelo programa. Existem
muitos eventos, como onLoad(), onUnload(), onBlur(), onSelect(), onSubmit() entre
outros. As variveis que so criadas dentro de uma funo so chamadas de variveis
locais e podem ser referenciadas somente dentro da funo. As variveis criadas fora de
funes so chamadas de variveis globais, podendo ser referenciadas em qualquer
parte do documento. Para escrever no documento, utilizamos o mtodo write. As linhas
escritas desta forma podem conter textos, expresses Javascript e comandos HTML.
Alert(), confirm() e prompt() so as trs formas de comunicao com o usurio atravs
de mensagens. Alert() utiliza-se para mostrar uma caixa de texto apenas na tela,
confirm() solicita OK ou CANCELAR juntamente com a mensagem e prompt() solicita
a digitao de dados, alm de mostrar uma mensagem. Funes so conjuntos de

instrues que s so executadas quando houver uma chamada especfica a elas. A

sintaxe geral function NomeDaFuno (Parmetros) {Ao}. Funes intrnsecas so
funes que j so includas na prpia linguagem Javascript. A sintaxe geral Result =
funo (informao a ser passada). Existem tambm muitas funes matemticas como
Math.abs(nmero), Math.sqrt(nmero), Math.max(nmero1,nmero2) entre muitos
outros. Um array uma coleo de valores de dados, da mesma forma que um objeto.
Embora cada valor de dado contido em um objeto tenha um nome, cada valor de dado
em um array tem um nmero, ou ndice. Em Javascript, voc recupera um valor a partir
de um array colocando um ndice entre colchetes depois do nome array.
Javascript no tem nenhum recurso grfico, com exceo da poderosa capacidade de
gerar HTML dinamicamente (incluindo imagens, tabelas, frames, formulrios, fontes,
etc.) para o navegador exibir. (FLANAGAM, 2002, p.27)
4.4 HTML 5
O HTML 5 uma nova verso do HTML 4.01, que foi concebida para permitir que
programadores possam gerar cdigos mais organizados, bem estruturados, com a
utilizao das marcaes de forma correta e separando definitivamente a marcao do
contedo da formatao do layout. Alm de permitir a construo de websites com mais
acessibilidade.
Apartir dessa nova verso, ele usado somente para criar as marcaes e estruturar o
contedo do documento. O HTML 5 nasceu para ser usado de forma semntica.
E a formatao do contedo, ou seja, o layout? Como sero definidos as cores dos
textos, a fonte, fundos, posicionamentos dos elementos na pgina, uso de bordas, enfim,
como ser definida toda a aparncia visual da pgina? Tudo isso passa a ser papel
indispensvel de CSS- Cascading Style Sheets ( Folhas de Estilo em Cascata), e que
pode ser chamada somente por Folhas de Estilo.
No HTML 4.01 no existia obrigatoriamente essa separao. O uso de CSS era comum,
porm, o HTML ainda era usado para definir a aparncia dos elementos da pgina.
Vejamos alguns exemplos:
.O uso da tag <fonte> para definir a cor, famlia de fonte e tamanho dos textos.

10

.Tag <p> como atributo align para alinhar pargrafos (esquerda, direita, justificado,
centro).
Esses so apenas exemplos de HTML sendo usados para definir a aparncia, visual de
elementos diversos. Com o HTML 5 isso no mais permitido. A partir dessa verso,
tags HTML so usadas para criar marcaes no contedo e CSS para formatar e dar
todo o visual da pgina web.
(Texto Retirado do Livro Guia Prtico de HTML 5, editora: Universo dos Livros, Autor
Silvio Ferreira, So Paulo 2013).
O que h de novo?
O HTML 5 foi criado em prol de uma web semntica. Isso significa que teremos um
cdigo padronizado e organizado. Para isso ser possvel foram criadas diversas novas
tags enquanto outras foram excludas.
A estruturao de pginas o tpico que mais sofreu mudanas no HTML 5. H agora
tags especficas para cada parte de uma pgina. Essas partes podem ser chamadas de
sees.
Apesar de essas tags estruturais representarem uma das principais mudanas, h muitas
novidades do HTML 5, muitas tags novas e outras que foram excluidas.
HTML 5 Semntico
A palavra semntico tem como significado ramo da lingua linguistica que estuda o
significado das palavras. Ao usar as tags para marcar cada tipo de elemento
(pargrafos, ttulos, citaes, etc) de nossa pgina, daremos um significado em termos
de cdigo para tudo. Navegadores, Motores de Busca, tradutores, leitores de tela e
qualquer outro sistema de acesso a websites iro manipular essa pgina sem nenhum
tipo de problema, encontrando as informaes necessrias com preciso. Desse modo,
construiremos um cdigo semntico. Para facilitar a assimilao desse conceito, vamos
ver alguns pontos importantes:
I-

O Contedo deve ser separado da apresentao visual: Como

mecanismos, usamos as tags unicamente para criar as marcaes e
CSS para formatar toda a aparncia visual.

11

II-

Usar as marcaes para cada sesso da pgina: O HTML 5 possui

diversas tags estruturais, como <header>, <aside>, <section>,
<article>, <nav> e <footer>. Cada tag dessa possui um significado
semntico. Quando um navegador carregar uma pgina com essas
marcaes, ele saber que em <header> h um cabealho, em
<aside> o contedo relacionado da pgina, em <nav> h um menu, e

III-

assim sucessivamente.
No construir o layout da pgina em tabela: esse definitivamente
um erro grotesco. comum encontrar pginas da web cujo layout foi
construdo usando uma tabela. Tabelas devem ser usadas somente
para organizar dados tabulares, ou seja, qualquer tipo de informao
que necessita ser apresentada em linhas e colunas de forma lgica e
organizada. Quando utilizamos as tabelas para construir o layout, no

IV-

estamos construindo um cdigo semntico.

Ttulos: as tags <h1> at <h6> so usadas para definir ttulos, <h1>
representa o ttulo mais relevante da pgina, isto , o ttulo principal.
Para o subttulo usa-se <h2> e assim sucessivamente. Essas tags no
devem ser usadas unicamente para definir o tamanho dos textos. Elas
marcam ttulos e, por meio de CSS, podemos configurar o tipo de
fonte, cor e at o tamanho desses ttulos.

Concluso:
Dominar a linguagem HTML um requisito bsico para quem quer produzir contedos
no mundo da web, tanto para fins profissionais como pessoais. Em sua verso mais
recente, o HTML 5, essa plataforma se tornou ainda mais poderosa. Por meio dela,
webdesigners e programadores ao redor do mundo tm produzido sites cada vez mais
impressionantes, atravs de uma linguagem mais organizada e clara.

Referncias Bibliogrficas:
Guia Prtico de HTML 5, Silvio Ferreira, Editora: Universo dos Livros, So Paulo,
2013.

12

5. MATERIAL E MTODOS
O objetivo desta pesquisa foi identificar a linguagem padro HTML e diferenci-la do
HTML5, pois o mesmo uma verso mais atual com uma sintaxe mais simplificada,
que est sendo utilizado por profissionais da rea de desenvolvimento de websites. Com
o HTML5 algumas funes foram aprimoradas, alguns conceitos novos foram criados,
como a criao de novos nveis de formulrios. Aprofundaremos tambm o
entendimento sobre JavaScript e CSS, que por sua vez tem a funo de definir a
aparncia das pginas web, deixando claro que no uma linguagem de programao.
No levantamento bibliogrfico foi explorada certa quantidade de informaes que foram
estudadas, aprofundadas, avaliadas, experimentadas e explicadas de forma qualitativas
de modo a descrever o tema em questo.
Quanto aos mtodos de pesquisa, foram utilizados meios dedutivos e indutivos, bem
como comparativos, monogrficos e tipogrficos.
Finalmente para a construo da nossa pesquisa foi utilizada livros, artigos e biblioteca
eletrnica. Devido as sua facilidade de acesso para desenvolvimento, uma vez que todos
os utilitrios necessrios ao projeto esto presentes de forma nativa essas ferramentas.

6. PLANO DE EXECUO

13

Atividade
Definio de objetivos

1
ms

2
ms

3
ms

4
ms

5
ms

6
ms

Levantamento bibliogrfico

Estudos tericos

Pesquisa de campo
Anlise dos resultados obtidos
na pesquisa de campo
Concluso

7. RECURSOS

X
X

14

Para a realizao deste trabalho se far necessrio o auxlio do professor de

Metodologia Cientfica, da Faculdade de Cincia da Computao da UNIFENAS que
ajudar no desenvolver do trabalho. Tambm contaremos com a ajuda de um colega de
classe, Rubens, colaborando com ideias para o trabalho. E tambm no menos
importante o trabalho ser realizado por quatro alunos do curso de Cincia da
Computao.
Para a realizao deste trabalho sero necessrios dois computadores, equipados com
placas de rede, com acesso rede wireless da Universidade Jos do Rosrio Vellano.
Estimam-se, tambm, as seguintes despesas:
- Impresso do trabalho R$ 20,00 (vinte reais)
- Painel (banner) R$ 47,00 (quarenta e sete reais)

8. PLANO DE TRABALHO

15

Inicialmente ser feito um estudo terico sobre HTML (Hipertext Markup Language) e
sobre seu avano para o HTML5. Ser estudado tambm CSS e Java Script, uma
linguagem de programao leve.
Foram feitas pesquisas, na internet sobre os respectivos itens acima que ser
apresentada informaes para o resumo de cada assunto. Aps as pesquisas os
resultados sero analisados e filtrados.
Logo aps de ter filtrado todas as informaes necessrias, ser feito um breve resumo
explicando cada item da pesquisa. Atravs dos resumos, foram escolhidos determinados
assuntos mais especficos para serem mais aprofundados. Tudo isso ser realizado
perante a cada etapa concluda.

16

9. Referncias
AMARAL, Luiz Gustavo. Cascading Style Sheets (CSS). So Paulo:
Novatec, 2009.

BERTOLUCCI, Eduardo. Trabalho de Html, CSS e JAVASCRIPT.

http://www.slideshare.net/ed.be/trabalho-de-html-css-e-javascripteduardo-bertolucci-unopar-2010, 15 de SETEMBRO de 2011.

FERREIRA, Silvio. Guia prtico de HTML 5. So Paulo: Universo

dos livros, 2013.

FLANAGAM, David. Javascript: O Guia Definitivo. So Paulo: Laser

House , 2002.

MELLO, Luiz Antnio. A Onda Maldita: como nasceu a Fluminense

FM. http://www.actech.com.br/aondamaldita/ creditos.html, 13 de
Outubro de 1997.

MIYAGUSKU, Renata Hiromi Minami. Desvendando os recursos do

CSS. So Paulo: Digerati Editorial, 2007.

SILVA, Maurcio Samy. Construindo sites com CSS e (X)HTML. So Paulo:

Novatec, 2007.

TSVETI. Georgieva.
10 Diferenas Entre o HTML4
e o
HMTL5.http://rodrigozandonadiwebdesign.blogspot.com.br/2011/09/10
-diferencas-entre-html4-e-html5.html. 14 de SETEMBRO de 2011.

17

10.

Anexo -Tabela de Estrutura de Pgina do HTML5

Fonte: HTML 5: A Evoluo Da WWW Para Nova Internet, 2010. Reproduzido

de (www.rafaeldesigner.com.br)