Baixar o livro Pílula HTML
Transcrição
Baixar o livro Pílula HTML
1ª Edição - Março 2014 Nenhuma parte deste livro pode ser u lizada ou reproduzida sob quaisquer meios existentes sem autorização por escrita do autor. Marco Aurélio Lang - Todos os Direitos Reservados ©2014 Sobre o autor Marco Aurélio Lang é publicitário, apaixonado por internet, Bacharel em Comunicação Social e MBA em Marke ng e Administração. Professor de web design no CNEC e de desenvolvimento Web na Universidade do Site. Sumário Introdução 4 Conhecendo o Web design 5 Que diabos é HTML? 7 Tags HTML 10 Estrutura básica do HTML 12 Criando uma página 14 Marcações textuais 17 Hyperlinks 24 Comentários em HTML 31 Linhas horizontais 32 Listas em HTML 33 Imagens em HTML 36 Tabelas em HTML 40 Formulários em HTML 42 Elementos bloco e inline 44 Conclusão 47 Introdução Decidi escrever este livro sobre HTML depois de procurar pela Internet por um material em lingua portuguesa de qualidade sobre o assunto para indicar aos alunos da Universidade do Site. O que encontrei foi muita informação desconexa, desatualizada e escrita em linguagem complexa demais. A única alterna va que me restou foi dedicar dois meses escrevendo um material que compila todas as principais marcações (tags) HTML necessárias para dominar a linguagem. Como tenho mais de 10 anos de experiência em web design, para escrever um livro como este ve que me colocar no lugar dos estudantes de desenvolvimento de sites e criar algo acessível e rápido de assimilar, porém ao mesmo tempo completo. Escrito totalmente em conformidade com as recomendações da W3C para HTML5, apresento este material para todos estudantes de web design, e me orgulho em dizer que é o livro que melhor ensina HTML no menor tempo. Bons estudos... Marco Aurélio Lang 1 Conhecendo o Web design O Web design é uma extensão da prá ca do design aplicada ao desenvolvimento de sites e demais peças para a Internet. O profissional que trabalha com esse po de design é conhecido como web designer, e precisa dominar diversas disciplinas como a arquitetura da informação, programação, ergonomia, usabilidade, acessibilidade entre outros. O webdesigner pode trabalhar como empregado em qualquer empresa que tenha uma área de web, em uma agência digital, ou ainda como freelancer, oferecendo seus serviços como profissional autônomo. A maioria do trabalho do webdesigner é desenvolvido em HTML (estrutura), CSS (formatação es lís ca) e SCRIPTS (comportamento). Existem normas técnicas de padronização para cada um deles que são recomendadas pelo W3C, orgão esse responsável pelos padrões de desenvolvimento para a internet. Para criar sites o webdesigner precisa de um simples editor de texto e algum programa para ilustrações, apesar de exis rem bons so wares que auxiliam o desenvolvimento para web, como o Dreamweaver, WYSIWYG Web Builder, Notepad++, etc. Como você pode ver, a pessoa precisa dominar diversas competências para se tornar um Webdesigner profissional e cumprir com o principal obje vo do Web Design, que é tornar a experiência do usuário do site a mais agradável e intui va possível. 5 Pílula HTML 1. Conhecendo o Web design Web Design x Webdesigner É comum ver as pessoas confundindo o nome da profissão Webdesigner com o nome da técnica Web Design. Se você é - ou deseja ser - um profissional da internet jamais pode cometer o pecado de confundir esses dois termos. Web Design: área do design que desenvolve sites e demais peças/aplicações para a Internet; Webdesigner: profissional que "faz" web design. 6 Pílula HTML 2 Que diabos é HTML? O termo HTML é usado para abreviar a expressão HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto, ou seja, é a “matéria prima” que cons tui os sites na internet. São as marcações HTML que dizem ao browser como exibir o documento ao internauta. Essa linguagem pode ser interpretada pelos navegadores (browsers) de formas diferentes, onde uma marcação não reconhecida por determinado so ware simplesmente é ignorada, resultando em diferenças na apresentação da página ao internauta. Por esse mo vo que existe a necessidade de sempre que desenvolvermos algo em HTML testarmos em diferentes navegadores. A World Wide Web Consor um (W3C) é uma organização criada para manter as especificações do H T M L. Ela faz recomendações tanto para web designers quanto para desenvolvedores de so wares na tenta va de padronizar a linguagem. Até o ano de 2006 a organização trabalhou em uma nova linguagem que foi chamada de XHTML, que posteriormente foi subs tuída pelo chamado HTML5, linguagem essa que tem como principal caracterís ca uma sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de ser processado e extendido. “ Se quiser conhecer mais sobre a história do HTML, assista o vídeo: h ps://www.youtube.com/watch?v=NSmapCNcSyI” 7 Pílula HTML 2. Que diabos é HTML? Diferentes versões do HTML A tabela a seguir mostra as diferentes versões do HTML lançadas até hoje. Versão do HTML Ano HTML 1991 HTML+ 1993 HTML 2.0 1995 HTML 3.2 1997 HTML 4.1 1999 XHTML 2000 HTML5 2012 Características do HTML Documentos HTML podem ser criados em qualquer editor de texto (notepad, edit, etc...); Os documentos HTML não são compilados, seu código sempre é visível e editável; Existem editores e conversores que automa zam grande parte da escrita HTML; HTML não faz diferença entre maiúsculas e minúsculas, ou seja, a notação <body> é equivalente a <BODY> ou <bODy>. Porém segundo recomendações da W3C devemos sempre usar as marcações em letras minúsculas. 8 Pílula HTML 2. Que diabos é HTML? Glossário básico A seguir alguns termos básicos do HTML que o webdesigner precisa conhecer: Documento: é a unidade mínima da informação do HTML, a página. : é a unidade mínima da informação do HTML, a página. Elementos: são as diferentes partes do documento HTML, por exemplo tulos, parágrafos, imagens, etc. Marcações: são as e quetas (tags) usadas geralmente em duplas que formam os diferentes elementos. Ex: <p>; Tags: o mesmo que marcações; Atributos: configuram as tags com determinados valores. Ex: <a href=”pagina2.html>, nesse caso href é o atributo. Browser: é o navegador usado pelos internautas para renderizar os arquivos HTML. Por exemplo Google Chrome, Internet Explorer, Firefox, Safari. 9 Pílula HTML 3 Tags HTML O HTML tem como principal caracterís ca o uso de tags (ou e quetas) para marcação dos elementos no documento. Uma tag sempre começa com o símbolo “<”, seguida do nome da marcação, e fechada com “>”. De modo geral as tags sempre são usadas em pares para formar um elemento, sendo uma para iniciar a marcação e outra para finalizá-la, esta úl ma caracterizada pelo uso de uma barra “/” logo após sua abertura. Um exemplo é a tag que inicia todo documento “<html>” e a que o finaliza “</html>”. As tags podem ainda conter outras informações referentes a atributos e valores do elemento, sempre com a finalidade de modificar os resultados padrões que os elementos geram quando renderizados pelo browser. Outra caracterís ca das tags é que elas podem ser aninhadas (podemos abrir tags dentro de tags). Inclusive a própria lógica de um documento HTML consiste em um aninhamento de tags (elementos). 10 Pílula HTML 3. Tags HTML Exemplo de elemento simples O exemplo a seguir mostra um parágrafo com o texto exemplo na formatação mais básica do elemento <p>. <p>Exemplo de parágrafo simples.</p> Exemplo de elementos aninhados O exemplo a seguir mostra o mesmo texto, porém com uma das palavras em negrito, demonstrando um dos possíveis aninhamento que podem ser feitos em HTML. <p>Exemplo de <strong>parágrafo</strong> simples.</p> 11 Pílula HTML 4 Estrutura básica do HTML A estrutura básica do HTML é o mínimo que um documento deve ter para que o servidor e o browser consigam “entregar” o conteúdo ao visitante. Ela consiste nas seguintes tags: <html>: inicia o documento HTML e indica ao browser que todo conteúdo que vier depois dela deve ser tratado como uma série de códigos HTML. <head>: define o cabeçalho de um documento HTML, trazendo informações sobre o mesmo como tulo, ligações de folhas de es lo, scripts, entre outros. <body>: onde são colocados os demais elementos que vão compor a página, ou seja, é a área que ficará visível aos visitantes da mesma. Apesar de muitos browsers conseguirem renderizar páginas sem essa estrutura básica, a presença dessas três tags é altamente recomendada em qualquer documento HTML, jamais deixe de u lizá-las. 12 Pílula HTML 4. Estrutura básica do HTML Exemplo de estrutura básica do HTML O exemplo a seguir mostra a estrutura básica que você precisa usar para criar um documento HTML. <html> <head> <title>Minha página</title> </head> <body> <p>Exemplo de texto.</p> </body> </html> Hora de praticar! 1. Abra o seu editor de texto (ex. Bloco de Notas do Windows); 2. Copie o código da estrutura básica do HTML nele; 3. Salve esse arquivo como index.html; 4. Localize o arquivo e abra-o no browser de sua preferência; 5. Pronto! Você acaba de criar sua primeira página em HTML. 13 Pílula HTML 5 Criando uma página Um website é um conjunto de páginas em hipermídia sob um mesmo domínio, portanto, para começar um site o primeiro passo é criar a página inicial - também conhecida como homepage ou simplesmente home – que servirá como uma espécie de índice para o restante do site. Para criar essa página inicial, acesse o editor de texto de sua preferência e crie um arquivo novo chamado “index.html”. A palavra index vem do inglês e significa índice, ou seja, será ela que remeterá o visitante as demais páginas que compõem o site. O index.html é o arquivo padrão a ser mostrado quando a URL requisitada corresponde a uma pasta. Por exemplo, se o internauta digitar “uol.com.br/esportes” o arquivo que será carregado será provavelmente “uol.com.br/esportes/index.html”. Diz-se que é provavelmente esse arquivo porque determinados servidores podem aceitar outras nomenclaturas ou formatos, como index.htm, index.php, default.htm, default.asp, etc. Dica Quente! A Dica Quente para quem esta começando a desenvolver sites é sempre nomear o arquivo da homepage (primeira página do site) como index.html. 14 Pílula HTML 5. Criando uma página Colocando conteúdo em sua página Começar a construção de uma página implica em escrever a estrutura básica (mínima) do documento HTML, conforme visto anteriormente. Abra um editor de texto qualquer (notepad, por exemplo), e digite o código a seguir: <html> <head> <title>Nome da sua página</title> </head> <body> <p>Primeiro elemento que aparecerá na página</p> </body> </html> Além das tags <html>, <head> e <body> das quais falamos anteriormente, você pode ver no exemplo anterior: < tle>: Título do documento que aparecerá na Barra de Título do browser do internauta. Como regra geral todo o documento HTML precisa de um tulo que descreva em pouquíssimas palavras o assunto do mesmo. <p>: Criação de um novo parágrafo no corpo da página. Ambas as tags serão explicadas com maior profundidade posteriormente, no momento você pode u lizá-las para começar a montar sua primeira página de teste. Dica Quente! 15 Jamais use acentos e espaços nos nomes de seus arquivos HTML. A forma indicada é, por exemplo “pagina-colecao.html”. Pílula HTML 5. Criando uma página Testando sua página O próximo passo é testar como o browser renderiza sua página. Para tanto, vá até a pasta onde se encontra seu arquivo index.html e no menu do botão direito do mouse selecione a opção “Abrir com...” e selecione o browser de sua preferência. No começo basta testar seu arquivo HTML em um único navegador, porém conforme o documento for ficando mais complexo é interessante renderizá-lo em outros browser. Os principais sugeridos são: Principais Browsers (navegadores) da atualidade Google Chrome Apple Safari Mozilla Firefox Opera Internet Explorer Apesar de atualmente o Chrome ser o líder absoluto no ranking dos navegadores mais u lizados jamais devemos esquecernos dos demais browsers, principalmente em um mercado de grande oscilação quanto esse, onde até poucos anos o Internet Explorer da Microso reinava absoluto, porém foi superado por outros so wares principalmente devido à baixa par cipação de mercado em smartphones. Conforme você for avançando no desenvolvimento de sites 16 verá o quão são importantes os diversos testes de desempenho do site, não só em diferentes browsers como também em variadas resoluções e disposi vos. Pílula HTML 6 Marcações textuais As marcações textuais, denominadas de tags para texto, servem para montar os elementos que compõem o texto do documento HTML, como parágrafos, tulos, citações, entre outros. O uso adequado das mesmas além de tornar o documento mais compa vel com a linguagem o torna mais relevante perante os buscadores como o Google e o Bing. Dica Quente! O melhor editor de arquivos HTML é o Notepad++, que pode ser baixado gratuitamente pelo site h p://notepad-plusplus.org/download/. Esse mesmo programa será ú l também para trabalhar com CSS, JavaScript, PHP e demais linguagens com as quais você, como webdesigner, pode se deparar. 17 Pílula HTML 6. Marcações textuais Heading Tags As Heading tags também são conhecidas como Cabeçalhos e servem para marcar tulos e sub tulos no documento HTML. É comum a confusão entre a tag < tle> e as heading tags, pois geralmente a tle tag é igual à primeira heading tag do texto. Vejo o exemplo a seguir: <html> <head> <title>Carros esportivos</title> </head> <body> <h1>Carros esportivos</h1> <p>Vamos falar sobre carros esportivos...</p> </body> </html> O resultado desse código é: < tle> <h1> 18 Pílula HTML 6. Marcações textuais O HTML possui 6 níveis dis ntos de heading tags, sendo o número 1 o de maior destaque até chegar ao 6, que é o Cabeçalho de menor destaque. É fundamental manter a hierarquia deste po de tags abrindo sempre o próximo nível sem pular etapas: Uso Correto Uso Incorreto <h1>Cabeçalho1</h1> <h2> Cabeçalho2</h2> <h3> Cabeçalho3</h3> <h4> Cabeçalho4</h4> <h1>Cabeçalho1</h1> <h3> Cabeçalho3</h3> <h4> Cabeçalho4</h4> <h5> Cabeçalho2</h5> Note que no exemplo incorreto anterior a tag <h3> está aberta sem que exista uma tag <h2>, subvertendo a ordem crescente de tulos. A seguir os diferentes níveis de heading tags e sua renderização padrão nos browsers. HTML No Browser <h1>Cabeçalho 1</h1> Cabeçalho 1 <h2>Cabeçalho 2</h2> Cabeçalho 2 <h3>Cabeçalho 3</h3> Cabeçalho 3 <h4>Cabeçalho 4</h4> Cabeçalho 4 <h5>Cabeçalho 5</h5> Cabeçalho 5 <h6>Cabeçalho 6</h6> Cabeçalho 6 19 Pílula HTML 6. Marcações textuais Parágrafos Como o HTML não reconhece os caracteres de quebra de linha dos editores de texto é necessário usar a marcação <p> para criar um novo parágrafo. <p>Texto que aparecerá no primeiro parágrafo.</p> <p>Segundo parágrafo aberto.</p> <p>Terceiro e último parágrafo do texto.</p> O código anterior monta 3 pequenos parágrafos na sequência, deixando uma linha em branco entre eles. Quebra de linha A tag “<br>” serve para fazer a quebra de linha forçada, que não deve ser confundida com a criação de um novo parágrafo que além de quebrar a linha também adiciona um espaço em branco entre os parágrafos. Veja a diferença no código a seguir. <h1>Tag P</h1> <p>Diferença usando a tag P.</p> <p>Observe o espaço entre os parágrafos.</p> <h1>Tag BR</h1> <p>Exemplo de uso do BR.<br>Observe o espaço entre as linhas.</p> A seguir compare os resultados: 20 Pílula HTML 6. Marcações textuais Formatação básica de texto O HTML possui tags específicas para fazer marcações de formatação em textos. A forma de marcação é a mesma de qualquer outro elemento, onde o trecho formatado deve aparecer entre o par de tags da formatação: <tag de formatação>Texto a ser formatado</tag de formatação>. <b>: negrito – prefira sempre usar <strong>; <i>: itálico, usado para mudar a “voz” na oração - prefira sempre usar <em>; <small>: define um texto menor; <strong>: define texto importante, renderizado como negrito; <em>: define texto importante, renderizado como itálico. <sub>: subscrito; <sup>: sobrescrito; <del>: riscado – usado para mostrar que algo foi apagado; <mark>: destacado. Dica Quente! A esta altura dos estudos você deve estar se perguntando sobre como mudar o tamanho da letra, a cor, o alinhamento, etc. Isso tudo não é feito diretamente com HTML, e sim via CSS, assunto esse que você encontrará em abundância no site h p://universidadedosite.com.br/. 21 Pílula HTML 6. Marcações textuais Observe os exemplos no código a seguir. <p><strong>Texto em negrito.</strong></p> <p><em>Texto em itálico.</em></p> <p><small>Texto pequeno.</small></p> <p><strong>Texto importante.</strong></p> <p><b>Texto <sub>subscrito</sub> e outro <sup>sobrescrito.</sup></b></p> <p><del>Texto apagado.</del></p> <p><mark>Texto destacado.</mark></p> Veja o resultado: Essa formatação básica serve para estruturar as informações no texto de seu HTML, muito usada como técnica de SEO (o mização de sites para buscas). Como é possível ver a formatação é bastante básica e até parecida – como no caso do <b> e do <strong> - porém a formatação es lís ca destes elementos pode ser alterada através de CSS, trabalho esse de competência do webdesigner. 22 Pílula HTML 6. Marcações textuais Citações Uma importante marcação textual em HTML são as citações, usadas para apresentar trechos de texto de outros autores. Elas podem ser de dois pos: <q>: citação curta dentro da linha do parágrafo; <blockquote>: citação longa. Observe a diferença no exemplo a seguir. <p>Exemplo do uso de uma <q>citação curta dentro</q> de um parágrafo.</p> <blockquote>Já as citações longas, com várias linhas devem ser colocadas entre a tag blockquote. Note que nesta caso não abrimos um novo parágrafo, pois o blockquote em sí já se caracteriza como um. Repare também na tabulação deste tipo de citação.</blockquote> O resultado é o seguinte: Note que no caso de citações curtas colocamos a tag <q> dentro do <p>, já nas longas não abrimos um novo parágrafo, pois o <blockquote> em si já se caracteriza como um. Repare também na tabulação deste po de citação. 23 Pílula HTML 7 Hyperlinks Como mencionado anteriormente, o termo HTML é o usado para abreviar a expressão HyperText Markup Language, que em português significa Linguagem de Marcação de Hipertexto. O grande trunfo desses hipertextos escritos em HTML está na sua capacidade de criar ligações (links) a outras partes desse documento ou a outro documento. Sempre que você clica em algum “botão” em um site – ou outra área qualquer de texto destacado clicável - na verdade está a vando um desses hyperlinks que vão remetê-lo a outro documento ou arquivo de forma facilitada, tornando a localização de conteúdos mais rápida. 24 Pílula HTML 7. Hyperlinks Criando um link simples Um link (abreviação muito u lizada para se referir ao hyperlink) é criado com a marcação denominada âncora, aplicada com a tag “<a>”. A tag <a> é sempre composta, ou seja, precisa de outros atributos e valores para funcionar. O principal – e indispensável – é o href que especificará o documento que será ligado através do link. Por exemplo: <a href=”contato.html ">Fale Conosco</a> A tag <a> é composta pelo href, seguida do sinal matemá co de “=” e do nome do documento entre aspas duplas. Posteriormente, segue o texto âncora que aparecerá para o internauta clicar, e finalmente fecha com a tag </a> que diz ao browser que aquele elemento link termina ali. Dica Quente! Jamais crie links usando todo o caminho do arquivo, por exemplo “C:/meu-site/produtos.html”. Use somente o nome do arquivo e da pasta a par r do ponto de par da de seu arquivo. Digamos que você queira abrir o arquivo produtos.html que está na mesma pasta “meu-site”, faça o link assim: “produtos.html”. 25 Pílula HTML 7. Hyperlinks Criando um link em diretório diferente O processo de fazer ligações entre documento HTML ou demais arquivos que estão em diretórios diferentes é o mesmo, basta adicionar ao href o caminho completo para onde o link deve apontar. Exemplo: <a href="produtos/camisetas.html ">Camisetas</a> Agora imagine que dentro do documento Camisetas você queira criar um link para retornar ao seu index.html, que se encontra na raiz do site. Se você montar o link chamando diretamente o documento através da href=”index.html" o link “quebrará”, pois o index.html se encontra em uma pasta abaixo da camisetas.html, que é a que você esta acessando. Para resolver o problema você deve voltar um nível de pastas usando “../”, como no exemplo a seguir: <a href="../index.html">Homepage</a> Dica Quente! Apesar de na criação de um link para determinada pasta não ser necessário o uso da barra “/” no final, é aconselhado usá-la, pois a não u lização da mesma faz a requisição em duplicidade ao servidor, deixando tanto o site um pouco mais lento quanto o próprio servidor de hospedagem. Confira o exemplo a seguir: Link para pasta correto: <a href=" leite/"> 26 Link para pasta incorreto: <a href=" leite"> Pílula HTML 7. Hyperlinks Criando um link com URL Na web os endereços que digitamos no browser para acessar determinado arquivo ou documento são chamados de URL como, por exemplo, “h p://www.maujor.com/dicas/deprecated.php”. É comum fazermos ligações usando URL's pelo fato de muitos links em nossos documentos HTML apontarem para outros sites. O processo de criação desses hyperlinks é muito parecido com os links internos: <a href=" http://www.uol.com/dicas/">HTML Dicas</a> Criando um link para seção específica Pode ser bastante ú l para o internauta pular para determinadas seções de um documento sem precisar passar pelo conteúdo como um todo. Para isso an gamente era usada a named anchor, ou âncora em português. Nas novas versões do HTML ela foi subs tuída pelo atributo “id”, que torna a criação de links para seções muito mais intui va. O primeiro passo é criar o link que aponta para a seção específica, que pode inclusive estar no mesmo documento HTML, como é o caso do exemplo a seguir: <a href=" #cachorro">Cachorro </a> 27 Pílula HTML 7. Hyperlinks O código anterior monta a ligação (note o uso do símbolo “#”), enquanto que a seguir é definida a seção para onde o link apontará: <h2 id=”cachorro”>Cachorro</h2> O resultado disso é que quando o internauta clicar no link Cachorro ele será direcionado para a seção Cachorro dentro do mesmo documento, que foi marcada com o atributo “id”. Digamos que a seção cachorro esteja em outro documento, basta adicionar o caminho completo no link e definir o atributo “id” na seção do documento des no: <a href="animais.html#cachorro">Cachorro</a> O internauta é direcionado para a seção Cachorro que se encontra dentro do documento animais.html. Criando um link com URL Apesar de exis rem formas melhores de o visitante manter contato com o site, como um formulário de e-mail, por exemplo, o link “mailto” pode ser ú l em caso de não dispormos de um script para contato. <a href="mailto:[email protected]">Envie um e‐mail para nós.</a> Esse link quando clicado abrirá o cliente de e-mail (ex.: Outlook) padrão do usuário, já com o des natário preenchido. 28 Pílula HTML 7. Hyperlinks Principais atributos da tag <a> Como visto anteriormente, a tag “<a>” é sempre composta, ou seja, precisa de outros atributos para funcionar. Conheça os principais: href: especifica o des no do link para qual o internauta será reme do quando clicar; tle: uma breve descrição sobre o documento para o qual o link aponta que aparecerá quando o visitante colocar o ponteiro do mouse sobre o mesmo sem clica-lo. target: define o alvo onde o documento será aberto, que pode ser uma determinada janela ou frame. Os principais são: “_blank”, que abre o documento em uma nova janela; e “_self”, abre no mesmo frame, caso você u lize esse po de recurso – o que não é recomendado. Confira a seguir um exemplo de marcação <a> que abre um arquivo PDF em uma nova janela: <a href="imposto‐de‐renda.pdf" title="Formulário de preenchimento para declaração do IR." target="_blank">Imposto de Renda</a> 29 Pílula HTML 7. Hyperlinks O atributo target foi eliminado no XHTML, porém voltou a ser recomendado no HTML5, devido a sua grande u lidade. U lize-o sempre de forma moderada e inteligente, evitando definir a abertura de muitos links em novas janelas, pois isso irrita o internauta. Quanto ao atributo tle, a recomendação é sempre usá-lo pois além de ser uma importante técnica SEO facilita a navegação. Dica Quente! Tenha sempre em mente que independente do po de link que você quiser criar, a estrutura é sempre a mesma: <a href=”caminho+nome do arquivo+extensão”>Texto âncora</a> Hora de praticar! Hyperlinks são uma das tags HTML que mais confundem os estudantes, por isso é tão importante você pra car. 1. Crie um documento HTML e salve como index.html; 2. Dentro da pasta onde esta o index.html, crie outra pasta chamada arquivos; 3. Na pasta arquivos crie outro documento HTML chamado segundo.html; 4. No index.html crie um link para o segundo.html, e vice-eversa. 30 Esse exercício vai ensiná-lo a linkar páginas em diferentes diretórios. Pílula HTML 8 Comentários em HTML As tags de comentário “<!--" e “ -->” são u lizadas para fazer observações e apontamentos no código fonte do HTML. Sua principal caracterís ca é não ficar visível para o visitante na renderização do browser, porém aparecer sempre que o código fonte é acessado. Usar tags de comentário facilita o desenvolvimento do site, principalmente se o código for muito extenso ou desenvolvido por uma equipe, pois nesse caso um desenvolvedor pode deixar observações para os demais envolvidos no projeto. Veja o exemplo a seguir: <html> <head> <title>Carros esportivos</title> <!‐‐esse título precisa ser melhorado ‐‐> </head> <body> <h1>Carros esportivos</h1> <p>Vamos falar sobre carros esportivos...</p> </body> </html> Veja que o desenvolvedor deixou um lembrete no código alertando sobre uma melhoria necessária no documento. 31 Pílula HTML 9 Linhas horizontais Existe uma tag HTML específica para a criação de linhas horizontais no documento: <hr>. Essa marcação é bastante ú l para a criação de um separador visual simples de conteúdo para as versões até HTML 4.1. Já para HTML5 ela ganha ainda mais relevância, pois serve para marcar a quebra de tema no documento. Sua principal caracterís ca é a não necessidade de fechamento, como é possível ver no exemplo a seguir. <p>Meu primeiro parágrafo.</p> <hr> <p>Segundo parágrafo.</p> Note que o <hr> não necessita de </hr> para que o complemento seja renderizado corretamente pelo navegador. <hr> 32 Pílula HTML 10 Listas em HTML O uso de listas em HTML facilita muito a criação de tópicos, sejam eles numerados ou não. Ao invés de usar o famigerado marcador “*” ou números seguidos de pontos, em documentos HTML u liza-se “<ul>“ para listas não ordenadas e “<ol>“ para listas ordenadas (numeradas). Lista não ordenada Lista ordenada Dentro de qualquer item de lista é possível colocar - além de texto – imagens, links, citações, etc., inclusive outras listas. Dica Quente! Pessoas gostam de listas, diversas pesquisas de marke ng comprovam isso. U lize este recurso HTML para criar conteúdo como “Dicas úteis para...” ou “As 7 técnicas...”. 33 Pílula HTML 10. Listas em HTML Uso de listas não ordenadas <ul> Uma lista não ordenada sempre começa com a tag “<ul>”, e seus itens ficam entre a marcação <li>, como no exemplo a seguir: <ul> <li>Fiat</li> <li>Ford</li> <li>Chevrolet</li> </ul> Veja a seguir o exemplo de lista não ordenada que o código gera: Hora de praticar! 1. Crie um documento HTML, sempre usando a estruturá básica completa; 2. Nele crie um lista ordenada e logo abaixo uma não ordenada; 34 3. Abra no browser e compare os resultados. Pílula HTML 10. Listas em HTML Uso de listas ordenadas <ol> As listas ordenadas (ou numeradas) são criadas com a marcação “<ol>”, seguida dos itens colocados entre a tag <li>: <ol> <li>Primeiro</li> <li>Segundo</li> <li>Terceiro</li> </ol> A seguir como a lista ordenada aparece no browser para o internauta: Como padrão as listas ordenadas sempre são renderizadas pelos browsers em uma sequência numérica (1... 2... 3...). Porém através de es lização CSS é possível alterar essa formatação, assim como a formatação das listas não ordenadas. 35 Pílula HTML 11 Imagens em HTML A máxima “uma imagem vale mais que mil palavras” se aplica perfeitamente a importância das imagens para as páginas da Internet. Diferente das imagens colocadas em um documento do Word, por exemplo, onde as mesmas são inseridas no arquivo do documento, no caso do HTML elas apenas são “chamadas” para determinado espaço reservado a elas. Por exemplo, se você criar um documento HTML com 5 imagens, seis requisições diferentes de arquivos serão feitas ao servidor – 1 do arquivo HTML e 5 das imagens. Portanto cuidado com o uso em excesso desse po de recurso, sob pena de ter uma página lenta. Para inserir imagens em um documento HTML é necessário usar a tag “<img>”, sempre acompanhada do atributo “src”, que é uma abreviação da palavra inglesa source (fonte). No atributo src é colocado o caminho de sua imagem, como no exemplo a seguir: <img src="imagens/logo.png"> O código acima exibe a imagem “logo.png” que se encontra dentro do diretório “imagens” do site. Note como a tag <img> não precisa de fechamento “/”. 36 Pílula HTML 11. Imagens em HTML Atributo ALT da tag <img> O atributo “alt” da tag para imagens serve para especificar um texto (curto) alterna vo caso a imagem por alguma razão não possa ser mostrada ao visitante da página. Ela serve também como um texto âncora que dirá para os motores de busca (Google, Bing...) qual o conteúdo gráfico daquela imagem. A seguir um exemplo de atributo alt sendo mostrado pelo browser porque a imagem “quebrou”: imagem com ALT imagem quebrada sem ALT imagem quebrada sem ALT Apesar de não ser um atributo obrigatório e geralmente não visível para a maioria dos visitantes, é altamente recomendável u lizá-lo. Para você ter uma ideia da importância de criar bons alt's que descrevam a imagem, os internautas com deficiência visual que usam um navegador apropriado (como Jaws e Orca) ouvem a narração do texto âncora, já que não podem ver a imagem. 37 Pílula HTML 11. Imagens em HTML Atributos HEIGHT e WIDTH da <img> O atributo “height” é u lizado para especificar a altura da imagem, enquanto o “width” especifica seu comprimento. Apesar de poder ser definido em porcentagem, por padrão ambos os valores são em pixels, como no exemplo a seguir: <img src="imagens/logo.png" alt=”Logomarca colorida da empresa X.” width="55" height="55"> Já em porcentagem é necessário fazer uso do símbolo “%”: <img src="imagens/logo.png" alt=”Logomarca colorida da empresa X.” width="35%" height="35%"> No exemplo acima a imagem ocupa 35% - tanto na largura quanto no comprimento – do espaço disponível para ela. Dica Quente! O uso dos atributos height e width não é obrigatório, porém é recomendado pela W3C, pois define na rendeziração o espaço que o browser deve deixar para a imagem antes mesmo de carregá-la. O efeito de não especificar esse valores será da página ir mudando conforme as imagens forem sendo carregadas. 38 Pílula HTML 11. Imagens em HTML Imagens recomendadas para sites As extensões de imagens recomendadas para uso em sites são Gif, Jpeg (Jpg) e Png, pois são reconhecidas e bem renderizadas em todos os browsers. É comum ouvir a pergunta “qual o melhor formato de imagens para a internet?”. A resposta é sempre a mesma: o melhor formato é aquele que gera a melhor relação qualidade x tamanho. Quando for exportar seu arquivo para usar em um site, teste em Gif, Jpg e Png e veja qual opção traz a maior riqueza em detalhes e cores com o menor tamanho em Kb possível. Formato GIF (extensão .gif) PNG (extensão .png) JPEG (extensão .jpg ou .jpeg) Melhor uso Para imagens com pouquíssimas cores e sem detalhes muito pequenos, desenhos simples, vetores exportados e qualquer outro po de imagem sem gradientes. Esse po de arquivo é bastante usado para animações e imagens com fundo transparente. A limitação do PNG quanto a cores é menor que em arquivos GIF, com a vantagem ainda da possibilidade do uso de fundos transparentes com maior qualidade. Por esse mo vo a grande maioria dos web designers atualmente migrou do uso do GIF para PNG. Melhor opção no caso de imagens complexas com muitas cores, como é o caso das fotografias. Como regra geral você pode usar o critério de optar sempre por Jpeg para fotos e demais imagens com muitas cores e PNG para todo o restante. Quanto ao Gif, atualmente é u lizado na maioria 39 das vezes para fazer imagens animadas. Pílula HTML 12 Tabelas em HTML Por muito tempo as tabelas foram u lizadas por webdesigners para criação de layouts e formas es lís cas, porém isso não é mais considerado correto nas atuais versões do HTML. As tabelas devem ser u lizadas somente para estruturar dados em linhas e colunas. No design do layout o desenvolvedor deve fazer o uso da tag “<div>” que será abordada posteriormente. Para criar uma tabela é necessário aninhar diversas tags diferentes. A marcação que abre uma tabela é “<table>”, seguida da divisão por linhas feita com “<tr>” e da criação de células com “<td>”. Observando o exemplo a seguir fica mais fácil de entender: <table border="1" > <tr> <td>Fiat</td> <td>Bravo</td> <td>1.8</td> </tr> <tr> <td>Ford</td> <td>Focus</td> <td>2.0</td> </tr> </table> Note que no exemplo acima usamos o atributo “border” que será abordado mais tarde. O resultado desse código pode ser visualizado a seguir: 40 Pílula HTML 12. Tabelas em HTML Caso queira criar um cabeçalho para as colunas de sua tabela, u lize a tag “<th>” ao invés de “<td>” para abrir a célula. Confira no exemplo a seguir: <table border="1" > <tr> <th>Marca</th> <th>Modelo</th> <th>Motorização</th> </tr> <tr> <td>Fiat</td> <td>Bravo</td> <td>1.8</td> </tr> <tr> <td>Ford</td> <td>Focus</td> <td>2.0</td> </tr> </table> Veja o resultado: <th> <td> Quanto às configurações es lís cas de tabelas em HTML, elas devem ser feitas através de CSS. Tabelas complexas em HTML5 O HTML5 possui uma semân ca completa para a criação de tabelas complexas com tags como “<cap on>”, “<tbody>”, “<thead>”, “< oot>”, entre outros. Como o uso de tabelas 41 complexas é pequeno para a maioria dos webdesigners optamos por deixar fora do livro essas tags. Pílula HTML 13 Formulários em HTML Os formulários - ou simplesmente “forms” – são uma forma de transferir dados do internauta para o servidor através do documento HTML. Os forms HTML podem conter diversos elementos diferentes para coletar dados, como campos de texto, botões, checkboxes entre outros. A tag que abre o formulário é sempre “<form>”, e precisa de atributos como ac on e method para direcionar os dados que geralmente são tratados por algum script. Veja o exemplo a seguir: <form action="login.php" method="get"> Usuário: <input type="text" name="usuario"> <input type="submit" value="Enviar"> </form> No browser este código será renderizado como: Dica Quente! Sempre que precisar criar um form mail em seu site consulte sua hospedagem. A grande maioria dispõem de scripts prontos já instalados para você usar. 42 Pílula HTML 13. Formulários em HTML Como abordado anteriormente, existem diversos elementos diferentes para coletar dados com um formulário. Observe os principais no código a seguir: <form> Nome: <input type="text" name="nome"><br> <input type="radio" name="sexo" value="male">Masculino<br> <input type="radio" name="sexo" value="female">Feminino<br> <input type="checkbox" name="concordar" value="concordo">Concordo com as regras.<br> <input type="submit" value="Enviar"> </form> O código anterior renderiza no navegador da seguinte forma: 43 Pílula HTML 14 Elementos bloco e inline Os elementos de um documento HTML podem ser divididos como elementos bloco e elementos inline. Bloco: os elementos bloco quando renderizados pelo browser são como padrão colocados em uma “nova linha”. Alguns exemplos desses pos de elementos são <h1>, <p>, <table>, <blockquote>; Inline: esses elementos como padrão são apresentados pelo navegador sem que ele crie uma nova linha. Exemplos: <strong>, <a>, <img>. Div’s e Span’s As tags “<div>” e “<span>” são usadas para criar elementos que servirão como uma espécie de container para agrupamento de outros elementos e textos HTML. O principal uso dessas duas tags para o webdesigner tem cunho es lís co, ou seja, elas basicamente servem para montar o layout e iden dade visual da página. A figura acima mostra como o <span> não quebra linha e como o <div> sempre quebra a linha quando criado. 44 Pílula HTML 14. Elementos bloco e inline Elemento Div A tag “<div>” é um elemento bloco usado para agrupar outros elementos. Por si só, seu uso não produz grandes resultados esté cos no browser, a não ser uma quebra de linha antes de sua abertura e outra logo após. Em compensação quando combinado com CSS se torna um dos elementos mais poderosos do webdesigner, u lizado principalmente para montar o layout, subs tuindo o an go uso da “<table>” para o mesmo fim. No exemplo a seguir você pode ver duas Div's diferentes separando o conteúdo de uma página. <div> <!‐‐abre 1ª DIV ‐‐> <h2>Esportes</h2> <p>Manchete 1</p> <p>Manchete 2</p> <p>Manchete 3</p> </div> <!‐‐fecha 1ª DIV ‐‐> <div> <!‐‐abre 2ª DIV ‐‐> <h2>Policial</h2> <p>Manchete 1</p> <p>Manchete 2</p> <p>Manchete 3</p> </div> <!‐‐fecha 2ª DIV ‐‐> Com CSS você poderá, por exemplo, posicionar a Div das no cias sobre esportes no canto direito da tela, e as no cias policiais no esquerdo. 45 Pílula HTML 14. Elementos bloco e inline Elemento Span O uso do “<span>” em HTML é muito parecido com o da tag “<div>”, ou seja, serve para “envolver” elementos porém de forma inline, ou seja, sem quebra de linha. O principal uso desta tag HTML é es lizar um determinado trecho de texto ou mudar seu comportamento via JavaScript. <p>Exemplo do uso da tag span como <span>container inline</span>em um parágrafo.</p> Sozinha a marcação “<span>” não produz efeito visual nenhum, porém combinada com CSS é uma importante tag para o web design. Dica Quente! Faça o download gratuito do infográfico contendo um resumo de todas as tags HTML que você aprendeu neste livro, clique no link: h p://universidadedosite.com.br/principais-tags-htmlinfografico/ 46 Pílula HTML Conclusão Aprender a linguagem HTML é o primeiro passo que a pessoa deve dar se quiser se tornar um webdesigner, porém desenvolver um site completo exige além do conhecimento em HTML o domínio de CSS e o mínimo conhecimento de JavaScript. Agora que você já estudou todo conteúdo desta apos la tem duas opções: 1. Aprofundar-se mais no HTML estudando novas marcações do HTML5 como <address>, <video>, <audio>, <header>, entre outros; 2. Seguir em frente e começar a estudar CSS (Cascading Style Sheets) para aprender a formatar es lis camente suas páginas. Eu, par cularmente, torço para que você escolha a opção 2 e comece o quanto antes possível a estudar CSS. Não que não seja importante se aprofundar no HTML, e sim pelo fato de que você já conhece o essencial da linguagem que será necessário para desenvolver 95% dos sites. Caso precise usar alguma tag que não domine em determinado projeto, você terá sempre disponível os sites da Universidade do Site e W3CSchools para consulta. Caso tenha alguma dúvida ou queira somente manter contato, procure-me no site da Universidade do Site. Ficarei feliz em ter você em nossa lista de e-mails. Um forte abraço, e muito sucesso! Marco Aurélio Lang 47 Pílula HTML Par cipe da lista de e-mails da Universidade do Site e fique por dentro das úl mas novidades do mercado de empreendedorismo digital e desenvolvimento para Internet. www.universidadedosite.com.br/lista Nenhuma parte deste livro pode ser u lizada ou reproduzida sob quaisquer meios existentes sem autorização por escrita do autor. Marco Aurélio Lang - Todos os Direitos Reservados ©2014