Compilado de Material de Estudo 28-05-2021

Prévia do material em texto

Matérias de Estudo 
 
 
 
 Língua Portuguesa 
 Sistema Operacionais 
 Tópicos de Computação e Informática 
 Aplicações para Internet 
 Conhecimento Gerais 
Aplicações para 
Internet
Material Teórico
Responsável pelo Conteúdo:
Prof. Ms. Alexander Gobbato Paulino Albuquerque
Revisão Textual:
Profa. Ms. Fátima Furlan
Conceitos Básicos do HTML
• Conceitos Básicos de HTML
• Introdução as Tags de HTML
• Explicação do Conceito de Cliente/Servidor
• Ferramentas disponíveis
Conhecer:
 · Conceitos Básicos de Internet e sua História;
 · Tecnologias atuais e emergentes para desenvolvimento de aplica-
ções para Internet; 
 · Conceitos básicos da arquitetura cliente-servidor.
 · O que é o HTML?
 · O W3C e suas especificações
 · Estruturação e conteúdo
 · Corpo básico
OBJETIVO DE APRENDIZADO
Conceitos Básicos do HTML
Orientações de estudo
Para que o conteúdo desta Disciplina seja bem 
aproveitado e haja uma maior aplicabilidade na sua 
formação acadêmica e atuação profissional, siga 
algumas recomendações básicas: 
Assim:
Organize seus estudos de maneira que passem a fazer parte 
da sua rotina. Por exemplo, você poderá determinar um dia e 
horário fixos como o seu “momento do estudo”.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
alimentação saudável pode proporcionar melhor aproveitamento do estudo.
No material de cada Unidade, há leituras indicadas. Entre elas: artigos científicos, livros, vídeos e 
sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Além disso, você também 
encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão sua 
interpretação e auxiliarão no pleno entendimento dos temas abordados.
Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discussão, 
pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o contato 
com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e aprendizagem.
Organize seus estudos de maneira que passem a fazer parte 
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Determine um 
horário fixo 
para estudar.
Aproveite as 
indicações 
de Material 
Complementar.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
Não se esqueça 
de se alimentar 
e se manter 
hidratado.
Aproveite as 
Conserve seu 
material e local de 
estudos sempre 
organizados.
Procure manter 
contato com seus 
colegas e tutores 
para trocar ideias! 
Isso amplia a 
aprendizagem.
Seja original! 
Nunca plagie 
trabalhos.
UNIDADE Conceitos Básicos do HTML
Introdução
O que preciso saber para desenvolver aplicações para a WEB?
• Entender o funcionamento básico da execução dessa aplicação
• Conhecer as linguagens que são executadas na máquina cliente (HTML, CSS, JavaScript)
• Conhecer alguma linguagem que rode no servidor para aplicações mais robustas (PHP, 
ASPX, JSP, etc)
• Saber trabalhar com banco de dados (MySQL, Oracle, SQLServer, etc)
• Ter um pouco de criatividade para se trabalhar com os layouts das suas aplicações
Ex
pl
or
A Evolução da WEB: https://goo.gl/F09OS
Ex
pl
or
Ambiente Cliente/Servidor
Pensando nos elementos básicos para fornecer informação através da Web, temos:
 
Cliente Servidor
Conexão
Servidor Web
Protocolo HTTP
Figura 1
Quando falamos em desenvolvimento web podemos ter duas vertentes, podemos 
programar client side e/ou server side.
Client Side ou “Lado Cliente” são programas executados na máquina cliente, ou 
seja, os browsers são os responsáveis pela execução/interpretação das linguagens.
Cliente
HTML, CSS, Javascript e XML
Figura 2
8
9
 Server Side ou “Lado Servidor” são programas e instruções executadas em 
uma máquina servidor, é necessário um servidor, por exemplo, IIS da Microsoft, 
GlassFish e Apache que suportem os tipos de linguagens utilizadas, como ASPX, 
JSP e PHP. Essas linguagens são compiladas e gerados arquivos que somente os 
computadores podem interpretar. No servidor ainda podemos ter os bancos de 
dados que são softwares responsáveis por todo armazenamento de informações 
em estrutura de tabelas e relacionadas entre si.
Servidor
PHP, JSP, ASPX e Banco de Dados 
(MySQL, Oracle, SQLServer)
Figura 3
Então em resumo, podemos trabalhar tanto com programações cliente e/ou 
programações no servidor.
O que é HTML?
O HTML (Hypertext Markup Language) é conhecido como uma Linguagem de 
Marcação de Hipertexto. O HTML é uma linguagem que se propõe em distribuir 
informação globalmente e pode ser entendido por diversos meios de acesso, ele foi 
desenvolvimento por Tim Bernes-Lee .
Um documento HTML é um documento texto que pode ser produzido utilizando 
qualquer editor de texto. O conteúdo HTML de uma página é processado por um 
Navegador (Internet Explorer, Chrome etc.)
O HTML define um conjunto de elementos para a marcação de uma página 
Web: cabeçalho, parágrafo, lista, tabelas, entre outros. Cada elemento possui sua 
função específica e são comumente chamados de tag (marca ou marcadores).
Ferramentas: Para testar nossos arquivos:
- Internet Explorer (última versão)
- Mozilla Firefox (última versão)
- Google Chrome (última versão)
Figura 4
9
UNIDADE Conceitos Básicos do HTML
Para criar nossos códigos podemos utilizar qualquer editor de texto puro ou 
algumas ferramentas próprias para o desenvolvimento Web
 · Microsoft Expression Web 4 ou
 · Brackets ou
 · Bloco de notas ou
 · NetBeans ou 
 · Notepad++
Brackets
Esta ferramenta é gratuita (desenvolvida pela Adobe), para baixar acesse o link 
http://brackets.io/ (existe uma versão portable)
 
Figura 5
Notepad ++
Esta ferramenta é gratuita, para baixar acesse o link http://notepad-plus-plus.
org/ (existe uma versão portable)
 
Figura 6
10
11
Bloco de Notas
Ferramenta que já vem com o sistema Windows, muito simples de utilizar mas 
não ajuda em nada a criação do código.
Figura 7
Versões
A versão mais significativa para nossa realidade foi o HTML 4.01 que foi 
publicado como uma recomendação do W3C em 1999.
 » HTML 5 - sua especificação começou em 2008 e está praticamente finali-
zada, porém a W3C ainda está analisando algumas tags.
W3C Brasil: https://goo.gl/VHQ5n
Ex
pl
or
Sobre a W3C
O Consórcio World Wide Web (W3C) é um consórcio internacional no qual 
organizações filiadas, uma equipe em tempo integral e o público trabalham juntos 
para desenvolver padrões para a Web. Liderado pelo inventor da web Tim Berners-
Lee e o CEO Jeffrey Jaffe, o W3C tem como missão Conduzir a World Wide 
Web para que atinja todo seu potencial, desenvolvendo protocolos e diretrizes que 
garantam seu crescimento de longo prazo.
Para mais informações, contate: https://goo.gl/5JL1jK
Ex
pl
or
11
UNIDADE Conceitos Básicos do HTML
Marcas (tags)
Todo documento HTML possui marcadores, conhecidos e chamados como tags 
, que são palavras inseridas entre os parênteses angulares (< e >), esses marcadores 
são os comandos de formatação da linguagem. Um elemento é formado por um 
nome de marcador (tag), atributos, valores e filhos.
Exemplo de elemento único:
<hr />
Exemplo de elemento composto:
<a href=”http://www.cruzeirodosul.edu.br/”>Universidade Cruzeiro do Sul</a>
 » <a> é o marcador de abertura
 » </a> é o marcador de fechamento
 » href é o atributo onde está definido para qual página será direcionado ao 
receber o evento do clique.
Estrutura Básica de um Documento
A estrutura básica de um documento HTML possui as seguintes informações:
 
Figura 8
Os marcadores HTML não são case sensitive, o que isso quer dizer?
Quer dizer que tanto faz escrevermos em maiúscula ou minúscula que o navegador 
irá “entender”; <HTML>, <Html>, <html> ou <HtMl>.
12
13
Existem vários marcadores, mas para se construir uma página é essencial e 
recomendado que as seguintes tags estejam inseridas no documento.
Os marcadores básicos são:
 » <html>:define o início de um documento HTML e indica ao navegador que 
todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
 » <head>: define o cabeçalho de um documento HTML, que traz informações 
sobre o documento que está sendo aberto.
 » <body>: define o conteúdo principal, o corpo do documento. Esta é a par-
te do documento HTML que é exibida no navegador. No corpo podem-se 
definir atributos comuns a toda a página, como cor de fundo, margens, e 
outras formatações.
Cabeçalho
 » <title>: define o título da página, que é exibido na barra de título de qual-
quer navegador.
 » <style type=”text/css”>: define formatação, para isso se utilizada marcado-
res de estilos chamado de css ou folha de estio 
 » <script type=”text/javascript”>: define programação de certas funções em 
página com scripts.
 » <link>: define ligações da página com outros arquivos.
 » <meta>: define propriedades da página, como codificação de caracteres, 
descrição da página, autor etc.
Corpo
Dentro do corpo podemos encontrar outros vários marcadores que irão estruturar 
o documento, todo elemento que será exibido no browser deve ser inserido na tag 
<body> por exemplo, vejamos algumas tags.
 » <br />: quebra de linha.
 » <table>: cria uma tabela (linhas são criadas com <TR> e novas células 
com <TD>, já os cabeçalhos das colunas são criados com os marcadores 
<Thead><TH> e os rodapés com <TFooter><TR><TD>).
 » <div>: determina uma divisão na página a qual pode possuir variadas for-
matações.
 » <img />: imagem.
 » <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou 
outro serviço.
 » <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto 
são muito usadas em blogs, elas podem ser auto selecionáveis e conter ou-
tros códigos a serem distribuídos.
13
UNIDADE Conceitos Básicos do HTML
Estrutura de um Documento utilizando Tags do HTML5
Figura 9
 » <!DOCTYPE html>: Especifica quais são as regras para a linguagem de 
marcação, para que os navegadores processem o conteúdo corretamente. 
Nesse caso estamos informando que utilizaremos uma marcação para hmtl5
Observem que dentro das tags <head> temos as tags <title>, <meta>, <link> 
e <script>
 
Figura 10
 » <title>: define o título da página, que é exibido na barra de título de qual-
quer navegador.
 » <meta>: define propriedades da página, como codificação de caracteres, 
descrição da página, autor etc. O atributo name=”description” e content 
são utilizados para adicionarmos informações pertinentes a página, essas 
informações podem ser utilizados pelos mecanismos de busca para então 
retornar o resultado de pesquisa. O atributo charset é utilizado para a confi-
guração de caractere, muitos países não possuem caracteres especiais como 
acento agudo, circunflexo. O UTF-8 trata justamente esses itens, ou seja, se 
a sua página for acessada no Japão, os caracteres com acentos não serão 
trocadas por outra letra qualquer.
14
15
 » <link>: define ligações da página com outros arquivos. Nesse caso, a página 
html está fazendo um ligação com outra página de formatação de estrutura, 
conhecida com css.
 » <script>: define programação de certas funções em página com scripts. No 
caso desse exemplo, estamos fazendo uma chamado para um arquivo somente 
com programação javascript que será executada na página html do navegador.
Figura 11
 » <body>: todo elemento que será exibido no browser deve ser inserido nessa tag.
 » <header>:O elemento <header>representa um contêiner para a introdução 
de um conteúdo ou para um conjunto de itens de navegação, geralmente são 
acompanhadas das tags <h1> ... <h6>.
 » <article>:A tag <article> especifica conteúdo independente e autônomo. 
Um <article> deve fazer sentido por conta própria e deve ser possível distri-
buí-lo de forma independente do resto do site.
 » <footer>: A marca <footer> define um rodapé para um documento ou seção.
15
UNIDADE Conceitos Básicos do HTML
Quando abrimos uma página HTML em um navegador, o navegador irá interpretar as tags, 
ou seja, irá fazer uma análise sintática, definindo como cada parte do texto será apresentada. 
Um problema comum no desenvolvimento de páginas HTML desde o seu surgimento e 
outras tecnologias como CSS, é a compatibilidade entre os navegadores, ou seja, uma 
página desenvolvida em HTML5 pode rodar somente no Chrome, por exemplo, ou aparecer 
de um jeito no Internet Explorer e de outro no Firefox, também temos que tomar cuidado 
quando falamos em dispositivos ou sistemas diferentes, como visualizar nossa página em 
um celular. Nem todos os aparelhos estão aptos a rodar os códigos atuais.
Motores de renderização é o mecanismo utilizado pelos navegadores para processar o 
código das páginas web, os principais motores dos principais navegadores são:
 » Webkit (é o mais compatível com HTML 5) – Safari, Chrome
 » Gecko – Firefox
 » Trident – Internet Explorer
Devemos sempre procurar deixar nossos códigos compatíveis com esses motores para que 
possamos atingir o maior número possível de usuários.
O WebKit é uma ferramenta utilizada nos navegadores Safari e Chrome. O WebKit é um 
motor de renderização.
Gecko é um motor de layout desenvolvido pelo Projeto Mozilla. Trata-se de um motor com 
código aberto utilizado em aplicações construídas pela Mozilla Foundation e pela Mozilla 
Corporation, como o navegador mundialmente conhecido Firefox e o SeaMonkey.
Ex
pl
or
Vejam um exemplo de utilização de motor de renderização.
div{
 -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
 -ms-border-radius: 10px;
 -o-border-radius: 10px;
 border-radius: 10px;
 height:50px;
 width: 150px;
 text-align:center;
 background-color: green;
}
Observe que para cada browser devemos utilizar o renderizador para que o 
efeito final seja o mesmo. Essa codificação deve ser feita utilizando o css, isso não 
é um tag html.
16
17
Figura 12
Resultado no Internet Explorer
Figura 13
 Resultado no Google Chrome
 
Figura 14
17
UNIDADE Conceitos Básicos do HTML
Resultado no Firefox
 
Figura 15
Todo desenvolvedor web deve se preocupar com essa formatação a fim de garantir que o 
resultado do site seja igual independente do browser
Ex
pl
or
18
19
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Sites
HTML5 - Tutorial
https://goo.gl/N0ra
HTML5 - Training
https://goo.gl/vHV69g
 Vídeos
HTML5
Curso de HTML (aula 1) Iniciantes / básico - Introdução e estrutura do html
https://youtu.be/5YdekrQOskM
19
UNIDADE Conceitos Básicos do HTML
Referências
SILVA, M. S. Construindo sites com CSS e (X)HTML: sites controlados por 
folhas de estilo em cascata. São Paulo: Novatec, 2008.
SILVA, M. S. HTML 5: a linguagem de marcação que revolucionou a web. São 
Paulo: Novatec, 2011.
20
Aplicações 
para Internet
Material Teórico
Responsável pelo Conteúdo:
Prof. Ms. Alexander Gobbato Paulino Albuquerque
Revisão Textual:
Profa. Ms. Fátima Furlan
Introdução HTML5 e Principais Tags de Estrutura 
• Alguns Conceitos Básicos
• Espaços em branco e novas linhas
• TAGs especiais de organização de texto
Conhecer:
 · Estruturação e conteúdo
 · Corpo básico
 · Formatação de Texto
 · Codificação de caracteres
 · Listas
 · Links
 · Imagens
 · Tabelas
 · Semântica
OBJETIVO DE APRENDIZADO
Introdução HTML5 e Principais
Tags de Estrutura 
Orientações de estudo
Para que o conteúdo desta Disciplina seja bem 
aproveitado e haja uma maior aplicabilidade na sua 
formação acadêmica e atuação profissional, siga 
algumas recomendações básicas: 
Assim:
Organize seus estudos de maneira que passem a fazer parte 
da sua rotina. Por exemplo, você poderá determinar um dia e 
horário fixos como o seu “momento do estudo”.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
alimentação saudável pode proporcionar melhor aproveitamento do estudo.
No material de cada Unidade, há leituras indicadas. Entre elas: artigos científicos, livros, vídeos e 
sites para aprofundaros conhecimentos adquiridos ao longo da Unidade. Além disso, você também 
encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão sua 
interpretação e auxiliarão no pleno entendimento dos temas abordados.
Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discussão, 
pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o contato 
com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e aprendizagem.
Organize seus estudos de maneira que passem a fazer parte 
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Determine um 
horário fixo 
para estudar.
Aproveite as 
indicações 
de Material 
Complementar.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
Não se esqueça 
de se alimentar 
e se manter 
hidratado.
Aproveite as 
Conserve seu 
material e local de 
estudos sempre 
organizados.
Procure manter 
contato com seus 
colegas e tutores 
para trocar ideias! 
Isso amplia a 
aprendizagem.
Seja original! 
Nunca plagie 
trabalhos.
UNIDADE Introdução HTML5 e Principais Tags de Estrutura 
Alguns Conceitos Básicos
A linguagem HTML desde a sua primeira especificação teve como objetivo 
principal estruturar documentos, sua especificação não visa a formatação ou função 
de apresentação visual como cor de fonte, aspectos de layout etc.
Vale ressaltar que algumas tags possuem uma formatação prévia, porém são 
formatações que ainda estão dentro dos objetivos de estruturar o documento html.
A linguagem HTML precisa do CSS (folhas de estilo) para formatar o conteúdo 
de um documento e do Javascript para dar interatividade.
Um exemplo simples, as páginas abaixo possuem o mesmo código html, porém 
em uma delas aplicamos o CSS.
Somente utilizando elementos do HTML 5.
Figura 1 – Somente utilizando elementos do HTML 5 Figura 2 – Aplicando CSS aos elementos HTML 5
Tags, alguns detalhes
Geralmente uma tag é utilizada delimitando um texto, com sua abertura e 
fechamento, no HTML existem algumas tags que não possuem fechamento.
Exemplo de tag com fechamento
<p> Está tag define um parágrafo </p>
Exemplo de tag sem fechamento
Está tag quebra a linha. <br />
As tags são formadas pelos sinais “<“ e “>”, como no exemplo da estrutura 
básica. <html> .... </html>
Existem algumas tags que não são mais utilizadas devido ao uso do CSS.
Relembrando então, a seguir será demonstrado a estrutura básica de um 
documento html.
8
9
Figura 3
Figura 4
Elementos de uma página HTML
O que chamamos de elementos em uma página HTML, são todas as partes que 
ocupam um espaço na tela quando a página é mostrada.
Os elementos sempre ocupam um espaço quadrado na tela, que tem uma 
largura e uma altura. Quando estudarmos CSS, veremos que eles podem ter seu 
tamanho alterado assim como ter sua posição natural alterada (podendo, inclusive, 
se sobreporem.)
Elementos podem conter outros elementos (um bloco pode conter dois outros 
blocos menores dentro dele, por exemplo).
O que define um elemento no HTML são as tags. Um elemento que pode ter con-
teúdo deve ter uma tag principal e uma tag de fechamento. Elementos que não devem 
ter conteúdo (como imagem ou linha horizontal) não possuem tag de fechamento.
9
UNIDADE Introdução HTML5 e Principais Tags de Estrutura 
Padrão na criação do código
Para criarmos nossos documentos html, iremos seguir as observações abaixo:
 · Devemos criar os documentos bem-formados
 · Todas as tags devem ser escritas com letras minúsculas
 · Uso de tags de fechamento é obrigatória
 · Elementos vazios (br, hr, ...) podem ser fechados com “/”
 · Atributos devem ser escritos também com letras minúsculas
 · Os valores dos atributos devem ser escritos dentro de aspas (“....”)
 · Todos os atributos devem ter nome e valor associados
Caracteres Especiais
Alguns caracteres são reservados em HTML. Por exemplo, não se pode usar 
os caracteres “<” e “>” em um texto, pois o browser pode confundí-los com as 
marcações do documento.
A maioria dos processadores da linguagem suporta os 5 caracteres a seguir:
Tabela 1
Caracter ID Nome Descrição
" &#34; &quot; Aspas (quotation mark)
' &#39; &apos; Apóstrofe
& &#38; &amp; “E” comercial (ampersand)
< &#60; &lt; Menor que (less-than)
> &#62; &gt; Maior que (greater-than)
Nos exemplos abaixo será demonstrado a utilização de cada elemento.
Figura 5 – Utilizando aspas
10
11
Figura 6 – Utilizando Apóstrofe
Figura 7 – Utilizando “E” comercial
Figura 8 – Utilizando menor e maior que
11
UNIDADE Introdução HTML5 e Principais Tags de Estrutura 
Resultado na página, observem que as três formas utilizadas tem o mesmo resultado.
Figura 9
Espaços em branco e novas linhas
Espaços em branco
Em linguagens de programação, espaços brancos (gerados pela tecla de espaço 
ou pelo tecla TAB do teclado) servem para separar os termos. Mas invariavelmente, 
mais de um espaço em sequência tem o mesmo significado que um único espaço.
Assim é no HTML
Por exemplo, os dois textos a seguir tem o mesmo resultado numa página HTML:
Este texto é separado por espaços únicos.
Este texto é separado por espaços únicos.
Novas Linhas
Em algumas linguagens de programação, a separação em linhas (inseridas pela 
tecla Enter do teclado) servem apenas para organizar o documento. Ou seja, se elas 
não forem colocadas, dá na mesma!
12
13
Assim é no HTML
Por exemplo, os dois textos a seguir tem o mesmo resultado numa página HTML:
Este texto é está em uma linha
Este texto é 
está em 
uma linha
Figura 10
Resultado:
Figura 11
13
UNIDADE Introdução HTML5 e Principais Tags de Estrutura 
Quando trabalhamos com html, nem tudo que digitamos no corpo da página 
ficará igual ao que estamos vendo, diferente do word, por exemplo, que o resultado 
é exatamente o que vemos!
TAGs especiais de organização de texto
<p> - utilizada para delimitar um parágrafo
<p>Este conteúdo foi definido como um parágrafo</p>
<br> - quebra de linha
Linha 1 <br/>
Linha 2
O que ele tem de especial?
Única TAG que não representa um elemento no sentido de que não ocupa 
espaço específico na tela
Elementos de Estilo
Apesar de ser uma linguagem de estruturação da página, o HTML apresenta 
algumas tags exclusivas para formatação “in line”, isto é, formatação rápida feita 
para um bloco específico, no próprio código.
Existem algumas tags que não são mais utilizadas devido ao uso do CSS que será 
abordado posteriormente.
<b> - negrito
<b>em negrito</b>
<i> - itálico
<i>em itálico</i>
<u> - sublinhado
<u>sublinhado</u>
<hr> - quebra temática de linha
Linha 1<hr/>
Linha 2
14
15
Listas
Em HTML, podem ser criadas listas ordenadas (numéricas, alfabéticas etc.) ou 
não ordenadas (marcadores como imagens)
<ol> - lista ordenada
<ol>
 <li> item 1</li>
 <li> item 2</li>
</ol>
<ul> - lista não ordenada
<ul>
 <li> item 1</li>
 <li> item 2</li>
</ul>
Tabelas
Para definir uma tabela, utlize as tags:
<table> - define uma tabela
– <tr> - define uma linha na tabela
– <td> - define uma coluna na tabela
<table>
 <tr>
 <td>Linha 1 – Coluna 1</td>
 <td>Linha 1 – Coluna 2 </td>
 </tr>
 <tr>
 <td>Linha 2 – Coluna 1</td>
 <td>Linha 2 – Coluna 2 </td>
 </tr>
</table>
15
UNIDADE Introdução HTML5 e Principais Tags de Estrutura 
Referências Absolutas
Uma referência absoluta é aquela que inclui todo o camino de um arquivo, 
incluindo o protocolo de comunicação (http, por exemplo). Essa referência é válida 
sempre que o arquivo permanecer em um mesmo diretório.
Utilizam-se referências absolutas sempre que se deseja referenciar um arquivo 
que não faz parte da página construída.
<img src=”http://www.alexandergobbato.com/img/imagem1.png”/>
Referências Relativas
Uma referência relativa é aquela que se expressa a partir de um diretório 
conhecido, dentro da mesma página.
<imgsrc=“imagem1.png”/> ou <img src=“img/imagem1.png”/>
Caso a pasta “img” esteja um nível acima da pasta que contém a raíz da página, 
utiliza-se algo como:
<img src=“../img/imagem1.png”/>
Imagens
Imagens suportadas nas páginas Web:
 · GIF/GIF animado
 · JPG 
 · PNG
Tag para Links
Utilizado para ligação das páginas
Para acessar um arquivo que está dentro de uma pasta a partir do diretório 
principal do projeto:
<a href=“imagens/pagina1.html”>
Para acessar um arquivo em outro nível a partir da pasta do arquivo atual:
<a href=“../pagina2.html”>
16
17
Para acessar outros arquivos na web:
<a href=“http://www.google.com.br/index.html”>
Nunca crie seus links com o caminho físico do arquivo, ou seja, sua localização 
real na máquina, como C:\projetoweb\index.html, pois caso você disponibilize 
esse arquivo na Web e em outros sistemas como Linux, irá resultar em “404 - Page 
not found” (Página não encontrada)
Elementos de Semântica
São elementos que têm algum significado. Existem dois tipos:
 · Elementos de Linha – são elementos que não quebram o fluxo do texto e 
que têm uma correspondência com alguns elementos de estilo e possuem 
uma apresentação especial.
 · Elementos de Bloco – são elementos que formam Blocos de Conteúdo, 
como uma div. Vejam que apesar de terem significados específico, na 
apresentação não há diferença entre uma div ou qualquer dos elementos 
deste tipo.
Elementos de Semântica – de Linha
<strong> - representa um conteúdo importante
<strong>aparece em negrito</strong>
<em> - representa um conteúdo a que se dá ênfase
<em>aparece em itálico</em>
Elementos de Semântica – de Bloco
Tratam-se de Blocos de Conteúdo, como qualquer <div>, mas eles servem para 
dizer qual é o sentido de cada Bloco.
 · <header>
 · <nav>
 · <section>
 · <article>
 · <aside>
 · <footer>
17
UNIDADE Introdução HTML5 e Principais Tags de Estrutura 
Figura 12
Importante!
IMPORTANTE: o programador pode colocar tais Blocos onde quiser!
Importante!
 
18
19
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Sites
HTML5 Differences from HTML4
https://goo.gl/Bd7rlg
HTML
https://goo.gl/4LGZl2
HTML 5.2
https://goo.gl/vTTgLp
Idiomas na Web
https://goo.gl/9eloJ8
Language Codes
https://goo.gl/DhXwUk
19
UNIDADE Introdução HTML5 e Principais Tags de Estrutura 
Referências
MAURICIO SAMY Silva. HTML 5 - A Linguagem de Marcação que revolucionou 
a WEB. São Paulo: Novatec, 2011.
ERIC FREEMAN; ELISABETH FREEMAN. Use a Cabeca! HTML COM CSS E 
XHTML. São Paulo: Alta Books, 2008.
20
Aplicações para 
Internet
Material Teórico
Responsável pelo Conteúdo:
Prof. Ms. Alexander Gobbato Paulino Albuquerque
Revisão Textual:
Profa. Ms. Fátima Furlan
Formulários e Vídeos
• Formulários
• Outros recursos do HTML5
Estudar:
 · Validação de documentos HTML5
 · O trabalho com vídeos no HTML5
 · O trabalho com áudio no HTML5
OBJETIVO DE APRENDIZADO
Formulários e Vídeos
Orientações de estudo
Para que o conteúdo desta Disciplina seja bem 
aproveitado e haja uma maior aplicabilidade na sua 
formação acadêmica e atuação profissional, siga 
algumas recomendações básicas: 
Assim:
Organize seus estudos de maneira que passem a fazer parte 
da sua rotina. Por exemplo, você poderá determinar um dia e 
horário fixos como o seu “momento do estudo”.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
alimentação saudável pode proporcionar melhor aproveitamento do estudo.
No material de cada Unidade, há leituras indicadas. Entre elas: artigos científicos, livros, vídeos e 
sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Além disso, você também 
encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão sua 
interpretação e auxiliarão no pleno entendimento dos temas abordados.
Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discussão, 
pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o contato 
com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e aprendizagem.
Organize seus estudos de maneira que passem a fazer parte 
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Determine um 
horário fixo 
para estudar.
Aproveite as 
indicações 
de Material 
Complementar.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
Não se esqueça 
de se alimentar 
e se manter 
hidratado.
Aproveite as 
Conserve seu 
material e local de 
estudos sempre 
organizados.
Procure manter 
contato com seus 
colegas e tutores 
para trocar ideias! 
Isso amplia a 
aprendizagem.
Seja original! 
Nunca plagie 
trabalhos.
UNIDADE Formulários e Vídeos
Formulários
Todos já devem pelo menos uma vez preenchido um formulário de cadastro na 
web, certo? A ideia de formulário todos conhecem, resumindo, sua principal utilidade 
é coletar os dados dos usuários e fazer algum tipo de processamento no servidor, 
porém também podemos utilizar para processar algo em JavaScript, no cliente.
Podemos criar nossos formulários através do HTML, utilizando tags para cada 
tipo de elemento de entrada de dados. No HTML5, também temos alguns atributos 
que irão facilitar a validação do formulário sem a necessidade de desenvolver scripts 
em outras linguagens, ou seja, para validar alguns dados não iremos precisar utilizar 
o JavaScript.
Como a linguagem HTML5 ainda está em desenvolvimento, alguns atributos e 
comandos de formulários não são compatíveis com todos os navegadores, por isso 
iremos utilizar somente o que for compatível com pelo menos dois navegadores 
(Google Chrome e Firefox).
Para criarmos um formulário podemos utilizar a tag <form> ou em alguns casos 
somente o elemento como um botão para disparar uma ação na nossa página.
Tag form
<form name=”form1” method=”post” action=““>
Elementos do formulário
</form>
Tag para entrada de dados pode ter diversas variações conforme exemplos abaixo:
Nome: <input type=”text” name=“nome” />
Senha: <input type=”password” name=“senha” />
E-mail: <input type=”email” name=“usermail” /> (está opção 
irá validar o campo de e-mail)
URL: <input type=”url” name=”homepage” /> (usado para 
validar urls)
<input type=”submit” value=”Enviar” /> (Para enviar o form 
para o servidor)
8
9
Exemplo1:
Figura 1
Resultado:
 
Figura 2
Campo Oculto
<input name=”oculto” type=”hidden” value=“algumacoisa”>
Checkbox (o usuário pode marcar mais de uma opção)
<input type=”checkbox” name=”carros” value=”Camaro” />Camaro <br/>
<input type=”checkbox” name=”carros” value=”Ferrari” />Ferrari 
Button para chamar Funções em Javascript
<input name=”botao” type=”button” value=”Clique aqui” onclick=“alert(‘oi’)” />
 
9
UNIDADE Formulários e Vídeos
Carregar arquivos no formulário
Escolha um arquivo
<input name=“arquivo” type=”file” />
Image para definir um botão com imagem para enviar o formulário
<input name=”imagem” type=”image” src=”images.jpg” />
Radio (neste tipo o usuário poderá marcar somente uma opção)
<input type=”radio” name=”sexo” value=”F” />Feminino <br/>
<input type=”radio” name=”sexo” value=”M” />Masculino
Exemplo2:
 
Figura 3
Resultado:
Figura 4
10
11
Sempre que desejamos que o usuário selecione mais de uma opção ao mesmo tempo, 
devemos utilizar o checkbox, agora se precisamos disponibilizar uma opção e permitir que 
somente e unicamente 1 opção seja selecionada, então utilizamos a opção rádio.
Outra nota que devemos nos atentar é que o campo com o type=”hidden” o campo não será 
visível no browser, mas ele existe no formulário.
Ex
pl
or
Tag Datalist
Define uma lista de opções para um elemento input, seria somente sugestões, o 
usuário poderá digitar valores diferentes.
<input list=”frutas” name=”fruta” />
<datalist id=”frutas”>
 <option value=”Maça”>
<option value=”Banana”>
<option value=”Morango”>
<option value=”Abacaxi”><option value=”Melancia”>
<option value=”Pera”>
<option value=”Uva”> 
</datalist>
Tag Button
Nesta tag, você poderá colocar texto ou imagens como um botão clicável. Este 
comando pode ser utilizado fora de um formulário.
<button type=”button”>
<img src=”images.jpg” width=”204” height=”204”>
</button>
Tag Select
Cria uma lista de opções (conhecido como combobox)
<form>
<select>
<option value=”Java”>Java</option>
<option value=”PHP”>PHP</option>
<option value=”JSP”>JSP</option>
<option value=”HTML”>HTML</option>
</select>
</form>
11
UNIDADE Formulários e Vídeos
Exemplo3:
Figura 5
Resultado:
Figura 6
Dicas:
A tag datalist permite que o usuário selecione umas das opções pré-definidas e 
ainda permite que o usuário possa colocar uma informação adicional.
12
13
Figura 7 Figura 8
Tag textarea
Define um campo de texto de várias linhas
<form>
<textarea rows=”8” cols=”70”></textarea>
</form>
Atributo required
Este atributo pode ser utilizado em campos para obrigar a digitação dos dados. 
A mensagem será ativada quando o usuário tentar enviar o formulário.
Pode ser utilizado em diversas tags de entrada de dados no formulário.
<input name=”nome” required=”required” />
<input type=”submit”/>
Atributo autofocos
Este atributo identifica o elemento que será dado o foco quando a página for 
carregada. Pode ser utilizado em diversos elementos de um formulário.
<form action=“x.php”>
Nome:<input type=”text” name=“nome” autofocus=”autofocus” /><br />
Idade: <input type=”text” name=“idade” /><br />
<input type=”submit” />
</form>
13
UNIDADE Formulários e Vídeos
Atributo placeholder
Atributo exclusivo de elementos input e textarea, ele define uma dica para digitação 
no campo, assim que o usuário começar a digitar, a dica é automaticamente retirada
<form action=”demo_form.asp”>
<input type=”text” name=”user” placeholder=”Digite seu 
Usuário” /><br />
<input type=”text” name=”senha” placeholder=”Digite sua 
Senha” /><br />
<input type=”submit” value=”Submit” />
</form>
Exemplo 4:
Figura 9
Resultado:
Figura 10
Dicas:
Ao abrir a página observem que o campo Usuário já está com o cursor 
posicionado no campo, isso se deve ao atributo autofocus.
14
15
Figura 11
Outro detalhe é que podemos colocar uma informação no campo texto> 
Observem os campos usuários e senha, vejam que os campos possuem um pequeno 
texto, esse texto desaparece quando o usuário começa a digitar alguma informação, 
isso se deve ao atributo placeholder.
Dica:
O campo textarea é um campo texto que permite configurarmos a quantidade 
de linhas e colunas, definindo assim um tamanho diferente do campo type=”text”.
Outro detalhe é que o atributo required só permite que as informações sejam 
enviados ao servidor se somente o campo estiver preenchido, caso contrário o 
próprio browser informa qual o campo deve ser preenchido.
Figura 12
Vamos exemplificar agora como utilizar um formulário, enviar os dados ao 
servidor e visualizar o retorno do servidor.
server client + server side
<form action=”processa.php” method=”post”>
15
UNIDADE Formulários e Vídeos
Figura 13
</form>
Observem que o atributo action está preenchido com a informação “processa.php”.
O arquivo “processa.php” é um arquivo que é executado no servidor, ou seja, ele 
captura as informações que foram preenchidas no formulário do cliente(browser).
<?php
header(‘Content-Type: text/html; charset=utf-8’);
echo “Dados recebidos do formulário!!!<br/><br/>”; 
echo “Você digitou:<br/>”;
echo “Nome: “ .$_POST[“nome”].”<br />”;
echo “Sexo: “ .$_POST[“sexo”].”<br />”;
echo “E-mail: “ .$_POST[“email”].”<br />”;
echo “Assunto: “.$_POST[“assunto”].”<br />”;
echo “Curso: “ .$_POST[“curso”].”<br />”;
echo “Mensagem: “.$_POST[“mensagem”].”<br />”;
?>
 
O resultado que será enviado ao cliente é o seguinte:
Figura 14
16
17
Áudio
Antes do surgimento do HTML5, não existia um padrão para reproduzir som no 
navegador, o que era possível somente através de plug-ins.
Na especificação HTML5, existe uma tag que se destina a incorporar um som 
ou stream (fluxo) de áudio na página sem a necessidade de plug-ins, essa tag seria 
<audio>...</audio>
Como ainda não fecharam o codec que será utilizado, devemos implementar o 
código para todos os formatos suportados de áudio, o comando ou tag para essa 
tarefa seria: <source>...</source> utilizado junto com a tag de áudio.
Tabela 1 – Compatibilidade entre os formatos e os navegadores
Navegador MP3 WAV OGG
Internet Explorer SIM SIM NÃO
Firefox SIM SIM SIM
Google Chrome SIM SIM SIM
Apple Safari SIM SIM NÃO
Tag simples
<audio src=”picapau.mp3” controls=”controls”></audio>
Para disponibilizar mais de um formato podemos utilizar a tag source dentro da 
tag áudio.
<audio controls=”controls”>
<source src=”som de derrota.ogg” type=”audio/ogg” />
<source src=”som de derrota.mp3” type=”audio/mpeg” />
<source src=”som de derrota.wav” type=”audio/vnd.wave” />
Seu navegador não aceita a tag audio
</audio>
Figura 15
Controlando o áudio com javascript
Esse exemplo é somente uma demonstração, nessa unidade ainda não abordaremos 
javascript, simplesmente para demonstrar que é possível também utilizar.
17
UNIDADE Formulários e Vídeos
<audio id=”som_controle_js”>
<source src=”som de derrota.ogg” type=”audio/ogg” />
<source src=”som de derrota.mp3” type=”audio/mpeg” />
<source src=”som de derrota.wav” type=”audio/vnd.wave” />
</audio>
<button id=”play”>Play</button> | <button id=”pause”>Pause</button>
<script>
var som = document.getElementById(‘som_controle_js’);
document.getElementById(‘play’).addEventListener(‘click’, function() { 
som.play(); }, false);
document.getElementById(‘pause’).addEventListener(‘click’, function() { 
som.pause(); }, false);
</script>
Vídeo
Antes do surgimento do HTML5, também não existia um padrão para reproduzir 
vídeo no navegador, o que era possível somente através de plug-ins.
Na especificação HTML5, existe uma tag que se destina a incorporar um vídeo 
ou stream (fluxo) de video na página sem a necessidade de plug-ins, essa tag seria 
<video>...</video>
Como também não houve um consenso sobre o formato de vídeo a ser adotado 
no HTML5, devemos implementar o código para todos os formatos suportados 
de vídeo, o comando ou tag para essa tarefa seria: <source>...</source> utilizado 
junto com a tag de vídeo.
Tabela 2 – Compatibilidade entre os formatos e os navegadores
Navegador MP3 WAV OGG
Internet Explorer SIM SIM NÃO
Firefox SIM SIM SIM
Google Chrome SIM SIM SIM
Apple Safari SIM SIM NÃO
Um arquivo de vídeo utiliza compressão e codecs, por isso as empresas não 
concordaram em adotar um único formato.
MP4 = codec de vídeo MPEG4 (H.264 para MPEG)
WebM = codec de vídeo VP8
Ogg = codec de vídeo Theora
Tag simples
<video src=”chrome.webm” controls=”controls” width=”400px”></video>
18
19
Para disponibilizar mais de um formato podemos utilizar a tag source dentro da 
tag video
<video poster=”chrome.jpg” controls width=”400px” >
<source src=”chrome.ogv” type=”video/ogg” /> 
<source src=”chrome.webm” type=”video/webm” /> 
<source src=”chrome.mp4” type=”video/mp4” /> 
Seu navegador não suporta a tag de video.
</video>
Controlando o vídeo com javascript
<video id=”video_js” width=”400px” >
<source src=”chrome.ogv” type=”video/ogg”/> 
<source src=”chrome.webm” type=”video/webm” /> 
<source src=”chrome.mp4” type=”video/mp4” /> 
Seu navegador não suporta a tag de video.
</video>
<button id=”play”>Play</button> | <button id=”pause”>Pause</button>
<script>
var video = document.getElementById(‘video_js’);
document.getElementById(‘play’).addEventListener(‘click’, function() { 
video.play(); }, false);
document.getElementById(‘pause’).addEventListener(‘click’, function() { 
video.pause(); }, false);
</script>
Outros recursos do HTML5
O HTML5 possui outros recursos avançados como o canvas, porém exigem 
programação em JavaScript, neste momento não iremos passar esses recursos, 
mas seria interessante uma breve explicação:
 · Geolocalização – APIdestinada a localizar o usuário através de GPS, 
endereço IP, redes sem fio, sinal de telefone etc.
Armazenamento de dados no cliente (Web Storage e WebSQL) 
 · Web Messaging – Permite a comunicação entre aplicações hospedadas 
em diferentes origens
· Web Socket – Permite a comunicação bidirecional entre o cliente e o servidor
· Web Workers – Permite a execução de vários scripts (código JavaScript) 
em uma mesma máquina, rodando em segundo plano ou em paralelo
19
UNIDADE Formulários e Vídeos
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Sites
WebGL - Jellyfish
https://goo.gl/ONbTY
World Population
https://goo.gl/pM5qQ
sceneJS - 3D Engine for the Web
http://scenejs.org/
BioDigital
https://goo.gl/z8G8i
20
21
Referências
Mauricio SAMY Silva. HTML 5 - A Linguagem de Marcação que revolucionou a 
WEB. São Paulo: Novatec, 2011
21
Aplicações para Internet
Material Teórico
Responsável pelo Conteúdo:
Prof. Ms. Alexander Gobbato Paulino Albuquerque
Revisão Textual:
Profa. Ms. Fátima Furlan
Aplicando Estilo à Estrutura do Documento 
• O que é Cascading Style Sheet ou Folha de Estilo em Cascata?
• Seletores CSS
• Classes e estilos individuais
• Comentários no código CSS
 · Demonstrar a utilização e aplicação de estilo a estrutura do docu-
mento html.
 · Exemplificar os elementos id e class.
 · Utilização e aplicação de css inline, incorporado e externo.
OBJETIVO DE APRENDIZADO
Aplicando Estilo à Estrutura
do Documento 
Orientações de estudo
Para que o conteúdo desta Disciplina seja bem 
aproveitado e haja uma maior aplicabilidade na sua 
formação acadêmica e atuação profissional, siga 
algumas recomendações básicas: 
Assim:
Organize seus estudos de maneira que passem a fazer parte 
da sua rotina. Por exemplo, você poderá determinar um dia e 
horário fixos como o seu “momento do estudo”.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
alimentação saudável pode proporcionar melhor aproveitamento do estudo.
No material de cada Unidade, há leituras indicadas. Entre elas: artigos científicos, livros, vídeos e 
sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Além disso, você também 
encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão sua 
interpretação e auxiliarão no pleno entendimento dos temas abordados.
Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discussão, 
pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o contato 
com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e aprendizagem.
Organize seus estudos de maneira que passem a fazer parte 
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Determine um 
horário fixo 
para estudar.
Aproveite as 
indicações 
de Material 
Complementar.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
Não se esqueça 
de se alimentar 
e se manter 
hidratado.
Aproveite as 
Conserve seu 
material e local de 
estudos sempre 
organizados.
Procure manter 
contato com seus 
colegas e tutores 
para trocar ideias! 
Isso amplia a 
aprendizagem.
Seja original! 
Nunca plagie 
trabalhos.
UNIDADE Aplicando Estilo à Estrutura do Documento 
O que é Cascading Style Sheet 
ou Folha de Estilo em Cascata?
O CSS é uma linguagem que nos permite adicionar estilos as nossas páginas, 
em outras palavras, seria a formatação visual (aparência, layout) das páginas como 
tipo de fonte, cores, espaçamentos, entre outros.
A W3C (World Wide Web Consortium) ainda não liberou a especificação 
completa do CSS3, porém existem diversos módulos que os navegadores já aceitam.
Em linhas gerais, o nível 2 do CSS contém toda a especificação do CSS 1 e 
obviamente alguns acréscimos, isso também irá se aplicar ao nível 3 do CSS que 
irá conter as especificações do CSS 2. 
Com o uso do CSS diminuímos o trabalho devido a possibilidade de reutilização 
dos estilos em diferentes tags e principalmente em diferentes páginas.
Qual a diferença entre elas?
O linguagem HTML foi originalmente criada somente para estruturar uma 
página, com o crescimento da Web, foi necessário acrescentar novas tags para 
realizar algumas formatações como por exemplo a tag FONT, porém como isso 
fugiu da especificação inicial, a W3C desenvolveu a especificação CSS 1 que 
fornecia meios para os desenvolvedores adicionarem formatação visual as páginas.
Resumindo:
 · O HTML é utilizado para estruturar as páginas, ou seja, definir parágrafos, 
listas numeradas, tabelas, cabeçalhos, etc.
 · O CSS é utilizado para formatar o visual da página (layout) estruturada 
com HTML, ou seja, adicionar a formatação de parágrafos, fontes, tabelas 
entre outros.
 · Devemos utilizar as linguagens com seus propósitos iniciais, como por exemplo, 
o HTML para estruturar o conteúdo e o CSS para formatar esse conteúdo.
 · Não se usa tabelas para criação do layout das páginas hoje, pois tabelas são 
para montar dados tabulares, em seu lugar, usamos as folhas de estilo CSS.
Como inserir o CSS?
Antes de aprendermos os diversos tipos de formatação CSS de um documento 
HTML, devemos aprender quais as três formas (básicas) possíveis de inserir um 
estilo CSS em nossas páginas.
8
9
As três formas (básicas) de inserir um CSS em uma página são:
 · CSS externo
 · CSS incorporado
 · CSS inline
CSS externo
Toda a configuração de formatação fica dentro de um arquivo .css que é chamado 
no cabeçalho do documento html com a tag link
Ex:
<link rel=”stylesheet” href=”estilo.css” type=”text/css” />
As configurações definidas no arquivo estilo.css valem para todas as páginas que 
fazem referência ao arquivo.
Exemplo simples:
Figura 1 – Arquivo Html
Figura 2 – Arquivo css
Resultado:
Figura 3
9
UNIDADE Aplicando Estilo à Estrutura do Documento 
CSS incorporado
Todas as configurações ficam dentro do cabeçalho (HEAD) da página e são 
delimitadas pelas tags <style>...</style>
As configurações valem para a página inteira.
Este tipo de CSS não permite a reutilização como o CSS externo.
Exemplo simples:
Figura 4
Resultado:
Figura 5
CSS inline
As configurações são feitas diretamente na tag, logo, a formatação é específica 
ao marcador. Para acrescentar esse tipo de CSS utilizamos o atributo style na tag.
Use este tipo de estilo com moderação pois ele mistura conteúdo com 
apresentação e não permite nenhum tipo de reuso.
10
11
Exemplo simples:
Figura 6
Resultado:
Figura 7
Prioridades
Caso você utilize as três formas de inserir CSS em um documento HTML, deve 
ficar atento a prioridade entre eles, conforme demonstrado abaixo:
1.
2.
3.
4.
HTML Menor prioridade
CSS externo
CSS incorporado
CSS inline Maior prioridade
Figura 8
Na figura acima, o CSS inline sobrepõe os demais estilos, caso este não exista, 
o CSS incorporado sobrepõe o externo e assim ocorre com as demais variações.
11
UNIDADE Aplicando Estilo à Estrutura do Documento 
Seletores CSS
Um seletor CSS é um padrão criado para ser aplicado ao elemento(s) desejado(s) 
no HTML.
Existem diversos seletores, aqui iremos abordar alguns deles como exemplos.
Iremos utilizar os seguintes seletores:
 · Para todos os elementos (seletor universal)
 · Para um elemento específico (seletor tipo)
 · Para um grupo de elementos (seletores agrupados)
 · Para um elemento específico dentro de uma sequência de elementos 
(seletor descendente)
 · Para uma ou mais classes pertencentes a um elemento (seletor classe)
 · Para classes genéricas (seletor classe)
 · Para estilos individuais (seletor id)
 · Para elemento(s) pertencentes a uma elemento pai específico (seletor filho)
Para Todos os Elementos (Seletor Universal)
Configura o estilo para todos os elementos.
Regra geral para todos os estilos
A propriedade e o seu respectivo valor são separados por : (dois pontos).
Se ovalor da propriedade tiver mais de uma palavra, devemos utilizar “” (aspas).
Quando inserimos mais de uma propriedade, temos que utilizar ; (ponto e vírgula) 
para separá-las.
Sintaxe:
* { propriedade: valor}
Explicação:
propriedade: Atributos que queremos modificar
valor: Valor da propriedade
Inserindo o * (asterisco) a frente do elemento, significa que todos os elementos 
na página irão receber essa configuração
12
13
Para configurar o estilo para todos os elementos dentro de outro.
Sintaxe:
elemento * { propriedade: valor}
Explicação:
elemento: tag de estrutura do html.
propriedade: Atributos que queremos modificar
valor: Valor da propriedade
Figura 9
Resultado:
Figura 10
Observem que todo o conteúdo da página está com o tamanho de 22pt, 
devido a configuração * { font-size:22pt; }, agora para os elementos que estiverem 
dentro da tag <p> será configurado com a cor de fonte vermelha, conforme a 
configuração p * { color:red;}.
13
UNIDADE Aplicando Estilo à Estrutura do Documento 
Para um Elemento Específico (Seletor Tipo)
Podemos definir nossos estilos para qualquer elemento do HTML.
Sintaxe:
elemento { propriedade: valor}
Exemplo:
Figura 11
Resultado:
Figura 12
Observem agora que cada tag html tem sua própria configuração, fazendo que 
seja alterado individualmente.
Um padrão que é utilizado para a criação dos estilos é inserir uma propriedade 
em cada linha para facilitar a leitura posteriormente.
14
15
Para um Grupo de Elementos (Seletores Agrupados)
Podemos definir configurações para um grupo de tags, para isso, devemos 
separá-las com , (vírgula), isso facilita a reutilização do estilo.
Sintaxe:
elemento, elemento, elemento { propriedade: valor}
Exemplo:
Figura 13
Resultado:
Figura 14
Observem que as tags <p>, <h1> e <h2> estão com a mesma configuração.
15
UNIDADE Aplicando Estilo à Estrutura do Documento 
Para um Elemento Específico Dentro de uma Sequência 
de Elementos (Seletor Descendente)
Caso necessário, é possível definir a configuração para um elemento (tag) que 
está dentro de uma certa sequência de outros elementos (hierarquia).
Sintaxe:
elemento elemento{ propriedade: valor}
div p { color:blue;}
Neste exemplo, somente a tag <p> que estiver dentro da tag <div> receberá 
essa configuração.
p b {color: red;}
Neste outro, somente a tag <b> que estiver dentro da tag <p> receberá essa 
configuração.
Dica:
Observem que separamos a sequência de tags com espaço.
Exemplo:
Figura 15
16
17
Resultado:
Figura 16
Classes e Estilos Individuais
Até o momento, definimos configurações de apresentação para elementos do 
HTML, sempre que usamos o elemento formatado em nosso documento, ele 
assume a formação definida no CSS, surge então um problema, como formatar 
um mesmo elemento de diferentes formas em nosso documento? Para resolver 
esse problema, existem as classes e os estilos individuais.
Para uma ou mais Classes Pertencentes
e um Elemento Seletor Classe)
Uma classe pode ser associada a um elemento (tag), com isso, podemos aplicar 
diferentes formatos no mesmo elemento, bastando chamar as respectivas classes. 
Neste modelo, a classe só pode ser chamada no elemento que está associada, logo 
não funcionará em outro elemento.
Para utilizar uma classe em um marcador, acrescentamos o atributo class.
Sintaxe:
elemento.nome_da_classe { propriedade: valor}
elemento: tag html
nome_da_classe: nome dado a classe
propriedade: atributo que queremos modificar
valor: valor da propriedade
17
UNIDADE Aplicando Estilo à Estrutura do Documento 
Exemplo:
 
Figura 17
Dicas:
Podemos criar mais de uma classe para o mesmo elemento, basta criar nomes 
diferentes para cada classe.
Veja que para aplicar o estilo, devemos chamar a classe com o atributo “class”.
Na tag <i> não ocorre a configuração porque o css está associado a tag <p>.
Resultado:
Figura 18
18
19
Para Classes Genéricas (Seletor Classe)
Podemos também criar classes genéricas (não estão associadas a nenhum 
elemento) que podem ser aplicadas a qualquer elemento do HTML, sempre que 
for necessário, assim, uma classe pode ser usada várias vezes em um mesmo 
documento.
Para utilizar uma classe em um marcador, acrescentamos o atributo class.
Sintaxe:
.nome_da_classe { propriedade: valor}
.(ponto): deve se iniciar com ponto.
nome_da_classe: nome dado a classe
propriedade: atributo que queremos modificar
valor: valor da propriedade
Exemplo:
Figura 19
Dica:
A classe “cor_azul” é genérica, logo, pode ser usada em qualquer tag do HTML.
A classe “cor_azul” pode ser aplicada na tag <p> e na tag <i>. Veja que para 
aplicar o estilo, devemos chamar a classe com o atributo “class”.
19
UNIDADE Aplicando Estilo à Estrutura do Documento 
Resultado:
Figura 20
Para Estilos Individuais (Seletor id)
Assim como as classes genéricas, os estilos individuais podem ser aplicados a 
qualquer elemento do HTML, a diferença é que esses estilos são únicos, logo, só 
podem ser utilizados uma única vez dentro do mesmo documento.
São utilizados também para identificar um elemento HTML para posteriormente 
ser manipulado através da linguagem JavaScript. Este estilo é a identificação da tag.
Para utilizar um estilo individual em um marcador, acrescentamos o atributo id.
Sintaxe:
#nome_do_id { propriedade: valor}
#: deve se iniciar com sustenido (#).
nome_do_id: nome dado ao identificador
propriedade: atributo que queremos modificar
valor: valor da propriedade
Exemplo:
FIgura 21
20
21
Dica:
O identificar “cor_azul” pode ser usado em qualquer tag do HTML, porém 
somente um vez.
Veja que para aplicar o estilo, devemos chamar o identificador com o atributo “id”.
Resultado:
Figura 22
Para Elemento(s) Pertencentes a um Elemento Pai Específi co 
(Seletor Filho)
É possível definir a configuração para um elemento que possui um determinado 
elemento como pai.
Sintaxe:
elemento > elemento { propriedade:valor;}
elemento: tag html
>: sinal de maior
elemento: outra tag html
propriedade: atributo que queremos modificar
valor: valor da propriedade
div>p { color:blue:}
Neste exemplo, somente a tag <p> que possuir a tag pai <div> irá receber o estilo.
p>b {color: red}
Neste outro, somente a tag <b> que possuir a tag <p> como pai irá receber 
o estilo.
21
UNIDADE Aplicando Estilo à Estrutura do Documento 
Exemplo:
Figura 23
Dica:
Separamos a sequência de tags com o sinal de >
Resultado:
Figura 24 
22
23
Comentários no Código CSS
Como geralmente os arquivos com CSS possuem muitas configurações, é 
interessante você inserir comentários descrevendo o que cada bloco de estilo faz. 
Para isso usamos /*.....*/
<style type=“text/css”>
 /*Cria um id chamado cor_azul*/
 #cor_azul { color:blue;}
</style>
Tag DIV, Tag SPAN e Tags de Estrutura Semântica
Os estilos CSS feitos até o momento, foram aplicados a tags do HTML que já 
possuem um formato padrão inicial, como por exemplo a tag <b> que deixa o 
texto em negrito. Porém, existem situações em que precisamos de tags “limpas”, 
sem formatação padrão, para estes casos, temos a disposição a tag <div> e a tag 
<span> e as tags de estrutura semântica (article, aside, nav etc.).
A tag <div> é muito utilizada na criação de layouts das páginas e áreas para 
conteúdos, já a tag <span> é utilizada para aplicar configurações dentro do 
conteúdo, isso devido ao fato de não possuir nenhum formato pré-definido. Já as 
tags de estrutura devem ser utilizadas no conteúdo para definir um significado para 
cada área do conteúdo do site.
Todas as tags aceitam o uso de classes (class) e estilos individuais (id), também 
aceitam o uso de ambos os atributos.
Cores
As cores são exibidas através da combinação RGB (vermelho, verde, azul)
Valores hexadecimais
Combinação dos valores para RGB no formato hexadecimal, o menor valor 
seria 00 e o maior seria FF (255).
 · Exemplo: #ff0000; (cor vermelha)
#f00; (também cor vermelha)
 · Caso a sequência de valores se repita como o exemplo anterior, poderemos 
utilizarsomente três dígitos, para as demais cores devemos utilizar os 6 
dígitos
 · Exemplo: #6495ED (tom de azul)
23
UNIDADE Aplicando Estilo à Estrutura do Documento 
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Sites
Curso de CSS3
https://goo.gl/xhGXul
CSS3 Selectors Test
https://goo.gl/9ITZn
CSS3 Generator
https://goo.gl/XEY5
24
25
Referências
SILVA, M. S. Construindo sites com CSS e (X)HTML: sites controlados por 
folhas de estilo em cascata. São Paulo: Novatec, 2008.
25
Aplicações para Internet
Material Teórico
Responsável pelo Conteúdo:
Prof. Ms. Alexander Gobbato Paulino Albuquerque
Revisão Textual:
Profa. Ms. Fátima FUrlan
Layouts
• Layouts
• Construindo Laytout e Mesclando Estilos
• Frameworks de Grid
• A Regra CSS para Mídia: @media
 · Web Standards;
 · Wireframe;
 · Modelagem de aplicação WEB;
 · Criação de layouts;
 · Layouts responsivos e adaptativos.
OBJETIVO DE APRENDIZADO
Layouts
Orientações de estudo
Para que o conteúdo desta Disciplina seja bem 
aproveitado e haja uma maior aplicabilidade na sua 
formação acadêmica e atuação profissional, siga 
algumas recomendações básicas: 
Assim:
Organize seus estudos de maneira que passem a fazer parte 
da sua rotina. Por exemplo, você poderá determinar um dia e 
horário fixos como o seu “momento do estudo”.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
alimentação saudável pode proporcionar melhor aproveitamento do estudo.
No material de cada Unidade, há leituras indicadas. Entre elas: artigos científicos, livros, vídeos e 
sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Além disso, você também 
encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão sua 
interpretação e auxiliarão no pleno entendimento dos temas abordados.
Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discussão, 
pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o contato 
com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e aprendizagem.
Organize seus estudos de maneira que passem a fazer parte 
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Determine um 
horário fixo 
para estudar.
Aproveite as 
indicações 
de Material 
Complementar.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
Não se esqueça 
de se alimentar 
e se manter 
hidratado.
Aproveite as 
Conserve seu 
material e local de 
estudos sempre 
organizados.
Procure manter 
contato com seus 
colegas e tutores 
para trocar ideias! 
Isso amplia a 
aprendizagem.
Seja original! 
Nunca plagie 
trabalhos.
UNIDADE Layouts
Layouts
Layout é um termo da língua inglesa que faz parte dos dicionários de língua 
portuguesa também utilizada como leiaute. O conceito pode traduzir-se como plano, 
arranjo, esquema, design, projeto e é bastante usado no âmbito das tecnologias.
Layout Líquido
Trata-se de uma organização de conteúdo que se adapta ou se molda ao tamanho 
da janela.
Veja as telas abaixo e conforme o dispositivo elas devem se comportar de forma 
diferente, apresentando o mesmo conteúdo.
Figura 1 – Janela cheia
Figura 2 – Tela Ipad
8
9
Figura 3 – Tela Iphone
Figura 4 – Tela responsiva
Layout Congelado
Trata-se de uma organização de conteúdo que permanece a mesma, mesmo que 
o tamanho da janela mude.
9
UNIDADE Layouts
Figura 5
Figura 6
Mesmo a janela aumentando o conteúdo permanence ocupando o mesmo espaço.
Flutuação – Float
A propriedade float foi criada para fazer com que os elementos flutuem à direita 
ou à esquerda de um conteúdo.
10
11
Figura 7
Construindo Laytout e Mesclando Estilos
Layout Líquido com Float
• Todos os blocos (divs) tem seu tamanho definidos com porcentagem
• Margens e “Paddings” devem ser definidos com porcentagens.
• Todos os blocos flutam para a esquerda
• O bloco que inicia uma nova linha deve ter a propriedade clear: left;
Problema:
• não é desejável que as margens, os ‘paddings’ sejam de tamanho variável e 
as bordas somem.
Código:
Figura 8
11
UNIDADE Layouts
Figura 9
Aplicando css as camadas divs:
Figura 10
Explicando:
Para cada elemento div na página será aplicada uma borda de espessura 15 
pixels, sólida e cinza e as margens estão separadas por 0,5% e espaçamento entre 
os elementos também estão separadas por 0,5%.
Figura 11 – Aplicando estilo
Explicando:
No html temos vários elementos marcados com o id a,b,c,d e e.
Para o identificador a está sendo preenchida a cor de fundo com aquamarine, 
no identificador b está sendo aplicada a cor de fundo coral, elemento deslocado e 
móvel a esquerda com do tamanho de 25%. No identificador c está sendo aplicado 
12
13
a cor de fundo darkcyan, elemento deslocado e móvel a esquerda com do tamanho 
de 44%, no identificador d a cor de fundo é darksalmon, elemento deslocado e 
móvel a esquerda e o tamanho do elemento em 25% e por último o identificador 
e com cor de fundo darkseagreen, texto centralizado e o utilizando o elemento 
clear:left, estamos criando uma nova sessão, ou seja, o próximo elemento que será 
inserido estará abaixo das divs que foram criadas.
Resultado:
Figura 12
Figura 13
Layout Parcialmente Líquido com Float
• Todos os blocos (divs) têm seu tamanho definidos em pixels, menos o blo-
co central;
• Margens, “Paddings” e bordas devem ser definidos em pixels;
• Há blocos que flutuam para a esquerda e outros para direita;
• O bloco que inicia uma nova linha deve ter a propriedade clear: both.
13
UNIDADE Layouts
Problemas:
• Os blocos à direita têm que vir antes do bloco central no HTML;
• Definir a margem do bloco central pode ser confuso.
Código:
Figura 14
Figura 15
Explicando:
Observem que nesse documento temos a seguinte disposição a, b, d, c e e.
Figura 16 – Aplicando css as camadas divs
Explicando:
Todo elemento div no documento html será configurado para ter uma borda de 
1 pixel, sólida e cinza. A margem de 5 pixel e espaçamento entre os elementos 
de 5 pixel.
14
15
Aplicando estilo:
Figura 17
Explicando:
No html temos vários elementos marcados com o id a,b,c,d e e.
Para o identificador a está sendo preenchida a cor de fundo com aquamarine, 
no identificador b está sendo aplicado a cor de fundo coral, elemento deslocado 
e móvel a esquerda com do tamanho fixo de 230 pixel e a margem de cima com 
top 0 (zero) ou seja, o elemento começará bem no topo da tela, No identificador 
c está sendo aplicada a cor de fundo darkcyan com a margem esquerda definida 
em 252 pixel e a margem direita em 252 pixel, no identificador d a cor de fundo 
é darksalmon, elemento deslocado e móvel a direita e o tamanho do elemento 
em 230 pixel fixo e a margem superior em 0 pixel e por último o identificador 
e com cor de fundo darkseagreen, texto centralizado e o utilizando o elemento 
clear:both, estamos criando uma nova sessão, ou seja, o próximo elemento o 
conteúdo permanece abaixo dos elementos flutuantes independentemente para 
que lado flutuem.
15
UNIDADE Layouts
Resultado:
Figura 18
Figura 19
Layout Congelado com Float
• Todos os blocos de layout devem estar dentro de um bloco que os contém, 
comumente chamado “wrapper” ou “container”
• Este bloco deve ter uma largura (width) determinada e ser centralizado. Para 
isso se define uma margem automática, o que faz o sistema colocar a mesma 
margem do lado direito e esquerdo: margin: 0 auto;
16
17
Problema:
• como dentro do “wrapper” se utiliza uma das duas técnicas descritas, os 
mesmos problemas aparecem aqui.
Código:
Figura 20
Figura 21
Explicando:
Observem que nesse documento temos a seguinte disposição a, b, d, c e e.
Figura 22 – Aplicando css as camadas divs
17
UNIDADE Layouts
Explicando:
Todo elemento div no documento html será configurado para ter uma borda de 
1 pixel, sólida e cinza.A margem de 5 pixel e espaçamento entre os elementos 
de 5 pixel.
Aplicando estilo:
Figura 23
Explicando:
No html temos vários elementos marcados com o id a,b,c,d e e.
Para o identificador a está sendo preenchida cor de fundo com aquamarine, 
no identificador b está sendo aplicada a cor de fundo coral, elemento deslocado 
e móvel a esquerda com do tamanho fixo de 230 pixel e a margem de cima com 
top 0 (zero) ou seja, o elemento começará bem no topo da tela, No identificador 
c está sendo aplicado a cor de fundo darkcyan com a margem esquerda definida 
em 252 pixel e a margem direita em 252 pixel, no identificador d a cor de fundo 
é darksalmon, elemento deslocado e móvel a direita e o tamanho do elemento 
em 230 pixel fixo e a margem superior em 0 pixel e por último o identificador 
e com cor de fundo darkseagreen, texto centralizado e o utilizando o elemento 
clear:both, estamos criando uma nova sessão, ou seja, o próximo elemento o 
conteúdo permanece abaixo dos elementos flutuantes independentemente para 
que lado flutuem.
18
19
Aplicando estilo:
Figura 24
Explicando:
O elemento id wrapper terá o tamanho fixo de 960 pixel e margin:auto para 
centralizar o elemento horizontalmente onde ele está contido.
Resultado:
Figura 25
Figura 26
Problemas de Layout usando Float
• Dependência da ordem dos blocos no HTML (quando se usa float: right; a 
ordem fica estranha)
• Margem e borda de tamanho variável ou de cálculo complicado
• Fica no controle do programador manter as larguras das colunas coerentes em 
linhas diferentes.
• A altura dos blocos em uma mesma linha ou devem ter tamanho fixado (o que 
pode ser ruim se o conteúdo for alterável) ou ficam de tamanhos diferentes.
19
UNIDADE Layouts
Frameworks de Grid
Framework é um conjunto de códigos (ou biblioteca) que estendem uma 
linguagem, ou seja, que ‘criam’ novos termos com novas funcionalidades.
Os Frameworks de Grid normalmente são criados em um arquivo CSS. Este 
arquivo deve ser anexado à página onde o Framework deve ser usado.
Na sua maioria, eles oferecem classes preparadas para criar o wrapper (que 
pode ser de tamanho fixo ou não) e blocos cuja largura ocupa uma certa quantidade 
de ‘colunas’ do grid.
Figura 27 – Framework 960.css
O usual é que haj am 12 ou 16 colunas
Usando o 960.gs
• Baixe o framework (http://960.gs/)
• Crie a página HTML com divs para layout dentro de uma div wrapper e 
dispostos na ordem correta, mas sem nenhuma informação de layout no CSS
• Coloque o arquivo 960.css na pasta e faça o link para ele no arquivo HTML: 
<link rel=”stylesheet” href=”960.css” />
• No wrapper, adicione a classe container_12
Em cada div, adicione uma classe de acordo com o espaço que o bloco irá 
ocupar no layout:
Figura 28
Assegure-se de em cada linha ocupar exatamente doze colunas.
20
21
Código:
Figura 29
Figura 30
Figura 31
21
UNIDADE Layouts
Figura 32
Entendendo o código:
Vamos aos pontos principais, aqui não comentaremos os estilos e sim a estrutura 
do documento para que o framework tenha o melhor proveito.
Observem que na linha 6 temos o import do framework:
<link rel=”stylesheet” href=”css/960.css” />
Na linha 38 foi criada uma “caixa organizadora” de identificador “wrapper” 
mas o importante aqui não é o nome e sim a class, observem que a class é a 
“container_12”, ou seja, estamos estruturando o documento para que recebe 
12 colunas.
Dentre dessa “caixa organizadora” temos várias outras “caixas”, essas caixas 
devem contabilizar um total de 12 grids por linha, ou seja, cada caixa receberá 
uma class chamada de “grid_x”, onde o x será representado pela quantidade de 
coluna na linha.
Com base nessas informações temos o seguinte resultado:
Figura 33
22
23
Figura 34
O resultado é o seguinte:
Figura 35 – 1 class grid_12
Figura 36 – 2 class grid_6
Figura 37 – 3 class grid_4
Figura 38 – 4 class grid_3
23
UNIDADE Layouts
Figura 39 – 1 class grid_12
Layout adaptados para Contextos específicos
Figura 40 - Mesmo HTML – Apresentações diferentes
• Acessibilidade de sites em vários tipos de telas/dispositivos.
• Devemos pensar na mobilidade (celular, tablets), além de outras telas como em 
geladeiras, máquinas de lavar, TVs etc.
• Layout responsivo
• Forte uso de CSS3, consulta de mídia, regras @media e uso de porcentagens, 
sua definição básica é para caber em todo tamanho de tela ou dispositivo.
• Layout adaptativo
• Usando um conjunto pré-definido de tamanhos de layout com base no 
tamanho da tela do dispositivo, juntamente com CSS e JavaScript.
• Layout responsivo vs adaptativo:
• Semelhança: A semelhança entre os dois é que ambos permitem que sites 
sejam visualizados em dispositivos móveis e diferentes tamanho de tela.
• Diferenças: a diferença está na criação da estrutura, o responsivo conta 
com grades flexíveis e layout fluído, e o adaptativo conta com tamanhos de 
tela pré-definidos. 
• O responsivo pode ter mais código, já o adaptativo tem uma abordagem 
mais simplificada, porém este exige scripts para auxiliar na adaptação.
Fonte: https://goo.gl/3nSYpm
24
25
A Regra CSS para Mídia: @media
É possível no CSS fazer especificações que só são consideradas em condições 
determinadas. Isso é feito envolvendo as regras de especificação pela diretiva.
@media <condição> { … }
Entre as chaves vão as regras CSS, que só serão usadas se a mídia corresponder 
à <condição> . Exemplos de <condição> são:
• only screen and (max-width: 768px) and (min-width: 481px) (tela com 
largura entre 481px e 768px);
• only screen and (max-width: 480px) (tela de largura menor ou igual a que 480px).
25
UNIDADE Layouts
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Leitura
Media Queries
https://goo.gl/QVaXya
Choco la Design
https://goo.gl/0KsqJa
Visão geral do Flexible Box Model
https://goo.gl/mvSlkC
Usando CSS flexible boxes (Caixas Flexíveis)
https://goo.gl/Pyl6Xx
26
27
Referências
Clark, R.; Murphy, C.; Studholme, O.; Manian, D. Introdução ao HTML5 e ao 
CSS3. Rio de Janeiro: Editora Alta Books, 2014.
SILVA, M. S. HTML 5: a linguagem de marcação que revolucionou a web. São 
Paulo: Novatec, 2011.
DEITEL, PAUL J.; DEITEL, HARVEY M. Ajax, Rich Internet Applications 
e Desenvolvimento Web para Programadores Pearson 776 ISBN: 
9788576051619. (e-book).
27
Aplicações 
para internet
Material Teórico
Responsável pelo Conteúdo:
Prof. Ms. Alexander Gobbato Paulino Albuquerque
Revisão Textual:
Profa. Ms. Fátima Furlan
 Introdução CMS
• Introdução
• Conceitos da arquitetura cliente/servidor
• O que é PHP?
• Servidor de Banco de Dados
• Iniciando com o WordPress
 · Demonstrar como instalar, configurar um cms.
 · Explicar o conceito de arquitetura cliente/servidor.
OBJETIVO DE APRENDIZADO
 Introdução CMS
Orientações de estudo
Para que o conteúdo desta Disciplina seja bem 
aproveitado e haja uma maior aplicabilidade na sua 
formação acadêmica e atuação profissional, siga 
algumas recomendações básicas: 
Assim:
Organize seus estudos de maneira que passem a fazer parte 
da sua rotina. Por exemplo, você poderá determinar um dia e 
horário fixos como o seu “momento do estudo”.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
alimentação saudável pode proporcionar melhor aproveitamento do estudo.
No material de cada Unidade, há leituras indicadas. Entre elas: artigos científicos, livros, vídeos e 
sites para aprofundar os conhecimentos adquiridos ao longo da Unidade. Além disso, você também 
encontrará sugestões de conteúdo extra no item Material Complementar, que ampliarão sua 
interpretação e auxiliarão no pleno entendimento dos temas abordados.
Após o contato com o conteúdo proposto, participe dos debates mediados em fóruns de discussão, 
pois irão auxiliar a verificar o quanto você absorveu de conhecimento, além de propiciar o contato 
com seus colegas e tutores, o que se apresenta como rico espaço de troca de ideias e aprendizagem.
Organize seus estudosde maneira que passem a fazer parte 
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Mantenha o foco! 
Evite se distrair com 
as redes sociais.
Determine um 
horário fixo 
para estudar.
Aproveite as 
indicações 
de Material 
Complementar.
Procure se alimentar e se hidratar quando for estudar, lembre-se de que uma 
Não se esqueça 
de se alimentar 
e se manter 
hidratado.
Aproveite as 
Conserve seu 
material e local de 
estudos sempre 
organizados.
Procure manter 
contato com seus 
colegas e tutores 
para trocar ideias! 
Isso amplia a 
aprendizagem.
Seja original! 
Nunca plagie 
trabalhos.
UNIDADE Introdução CMS
Introdução
Nesta unidade veremos que o CMS (Content Management System) é 
um termo comum na área de desenvolvimento de páginas web e, atualmente, 
também podemos ouvir o termo WCMS (Web Content Management System, em 
português: Sistema Gerenciador de Conteúdo). É uma aplicação web que fornece 
recursos para vários usuários com diferentes níveis de permissão para gerenciar 
a página web (conteúdo), sem a necessidade de ter conhecimento de HTML, 
fornecendo recursos para vários níveis de usuários com diferentes permissões 
de gerenciamento.
Gerenciamento de conteúdo refere-se à criação, edição, arquivamento, publicação, 
colaboração, dados e informações de um site.
Ex
pl
or
Quais as opções do mercado?
O Drupal é comumente descrito como um Framework de Geren-
ciamento de Conteúdo, pois além de oferecer as funcionalidades bási-
cas de um CMS ele também implementa uma série de APIs robustas e 
apresenta uma estrutura modular que facilita o desenvolvimento de 
módulos extensivos.
Redaxscript é um Gerenciador de Conteúdo de Código 
Aberto muito poderoso e repleto de recursos que irão ajudá-lo no 
desenvolvimento de sites pequenos, médios e grandes. O sistema já 
está pronto para dispositivo móveis e SEO, algo realmente muito 
importante para o sucesso de qualquer projeto.
O CMS foi desenvolvido em PHP e utiliza o MySQL como gerenciador de Banco 
de Dados, além de trabalhar com tecnologias abertas como HTML5 e CSS3.
O Joomla (pronuncia-se djumla) é uma plataforma ou CMS 
(Content Management System) que permite a criação e gestão de 
sites web dinâmicos. Criado em 2006, o Joomla! tornou-se o CMS 
em maior expansão sendo provavelmente o CMS mais procurado, 
com a maior comunidade e mais recursos disponíveis.
Pimcore é uma plataforma completa para criação de 
portais de conteúdo, lojas virtuais e plataforma de gestão de 
campanhas de marketing e gestão de engajamento de clientes 
e funcionários.
Basicamente o Pimcore é uma plataforma completa para criação de projetos 
web que conseguem alcançar qualquer tipo de público e ainda mensurar os resultados 
alcançados com campanhas de marketing direcionadas a grupos determinados.
Fonte: Divulgação
Fonte: Divulgação
Fonte: Divulgação
Fonte: Divulgação
8
9
Criado pela empresa Miro International no início de 2000 
(versão 1.0), o Mambo como originalmente era conhecido, 
sempre foi desenvolvido com o pretensão de ser um dos 
melhores CMS (Content Management Systems), gerenciadores 
de conteúdo para web e também desmistificar que grandes 
produtos não podem ser realizados sob a bandeira do FLOSS (Free/
Livre Open Source Software), inclusive não deixando nada a desejar para aplicações 
comerciais/proprietárias. Com um corpo técnico para o desenvolvimento de 
aplicações baseadas no conjunto AMP (Apache, MySQL e PHP).
WordPress é um aplicativo de sistema de 
gerenciamento de conteúdo para web, escrito em 
PHP com banco de dados MySQL, voltado 
principalmente para a criação de sites e blogs via 
web. Essa é uma das ferramentas mais famosas na criação de blogs disputando 
diretamente com o serviço do Google chamado Blogger.
OpenCart é um sistema de E-Commerce Open 
Source desenvolvido por Daniel Kerr utilizando a 
linguagem de programação PHP, sendo o sistema 
licenciado nos termos da GNU General Public License. É um sistema gratuito 
e de código aberto para criação e gestão de loja virtual, focado na facilidade de 
instalação e utilização.
Fonte: Divulgação
Fonte: Divulgação
Fonte: Divulgação
9
UNIDADE Introdução CMS
Conceitos da arquitetura cliente/servidor
Na arquitetura cliente/servidor, o computador cliente envia uma solicitação para 
o servidor através da conexão de rede, que é então processada pelo servidor que 
retorna a resposta para o cliente. A Internet também é baseada na arquitetura 
cliente/servidor em que o servidor Web serve a muitos clientes em simultâneo 
alguns serviços como acesso a sites.
Fonte: Adaptado de iStock/Getty Images
Fazemos a requisição através de um URL (Uniform Resource Locator) ou 
Localizador-Padrão de Recursos.
Request
HTTP
Network
Response
HTTP
HTML
File
PHP
File
Web
Server
MySQL
DataBase
PH
P
Client Side
1
2
3
3
4
Server Side
Fonte: Adaptado de iStock/Getty Images
10
11
O que é PHP?
O PHP (um acrônimo recursivo para PHP: (Hypertext Preprocessor) é uma 
linguagem de script open source de uso geral, muito utilizada, e especialmente 
adequada para o desenvolvimento web e que pode ser embutida dentro do HTML.
Código:
Explicação:
Observe no exemplo acima que temos um mix de html com php. O código que 
está nas linhas 8 a 10, somente pode ser interpretado pelo servidor, que nesse caso 
é o nosso servidor Apache.
O browser iria retornar somente o código html.
Servidor Apache
O  servidor Apache  (ou Servidor HTTP Apache, em  inglês:  Apache HTTP 
Server, ou simplesmente: Apache) é o servidor web livre mais utilizado do mundo. 
Foi criado em 1995 por Rob McCool, então funcionário do NCSA (National Center 
for Supercomputing Applications). Em uma pesquisa realizada em dezembro 
de 2007, foi constatado que a utilização do Apache representa cerca de 47.20% dos 
servidores ativos no mundo. Em maio de 2010, o Apache serviu aproximadamente 
54,68% de todos os sites e mais de 66% dos milhões de sites mais movimentados. 
É a principal tecnologia da Apache Software Foundation, responsável por mais 
de uma dezena de projetos envolvendo tecnologias de transmissão via web, 
processamento de dados e execução de aplicativos distribuídos.
O servidor é compatível com o protocolo HTTP versão 1.1. Suas funcionalidades 
são mantidas através de uma estrutura de módulos, permitindo inclusive que o 
usuário escreva seus próprios módulos — utilizando a API do software.
É disponibilizado em versões para os sistemas Windows, Novell Netware, OS/2 e 
diversos outros do padrão POSIX (Unix, Linux, FreeBSD, etc.).
11
UNIDADE Introdução CMS
Servidor de Banco de Dados
O MySQL é o banco de dados de código aberto mais conhecido no mundo. Com 
comprovado desempenho, confiabilidade e facilidade de uso, o MySQL tornou-se 
a principal opção de banco de dados para aplicativos baseados na Web, usado 
por propriedades da Web de alto perfil, incluindo Facebook, Twitter, YouTube. 
Além disso, é uma opção extremamente popular como banco de dados integrado, 
distribuído por milhares de ISVs e OEMs.
Ferramentas necessárias para utilizar um CMS
Dependendo do CMS escolhido você irá precisar configurar algumas ferramentas 
no servidor, no nosso caso iremos trabalhar com o WordPress, neste caso precisamos 
configurar no servidor as seguintes ferramentas/linguagens/tecnologias: 
Fonte: Divulgação
Para facilitar a instalação e configuração dessas três ferramentas, podemos 
utilizar um dos pacotes abaixo, que já instalam tudo que precisamos:
Wamp ou Xampp ou Easyphp.
Fonte: Divulgação
Iniciando com o WordPress
Para usar o WordPress, siga os passos abaixo:
1. Baixar a última versão do site https://br.wordpress.org/
2. Criar uma pasta com o nome do projeto que será desenvolvido dentro do 
servidor WAMP (ou seja, dentro da pasta WWW), para cada projeto teremos 
uma pasta que poderá ser acessa pelo URL como nos exemplos abaixo:
http://localhost:8080/projeto1
http://localhost:8080/projeto2
12
13
3. Certifique-se de iniciar o servidor Web, para isso inicie o WAMP, deverá 
aparecer