{"id":1965,"date":"2012-08-21T17:02:47","date_gmt":"2012-08-21T20:02:47","guid":{"rendered":"http:\/\/blog.turbosite.com.br\/?p=1965"},"modified":"2012-08-21T17:02:47","modified_gmt":"2012-08-21T20:02:47","slug":"html-parte-8","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/html-parte-8\/","title":{"rendered":"HTML &#8211; PARTE 8"},"content":{"rendered":"<p>Imagens<\/p>\n<p>O que voc\u00ea acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no centro da sua p\u00e1gina?<\/p>\n<p>Ops, isto soa como um desafio&#8230;<\/p>\n<p>Talvez, mas \u00e9 muito f\u00e1cil de fazer. Tudo o que voc\u00ea precisa \u00e9 da nossa j\u00e1 conhecida tag:<\/p>\n<p>Exemplo 1:<\/p>\n<pre><code>\n&lt;img src=\"https:\/\/www.turbosite.com.br\/mkt\/tutorial\/html\/banner_int_turbo.jpg\" alt=\"TURBOSITE\" \/&gt;\n<\/code><\/pre>\n<p>O que voc\u00ea tem a fazer \u00e9 dizer ao navegador que quer inserir uma imagem (img) e depois informar onde a imagem esta localizada (src, abreviatura para &#8220;source&#8221; &#8211; local de armazenagem ).<\/p>\n<p>Notar que a tag imagem \u00e9 do tipo comando isolado, isto \u00e9, uma s\u00f3 tag de abertuta e fechamento. Semelhante a tag <br \/> que n\u00e3o precisa de um texto inserido nela.<\/p>\n<p>&#8220;tim.jpg&#8221; \u00e9 o nome do arquivo da imagem que voc\u00ea quer inserir na p\u00e1gina. &#8220;.jpg&#8221; \u00e9 a extens\u00e3o do tipo de imagem. Tal como a extens\u00e3o &#8220;.htm&#8221; para arquivos de documentos HTML, &#8220;.jpg&#8221; informa ao navegador que o arquivo \u00e9 uma imagem. S\u00e3o tr\u00eas os tipos de imagens que voc\u00ea pode inserir na sua p\u00e1gina:<\/p>\n<ul>\n<li>GIF (Graphics Interchange Format) <\/li>\n<li>JPG \/ JPEG (Joint Photographic Experts Group) <\/li>\n<li>PNG (Portable Network Graphics) <\/li>\n<\/ul>\n<p><strong>Em geral imagens GIF s\u00e3o melhores para gr\u00e1ficos e desenhos e imagens JPEG s\u00e3o melhores para fotografia.<\/strong> Existem duas raz\u00f5es para isto: primeiro, imagens GIF s\u00e3o constituidas por 256 cores, e imagens JPEG por milh\u00f5es de cores, segundo, imagens GIF s\u00e3o melhores otimizadas para imagens simples ao passo que imagens JPEG s\u00e3o melhores otimizadas para imagens complexas. Quanto melhor a compress\u00e3o tanto menor o tamanho do arquivo e tanto mais r\u00e1pido a p\u00e1gina \u00e9 carregada no navegador. Como voc\u00ea deve saber por experi\u00eancia pr\u00f3pria, p\u00e1ginas desnecessariamente &#8220;pesadas&#8221; para carregar s\u00e3o frustantes para o usu\u00e1rio.<\/p>\n<p>Tradicionalmente os formatos GIF e JPEG tem sido os mais empregados, mas ultimamente o formato PNG tem se tornado cada vez mais popular (notadamente em detrimento do formato GIF). <strong>O formato PNG \u00e9 em v\u00e1rios aspectos melhor que os formatos JPEG e GIF: milh\u00f5es de cores e efetiva compress\u00e3o.<\/strong><\/p>\n<p>Onde consigo minhas imagens?<\/p>\n<p>Para criar suas pr\u00f3prias imagens voc\u00ea precisa de um programa de edi\u00e7\u00e3o de imagens. <strong>Um programa de edi\u00e7\u00e3o de imagens \u00e9 a ferramenta essencial para cria\u00e7\u00e3o de websites com grande impacto visual.<\/strong><\/p>\n<p>Lamentavelmente, nenhum editor de imagem vem instalado com o Windows ou qualquer outro sistema operacional. Assim, voc\u00ea deve considerar a aquisi\u00e7\u00e3o do Paint Shop Pro, do PhotoShop ou do Macromedia Fireworks, que s\u00e3o os tr\u00eas melhores editores de imagens atualmente existentes no mercado.<\/p>\n<p>Contudo, como j\u00e1 dissemos, n\u00e3o h\u00e1 necessidade de comprar um programa caro para acompanhar este tutorial. Por enquanto, voc\u00ea poder\u00e1 fazer o download de um exelente editor de imagens chamado Irfan View que \u00e9 freeware, isto \u00e9, n\u00e3o custa nada.<\/p>\n<p>Ou voc\u00ea pode fazer download de imagens existentes na web. Mas, por favor, se optar por fazer o download de imagens da Internet, cuidado para n\u00e3o violar direitos autorais de terceiros. A seguir mostro como fazer o download de uma imagem existente na Internet:<\/p>\n<ol>\n<li>Clique com o bot\u00e3o direito do mouse na imagem da Internet.<\/li>\n<li>No menu que aparece escolha a op\u00e7\u00e3o &#8220;Salvar imagem como&#8230;&#8221;.<\/li>\n<li>Na janela que se abre, escolha o lugar no seu computador para salvar e clique &#8220;Salvar&#8221;.<\/li>\n<\/ol>\n<p>Voc\u00ea sempre ter\u00e1 que usar o atributo src, que diz ao navegador onde a imagem est\u00e1 localizada. Al\u00e9m dele existem alguns outros atributos que podem ser bastante \u00fateis quando voc\u00ea insere imagens em uma p\u00e1gina.<\/p>\n<p>O atributo alt \u00e9 usado para fornecer uma descri\u00e7\u00e3o textual alternativa da imagem caso por alguma raz\u00e3o a imagem n\u00e3o seja renderizada para o usu\u00e1rio. Isto \u00e9 particularmente importante para usu\u00e1rios com restri\u00e7\u00f5es visuais ou quando a imagem \u00e9 carregada muito lentamente. Em conseq\u00fc\u00eancia, sempre use o atributo alt:<\/p>\n<p>Exemplo 2:<\/p>\n<pre><code>\n&lt;img src=\"https:\/\/www.turbosite.com.br\/mkt\/tutorial\/html\/banner_int_turbo.jpg\" alt=\"TURBOSITE\"&gt;\n<\/code>\n  <\/pre>\n<p>Alguns navegadores mostram uma caixa pop-up com o conte\u00fado do atributo alt quando o usu\u00e1rio passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do atributo alt \u00e9 a de fornecer uma alternativa textual para imagem. O atributo alt n\u00e3o deve ser usado para criar mensagens pop-up uma vez que os leitores de tela passar\u00e3o uma mensagem que n\u00e3o descreve a imagem para os usu\u00e1rios com restri\u00e7\u00f5es visuais.<\/p>\n<p>O atributo title pode ser usado para fornecer uma curta descri\u00e7\u00e3o da imagem:<\/p>\n<p>Exemplo 3:<\/p>\n<pre><code>\n&lt;img src=\"banner_int_turbo.jpg\" title=\"TURBOSITE\"&gt;\n<\/code>\n  <\/pre>\n<p>Os atributos width e height podem ser usados para definir respectivamente, a largura e a altura da imagem. O valor adotado para medidas \u00e9 o pixel. Pixel \u00e9 a unidade de medida usada para medir a resolu\u00e7\u00e3o da tela. (As resolu\u00e7\u00f5es de tela mais comuns s\u00e3o de 800&#215;600 e 1024&#215;768 pixels). Ao contr\u00e1rio de cent\u00edmetros, pixel \u00e9 uma inidade de medida relativa que depende da resolu\u00e7\u00e3o da tela. Usu\u00e1rios com grande resolu\u00e7\u00e3o de tela ter\u00e3o 25 pixels em 1 cent\u00edmetro de tela enquanto aqueles com baixa resolu\u00e7\u00e3o de tela ter\u00e3o os mesmos 25 pixels em 1,5 cm de tela.<\/p>\n<p>Se n\u00e3o forem definidos os valores para width eheight, a imagem ser\u00e1 inserida com seu tamanho real. Com width e height voc\u00ea pode alterar o tamanho da imagem:<\/p>\n<p>Exemplo 4:<\/p>\n<pre><code>\n&lt;img src=\"logo.gif\" width=\"672\" height=\"50\"&gt;\n<\/code>\n  <\/pre>\n<p>Contudo, o tempo de descarga da imagem ser\u00e1 sempre aquele requerido como se ela tivesse suas dimens\u00f5es reais, mesmo que voc\u00ea diminua seu tamanho com uso destes atributos. Assim, <strong>voc\u00ea n\u00e3o deve diminuir o tamanho das imagens com o uso dos atributos width e height<\/strong>. Se voc\u00ea precisa diminuir a imagem diminua suas dimens\u00f5es reais em um editor de imagem para tornar suas p\u00e1ginas mais leves e mais r\u00e1pidas.<\/p>\n<p>Dito isto, acrescentamos que \u00e9 sempre uma boa id\u00e9ia definir os atributos width e height para imagens, pois assim fazendo o navegador reservar\u00e1 o espa\u00e7o para descarga da imagem previamente. Isto acaba por permitir ao navegador, saber com anteced\u00eancia (antes de descarregar as imagens) como ser\u00e1 o layout da p\u00e1gina.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Imagens<br \/>\nO que voc\u00ea acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor do HTML no centro da sua p\u00e1gina?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[28],"tags":[119,140,331,583,622,660],"class_list":["post-1965","post","type-post","status-publish","format-standard","hentry","category-tutoriais","tag-como-fazer-sites","tag-construcao-de-sites","tag-html","tag-site","tag-tutorial","tag-website"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1965","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=1965"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/1965\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=1965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=1965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=1965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}