Prévia do material em texto
Introdução a Web Design
Timóteo Gomes da Silva
Curso Técnico em Informática
Educação a Distância
2021
Introdução a Web Design
Timóteo Gomes da Silva
Curso Técnico em Informática
Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa
Educação a Distância
Recife
1.ed. | Abril 2021
Catalogação e Normalização
Hugo Cavalcanti (Crb-4 2129)
Diagramação
Jailson Miranda
Coordenação Executiva
George Bento Catunda
Renata Marques de Otero
Manoel Vanderley dos Santos Neto
Coordenação Geral
Maria de Araújo Medeiros Souza
Maria de Lourdes Cordeiro Marques
Secretaria Executiva de
Educação Integral e Profissional
Escola Técnica Estadual
Professor Antônio Carlos Gomes da Costa
Gerência de Educação a distância
Professor(es) Autor(es)
Timóteo Gomes da Silva
Revisão
Flavia Vilar
Coordenação de Curso
José Américo Teixeira de Barros
Coordenação Design Educacional
Deisiane Gomes Bazante
Design Educacional
Ana Cristina do Amaral e Silva Jaeger
Helisangela Maria Andrade Ferreira
Izabela Pereira Cavalcanti
Jailson Miranda
Roberto de Freitas Morais Sobrinho
Descrição de imagens
Sunnye Rose Carlos Gomes
Sumário
Introdução .............................................................................................................................................. 4
1.Competência 01 | Conhecer os Fundamentos de Web Design e HTML 5 .......................................... 6
1.1 Internet ....................................................................................................................................................... 6
1.1.1 Breve histórico da internet ...................................................................................................................... 6
1.1.2 A estrutura da internet (como ela funciona) ........................................................................................... 7
1.1.3 Padronização da Web ............................................................................................................................ 10
1.1.4 Ide .......................................................................................................................................................... 11
1.1.5 HTML ...................................................................................................................................................... 12
1.1.6 CSS .......................................................................................................................................................... 16
1.2 Fundamentos do Web Design ................................................................................................................... 17
1.2.1 O que é Web Design?............................................................................................................................. 17
1.2.2 Planejamento e organização de um website ......................................................................................... 18
1.2.3 Front -end e Back-end (interface gráfica) .............................................................................................. 18
2.Competência 02 | Formatar um Site Usando Técnicas Avançadas em HTML5 ................................ 20
2.1 Sintaxe da HTML ....................................................................................................................................... 20
2.2 Estrutura básica de uma página HTML ..................................................................................................... 20
2.2.1 Tag <html> ............................................................................................................................................. 21
2.2.3 Tag <head> ............................................................................................................................................. 22
2.2.4 Tag <body> ............................................................................................................................................. 23
2.3 Formatação de parágrafos e blocos de texto ........................................................................................... 24
2.3.1 Tag <h1...h6> (cabeçalho) ...................................................................................................................... 24
2.3.2 Tag <p> (parágrafo)................................................................................................................................ 24
2.3.3 Quebras de linha (<br />)....................................................................................................................... 25
2.3.4 Linhas horizontais (<hr>) ....................................................................................................................... 25
2.4 Listas, Tabelas e Formulários .................................................................................................................... 26
2.4.1 Listas ...................................................................................................................................................... 27
2.4.2 Tabelas ................................................................................................................................................... 30
2.4.3 Formulários ............................................................................................................................................ 31
2.5 Imagem ..................................................................................................................................................... 34
2.6 Link e Iframe ............................................................................................................................................. 36
2.6.2 Iframe ..................................................................................................................................................... 37
2.7 Novas tags HTML 5.................................................................................................................................... 39
2.8 Layout HTML ............................................................................................................................................. 39
2.9 Nomenclatura dos arquivos HTML ........................................................................................................... 40
2.10 Exibindo uma página web ....................................................................................................................... 41
3.Competência 03 | Formatar um Site com Recursos Multimídia ...................................................... 43
3.1 Áudio ......................................................................................................................................................... 43
3.2 Vídeo ......................................................................................................................................................... 45
3.3 Reusando o YouTube ................................................................................................................................ 47
4.Competência 04 | Conhecer os Fundamentos do CSS 3 ................................................................... 51
4.1 Conceito de CSS ....................................................................................................................................... 51
4.2 Sintaxe de uma Regra CSS ........................................................................................................................ 52
4.3 Incorporando CSS em HTML ....................................................................................................................54
4.4 Propriedades CSS ..................................................................................................................................... 57
4.4.1 Propriedades de cores e background .................................................................................................... 57
4.4.2 Propriedades de texto e parágrafos ...................................................................................................... 59
4.4.3 Propriedades de fonte ........................................................................................................................... 62
4.4.4 Propriedades de efeitos de link ............................................................................................................. 64
4.4.5 Propriedades de lista ............................................................................................................................. 66
4.4.6 Propriedades de borda .......................................................................................................................... 69
5.Competência 05 | Planejar layouts com CSS 3 ................................................................................. 72
5.1 Box Model (Modelo de caixa) ................................................................................................................... 72
5.1.1 Padding .................................................................................................................................................. 73
5.1.2 Margin .................................................................................................................................................... 75
5.2 Width e Height ......................................................................................................................................... 77
5.2.1 Width ..................................................................................................................................................... 78
5.2.2 Height ..................................................................................................................................................... 79
5.3 Box-sizing .................................................................................................................................................. 81
5.4 Position .................................................................................................................................................... 84
5.5 Display ...................................................................................................................................................... 90
Conclusão ........................................................................................................................................... 101
Referências ......................................................................................................................................... 102
Minicurrículo do Professor ................................................................................................................. 103
4
Introdução
Prezado(a) estudante, gostaria de dar as boas-vindas à disciplina Introdução a Web
Design. Os assuntos que serão tratados nessa disciplina fazem parte de uma área da Informática
chamada de Desenvolvimento Web.
A área de Web Design trata da criação e do desenvolvimento de websites, interfaces
para sistemas web e páginas na internet de todo tipo, desde redes sociais e páginas de empresas
até lojas virtuais. Esse desenvolvimento pode variar desde simples páginas estáticas até aplicações
consideradas ricas de recursos. Vale ainda destacar que estamos vivendo em uma sociedade cada
vez mais conectada, quer seja pelos celulares, computadores e diversos outros dispositivos, e por
isso é essencial profissionais de Web Design no mercado.
Se você está buscando como ser um desenvolvedor web e investir nessa carreira, estará
fazendo uma ótima escolha. Essa é uma das áreas mais bem pagas para quem está apenas
começando sua carreira. Então, se o seu desejo é de construir um site ou começar sua jornada
como um desenvolvedor de sucesso, precisa começar de algum lugar. E para auxiliar esse início de
caminhada, nós vamos te ajudar a dar os primeiros passos.
Desenvolvimento Web consiste em diversos ramos de atuação, no entanto, uma coisa
em comum e que precisa fazer parte de um “arsenal” de um desenvolvedor web é justamente
conhecer o HTML e o CSS.
HTML é utilizado para representar conteúdos diversos como parágrafos de texto, títulos,
tabelas, formulários. Considerada como uma das linguagens mais simples de ser aprendida, a HTML
um excelente ponto de partida para todo desenvolvedor. Independente da sua área de atuação,
HTML faz parte da lista de coisas que todo profissional precisa saber. Já o CSS é utilizado para
customizar o material criado com o HTML. Imagine que o seu site é uma caixa de sapato contendo
um sapato dentro dela. A HTML é o sapato e os textos existentes na caixa, enquanto o CSS é o
design e o layout da referida caixa.
Com isso, nas próximas competências você aprenderá sobre:
Competência 1: conhecendo os fundamentos de Web Design e HTML5.
Competência 2: aprendendo a formatar um site usando técnicas avançadas em
HTML5.
https://pt.wikipedia.org/wiki/Internet_rica
https://pt.wikipedia.org/wiki/Internet_rica
5
Competência 3: formatando um site com recursos multimídia.
Competência 4: conhecendo os fundamentos do CSS 3.
Competência 5: planejar layouts com CSS 3.
Vamos iniciar então a nossa viagem nesse universo do desenvolvimento web?
Contamos com a sua dedicação e empenho, de forma que juntos possamos alcançar o
objetivo final, que é a construção e agregação do conhecimento na área desta disciplina.
Competência 01
6
1.Competência 01 | Conhecer os Fundamentos de Web Design e HTML 5
Caro estudante, esta competência tem por objetivo apresentar os fundamentos de Web
Design e da linguagem de marcação de hipertexto HTML (Hypertext Markup Language). Aqui você
irá aprender sobre o que é a internet e um pouco da sua história, vendo a diferença entre internet e
Web, assim como conhecer o que é Design e Web Design e também entender sobre a linguagem de
marcação de hipertextos. Verá ainda sobre IDE’s (Integrated Development Environmen), que podem
ser usadas no desenvolvimento de páginas HTML, assim como a distinção entre desenvolvimento
front-end e back-end.
Vamos então ao que interessa?
1.1 Internet
Antes de falar sobre Web ou sobre Web Design, é preciso falar de internet. E, embora
muitos utilizem os dois termos (web e internet) de forma indiscriminada, eles não são sinônimos.
Quando se fala de internet, está se referindo a uma grande rede de dispositivos computadorizados
de alcance mundial, podendos entendê-la como uma grande infraestrutura em rede. A Web (uma
derivação abreviada para a expressão World Wide Web (WWW)) é apenas uma das funcionalidades
da internet – no caso específico, navegar através do hipertexto.
Então, antes de entrar no mundo da internet, vale a pena conhecer um breve relato da
sua história.
1.1.1 Breve histórico da internet
Antes da internet se tornar como é conhecida hoje, houve um grande percurso na
evolução dos computadores e das tecnologias de telecomunicações. Assim como muitas das
descobertas da humanidade, a internet também teve forte motivação militar. Durante o período
pós-guerra (anos 60 do século 20), especialmente na Guerra Fria (EUA e Rússia), havia um grande
temor em relação a possíveis ataques nucleares. Pesquisas buscavam desenvolver uma cadeia de
comunicações onde não existisse um ponto central que, ao ser destruído, colocaria em colapso todo
o sistema de comunicações (COMER, 2007).
Competência01
7
Em 1966, o Departamento de Defesa dos EUA, por meio da ARPANET (Advanced
Research Projects Agency – Agência de Projetos e Pesquisas Avançadas), instalou, em 17 locais
diferentes, computadores conectados as linhas telefônicas que, a partir de 1969, tornaram-se uma
rede de computadores apenas para uso militar. A partir de então, as pesquisas desenvolvidas até
aquele momento, que deram origem a cadeia de comunicação distribuída, passaram a ser
chamadas de ARPANET (BONIATI, 2013). No decorrer das décadas seguintes (década de 70 e 80),
seu alcance se expandiu para universidades, ainda que, com uma capacidade muito pequena de
transmissão e troca de informações, fazendo uso de telefones analógicos.
Além dos avanços na transmissão de informações, a padronização da forma de troca de
dados foi fundamental para expandir a rede. Em 1989, o engenheiro inglês Tim Berners-Lee, do
Centro Europeu de Pesquisa Nuclear (CERN), criou um padrão para organizar informações em texto
e imagem: o formato de hipertexto (textos conectados através de links) foi responsável por manter
as informações interligadas e permitir a consulta de dados em outros documentos sobre o mesmo
assunto. É a origem do HTTP (HyperText Transfer Protocol), abreviação em inglês para “protocolo de
transferência de hipertexto”. Ainda no início da década de 1990, Berners-Lee lança a “world wide
web, ou www” – a rede mundial de computadores –, que logo se transformou no sistema pelo qual
circulam as informações organizadas em hipertexto em todo o planeta.
1.1.2 A estrutura da internet (como ela funciona)
Você precisa entender como é que escreve um endereço de um site e como
posteriormente a página correta aparece em seu navegador. O que será que acontece no meio
disso tudo? Como a internet funciona?
O acesso à internet se dá, normalmente, por meio de um ISP (Internet Service Provider
ou Provedor de Serviço de Internet) e utiliza-se de, pelo menos, três componentes (CPE, Rede de
Acesso e POP), que são descritos a seguir e ilustrados na Figura abaixo:
Saiba mais!
Acesse o site
https://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_World_Wide_Web
e aprenda um pouco mais sobre a World Wide Web.
https://pt.wikipedia.org/wiki/Hist%C3%B3ria_da_World_Wide_Web
Competência 01
8
• CPE (Customer Premises Equipment): é o equipamento que conecta o dispositivo a
rede de acesso (exemplo: modem).
• Rede de acesso: é o tipo de infraestrutura que liga o dispositivo ao provedor de
internet (exemplos: cabos de cobre, fibra ótica, Wi-Fi).
• POP (Point of Presence): é o ponto de presença do provedor onde estão os
equipamentos que atribuem ao dispositivo um endereço IP, dando-lhe acesso à
internet.
Figura 1 – A estrutura da internet
Fonte: Boniati (2013)
Descrição: Imagem que exemplifica a estrutura da internet. Do lado esquerdo da imagem está um computador
e de um CPE (Customer Premises Equipment – representado por um roteador com uma antena), onde estes
estão sendo ligados, por uma seta vermelha de direção nas duas pontas (representando fluxo nas duas
direções), a um conjunto de quatro círculos pintados (dois vermelhos, um verde e um azul) que estão
interligados, representando assim um POP (Point of Presence) e gerando a rede de IP. Em seguida o conjunto
de quatro círculos (o POP) é interligado, através de outra seta vermelha (seta nas duas pontas, representando
fluxo nas duas direções), dando-lhe acesso à internet, que é representada por globo terrestre.
Como pode ser observado na figura acima, para que um computador possa se conectar
a Internet e se comunicar com outros computadores, faz-se necessário que este receba um número
de identificação – esse número é conhecido como endereço IP (Internet Protocol). Apesar de que,
conhecer profundamente o funcionamento do protocolo HTTP não seja estritamente necessário
para um profissional de Web Design, entender como as coisas funcionam internamente ajuda a
entender uma série de técnicas e conceitos, resultando em maior qualidade na criação de páginas.
A primeira coisa que você deve levar em consideração ao conhecer o ciclo de
comunicação entre o navegador (cliente) e o servidor, é que o cliente deve conhecer a localização
da página (recurso) que ele deseja obter e exibir ao usuário final. O cliente deve ser informado de
qual o endereço do recurso necessário em determinado momento, normalmente o usuário final
Competência 01
9
provê essa informação entrando com um endereço na barra de endereços do navegador, ou
clicando em um link. Esse endereço é conhecido como URL (Universal Resource Locator) e é
composto por cinco partes básicas, conforme exemplo da Figura a seguir:
Figura 2 – Partes básicas da URL
Fonte: O autor
Descrição: Representação das cinco partes básicas que constituem uma URL (http://www.exemplodeURL.com.br), sendo
elas: protocolo (tem uma seta saindo desta expressão e apontando para a parte inicial da URL, que é o http:// e que está
sombreado com a cor roxa) , World Wide Web (o conhecido WWW, onde tem uma seta saindo desta expressão e
apontando para a segunda parte da URL, que é o www e que está sombreado com a cor verde), o nome do domínio (onde
tem uma seta saindo desta expressão e apontando para a terceira parte da URL, que é o nome do domínio, nesse caso é
exemplodeURL e que está sombreado com a cor azul), a especificação do domínio (onde tem uma seta saindo desta
expressão e apontando para a quarta parte da URL, que é o .com e que está sombreado com a cor laranja) e a localidade da
página (onde tem uma seta saindo desta expressão e apontando para a quinta parte da URL, que é o .br e que está
sombreado com a cor azul ciano).
• Protocolo: é o protocolo de comunicação a ser utilizado para a obtenção do
recurso. No exemplo acima, o protocolo requerido é o HTTP. A comunicação entre
um cliente (geralmente o navegador) e um servidor pode ser feita com o uso de
diversos protocolos, por exemplo, o FTP (File Transfer Protocol) para a transferência
de arquivos, ou o Protocolo File, de leitura direta de arquivo quando desejamos
obter um recurso acessível diretamente pelo computador sem utilizar uma conexão
com um servidor Web.
• World Wide Web (WWW): é a designação pela qual ficou conhecida a rede mundial
de computadores. É um serviço da Internet, que permite o acesso a uma vasta
quantidade de informações e dados de forma fácil.
• Nome da organização (nome de domínio): é o local na internet identificado por um
nome de domínio, constituído por uma ou mais páginas de hipertexto, que podem
Competência 01
10
conter textos, gráficos e informações em multimídia. Uma organização pode se
registrar com um nome de domínio que melhor descreva sua especificação. Esse
nome, no entanto, deve ser único.
• A especificação do domínio: a especificação do domínio trata da especificidade da
área de atuação, podendo ser, entre outras:
o COM – empresas comerciais
o GOV – órgãos do governo
o EDU – instituições educacionais
o IND – empresas industriais
o ORG – organizações sem fins lucrativos
o NET – companhias que administram redes
o MIL – órgãos militares
o INT – instituições internacionais
• Localidade da página: após a identificação do domínio há a identificação do país de
localidade da página, como por exemplo: .br (para o Brasil), .fr (para a França), .us
(para os Estados Unidos).
1.1.3 Padronização da Web
A internet é uma rede de computadores de acesso público e ilimitado que utiliza a
infraestrutura de telecomunicações e embora não exista um dono da internet, existem consórcios
internacionais, como o W3C (World Wide Web Consortium), com a tarefa de agregar empresas
filiadas na tentativa de, em conjunto, desenvolver padrões para a internet. Hoje, a W3C cuida da
reformulação do HTML em um projeto divulgado como HTML5 (você irá aprendersobre isso na
Competência 02).
Assista ao vídeo!
Assista ao vídeo https://www.youtube.com/watch?v=hBRDMaxKB8Q
e saiba pouco mais sobre a estrutura da internet e de como ela funciona.
https://www.youtube.com/watch?v=hBRDMaxKB8Q
Competência 01
11
1.1.4 Ide
Apesar de ser possível construir páginas web utilizando o Bloco de Notas (ou algum
editor de texto adequado), a utilização de um IDE (Integrated Development Environment ou
Ambiente de Desenvolvimento Integrado) economiza seu tempo de alternar entre diferentes
aplicativos e ajuda você a manter seu foco no seu código. Uma IDE geralmente inclui:
• Um editor de texto que edita o código-fonte
• Um compilador
• Um depurador (debugger)
• Um construtor de GUI (Graphical User Interface ou Interface Gráfica do Usuário)
Então, o que você deveria usar? Se sua necessidade é algo simples, uma ferramenta
para apenas escrever seu código rapidamente, é melhor escolher um editor de texto. Eles são leves
e oferecem muitos recursos convenientes como destaque de sintaxe, interfaces personalizáveis e
extensas ferramentas de navegação. Agora se a página a ser desenvolvida exige uma personalização
diferenciada, opte por uma IDE.
Segue uma lista de IDEs e editores de textos:
• Visual Studio Code (VS Code) – é um editor leve, poderoso e possui uma interface
bem pensada que funciona em seu desktop e está disponível para Windows, Mac e
Linux. Ele é ideal se você precisa de um editor leve que não usa muito espaço e
recursos.
• Atom – é um editor de texto moderno, acessível, mas ‘hackable to the core’, isso
significa que você pode personalizar tudo para fazer qualquer coisa, sem tocar a
mão nos arquivos de configurações.
• Sublime – é um editor de texto sofisticado para código, marcação e texto com
grande desempenho. Ele é útil especialmente para arquivos individuais porque ele
DICA IMPORTANTE!
Hoje em dia, os navegadores não precisam que explicitemos o protocolo HTTP
em sua barra de endereços, sendo ele o padrão para as requisições de páginas
Web
https://code.visualstudio.com/
https://atom.io/
https://www.sublimetext.com/
Competência 01
12
executa mais rápido do que o VS Code. Oferece um alto nível de personalização,
quase nunca falha e inclui plugins que tornam o desenvolvimento realmente
divertido.
• Netbeans – é uma das melhores IDE open source (código-fonte aberto) de PHP
(Hypertext Preprocessor). Ele é enriquecido com recursos e é gratuito, oferecendo
suporte em várias línguas como Inglês, Japonês, Português BR, Russo e Chinês
simplificado.
• Cloud9 – é o IDE na nuvem mais usado e mais famoso para todas as linguagens de
programação. Se você usa PHP, então o Cloud9 é ainda melhor para você porque
ele oferece depurador para inspeção de código em tempo real.
1.1.5 HTML
Até aqui foi tratado diversas vezes sobre arquivos HTML, porém o que são estes
arquivos? Lembra-se de Tim Berners-Lee? Pois é, ele buscava uma forma de organizar,
eletronicamente, os textos e as pesquisas dos cientistas do CERN (e também de outras partes do
mundo) de forma que os documentos produzidos pudessem ser interligados e compartilhados.
Partindo-se desse anseio, Tim Berners-Lee desenvolveu um software próprio e um protocolo para
recuperar hipertextos que foi denominado de HTTP (Hypertext Transfer Protocol). O formato do
texto criado para ser transportado pelo protocolo foi chamado de HTML (Hypertext Markup
Language) e consiste de uma linguagem de marcação pela qual é possível, por meio de comandos
(tags), incluir ligações entre textos – inclusive entre materiais publicados em diferentes locais.
Os documentos disponíveis na internet, independentemente da temática que abordem
(notícias, entretenimento, ciência, comercio, etc.), são estruturados através do HTML. Isso se dá
pelo fato de que a única linguagem que o navegador consegue interpretar para a exibição de
conteúdo é o HTML. Uma linguagem de marcação é um mecanismo para adicionar marcas com
algum significado a um texto. Tais marcas são omitidas na versão do texto que é apresentada ao
usuário (BONIATI, 2013). Você estudará essas marcas na competência 2.
Certamente, com um exemplo, ficará mais simples de entender e apresentar os
conceitos subsequentes. Para iniciar a exploração do HTML, imagine o seguinte caso: Comece
https://netbeans.org/downloads/index.html
https://c9.io/
Competência 01
13
criando uma pasta com o nome de seu projeto em um lugar fácil (pode ser na área de trabalho).
Depois abra um editor de texto não formatado (como Bloco de Notas, por exemplo) e digite o texto
ilustrado na Figura abaixo. Em seguida, salve o arquivo dentro desta pasta do seu projeto com o
nome “exemplo.html”.
Figura 3 – Texto para página web transcrito no Bloco de Notas
Fonte: O autor
Descrição: Representação do Bloco de Notas do Windows, onde existe o texto “Minha Página” na parte superior
esquerda. Na parte central do Bloco há outro texto, que é “Essa é a minha primeira página web”.
ATENÇÃO: Caso você esteja utilizando o Bloco de Notas do Windows, ao clicar em
“salvar como”, modifique o tipo de arquivo para a extensão.html, conforme exemplo da Figura
abaixo.
Figura 4 – Imagem da tela de “salvar como”
Fonte: O autor
Descrição: Demonstração da tela Salvar Como do Windows após ser selecionado o comando de salvar como no Bloco de
Notas. O arquivo está sendo salvo na pasta Projeto Web Design, tendo como nome “exemplo” e com a extensão .html
Competência 01
14
Após salvar, você poderá verificar na pasta com o nome do seu projeto que o arquivo
“exemplo.html” estará salvo e com um símbolo do browser padrão ao lado do nome do arquivo,
conforme a Figura abaixo.
Figura 5 – Imagem da tela do Windows após salvar o arquivo exemplo com formato HTML
Fonte: O autor
Descrição: Demonstração da tela da pasta Projeto Web Design após salvar o arquivo exemplo no formato html. Na
pasta onde foi salvo o artigo, o mesmo aparece com um símbolo do browser padrão ao lado do nome do arquivo.
Agora, ao clicar no arquivo “exemplo.html”, se aberto por um navegador (browser),
apresentará o resultado conforme pode ser visualizado na Figura abaixo.
Competência 01
15
Figura 6 – Imagem da tela do browser ao abrir o arquivo exemplo com formato HTML
Fonte: O autor
Descrição: Demonstração da tela do browser após abrir o arquivo denominado exemplo.html. É exibida na parte
superior da página web, numa única linha, a mensagem Minha página Essa é a minha primeira página web.
Parece que você obteve um resultado um pouco diferente do esperado, não? Apesar de
ser capaz de exibir texto puro em sua área principal, algumas regras devem ser seguidas caso
desejemos que esse texto seja exibido com alguma formatação, para facilitar a leitura pelo usuário
final.
Agora, copie o código do Quadro abaixo (representa a estrutura básica de uma página
HTML). Não se preocupe em entender as tags agora, pois serão explicadas nas próximas
competências cada uma delas. Tenha cuidado de copiar exatamente igual a como está descrito no
Quadro. Caso erre alguma letra, a apresentação pode não aparecer do mesmo jeito. Salve o arquivo
na mesma pasta que você criou para o seu projeto, agora com o nome index.html.
<!DOCTYPE html>
<html>
<head>
<title>Minha Página</title>
<meta name="author" conten="Timóteo Gomes"/>
</head>
<body bgcolor="yellow">
Essa é a minha primeira página web.
</body>
</html>
Quadro 01 – Estrutura básica de uma página HTML
Fonte: O autor
Descrição: Código-fonte na linguagem HTML e demonstra a estrutura básica de uma página HTML. O código apresenta
as tags <head>, <title> e <body>, contendo o texto Minha Página na tag <title> e Essa é a minha primeira página web na
tag <body>. Todo o conteúdo do código está inserido entreas tags de abertura <html> e de fechamento </html>.
Agora, ao clicar no arquivo “index.html”, se aberto por um navegador (browser),
apresentará o resultado conforme pode ser visualizado na Figura abaixo. E caso você observe, verá
que a página agora possui um título “Minha Página”, assim como recebeu a cor amarela como cor
de fundo de tela.
Competência 01
16
Figura 7 – Imagem da tela do browser ao abrir o arquivo index com formato HTML
Fonte: O autor
Descrição: Demonstração da tela do browser após abrir o arquivo index.html. Na barra de título da página web é
exibida a mensagem Minha Página. Já na página web em si, é exibida a mensagem “Essa é a minha primeira página
web” na parte superior da página, que possui um fundo de tela em amarelo.
A especificação atual da linguagem HTML é a versão 5 e é padronizada pelo consorcio
W3C (World Wide Web Consortium), como foi visto no subtópico 1.1.4. Vale ainda destacar que a
linguagem HTML serve para descrever a estrutura e as informações da página, independentemente
da sua apresentação. Quando se deseja trabalhar o estilo (layout), é necessário (correto,
profissional) utilizar outra linguagem, a CSS.
1.1.6 CSS
À medida que é preciso organizar layouts de forma mais elaborada, o HTML não oferece
as ferramentas adequadas e você acaba por inventar alguma “improvisação” para alcançar os
objetivos. Folhas de estilo em cascata ou CSS (Cascading Style Sheet) é um mecanismo com a função
de adicionar estilos (fontes, cores, espaçamentos, bordas, sombras, etc.) aos elementos de
documentos codificados em HTML.
A CSS tem por finalidade devolver ao HTML o propósito inicial da linguagem, ou seja, a
marcação e a estruturação de conteúdo. Segundo os idealizadores do HTML, não cabe a este
fornecer informações ao navegador sobre a apresentação dos elementos – cores de fontes,
tamanhos de textos, posicionamento e todo o aspecto visual de um documento não devem ser
Competência 01
17
funções do HTML. Todas as funções de apresentação cabem a CSS, sendo esta a sua finalidade
maior. Na competência 4 você vai estuar com maior profundidade sobre CSS.
1.2 Fundamentos do Web Design
Uma vez que já entendeu o que é a internet e como ela funciona, você verá agora
sobre os fundamentos do Web Design. Será conceituado o que é Web Design e sobre planejamento
e organização de um website. Em seguida você aprenderá a distinção dos desenvolvimentos Front-
end e Back-end.
1.2.1 O que é Web Design?
Antes de conceituar Web Design, primeiro é preciso falar do que é Design. De acordo
com WILLIANS (1975, apud SCHÜTZ, 2013, p. 15), o design pode ser denominado como qualquer
processo criativo que se utiliza as mais variadas técnicas para conceber algum artefato através da
elaboração e concepção de um projeto. Como área, o design é multidisciplinar e trata, em outras
palavras, de escolher a melhor forma de apresentar uma ideia. Com isso, é importante que se
desassocie, inicialmente, o design à produção de imagens ou manipulação de um software
específico.
Com o advento da web, se abriu espaço para uma nova forma de planejamento de
transmissão de ideias/objetivos em materiais publicados em ambientes on-line: web design. De
acordo com ZELDMAN (2007, apud DE VILA e FREIRE, 2019, p.72), “Web Design é a criação de
ambientes digitais que facilitam e incentivam a atividade humana, reflete ou adapta-se a vontades
individuais e conteúdos; e muda graciosamente ao longo do tempo enquanto mantém a sua
identidade”.
Pode-se concluir, portanto, que o Web Design pode ser visto como uma extensão da
prática do design, onde o foco do projeto é a criação de sites e documentos a serem
disponibilizados na World Wide Web.
Competência 01
18
Tais técnicas consistem da estruturação adequada de informações, utilizando recursos
apropriados para veiculação em páginas web, de maneira que o usuário possa alcançar seu objetivo
de forma direta e agradável.
1.2.2 Planejamento e organização de um website
Antes de começar a criar um site, é preciso planejar sua estrutura (página principal e
páginas adjacentes), definindo de forma clara e coerente a sequência das informações que se
deseja apresentar. Isto evidencia a necessidade de planejamento antes de qualquer ação.
Na produção de um website deve-se elaborar um projeto coerente, que forneça
soluções eficientes e eficazes, levando em consideração aspectos como usabilidade, desempenho e
comunicação. Além disso, o projeto deve ser focado nas necessidades do público alvo. Uma vez que
os objetivos estão claros, o passo seguinte é criar e organizar o conteúdo. A definição do conteúdo
a ser apresentado é determinada por dois fatores muito importantes e diretamente relacionados: a
criação (concepção) e o design das informações.
Logo, a criação de um website não é apenas um trabalho criativo, mas também de
planejamento e de pesquisa. Produzir um website inevitavelmente exige: pensar, planejar e
executar.
1.2.3 Front -end e Back-end (interface gráfica)
Front-end e back-end são termos populares quando se trata de desenvolvimento e
programação de website. Logo, saber o que é front-end e back-end é fundamental para quem quer
aprender mais sobre a criação de sites.
Para isso, é preciso saber que quando se trata da criação de websites, têm-se os que são
chamados de estáticos e os que são chamados de dinâmicos. Os sites estáticos são assim chamados,
pois: o conteúdo só poderá ser introduzido/alterado/excluído manualmente no código do site, não
possui sistema de gerenciamento de conteúdo e é interpretado somente na máquina do usuário. É
aquele tipo de site que não importa quantas vezes o acessemos, sempre virá o mesmo conteúdo (a
não ser que altere o código fonte - um blog é um tipo de site estático).
Já os sites dinâmicos, são assim chamados, pois: o conteúdo é introduzido/ alterado/
excluído automaticamente através de scripts no servidor (através de linguagens como PHP, Python,
Competência 01
19
Ruby, Java, entre outros), além de possuírem sistema de gerenciamento de conteúdo e são pré-
processados no servidor e posteriormente interpretados na máquina do usuário.
Pois bem, o foco dessa disciplina será a criação de páginas de conteúdo estático, e a isso
classificamos como desenvolvimento front-end. Portanto, o desenvolvimento front-end é voltado
para as interfaces, para Aplicações Web e Sites. Quando temos que desenvolver uma aplicação que
construirá as páginas de forma dinâmica, temos então o desenvolvimento back-end.
Nosso próximo passo é seguir para competência 2.
Vamos lá?
Agora, acesse o AVA e responda as questões da competência 1.
Ficou com alguma dúvida na competência 1? Para saná-las com os professores e
discutir com seus colegas sobre os assuntos estudados, acesse o Fórum da
Competência 1.
Competência 02
20
2.Competência 02 | Formatar um Site Usando Técnicas Avançadas em
HTML5
Caro(a) estudante, esta competência tem por objetivo apresentar a sintaxe da HTML e o
seu uso na estrutura de uma página HTML, de forma a ser considerada válida a referida página. Aqui
você irá aprender sobre a formatação de parágrafos e textos, tratando sobre a organização destes
dentro do documento HTML, assim como será explorado o uso de listas, a inserções de tabelas,
formulários e imagens. Também será estudado sobre como é possível interligar páginas, como
nomear arquivos HTML e por fim como exibir uma página web.
Vamos então ao que interessa?
2.1 Sintaxe da HTML
A HTML é um conjunto de tags responsáveis pela marcação do conteúdo de uma página
no navegador. As tags são os elementos que você escreve usando uma sintaxe padrão. Uma tag é
definida com os caracteres “< >”, e o nome da tag, formando a sintaxe padrão “<nome da tag>”
(ex.: <tiltle>). Muitas tags possuem conteúdo,como o texto do título, que nesse caso deve vir entre
aspas, como no exemplo do título "Minha Página" da Figura 7 (subtópico 1.1.5). No caso da maioria
das tags, é necessário determinar onde o conteúdo acaba, e para isso, foi usada uma tag de
fechamento com a barra antes do nome: </title>.
Diversas tags são disponibilizadas pela linguagem HTML e cada uma possui uma
funcionalidade específica, o que será visto mais adiante.
2.2 Estrutura básica de uma página HTML
Para que um documento HTML seja considerado válido precisa seguir obrigatoriamente
a estrutura composta pelas tags <html> , <head> e <body>. Além dessas tags, existe a instrução
<!DOCTYPE html>, que não é uma tag HTML, mas uma instrução especial. Ela indica para o
navegador, qual versão do HTML deve ser utilizada para renderizar a página. Com isso, será visto a
partir de agora cada uma dessas tags e também a instrução DOCTYPE.
Competência 02
21
2.2.1 Tag <html>
Como foi visto no tópico anterior, o DOCTYPE não é uma tag HTML, mas uma instrução
especial. Ela indica para o navegador qual versão do HTML deve ser utilizada para renderizar a
página. Nessa disciplina será utilizada a descrição <!DOCTYPE html>. Só relembrando que essa
instrução indica para o navegador a utilização da versão mais recente do HTML - a versão 5
atualmente. A instrução pode ser escrita de três formas, sendo elas:
• <!DOCTYPE html>
• <!DOCTYPE Html>
• <!DOCTYPE HTML>
Na estrutura de um documento HTML, antes de tudo, deve-se inserir uma tag <html>.
Dentro dessa tag, é necessário declarar outras duas tags: <head> e <body>. Com isso, a composição
da tag <html> é a descrita no Quadro abaixo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Quadro 02 – Demonstração da tag <html>
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que demonstra o posicionamento da tag <html> na construção do referido
código. O código apresenta as tags <head> e <body> dentro da tag <html>. Todo o conteúdo do código está inserido
entre as tags de abertura <html> e de fechamento </html>.
Saiba mais!
O que é renderizar? Acesse a o link e saiba mais sobre renderização de página
web:
https://blog.taller.net.br/entendendo-processo-renderizacao-pagina-web/
https://blog.taller.net.br/entendendo-processo-renderizacao-pagina-web/
Competência 02
22
Observe que a tag <html> delimita o início e fim do documento HTML (ela é a primeira
tag a ser aberta e a última a ser fechada). Observe também que as tags podem se apresentar de
forma hierárquica, ou seja, umas dentro das outras. Este é o caso das tags <head> e <body>. Essas
duas tags são consideradas "irmãs", pois estão no mesmo nível hierárquico em relação à sua tag
"pai", que é <html>.
2.2.3 Tag <head>
A tag <head> contém informações sobre o documento HTML que não serão exibidas na
área do documento no navegador, ou seja, esta seção de cabeçalho não produz informações visuais
e é utilizada como uma seção de configuração, na qual é possível indicar comandos que devem ser
lidos antes de se carregar o conteúdo que será apresentado. Como exemplo pode-se destacar
informações como o título da página e também metadados, tais como: o autor da página, descrição,
palavras-chave, idioma, entre outros, todos eles contidos dentro da tag <head>. No Quadro abaixo
é possível encontrar uma descrição da composição da referida tag:
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
Quadro 03 – Demonstração das tag <head> (seção de cabeçalho)
DICA IMPORTANTE!
Sempre adicione a declaração <!DOCTYPE> aos seus documentos HTML, para
que o navegador saiba que tipo de documento esperar.
Competência 02
23
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento da tag <head> (seção de cabeçalho) na
construção do referido código HTML. O código apresenta a tag <title> dentro da tag <head>. Todo o conteúdo do
código está inserido entre as tags de abertura <html> e de fechamento </html>.
A especificação da tag <title> dentro da tag <head>, conforme descrita acima, permitirá
especificar o título do documento, que normalmente será exibido na barra de título da janela do
navegador ou na aba do documento.
2.2.4 Tag <body>
Após a seção de cabeçalho, inicia-se, obrigatoriamente, o corpo do documento HTML,
que é definido pela tag <body>. O corpo da página define a área que será apresentada em sua
janela. É a partir da tag <body> que o documento HTML será estruturado. É necessário que a tag
<body> tenha ao menos um elemento "filho", ou seja, uma ou mais tags HTML dentro dele. Na
estrutura básica da tag <body> descrita abaixo foi incluída a tag <p>, que é utilizada para o
estabelecimento de parágrafos (será mais bem apresentada na seção 2.3.2). Além de tags textuais,
a tag <body> permite a inclusão de alguns atributos, por exemplo, alterar a cor de fundo (bgcolor)
ou, então, utilizar uma imagem de fundo (background), o que será visto mais à frente. No Quadro
abaixo você encontrará uma descrição da composição das referidas tags:
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<p> </p>
</body>
</html>
Quadro 04 – Demonstração das tag <body> (corpo)
Fonte: O autor
Competência 02
24
Descrição: Código-fonte na linguagem HTML que representa o posicionamento da tag <body> (corpo) na construção do
referido código HTML. O código apresenta a tag <p> dentro da tag <body>. Todo o conteúdo do código está inserido
entre as tags de abertura <html> e de fechamento </html>.
2.3 Formatação de parágrafos e blocos de texto
Uma vez que já entendeu a estrutura básica de um documento HTML, é possível
explorar alguns recursos ligados à organização de parágrafos e de blocos de texto. Lembre que o
objetivo da linguagem HTML é permitir a estruturação de conteúdo. Nos subtópicos seguintes serão
apresentadas as tags relacionadas a cabeçalhos, parágrafos, quebra de linhas e linhas horizontais.
2.3.1 Tag <h1...h6> (cabeçalho)
As tags de heading <hn> (cabeçalho) são tags de conteúdo e vão de <h1> a <h6>,
seguindo a ordem de importância, sendo <h1> o título principal (o mais importante) e <h6> o título
de menor importância. Elas são utilizadas para demarcar uma área do documento que indica um
título ou subtítulo. Por exemplo, a tag <h1> para o nome, título principal da página, e a tag <h2>
como subtítulo de seções dentro do documento.
Opcionalmente, pode-se utilizar o parâmetro align para indicar o alinhamento do
cabeçalho: right (a direita), left (a esquerda) ou center (centralizado).
2.3.2 Tag <p> (parágrafo)
Quando é exibido qualquer texto em sua página, é recomendado que ele seja sempre
conteúdo de alguma tag filha da tag <body>. Para isso é utilizada a tag <p>, que demarca um
parágrafo textual. Associado a tag <p>, existe um parâmetro denominado de align o qual informa o
alinhamento do texto, podendo este ser centralizado (center), justificado (justify), alinhado à
esquerda (left) ou alinhado à direita (right).
Saiba mais!
Para conhecer mais sobre os atributos em HTML, acesse:
https://www.w3schools.com/tags/ref_attributes.asp
Competência 02
25
Vale a pena ainda destacar as tags utilizadas como marcadores de ênfase, que servem
para enfatizar um trecho de texto. É possível deixar um texto "mais forte" (em negrito) com a tag
<strong> ou deixar o texto com uma "ênfase acentuada" com a tag <em> (em itálico). Também há a
tag <small>, que diminui o tamanho do texto.
2.3.3 Quebras de linha (<br />)
Para produzir o efeito de quebra de uma linha, deve-se utilizar a tag <br /> (break). Esta
tag possui uma particularidade, que é o fato de não precisar de outratag para fechá-la, bastando,
para isto, indicar, na própria instrução de abertura, o sinal de “/” para fechá-la automaticamente.
2.3.4 Linhas horizontais (<hr>)
O uso da tag <hr> (head row) tem como efeito a produção de uma linha que divide a
página horizontalmente. Seu objetivo é produzir seções de divisão ao longo do conteúdo.
A Figura abaixo ilustra o efeito do emprego das tags relacionadas a títulos, cabeçalhos,
parágrafos, quebra de linhas e linhas horizontais, cujo código está transcrito no Quadro abaixo:
<!DOCTYPE html>
<html>
<head>
<title>Minha Página</title>
</head>
<body>
<h1> A minha primeira página HTML</h1>
<hr>
<h2> A criação de parágrafo</h2>
<p> Meu primeiro parágrafo <br /> <strong> está representando uma quebra de
linha </strong> </p>
</body>
DICA IMPORTANTE!
A utilização da tag <p> de forma vazia, como <p> </p>, produz uma quebra de
linha. Todavia, existe uma tag especial para esse propósito, conforme veremos a
seguir.
Competência 02
26
</html>
Quadro 05 – Demonstração das tags <title>, <h>, <p>, <br> e <hr>
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags <title> (título), <h> (cabeçalho),
<p> (parágrafo), <br> (quebra de linha) e <hr> (linha horizontal). O código apresenta a tag <title>, contendo dentro dela
o texto Minha Página e as tags <h1> (onde está o texto A minha primeira página HTML), <hr>, <h2> (onde está o texto
A criação de parágrafo) e a tag <p> (onde está o texto Meu primeiro parágrafo e a tag <br/> logo em seguida, vindo
depois o texto “está representando uma quebra de linha”). Todo o conteúdo do código está inserido entre as tags de
abertura <html> e de fechamento </html>.
Figura 8 – resultado do emprego das tags de títulos, cabeçalhos, parágrafos, quebra de linhas e linhas horizontais
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tags de títulos,
cabeçalhos, parágrafos, quebra de linhas e linhas horizontais. Na barra de título da página web é exibida a mensagem
Minha Página. Já na página web em si, é exibida a mensagem “A minha primeira página HTML” na parte superior da
página. Em seguida existe uma linha horizontal que corta toda a página e abaixo dela há a frase A criação de parágrafo.
Logo abaixo é demonstrada a quebra de linha, tendo a frase Meu primeiro parágrafo (numa linha) está representando
uma quebra de linha (na linha abaixo da anterior).
2.4 Listas, Tabelas e Formulários
Nos subtópicos seguintes serão apresentadas as tags relacionadas a Listas, Tabelas e
Formulários. Será visto os tipos de listas e a sua utilidade, como inserir uma tabela e o seu uso na
tabulação de dados e não menos importante será abordado sobre formulários HTML, que são um
dos principais pontos de interação entre um usuário e um web site.
Competência 02
27
2.4.1 Listas
Não são raros os casos em que é necessário exibir uma listagem em nossas páginas. O
HTML tem algumas tags definidas para que seja possível fazer isso de maneira correta. A utilização
desse tipo de recurso é bastante simples e consiste, inicialmente, em definir que tipo de lista se
deseja utilizar, sendo duas as opções mais utilizadas: listas com marcadores (listas não ordenadas) e
listas numeradas (listas ordenadas). Veja a seguir cada uma delas e as tags necessárias para
representa-las.
• Lista com marcadores (não ordenadas): Uma lista com marcadores é definida
utilizando-se a tag <ul> (undefinded list), sendo que, entre as marcas de abertura e
fechamento, utilizar a tag <li> (list) para indicar os itens da lista. No Quadro abaixo,
segue exemplo de código uma lista com marcadores e o seu resultado demonstrado
na Figura a seguir:
<!DOCTYPE html>
<html>
<head>
<title> Página de lista com marcadores </title>
</head>
<body>
<h1> Itens da lista </h1>
<ul>
<li>Primeiro item da lista </li>
<li>Segundo item da lista </li>
</ul>
</body>
</html>
Quadro 06 – Demonstração da tag <ul> (lista com marcadores)
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento o posicionamento da tag <li> (lista com
marcadores). O código apresenta a tag <title>, contendo dentro dela o texto Página com lista de marcadores e as tags
<h1> (onde está o texto Itens da lista), <ul> e dentro dela duas tags <li> (onde está escrito na primeiro o texto Primeiro
Competência 02
28
item da lista e na outra está escrito Segundo item da lista). Todo o conteúdo do código está inserido entre as tags de
abertura <html> e de fechamento </html>.
Figura 9 – resultado do emprego da tag <li> (lista com marcadores)
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego da tag <li> (tag de
lista com marcadores). Na barra de título da página web é exibida a mensagem Página de lista com marcadores. Já na
página web em si, é exibida a mensagem “itens da lista” na parte superior da página. Em seguida é possível visualizar
dois marcadores, sendo o primeiro contendo o texto Primeiro item da lista e o outro abaixo com a descrição Segundo
item da lista.
• Lista numeradas (ordenadas): A diferença básica de uma lista numerada para uma
lista com marcadores é utilização da tag <ol> (ordinate list). No caso de listas
numeradas, o atributo type pode receber os seguintes valores: “1”, “I” ou “i” e “A”
ou “a”. No Quadro abaixo segue exemplo de código de uma lista numerada e o seu
resultado demonstrado na Figura a seguir:
Saiba mais!
Opcionalmente, pode-se utilizar na tag <ul>, o atributo type de forma que
seja alterado o tipo de símbolo (marcador) utilizado. Alguns valores aceitos
para o atributo type são: circle (círculo vazio), disc (círculo preenchido) e square
(retângulo). Ex.: <ul type=”circle”>
Competência 02
29
<!DOCTYPE html>
<html>
<head>
<title> Página de lista numerada </title>
</head>
<body>
<h1> Pesquisa </h1>
<ol type=”1”>
<li>Você possui filhos? </li>
<ul>
<li>Sim </li>
<li>Não </li>
</ul>
</body>
</html>
Quadro 07 – Demonstração da tag <ol> (lista numerada)
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento o posicionamento da tag <ol> (lista
numerada). O código apresenta a tag <title>, contendo dentro dela o texto Página com lista de numerada e as tags
<h1> (onde está o texto Pesquisa), <ol> (com o atributo type sendo definido com o numeral 1) e dentro dela uma tag
<li> (onde está escrito o texto Você possui filhos?). Logo em seguida, ainda dentro da tag <ol>, há a tag <ul> e dentro
dessa tag há duas tags <li>. Na primeira há o texto Sim e na segunda o texto Não. Todo o conteúdo do código está
inserido entre as tags de abertura <html> e de fechamento </html>.
Figura 10 – resultado do emprego da tag <ol> (lista numerada)
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego da tag <ol> (tag de
lista numerada). Na barra de título da página web é exibida a mensagem Página de lista numerada. Já na página web em
Competência 02
30
si, é exibida a mensagem “Pesquisa” na parte superior da página. Em seguida existe uma lista numerada com o numeral
1, tendo logo após o numeral o texto “Você possui filhos?’. Abaixo dessa pergunta existe uma lista de resposta, sendo
as opções Sim e Não.
2.4.2 Tabelas
O uso de tabelas era muito comum há alguns anos para diversas aplicações em html, no
entanto, pela complexidade da marcação e dificuldade de manutenção das páginas, assim como o
surgimento do CSS, as mesmas são recomendadas quando precisa-se tabular dados na forma de
uma grade. A tag que demarca o início de uma tabela é <table>. Também pode utilizar a tag
<caption> para definir um título ou descrição databela. O passo seguinte é definir as linhas contidas
na tabela, usando para tal a tag <tr> (table row). Para o conteúdo de cada célula da tabela,
emprega-se a tag <td> (table data). Você ainda pode fazer com que as células superiores da tabela
sejam o cabeçalho das colunas com a tag <th>. Para exemplificar, segue no Quadro abaixo o código
que resulta na página exibida na Figura a seguir.
<!DOCTYPE html>
<html>
<head>
<title> Exemplo de Tabela </title>
</head>
<body>
<table border=”2”>
<tr>
<th>Disciplina</th>
<th>Professor</th>
</tr>
<tr>
<td>Banco de Dados</td>
<td>Fulano de tal</td>
</tr>
<tr>
<td>Introdução a Web Design</td>
<td>Beltrano</td>
</tr>
</table>
Competência 02
31
</body>
</html>
Quadro 08 – Demonstração da tag <tablel> (tabela) e suas derivações
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags table (tabela), tr (linha da
tabela), td (célula da tabela) e th (cabeçalho da tabela). O código apresenta a tag <title>, contendo dentro dela o texto
Exemplo de tabela e as tags <table> (sendo definida uma borda com valor 2), duas colunas com a tag <th> e três linhas
(usando a tag <tr>), onde a descrição das colunas são Disciplina e Professor. Em seguida são inseridas quatro células
com a tag <td> (duas em cada coluna), contendo os nomes Banco de Dados e Introdução a Web Design na coluna da
disciplina e Fulano de tal e Beltrano na coluna do professor. Todo o conteúdo do código está inserido entre as tags de
abertura <html> e de fechamento </html>.
Figura 11 – resultado do emprego ds tag <table> (tabela) e suas derivações
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tags table
(tabela), tr (linha da tabela), td (célula da tabela) e th (cabeçalho da tabela). Na barra de título da página web é exibida a
mensagem Exemplo de Tabela. Já na página web em si, é exibida a mensagem “Disciplina x Professor” na parte superior
da página. Em seguida existe uma tabela com duas colunas e três linhas e conteúdo dentro das células.
2.4.3 Formulários
No desenvolvimento de aplicações para a internet, surge a necessidade de permitir, por
meio de alguns elementos, a interação. Os formulários HTML são um dos principais pontos de
interação entre um usuário e um web site. A interação consiste em apresentar algo ao usuário, por
exemplo, uma pergunta, e permitir que o mesmo se manifeste, quer seja respondendo, quer seja
buscando. Em resumo, os formulários permitem que os usuários enviem dados para o web site.
Competência 02
32
Na maior parte do tempo, os dados são enviados para o servidor da web, mas a página da web
também pode utilizá-los por conta própria.
Em HTML, a tag <form> foi criada para capturar os dados do usuário e submetê-lo a
algum serviço da Internet. Na tag <form>, três atributos são utilizados:
• action (ação): indica para o formulário, qual é a aplicação web para onde os dados
serão submetidos.
• name (nome): serve para nomear o formulário.
• method (método): informa para o browser ,de que forma os dados coletados pelo
formulário serão enviados para a aplicação definida no atributo action.
Como filho da tag <form>, pode-se usar as tags <input> e <button>, dentre várias
outras, além da tag <div>, que serve para alterar o estilo em partes específicas da página e
posicionar objetos. Os dados são passados para o <form> por meio da tag <input>, que recebe os
dados digitados. É por meio do atributo type que é definida a finalidade desse input. Em nosso caso,
será utilizado o tipo text e email para capturar os dados digitados. Esses dados são enviados pela
tag <button>, do tipo submit. O button é um botão “clicável” que submete as informações do
formulário. Para exemplificar, segue no Quadro abaixo o código que resulta na página exibida na
Figura a seguir.
<!DOCTYPE html>
<html>
<head>
<title> Exemplo Formulários </title>
</head>
<body>
<h3> Informe o nome e endereço de email do responsável pela busca</h3>
<form action="www.google.com.br/search" name="form 1" method="post">
<div>
<label for="name">Nome:</label>
<input type="text" id="name" />
</div>
<div>
Competência 02
33
<label for="mail">E-mail:</label>
<input type="email" id="mail" />
</div>
<div>
<label for="msg">Campo de busca:</label>
<textarea id="msg"></textarea>
</div>
<div class="button">
<button type="submit">Buscar </button>
</div>
</form>
</body>
</html>
Quadro 09 – Demonstração da tag <form> (formulário) e seus atributos
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags <form> e seus atributos (action,
name e method), além da tag <input> e da tag <button>. O código apresenta a tag <title>, contendo dentro dela o texto
Exemplo Fomulários e as tag <form> (onde estão definidos os atributos action, name e method). Dentro da tag <form>
estão as quatro tags <div>, onde dentro delas foram criadas três tags <input> (sendo uma para inserção do nome, outra
para o email e uma para o campo de busca) para recebimento dos dados digitados (nesse caso foram definidos dados
dos tipos text e email). Ainda foi declarada a tag <button> dentro da última tag <div> para submeter as informações do
formulário. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>.
Figura 12 – resultado do emprego da tag <form> (formulário) e seus atributos
Competência 02
34
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tag <form> e seus atributos
(action, name e method), além da tag <input> e da tag <button>. Na barra de título da página web é exibida a
mensagem Exemplo Formulários. Já na página web em si, é exibida a mensagem “Informe o nome e endereço de email
do responsável pela busca” na parte superior da página. Em seguida existem três campos do tipo formulário, onde é
possível ao usuário digitar o nome e email nos dois campos iniciais e algo no campo de busca. Logo abaixo do campo de
busca existe um botão com o nome Buscar.
2.5 Imagem
No início da web as páginas continham apenas conteúdos de textos e links. Mas logo em
seguida foram criados recursos de inclusão de imagens nas páginas. Imagens são excelentes
recursos para incrementar o layout e o visual de uma página ou para exemplificar e demonstrar algo
(lembrando que a estilização será realizada com o CSS). No HTML, a tag responsável pela inserção
de imagens é a tag <img>. Porém, o HTML tecnicamente não faz a inclusão da imagem em si, o que
ele faz é estabelecer um link da imagem para a página, de forma que ela seja aberta como se
estivesse inserida na mesma. Em função disso, no momento em que seu site vai crescendo e
aumentando o número de arquivos HTML que passam a utilizar imagens, deve-se considerar que os
arquivos dessas imagens precisam estar disponíveis, ou seja, precisam ser enviados conjuntamente
com os arquivos HTML para o servidor de páginas. Para inserir uma imagem no HTML, basta utilizar
a tag <img> com o atributo src (source) - este atributo vai conter a url da imagem que será inserida.
Caso deseje adicionar uma legenda para a imagem, isso pode ser feito por meio da tag
<figcaption>. Para exemplificar, segue no Quadro abaixo o código que resulta na página exibida na
Figura a seguir.
Para conseguir incluir a imagem quando vamos tratar no exemplo da Figura abaixo, é
necessário salvar essa imagem na mesma pasta que será salvo o arquivo .html do código descrito no
Quadro abaixo.
Saiba mais!
Faça uma pesquisa sobre os tipos de componentes da tag <input>.https://www.homehost.com.br/blog/criar-sites/tags-html/
Competência 02
35
<!DOCTYPE html>
<html>
<head>
<title> Exemplo de inserção de Imagem </title>
</head>
<body>
<h3> Apresentação da Logo do EAD Pernambuco </h3>
<img src="LogoEAD.jpg">
<figcaption> Logo do EAD Pernambuco </figcaption>
</body>
</html>
Quadro 10 – Demonstração da tag <img> (imgem) e <figcaption> (legenda)
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags <img> (imagem) e <figcaption>
(legenda). O código apresenta a tag <title>, contendo dentro dela o texto Exemplo de inserção de Imagem. Logo em
seguida temos a tag <body> e dentro dela as tags <h3> (onde está o texto Apresentação da Logo do EAD Pernambuco),
a tag <img> com o atributo src alimentado com o arquivo LogoEAD.jpg e a tag <figcaption> (onde está o texto Logo do
EAD Pernambuco). Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento </html>.
DICA IMPORTANTE!
Preste atenção não somente ao nome do arquivo, mas também na extensão
(ex.: .gif ,.png, .jpg e etc). A imagem não vai carregar se a extensão
não tiver especificada corretamente.
Competência 02
36
Figura 13 – resultado do emprego das tags <img> (imagem) e <figcaption> (legenda)
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tags das tags <img> (imagem)
e <figcaption> (legenda). Na barra de título da página web é exibida a mensagem Exemplo de inserção de Imagem. Já na
página web em si, é exibida a mensagem “Apresentação da Logo do EAD Pernambuco” na parte superior da página. Em
seguida, logo abaixo da mensagem, é exibida a imagem da Logo do EAD Pernambuco (uma imagem retangular com um
fundo azul claro, tendo dentro dela um desenho de um livro aberto, onde cada folha é representada por cores distintas
– vermelho, amarelo e verde-, e o nome educação a Distância abaixo do livro). Abaixo da imagem da Logo temos uma
legenda da imagem com a descrição Logo do EAD Pernambuco.
2.6 Link e Iframe
A Web possibilita interligar páginas e serviços diferentes, criando novos resultados a
partir de outras páginas. Com isso, será visto neste tópico sobre links e iframe.
2.6.1 Links
Uma das características do grande poder da Web é o fato de permitir a integração entre
as páginas. A Web nasceu com esse conceito de tudo interligado, sendo possível por meio dos links.
A utilização de links em HTML é bastante simples e se utiliza de uma única tag <a> (anchor), âncora
em português. Em conjunto com a tag de definição e link, outro atributo é utilizado, que é o
atributo href (indicando o nome da ancora a qual devemos submeter).
Esses links podem ser:
Competência 02
37
• externos – quando referenciam recursos de outros sites. Aqui é utilizado o atributo
href.
• internos – quando referenciam conteúdos do próprio documento. Quando o uso é
para referências internas, o nome que define o atributo href é precedido do sinal de
# (sustenido), que indica justamente que o link é interno.
2.6.2 Iframe
A tag <iframe> cria uma área em nosso documento onde é possível renderizar outra
página, ou seja, ela permite embutir o conteúdo de outra página no meio da nossa. Isso serve, por
exemplo, para incluir componentes reaproveitáveis de outros serviços, como o Youtube. Pode-se
com esse recurso incluir um vídeo qualquer para ser rodado diretamente em nossa página.
No código do Quadro a seguir tem-se uma exemplificação da aplicação de links externos
e internos, assim como de iframe, resultando na página exibida na Figura abaixo:
<!DOCTYPE html>
<html>
<head>
<title> Exemplo de inserção de links externos e internos </title>
</head>
<body>
<h1> Quer saber mais sobre a ETEPAC e o ensino técnico EAD em
Pernambuco?</h1>
<p> Você pode visitar o <a href=" https://ead.educacao.pe.gov.br/"> AVA
da EAD Pernambuco </a> e conhecer o ambiente virtual, mas antes, leia um trecho
do que é ofertado no EAD em PE e assista ao vídeo.
<p>Histórico do EAD em PE <a href="#info"> aqui </a>.</p>
<iframe width="425" height="344"
src="https://www.youtube.com/embed/0EvUOXbce8g" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen> </iframe>
<h2 id="info">A modalidade de Educação a Distância contabiliza 116 polos,
com um total de 37.575 alunos matriculados, num universo de 68 municípios, sendo
ofertados nove cursos, sendo eles: Administração (ADM);Biblioteconomia (BIB);
Desenvolvimento de Sistemas (DS); Design de Interiores (DDI); Logística (LOG);
Multimeios Didáticos (MMD); Recursos Humanos (RH); Secretaria Escolar (SEC);
Segurança do Trabalho (SEG). </h2>
Competência 02
38
</p>
</body>
</html>
Quadro 11 – Demonstração das tags <a > (anchor) e <iframe>
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento das tags <a> (âncora) e <iframe>
(renderizar outra página). O código apresenta a tag <title>, contendo dentro dela o texto Exemplo de inserção de links
externos e internos e as tags <h1> (onde está o texto Quer saber mais sobre a ETEPAC e o ensino técnico EAD em
Pernambuco?), <p> (onde está o texto Você pode visitar, além de ter contida dentro dela a tag <a> e descrição do
atributo href dentro da dessa tag, onde foi definido nesse atributo o endereço do AVA da EAD Pernambuco). Logo em
seguida, ainda dentro da primeira tag <p> é usada outra tag <p>, só que agora (onde está o texto Histórico do EAD em
PE, além de ter contida dentro dela outra tag <a> e descrição do atributo href dentro dessa tag, onde foi definido nesse
atributo a #info). Depois é declarada a tag <iframe> contendo dentro dela um endereço de um vídeo do Youtube. Após
isso, é declarada uma tag <h2> contendo nela a descrição dos cursos existentes na ETEPAC e a quantidade de alunos
que essa escola possui. Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento
</html>.
Figura 14 – resultado do emprego das tags <a > (anchor) e <iframe>
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego das tags <a> (âncora) para
exibição de links externos e internos e <iframe> (para renderizar outra página). Na página web em si, é exibida a
mensagem “Quer saber mais sobre a ETEPAC e o ensino técnico EAD em Pernambuco?” na parte superior da página. Em
seguida É disponibilizado um link de acesso ao ambiente virtual de aprendizagem (o AVA) do EAD Pernambuco. Logo
abaixo é proporcionada ao usuário da página a opção de conhecer o histórico da EAD Pernambuco, sendo
disponibilizado um link (com a nomenclatura aqui). Ao clicar no “aqui” (link para conhecer o histórico do EAD
Pernambuco), é aberto dentro da própria página o referido histórico.
Competência 02
39
Note que a âncora está demarcando apenas a expressão "AVA da EAD Pernambuco" de
todo o conteúdo do parágrafo exemplificado. Isso significa que, ao clicar com o cursor do mouse na
palavra expressão "AVA da EAD Pernambuco", o navegador redirecionará o usuário para o site do
AVA da EAD Pernambuco, indicado no atributo href.
2.7 Novas tags HTML 5
HTML5 é a mais recente evolução do padrão que define o HTML. O termo representa
dois conceitos diferentes:
• é uma nova versão da linguagem, com novos elementos, atributos e
comportamentos;
• é um conjunto maior de tecnologias que permite o desenvolvimento de aplicações e
web sites mais diversificados e poderosos.
2.8 Layout HTML
Em geral, a definição de um layout segue alguns princípios básicos CARRION (2006 apud
BONIATI, 2013, p.35): hierarquia das informações, foco/ênfase, equilíbrio, relacionamento dos
elementos e unidade/integração. A hierarquia das informações determina quala disposição da
informação, baseando-se em sua importância em relação aos demais elementos visuais. De acordo
com esse princípio, é preciso definir a informação mais importante para posiciona-la em um lugar
estratégico, porque o usuário interage de imediato com aquilo que ele vê primeiro. De acordo com
MARINHO (2012), uma boa arquitetura de design causa um ótimo primeiro impacto ao visitante.
Para o W3schools (2019), o layout de uma página html deve possuir os elementos
apontados na Figura 15 e descritos abaixo:
Saiba mais!
Acesse o site
https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5
e aprofunde seus conhecimentos sobre as novas tags do HTML 5.
https://developer.mozilla.org/pt-BR/docs/Web/HTML/HTML5
Competência 02
40
Figura 15 – Elementos de layout de uma página html
Fonte: https://www.w3schools.com/html/html_layout.asp
Descrição: Apresentação dos elementos de layout de uma página html, localizando cada um deles em suas respectivas
posições em uma página web, sendo eles: header (parte superior da página), nav (logo abaixo do campo header)
,section (parte central esquerda da página), article (parte central esquerda da página, logo abaixo do campo section),
aside (parte central direita da página) e footer (parte inferior da página)
• <header> - Define um cabeçalho para um documento ou seção
• <nav> - Define um contêiner para links de navegação
• <section> - Define uma seção em um documento
• <article> - Define um artigo independente e independente
• <aside> - Define o conteúdo além do conteúdo (como uma barra lateral)
• <footer> - Define um rodapé para um documento ou seção
• <details> - Define detalhes adicionais
• <summary> - Define um cabeçalho para o elemento <details>
2.9 Nomenclatura dos arquivos HTML
A exemplo das normas de nomeação de diretórios, os arquivos HTML também devem
ser nomeados seguindo regras. Mediante isso, seguem algumas regras e recomendações para a
referida nomenclatura:
https://www.w3schools.com/html/html_layout.asp
Competência 02
41
• Nunca usar espaços em branco, "ç", letras acentuadas (ã, é), pontos de interrogação
(?), asteriscos (*) e outros caracteres especiais nos nomes dos documentos HTML e
pastas de um site: alguns servidores e navegadores não estarão aptos a interpretá-
los.
• A página inicial de um site deve ser nomeada index ou default (a extensão,
sempre htm ou html). Isso se deve à configuração padrão da maior parte dos
servidores que, ao receber uma solicitação do
tipo http://www.aulasdeinformatica.com.br, entende como "encontre e envie o
arquivo index ou default do site Aulas de Informática".
• HTML não é uma linguagem case sensitive, ou seja, não há diferença em digitar
as tags em letras maiúsculas ou minúsculas (o mesmo não vale para nomes de
arquivos citados dentro do código, tampouco para valores de atributos). Mas se
desejar criar um código preparado para as próximas versões da linguagem HTML,
digite seu código todo em letras minúsculas (essa é uma recomendação do W3C).
2.10 Exibindo uma página web
Para que uma página web seja exibida, é necessário que seja realizada a leitura de um
documento HTML que tenha sido construído com as informações que serão exibidas na referida
página. Para tal, são utilizados os navegadores (Firefox, Internet Explore, Chrome e etc), cujo papel
deles é ler o documento HTML e exibir as informações.
Para testar as páginas que você construirá, basta seguir os passos descritos no subtópico
1.1.5 (HTML) de como salvar um documento HTML e posteriormente abri-lo em um navegador.
Para exercitar, reescreva em seu editor de texto o código transcrito no tópico 2.2.4, salve-o e
posteriormente abra o mesmo no seu navegador. Note se a aparência e o conteúdo exibido são
semelhantes ao da Figura abaixo.
Competência 02
42
Figura 16 – resultado ao abrir o arquivo com o conteúdo Meu parágrafo
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado da abertura de um arquivo html. Na barra de
título da página web é exibida a mensagem Minha Página. Já na página web em si, é exibida a mensagem “Meu
parágrafo” na parte superior da página.
Competência 03
43
3.Competência 03 | Formatar um Site com Recursos Multimídia
Caro(a) estudante, esta competência tem por objetivo estudar a implementação e a
utilização de recursos multimídia (áudio e vídeo), com o objetivo de enriquecer a apresentação
visual e de entreter os visitantes, tornando a interação destes com o site muito mais agradável e
atrativo. O HTML5 introduz o suporte de mídia embutido por meio de tags específicas, oferecendo a
possibilidade de incorporar facilmente mídia em documentos HTML. Além disso, será visto como
proceder para inserir em nossas páginas algum vídeo do Youtube.
Vamos prosseguir?
3.1 Áudio
Através dos recursos de áudio disponíveis, pode-se, por exemplo, inserir uma trilha
sonora de fundo, um áudio complementar à informação escrita ou um som de alerta para quando o
visitante acessar uma determinada página do site.
Com a introdução de HTML5 tags de áudio se espalharam rapidamente e são suportadas
pelos navegadores atuais. Tags de áudio são usadas para adicionar sons e música na página HTML.
No momento a tag <audio> suporta três tipos de arquivos de áudio, sendo definido pelo atributo
type:
• mp3 - MIME- type audio/mpeg
• wav - MIME-type audio/wav
• ogg - MIME-type audio/ogg
Para inserir áudios às páginas web, deve-se utilizar a tag <audio> complementada pelos
seguintes atributos:
• src: pode ser a URL do arquivo de áudio ou o caminho do arquivo no sistema local.
A sua sintaxe é semelhante a do atributo (href) usado na referência dos links.
• controls: mostra os controles padrão para o áudio na página. Ele define se um
controle de áudio, com botões de play, pause, volume, barra de progresso,
contador de tempo, etc. serão exibido na tela. Se for setado como “false”, será
preciso controlar o player via javascript, com métodos como play() e pause().
Competência 03
44
• autoplay: faz com que o áudio reproduza automaticamente.
• loop: faz com que o áudio repita automaticamente.
Observe o exemplo de código transcrito no Quadro abaixo e que obteve como resultado
o demonstrado na Figura a seguir:
<!DOCTYPE html>
<html>
<head>
<title> Exemplo de reprodução de áudio </title>
</head>
<body>
<h1> Escute a música clicando no botão abaixo</h1>
<audio controls="true" autoplay="true">
<source src="C:\Users\aead\Music\Canção e Louvor - Tua Presença
my-free-mp3s.com.mp3" type="audio/mp3">
</audio>
<p>Caso deseje, faça o
<a href="https://mymp3c.com/api/get_song.php?id=gucVvB:2ad2rB">
download da música</a>.</p>
</body>
</html>
Quadro 12 – Demonstração da tag <audio >
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento da tag <audio>. O código apresenta a
tag <title>, contendo dentro dela o texto “Exemplo de reprodução de áudio” e a tag <h1> (onde está o texto Escute a
música clicando no botão abaixo). Dentro dessa tag está a tag <áudio> (onde estão declarados os atributo controls,
auto play e a tag <source> com a declaração de um link onde está contido a música que tocará na própria página web).
Em seguida vem à declaração da tag <a> contendo o link para download da música. Todo o conteúdo do código está
inserido entre as tags de abertura <html> e de fechamento </html>.
Como resultado do código do Quadro acima que utiliza a tag <audio>, você terá como
resultado a sua representação na Figura abaixo.
Competência 03
45
Figura 17 – Imagem da tela do browser como resultadodo emprego das tag <áudio>
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego da tag <áudio>. Na barra de título
da página web é exibida a mensagem Exemplo de reprodução de áudio. Já na página web em si, é exibida a mensagem
“Escute a música clicando no botão abaixo” na parte superior da página. Em seguida existe uma representação de uma
faixa musical, onde há um botão de play e um símbolo de alto-falante ao lado, onde é possível ajustar o volume do som
que será reproduzido. Logo abaixo da faixa musical, há uma frase que indica um link onde é possível realizar o download
da música.
3.2 Vídeo
Um arquivo de vídeo pode ser inserido em uma página HTML de três maneiras. A
primeira seria usando a tag <embed/>. Essa tag não significa tag de fechamento. Ela funciona,
geralmente, da mesma forma que as tags para imagens e teria a codificação conforme descrito
abaixo:
<embed src="example.mpeg" autostart="false" height="30" width="144" />
Atributos que podem ser incorporados a tag embed:
DICA IMPORTANTE!
Através do atributo loop, indicamos o número de vezes pela qual o
arquivo de som deve ser tocado. Caso este atributo receba como parâmetro o
valor "infinite", a sequência de repetição do áudio será ininterrupta até que o
visitante mude de página ou pressione a tecla (esc).
Competência 03
46
• autostart - define se o arquivo irá rodar automaticamente depois que a página é
aberta. Você pode ter um valor de verdadeiro ou falso aqui.
• hidden - define se os botões são escondidos ou não (você pode ter um valor de
verdadeiro ou falso aqui).
• volume - pode ter qualquer valor entre 0 e 100.
• loop- define se o arquivo tocará novamente depois de terminar (você pode ter um
valor de verdadeiro ou falso aqui).
• playcount - estabelece quantas vezes o arquivo irá rodar. Por exemplo,
playcount="2" significa que irá repetir duas vezes antes de parar.
A segunda maneira de inserir um vídeo numa página HTML é utilizando a inserção de
um arquivo de vídeo usando um link. Basta somente utilizar o atributo href, de acordo com o código
abaixo:
<a href="example.mpeg" title="Download movie">nome do filme</a>
A terceira maneira se dá com o uso da tag <vídeo>. Com a introdução de HTML5 a tag
de vídeo se espalhou rapidamente com um bom suporte de navegadores. No momento HTML5, a
tag vídeo suporta três tipos de arquivos de vídeo:
• mp4 - MIME-type video/mp4
• webm - MIME-type video/webm
• ogg - MIME-type video/ogg
O código transcrito abaixo demonstra a aplicação da tag <vídeo>.
<!DOCTYPE html>
<html>
<vídeo src=http://v2v.cc/~j/theora_testsuite/320x240.ogg controls>
</video>
</html>
Quadro 13 – Demonstração da tag <video>
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o posicionamento da tag <video>, onde dentro dela está
contido o endereço que torna possível a reprodução de um vídeo no formato ogg na página web. Todo o conteúdo do
código está inserido entre as tags de abertura <html> e de fechamento </html>.
Competência 03
47
Como resultado do código do Quadro acima que utiliza a tag <vídeo>, você terá como
resultado a sua representação na Figura abaixo.
Figura 18 – Imagem da tela do browser como resultado do emprego das tag <vídeo>
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego da tag <vídeo>. Na página web em
si, é exibida a tela de um vídeo que apresenta barras coloridas. Também existe um botão start, através do qual o vídeo
pode ser iniciado.
3.3 Reusando o YouTube
Com o advento do HTML 5 é possível ainda reusar em nossas páginas html os vídeos
contidos no Youtube. Isso facilita bastante à vida do desenvolvedor.
Parar exemplificar isso, você vai embutir um vídeo do Youtube em uma página
denominada reusandoYouTube.html, no meio de um texto explicativo. O código para aplicar esse
exemplo é o transcrito no Quadro a seguir e terá como resultado a Figura abaixo:
<!DOCTYPE html>
<html>
<head>
<title> Exemplo de reprodução de vídeo do YouTube </title>
</head>
<body>
<h1> Tenha o prazer de assistir a 1º Live EaD Aula Inaugural EaD 2019.2
</h1>
Competência 03
48
<h3> Dentro da Live será apresentada a Palestra: Protagonista do meu
próprio sucesso, que foi ministrada por Luciana Basante.</h3>
<iframe width="727" height="409"
src="https://www.youtube.com/embed/r02hCYp_Ttg" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen> </iframe>
</body>
</html>
Quadro 14 – reusando o YouTube
Fonte: O autor
Descrição: Código-fonte na linguagem HTML que representa o reuso de vídeo do Youtube através do código de
incorporação utilizado na tag <iframe>. O código apresenta a tag <title>, contendo dentro dela o texto “Exemplo de
reprodução de vídeo do YouTube” e as tags <h1> (onde está o texto Tenha o prazer de assistir a 1º Live EaD Aula
Inaugural EaD 2019.2), <h3> (onde está o texto Dentro da Live será apresentada a Palestra: Protagonista do meu
próprio sucesso, que foi ministrada por Luciana Basante) e a tag <iframe> (onde está inserido o código de incorporação
do vídeo do youtube). Todo o conteúdo do código está inserido entre as tags de abertura <html> e de fechamento
</html>.
Como resultado do código do Quadro acima que utiliza a tag <iframe>, você terá como
resultado a sua representação na Figura abaixo.
Figura 19 – Imagem da tela do browser como resultado do reuso do iframe do youtube
Fonte: O autor
Competência 03
49
Descrição: Demonstração da tela do browser que apresenta o resultado do emprego do reuso do iframe de vídeo
Youtube. Na barra de título da página web é exibida a mensagem “Exemplo de reprodução de vídeo do Youtube”. Já na
página web em si, é exibida a mensagem “Tenha o prazer de assistir a 1° Live EAD Aula Inaugural EAD 2019.2” na parte
superior da página. Em seguida existe uma mensagem “Dentro da Live será apresentada a Palestra: protagonista do
meu próprio sucesso, que foi ministrada por Luciana Basante”. Logo abaixo é exibida a tela do vídeo do Youtube que
contem a referida aula inaugural.
Você pode está se perguntando: Como ele conseguiu o código do <iframe>? Para obter
o código de embutir vídeos do YouTube, siga os seguintes passos:
1. Abra o vídeo desejado no YouTube (no exemplo será utilizado o vídeo da 1º Live EaD
Aula Inaugural EaD 2019.2): https://www.youtube.com/watch?v=r02hCYp_Ttg;
2. Clique com o botão direito do mouse sobre o vídeo e selecione a opção copiar código
de incorporação, conforme a Figura 20 (O passo 2 lhe permitirá obter o código HTML do
<iframe>)
Figura 20 – Imagem da tela do browser como resultado do reuso do iframe do youtube
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta copiar o código de informação do vídeo desejado do
youtube, de forma a reusar através da tag <iframe>. É exibida a tela de um vídeo do Youtube e que do lado direito da
figura é apresentada uma caixa de diálogo contendo algumas opções de cópia, e dentre elas, a opção de copiar o código
de incorporação, sendo essa a opção selecionada.
https://www.youtube.com/watch?v=r02hCYp_Ttg
Competência 03
50
1. Vá até o seu código html e cole o código de incorporação na tag <iframe>;
2. Teste a página.
Para praticar a o reuso de vídeos do
YouTube, monte uma página HTML com as 3 (três)
vídeos aulas do CURSO TÉCNICO EM
DESENVOLVIMENTO DE SISTEMAS | LINGUAGEM
DE PROGRAMAÇÃO PARA WEB |
FOCO NA PRÁTICA
Competência 04
51
4.Competência 04 | Conhecer os Fundamentos do CSS 3
Caro(a) estudante, até agora foi estruturado todo o conteúdo dos sites com o HTML. No
entanto, para torná-lo um sistema de navegação funcional, você vai utilizar outropadrão da W3C, o
CSS. Esta competência tem por objetivo apresentar a linguagem CSS e suas funcionalidades,
oferecendo a possibilidade de tratar a estilização da página separadamente do conteúdo textual,
escrito em HTML.
Vamos ver como incorporar CSS em HTML?
Vamos continuar!
4.1 Conceito de CSS
CSS (acrônimo para Cascading Style Sheets) é uma linguagem de estilo usada para
especificar a aparência (layout, cor e fonte) dos vários elementos de um documento que foi
definido por uma linguagem de marcação (como a linguagem HTML). Ela foi criada com o objetivo
de separar a estrutura do documento de sua aparência (GRANNEL, 2007).
A linguagem CSS possui objetivos bem definidos, tais como:
• ter controle da aparência de um site Web;
• utilizar uma folha de estilo para fornecer a mesma aparência e comportamento
para todas as páginas de um site;
• usar a fonte class para aplicar estilos;
• especificar a fonte exata, o tamanho, a cor, as propriedades do texto exibido,
• explicar os planos de fundo, entender o elemento de caixa e o modo de controlar as
margens, as bordas, o preenchimento;
• separar a apresentação do conteúdo.
A linguagem de estilo CSS ajuda o programador a economizar tempo na construção da
página, bem como na sua edição, fazendo com que a página carregue mais rápida, e ele tenha o
controle do layout. Mas como criar os estilos utilizando a tabela CSS? Para cada estilo existe uma
regra CSS.
Vamos vê-la?
Competência 04
52
4.2 Sintaxe de uma Regra CSS
A sintaxe de uma regra CSS tem estrutura simples e composta por duas partes: o seletor
e a declaração. Como ela é feita? Na Figura abaixo é possível visualizar a representação dessa
sintaxe.
Figura 21 – sintaxe de uma regra CSS
Fonte: O autor
Descrição: Demonstração da sintaxe da regra CSS, onde a figura indica na parte superior uma seta preta de direção nas
duas pontas, indicando que a regra CSS é constituída de seletor (que está marcado de vermelho, seletor este que pode
conter uma ou mais propriedades (no caso dessa imagem contem três propriedades, estando elas marcadas na cor
verde e cada uma delas recebe o nome valor - representando o tipo de dado - , estando esse nome valor marcado com
a cor azul). A figura ainda indica na parte inferior uma seta preta de direção nas duas pontas, indicando que a
declaração é composta por uma propriedade (no caso dessa imagem estando ela marcadas na cor verde e que ela
recebe o nome valor - representando o tipo de dado - , estando esse nome valor marcado com a cor azul).
“Na figura acima você pode ver que a sintaxe é uma declaração de propriedades e
valores separados por um sinal de dois pontos “:" e cada propriedade é separada por um sinal de
ponto e vírgula ";".
Para explicar o que significa essa sintaxe é necessário saber o que é o seletor. Essa
expressão em programação é a descrição do elemento de design ao qual o estilo será aplicado na
linguagem HTML. Em suma, o seletor é o alvo da regra CSS. Genericamente, pode ser a tag do
elemento da marcação ou, então, uma entidade capaz de definir com precisão em qual lugar da
marcação a regra será aplicada.
Existem três tipos de seletores que merecem ser apresentados: classes (class),
identificadores (id) e simples. Os seletores class e id são tidos como seletores complexos.
Competência 04
53
• Seletor tipo class: esse tipo de seletor permite aplicar um mesmo estilo a diferentes
elementos e também indicar que um mesmo elemento obedece a diferentes
estilos. “Para definir um seletor desse tipo, deve-se iniciar a especificação do
mesmo com o sinal de “." (ponto final) seguido do atributo class.
• Seletor tipo id: esse tipo de seletor é utilizado com o atributo id, permitindo
estilizar de forma única e exclusiva, um determinado elemento no documento
HTML. A declaração de um seletor desse tipo inicia-se com o sinal de “#” (sustenido)
seguido do nome do identificador.
• Seletor tipo simples: esse tipo de seletor é utilizado quando o seletor é um
elemento de tag de marcação, como exemplo, a tag <p>. Estes seletores são para
cobrir suas necessidades básicas de formatação de elementos.
Depois do seletor vem à declaração, onde são determinado os parâmetros de
estilização, ou seja, compreende a propriedade que define qual característica do elemento alvo
(seletor) será estilizada e o valor (quantificação ou qualificação da propriedade). Pode-se dizer
então que a propriedade (comando) é responsável por validar uma das funções da linguagem CSS.
Observe o exemplo abaixo. De acordo com a Figura a seguir, você pode ver uma
formatação onde o seletor é o elemento da tag de marcação <p>.
Figura 22 – formatação com a tag p como seletor
Fonte: O autor
Descrição: Apresentação de um exemplo de regra da sintaxe CSS tendo como seletor a tag p (marcada com a cor
vermelha) e como propriedades o background-color (marcada com a cor verde e com valor definido como blue em azul)
e o color (marcada com a cor verde e com valor definido como yellow na cor azul).
O código descrito na Figura abaixo indica que você está alterando a cor e o fundo de
todos os elementos com tag <p>, onde esses elementos que receberem essas propriedades serão
exibidos com o texto na cor azul e com o fundo amarelo.
Competência 04
54
4.3 Incorporando CSS em HTML
Quando se escreve o HTML, marca-se o conteúdo da página com tags que melhor
representam o significado daquele conteúdo. Aí quando você abre a página no navegador é possível
perceber que ele mostra as informações com estilos diferentes, uma vez que, foram incorporadas a
ela folha de estilos, o agora conhecido CSS.
Existem diferentes formas de se vincular uma folha de estilos a um documento HTML,
sendo elas:
• Vinculação in-line: consiste no emprego do atributo style diretamente sobre a tag
HTML que se deseja estilizar. Vale destacar que esse método, apesar de ser prático,
torna a manutenção do código bastante difícil e também retira um dos maiores
poderes das folhas de estilo, que é o controle centralizado da apresentação. O
trecho de código transcrito no Quadro abaixo exemplifica a aplicação deste tipo de
vinculação a tag <p>.
<p style="color: red; background-color: blue;">
O conteúdo desta tag será exibido em vermelho com fundo azul no navegador!
</p>
Quadro 15 – Vinculação in-line
Fonte: O autor
Descrição: Código-fonte na linguagem HTML demonstrando o uso da vinculação in-line. O código apresenta a tag <p> na
qual está sendo feita a referida vinculação através do atributo style, contendo dentro dessa tag o texto “O conteúdo
desta tag será exibido em vermelho com fundo azul no navegador!”.
DICA IMPORTANTE!
Para ter uma lista sempre atualizada, siga o link no final da tabela.
http://www.w3.org/TR/css3-selectors/#selectors
http://www.w3.org/TR/css3-selectors/#selectors
Competência 04
55
• Vinculação incorporada: consiste no emprego do atributo style que deve ser
declarado na seção de cabeçalho (tag <head>) do documento, indicando
configurações que o documento, como um todo irá adotar. Essa forma de
vinculação apresenta uma vantagem em relação a anterior: as regras estão
centralizadas em um único ponto do documento. Como desvantagem, pode-se
apontar que ela não permite o compartilhamento de regras entre os documentos
de um mesmo site. O trecho de código transcrito no Quadro a seguir exemplifica a
aplicação deste tipo de vinculação aplicada na tag <head>.
<head>
...
<style >
body { background: green;}
h3 { color: blue;}
</style>
...
</head>
Quadro 16 – Vinculação in-line
Fonte: O autor
Descrição: Código-fonte na linguagem HTML demonstrando o uso da vinculação incorporada que é declarada na seção
de cabeçalho (tag <head>). O body recebe background green e a tag <h3> recebe color bue.
• Vinculaçãocom interligação externa: a vinculação externa de uma folha de estilos
pode ser feita por meio da tag <link>, que é utilizada para associar um arquivo
externo ao documento HTML. Ela é a forma mais eficiente de utilização de CSS. Vale
ainda destacar que, assim como na vinculação incorporada, a tag <link> deve ser
declarada na seção de cabeçalho (tag <head>). O trecho de código abaixo
exemplifica a aplicação deste tipo de vinculação aplicada na tag <head>.
<head>
...
<link rel="stylesheet" type="text/css" href="exemploEstilo.css">
Competência 04
56
...
</head>
Quadro 17 – Vinculação com interligação externa (código HTML)
Fonte: O autor
Descrição: Código-fonte na linguagem HTML demonstrando o uso da vinculação com interligação externa. O código
apresenta a tag <head> na qual está sendo feita a referida vinculação com interligação externa através do uso da tag
<link>.
Conforme o trecho de código mostrado acima, usa-se o elemento link dentro da
seção head do documento para importar uma folha de estilos em um documento HTML. Com isso, o
navegador "lê" as regras de estilo do arquivo exemploEstilo.css, formatando o documento de
acordo com as regras definidas no referido arquivo do tipo .css.
A sintaxe geral para importar uma folha de estilo, como a
denominada exemploEstilo.css é mostrada no código do Quadro abaixo.
/* ELEMENTOS DE UMA SINTAXE DE UMA FOLHA DE ESTILO*/
/* essa folha de estilo é denominada exemploEstilo.css */
@charset utf-8;
@import url("estiloFonte.css");
body {
margin: 0;
background: #fff;
color: #333;
...
}
Quadro 18 – Vinculação com interligação externa (código CSS)
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da vinculação com interligação externa, apresentando na
parte superior do código os comentários "ELEMENTOS DE UMA SINTAXE DE UMA FOLHA DE ESTILO" e "essa folha de
estilo é denominada exemploEstilo.css". Em seguida é apresentada a definição da url da folha de estilo, através da
diretiva import, sendo definida como "estiloFonte.css" para a
a tag body, onde nela é definida a margin, background e color.
Analisando os elementos de uma sintaxe geral de uma folha de estilo, nota-se que foi
utilizada a diretiva @import dentro da folha de estilos exemploEstilo.css para importar uma folha de
estilos denominada estiloFonte.css.
Competência 04
57
Ao usar essa diretiva em uma folha de estilo ela obrigatoriamente deverá ser a primeira
declaração na folha logo a seguir da diretiva @charset. Caso contrário, não haverá importação.
A seguir você precisa usar o elemento link dentro da seção head do documento para
importar a folha de estilos exemploEstilo.css, conforme mostrado anteriormente.
4.4 Propriedades CSS
Uma vez visto como incorporar folhas de estilos, ou seja, incorporar CSS a documentos
em HTML, você aprenderá sobre algumas propriedades CSS associadas a cores, background, textos,
fontes, links, listas e bordas.
Vamos lá?
4.4.1 Propriedades de cores e background
A seguir, será vista algumas propriedades de CSS ligadas a cores e background, assim
como os seus respectivos exemplos:
• color - Existem várias maneiras de definir a cor de um texto quando utilizamos o
CSS, conforme apresentado abaixo:
1. Pode-se definir essa propriedade utilizando o nome da cor, conforme o código
do Quadro a seguir:
h1 {
color: yellow;
}
Quadro 19 – Propriedade color – definição pelo nome
Fonte: O autor
Folhas de estilos externas podem ser escritas em qualquer editor de texto,
devem ser gravadas com a extensão.css e a codificação de caracteres utf-8. O
arquivo não deve conter nenhuma tag HTML.
Competência 04
58
Descrição: Código fonte CSS demonstrando o uso da propriedade color dentro do seletor h1, sendo a propriedade
definida com a cor yellow.
2. Pode-se definir essa propriedade tendo como base a composição RGB, conforme o
código do Quadro abaixo:
/* rgb (255, 200, 0) é equivalente a cor verde */
h2 {
color: rgb (255, 200, 0);
}
Quadro 20 – Propriedade color – definição pela composição RGB
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade color com definição pela composição RGB,
apresentando na parte superior do código o comentário "rgb (255,200,0) é equivalente a cor verde”. Em seguida,
dentro da dentro do seletor h2, é definida a propriedade color com o rgb (250,200,0).
3. Pode-se definir essa propriedade tendo como base a composição hexadecimal,
conforme o código do Quadro a seguir:
/* #FF0000 é equivalente a cor vermelha */
h1 {
color: #FF0000;
}
Quadro 21 – Propriedade color – definição pela composição hexadecimal
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade color com definição pela composição
hexadecimal, apresentando na parte superior do código o comentário "#FF0000 é equivalente a cor vermelha”. Em
seguida, dentro da dentro do seletor h1, é definida a propriedade color com #FF0000.
• background-color - Essa propriedade em CSS permite modificar a cor de fundo do
trecho designado, conforme o código do Quadro abaixo:
h1 {
background-color: blue;
Você sabia?
RGB é um sistema de cor bastante comum aos designers. Ele permite especificar
até 16 milhões de cores com uma combinação de três cores base: Vermelho
(Red), Verde (Green), Azul (Blue).
Competência 04
59
}
Quadro 22 – Propriedade background-color
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade background-color dentro da dentro do
seletor h1, é definida a propriedade color como blue.
• background-image - Essa propriedade em CSS permite indicar um arquivo externo
de imagem para ser exibido ao fundo do elemento, conforme o código do Quadro a
seguir:
/* Com essa declaração, o navegador vai requisitar um arquivo exemplo-
backgroundImagem.jpg, que deve estar na mesma pasta do arquivo CSS onde consta essa
declaração */
h1 {
background-image: url(exemplo-backgroundImagem.jpg);
}
Quadro 23 – Propriedade background-image
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade background-image, apresentando na parte
superior do código o comentário “Com essa declaração, o navegador vai requisitar um arquivo exemplo-
backgroundImagem.jpg, que deve estar na mesma pasta do arquivo CSS onde consta essa declaração”. Em seguida,
dentro da dentro do seletor h1, é definida a propriedade color com url (exemplo-backgroundImagem.jpg).
4.4.2 Propriedades de texto e parágrafos
A seguir, você verá algumas propriedades de CSS ligadas à parte tipográfica, assim como
os seus respectivos exemplos:
• text-decoration - Essa propriedade em CSS permite especificar uma decoração para
o texto, podendo ser: sublinhado (underline), riscado (line-through), sublinhado
invertido (overline). O código do Quadro abaixo demonstra a aplicação dessa
propriedade quando definida como underline:
Acesse o link abaixo e saiba mais sobre a notação hexadecimal!
https://www.dicas-
l.com.br/arquivo/cores_css_definicao_com_notacao_hexadecimal.php
https://www.dicas-l.com.br/arquivo/cores_css_definicao_com_notacao_hexadecimal.php
https://www.dicas-l.com.br/arquivo/cores_css_definicao_com_notacao_hexadecimal.php
Competência 04
60
h1 {
text-decoration: underline;
}
Quadro 24 – Propriedade text-decoration
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade text-decoration dentro do seletor h1 e é
definida como underline.
.
• text-transform - Essa propriedade em CSS permite definir se o texto será
apresentado em: letras maiúsculas (uppercase), minúsculas (lowercase), com as
iniciais em maiúsculas (capitalize). O código do Quadro a seguir demonstra a
aplicação dessapropriedade quando definida como lowercase:
h1 {
text-transform: lowercase;
}
Quadro 25 – Propriedade text-transform
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade text-transform dentro do seletor h1 e é
definida como lowercase.
• text-indent - Essa propriedade em CSS permite definir um espaçamento horizontal
a ser deixado antes do início da primeira linha do texto, ou seja, a indentação (ou
tabulação) da primeira linha do texto. O código do Quadro abaixo demonstra a
aplicação dessa propriedade quando definida com um espaçamento de 15px:
h1 {
text-indent: 15px;
}
Quadro 26 – Propriedade text-indent
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade text-indent dentro da do seletor h1 e é
definida com 15px.
• text-align - Essa propriedade em CSS permite definir o alinhamento horizontal do
texto, podendo ser: left (alinha o texto à esquerda – é o valor default-), right (alinha
Competência 04
61
o texto à direita), center (alinha o texto no centro), justify (alinha o texto de modo
justificado). O código do Quadro a seguir demonstra a aplicação dessa propriedade
quando definida como left:
h1 {
text-align: left;
}
Quadro 27 – Propriedade text-align
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade text-align dentro do seletor h1 e é definida
como left.
• line-height - essa propriedade em CSS permite controlar o espaçamento entre as
linhas de um texto, podendo ser:
1. normal: é o valor padrão nativo do navegador (entre 1 e 1.2);
2. número: um valor expresso por um número inteiro ou decimal;
3. comprimento: um valor CSS para comprimento (px, em, pt, etc);
4. porcentagem: um valor expresso em porcentagem;
O código do Quadro abaixo demonstra a aplicação dessa propriedade quando definida
com um espaçamento entre as linhas de 20 px:
p {
line-height: 20px;
}
Quadro 28 – Propriedade line-height
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade line-height dentro do seletor h1 e que é
definida com o valor de 20px.
• letter-spacing - Essa propriedade em CSS permite definir o espaçamento entre as
letras, podendo ser normal ou lenght (medida CSS de comprimento. Exemplos: px,
em, rem, %). O código do Quadro abaixo demonstra a aplicação dessa propriedade
quando definida com um espaçamento entre as letras de 12 px:
h1 {
letter-spacing: 12px;
Competência 04
62
}
Quadro 29 – Propriedade letter-spacing
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade letter-spacing dentro do seletor h1 e que é
definida com o valor 12px.
• word-spacing - Essa propriedade em CSS permite definir o espaçamento entre as
palavras, podendo ser normal ou lenght (medida CSS de comprimento. Exemplos:
px, em, rem, %). O código do Quadro a seguir demonstra a aplicação dessa
propriedade quando definida com um espaçamento entre as palavras de 8 px:
h1 {
word-spacing: 8px;
}
Quadro 30 – Propriedade word-spacing
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade word-spacing dentro do seletor h1 e que é
definida com o valor de 8px.
4.4.3 Propriedades de fonte
A seguir, serão apresentadas algumas propriedades de CSS ligadas a fontes do texto
assim como os seus respectivos exemplos:
• font-size - Essa propriedade em CSS permite especificar o tamanho da fonte do
texto. As medidas possíveis são: xx-small (equivale a 9px), x-small (equivale a 10px),
small (equivale a 13px), medium (equivale a 16px), large (equivale a 18px), x-large
(equivale a 24px), xx-large (equivale a 32px) e length (medida CSS de comprimento,
tipo: px, em, rem, %). O código do Quadro abaixo demonstra a aplicação dessa
propriedade sendo definida como médium para o tamanho da fonte:
h1 {
font-size: medium;
}
Quadro 31 – Propriedade font-size
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade font-size dentro do seletor h1 e é definida
como medium.
Competência 04
63
• font-family - Essa propriedade em CSS permite definir o tipo da fonte do texto. O
código do Quadro a seguir demonstra a aplicação dessa propriedade definindo a
fonte como Arial, e caso não haja, será Helvetica. Não havendo nenhuma delas, será
testada a fonte sans-serif:
/* No caso do exemplo abaixo, o navegador verificará se a fonte "Arial" está disponível e
a utilizará para renderizar os textos de todos os elementos do documento, pois herdarão
essa propriedade do elemento body. Caso a fonte "Arial" não esteja disponível, o navegador
verificará a disponibilidade da próxima fonte declarada, que no exemplo é a "Helvetica".
Caso o navegador não encontre também essa fonte, ele solicitará qualquer fonte que
pertença à família "sans-serif", declarada logo a seguir, não importando qual seja ela. */
body {
font-family: "Arial", "Helvetica", "sans-serif";
}
Quadro 32 – Propriedade font-family
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade font-family, apresentando na parte superior
do código o comentário “No caso do exemplo abaixo, o navegador verificará se a fonte "Arial" está disponível e a
utilizará para renderizar os textos de todos os elementos do documento, pois herdarão essa propriedade do elemento
body. Caso a fonte "Arial" não esteja disponível, o navegador verificará a disponibilidade da próxima fonte declarada,
que no exemplo é a "Helvetica". Caso o navegador não encontre também essa fonte, ele solicitará qualquer fonte que
pertença à família "sans-serif", declarada logo a seguir, não importando qual seja ela”. Em seguida, dentro da dentro do
seletor body, é definida a propriedade font-family como Arial, Helvetica e sans-serif, nessa ordem.
• font-style - Essa propriedade em CSS permite definir o estilo da fonte, podendo ser:
itálico, normal (em pé) ou oblíquo. O código do Quadro abaixo demonstra a
aplicação dessa propriedade:
h1 {
font-style: italic;
}
Quadro 33 – Propriedade font-style
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade font-style dentro do seletor h1 e é definida
como italic.
• font-weight - Essa propriedade em CSS permite definir a largura da fonte do texto,
popularmente conhecido como “negrito”. O código do Quadro a seguir demonstra a
aplicação dessa propriedade:
h1 {
Competência 04
64
font-weight: bold;
}
Quadro 34 – Propriedade font-weight
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade font-weight dentro do seletor h1 e é definida
como bold.
4.4.4 Propriedades de efeitos de link
Muitas vezes se pretende modificar o efeito de um link a partir de um evento do
usuário, como passar o mouse por cima ou acessar o referido link. Um link visitado, não visitado,
ativo ou no estado hover pode assumir aspectos diferentes através de CSS.
Para isso, é preciso trabalhar com as pseudoclasses de estado. Pseudoclasse de estado
no CSS é uma palavra-chave adicionada a um seletor que especifica um estado especial do
elemento selecionado. Um estado da pseudoclasse acontece quando o usuário desencadeia uma
ação.
Vamos as pseudoclasses para efeitos de link!
• :link - Essa pseudoclasse aplica a configuração ao link que ainda não tenham sido
visitados. Recomenda-se que a ela seja a primeira a ser declarada entre todas
aquelas destinadas a estilizar os estados dos links. O código do Quadro abaixo
demonstra a aplicação dessa propriedade:
/* No caso do exemplo abaixo, o link ficará na cor Azul até ser acessado*/
a:link {
color: rgb (0, 0, 255);
}
Quadro 35 – Propriedade :link
Fonte: O autor
Pesquise!
Faça uma pesquisa e verifique quais as possibilidades de parametrizaçãoda propriedade font-weight.
Competência 04
65
Descrição: Código-fonte da parte CSS demonstrando o uso da pseudoclasse :link, apresentando na parte superior do
código o comentário “No caso do exemplo abaixo, o link ficará na cor Azul até ser acessado ". Em seguida, dentro da
pseudoclasse a:link é definida a propriedade color como rgb (0,0,255).
• :hover - Essa pseudoclasse aplica a configuração ao link no exato momento em que
você passa o mouse por cima dele. O código do Quadro a seguir demonstra a
aplicação dessa propriedade:
/* No caso do exemplo abaixo, o link ficará na cor Magenta quando o usuário passar
o mouse por cima dele*/
a:hover {
color:#FF00FF;
}
Quadro 36 – Propriedade :hover
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da pseudoclasse :hover, apresentando na parte superior do
código o comentário “ No caso do exemplo abaixo, o link ficará na cor Magenta quando o usuário passar o mouse por
cima dele ". Em seguida, dentro da pseudoclasse a:houver é definida a propriedade color como #FF00FF.
• :active - Essa pseudoclasse aplica a configuração ao link quando você ativa o
elemento. Por exemplo, quando se clica em um link e não solta o botão do mouse.
Nesse momento, você está ativando a ação do elemento. O código do Quadro
abaixo demonstra a aplicação dessa propriedade:
/* No caso do exemplo abaixo, o link ficará na cor Laranja quando o usuário clicar
no link e não soltar o botão do mouse*/
a:active {
color: orange;
}
Quadro 37 – Propriedade :active
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da pseudoclasse :active, apresentando na parte superior do
código o comentário “ No caso do exemplo abaixo, o link ficará na cor Laranja quando o usuário clicar no link e não
soltar o botão do mouse". Em seguida, dentro da pseudoclasse a:active é definida a propriedade color como orange.
• :visited - Essa pseudoclasse aplica a configuração ao link que já tenha sido visitado.
Recomenda-se que ela seja a segunda a ser declarada (depois da pseudoclasse
:link). O código do Quadro a seguir demonstra a aplicação dessa propriedade:
/* No caso do exemplo abaixo, o link que já foi visitado ficará na cor Vermelha*/
Competência 04
66
a:visited {
color: rgb (255, 0, 0);
}
Quadro 38 – Propriedade :visited
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da pseudoclasse :visited, apresentando na parte superior do
código o comentário “No caso do exemplo abaixo, o link que já foi visitado ficará na cor Vermelha ". Em seguida, dentro
da pseudoclasse a:visited é definida a propriedade color como rgb (255,0,0).
4.4.5 Propriedades de lista
A seguir, será vista algumas propriedades de CSS ligadas à definição de características
das listas, assim como os seus respectivos exemplos:
• list-style-image - Essa propriedade em CSS permite definir uma imagem como
marcador da lista, podendo ser:
1. none: sem marcador;
2. URL: url (caminho/marcador.gif).
O código do Quadro abaixo demonstra a aplicação dessa propriedade:
/* código HTML*/
<ul>
<li>item da lista </li>
</ul>
/* código CSS*/
ul {
list-style-image: url("forma.gif");
}
Quadro 39 – Propriedade list-style-image
Fonte: O autor
Descrição: Código-fonte das partes HTML e CSS demonstrando o uso da propriedade list-style-image definindo uma
imagem como marcador da lista. Na parte HTML é usada a tag <li> dentro da tag <ul> e com a descrição “item da lista”.
Em seguida, na parte CSS, dentro do seletor ul é definida a propriedade list-style-image com a url ("forma.gif").
• list-style-position - Essa propriedade em CSS permite definir a posição do marcador
da lista, podendo ser:
Competência 04
67
1. outside: marcador fora do alinhamento do texto;
2. inside: marcador alinhado com texto.
O código do Quadro abaixo demonstra a aplicação dessa propriedade:
/* código HTML*/
<ul class="inside square">
<li>aplica o valor: "inside" aos marcadores de listas.</li>
</ul>
<ul class="outside square">
<li>aplicar o valor: "outside" aos marcadores de listas.</li>
</ul>
/* Código CSS.
No caso do exemplo abaixo, no primeiro caso (ul.a) o marcador ficará alinhado com o texto
e no segundo (ul.b) ficará fora do alinhamento do texto*/
ul.inside {
list-style-position: inside;
}
ul.outside {
list-style-position: outside;
}
Quadro 40 – Propriedade list-style-position
Fonte: O autor
Descrição: Código-fonte das partes HTML e CSS demonstrando o uso da propriedade list-style-position definindo a
posição do marcador da lista. Na parte HTML é usada a tag <ul> e que aplica o atributo class definindo-o como “inside
square” e a tag <li> com a descrição “aplica o valor: "inside" aos marcadores de listas.”. Ainda na parte HTML é usada
outra tag <ul> e dentro dela aplica o atributo class definindo-o como “outside square” e a tag <li> com a descrição
“aplica o valor: "outside" aos marcadores de listas.”. Em seguida, na parte CSS, é apresentado na parte superior do
código o comentário “No caso do exemplo abaixo, no primeiro caso (ul.a) o marcador ficará alinhado com o texto e no
segundo (ul.b) ficará fora do alinhamento do texto". Logo depois, dentro do seletor ul.inside é definida a propriedade
list-style-position como inside e do seletor ul.outside como outside.
• list-style-type - Essa propriedade em CSS permite definir o tipo do marcador da
lista, podendo ser diversos, sendo alguns deles:
1. none: sem marcador;
2. disc: círculo (bolinha cheia);
Competência 04
68
3. circle: circunferência (bolinha vazia);
4. square: quadrado cheio;
5. decimal: números 1, 2, 3, 4, ...;
6. lower-roman: romano minúsculo i, ii, iii, iv, ...;
7. lower-alpha: letra minúscula a, b, c, d, ...
O código do Quadro abaixo demonstra a aplicação dessa propriedade:
/* código HTML*/
<ul class="circle">
<li> aplicar o tipo círculo aos marcadores da lista.</li>
</ul>
/* Código CSS.
No caso do exemplo abaixo, no primeiro caso (ul.a) o marcador ficará alinhado com o texto
e no segundo (ul.b) ficará fora do alinhamento do texto*/
ul.circle {
list-style-type: circle;
}
Quadro 41 – Propriedade list-style-type
Fonte: O autor
Descrição: Código-fonte das partes HTML e CSS demonstrando o uso da propriedade list-style-type definindo o tipo de
marcador da lista. Na parte HTML é usada a tag <ul> e que aplica o atributo class definindo-o como “circle” e a tag <li>
com a descrição “aplicar o tipo círculo aos marcadores da lista.”. Em seguida, na parte CSS, é apresentado na parte
superior do código o comentário “No caso do exemplo abaixo, no primeiro caso (ul.a) o marcador ficará alinhado com o
texto e no segundo (ul.b) ficará fora do alinhamento do texto ". Logo depois, dentro do seletor ul.circle é definida a
propriedade list-style-type como circle.
• list-style - Essa propriedade em CSS permite definir uma só declaração para duas
propriedades de listas. A sintaxe geral é:
list-style: list-position list-image ou list-style: list-position list-type
O código do Quadro a seguir demonstra a aplicação dessa propriedade:
/* código HTML*/
<ul>
<li>exemplo de declaração para duas propriedades</li>
</ul>
Competência 04
69
/* Código CSS*/
ul {
list-style: inside url("seta.gif");
}
Quadro 42 – Propriedade list-style
Fonte: O autor
Descrição: Código-fonte das partes HTML e CSS demonstrando o uso da propriedade list-style definindo uma só
declaração para duas propriedades da lista. Na parte HTML é usada a tag <ul> e dentro dela a tag <li> com a descrição
“exemplo de declaração para duas propriedades”. Em seguida, na parte CSS, dentro do seletor ul é definida a
propriedade list-style como inside url("seta.gif").
4.4.6 Propriedades de borda
A seguir, você verá algumas propriedadesde CSS ligadas às bordas, assim como os seus
respectivos exemplos:
● border-width - Essa propriedade em CSS permite definir a espessura da borda. As medidas
possíveis que ela pode assumir são:
1. thin: borda fina.
2. medium: borda média.
3. thick: borda grossa.
4. length: unidade de medida CSS (px, pt, em, cm, ...).
● border-style - Essa propriedade em CSS permite definir o estilo da borda. As medidas
possíveis que ela pode assumir são:
1. none: nenhuma borda.
2. hidden: equivalente a none.
3. dotted: borda pontilhada.
4. dashed: borda tracejada.
5. solid: borda contínua.
6. double: borda dupla.
7. groove: borda entalhada.
8. ridge: borda em ressalto.
9. inset: borda em baixo relevo.
Competência 04
70
10. outset: borda em alto relevo.
● border-color - Essa propriedade em CSS permite definir a cor da borda. As medidas possíveis
que ela pode assumir são:
11. código hexadecimal: #FFFFFF.
12. código rgb: (255, 0, 255).
13. palavra-chave: red, blue, green.
14. transparente: transparente.
O código no Quadro a seguir demonstra a aplicação das propriedades border-width,
border-style e border-color:
/* código HTML*/
<h3> borda fina, tracejada e vermelha </h3>
<p> borda 8px, pontilhada e verde </p>
/* Código CSS*/
h3 {
border-width: thin;
border-style: dashed;
border-color: red;
}
p {
border-width: 8px;
border-style: dotted;
border-color: green;
}
Quadro 43 – Propriedades: border-width, border-style e border-color
Fonte: O autor
Descrição: Código-fonte das partes HTML e CSS demonstrando o uso das propriedades border-width, border-style e
border-color , definindo uma borda fina, tracejada e vermelha e outra borda com 8px, pontilhada e verde . Na parte
HTML é usada a tag <h3> (com a descrição “borda fina, tracejada e vermelha”) e a tag <p> com a descrição “borda 8px,
pontilhada e verde”. Em seguida, na parte CSS, dentro do seletor h3 são definidas as propriedades border-width (como
“thin”), border-style (como “dashed”) e border-color (como “red”). Ainda na parte CSS, dentro do seletor p são são
definidas as propriedades border-width (como “8px”), border-style (como “dotted”) e border-color (como “green”).
Caro(a) estudante,
Competência 04
71
Chegamos ao fim desta quarta competência. Você aprendeu nessa competência sobre
os conceitos da linguagem CSS, assim como a sintaxe de uma regra CSS. Foi visto ainda como
incorporar CSS em páginas HTML e como trabalhar com as principais propriedades do CSS.
Nosso próximo passo é seguir para competência 5.
Estamos próximo de concluir essa disciplina. Vamos lá?
Agora, acesse o AVA e responda as questões da competência 4.
Ficou com alguma dúvida na competência 4? Para saná-las com os professores
e discutir com seus colegas sobre os assuntos estudados, acesse o Fórum de
Dúvidas: Competência 4!
72
Competência 05
5.Competência 05 | Planejar layouts com CSS 3
Prezado(a) estudante, na competência 4 você aprendeu a como estilizar uma página. No
entanto, não foi abordado como planejar o layout utilizando o CSS 3. Com isso, esta competência
tem como objetivo apresentar como definir um modelo de caixa (Box Model), assim como tratar
sobre a largura, a altura e o posicionamento dos seus elementos. Você verá ainda sobre a definição
de margem e de espaçamento interno, aprendendo também sobre box-sizing, que dependendo de
como é declarada, altera a forma como o Box Model é calculada. Por fim, serão apresentadas as
propriedades de display.
Vamos continuar?
5.1 Box Model (Modelo de caixa)
Quando são alteradas as propriedades de elementos dentro de uma página, precisa-se
estar ciente de como essas alterações se comportarão na presença de outros elementos. Uma
forma de entender o impacto causado pela mudança é pensar no box model (modelo em caixa em
português) ou também chamado de Box Model W3C.
Segundo definido pela W3C, O box model padrão é constituído de quatro áreas
retangulares, sendo elas: conteúdo (content), espaçamento (padding), bordas (border) e margens
(margin).
Essas áreas se desenvolvem de dentro para fora, na ordem listada abaixo:
• content (conteúdo): o conteúdo (texto ou imagem) que será exibido.
• padding (espaçamento): determina a distância entre a borda e o conteúdo.
• border (borda): são as quatro linhas que envolvem a caixa (box).
• margin (margem): determina a distância que separa uma caixa da outra.
A Figura abaixo representa o box model proposto pelo W3C:
73
Competência 05
Figura 23 – Box model proposto pelo W3C
Fonte: www.w3schools.com/css/box-model.gif
Descrição: Figura contendo quatro retângulos de tamanhos distintos (um dentro do outro, seguindo do menor até o
maior), sendo o maior e o menor deles feito com linha tracejada e os dois retângulos intermediários feitos com linha
contínua e com o espaçamento entre eles tendo cor de fundo a cor verde. No espaçamento entre cada retângulo é
apresentado os elementos do box model proposto pelo W3C, sendo eles: margin(entre o maior retângulo e o segundo
maior) border (entre o segundo maior e o terceiro maior) padding (entre o terceiro e o menor retângulo) e content
(dentro do menor retângulo).
5.1.1 Padding
A propriedade padding se destina a criar um espaçamento interno em um box (por
espaçamento interno leia-se a distância entre o limite do elemento, sua borda, e seu respectivo
conteúdo). Vale destacar que os valores válidos para as propriedades padding são:
• comprimento: um valor CSS para comprimento (px, em, pt, etc).
• porcentagem: um valor expresso em porcentagem.
Uma vez visto os valores possíveis que podem ser declarados numa propriedade
padding, a seguir, você verá cada forma de declarar essa propriedade:
• padding-top - Essa propriedade define o espaçamento superior. O código do
Quadro a seguir demonstra a aplicação dessa propriedade:
/*código HTML*/
<p> um espaçamento superior de 4cm </p>
/* Código CSS*/
p {
padding-top: 4cm;
74
Competência 05
}
Quadro 44 – Propriedade padding-top
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade padding-top. Na parte HTML é usada a tag
<p> com a descrição “um espaçamento superior de 4cm.”. Em seguida, na parte CSS é apresentada o seletor p e dentro
dela é definida a propriedade padding-top com o valor 4 cm.
• padding-bottom - Essa propriedade define o espaçamento inferior. O código do
Quadro abaixo demonstra a aplicação dessa propriedade:
/*código HTML*/
<p> um espaçamento inferior de 6cm </p>
/* Código CSS*/
p {
padding-bottom: 6cm;
}
Quadro 45 – Propriedade padding - bottom
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade padding-bottom. Na parte HTML é usada a
tag <p> com a descrição “um espaçamento inferior de 6cm.”. Em seguida, na parte CSS é apresentado o seletor p e
dentro dele é definida a propriedade padding-bottom com o valor 6 cm.
• padding-right- Essa propriedade define o espaçamento à direita. O código do
Quadro a seguir demonstra a aplicação dessa propriedade:
/*código HTML*/
<p> um espaçamento à direita de 8cm </p>
/* Código CSS*/
p {
padding-right: 8cm;
}
Quadro 46 – Propriedade padding - right
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade padding-right. Na parte HTML é usada a tag
<p> com a descrição “um espaçamento à direita de 8cm.”. Em seguida, na parte CSS é apresentado o seletor p e dentro
dele é definida a propriedade padding-right com o valor 8 cm.
75
Competência 05
• padding-left- Essa propriedade define o espaçamento à esquerda. O código do
Quadro abaixo demonstraa aplicação dessa propriedade:
/*código HTML*/
<p> um espaçamento à esquerda de 10cm </p>
/* Código CSS */
p {
padding-left: 10cm;
}
Quadro 47 – Propriedade padding - left
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade padding-left. Na parte HTML é usada a tag
<p> com a descrição “um espaçamento à esquerda de 10cm.”. Em seguida, na parte CSS é apresentado o seletor p e
dentro dele é definida a propriedade padding-left com o valor 10 cm.
5.1.2 Margin
A propriedade margin se destina a definir a dimensão de cada uma das quatro margens
de um elemento HTML. Vale destacar que os valores válidos para as propriedades margin são:
• auto: margens laterais iguais (para centrar na horizontal elementos nível de bloco).
• comprimento: um valor CSS para comprimento (px, em, pt, etc).
• porcentagem: um valor expresso em porcentagem.
Uma vez visto os valores possíveis que podem ser declarados numa propriedade margin,
a seguir você verá cada forma de declarar essa propriedade:
• margin-top - Essa propriedade define a margem superior. O código do Quadro
abaixo demonstra a aplicação dessa propriedade:
/*código HTML*/
<p> uma margem superior de 4cm </p>
/* Código CSS*/
p {
margin-top: 4cm;
76
Competência 05
}
Quadro 48 – Propriedade margin-top
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade margin-top. Na parte HTML é usada a tag
<p> com a descrição “uma margem superior de 4cm”. Em seguida, na parte CSS é apresentado o seletor p e dentro dele
é definida a propriedade margin-top com o valor 4 cm.
• margin-bottom- Essa propriedade define a margem inferior. O código do Quadro a
seguir ,demonstra a aplicação dessa propriedade:
/*código HTML*/
<p> uma margem inferior de 6cm </p>
/* Código CSS*/
p {
margin-bottom: 6cm;
}
Quadro 49 – Propriedade margin-bottom
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade margin-bottom. Na parte HTML é usada a
tag <p> com a descrição “uma margem inferior de 6cm”. Em seguida, na parte CSS é apresentado seletor p e dentro
dele é definida a propriedade margin-bottom com o valor 6 cm.
• margin-right- Essa propriedade define a margem direita. O código do Quadro
abaixo demonstra a aplicação dessa propriedade:
/*código HTML*/
<p> uma margem direita de 8cm </p>
/* Código CSS*/
p {
margin-right: 8cm;
}
Quadro 50 – Propriedade margin-right
Fonte: O autor
77
Competência 05
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade margin-right. Na parte HTML é usada a tag
<p> com a descrição “uma margem direita de 8cm”. Em seguida, na parte CSS é apresentado o seletor p e dentro dele é
definida a propriedade margin-right com o valor 8 cm.
• margin-left- Essa propriedade define uma margem esquerda. O código do Quadro
abaixo demonstra a aplicação dessa propriedade:
/*código HTML*/
<p> uma margem esquerda de 10cm </p>
/* Código CSS*/
p {
margin-left: 10cm;
}
Quadro 51 – Propriedade margin-left
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade margin-left. Na parte HTML é usada a tag
<p> com a descrição “uma margem esquerda de 10cm”. Em seguida, na parte CSS é apresentado o seletor p e dentro
dele é definida a propriedade margin-left com o valor 10 cm.
5.2 Width e Height
De acordo com o box Model padrão da W3C, as propriedades width
(largura) e height (altura) definem as dimensões da área de conteúdo do box criado. As dimensões
finais do box (largura x altura) são o resultado da soma dos valores das
propriedades width, padding e border.
Agora você irá conhecer as propriedades width e height!
DICA IMPORTANTE!
É válido declarar valores negativos para margem, com o objetivo
de sobrepor elementos.
78
Competência 05
5.2.1 Width
A propriedade width se destina a definir a largura do box. Os valores considerados
válidos para as propriedades width são:
• comprimento: um valor CSS para comprimento (px, em, pt, etc).
• porcentagem: um valor expresso em porcentagem.
• auto: um valor que depende dos valores de outras propriedades.
Uma vez visto os valores possíveis que podem ser declarados numa propriedade width,
a seguir você verá cada forma de declarar essa propriedade:
• width - Essa propriedade define a largura do boxe. O código do Quadro abaixo
demonstra a aplicação dessa propriedade:
/*código HTML*/
<div>
elemento DIV com 200px de largura.
</div>
/* Código CSS*/
div {
width: 200px;
}
Quadro 52– Propriedade width
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade width. Na parte HTML é usada a tag <div>
com a descrição “elemento DIV com 200px de largura”. Em seguida, na parte CSS é apresentado o seletor div e dentro
dele é definida a propriedade width com o valor 200px.
• max-width - Essa propriedade serve para definir a largura máxima de um elemento.
O código do Quadro a seguir demonstra a aplicação dessa propriedade:
/*código HTML*/
<div>
elemento DIV.
</div>
/* Código CSS
No exemplo abaixo o elemento "div" se estenderá por toda a largura do seu elemento-
pai até que a largura deste elemento atinja os 600px e a partir daí o "div" terá
largura fixa de 600px */
div {
79
Competência 05
width: 100%;
max-width: 600px;
}
Quadro 53 – Propriedade max-width
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade max-width. Na parte HTML é usada a tag
<div> com a descrição “elemento DIV”. Em seguida, na parte CSS é apresentada na parte superior do código o
comentário “No exemplo abaixo o elemento "div" se estenderá por toda a largura do seu elemento-pai até que a
largura deste elemento atinja os 600px e a partir daí o "div" terá largura fixa de 600px", vindo logo depois o seletor div e
dentro dele são definidas as propriedade width com o valor 100% e max-width com valor de 600px.
• min-width - Essa propriedade serve para definir a largura mínima de um elemento.
O código do Quadro abaixo demonstra a aplicação dessa propriedade:
/*código HTML*/
<div>
elemento DIV.
</div>
/* Código CSS.
No exemplo abaixo o elemento "div" não poderá ter a largura menor que os 100px*/
div {
width: 100%;
min-width: 100px;
}
Quadro 54 – Propriedade max-width
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade min-width. Na parte HTML é usada a tag
<div> com a descrição “elemento DIV”. Em seguida, na parte CSS é apresentada na parte superior do código o
comentário “No exemplo abaixo o elemento "div" não poderá ter a largura menor que os 100px", vindo logo depois o
seletor div e dentro dele são definidas as propriedade width com o valor 100% e min-width com valor de 100px.
5.2.2 Height
A propriedade height se destina a definir a altura do box. Os valores considerados
válidos para as propriedades height são:
• comprimento: um valor CSS para comprimento (px, em, pt, etc).
• porcentagem: um valor expresso em porcentagem.
• auto: um valor que depende dos valores de outras propriedades.
80
Competência 05
Uma vez visto os valores possíveis que podem ser declarados numa propriedade height,
a seguir será demonstrada cada forma de declarar essa propriedade:
height - Essa propriedade define a altura do boxe. O código do Quadro abaixo
demonstra a aplicação dessa propriedade:
/*código HTML*/
<div>
elemento DIV com 200px de altura.
</div>
/* Código CSS*/
div {
height: 200px;
}
Quadro 55 – Propriedade height
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade height. Na parte HTML é usada a tag <div>com a descrição “elemento DIV com 200px de altura”. Em seguida, na parte CSS é apresentado o seletor div e dentro
dele é definida a propriedade height com o valor 200px.
• max-height - Essa propriedade serve para definir a altura máxima de um elemento.
O código do Quadro a seguir demonstra a aplicação dessa propriedade:
/*código HTML*/
<div>
elemento DIV.
</div>
/* Código CSS.
No exemplo abaixo o elemento "div" se estenderá por toda a altura do seu elemento-
pai até que a altura deste elemento atinja os 600px e a partir daí o "div" terá
largura fixa de 600px */
div {
height: 100%;
max-height: 600px;
}
Quadro 56 – Propriedade max-height
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade max-height. Na parte HTML é usada a tag
<div> com a descrição “elemento DIV”. Em seguida, na parte CSS é apresentada na parte superior do código o
comentário “No exemplo abaixo o elemento "div" se estenderá por toda a altura do seu elemento-pai até que a altura
deste elemento atinja os 600px e a partir daí o "div" terá largura fixa de 600px", vindo logo depois o seletor div e dentro
dele são definidas as propriedade height com o valor 100% e max-height com valor de 600px.
81
Competência 05
• min-height - Essa propriedade serve para definir a altura mínima de um elemento.
O código do Quadro abaixo demonstra a aplicação dessa propriedade:
/*código HTML*/
<div>
elemento DIV com 100px de altura.
</div>
/* Código CSS.
No exemplo abaixo o elemento "div" não poderá ter a altura menor que os 100px*/
div {
height: 100%;
min-height: 100px;
}
Quadro 57 – Propriedade min-height
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade min-height. Na parte HTML é usada a tag
<div> com a descrição “elemento DIV com 100px de altura”. Em seguida, na parte CSS é apresentada na parte superior
do código o comentário “No exemplo abaixo o elemento "div" não poderá ter a altura menor que os 100px", vindo logo
depois o seletor div e dentro dele são definidas as propriedades height com o valor 100% e min-height com valor de
100px.
5.3 Box-sizing
Se você pensa no tamanho de uma caixa, você não pensa só no conteúdo dela. Uma
caixa termina em sua borda e isso deveria ser considerado seu tamanho, o que não acontece com o
box model.
Para isso, as CSS3 criaram a propriedade box-sizing, que dependendo de como é
declarada, altera a forma como o Box Model é calculado, incorporando ou não os valores de
padding e border à largura do box criado pelo elemento HTML.
Os valores considerados válidos para a propriedade box-sizing são:
• contente-box: essa declaração é o estilo padrão, conforme especificado pela norma
CSS. Quando declarada dessa forma, os valores das propriedades padding e border
são somados aos valores de width (largura) e height (altura), apresentando o
elemento com um tamanho maior do que o desejado. Esse é o padrão default do
box model.
82
Competência 05
• border-box: quando declarada assim, os valores das propriedades padding e
border não são somados aos valores de width (largura) e height (altura,
apresentando assim o elemento com seu tamanho real.
O código do Quadro a seguir demonstra a aplicação dessa propriedade:
/* Código HTML*/
<!DOCTYPE html>
<html>
<head>
<title> Exemplo da propriedade Box-Sizing </title>
<link rel="stylesheet" href="box sizing.css">
</head>
<body>
<div id="d1"> Box Sizing, a sua solução </div>
<div id="d2"> Box Sizing, a sua solução </div>
</body>
</html>
/* Código CSS */
#d1 {
width: 400px;
height: 300px;
border: 10px solid #000;
padding: 50px;
box-sizing: border-box;
}
#d2 {
width: 400px;
height: 300px;
border: 0px;
padding: 0px;
background: green;
box-sizing: content-box
}
Quadro 58 – Propriedade box-sizing
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade box-sizing. Na parte HTML o código apresenta a tag
<title>, contendo dentro dela o texto “Exemplo da propriedade Box-Sizing” e a tag <link> (onde está contida dentro dela
o href box sizing.css). Logo em seguida, dentro da tag <body> estão duas tags <div>, contendo ambas a mensagem “Box
Sizing, a sua solução”. Em seguida, na parte CSS é apresentada a tag d1 e dentro dela são definidas as propriedades
width (400px), height (300px); border (10px solid #000); padding (50px) e box-sizing (border-box). Logo após é
83
Competência 05
apresentada a tag d2 e dentro dela são definidas as propriedades width (400px), height (300px); border (0px); padding
(0px); background (green) e box-sizing (content-box).
Como resultado do código do Quadro acima que utiliza a propriedade box-sizing, você
terá como resultado a sua representação na Figura abaixo.
Figura 24 – Imagem da tela do browser como resultado do uso da propriedade box-sizing
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade box-sizing. A parte
superior da página mostra uma box-sizing (um retângulo com fundo branco e linhas de borda grossas, tendo dentro
dela a mensagem “box sizing com o uso de box border”). A parte inferior da página mostra box-sizing (um retângulo
com fundo verde e linhas de borda grossas, tendo dentro dela a mensagem “box sizing com o uso de content box”).
84
Competência 05
5.4 Position
Existe um conjunto de propriedades que podemos utilizar para posicionar um elemento
na página, que são top , left , bottom e right . Porém essas propriedades, por padrão, não são
obedecidas por nenhum elemento, pois elas dependem de outra propriedade, a position.
A propriedade position determina qual é o modo de posicionamento de um elemento,
podendo ela receber como valor: static, relative, absolute ou fixed.
Veremos o comportamento de cada um deles, junto com as propriedades de
coordenadas.
• static - O elemento com posição definida como static permanecerá sempre em seu
local original no documento. Esse é o valor default de todo elemento HTML. O
código do Quadro abaixo demonstra a aplicação dessa propriedade:
/* Código CSS*/
h1 {
position: static;
}
Quadro 59 – Propriedade position declarada como static
Fonte: O autor
Descrição: Código-fonte da parte CSS demonstrando o uso da propriedade position dentro do seletor h1 e é definida
como static.
• relative - O elemento com posição definida como relative aceita as propriedades de
coordenadas. As referidas coordenadas são obedecidas em relação à posição
original do elemento. O exemplo de código transcrito no Quadro a seguir
demonstra a aplicação dessa propriedade, tendo como resultado o que é
apresentado na Figura abaixo:
/*código HTML*/
<!DOCTYPE html>
<html>
<head>
<title> Exemplo da propriedade Relative </title>
85
Competência 05
<link rel="stylesheet" href="estiloRelative.css">
</head>
<body>
<div>
<h1> Exemplo da posição relative linha 1</h1>
<h2> Exemplo da posição linha 2</h2>
</div>
</body>
</html>
/* Código CSS*/
div {
width: 350px;
height: 300px;
border: 10px solid #000;
padding: 50px;
box-sizing: border-box;
}
h1 { position: relative;
top: 20px;
left: 20px;
}
h2 { top: 20px;
left: 20px;
}
Quadro 60 – Propriedade position declarada como relative
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade position declarada como relative. Na parte HTML o código
apresenta a tag <title>, contendo dentro dela o texto “Exemplo da propriedade Relative” e a tag <div>, onde está
contida dentro dela a tag <h1> (contendo a mensagem “Exemplo da posição relative linha 1”) e a tag <h2> (contendo a
mensagem “Exemplo da posição linha 2”). Em seguida,na parte CSS é apresentado o seletor div e dentro dele são
definidas as propriedades width (350px), height (300px); border (10px solid #000); padding (50px) e box-sizing (border-
box). Logo após é apresentado o seletor h1 e dentro dele são definidas as propriedades position (relative), top (20px) e
left (20px). Em seguida é apresentado seletor h2 e dentro dele são definidas as propriedades top (20px) e left (20px).
Como resultado do código do Quadro acima que utiliza o elemento relative, você terá
como resultado a sua representação na Figura abaixo.
86
Competência 05
Figura 25 – Resultado do uso da propriedade position declarada como relative
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade position declarada como
relative. Na barra de título da página web é exibida a mensagem “Exemplo da propriedade relative”. A parte superior
da página mostra uma box-sizing (um retângulo com fundo branco e linhas de borda grossa), tendo dentro dele a
mensagem “Exemplo da posição relative linha 1” na parte central do box e logo abaixo da palavra linha 1, está a
mensagem “Exemplo da posição linha 2” mais alinhada a direita do box.
• absolute - O elemento com posição definida como absolute possibilita posicionar
qualquer elemento de acordo com o elemento pai que tenha um position diferente
de static. O exemplo de código transcrito no Quadro a seguir demonstra a aplicação
dessa propriedade, tendo como resultado o que é apresentado na Figura abaixo:
/*código HTML*/
<!DOCTYPE html>
<html>
<head>
<title> Exemplo da propriedade Absolute </title>
<link rel="stylesheet" href="estiloAbsolute.css">
</head>
<body>
<div>
<h1> Posição Absolute L1</h1>
<h2> Posição Absolute L2</h2>
</div>
</body>
</html>
87
Competência 05
/* Código CSS*/
body { background: #000; }
div {
background: #eee;
width: 400px;
height: 300px;
border: 10px solid #000;
padding: 50px;
box-sizing: border-box;
}
h1 { position: absolute;
top: 20px;
left: 20px;
outline: 1px solid #444;
}
h2 { outline: 1px solid #f90;}
Quadro 61 – Propriedade position declarada como absolute
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade position declarada como absolute. Na parte HTML o
código apresenta a tag <title>, contendo dentro dela o texto “Exemplo da propriedade Absolute” e a tag <div>, onde
está contida dentro dela a tag <h1> (contendo a mensagem “Posição Absolute L1”) e a tag <h2> (contendo a
mensagem “Posição Absolute L2”). Em seguida, na parte CSS é apresentada o seletor div e dentro dele são definidas as
propriedades background (#eee) width (400px), height (300px); border (10px solid #000); padding (50px) e box-sizing
(border-box). Logo após é apresentado seletor h1 e dentro dele são definidas as propriedades position (absolute), top
(20px); left (20px) e outline (1px solid #444). Em seguida é apresentado seletor h2 e dentro dele é definida a
propriedade outline (1px solid #f90).
Como resultado do código do Quadro acima que utiliza o elemento absolute, você terá
como resultado a sua representação na Figura abaixo.
88
Competência 05
Figura 26 – Resultado do uso da propriedade position declarada como absolute
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade position declarada como
absolute. A parte superior da página mostra uma box-sizing (um retângulo com fundo cinza), tendo dentro dele a
mensagem “Posição Absolute L1” alinhada à mais ao centro do box. O restante da página está com um fundo preto.
• fixed - O elemento com posição definida como fixed sempre vai tomar como
referência a porção visível do documento no navegador, e mantém essa posição
inclusive quando há rolagem na tela. O exemplo de código transcrito no Quadro
abaixo demonstra a aplicação dessa propriedade, tendo como resultado o que é
apresentado na Figura a seguir:
/*código HTML*/
<body>
<div>
<h1> Exemplo da posição Fixed topo</h1>
<h2> Exemplo da posição Fixed baixo</h2>
</div>
</body>
</html>
/* Código CSS*/
div {
width: 400px;
height: 1600px;
border: 10px solid #000;
padding: 50px;
box-sizing: border-box;
position: relative
}
h1 { position: fixed;
top: 0px;
right: 20px;
left: 20px;
outline: 1px solid #444;
}
h2 { position: fixed;
bottom: 0px;
right: 20px;
left: 20px;
outline: 1px solid #444;
background: #fff;
}
89
Competência 05
Quadro 62 – Propriedade position declarada como fixed
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade position declarada como fixed. Na parte HTML o código
apresenta a tag <div>, onde está contida dentro dela a tag <h1> (contendo a mensagem “Exemplo da posição Fixed
topo”) e a tag <h2> (contendo a mensagem “Exemplo da posição Fixed baixo”). Em seguida, na parte CSS é
apresentado seletor div e dentro dele são definidas as propriedades width (400px), height (1600px); border (10px solid
#000); padding (50px); box-sizing (border-box) e position (relative). Logo após é apresentado o seletor h1 e dentro dele
são definidas as propriedades position (fixed), top (20px); left (20px) e outline (1px solid #444). Em seguida é
apresentado o seletor h2 e dentro dela são definidas as propriedades position (fixed), top (20px); left (20px); outline
(1px solid #444) e background (#fff).
Como resultado do código do Quadro acima que utiliza o elemento fixed, você terá
como resultado a sua representação na Figura abaixo.
Figura 27 – Resultado do uso da propriedade position declarada como fixed
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade position
declarada como fixed. A página web possui duas cores fundo, sendo uma barra laranja (que preenche quase toda
página) e uma barra preta (que preenche o restante da página). A parte superior da página mostra uma box-sizing
curta(um retângulo com fundo laranja), tendo dentro dele a mensagem “Posição Fixed L1” alinhada à direita do box. Na
parte inferior da página é exibida uma box-sizing prolongada (um retângulo com fundo branco), tendo dentro dele a
mensagem “Posição Fixed L2” alinhada à direita do box.
90
Competência 05
5.5 Display
A propriedade display permite definir a maneira como determinado elemento HTML
será renderizado. Em outras palavras, essa propriedade define qual estratégia de exibição o
elemento utilizará. É tida como a propriedade mais importante do CSS para controlar o layout. Ela
pode receber como valor: none, block, inline, inline-block, list-item, table.
Você verá o comportamento de cada um deles, conforme descrito a seguir:
• none – a declaração display: none faz com que o elemento HTML não seja
renderizado. Quando escondemos um elemento com esta declaração, o navegador
não gera um box para ele e em consequência ele não é visto na tela e não interfere
com o layout da página. O exemplo de código transcrito no Quadro a seguir
demonstra a aplicação dessa propriedade, tendo como resultado o que é
apresentado na Figura abaixo:
/*código HTML*/
<!DOCTYPE html>
<html>
<head>
<title> Exemplo da propriedade Display: none </title>
<link rel="stylesheet" href="exemploNone.css">
</head>
<body>
<a href="...">Saiba mais <span class="contexto"> acessando o AVA do EAD
Pernambuco </span></a>
</body>
</html>
/* Código CSS.*/
.contexto {
display: none;
DICA IMPORTANTE!
As propriedades top, right, bottom, left não se aplicam para elementos com
posição static!
91
Competência 05
}
Quadro 63 – Propriedade display declarada comonone
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade display declarada como none. Na parte HTML o código
apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: none” e a declaração do href
"exemploNone.css". Em seguida é definida a tag <span>, onde está contida dentro dela o atributo class (contendo a
declaração “contexto”). Logo após, na parte CSS é apresentado o seletor contexto e dentro dele é definida a
propriedade display como none.
Como resultado do código do Quadro acima que utiliza a propriedade display declarado
como none, você terá como resultado a sua representação na Figura abaixo.
Figura 28 – Resultado do uso da propriedade Display declarada como none
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada
como none. A página web está toda em branco, pois o elemento HTML não foi renderizado e com isso o navegador não
gerou um box para o elemento e em consequência ele não é visto na tela.
• block – A declaração display: block faz com que o elemento HTML seja
renderizado como bloco, tal como os parágrafos e os cabeçalhos o são. Um bloco
contém um espaço em branco tanto em cima como embaixo e não permite outros
elementos HTML ao lado. O exemplo de código transcrito no Quadro a seguir
demonstra a aplicação dessa propriedade, tendo como resultado o que é
apresentado na Figura abaixo:
92
Competência 05
/*código HTML*/
<!DOCTYPE html>
<html>
<head>
<title> Exemplo da propriedade Display: block </title>
<link rel="stylesheet" href="exemploBlock.css">
</head>
<body>
<div class="box">
<p> Conteúdo do bloco 1 </p>
<p> Conteúdo do bloco 2 </p>
</div>
</body>
</html>
/* Código CSS.*/
p {
border: 2px solid green;
width: 40%;
}
box {
box-sizing: content-box;
display: block;
float: none;
line-height: 19.5px;
position: static;
}
Quadro 64 – Propriedade display declarada como block
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade display declarada como block. Na parte HTML o código
apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: Block” e a declaração do href
"exemploBlock.css". Em seguida é definida a tag <div>, onde está contida dentro dela o atributo class (contendo a
declaração “box”). Dentro da tag <div> estão duas tags <p> contendo dentro da primeira a mensagem “Conteúdo do
bloco 1” e na outra a mensagem “Conteúdo do bloco 2”. Logo após, na parte CSS é apresentado o seletor p e dentro
dele são definidas as propriedades border (2px solid green) e width (40%). Em seguida é apresentado o seletor box
p e dentro dele são definidas as propriedades box-sinzing (content-box); display (box); float (none); line-height
(19.5px) e position (static).
Como resultado do código do Quadro acima que utiliza a propriedade display como
block, você terá como resultado a sua representação na Figura abaixo.
93
Competência 05
Figura 29 – Resultado do uso da propriedade Display declarada como block
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada
como block. A página web possui um fundo branco. A parte superior da página mostra duas box-sizing curtas (um
retângulo com fundo branco e linhas de borda na cor, sendo do mesmo tamanho e um abaixo do outro), tendo dentro
do primeiro box a mensagem “Conteúdo do bloco 1” alinhada à direita do box e no segundo a mensagem “Conteúdo do
bloco 2” alinhada à direita do box.
• inline – A declaração display: inline faz com que o elemento HTML seja renderizado
inline, dentro do bloco na mesma linha. Quando o elemento encontra-se entre dois
blocos ele forma o chamado 'bloco anônimo' e é renderizado com a menor largura
possível. O exemplo de código transcrito no Quadro abaixo demonstra a aplicação
dessa propriedade, tendo como resultado o que é apresentado na Figura a seguir:
/*código HTML*/
<!DOCTYPE html>
<html>
<head>
<title> Exemplo da propriedade Display: inline </title>
<link rel="stylesheet" href="exemploInline.css">
</head>
<body>
<div class="box">
<p> As caixas ao redor das palavras antes do elemento
forte e depois do elemento forte são chamadas de caixas
anônimas, caixas introduzidas para garantir que tudo esteja
envolto em uma caixa. O tamanho da caixa de linha na direção do bloco <strong> é
definida pela caixa mais alta </strong>
dentro dela.</p>
94
Competência 05
<p> As caixas ao redor das palavras antes do elemento forte e
depois do elemento forte são chamadas de caixas anônimas,
caixas introduzidas para garantir que tudo esteja envolto em
uma caixa. O tamanho da caixa de linha na direção do bloco é
definida pela caixa mais alta dentro dela. </p>
</div>
</body>
</html>
/* Código CSS.*/
p {
border: 4px solid red;
width: 40%;
}
strong {
font-size: 300%;
}
box {
box-sizing: content-box;
display: inline;
float: none;
line-height: 19.5px;
position: static;
}
Quadro 65 – Propriedade display declarada como inline
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade display declarada como inline. Na parte HTML o código
apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: inline” e a declaração do href
"exemploInline.css". Em seguida é definida a tag <div>, onde está contida dentro dela o atributo class (contendo a
declaração “box”).Dentro da tag <div> estão duas tags <p>. Na primeira tag <p> está a mensagem “As caixas ao redor
das palavras antes do elemento forte e depois do elemento forte são chamadas de caixas anônimas, caixas introduzidas
para garantir que tudo esteja envolto em uma caixa. O tamanho da caixa de linha na direção do bloco é definida pela
caixa mais alta dentro dela.”, onde o trecho “é definida pela caixa mais alta” está definido entre a tag <Strong>. Na
outra tag <p> está a mensagem “As caixas ao redor das palavras antes do elemento forte e depois do elemento forte
são chamadas de caixas anônimas, caixas introduzidas para garantir que tudo esteja envolto em uma caixa. O tamanho
da caixa de linha na direção do bloco é definida pela caixa mais alta dentro dela.”. Logo após, na parte CSS é
apresentado o seletor p e dentro dele são definidas as propriedades border (4px solid red) e width (40%). Logo após
é apresentado o seletor strong, e dentro dele é definida a propriedade font-size (300%). Em seguida é apresentado o
seletor box p e dentro dele são definidas as propriedades box-sinzing (content-box); display (inline); float (none); line-
height (19.5px) e position (static).
Como resultado do código do Quadro acima que utiliza a propriedade display como
inline, você terá como resultado a sua representação na Figura abaixo.
95
Competência 05
Figura 30 – Resultado do uso da propriedade Display declarada como inline
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada
como inline. A página web possui um fundo branco. A parte superior da página mostra duas box-sizing (um retângulo
com fundo branco e linhas de borda na cor vermelha, sendo do mesmo tamanho e um abaixo do outro), tendo dentro
do primeiro box a mensagem “As caixas ao redor das palavras antes do elemento forte e depois do elemento forte são
chamadas de caixas anônimas, caixas introduzidas para garantir que tudo esteja envolto em uma caixa. O tamanho da
caixa de linha na direção do bloco é definida pela caixa mais alta dentro dela.”, onde o trecho “é definida pela caixa
mais alta” está definido com uma fonte em tamanho maior que o resto do texto e em negrito, estando todo o texto
alinhadoà direita do box. No segundo box está a mensagem “As caixas ao redor das palavras antes do elemento forte e
depois do elemento forte são chamadas de caixas anônimas, caixas introduzidas para garantir que tudo esteja envolto
em uma caixa. O tamanho da caixa de linha na direção do bloco é definida pela caixa mais alta dentro dela.” alinhada à
direita do box.
• inline-block – A declaração display: inline-block é semelhante ao inline, no entanto,
conseguimos definir as propriedades de largura e altura para ele, o que não é
possível na declaração inline. Coisa que não conseguimos em um elemento
com display: inline. O exemplo de código transcrito no Quadro abaixo demonstra a
aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura
a seguir:
/*código HTML*/
<!DOCTYPE html>
<html>
<head>
<title> Exemplo da propriedade Display: Inline-block </title>
<link rel="stylesheet" href="exemploInlineBlock.css">
</head>
<body>
<ul class="example">
<li class="example-item example-item_first">Primeiro bloco</li>
<li class="example-item example-item_second">Segundo bloco</li>
<li class="example-item example-item_third">Terceiro bloco</li>
</ul>
96
Competência 05
</body>
</html>
/* Código example CSS.*/
.example {
color: #FFF;
}
.example-item {
width: 25%;
height: 150px;
}
.example-item_first {
background-color: red;
}
.example-item_second {
background-color: green;
}
.example-item_third {
background-color: blue;
line-height: 19.5px;
position: static;
}
/* Código reset CSS.*/
* {
margin: 0;
padding: 0;
border: 0;
}
body {
font-family: "Open Sans", sans-serif;
}
ul, ol, li {
list-style: none;
}
Quadro 66 – Propriedade display declarada como inline-block
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade display declarada como inline-block. Na parte HTML o
código apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: Inline-block” e a
declaração do href "exemploInlineBlock.css". Em seguida é definida a tag <ul>, onde está contida dentro dela o
atributo class (contendo a declaração “example”).Dentro da tag <ul> estão três tags <li>. Na primeira tag <li> está
contida dentro dela o atributo class (contendo a declaração “example-item example-item_first”) e a mensagem
“Primeiro bloco”. Na segunda tag <li> está contida dentro dela o atributo class (contendo a declaração “example-item
example-item_second”) e a mensagem “Segundo bloco”. Na terceira tag <li> está contida dentro dela o atributo class
(contendo a declaração “example-item example-item_third”) e a mensagem “Terceiro bloco”.Logo após, na parte CSS é
apresentado o seletor example e dentro dele é definida a propriedade color (#FFF). Em seguida é apresentado o seletor
example-item e dentro dele as propriedades width (25%) e height (150px). Logo após é apresentado o seletor example-
item_first e dentro dele a propriedade background-color (red). Em seguida é apresentado o seletor example-
item_second e dentro dele a propriedade background-color (green). Logo após é apresentado o seletor example-
97
Competência 05
item_third e dentro dele as propriedade background-color (blue), line-height (19.5px) e position (static). Em seguida
vem o código reset CSS, onde é apresentado o seletor body e dentro dele a propriedade font-family ("Open Sans", sans-
serif;). Logo após são apresentados os seletores ul, ol, li e dentro deles a propriedade list-style (none).
Como resultado do código do Quadro acima que utiliza a propriedade display como
inline-block, você terá como resultado a sua representação na Figura abaixo.
Figura 31 – Resultado do uso da propriedade Display declarada como inline-block
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada como
inline-block. A página web possui um fundo branco e três box-sizing. Na parte superior da página mostra uma box-sizing
alinhada a esquerda da página (um quadrado com fundo vermelho e dentro dele a mensagem “primeiro bloco”). Na
parte central à esquerda da página, logo abaixo da primeira caixa, há uma box-sizing (um quadrado com fundo verde e
dentro dele a mensagem “segundo bloco”). Na parte inferior à esquerda da página, logo abaixo da segunda caixa, há
uma box-sizing (um quadrado com fundo azul e dentro dele a mensagem “terceiro bloco”).
• list-item – a declaração display: list-item faz com que o elemento HTML seja
renderizado como um item de lista, isto significa que aparecerá um marcador na
frente de cada item, tal como acontece com o elemento ul. O exemplo de código
transcrito no Quadro a seguir demonstra a aplicação dessa propriedade, tendo
como resultado o que é apresentado na Figura abaixo:
/*código HTML*/
<!DOCTYPE html>
<html>
<head>
98
Competência 05
<title> Exemplo da propriedade Display: item-list </title>
<link rel="stylesheet" href="exemploItemList.css">
</head>
<body>
<div class="fake-list">Exemplo da propriedade Display: item-list </div>
</body>
</html>
/* Código CSS.*/
.fake-list {
display: list-item;
list-style-position: inside;
}
Quadro 67 – Propriedade display declarada como list-item
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade display declarada como list-item. Na parte HTML
o código apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: item-list” e a
declaração do href "exemploItemList.css". Em seguida é definida a tag <div>, onde está contida dentro dela o atributo
class (contendo a declaração “fake-list”) e a mensagem “Exemplo da propriedade Display: item-list”. Logo após, na
parte CSS é apresentado o seletor fake-list e dentro dele são definidas as propriedades display (list-item) e list-style-
position (inside).
Como resultado do código do Quadro acima que utiliza a propriedade display como list-
item, você terá como resultado a sua representação na Figura abaixo.
Figura 32 – Resultado do uso da propriedade Display declarada como list-item
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada como
list-item. A página web possui um fundo branco e uma mensagem alinhada à esquerda da página (Exemplo da
propriedade display: item-list) e com um ponto indicador de marcador de lista.
99
Competência 05
• table – a declaração display: table faz com que o elemento HTML seja renderizado
como tabela. O exemplo de código transcrito no Quadro abaixo demonstra a
aplicação dessa propriedade, tendo como resultado o que é apresentado na Figura
a seguir:
/*código HTML*/
<!DOCTYPE html>
<html>
<head>
<title> Exemplo da propriedade Display: item-list </title>
<link rel="stylesheet" href="exemploTable.css">
</head>
<body>
<div class="one">Exemplo da propriedade Display: table</div>
<div class="two">Exemplo da propriedade Display: table</div>
</body>
</html>
/* Código CSS.*/
.one {
color: white;
background-color: black;
margin: 10px;
width: 150px;
height: 70px;
display: table;
}
.two {
color: black;
background-color: red;
margin: 10px;
width: 150px;
height: 70px;
display: table;
}
Quadro 68 – Propriedade display declarada como table
Fonte: O autor
Descrição: Código-fonte demonstrando o uso da propriedade display declarada como table. Na parte HTML o
código apresenta a tag <title> tendo dentro dela a mensagem “Exemplo da propriedade Display: table” e a declaração
do href "exemploTable.css". Em seguida é definida a tag <div>, onde está contida dentro delao atributo class
(contendo a declaração “one”) e a mensagem “Exemplo da propriedade Display: table”. Logo após há outra tag <div>
>, onde está contida dentro dela o atributo class (contendo a declaração “two”) e a mensagem “Exemplo da
propriedade Display: table”.Logo após, na parte CSS é apresentado o seletor one e dentro dele são definidas as
propriedades color (white), background-color (black), margin (10px), width (150 px), height (70 px) e display (table). Em
100
Competência 05
seguida é apresentado o seletor two e dentro dele as propriedades color (black), background-color (red), margin (10px),
width (150 px), height (70 px) e display (table).
Como resultado do código do Quadro acima que utiliza a propriedade display como
table, você terá como resultado a sua representação na Figura abaixo.
Figura 33 – Resultado do uso da propriedade Display declarada como table
Fonte: O autor
Descrição: Demonstração da tela do browser que apresenta resultado do uso da propriedade display declarada como
table. A página web possui um fundo branco e duas box-sizing. Na parte superior da página mostra uma box-sizing
alinhada a esquerda da página (um quadrado com fundo preto e dentro dele a mensagem “Exemplo da propriedade
Display: table”). Ainda na página, logo abaixo da primeira caixa, há uma box-sizing (um quadrado com fundo vermelho e
dentro dele a mensagem “Exemplo da propriedade Display: table”.
101
Conclusão
Querido(a) estudante, chegamos ao final da disciplina Introdução a Web Design!
Acredito que todo conteúdo que foi trabalhado ao longo dessa nossa jornada, tenha sido de grande
valia e que o conhecimento adquirido no percurso dessa disciplina tenham lhe ajudado e
contribuído para sua aprendizagem a respeito da internet (seu histórico e sua estrutura),
conhecendo também o que é a linguagem de marcação de hipertextos (HTML) e as IDE's que podem
ser usadas para facilitar o desenvolvimento de páginas HTML. Também aprendemos sobre os
fundamentos da Web Design, onde foi possível conhecer o planejamento e organização de um
website, assim como sobre programação front-end e back-end.
Além disso, no decorrer das competências, foi possível aprender sobre a sintaxe da
HTML e o seu uso na estrutura de uma página HTML, de forma a ser considerada válida a referida
página. Vimos ainda sobre como é possível interligar páginas, demonstrando assim uma das
características do grande poder da Web é o fato de permitir a integração entre as páginas. Também
foi possível conhecer o HTML5, que teve o papel de introduzir o suporte de mídia embutido por
meio de tags específicas, oferecendo a possibilidade de incorporar recursos de multimídia em
documentos HTML.
Em continuidade, foi possível aprender sobre como tornar um site um sistema de
navegação funcional, utilizando para isso outro padrão da W3C, o CSS, onde pudemos conhecer
essa linguagem de estilização e suas funcionalidades, oferecendo a possibilidade de tratar a
estilização da página separadamente do conteúdo textual.
Por fim, aprendemos sobre como definir um modelo de caixa (Box Model), sendo
possível tratar sobre a largura, a altura e o posicionamento dos seus elementos.
Portanto, espero que o conteúdo abordado nesta disciplina possa ter contribuído na sua
formação, possibilitando a você o desenvolvimento de competências e habilidades associadas à
área de Web Design.
Foi um prazer ter tido a oportunidade de caminhar com você durante essas cinco
semanas.
Até a próxima!
102
Referências
BONIATI, B. B. Fundamentos de Desenvolvimento Web. Universidade Federal de Santa Maria,
2013.
COMER, D. E. Redes de computadores e internet. 4. ed. Porto Alegre: Bookman, 2007.
DE VILA, E., FREIRE, T.G.N. PLATAFORMA VIRTUAL COLABORATIVA PARA GESTÃO DA
ESCOLARIZAÇÃO E DO PROCESSO DE ENSINO-APRENDIZAGEM NA EDUCAÇÃO INCLUSIVA.
Trabalho de Conclusão de Curso, Universidade Federal de Santa Catarina, 2019.
GRANNELL, C. The Essential Guide to CSS and HTML Web Design. New York: A Press, 2007.
https://www.w3schools.com/html/html_layout.asp acessado em 03/12/2019.
MARINHO, C. F. R. Fundamentos de Web Design e formatação de imagem. CETAM, 2012.
SCHUTZ, F. Web design. Curitiba: Ed. UTFPR, 2013.
103
Minicurrículo do Professor
Timóteo Gomes da Silva
Doutorando em Engenharia Elétrica (linha de pesquisa na área de Desenvolvimento de
Sistemas) na UFPE (Universidade Federal de Pernambuco) com foco em Engenharia de Requisitos
para Sistemas AAL – Ambient Assisted Living, Mestre em Engenharia da Computação na UPE
(Universidade de Pernambuco), com foco na Priorização de Requisitos através da Simulação
Computacional. Bacharel em Sistemas de Informação pela UFRPE (Universidade Federal Rural de
Pernambuco). Atua como professor de ensino à distância do curso técnico de Desenvolvimento de
Sistemas da Escola Técnica Estadual Professor Antônio Carlos Gomes da Costa (ETEPAC).
Introdução
1.Competência 01 | Conhecer os Fundamentos de Web Design e HTML 5
1.1 Internet
1.1.1 Breve histórico da internet
1.1.2 A estrutura da internet (como ela funciona)
1.1.3 Padronização da Web
1.1.4 Ide
1.1.5 HTML
1.1.6 CSS
1.2 Fundamentos do Web Design
1.2.1 O que é Web Design?
1.2.2 Planejamento e organização de um website
1.2.3 Front -end e Back-end (interface gráfica)
2.Competência 02 | Formatar um Site Usando Técnicas Avançadas em HTML5
2.1 Sintaxe da HTML
2.2 Estrutura básica de uma página HTML
2.2.1 Tag <html>
2.2.3 Tag <head>
2.2.4 Tag <body>
2.3 Formatação de parágrafos e blocos de texto
2.3.1 Tag <h1...h6> (cabeçalho)
2.3.2 Tag <p> (parágrafo)
2.3.3 Quebras de linha (<br />)
2.3.4 Linhas horizontais (<hr>)
2.4 Listas, Tabelas e Formulários
2.4.1 Listas
2.4.2 Tabelas
2.4.3 Formulários
2.5 Imagem
2.6 Link e Iframe
2.6.2 Iframe
2.7 Novas tags HTML 5
2.8 Layout HTML
2.9 Nomenclatura dos arquivos HTML
2.10 Exibindo uma página web
3.Competência 03 | Formatar um Site com Recursos Multimídia
3.1 Áudio
3.2 Vídeo
3.3 Reusando o YouTube
4.Competência 04 | Conhecer os Fundamentos do CSS 3
4.1 Conceito de CSS
4.2 Sintaxe de uma Regra CSS
4.3 Incorporando CSS em HTML
4.4 Propriedades CSS
4.4.1 Propriedades de cores e background
4.4.2 Propriedades de texto e parágrafos
4.4.3 Propriedades de fonte
4.4.4 Propriedades de efeitos de link
4.4.5 Propriedades de lista
4.4.6 Propriedades de borda
5.Competência 05 | Planejar layouts com CSS 3
5.1 Box Model (Modelo de caixa)
5.1.1 Padding
5.1.2 Margin
5.2 Width e Height
5.2.1 Width
5.2.2 Height
5.3 Box-sizing
5.4 Position
5.5 Display
Conclusão
Referências
Minicurrículo do ProfessorMais conteúdos dessa disciplina
Screenshot_2025-11-18-15-46-57-456_com android- Best 13 Sites To Buy Old Github Account In This Year
- Sites para Esquemas Elétricos
- Buy GitHub Accounts - USA Best Quality 100 Active
- Introdução ao Back End
- Lista 02 - Estruturas sequenciais
- Paciente em leito de UTI, em NPVO no momento. Em uso de sonda nasogástrica aberta em frasco (passada esta manhã VRG ~600 ml). HGT (42ml/h). CD: aguard
- As empresas têm criado cargos de diretores e de gestores de marca, buscando desenvolver uma gestão de marca mais assertiva e estratégica. Isso é fe...
- Um sistema de segurança digital foi programado para disparar alarmes conforme duas condições: a presença de movimento no ambiente (p) e o acionamento
- A saúde indígena na América Latina pode ser significativamente melhorada a partir de práticas interculturais de sucesso, nas quais se promove a int...
- As cápsulas possuem diversos tamanhos, é necessário conhecer algumas regras para selecionar o tamanho correto. Sobre a escolha do tamanho das cápsu...
- A Sociologia, como uma ciência empírica, utiliza métodos sistemáticos de observação, coleta e análise de dados para entender e explicar fenômenos soci
- Os municípios têm na Politica Municipal de Educação Ambiental uma ferramenta de: Escolha uma opção: a. ela obrigatoriamente deve se limitar as dir...
- Segundo o guia, qual alimento abaixo é fonte de carboidrato? Questão 7Escolha uma opção: a. Batata doce b. Azeite de oliva c. Salmão d. Peito de frang
- Todas as informações abaixo devem ser coletadas em pesquisas para a obtenção de dados de volumes de tráfego, EXCETO: Questão 7Escolha uma opção: ...
- 4/5 "Qual é o resultado da execução do código Koltin a seguir: var neverNull: String = ""This can't be null"" neverNull = null " Não ocorre erro porqu
- Qual é a diferença entre variáveis declaradas como "var" e "val"? Não há diferença alguma. "val" declara variáveis mutáveis. Por outro lado, "var" def
- A finalidade do Observatório Nacional de Direitos Humanos (ObservaDH) é: a. Emitir pareceres vinculativos sobre discurso de ódio. b. Aplicar penalidad
- Um dos principais impactos sociais do discurso de ódio é: a. A redução de espaços para a livre circulação de ideias, mesmo quando envolvem opiniões di
- Prova Governança corporativa corrigida .pdf
- 4 Stored Procedures
