HTML para Web-Guia Completo para Iniciantes em Desenvolvimento de Páginas Web

DESENVOLVIMENTO DE SOFTWARE PARA WEB CAPÍTULO 1 POR ONDE COMEÇAMOS PARA CRIAR PÁGINAS HTML Fernando Cortez Sica INICIAR Introdução Para começar a compreender como funciona o desenvolvimento de softwares para a web precisamos saber antes de tudo como se desenvolve uma página web Mas páginas web são construídas com qual linguagem Há uma linguagem básica que é a primeira que vamos estudar para que possamos implementar páginas web que é a Linguagem de Marcação de Hipertexto conhecida por HTML HyperText Markup Language Após as conceituações iniciais sobre HTML serão apresentados os elementos básicos para a criação de tabelas e formulários que são elementos muito importantes para as páginas pois permitem uma organização de conteúdo e uma primeira forma de interação com o usuário da página Mas como realizar o alinhamento das informações dentro das tabelas Abordaremos esse tema aliado ao tema de mesclagem de tabelas Assim as páginas ficarão mais funcionais e estruturadas E os formulários São muito difíceis de serem manipulados Falaremos sobre isso quando dialogarmos sobre as estruturas e os campos de um formulário Dessa forma você terá amplas condições de criar suas primeiras páginas web Mas existe alguma outra forma de formatar uma página HTML Sim ao final do capítulo será abordado o tema CSS Cascading Style Sheets traduzido como Folhas de Estilo em Cascata Para adiantar nossa conversa o CSS serve para configurar a aparência dos elementos descritos com HTML Uma outra forma para a criação de páginas HTML consiste em utilizar um framework Mas o que vem a ser um framework Falaremos sobre isso quando conversaremos sobre o Bootstrap A visão que você terá ao fim deste capítulo permitirá que você desenvolva suas primeiras páginas Vamos começar Bons estudos 11 Desenvolvimento de páginas web com HTML Antes de começar a falar sobre HTML seria interessante explicar um pouco sobre a origem do nome HTML HyperText Markup Language traduzido como Linguagem de Marcação de Hipertexto Mas o que vem a ser hipertexto Um hipertexto caracterizase por um texto no qual podese encontrar links para permitir uma leitura não linear de seu conteúdo JOÃO 2014 Pelos links o leitor terá a possibilidade de navegar em outras páginas inclusive de outros domínios da internet Fonte Biz Idea Production Shutterstock 2018 Os navegadores da internet como o Google Chrome e o Internet Explorer manipulam dentre outros conteúdos código HTML Para permitir o intercâmbio de conteúdo os navegadores são implementados seguindo o protocolo de rede conhecido como HTTP e HTTPS HyperText Transfer Protocol e HyperText Control Protocol Secure respectivamente Protocolo de Transferência de Hipertexto e Protocolo de Transferência de Hipertexto Seguro Você sabia que o layout das páginas assim como por exemplo a utilização das cores é um estudo das áreas de semiótica e IHC Interface HumanoComputador Estudos devem ser realizados para que a página possa prover maior usabilidade Para saber mais acesse o artigo O que é Usabilidade PAGANI 2011 disponível em httpstablelesscombroqueeusabilidade httpstablelesscombroqueeusabilidade Após essa breve introdução chegou a hora de iniciar a exploração do HTML começando com a sua estruturação e principais tags 111 Estrutura HTML Para entender a estrutura do código HTML vamos conversar um pouco da estrutura das páginas que você criar As páginas deverão ter um conteúdo claro e objetivo além de bem organizado As páginas a serem criadas deverão funcionar na maioria dos navegadores ou seja não se deve pensar em implementálas em um tipo de navegador específico Sendo assim os testes de uma página devem ser feitos em vários navegadores para que se possa verificar possíveis distorções na aparência e em alguns casos na própria exibição do conteúdo VOCÊ SABIA As tags que definem a estrutura da página não impactam na formatação e consequentemente a forma de exibição da página elas são apenas informativas LEMAY COLBURN TYLER 2002 Para sermos mais específicos a página pode ser estruturada por intermédio da utilização das tags HTML head e body Clique nos cards abaixo e entenda cada uma dessas tags Tag HTML Tag head Tag body A figura abaixo ilustra a utilização das tags HTML head title e body além de exemplos de uso das meta tags Figura 2 Exemplo de utilização das tags HTML head title e body além de exemplos de uso das meta tags Fonte Elaborada pelo autor 2018 Olhando a figura anterior percebemos que as marcações de início e de finalização estão alinhadas ou seja a primeira marcação que aparece é fechada por último as marcações de encerramento aparecem na ordem inversa em relação às marcações de início Você deve estar se perguntando e as meta tags As meta tags tem várias funcionalidades dentre as quais podemos citar inicialmente a inserção de informações para as máquinas de busca Sendo assim por meio da meta tag por exemplo keywords palavraschave a máquina de busca Na figura a seguir temos um exemplo de utilização das tags de formatação vistas até o momento Perceba que estamos fazendo um incremento da página construída anteriormente pela adição das tags de formatação de texto Por conta do espaço os elementos inseridos na figura anterior não foram repetidos no código HTML Figura 3 Exemplo de utilização das tags básicas de formatação de texto e de criação de listas não ordenada e ordenada Fonte Elaborada pelo autor 2018 A figura acima mostra que as tags poderão ser utilizadas em conjunto ou seja um certo item ou texto pode ser formatado por várias tags usadas em conjunto Neste caso devese prestar atenção na ordem da colocação dos marcadores de finalização devem aparecer na ordem inversa em relação aos marcadores de início Você poderá ainda usar outras formatações para as listas ordenadas e não ordenadas Para tanto usase os formatadores type e start Como exemplo de utilização para lista ordenada temos ol typeI start5 ol Por vez para uma lista não ordenada podemos usar poderá associar a sua página à query de busca solicitada por algum usuário A manipulação da meta tag foi feita neste caso definindose o nome do campo a ser instanciado denotado pela palavra name nome e o valor a ser associado ao referido campo denotado por content conteúdo VOCÊ QUER LER Como as meta tags são utilizadas para passar informações aos mecanismos de busca como o Google e o Bing é por elas que sua página pode ser encontrada como resposta a uma consulta Para saber mais sobre meta tags recomendamos o artigo Código Tag O que é meta tag ARRIGONI 2012 disponível em httpwwwlinhadecodigocombrartigo3595codigohttpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspxtag httpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspxoqueemetahttpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspxtag httpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspxaspx httpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspx Você pode ainda formatar o seu corpo utilizando tags que modificam o tamanho da fonte a ser exibida Tais tags compreendendo seis níveis são denominadas como tags de cabeçalhos h1 até h6 LEMAY COLBURN TYLER 2002 Nas tags de lista cada item da lista deve estar delimitado por uma das seguintes tags dt dt o texto do item aparece sem nenhum marcador bullet dd dd com o uso desta tag o item aparece com um nível a mais de identidade No contexto de programação identar significa alinhar os blocos de linhas de código para que as suas interdependências fiquem mais evidenciadas li li caso você queira que cada item seja precedido por um marcador bullet você pode fazer uso desta tag ul typecircle ul Estes dois exemplos produzirão respectivamente uma marcação em itálico iniciandose no valor 5 e a utilização de marcador no formato de uma circunferência VOCÊ O CONHECE O cientista da computação inglês Tim BernersLee foi o criador da World Wide Web WWW proposta em 1989 como um sistema para integrar redes menores Na época BernersLee era engenheiro de software da CERN Organização Europeia para Pesquisa Nuclear cuja sede em Genebra recebia visitas de cientistas do mundo inteiro Ele percebeu a dificuldade que havia para acessar os dados de pesquisas e pensou em uma linguagem de marcadores HTML a URL e o protocolo HTTP para possibilitar o compartilhamento remoto de informações FÁBIO 2018 Leia mais em httpswwwnexojornalcombrexpresso20180313TimBernersLeeocriadordainternetglobalEsuascrC3ADticasC3A0redehoje httpswwwnexojornalcombrexpresso20180313TimBernersLeeocriadordainternetglobalEsuascrC3ADticasC3A0redehoje Uma outra observação que merece ser mencionada consiste no fato de que é possível criar uma lista dentro de outra Dessa forma conseguese alinhar os elementos a serem exibidos em sua página Sobre as listas e outras tags de formatação os pesquisadores Lemay Colburn e Tyler 2002 e Miletto e Bertagnolli 2014 são os mais indicados para os estudos Até este momento você pode criar páginas simples contendo em seu conteúdo apenas textos básicos Nas próximas seções vamos aprender a incorporar mais elementos à página iniciando com a inserção de tabelas 12 Criando tabelas em HTML Além dos textos e listas já mencionados uma importante estrutura que você pode inserir em suas páginas consistem nas tabelas Com as tabelas você poderá organizar melhor o conteúdo de sua página Pelas tabelas você poderá fazer com que o seu texto apareça por exemplo em uma coluna ao lado de uma figura Para a criação de tabela você deverá antes pensar na diagramação de sua página ou seja qual será o formato de sua tabela bordas coloração conteúdo das células etc Essa parte é de suma importância para que você possa estruturar o seu código baseado no layout esquematizado Clique nas abas abaixo e veja as partes que uma tabela apresenta segundo Lemay Colburn e Tyler 2002 Título da tabela Cabeçalhos das linhas e colunas Células da tabela Dados Para a criação da tabela usase a tag de marcação de início table e a sua correspondente marcação de finalização table No momento da criação da tabela podemos também configurar por exemplo borda dimensão da tabela e dimensão de preenchimento da célula W3SCHOOLS sd LEMAY COLBURN TYLER 2002 Para tanto usamos os parâmetros associados no momento da criação da tabela da seguinte forma por exemplo table border1 stylewidth50 cellpadding10 cellspacing6 Acompanhe na interação a seguir a explicação deste exemplo Já o parâmetro cellpadding preenchimento da célula referese à distância em pixels entre a borda e o conteúdo da célula Por exemplo caso o valor associado seja 0 zero não haverá espaço entre a borda e o conteúdo da célula Voltando às partes da tabela referenciadas a pouco clique nas abas abaixo e veja que elas poderão ser explicitadas pelas seguintes tags Título como já mencionamos o título é opcional Mas caso você necessite inserilo pode usar a seguinte forma captionAqui será inserido o título da tabelacaption Assim como podemos definir o tamanho da tabela como um todo é possível definir o tamanho das células passando o parâmetro width à tag td ou th da seguinte forma td width25Conteúdo da célulatd Além de configurar distâncias bordas e demais elementos que nós acabamos de ver podemos ainda mudar a configuração das cores de preenchimento da tabela e das células assim como as cores das bordas Para tanto basta fazer uso do parâmetro bgcolor background color cor de fundo dentro das tags de marcação de início table tr th ou td Desta forma no exemplo td width25 bgcolorred conteúdo da célula td temos a exibição do texto sobre um plano de fundo vermelho red em inglês Como você notou a passagem do parâmetro relativo à cor pode ser feita por meio da referência ao próprio nome da cor ou por um número hexadecimal que represente a cor em sua composição RGB sendo RRed vermelho GGreen verde BBlue azul Por exemplo para o vermelho basta ativar o máximo valor no campo R FF0000 o verde corresponde a 00FF00 e por último o azul vale 0000FF O sinal indica que o valor escrito está no formato hexadecimal CASO Para o desenvolvimento de uma página são necessárias várias etapas desde o esboço inicial da página traçada após a primeira conversa com o cliente até a colocação da página no ar Um aspecto importante para o sucesso de uma página consiste em criar um layout que seja facilmente navegável e que visualmente seja agradável não somente perante aos olhos mas também por exemplo perante a movimentação do mouse sobre a tela a fim de alcançar os pontos de clicagem e de preenchimento de campos de formulário Esses levantamentos são realizados pelo briefing análise de perfil dentre outros do mercado e dos possíveis usuários e por meio de objetivos do próprio cliente Após os primeiros protótipos várias alterações realização de ações de inclusão retirada reposicionamento e substituição de componentes foram necessárias de forma a facilitar a aprendizagem de utilização do site pelo usuário e otimizar o número de clicks para chegar aos objetivos O artigo Processo de criação em websites um estudo de caso do site Iesam ASSUMPÇÃO VILLEGAS 2013 retrata um estudo de caso relacionado ao processo de criação de websites O referido estudo de caso poderá ser acessado pelo link httpsperiodicosutfpredubrdearticledownload21292028 httpsperiodicosutfpredubrdearticledownload21292028 Da mesma forma que você pode alterar a cor do plano de fundo você poderá testar a mudança de cor da fonte da seguinte forma td width25 bgcolorred stylecolor0000FFconteúdotd Nesse exemplo foi escrito o texto na cor azul configurado pelo campo stylecolor0000FF sobre o fundo vermelho bgcolorred Ainda falando sobre coloração alterações nas cores das bordas podem não ser processadas por alguns navegadores Neste caso sugerimos o uso de CSS que vamos estudar mais adiante neste capítulo Até o momento conversamos sobre criação da tabela e formatação das células Mas tem como alinhar o conteúdo das células A seguir abordaremos esse assunto 121 Alinhamento Alinhar o conteúdo é importante pela questão estética aliada à organização da página em relação ao layout É possível realizar o alinhamento da tabela de cada célula Mas você deve estar se perguntando alinhar uma tabela significa configurar os alinhamentos de todas as células de uma vez só Existe uma diferença alinhar uma tabela significa definir a sua posição dentro da página ou seja a tabela ficará centralizada na página junto à margem direita ou junto à margem esquerda Clique nas setas da interação abaixo e entenda melhor O parâmetro align aceita como valores possíveis left esquerda right direita ou center centralizado Sendo assim uma possível utilização do align seria tr aligncenter Por falar em alinhamento todas as células deverão ter o mesmo tamanho dentro de sua coluna ou de sua linha Para responder a esta questão abordaremos a seguir o tema de tabela mesclada 122 Mesclagem Você sabe o que seja uma tabela mesclada Tabela mesclada ou realizar mesclagem na tabela consiste em unir duas ou mais células pertencentes a uma mesma linha ou pertencentes a uma mesma coluna Uma das funcionalidades de se mesclar células consiste em por exemplo permitir a criação de cabeçalhos que representam uma classe que engloba vários itens Por exemplo suponha que você deseja criar uma tabela para disponibilizar o balanço financeiro Dessa forma você pode criar por exemplo uma célula que possua um item para os débitos englobando dessa forma células subordinadas explicitando o tipo do débito tais como aluguel transporte alimentação etc Pelo fato de envolver somente células a mesclagem apenas se aplica às tags th e td As junções se estendem sempre da esquerda para a direita no caso de junções dentro da mesma linha ou de cima para baixo quando forem unidas células de uma mesma coluna LEMAY COLBURN TYLER 2002 Mas como unir as células para criar as chamadas células mescladas Clique nos botões abaixo e entenda Para sintetizar algumas tags apresentadas na interação anterior a figura a seguir ilustra a utilização das tags para a criação de uma tabela formatação das células alinhamento e mesclagem Figura 4 Exemplo de utilização das tags para a criação de uma tabela formatação das células alinhamento e mesclagem Fonte Elaborada pelo autor 2018 Na figura acima percebemos a aplicação das tags referenciadas nesta seção Uma observação que merece destaque consiste no fato de que o programador também pode configurar bordas de uma célula No caso do exemplo acima temos por exemplo no momento da criação do cabeçalho em branco a redefinição da borda para apenas esta célula em específico No caso definiuse como uma célula cuja borda possui a largura de 0 pixel 0 px e cor branca solid 000 VOCÊ SABIA Você sabia que existem tabelas acessíveis A acessibilidade é uma preocupação constante na atualidade As tabelas HTML não fogem a essa preocupação QUEIROZ PORTA 2009 Para saber sobre tabelas acessíveis leia mais em httpwwwacessibilidadelegalcom13tabelasacessiveisphp httpwwwacessibilidadelegalcom13tabelasacessiveisphp Até o momento falamos apenas sobre formas de exibir informações estáticas Mas você pode notar que na internet as páginas permitem também interação Sendo assim o leitor da página pode inserir informações para que sejam transmitidas ao domínio da página em questão Essa inserção é realizada por meio de formulários que serão abordados a seguir 13 Criando formulários em HTML Como o usuário interage com um sistema por trás de uma página Um primeiro modo para permitir essa interação é o uso de formulários Sendo assim formulários HTML são elementos HTML capazes de fornecer ao usuário condições para que ele forneça informações sob a forma por exemplo caixa textual text box caixa de seleção combo box caixa de verificação checkbox e botões de rádio radio buttons Basicamente as informações fornecidas por um formulário podem seguir por caminhos diferentes como por exemplo com a ativação de um botão iniciase o processo de envio de email para uma determinada pessoa ou o próprio usuário pelos formulários o usuário é direcionado para alguma página específica ativase um script para que a informação seja processada no servidor LEMAY COLBURN TYLER 2002 Para esse atendimento diversas são as tecnologias que poderemos utilizar dentro das quais podemos destacar CGI Common Gateway Interface interface de passagem comum FastCGI e WSGI VOCÊ SABIA Você sabia que o CGI é uma tecnologia considerada como obsoleta Pelo fato de que a cada requisição ao servidor criase um processo novo essa tecnologia não atende às expectativas de sistemas maiores com um grande número de requisições Quer saber mais Acesse o artigo Entendendo o CGI FastCGI e WSGI que descreve o FastCGI e o WSGI como alternativas ao CGI LAUBE 2012 Disponível em httpsklauslaubecombr20121102entendendoocgifastcgiewsgihtml httpsklauslaubecombr20121102entendendoocgifastcgiewsgihtml Todo formulário é marcado pelas tags form form Mas qual o código a ser inserido entre as tags de marcação Veremos isso agora conversando sobre estruturas e campos dos formulários 131 Estruturas e campos Para começar vamos supor a necessidade de criar um formulário para que usuário forneça seus dados pessoais como nome endereço Estado etc Como primeiro contato em relação à manipulação de formulários não faremos por exemplo validação das informações digitadas Para exemplificar o código foi referenciado um script hipotético usando a linguagem PHP Preprocessor Hipertext préprocessador hipertexto Para facilitar a nossa conversa apresentamos na figura abaixo o código do formulário que iremos trabalhar no começo para que depois possamos explicar as principais linhas Numeração das linhas como comentários 01 html 02 head 03 title Testando formulários title 04 meta namedescription contentCriação de formulários HTML 05 meta httpequivContentType 06 head 07 body 08 h1 Formulário para dados pessoaish1 09 form actionDadosPessoaisphp methodpost 10 fieldset 11 legendInformações do Usuáriolegend 12 table cellspacing8 13 tr 14 td 15 label fornomeNome label 16 td 17 td alignleft 18 input typetext namenome valueDigite o seu nome 19 td 20 tr 21 td 22 labelData de nascimento label 23 td 24 td alignleft 25 input typetext namedia size2 maxlength2 valuedd 26 input typetext namemes size2 maxlength2 valuemm 27 input typetext nameano size4 maxlength4 valueaaaa 28 td 29 tr 30 tr 31 td 32 label forRegRegiãolabel 33 td 34 td alignleft 35 select nameReg 36 option valueNNorteoption 37 option valueNENordesteoption 38 option valueCOCentrooesteoption 39 option valueSESudesteoption 40 option valueSSuloption 41 select 42 td 43 td 44 label forsenhaSenhalabel 45 td 46 td alignleft 47 input typepassword namesenha 48 td 49 tr 50 table 51 fieldset 52 input typesubmit valueEnviar 53 input typereset valueLimpar Formulário 54 form 55 body 56 html Figura 5 Exemplo de código HTML para a criação de formulário No caso estão sendo utilizados campos textuais de seleção para senha e botões Fonte Elaborada pelo autor 2018 Como mencionado vamos analisar o código da figura acima para entender um pouco a manipulação de formulários Clique nos botões abaixo form method table name e value option submit e reset VOCÊ QUER LER Foram introduzidos novos tipos de entrada na versão 5 do HTML Para você saber os novos e todos os demais tipos de entradas possíveis de serem usados em seus formulários recomendamos o artigo input MDN WEB DOCS 2017 disponível em httpsdevelopermozillaorgptBRdocs httpsdevelopermozillaorgptBRdocsWebHTMLElementinputWeb httpsdevelopermozillaorgptBRdocsWebHTMLElementinputHTMLElementinput httpsdevelopermozillaorgptBRdocsWebHTMLElementinput No momento do desenvolvimento de páginas com formulário devese atentar ao fato de que alguns tipos não são cobertos por todos os tipos de navegadores Desta forma devese fazer antes uma pesquisa em relação à compatibilidade de forma a propiciar uma maior flexibilidade em relação ao uso das páginas implementadas Até o momento toda a formatação dos componentes e conteúdos a serem exibidos na página foram formatados diretamente com HTML básico Porém como deixar a sua página com a aparência melhor Vamos entender isso estudando sobre CSS a seguir 14 Formatação HTML usando CSS Como já mencionamos construir páginas usando somente o HTML como elemento de layout e design não permite que a sua página tenha uma formatação visual mais elaborada Para resolver essa limitação do HTML podem ser utilizadas as folhas de estilo ou simplesmente denominadas como CSS Cascading Style Sheets folhas de estilo em cascata Sendo assim a codificação HTML passa a ser somente para definir a estrutura da página deixando a formatação visual para o CSS MILETTO BERTAGNOLLI 2014 Com o CSS permitese também configurar de uma só vez todas as ocorrências de uma tag específica HTML VOCÊ QUER LER Na criação de sites temos que ter atenção à experiência do usuário de forma a poder melhorála Uma das técnicas consiste no chamado Layout responsivo Para saber mais a respeito leia o artigo Design Responsivo na prática 2 do layout ao HTML GUERRATO 2014 disponível em httpstablelesscombrdesignresponsivonapratica2layoutaoHTML httpstablelesscombrdesignresponsivonapratica2layoutaoHTML 141 Tipos de seletores Quando se manipula CSS devemos antes explicitar a qual aspecto serão aplicadas as configurações CSS Ao aspecto selecionado como por exemplo mudar o estilo de um cabeçalho é atribuído o nome seletor Mas como configurar o seletor De acordo com Miletto e Bertagnolli 2014 existem três formas de usar CSS de forma inline internamente e externamente Clique na seta para movimentar as abas abaixo e confira Inline Na utilização de CSS inline devese configurar a aparência dentro de cada item aplicandose o parâmetro style como no exemplo a seguir h2 stylefontfamily Times fontsize 14pt colorredtextoh2 Na linha de código acima temos o emprego de CSS sobre o seletor h2 Sendo assim a configuração do cabeçalho configurado para usar a fonte da família Times tamanho 14 pontos e na cor vermelha será aplicada apenas no item texto presente na linha de código Convém mencionar que a definição CSS tanto interna quanto externa deverá ser realizada dentro do cabeçalho da página ou seja entre as tags de marcação head e head Mas o CSS aplicase somente a seletores cujos nomes são os mesmos das tags HTML Até o momento falamos apenas de um dos tipos de seletores o seletor de tags Porém o CSS manipula outros tipos de seletores além de seletor de tags seletor de classe seletor de IDs seletor de atributo seletores de pseudoclasses e pseudoelementos MILETTO BERTAGNOLLI 2014 Para exemplificar a utilização de seletores vamos abordar os seletores de classe de IDs e de atributo Para isso utilizaremos o código da figura abaixo Figura 6 Exemplo de código HTML para a manipulação de seletores CSS do tipo classe ID e atributo A utilização dos seletores se distingue pelo uso de cores distintas Fonte Elaborada pelo autor 2018 Na figura acima encontramos a exemplificação de seletores CSS Como já mencionado a definição do estilo CSS encontrase na seção de cabeçalhos da página delimitada pelas tags head e head Clique nas abas abaixo e compreenda Seletores de classe Seletores de IDs Seletores de atributos VOCÊ QUER LER Existem diversos outros seletores CSS O artigo Os 30 Seletores CSS Que Você Deve Memorizar WAY 2011 comenta sobre seletores que poderão ser úteis na construção de sua página O artigo poderá ser acessado pelo link httpscodetutspluscompttutorialsthe30CSSselectorsyoumustmemorizenet16048 httpscodetutspluscompttutorialsthe30CSSselectorsyoumustmemorizenet16048 Para encerrar o assunto sobre seletores CSS Miletto e Bertagnolli 2014 aborda os seletores de pseudoclasse e pseudoelemento Aqui não vamos entrar em detalhes teremos apenas uma breve descrição por meio das tabelas contidas na figura abaixo Pseudoclasse Exemplo Descrição link alinkcolor336 textdecoration none O estilo padrão utilizado para links não visitados é azul e sublinhado O exemplo altera essas propriedades para outra cor sem sublinhado visited avisited coloryellow Utilizado para alterar propriedades de links já visitados e hover ahover backgroundcolor red Possibilita alterar a aparência do elemento quando o ponteiro do mouse passa em cima do elemento Pode ser aplicado a links como no exemplo e a outros elementos do HTML eactive aactivecolorblack É ativado quando o usuário permanece com o mouse clicado sobre o elemento Também pode ser aplicado a links e a outros elementos do HTML e focus a focusbackgroundcolor red É semelhante ao seletor hover Enquanto hover é ativado pelo mouse o focus é ativado via teclado geralmente pela tecla TAB Pseudoelemento Exemplo Descrição efirstletter pfirstlettercolor blue borderdotted Permite destacar a primeira letra do elemento que está sendo formatado efirstline pfirstlinecolorred letterspacing 6px Possibilita destacar a primeira linha do elemento que está sendo formatado ebefore eafter pbeforecontent Obs Permitem a inclusão de conteúdo antes before ou depois after do conteúdo que já consta na TAG O conteúdo adicionado deve ser definido dentro do CSS usando a propriedade content Figura 7 Quadro de resumo sobre os seletores CSS do tipo pseudoclasse e pseudoelemento Fonte Adaptado de MILETTO BERTAGNOLLI 2014 p 78 Você deve estar se perguntando existe algo para facilitar a criação de páginas A resposta é positiva Existem frameworks que facilitarão a criação de suas páginas Um destes frameworks é chamado de Bootstrap Vamos saber um pouco mais sobre ele a seguir 142 Bootstrap Foi comentado que Bootstrap sd é um framework Mas inicialmente o que vem a ser um framework Framework é um conjunto de métodos que provêm soluções comuns para o desenvolvimento de aplicações Uma das vantagens no uso do Bootstrap reside no fato de que se pode incorporar as definições CSS pela seguinte linha de código no cabeçalho da página link relstylesheet hrefhttpsmaxcdnBootstrapcdncomBootstrap400CSSBootstrapminCSS integritysha384Gn5384xqQ1aoWXA058RXPxPg6fy4IWvTNh0E263XmFcJSAwiGgFAWdAiS6JXm crossoriginanonymous Além de exportar configurações CSS o Bootstrap também exporta componentes JavaScript para facilitar a construção de páginas inclusive permitindo layout responsivo VOCÊ QUER VER Para aprender mais sobre Bootstrap recomendamos o vídeo Criando um site com Bootstrap reprograma GERBAUDO 2016 com dicas práticas para criar um site completo e com acessibilidade em gadgets Você pode assistir pelo link httpswwwyoutubecomwatchvTC66K6rkGA httpswwwyoutubecomwatchvTC66K6rkGA Assista ao vídeo e conheça mais sobre os conceitos iniciais envolvidos na criação de páginas associandoos à própria confecção de páginas baseadas em HTML Vamos lá Existem diversas interfaces que implementam o framework Bootstrap Dentre as quais podemos destacar Bootstrap UI Bootstrap Studio Bootsnipp LayoutIT e Shards Além do Bootstrap você poderá contar também com diversos outros frameworks dentre os quais podemos citar Foundation Materialize Semantic UI Material UI e Pure Cada um com as suas particularidades e facilidades Todos esses frameworks são definidos como frontend uma vez que atuam na definição da interface a ser manipulada pelo usuário Por sua vez os frameworks backend tem por objetivo atuar junto às máquinas servidoras responsáveis por providenciar as requisições realizadas pelo usuário por intermédio da camada frontend interface Como exemplos de frameworks backend temos Django Ruby on Rails Flask Phoenix Expressjs Laravel e Pyramid Síntese Chegamos ao fim de nosso primeiro capítulo Pudemos tratar alguns aspectos iniciais para o desenvolvimento de páginas baseadas em HTML adicionando configurações de layout CSS Lembrese que para desenvolver uma página você deve iniciar com o seu projeto incluindo elementos de usabilidade e acessibilidade Somente depois de tudo definido é que se parte para a implementação Como mencionado aqui a implementação pode contar com a ajuda de frameworks e ambientes de desenvolvimento para que o processo possa ser desenvolvido de forma mais eficiente e organizada Com os pontos abordados neste capítulo você já tem uma boa base para desenvolver suas primeiras páginas experimentando os elementos aqui abordados e buscando diversos outros O desenvolvimento de páginas envolve muitos recursos já disponíveis e a cada dia surgem mais em uma velocidade muito rápida por isso é importante se atualizar constantemente Neste capítulo você teve a oportunidade de conhecer os conceitos de HTML identificar e aplicar as tags HTML básicas analisar e aplicar a estruturação de páginas compor e experimentar funcionalidades e estruturas inerentes a tabelas estruturar e implementar tabelas mescladas planejar e implementar formulários em páginas HTML planejar e propor alterações de layout pelo uso de CSS conhecer frameworks para o desenvolvimento de páginas Clique para baixar o conteúdo deste tema Bibliografia ARRIGONI R Código Tag O que é meta tag Portal Linha de Código publicado em 09102012 Disponível em httpwwwlinhadecodigocombrartigo3595codigohttpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspxtag httpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspxoqueemeta httpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspxtag httpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspxaspx httpwwwlinhadecodigocombrartigo3595codigotagoqueemetatagaspx Acesso em 10102018 ASSUMPÇÃO D J F VILLEGAS G M L G C Processo de criação em websites um estudo de caso do site IESAM Dito Efeito Curitiba vol 4 n 4 2013 Disponível em httpsperiodicosutfpredubrdearticledownload21292028httpsperiodicosutfpredubrdearticledownload21292028 httpsperiodicosutfpredubrdearticledownload21292028 Acesso em 23102018 BOOTSTRAP Bootstrap documentation sd Disponível em httpsgetBootstrapcomdocs40gettingstartedintroduction httpsgetBootstrapcomdocs40gettingstartedintroduction Acesso em 23102018 FÁBIO A C Tim BernersLee o criador da internet global E suas críticas à rede hoje Portal Nexo publicado em 13032018 Disponível em httpswwwnexojornalcombrexpresso20180313TimBernersLeeocriadordainternetglobalEsuascrC3ADticasC3A0redehojehttpswwwnexojornalcombrexpresso20180313TimBernersLeeocriadordainternetglobalEsuascrC3ADticasC3A0redehoje httpswwwnexojornalcombrexpresso20180313TimBernersLeeocriadordainternetglobalEsuascrC3ADticasC3A0redehoje Acesso em 23102018 GERBAUDO R Criando um site com Bootstrap reprograma Canal Ricardo Gerbaudo YouTube publicado em 23102016 Disponível em httpswwwyoutubecomwatchvTC66K6rkGAhttpswwwyoutubecomwatchvTC66K6rkGA httpswwwyoutubecomwatchvTC66K6rkGA Acesso em 23102018 GUERRATO D Design responsivo na prática 2 do Layout ao HTML Publicado em 28042014 Disponível em httpstablelesscombrdesignresponsivonapratica2layoutaoHTML httpstablelesscombrdesignresponsivonapratica2layoutaoHTML Acesso em 23102018 JOÃO B N Informática Aplicada São Paulo Pearson Education do Brasil 2014 Recurso eletrônico Biblioteca Virtual Universitária LAUBE K P Entendendo o CGI FastCGI e WSGI Portal Klauslaube publicado em 02112012 Disponível em httpsklauslaubecombr20121102entendendoocgifastcgiewsgihtmlhttpsklauslaubecombr20121102entendendoocgifastcgiewsgihtml httpsklauslaubecombr20121102entendendoocgifastcgiewsgihtml Acesso em 23102018 LEMAY L COLBURN R TYLER D Aprenda a criar páginas Web com HTML e XHTML em 21 dias São Paulo Pearson Education do Brasil 2002 Recurso eletrônico Biblioteca Virtual Universitária MILETTO E M BERTAGNOLLI S C Desenvolvimento de software II introdução ao desenvolvimento web com HTML CSS javascript e php Porto Alegre Bookman 2014 recurso online Minha Biblioteca MDN WEB DOCS input Portal MDN web docs publicado em 14102017 Disponível em httpsdevelopermozillaorgptBRdocsWebHTMLElementinput httpsdevelopermozillaorgptBRdocsWebHTMLElementinput Acesso em 23102018 PAGANI T O que é usabilidade Portal Tableless publicado em 22082011 Disponível em httpstablelesscombroqueeusabilidadehttpstablelesscombroqueeusabilidade httpstablelesscombroqueeusabilidade Acesso em 23102018 QUEIROZ M A PORTA G Criação de tabelas de dados acessíveis Portal Acessibilidade Legal publicado em 22122009 Disponível em httpwwwacessibilidadelegalcom13tabelasacessiveisphphttpwwwacessibilidadelegalcom13tabelasacessiveisphp httpwwwacessibilidadelegalcom13tabelasacessiveisphp Acesso em 23102018 VICTORIO J Requisições GET e POST principais diferenças Publicado em 24072016 W3SCHOOLS HTML 5 Tutorial sd Disponível em httpswwww3schoolscomHTML httpswwww3schoolscomHTML Acesso em 23102018 WAY J Os 30 seletores CSS que você deve memorizar Portal Envato Tuts publicado em 09062011 Disponível em httpscodetutspluscompttutorialsthe30CSSselectorsyoumustmemorize net16048 httpscodetutspluscompttutorialsthe30CSSselectorsyoumustmemorizenet16048 Acesso em 23102018