Baixe o app para aproveitar ainda mais
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
Compartilhar