E2_IDFE

Prévia do material em texto

Caique Pereira
INTERFACES 
DIGITAIS: 
FRONT-END
E-book 2
Neste E-Book:
INTRODUÇÃO ���������������������������������������������� 3
NOÇÕES DE HTML �������������������������������������4
Tags ��������������������������������������������������������������������������6
Listas ������������������������������������������������������������������������9
CSS ������������������������������������������������������������������������� 15
Imagens ����������������������������������������������������������������� 23
Tabelas ������������������������������������������������������������������ 25
Formulários ����������������������������������������������������������� 27
CONSIDERAÇÕES FINAIS ����������������������30
SÍNTESE ��������������������������������������������������������31
2
INTRODUÇÃO
Vamos continuar nossos estudos sobre interfaces 
digitais: front-end� Neste e-book falaremos sobre as 
linguagens HTML e CSS� Você já ouviu falar delas? 
Essas duas linguagens são os pilares, quando o as-
sunto é desenvolvimento de interfaces, pois, com 
elas são criados todos os elementos visuais que 
compõem nossas páginas web�
Todos os comandos da linguagem HTML são co-
nhecidos como tags� Ao longo das leituras deste 
e-book, conheceremos muitas tags e aprenderemos 
sua aplicação no desenvolvimento de páginas web� 
Já com o CSS podemos criar estilos para nossas 
páginas, trazendo cores, posicionamentos, e vida 
aos nossos sites�
3
NOÇÕES DE HTML
A sigla HTML vem do inglês HyperText Markup 
Language, expressão que significa “Linguagem de 
Marcação de Hipertexto”� A HTML é uma linguagem 
de marcação muito utilizada para produção de inter-
faces de front-end, ou seja, de páginas na web� Ela 
permite a criação de documentos que podem ser 
lidos em praticamente qualquer tipo de computa-
dor, até mesmo smartphones, e que geralmente são 
transmitidos pela internet�
Escrever páginas em HTML é muito simples� Não 
é necessário nada mais do que um editor de texto 
qualquer e de conhecimento dos códigos, ou tags, 
que fazem parte desta linguagem� 
REFLITA
Você já parou para pensar quais são os requisitos 
básicos para se desenvolver uma página web? 
Eles são bem simples: conhecer a linguagem 
HTML para escrever o código fonte, ter um editor 
de texto para redigir o código, e ter um navegador 
de internet (browser) para conseguir interpretar e 
visualizar as páginas desenvolvidas�
Como mencionado anteriormente, os códigos HTML 
são conhecidos como tags� Essas tags servem para 
indicar a função de cada elemento dentro de uma 
interface ou página web� As tags representam co-
mandos para formatação de textos, criação de ele-
4
mentos de formulários, links (ligações) entre páginas, 
imagens, tabelas, entre outros� 
Os navegadores identificam as tags e apresentam a 
página conforme especificada no documento HTML. 
Um documento em HTML nada mais é do que um tex-
to simples, que pode ser editado no Bloco de Notas 
(notepad) do Windows ou em uma IDE (Integrated 
Development Environment) ou em ambiente de de-
senvolvimento integrado, como o Sublime Text e o 
VS Code, e transformado em hipertexto�
SAIBA MAIS
A linguagem HTML foi criada por Tim Barners 
Lee, na década de 1990. As especificações da lin-
guagem são controladas pela W3C (World Wide 
Web Consortium)� Para saber mais sobre a histó-
ria do HTML, assista ao vídeo disponível em: ht-
tps://www.youtube.com/watch?v=NSmapCNcSyI�
As versões de evolução da HTML incluem XHTML 
(uma linguagem com sintaxe mais rigorosa, baseada 
em XML) e HTML5 (quinta versão da HTML que traz 
novos recursos, principalmente a manipulação de 
conteúdo gráfico e multimídia).
A Web está estruturada em dois princípios bási-
cos HTTP (HyperText Transfer Protocol) e HTML 
(HyperText Markup Language)�
Uma curiosidade� Você já notou que os sites que 
acessamos utilizam os protocolos HTTP ou HTTPS? 
5
https://www.youtube.com/watch?v=NSmapCNcSyI
https://www.youtube.com/watch?v=NSmapCNcSyI
Esses protocolos são os responsáveis pela transfe-
rência de documentos HTML para nosso navegador� 
Somente através dele é possível o nosso acesso aos 
mais diversos sites disponíveis na web�
SAIBA MAIS
As cores no HTML podem ser representadas pelo 
nome, como: blue, white, red, etc� Geralmente, em 
HTML, ao invés do nome, são usados os códigos 
hexadecimais que representam a cor� Exemplo: 
azul é #0000FF� A tabela de cores com o código 
hexadecimal pode ser facilmente encontrada na 
internet� Para saber mais sobre isso, sugiro aces-
sar o link abaixo:
Disponível em: https://site112.com/
tabela-cores-html�
Tags
As tags são como chamamos os comandos ou códi-
gos HTML� Esses códigos fazem marcações-padrão 
que o navegador entende ou interpreta, tornando 
possível a visualização� Como qualquer linguagem, 
o HTML também tem suas regras, conforme anali-
saremos neste tópico�
6
https://site112.com/tabela-cores-html
https://site112.com/tabela-cores-html
FIQUE ATENTO
Uma coisa que não podemos esquecer é que a 
linguagem HTML não é uma linguagem de pro-
gramação, mas sim de marcação�
As tags são geralmente utilizadas em pares e sempre 
devem estar entre os sinais de “menor que” ( < ) e 
“maior que” ( > ). Exemplo: “<html> </html>”� A tag 
de finalização é utilizada com a precedência de uma 
barra ( / ). Exemplo: “</html>”�
FIQUE ATENTO
A linguagem HTML não é case sensitive, ou seja, 
não diferencia maiúsculas e minúsculas em seu 
código�
Por exemplo: <hTmL> <html> <HTML> <Html> es-
tão todas corretas�
Podemos encontrar, em nosso desenvolvimento, tags 
únicas, como é o caso da tag “<br>”, que serve para 
quebrar uma linha no decorrer do texto e não há a 
necessidade de se utilizar uma tag de fechamento 
para encerrar a quebra de linha�
Nos casos mais comuns, nos deparamos com tags 
duplas, por exemplo, “<body>” e “</body>”, que re-
presentam o início e o termino do corpo de nossa 
página; todo o conteúdo que representa o corpo de-
verá ficar entre essas tags�
7
Todo documento HTML fica entre as tags “<html>” 
e “</html>”. Uma página possui três partes básicas: 
sua estrutura principal, seu cabeçalho e seu corpo� 
Quando estamos criando um documento HTML 
é essencial que ele tenha as quatro tags básicas: 
<html> ... </html>, <head> ... </head>, <title> ... </title> 
e <body> ... </body>.
Agora, vamos entender o funcionamento das tags 
que fazem parte da estrutura principal:
<html> ... </html>: São utilizadas para delimitar os 
comandos HTML, mostram o começo e o final do 
documento�
<head> ... </head>: São utilizadas para delimitar o 
cabeçalho do documento HTML� Este local é reser-
vado para indicar parâmetros de configuração do 
documento, ou seja, apontar onde estão os scripts 
utilizados pelo arquivo, o caminho do estilo CSS, ou 
até mesmo endereço de frameworks� Também é utili-
zado para exibir o título na barra títulos do navegador�
<title> ... </title>: Indica o título do documento para 
o navegador, sempre devem ser colocadas dentro 
das tags de cabeçalho “head”. 
Exemplo: <title> Minha página </title>.
<body> ... </body>: Indica o corpo do documento, 
onde fica o conteúdo principal de nossa página.
Na Figura 2�0 podemos observar um documento em 
HTML que traz nosso primeiro exemplo, utilizando as 
tags de estrutura básica do HTML apresentadas aqui�
8
Figura 1: Primeiro exemplo em HTML. Fonte: Elaboração própria.
Na Figura 2 podemos observar como o navegador 
interpretou nosso primeiro código�
Figura 2: Saída do primeiro exemplo em HTML. Fonte: Elaboração 
própria.
Listas
Na linguagem HTML existem tags específicas para a 
criação de listas� As listas podem ser ordenadas ou 
não� As listas ordenadas são iniciadas pela tag “<ol>”, 
cada item da lista é representado pela tag “<li>”.
Sintaxe:
9
<ol type=”formato” start=”n”>
 ● <li> Tópico 1
 ● <li> Tópico 2
 ● <li> Tópico n
</ol>
Entendendo as tags e os parâmetros:
 ● <ol>: início da lista numerada.
 ● Type: representa o tipo ou formato da lista, se ela 
é numérica ou alfabética, por exemplo�
 ● Start: representa ovalor inicial da lista�
 ● <li>: representa cada item da lista.
 ● </ol>: representa o fim da lista.
Na Figura 3 podemos observar um exemplo de docu-
mento HTML que traz uma lista ordenada por ordem 
numérica�
10
Figura 3: Exemplo de lista ordenada. Fonte: Elaboração própria.
Na Figura 4 podemos observar a saída de nosso 
exemplo de lista ordenada por ordem numérica�
Figura 4: Saída do exemplo de lista ordenada. Fonte: Elaboração 
própria.
11
Se acrescentarmos o parâmetro “type” à nossa lista 
e passarmos o valor “a”, nossa lista ordenada pas-
sa a ter ordem alfabética, conforme observamos o 
código na Figura 5�
Figura 5: Exemplo de lista ordenada em ordem alfabética. Fonte: 
Elaboração própria.
Na Figura 6 podemos observar a saída de nosso 
exemplo de lista ordenada por ordem alfabética�
12
Figura 6: Saída do exemplo de lista ordenada em ordem alfabética. 
Fonte: Elaboração própria.
Agora analisaremos um exemplo com listas não or-
denadas� Essas listas são bem parecidas com as 
listas estudadas anteriormente, o que muda é que 
não seguem uma ordem e são representadas por 
símbolos como círculos ou quadrados� As tags uti-
lizadas nesse caso são “<ul>” para início e “</ul>” 
para o final; os itens continuam sendo representados 
pelas tags “<li>”.
Os valores que podem ser passados ao parâmetro 
“type” são: disc, square e circle�
O “disc” representa um círculo preenchido, que é o 
marcador-padrão; o “square” traz um quadrado pre-
enchido e, por último, o “circle”, que traz um círculo 
sem preenchimento�
13
Na Figura 7 observamos sua utilização�
Figura 7: Exemplo de lista não ordenada. Fonte: Elaborada pelo autor.
Na Figura 8 podemos observar a saída do exemplo 
de lista não ordenada�
14
Figura 8: Saída do exemplo de lista não ordenada. Fonte: Elaboração 
própria.
CSS
A sigla CSS, em inglês, significa Cascading Style 
Sheets; e, em português, Folhas de Estilo em Cascata� 
Por meio do CSS podemos melhorar nossos docu-
mentos HTML trazendo a eles estilos diferentes�
Podcast 1 
Utilizar o CSS no desenvolvimento pode economizar 
tempo, diminuir o tamanho do código, trazer o car-
regamento mais rápido, facilidades para manter ou 
alterar a página e, principalmente, um maior controle 
em todo o layout da página�
15
https://famonline.instructure.com/files/917490/download?download_frd=1
Podemos criar estilos através do CSS� Esses esti-
los são como regras de CSS aplicadas a elementos 
HTML dentro de nossa página� Para criar essa regra 
utilizamos a seguinte sintaxe:
elemento { atributo1: valor; atributo2: valor ��� }
Entendendo a sintaxe do CSS:
Elemento: descreve qual o elemento da página em 
que o estilo será aplicado� Para isso utilizamos a letra 
que representa a tag HTML, porém, sem os sinais de 
maior e menor� Por exemplo, para aplicarmos um 
estilo ao elemento parágrafo, utilizamos “p”. Esse 
elemento também é conhecido como seletor�
Atributo: Qual o estilo a ser aplicado, ou seja, como 
você quer estilizar o elemento� Essa função só fun-
ciona com nomes válidos como atributos de CSS� Por 
exemplo, para escolher o tamanho da fonte de nosso 
parágrafo podemos utilizar o atributo “font-size”.
Valor: O valor representa a configuração que quere-
mos utilizar no atributo declarado� Exemplo: pode-
mos definir a fonte de nosso parágrafo em 15pt (15 
pontos)�
Exemplo de um parágrafo com fonte tamanho 15pt:
p { font-size: 15pt }
FIQUE ATENTO
Você pode atribuir quantos atributos quiser a um 
elemento; a única regra é separá-los por ponto e 
vírgula (;)� O último atributo declarado não preci-
sa de ponto e vírgula (;)�
16
Exemplo de “<h1>”, tag utilizada para títulos, estiliza-
da por meio do CSS:
h1 { font-family: Times;
 font-size: 18pt;
 color: red;
 margin-left: 1px }
No exemplo, podemos observar a definição de fonte, 
tamanho, cor e margem à esquerda para todos os 
elementos <h1> de um documento HTML�
Existem três formas de se definir regras de CSS para 
serem aplicadas em nossas páginas� Essas formas 
são chamadas de CSS externo, interno ou incorpo-
rado e in-line�
Da maneira externa, colocamos nossas regras em 
um arquivo de extensão “.css” separado de nosso 
documento HTML� Nosso documento deve conter 
um link que referencia indicando onde está o estilo 
CSS – isso é necessário para que ele seja reconhe-
cido na página�
Da maneira interna ou incorporada, declaramos todas 
as nossas regras de estilização no cabeçalho (head) 
do nosso documento HTML� Uma desvantagem des-
sa forma de utilização é que o estilo somente será 
aplicado a esse documento específico. Quando tra-
balhamos com externo, podemos adicionar o mesmo 
estilo a vários documentos ou páginas diferentes�
17
A última maneira é a in-line, em que colocamos as 
regras de CSS dentro da própria tag HTML que irá 
recebê-las� Essa forma é utilizada para pequenas e 
rápidas configurações. Sua desvantagem é que essas 
regras somente irão afetar o elemento específico 
onde elas foram declaradas�
Agora vamos criar exemplos para demostrar essas 
três formas de utilização� Começaremos com o CSS 
de uso externo� Devemos criar dois arquivos no mes-
mo diretório, os arquivos são: “css.html” e “estilo.
css”�
A Figura 9 representa o código do nosso arquivo “esti-
lo.css”� Nela podemos observar que para o elemento 
“<h4>” foi alterado a fonte para “arial”, seu tamanho 
para “14pt” e sua cor para vermelho�
Figura 9: Arquivo estilo.css. Fonte: Elaboração própria.
Feito isso, temos o nosso arquivo “css.html” em que 
há o link de referência, indicando onde está o CSS e a 
chamada da tag “<h4>” que mostra que a estilização 
foi aplicada� Podemos conferir o código na Figura 10�
18
Figura 10: Arquivo css.html. Fonte: Elaboração própria.
Na Figura 11 vamos dar ênfase à chamada do ar-
quivo CSS – a configuração mais importante neste 
exemplo� Ela é feita através da tag “<link>” que fica 
dentro do nosso cabeçalho “<head>” por se tratar de 
uma configuração. Dentro dela passamos a referên-
cia através do atributo “rel”, seu endereço através do 
atributo “href”, e seu tipo através do “type”�
Figura 11: Chamada do CSS externo. Fonte: Elaboração própria.
Na Figura 12 podemos conferir o resultado final de 
nossa utilização do CSS externo�
19
Figura 12: Saída da página com CSS externo. Fonte: Elaboração pró-
pria.
Agora vamos a um exemplo utilizando o CSS incor-
porado ou interno� Nesse caso, todo o estilo CSS é 
criado dentro do cabeçalho ( <head> ) de nosso do-
cumento HTML� Para que as regras de estilo sejam 
reconhecidas, elas devem estar dentro da tag “<sty-
le>”� Na Figura 13 podemos observar o documento 
HTML com o CSS interno, estilizando um parágrafo 
em negrito, cor azul e tamanho de 18pt�
20
Figura 13: Utilizando CSS interno. Fonte: Elaboração própria.
Podemos observar a saída do exemplo com a estili-
zação do parágrafo na Figura 14�
Figura 14: Saída do exemplo utilizando CSS interno. Fonte: Elaboração 
própria.
Finalizando esse tópico, analisaremos um exemplo 
utilizando o CSS in-line para modificar o estilo-padrão 
21
de um link, criado pela tag “<a>”� Observe o código 
na Figura 15�
Figura 15: Exemplo utilizando CSS in-line. Fonte: Elaboração própria.
Vamos verificar como ficou? Observe a Figura 16.
Figura 16: Saída do exemplo utilizando CSS in-line. Fonte: Elaboração 
própria.
REFLITA
O CSS in-line é usado somente na tag em que está 
sendo aplicado. Já o CSS incorporado se aplica à 
página inteira� E, por último, o CSS externo pode 
ser aplicado a várias páginas ao mesmo tempo� 
Sabendo disso, você consegue imaginar quais as 
melhores situações para se utilizar cada uma das 
formas de CSS?
22
Imagens
Na linguagem HTML, para inserir uma imagem em 
nossa página utilizamos a tag “<img src>” com seus 
atributos� Vamos conferir a sintaxe dessa tag?
<img src=“nome.ext” width=“n%” heigth=“n%” 
align=“posição” alt=“legenda”>
Agora, vamos entender cada atributo utilizado nessa 
tag:
 ● Src: Caminho com nome e extensão da imagem�
 ● Width: Largura daimagem, em pixels ou percentual�
 ● Heigth: Altura da imagem, em pixels ou percentual�
 ● Alt: Texto de legenda, ativado quando passamos 
o mouse em cima da imagem�
 ● Border: Largura da borda da imagem�
Vamos exemplificar a utilização dessa tag, porém, 
para isso, você precisa ter as imagens com o mesmo 
nome que estão no exemplo, ou alterá-las de acordo 
com os nomes de seus arquivos�
Na Figura 17 verificamos a primeira parte de nosso 
arquivo e sua estilização com CSS incorporado�
23
Figura 17: Exemplo da utilização da tag <img> – Cabeçalho. Fonte: 
Elaboração própria.
Agora, o restante de nosso código, contendo o corpo 
do documento e a chamada das imagens na Figura 18�
Figura 18: Exemplo da utilização da tag <img> – Corpo. Fonte: 
Elaboração própria.
24
Agora vamos verificar como ficou? A saída de nosso 
exemplo é representada pela Figura 19�
Figura 19: Saída do exemplo utilizando a tag <img>. Fonte: Elaboração 
própria.
Tabelas
Em nossos documentos HTML podemos construir 
tabelas quando necessário� A tag principal para a 
criação delas é “<table>”, portanto, todo conteúdo 
de nossa tabela deve ficar entre as tags “<table>” e 
“</table>”.
A tag “<th>” é utilizada para especificar as células de 
cabeçalho de nossa tabela trazendo, assim, destaque 
para o conteúdo que aparece entre as tags “<th>” e 
“</th>”.
25
Para células comuns utilizamos a tag “<td>”� Todo 
conteúdo dentro da célula deve ficar entre as tags 
“<td>” e “</td>”�
Depois de criar várias células ou colunas em uma 
mesma linha, chegou a hora de criar linhas em nos-
sas tabelas� Para isso, utilizamos as tags “<tr>” e “</
tr>”, ou seja, toda a linha deve ficar entre essas tags�
Para ilustrar a utilização de todas essas tags, vamos 
criar uma tabela mostrando as faltas de dois alunos 
durante um semestre letivo� Para isso, vamos tam-
bém utilizar CSS para deixar nossa tabela estilizada� 
Podemos conferir o código na Figura 20�
Figura 20: Exemplo de Tabelas. Fonte: Elaboração própria.
Agora, vamos conferir como ficou a saída de nos-
sa tabela depois da interpretação do navegador, na 
Figura 21�
26
Figura 21: Saída do exemplo de tabelas. Fonte: Elaboração própria.
Formulários
Um dos elementos mais importantes na web são os 
formulários� Através deles os usuários conseguem 
enviar informações para diversos fins. Quando fa-
lamos de formulários, precisamos saber que todos 
os elementos que o compõem devem estar entre as 
tags “<form>” e “</form>”.
Podcast 2 
Os formulários são compostos por campos onde os 
usuários registram as informações; esses campos 
são representados pela tag “<input>”. Essa tag tem 
um atributo chamado “type”, no qual definimos que 
tipo de caixa estamos montando. Podemos definir 
como caixa de texto para receber um nome, caixa de 
senha para receber uma informação em sigilo, caixa 
que permite somente a entrada de números, etc�
Outro elemento bastante utilizado, quando falamos 
de formulário, são as caixas de seleção, representa-
das pelas tags “<select>” e “</select>”� Esse elemento 
traz uma lista de opções pré-definidas que devem ser 
27
https://famonline.instructure.com/files/917492/download?download_frd=1
escolhidas pelo usuário� Cada opção dessa lista deve 
ficar entre as tags “<option>” e “</option>”.
SAIBA MAIS
Para saber mais sobre a utilização de elementos 
que fazem parte de um formulário, assista ao ví-
deo disponível em:
h t t p s : / / w w w . y o u t u b e . c o m /
watch?v=vJoCnzEucCc�
Agora que conhecemos alguns dos elementos que 
fazem parte de um formulário em HTML, vamos criar 
um exemplo de interface de login e senha, com o 
framework Bootstrap para auxiliar na estilização do 
nosso formulário. Confira o código na Figura 22.
Figura 22: Exemplo de formulário. Fonte: Elaboração própria.
Na Figura 23 podemos verificar como ficou nosso 
formulário com o framework Bootstrap�
28
https://www.youtube.com/watch?v=vJoCnzEucCc
https://www.youtube.com/watch?v=vJoCnzEucCc
Figura 23: Saída do exemplo de formulário. Fonte: Elaboração própria.
Percebemos que o campo de senha foi configurado 
com o valor “password” para o atributo “type”� Isso 
faz com que, automaticamente, as informações in-
seridas nesse campo sejam mascaradas – como 
evidenciado na Figura 24�
Figura 24: Saída do exemplo de formulário. Fonte: Elaboração própria.
29
CONSIDERAÇÕES FINAIS
Neste e-book, você pôde conferir, na prática, como a 
utilização e o desenvolvimento de documentos em 
HTML funcionam, conhecendo suas noções e princí-
pios básicos, bem como algumas de suas principais 
tags. Além disso, verificou como os documentos 
HTML trabalham em conjunto com arquivos CSS 
para nos trazer páginas estilizadas�
Agora é hora de praticar tudo o que você aprendeu�
Bons Estudos!
30
SÍNTESE
INTRODUÇÃO AO HTML E CSS
INTERFACES DIGITAIS: 
FRONT-END
• Não podemos falar de desenvolvimento de interfaces 
front-end sem falar da linguagem HTML� Por meio dela são 
criadas todas as marcações das páginas web que são 
interpretadas por nossos navegadores�
• Os comandos da linguagem HTML são chamados de tags� 
Com as tags podemos criar diversos tipos de elementos que 
compõem nossas páginas web; como: listas, imagens, tabelas, 
formulários entre outros elementos visuais�
• Todas as estilizações de nossos documentos HTML são 
feitas através do CSS� O CSS pode ser utilizado de maneira 
externa, incorporada ou in-line�
Referências Bibliográficas 
& Consultadas
ALVES, W� P� Java para Web: desenvolvimento 
de aplicações� São Paulo: Érica, 2015� [Minha 
Biblioteca]
DEITEL, P� J�; DEITEL, H� M� Ajax, Rich Internet 
Applications e desenvolvimento web para progra-
madores� São Paulo: Pearson Prentice Hall, 2008� 
[Minha Biblioteca]
FLANAGAN, D� JavaScript: o guia definitivo. 6� ed� 
Porto Alegre: Bookman, 2013� [Minha Biblioteca]
LEE, V�; SHNEIDER, H�, SCHELL, R� Aplicações 
móveis: arquitetura, projetos e desenvolvimento� 
São Paulo: Pearson Education do Brasil, 2006� 
[Biblioteca Virtual]
LEMAY, L� Aprenda a criar páginas web com 
HTML e XHTML em 21 dias� São Paulo: Pearson 
Education do Brasil, 2002� [Biblioteca Virtual]
MILETTO, E�; BERTAGNOLLI, S� Desenvolvimento 
de software II: introdução ao desenvolvimen-
to HTML, CSS, JavaScript e PHP� Porto Alegre: 
Bookman, 2014� [Minha Biblioteca]
SHARMA, V�; SHARMA, R� Desenvolvendo sites de 
e-commerce: como criar um eficaz e lucrativo site 
de e-commerce, passo a passo� São Paulo: Makron 
Books, 2001� [Biblioteca Virtual]
SEGURADO V� S� Projeto de interface com o usuá-
rio� São Paulo: Pearson, 2015� [Minha Biblioteca]
	_GoBack
	Introdução
	Noções de HTML
	Tags
	Listas
	CSS
	Imagens
	Tabelas
	Formulários
	Considerações finais
	Síntese