diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:58 +0100 |
| commit | 68fc8e96a9629e73469ed457abd955e548ec670c (patch) | |
| tree | 8529ab9fe63d011f23c7f22ab5a4a1c5563fcaa4 /files/pt-br/learn/html | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.gz translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.tar.bz2 translated-content-68fc8e96a9629e73469ed457abd955e548ec670c.zip | |
unslug pt-br: move
Diffstat (limited to 'files/pt-br/learn/html')
21 files changed, 6179 insertions, 0 deletions
diff --git a/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html new file mode 100644 index 0000000000..e693b6fed8 --- /dev/null +++ b/files/pt-br/learn/html/howto/author_fast-loading_html_pages/index.html @@ -0,0 +1,135 @@ +--- +title: Dicas para criar páginas HTML de carregamento rápido +slug: Web/HTML/Dicas_para_criar_páginas_HTML_de_carregamento_rápido +tags: + - Performance +translation_of: Learn/HTML/Howto/Author_fast-loading_HTML_pages +--- +<p>Estas dicas são baseadas em conhecimento comum e experimentação.</p> +<p>Uma página web otimizada não apenas provê um site mais responsivo aos visitantes, como também reduz a carga sobre os servidores e a conexão com a Internet. Isso pode ser crucial para sites de grande volume ou sites que tenham um pico de tráfego devido a circunstâncias extraordinárias, como plantões de notícias urgentes.</p> +<p>Otimizar a performance do carregamento de páginas não serve apenas para o conteúdo que será visto por visitantes com linha discada ou aparelhos móveis. É igualmente importante para banda larga e pode levar a melhorias dramáticas até mesmo para seus visitantes com as mais rápidas conexões.</p> +<h2 id="Dicas" name="Dicas">Dicas</h2> +<h3 id="Reduza_o_peso_da_página" name="Reduza_o_peso_da_página">Reduza o peso da página</h3> +<p>O peso da página é, de longe, o fator mais importante na performance de seu carregamento.</p> +<p>Reduzir o peso da página através da eliminação de espaço em branco desnecessário e comentários, comumente conhecido como minimização, e mover scripts e CSS <em>inline</em> para arquivos externos pode melhorar a performance de download sem muita necessidade de outras mudanças na estrutura da página.</p> +<p>Ferramentas como <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> podem automaticamente cortar espaços em branco desnecessários e linhas vazias de um código HTML validado. Outras ferramentas podem "comprimir" JavaScript ao reformatar o código-fonte ou o obfuscando e substituindo identificadores longos por versões mais curtas.</p> +<h3 id="Minimize_o_número_de_arquivos" name="Minimize_o_número_de_arquivos">Minimize o número de arquivos</h3> +<p>Reduzir o número de arquivos referenciados por uma página diminui o número de conexões <a href="/en-US/docs/HTTP" title="en-US/docs/HTTP">HTTP</a> requeridas para realizar o download da página.</p> +<p>Dependendo das configurações de cache do <em>browser</em>, este pode enviar uma requisição <code>If-Modified-Since</code> ao servidor para cada arquivo CSS, JavaScript ou de imagem, perguntando se o arquivo foi modificado desde a última vez que foi baixado.</p> +<p>Ao reduzir o número de arquivos referenciados de dentro de uma página, reduz-se o tempo necessário para essas requisições serem enviadas e suas respostas recebidas.</p> +<p>Se você usa muitas imagens de fundo em seu CSS, pode reduzir o número de verificações HTTP combinando imagens em um único arquivo, o que é conhecido como um <em>sprite</em> de imagens. Então você apenas utiliza a mesma imagem cada vez que precisá-la, ajustando as coordenadas x/y apropriadamente. Essa técnica funciona melhor com elementos que terão dimensões limitadas, não sendo aplicável para todas as imagens. Contudo, o número menor de requisições HTTP e <em>caching</em> de uma única imagem devem ajudar a reduzir o tempo de carregamento.</p> +<p>Muito tempo gasto pesquisando quando foi a modificação mais recente de arquivos referenciados pode atrasar a exibição inicial de uma página, já que o <em>browser</em> deve verificar o momento de modificação para cada arquivo CSS ou JavaScript antes de carregar a página.</p> +<h3 id="Reduza_pesquisa_de_domínio" name="Reduza_pesquisa_de_domínio">Reduza pesquisa de domínio</h3> +<p>Já que cada domínio distinto demanda tempo durante uma pesquisa de DNS, o tempo de carregamento da página aumentará conforme o número de domínios distintos que aparecem em links de CSS e fontes de JavaScript e imagens.</p> +<p>Pode nem sempre ser prático, mas você deve sempre tomar cuidado para utilizar apenas o mínimo necessário de domínios diferentes nas suas páginas.</p> +<h3 id="Conteúdo_em_cache_reutilizado" name="Conteúdo_em_cache_reutilizado">Conteúdo em cache reutilizado</h3> +<p>Assegure que qualquer conteúdo que possa ser armazenado em cache o seja, e com tempos de expiração adequados.</p> +<p>Em especial, atente ao cabeçalho <code>Last-Modified</code>. Ele permite mecanismos de cache eficientes; através desse cabeçalho, informações sobre o arquivo que o agente de usuário quer carregar, como quando foi modificado da última vez, são transferidas. A maioria dos servidores web automaticamente anexam o cabeçalho <code>Last-Modified</code> a páginas estáticas (p. ex.: <code>.html</code>, <code>.css</code>), baseado na data de última modificação armazenada no sistema de arquivos. Com páginas dinâmicas (p. ex:<code>.php</code>, <code>.aspx</code>), isso não pode ser feito, e o cabeçalho não é enviado.</p> +<p>Então, para essas páginas que são geradas dinamicamente, alguma pesquisa adicional é benéfica. Isso vai salvar muito tempo em requisições nas páginas que normalmente não permitem armazenamento em cache.</p> +<p>Mais informações:</p> +<ol> + <li><a class="external" href="http://fishbowl.pastiche.org/2002/10/21/http_conditional_get_for_rss_hackers">Get HTTP Condicional para Hackers RSS</a></li> + <li><a class="external" href="http://annevankesteren.nl/archives/2005/05/http-304">HTTP 304: Not Modified</a></li> + <li><a class="external" href="http://www.cmlenz.net/archives/2005/05/on-http-last-modified-and-etag">Sobre o Last-Modified HTTP e ETag</a></li> +</ol> +<h3 id="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada" name="Estabeleça_a_ordem_dos_componentes_da_página_de_forma_otimizada">Estabeleça a ordem dos componentes da página de forma otimizada</h3> +<p>Baixe o conteúdo da página primeiro, junto com qualquer CSS ou JavaScript que pode ser requerido para sua exibição inicial, de modo que o usuário receba a resposta mais rápida possível durante o carregamento. Esse conteúdo é tipicamente texto, e portanto pode ser beneficiado por técnicas de compressão de texto durante o tráfego, permitindo uma resposta ainda mais rápida ao usuário.</p> +<p>Quaisquer elementos dinâmicos que requeiram que a página complete seu carregamento antes de serem usados devem ser inicialmente desabilitados, e apenas habilitados após o carregamento completo. Isso fará com que o JavaScript seja carregado após o conteúdo da página, o que melhorará a aparência geral do carregamento.</p> +<h3 id="Reduza_o_número_de_scripts" name="Reduza_o_número_de_scripts">Reduza o número de scripts <em>inline</em></h3> +<p>Scripts <em>inline</em> podem ser custosos para o carregamento, uma vez que o parser deve assumir que o script pode modificar a estrutura da página enquanto o processo de <em>parsing</em> está em andamento. Reduzir o número de scripts <em>inline</em> no geral e reduzir o uso de <code>document.write()</code> para a saída de conteúdo pode melhorar o carregamento da página. Use métodos <a href="/en-US/docs/AJAX" title="en-US/docs/AJAX">AJAX</a> modernos para manipular o conteúdo da página, ao invés de abordagens antigas baseadas em <code>document.write()</code>.</p> +<h3 id="Use_CSS_moderno_e_marcação_validada" name="Use_CSS_moderno_e_marcação_validada">Use CSS moderno e marcação validada</h3> +<p>O uso de CSS moderno reduz a quantidade de marcação, pode reduzir a necessidade de imagens, em termos de layout, e frequentemente substitui imagens de textos estilizados -- que "custam" muito mais do que o texto estilizado com CSS.</p> +<p>Usar marcações validadas tem outras vantagens. Primeiro, <em>browsers</em> não precisarão realizar correção de erros durante o <em>parsing</em> de HTML (isso é à parte da preocupação filosófica de permitir variação de formato na entrada do usuário, e então programaticamente "corrigir" ou normalizá-la; ou se, ao invés disso, forçar um formato de entrada rígido, sem tolerância a desvios).</p> +<p>Além do mais, marcação válida permite o livre uso de outras ferramentas que podem pré-processar páginas web. Por exemplo, <a class="external" href="http://tidy.sourceforge.net/">HTML Tidy</a> pode remover espaços em branco e tags finais opcionais; contudo, a ferramenta não será executada em uma página com erros graves de marcação.</p> +<h3 id="Divida_seu_conteúdo" name="Divida_seu_conteúdo">Divida seu conteúdo</h3> +<p>Layout de tabelas é um método legado que não deve mais ser empregado. Layouts utilizando blocos {{ HTMLElement("div") }} e, no futuro próximo, <a href="/en-US/docs/CSS/Using_CSS_multi-column_layouts" title="en-US/docs/CSS3_Columns">layout multi-colunas CSS3</a> ou <a href="/pt-BR/docs/Usando_caixas_flexiveis_css" title="pt-BR/docs/Usando_caixas_flexiveis_css">layout de caixas flexíveis CSS3</a>, devem ser utilizadas ao invés disso.</p> +<p>Tabelas ainda são consideradas marcações válidas, mas devem ser usadas para exibir dados tabulares. Para ajudar o browser a renderizar sua página mais rapidamente, você deve evitar aninhar suas tabelas.</p> +<p>Ao invés de realizar aninhamentos profundos como:</p> +<pre><TABLE> + <TABLE> + <TABLE> + ... + </TABLE> + </TABLE> +</TABLE></pre> +<p>use tabelas não-aninhadas ou divs, como em</p> +<pre><TABLE>...</TABLE> +<TABLE>...</TABLE> +<TABLE>...</TABLE> +</pre> +<p>Veja também: <a class="external" href="http://www.w3.org/TR/css3-multicol/" title="http://www.w3.org/TR/css3-multicol/">Especificações do layout multi-colunas CSS3</a> e <a class="external" href="http://www.w3.org/TR/css3-flexbox/" title="http://www.w3.org/TR/css3-flexbox/">layout de caixas flexíveis CSS3</a></p> +<h3 id="Especifique_tamanhos_para_imagens_e_tabelas" name="Especifique_tamanhos_para_imagens_e_tabelas">Especifique tamanhos para imagens e tabelas</h3> +<p>Se o <em>browser</em> puder imediatamente determinar a altura e/ou largura de suas imagens e tabelas, ele será capaz de exibir uma página sem ter que recalcular o fluxo do conteúdo. Isso não apenas acelera a exibição da página como previne mudanças irritantes no layout ao finalizar o carregamento. Por essa razão, <code>height</code> e <code>width</code> devem ser especificadas para imagens, sempre que possível.</p> +<p>Tabelas devem usar a combinação CSS selector:property:</p> +<pre> table-layout: fixed; +</pre> +<p>e devem especificar as larguras das colunas usando as tags HTML <code>COL</code> e <code>COLGROUP</code>.</p> +<h3 id="Escolha_bem_seus_requisitos_de_agente_de_usuário" name="Escolha_bem_seus_requisitos_de_agente_de_usuário">Escolha bem seus requisitos de agente de usuário</h3> +<p>Para atingir as maiores melhorias no design de páginas, tenha certeza de que requisitos de agente de usuário razoáveis estejam especificados para os projetos. Não espere que seu conteúdo apareça de forma perfeita, pixel por pixel, em todos os <em>browsers</em>, especialmente nos obsoletos.</p> +<p>Idealmente, seus requisitos básicos devem ser baseados em considerações sobre os <em>browsers</em> modernos que suportam os padrões relevantes. Isso pode incluir: Firefox 3.6+ em qualquer plataforma, Internet Explorer 8.0+ no Windows, Opera 10+ no Windows, e Safari 4 no Mac OS X.</p> +<p>Note, contudo, que muitas das dicas listadas neste artigo são técnicas de senso comum que se aplicam a qualquer agente-usuário, e podem ser aplicadas a qualquer página web, independentemente de requisitos de compatibilidade em <em>browsers</em>.</p> +<h2 id="Exemplo_de_estrutura_de_página" name="Exemplo_de_estrutura_de_página">Exemplo de estrutura de página</h2> +<p>· <code>HTML</code></p> +<dl> + <dd> + · <code>HEAD</code></dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>LINK </code>...<br> + Arquivos CSS requeridos para a aparência da página. Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + Arquivos JavaScript para funções <strong>requeridas</strong> durante o carregamento da página, sem qualquer DHTML que só pode ser executado após o carregamento completo.</dd> + <dd> + Minimize o número de arquivos para performance enquanto mantém JavaScript não-relacionado em arquivos separados para manutenção.</dd> + </dl> + </dd> +</dl> +<dl> + <dd> + · <code>BODY</code></dd> + <dd> + · Páginas de conteúdo visíveis ao usuário em pequenas divisões (tabelas / divs) que podem ser exibidas sem esperar a página inteira ser baixada.</dd> +</dl> +<dl> + <dd> + <dl> + <dd> + · <code>SCRIPT </code>...<br> + Quaisquer scripts que forem usados para realizar DHTML. Um script DHTML geralmente só pode ser executado após o carregamento completo da página e a inicialização de todos os objetos necessários. Não há necessidade de carregar esses scripts antes do conteúdo. Isso apenas desacelera a aparência inicial do carregamento da página.</dd> + <dd> + Minimize o número de arquivos para performance enquanto mantém CSS não-relacionado em arquivos separados para manutenção.</dd> + <dd> + Se uma ou mais imagens forem usadas para efeitos de <em>rollover</em>, você deve pré-carregá-las aqui após o conteúdo da página ter sido baixado.</dd> + </dl> + </dd> +</dl> +<h2 id="Use_async_and_defer_se_possível" name="Use_async_and_defer_se_possível">Use async and defer, se possível</h2> +<p>Faça com que scripts JavaScript sejam compatíveis tanto com <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> como <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">defer</a> e use <a href="https://developer.mozilla.org/en-US/docs/HTML/Element/script#Attributes" title="https://developer.mozilla.org/en-US/docs/HTML/Element/script">async</a> sempre que possível, especialmente se você tiver múltiplas tags de script.</p> +<p>Com isso, a página pode parar de renderizar enquanto o JavaScript ainda estiver sendo carregado. Do contrário, o <em>browser</em> não renderizará nada que estiver após as tags de script sem esses atributos.</p> +<p>Nota: Apesar desses atributos ajudarem muito na primeira vez que a página for carregada, você não pode confiar que vai funcionar em todos os <em>browsers</em>. Se você seguir todas as orientações para produzir bom código JavaScript, não há necessidade de alterá-lo.</p> +<h2 id="Links_Relacionados" name="Links_Relacionados">Links Relacionados</h2> +<ul> + <li>Livro: <a class="external" href="http://www.websiteoptimization.com/">"Speed Up Your Site" por Andy King</a></li> + <li>O excelente e muito completo <a class="external" href="http://developer.yahoo.com/performance/rules.html" title="http://developer.yahoo.com/performance/rules.html">Melhores Práticas para Acelerar Seu Web Site</a> (Yahoo!)</li> + <li>Ferramentas para analisar e otimizar a performance: <a href="https://developers.google.com/speed/pagespeed/" title="https://developers.google.com/speed/pagespeed/">Google PageSpeed</a></li> +</ul> +<div class="originaldocinfo"> + <h2 id="Informações_do_Documento_Original" name="Informações_do_Documento_Original">Informações do Documento Original</h2> + <ul> + <li>Autor(es): Bob Clary, Evangelista de Tecnologia, Netscape Communications</li> + <li>Última Data de Atualização: Publicado em 04 Abr 2003</li> + <li>Informações de Copyright: Copyright © 2001-2003 Netscape. Todos os direitos reservados.</li> + <li>Nota: Este artigo reeditado foi originalmente parte do site DevEdge.</li> + </ul> +</div> +<p> </p> diff --git a/files/pt-br/learn/html/howto/index.html b/files/pt-br/learn/html/howto/index.html new file mode 100644 index 0000000000..4d64f7d792 --- /dev/null +++ b/files/pt-br/learn/html/howto/index.html @@ -0,0 +1,150 @@ +--- +title: Use HTML para resolver problemas comuns +slug: Aprender/HTML/como-fazer +translation_of: Learn/HTML/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Os links a seguir apontam para soluções de problemas comuns que você precisará resolver utilizando HTML.</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Estrutura_Básica">Estrutura Básica</h3> + +<p>A aplicação mais básica de HTML é na estrutura de um documento. Se você está começando no HTML, deve começar por aqui.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document">Como criar um documento básico HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Divide_a_webpage_into_logical_sections">Como separar uma página web em seções lógicas</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#The_basics_headings_and_paragraphs">Como configurar uma estrutura adequada de cabeçalhos e parágrafos</a></li> +</ul> + +<h3 id="Semântica_básica_em_nível_de_texto">Semântica básica em nível de texto</h3> + +<p>O HTML se especializou em fornecer informação semântica para um documento, portanto o HTML responde muitas questões que você talvez tenha sobre a melhor maneira de passar sua mensagem em um documento.</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">Como criar uma lista de itens com HTML</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Como destacar ou enfatizar conteúdo</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Emphasis_and_importance">Como indicar que um texto é importante</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Representing_computer_code">Como mostrar código de computador com HTML</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#Annotating_images_with_figures_and_figure_captions">Como adicionar anotações em imagens e figuras</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Abbreviations">Como assinalar abreviaturas e torná-las inteligíveis</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting#Quotations">Como adicionar citações em páginas web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Define_terms_with_HTML">Como definir termos com HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Hiperlinks">Hiperlinks</h3> + +<p>Uma das principais atribuições do HTML é tornar a navegação mais fácil com {{Glossary("hyperlink", "hiperlinks")}}, que podem ser usados de diferentes formas:</p> + +<ul> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Como criar um hiperlink</a></li> + <li><a href="/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#Active_learning_creating_a_navigation_menu">Como criar um menu de navegação com HTML </a></li> +</ul> + +<h3 id="Imagens_multimídia">Imagens & multimídia</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Images_in_HTML#How_do_we_put_an_image_on_a_webpage">Como adicionar imagens em uma página web</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Como adicionar conteúdo de vídeo em uma página web</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Como adicionar conteúdo de áudio em uma página web</a></li> +</ul> + +<h3 id="Scripts_estilos">Scripts & estilos</h3> + +<p>O HTML só configura a estrutura do documento. Para resolver problemas de apresentação, use o {{glossary("CSS")}} ou use scripts para tornar sua página interativa.</p> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">Como usar CSS em uma página web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_JavaScript_within_a_webpage">Como usar JavaScript em uma página web</a></li> +</ul> + +<h3 id="Conteúdo_embutido">Conteúdo embutido</h3> + +<ul> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">Como embutir uma página web dentro de outra página web</a></li> + <li><a href="/en-US/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#The_%3Cembed%3E_and_%3Cobject%3E_elements">Como adicionar conteúdo em Flash dentro de uma página</a></li> +</ul> +</div> +</div> + +<h2 id="Problemas_incomuns_ou_avançados">Problemas incomuns ou avançados</h2> + +<p>Além do básico, o HTML é muito rico e oferece recursos avançados para resolver problemas complexos. Estes artigos lhe ajudam a lidar com casos de uso menos comuns que você possa encontrar:</p> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Formulários">Formulários</h3> + +<p>Formulários são uma estrutura complexa em HTML, criada para enviar dados de uma página web para um servidor web. Nós lhe encorajamos a conhecer nosso <a href="/en-US/docs/Web/Guide/HTML/Forms">guia completo</a>. Eis os tópicos onde você deve começar:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form">Como criar um formulário Web simples</a></li> + <li><a href="/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form">Como estruturar um formulário Web</a></li> +</ul> + +<h3 id="Informação_tabular">Informação tabular</h3> + +<p>Algumas informações, chamadas de dados tabulares, precisam ser organizadas em tabelas com colunas e linhas. Esta é uma das estruturas HTML mais complexas, e dominá-la não é fácil:</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_a_data_spreadsheet">Como criar uma planilha de dados</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Make_HTML_tables_accessible">Como tornar as tabelas HTML acessíveis</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Optimize_HTML_table_rendering">Como otimizar a renderização de tabelas HTML</a></li> +</ul> + +<h3 id="Representação_de_dados">Representação de dados</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTMLHowto/Represent_numeric_values_with_HTML">Como representar valores numéricos em HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Use_data_attributes">Como usar atributos de dados</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Associate_human_readable_content_with_arbitrary_computer_data_structures">Como associar conteúdo legível por humanos com estruturas arbitrárias de dados</a></li> +</ul> + +<h3 id="Interatividade">Interatividade</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_collapsible_content_with_HTML">Como criar conteúdo recolhível em HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_context_menus_to_a_webpage">Como adicionar menus contextuais em uma página web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Create_dialog_boxes_with_HTML">Como criar caixas de diálogo em HTML</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Semântica_avançada_de_texto">Semântica avançada de texto</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Take_control_of_HTML_line_breaking">Como controlar quebras de linha em HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Mark_text_insertion_and_deletion">Como destacar mudanças (texto adicionado ou removido)</a></li> +</ul> + +<h3 id="Imagens_multimídia_avançados">Imagens & multimídia avançados</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Como adicionar imagens responsivas em uma página web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Como adicionar imagens vetoriais em uma página web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Como adicionar um mapa de links em uma imagem</a></li> +</ul> + +<h3 id="Internacionalização">Internacionalização</h3> + +<p>HTML não é unilíngue. A linguagem fornece ferramentas para lidar com problemas comuns de internacionalização.</p> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Add_multiple_languages_into_a_single_webpage">Como adicionar múltiplos idiomas em uma única página web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Handle_Japanese_ruby_characters">Como lidar com caracteres ruby em japonês</a></li> + <li><a href="/en-US/docs/Learn/HTML/Howto/Display_time_and_date_with_HTML">Como mostrar data e hora em HTML</a></li> +</ul> + +<h3 id="Performance">Performance</h3> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Howto/Author_fast-loading_HTML_pages">Como criar páginas HTML que carregam rápido</a></li> +</ul> +</div> +</div> + +<p><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span> </p> diff --git a/files/pt-br/learn/html/howto/use_data_attributes/index.html b/files/pt-br/learn/html/howto/use_data_attributes/index.html new file mode 100644 index 0000000000..20daf02206 --- /dev/null +++ b/files/pt-br/learn/html/howto/use_data_attributes/index.html @@ -0,0 +1,72 @@ +--- +title: Utilizando data attributes +slug: Web/Guide/HTML/Using_data_attributes +translation_of: Learn/HTML/Howto/Use_data_attributes +--- +<p>O <a href="/en-US/docs/Web/Guide/HTML/HTML5" title="/en-US/docs/Web/Guide/HTML/HTML5">HTML5</a> foi criado pensando na extensibilidade dos dados que precisam ser associados a um determinado elemento mas não necessariamente tem um significado definido. <a href="/en-US/docs/Web/HTML/Global_attributes#data-*">Atributos data-* </a>nos permite armazenar informações extras em elementos HTML padrões e semânticos, sem a necessidades de hacks como <a href="/en-US/docs/Web/API/Element.classList">classList</a>, atributos fora do padrão, propriedades extras no DOM ou o método depreciado <a href="/en-US/docs/Web/API/Node.setUserData">setUserData</a>.</p> + +<h2 id="Sintaxe_HTML">Sintaxe HTML</h2> + +<p>A sintaxe é simples. Qualquer atributo de qualquer elemento no qual o nome do atributo inicia com <code>data-</code> é um atributo data. Digamos que você possui um article e quer armazenar informações extras que não possuem nenhuma representação visual. Use atributos data para isso:</p> + +<pre class="brush: html"><article + id="electriccars" + data-columns="3" + data-index-number="12314" + data-parent="cars"> +... +</article></pre> + +<h2 id="Acesso_no_JavaScript">Acesso no JavaScript</h2> + +<p>Ler os valores destes atributos via <a href="/en-US/docs/Web/JavaScript" title="/en-US/docs/Web/JavaScript">JavaScript</a> é muito simples também. Você pode lê-los usando {{domxref("Element.getAttribute", "getAttribute()")}} com o nome html completo, mas a forma padrão provê uma alternativa mais simples: um {{domxref("DOMStringMap")}} pode ser lido através da propriedade {{domxref("HTMLElement.dataset", "dataset")}}.</p> + +<p>Para obter o atributo data através do objeto <code>dataset</code>, acesse a propriedade utilizando a parte do nome do atributo após o prefixo <code>data-</code> (note que o hífen é convertido para camelCase).</p> + +<pre class="brush: js">var article = document.getElementById('electriccars'); + +article.dataset.columns // "3" +article.dataset.indexNumber // "12314" +article.dataset.parent // "cars"</pre> + +<p>Cada propriedade é uma String e pode ser lida e escrita. No exemplo acima a atribuição <code>article.dataset.columns = 5</code> iria alterar esse atributo para "5".</p> + +<h2 id="Acesso_no_CSS">Acesso no CSS</h2> + +<p>Note que os atributos data são atributos em HTML puro, e você pode inclusive acessá-los via <a href="/en-US/docs/Web/CSS" title="/en-US/docs/Web/CSS">CSS</a>. Por exemplo, para mostrar o elemento pai em um artigo, você pode usar <a href="/en-US/docs/Web/CSS/content" title="/en-US/docs/Web/CSS/content">conteúdo gerado</a> em CSS com a função {{cssxref("attr")}}:</p> + +<pre class="brush: css">article::before { + content: attr(data-parent); +}</pre> + +<p>Pode-se também usar os <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute_selectors">seletores de atributos</a> em CSS para alterar estilos de acordo com o atributo data:</p> + +<pre class="brush: css">article[data-columns='3'] { + width: 400px; +} +article[data-columns='4'] { + width: 600px; +}</pre> + +<p>Pode-se tudo isso em funcionamento neste <a href="http://jsbin.com/ujiday/2/edit">exemplo JSBin</a>.</p> + +<p>Atributos data também podem ser utilizados para conter informações que mudam constantemente, como a pontuação em um jogo. Usando seletores CSS e acesso com JavaScript permite que se construa efeitos excelentes sem ter que escrever suas próprias rotinas de display. Veja <a href="http://www.youtube.com/watch?v=On_WyUB1gOk">esta tela</a> para um exemplo utilizando conteúdo gerado e transições CSS (<a href="http://jsbin.com/atawaz/3/edit">exemplo JSBin</a>).</p> + +<p><span style="line-height: 16.7999992370605px;">Uma vez que valores data são strings, todos os valores devem estar entre aspas ou então a estilização não fará efeito.</span></p> + +<h2 id="Issues">Issues</h2> + +<p>Não armazene conteúdo que deve estar visível e acessível nos atributos data porque tecnologias assistivas podem não acessá-los. Além disso, motores de busca podem não indexar os valores dos atributos data. </p> + +<p>Os principais issues a serem considerados são com suporte e performance no Internet Explorer. O Internet Explorer 11+ provê suporte para o padrão, mas todas as versões anteriores <a href="http://caniuse.com/#feat=dataset">não suportam <code>dataset</code></a>. Para suporte ao IE 10 e anteriores, deve-se acessar atributos data através de {{domxref("Element.getAttribute", "getAttribute()")}} . E ainda, a <a href="http://jsperf.com/data-dataset">performance de leitura dos atributos data</a> é ruim, comparada com o armazenamento em um data warehouse JS. O uso de <code>dataset</code> é até pior que a leitura dos dados com <code>getAttribute()</code>.</p> + +<p>Apesar do que foi colocado, para metadados customizados associados a elementos, eles são uma ótima solução.</p> + +<p>No Firefox 49.0.2 (e talvez em versões anteriores/posteriores), os atributos data que excederem 1022 caracteres não serão lidos pelo Javascript (EcmaScript 4).</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li>Este artigo é uma adaptação de <a href="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/" title="https://hacks.mozilla.org/2012/10/using-data-attributes-in-javascript-and-css/">Usando atributos data em JavaScript e CSS no hacks.mozilla.org</a>.</li> + <li><a href="http://www.sitepoint.com/use-html5-data-attributes/">Como usar atributos data em HTML5</a> (Sitepoint)</li> +</ul> diff --git a/files/pt-br/learn/html/index.html b/files/pt-br/learn/html/index.html new file mode 100644 index 0000000000..498ba9ab01 --- /dev/null +++ b/files/pt-br/learn/html/index.html @@ -0,0 +1,54 @@ +--- +title: Estruturando a web com HTML +slug: Aprender/HTML +tags: + - Aprender + - Guía + - HTML + - Iniciante + - Introdução + - Tópico +translation_of: Learn/HTML +--- +<p class="summary">{{LearnSidebar}}</p> + +<p class="summary">Para construir websites, você deve conhecer sobre {{Glossary('HTML')}} — a tecnologia fundamental usada para definir a estrutura de uma página web. HTML é usado para especificar se o conteúdo da web deve ser reconhecido como um parágrafo, uma lista, um título, um link, uma imagem, um visualizador multimídia, um formulário ou um dos muitos outros elementos disponíveis ou até mesmo um novo elemento definido por você.</p> + +<h2 id="Percurso_de_aprendizagem">Percurso de aprendizagem</h2> + +<p>Você deve, preferencialmente, iniciar sua jornada aprendendo HTML. Comece lendo <a href="/pt-BR/docs/HTML/Introduction">Introdução ao HTML</a>. Você pode então passar a aprender sobre tópicos mais avançados, tais como:</p> + +<ul> + <li><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/CSS">CSS </a> e como usá-lo para estilizar o HTML (como por exemplo alterar o tamanho e a fonte usados, adicionar bordas e sombras, definir o layout da sua página com várias colunas, adicionar animações e outros efeitos visuais).</li> + <li><a href="/pt-BR/docs/Web/JavaScript">JavaScript</a> e como usá-lo para adicionar funcionalidade dinâmica para páginas da web (como por exemplo encontrar sua localização e exibí-la em um mapa, fazer com que elementos da interface gráfica apareçam/desapareçam quando se pressiona um botão, salvar os dados do usuário localmente em seus computadores e muito mais).</li> +</ul> + +<p>Antes de iniciar este tópico, você deve pelo menos ter uma familiaridade básica com o uso de computadores e com a web (por exemplo: apenas olhando para ele, consumindo o conteúdo). Você deve ter um ambiente básico de trabalho configurado como detalhado em <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a> e entender como criar e gerenciar arquivos, como detalhado em <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a> — ambos fazem parte do nosso módulo para iniciantes <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web"> Introdução à Web</a>.</p> + +<p>Recomenda-se que você complete o módulo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web">Introdução à Web</a> antes de tentar este tópico, mas isto não é absolutamente necessário; muito do que é abordado no artigo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/HTML_basico">HTML básico</a> é também abordado no nosso módulo <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML">Introdução ao HTML</a>, embora com muito mais detalhes.</p> + +<h2 id="Módulos">Módulos</h2> + +<p>Este tópico contém os seguintes módulos, em uma ordem sugerida para trabalhar com eles. Você deve definitivamente começar com o primeiro módulo.</p> + +<dl> + <dt><a href="/pt-BR/docs/HTML/Introduction">Introdução ao HTML </a></dt> + <dd>Este módulo define o cenário, introduzindo você a conceitos e sintaxe importantes, procurando aplicar HTML ao texto, como criar hiperlinks e como usar HTML para estruturar uma página da web.</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Multimedia_and_embedding">Multimídia e incorporação </a></dt> + <dd>Este módulo explora como usar HTML para incluir multimídia em suas páginas web, incluindo as diferentes formas que as imagens podem ser inseridas e como incorporar vídeo, áudio e até mesmo outras páginas inteiras.</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Tables">Tabelas HTML</a></dt> + <dd>Representar dados tabulares em uma página da web de maneira compreensível e {{glossary("Accessibility", "acessível")}} pode ser um desafio. Este módulo abrange a marcação básica de tabelas, além de outros recursos mais complexos, tais como a implementação de legendas e resumos.</dd> +</dl> + +<h2 id="Resolvendo_problemas_comuns_com_HTML">Resolvendo problemas comuns com HTML</h2> + +<p><a href="/pt-BR/docs/Aprender/HTML/como-fazer">Usar HTML para resolver problemas comuns</a> fornece links para seções com conteúdos que explicam como usar HTML para resolver problemas muito comuns ao criar uma página da web: lidar com títulos, adicionar imagens ou vídeos, enfatizar conteúdo, criar um formulário básico, etc.</p> + +<h2 id="Veja_também">Veja também</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Web/Guide/HTML/Forms">Formulários HTML</a></dt> + <dd><span class="tlid-translation translation" lang="pt"><span title="">Este módulo fornece uma série de artigos que ajudarão você a dominar o essencial dos formulários da web.</span> <span title="">Os formulários web são uma ferramenta muito poderosa para interagir com os usuários - geralmente são usados para coletar dados dos usuários ou permitir que eles controlem uma interface do usuário.</span> <span title="">No entanto, por razões históricas e técnicas, nem sempre é óbvio como usá-las em todo o seu potencial.</span> <span title="">Abordaremos todos os aspectos essenciais dos formulários da Web, incluindo marcação de sua estrutura HTML, controles de estilo, validação de dados e envio de dados ao servidor.</span></span></dd> + <dt><a href="/pt-BR/docs/Web/HTML">HTML (Linguagem de Marcação de HiperTexto)</a></dt> + <dd>O principal ponto de entrada para a documentação HTML no MDN, incluindo referências detalhadas de elementos e atributos — se você quiser saber quais atributos um elemento possui ou quais valores tem um atributo, por exemplo, este é um ótimo lugar para começar.</dd> +</dl> diff --git a/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html new file mode 100644 index 0000000000..3b5365b074 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/advanced_text_formatting/index.html @@ -0,0 +1,481 @@ +--- +title: Formatação avançada de texto +slug: Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto +tags: + - Aprender + - Guía + - HTML + - Texto + - abreviação + - citar + - lista de descrição + - semântico +translation_of: Learn/HTML/Introduction_to_HTML/Advanced_text_formatting +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p> +Existem muitos outros elementos em HTML para formatação de texto, que não tratamos no artigo de <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a>. Os elementos descritos neste artigo são menos conhecidos, mas ainda são úteis para conhecer (e isso ainda não é uma lista completa de todos os elementos). Aqui, você aprenderá a marcar citações, listas de descrição, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contato e muito mais. +</p> + +<p class="summary"></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Familiaridade básica em HTML, conforme abordado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Introdução ao HTML</a>. Formatação de texto em HTML, conforme abordado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentais de texto em HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender a usar elementos HTML menos conhecidos para marcar recursos semânticos avançados.</td> + </tr> + </tbody> +</table> + +<h2 id="Listas_de_descrição">Listas de descrição</h2> + +<p>Nos Fundamentos do texto em HTML, falamos sobre como <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML/#Listas">marcar as listas básicas</a> em HTML, mas não mencionamos o terceiro tipo de lista que ocasionalmente irá encontrar - listas de descrição. O objetivo dessas listas é marcar um conjunto de itens e suas descrições associadas, como termos e definições, ou perguntas e respostas. Vejamos um exemplo de um conjunto de termos e definições:</p> + +<pre class="notranslate">solilóquio +No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens). +monólogo +No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes. +aparte +No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.</pre> + +<p>As listas de descrição usam um invólucro diferente dos outros tipos de lista — {{htmlelement("dl")}}; além disso, cada termo está envolvido em um {{htmlelement("dt")}} (termo de descrição) elemento, e cada descrição está envolvida em um {{htmlelement("dd")}} (definição de descrição) elemento. Vamos terminar marcando nosso exemplo:</p> + +<pre class="brush: html notranslate"><dl> + <dt>solilóquio</dt> + <dd>No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).</dd> + <dt>monólogo</dt> + <dd>No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.</dd> + <dt>aparte</dt> + <dd>No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.</dd> +</dl></pre> + +<p>Os estilos padrões do navegador exibirão as listas com as descrições indentadas um pouco dos termos. Os estilos da MDN seguem esta convenção de forma bastante parecida, mas também enfatizam os termos, para uma definição extra.</p> + +<dl> + <dt>solilóquio</dt> + <dd>No drama, onde um personagem fala a si mesmo, representando seus pensamentos ou sentimentos internos e no processo, transmitindo-os ao público (mas não a outros personagens).</dd> + <dt>monólogo</dt> + <dd>No drama, onde um personagem fala seus pensamentos em voz alta para compartilhá-los com o público e com outros personagens presentes.</dd> + <dt>aparte</dt> + <dd>No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.</dd> +</dl> + +<p>Observe que é permitido ter um único termo com múltiplas descrições, por exemplo:</p> + +<dl> + <dt>aparte</dt> + <dd>No drama, onde um personagem compartilha um comentário apenas com o público para efeito humorístico ou dramático. Isso geralmente é um sentimento, pensamento ou parte de informação de fundo adicional.</dd> + <dd>Por escrito, uma seção de conteúdo que está relacionada ao tópico atual, mas não se encaixa diretamente no fluxo principal de conteúdo, então é apresentado próximo (muitas vezes em uma caixa ao lado).</dd> +</dl> + +<h3 id="Aprendizagem_ativa_marcando_um_conjunto_de_definições">Aprendizagem ativa: marcando um conjunto de definições</h3> + +<p>É hora de pôr as mãos nas listas de descrição. Adicione elementos ao texto bruto no campo de <em>Entrada</em> para que ele se pareça como uma lista de descrição no campo <em>Saída</em>. Você pode tentar usar seus próprios termos e descrições, se quiser.</p> + +<p>Se você cometer um erro, sempre pode reiniciá-lo usando o botão 'Limpar'. Se ficar realmente preso, pressione o botão <em>'Mostrar solução</em>' para ver a resposta.</p> + +<div class="hidden"> +<h6 id="Código_reproduzível">Código reproduzível</h6> + +<pre class="brush: html notranslate"><h2>Entrada</h2> +<textarea id="code" class="input">Bacon +A cola que liga o mundo em conjunto. +Ovos +A cola que une o bolo juntos. +Café +A bebida que faz correr o mundo pela manhã. +Uma cor castanho claro.</textarea> +<h2>Saída</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Limpar" /> + <input id="solution" type="button" value="Mostrar solução" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<dl>\n <dt>Bacon</dt>\n <dd>The glue that binds the world together.</dd>\n <dt>Eggs</dt>\n <dd>The glue that binds the cake together.</dd>\n <dt>Coffee</dt>\n <dd>The drink that gets the world running in the morning.</dd>\n <dd>A light brown color.</dd>\n</dl>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h2 id="Cotações">Cotações</h2> + +<p>HTML também possui recursos disponíveis para marcação de cotações. Qual elemento você pode usar? Depende se está marcando um bloco ou uma cotação em linha.</p> + +<h3 id="Blockquotes">Blockquotes</h3> + +<p>Se uma seção de conteúdo em nível de bloco (seja um parágrafo, vários parágrafos, uma lista, etc.) for citada em algum outro lugar, você deverá envolvê-la em um elemento <blockquote> para indicar isso e incluir um URL apontando para a fonte da citação dentro de um atributo cite. Por exemplo, a marcação a seguir é obtida da página do elemento <code><blockquote></code> do MDN:</p> + +<pre class="brush: html notranslate"><p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block +Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p></pre> + +<p>Para transformar isso em uma cotação em bloco, faríamos assim:</p> + +<pre class="brush: html notranslate"><blockquote cite="/en-US/docs/Web/HTML/Element/blockquote"> + <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block + Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> +</blockquote></pre> + +<p>O estilo padrão do navegador renderiza isso como um parágrafo recuado, como um indicador de que é uma citação. O MDN faz isso, mas também, adiciona um estilo extra:</p> + +<blockquote cite="/en-US/docs/Web/HTML/Element/blockquote"> +<p>O <strong>Elemento HTML <code><blockquote></code> </strong>(or <em>HTML Block Quotation Element</em>) indica que o texto em anexo é uma cotação estendida.</p> +</blockquote> + +<h3 id="Cotações_em_linha">Cotações em linha</h3> + +<p>As cotações embutidas funcionam exatamente da mesma maneira, exceto pelo uso do elemento {{htmlelement("q")}}. Por exemplo, o bit de marcação abaixo contém uma cotação da página MDN <q>:</p> + +<pre class="brush: html notranslate"><p>The quote element — <code>&lt;q&gt;</code> — is <q cite="/en-US/docs/Web/HTML/Element/q">intended +for short quotations that don't require paragraph breaks.</q></p></pre> + +<p>O estilo padrão do navegador renderiza isso como texto normal entre aspas para indicar uma cotação, assim:</p> + +<p>O elemento de cotação — <code><q></code> — é "destinado a citações curtas que não exigem quebras de parágrafo".</p> + +<h3 id="Citações">Citações</h3> + +<p>O conteúdo do atributo {{htmlattrxref("cite","blockquote")}} parece útil, mas, infelizmente, navegadores, leitores de tela etc. não fazem muito uso dele. Não há como fazer com que o navegador exiba o conteúdo de <code>cite</code>, sem escrever sua própria solução usando JavaScript ou CSS. Se você deseja disponibilizar a fonte da cotação na página, uma maneira melhor de marcá-la é colocar o elemento {{htmlelement("cite")}} próximo ao elemento quote. Isso realmente tem o objetivo de conter o nome da fonte da citação — ou seja, o nome do livro ou o nome da pessoa que disse a citação — mas não há razão para que você não possa vincular o texto dentro de <code><cite></code> à citação fonte de alguma forma:</p> + +<pre class="brush: html notranslate"><p>According to the <a href="/en-US/docs/Web/HTML/Element/blockquote"> +<cite>MDN blockquote page</cite></a>: +</p> + +<blockquote cite="/en-US/docs/Web/HTML/Element/blockquote"> + <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block + Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p> +</blockquote> + +<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="/en-US/docs/Web/HTML/Element/q">intended +for short quotations that don't require paragraph breaks.</q> -- <a href="/en-US/docs/Web/HTML/Element/q"> +<cite>MDN q page</cite></a>.</p></pre> + +<p>As citações são estilizadas em fonte itálica por padrão. Você pode ver esse código funcionando em nosso exemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/quotations.html">quotations.html</a>.</p> + +<h3 id="Aprendizado_ativo_quem_disse_isso">Aprendizado ativo: quem disse isso?</h3> + +<p>Hora de outro exemplo de aprendizado ativo! Neste exemplo, gostaríamos que você:</p> + +<ol> + <li>Transforme o parágrafo do meio em uma citação em bloco, que inclui um atributo <code>cite</code>.</li> + <li>Transforme parte do terceiro parágrafo em uma cotação embutida, que inclui um atributo de <code>cite</code>.</li> + <li>Inclua um elemento <code><cite></code> para cada link.</li> +</ol> + +<p>Pesquise on-line para encontrar fontes de cotação apropriadas.</p> + +<p>Se você cometer um erro, sempre poderá redefini-lo usando o botão 'Limpar'. Se você realmente ficar atolado, pressione o botão 'Mostrar solução' para ver a resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Entrada</h2> +<textarea id="code" class="input"><p>Hello and welcome to my motivation page. As Confucius once said:</p> + +<p>It does not matter how slowly you go as long as you do not stop.</p> + +<p>I also love the concept of positive thinking, and The Need To Eliminate Negative Self Talk +(as mentioned in Affirmations for Positive Thinking.)</p></textarea> +<h2>Saída</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Limpar" /> + <input id="solution" type="button" value="Mostrar solução" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius</cite></a> once said:</p>\n\n<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html">\n <p>It does not matter how slowly you go as long as you do not stop.</p>\n</blockquote>\n\n<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com/index.htm">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com/index.htm"><cite>Affirmations for Positive Thinking</cite></a>.)</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="Abreviações">Abreviações</h2> + +<p>Outro elemento bastante comum que você encontrará ao olhar na Web é o {{htmlelement("abbr")}} — usado para contornar uma abreviação ou sigla e fornecer uma expansão completa do termo (incluído em um atributo {{htmlattrxref("title")}}.) Vejamos alguns exemplos</p> + +<pre class="notranslate"><p>Usamos <abbr title="Hypertext Markup Language">HTML</abbr> para estruturar nossos documentos da web.</p> + +<p>Acho que o <abbr title="Reverendo">Rev.</abbr> Green fez isso na cozinha com a motosserra.</p></pre> + +<p>Elas aparecerão da seguinte forma (a expansão aparecerá em uma dica de ferramenta quando o termo passar o mouse):</p> + +<p>Usamos <abbr title="Hypertext Markup Language">HTML</abbr> para estruturar nossos documentos da web.</p> + +<p>Acho que o <abbr title="Reverend">Rev.</abbr> Green fez isso na cozinha com a motosserra.</p> + +<div class="note"> +<p><strong>Note</strong>: Há outro elemento, {{htmlelement("acronym")}}, que basicamente faz a mesma coisa que <code><abbr></code>, e foi projetado especificamente para acrônimos, em vez de abreviações. Isso, no entanto, caiu em desuso — não era suportado em navegadores nem o <code><abbr></code>, e tem uma função semelhante que foi considerado inútil ter os dois. Apenas use <code><abbr></code>.</p> +</div> + +<h3 id="Aprendizado_ativo_marcando_uma_abreviação">Aprendizado ativo: marcando uma abreviação</h3> + +<p>Para esta tarefa simples de aprendizado ativo, gostaríamos que você simplesmente marque uma abreviação. Você pode usar nossa amostra abaixo ou substituí-la por uma de sua preferência.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Entrada</h2> +<textarea id="code" class="input"><p>NASA sure does some exciting work.</p></textarea> +<h2>Saída</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css notranslate">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 5em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<p><abbr title="National Aeronautics and Space Administration">NASA</abbr> sure does some exciting work.</p>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 350) }}</p> + +<h2 id="Marcando_detalhes_de_contato">Marcando detalhes de contato</h2> + +<p>O HTML possui um elemento para marcar os detalhes do contato — {{htmlelement("address")}}. Isso simplesmente envolve seus detalhes de contato, por exemplo:</p> + +<pre class="brush: html notranslate"><address> + <p>Chris Mills, Manchester, The Grim North, UK</p> +</address></pre> + +<p>Porém, uma coisa a se lembrar é que o elemento <address> destina-se a marcar os detalhes de contato da pessoa que escreveu o documento HTML e não qualquer endereço. Portanto, o exposto acima só seria bom se Chris tivesse escrito o documento em que a marcação aparece. Observe, que, algo assim também seria bom:</p> + +<pre class="brush: html notranslate"><address> + <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p> +</address></pre> + +<h2 id="Sobrescrito_e_subscrito">Sobrescrito e subscrito</h2> + +<p>Ocasionalmente, você precisará usar sobrescrito e subscrito ao marcar itens como datas, fórmulas químicas e equações matemáticas para que eles tenham o significado correto. Os elementos {{htmlelement("sup")}} e {{htmlelement("sub")}} manipulam esse trabalho. Por exemplo:</p> + +<pre class="brush: html notranslate"><p>My birthday is on the 25<sup>th</sup> of May 2001.</p> +<p>Caffeine's chemical formula is C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> +<p>If x<sup>2</sup> is 9, x must equal 3 or -3.</p></pre> + +<p>A saída desse código é assim:</p> + +<p>Meu aniversário é no dia 25 de maio de 2001.</p> + +<p>A fórmula química da cafeína é C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p> + +<p>Se x<sup>2</sup> é 9, x deve ser igual a 3 ou -3.</p> + +<h2 id="Representando_código_de_computador">Representando código de computador</h2> + +<p>Existem vários elementos disponíveis para marcar código de computador usando HTML:</p> + +<ul> + <li>{{htmlelement("code")}}: Para marcar partes genéricas de código de computador.</li> + <li>{{htmlelement("pre")}}: Para reter espaço em branco (geralmente blocos de código) — se você usar recuo ou espaço em branco em excesso no seu texto, os navegadores o ignorarão e você não o verá na sua página renderizada. Se você envolver o texto nas tags <code><pre></pre></code> seu espaço em branco será renderizado de forma idêntica à maneira como você o vê no seu editor de texto.</li> + <li>{{htmlelement("var")}}: Para marcar especificamente nomes de variáveis.</li> + <li>{{htmlelement("kbd")}}: Para marcar a entrada do teclado (e outros tipos) inserida no computador.</li> + <li>{{htmlelement("samp")}}: Para marcar a saída de um programa de computador.</li> +</ul> + +<p>Vejamos alguns exemplos. Você deve tentar brincar com eles (tente pegar uma cópia do nosso arquivo de exemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/advanced-text-formatting/other-semantics.html">other-semantics.html</a>):</p> + +<pre class="brush: html notranslate"><pre><code>var para = document.querySelector('p'); + +para.onclick = function() { + alert('Owww, stop poking me!'); +}</code></pre> + +<p>You shouldn't use presentational elements like <code>&lt;font&gt;</code> and <code>&lt;center&gt;</code>.</p> + +<p>In the above JavaScript example, <var>para</var> represents a paragraph element.</p> + + +<p>Select all the text with <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd>.</p> + +<pre>$ <kbd>ping mozilla.org</kbd> +<samp>PING mozilla.org (63.245.215.20): 56 data bytes +64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre></pre> + +<p>O código acima terá a seguinte aparência:</p> + +<p>{{ EmbedLiveSample('Representing_computer_code','100%',300) }}</p> + +<h2 id="Marcando_horários_e_datas">Marcando horários e datas</h2> + +<p>O HTML também fornece o elemento {{htmlelement("time")}} para marcar horários e datas em um formato legível por máquina. Por exemplo:</p> + +<pre class="brush: html notranslate"><time datetime="2016-01-20">20 January 2016</time></pre> + +<p>Por que isso é útil? Bem, existem muitas maneiras diferentes pelas quais os humanos escrevem datas. A data acima pode ser escrita como:</p> + +<ul> + <li>20 January 2016</li> + <li>20th January 2016</li> + <li>Jan 20 2016</li> + <li>20/01/16</li> + <li>01/20/16</li> + <li>The 20th of next month</li> + <li>20e Janvier 2016</li> + <li>2016年1月20日</li> + <li>And so on</li> +</ul> + +<p>Mas essas formas diferentes não podem ser facilmente reconhecidas pelos computadores — e se você quiser pegar automaticamente as datas de todos os eventos em uma página e inseri-las em um calendário? O elemento {{htmlelement("time")}} permite anexar uma data/hora inequívoca e legível por máquina para esse fim.</p> + +<p>O exemplo básico acima fornece apenas uma data legível por máquina simples, mas existem muitas outras opções possíveis, por exemplo:</p> + +<pre class="brush: html notranslate"><!-- Data simples padrão --> +<time datetime="2016-01-20">20 January 2016</time> +<!-- Apenas ano e mês --> +<time datetime="2016-01">January 2016</time> +<!-- Just month and day --> +<time datetime="01-20">20 January</time> +<!-- Apenas tempo, horas e minutos --> +<time datetime="19:30">19:30</time> +<!-- Você pode fazer segundos e milissegundos também! --> +<time datetime="19:30:01.856">19:30:01.856</time> +<!-- Data e hora --> +<time datetime="2016-01-20T19:30">7.30pm, 20 January 2016</time> +<!-- Data e hora com compensação de fuso horário --> +<time datetime="2016-01-20T19:30+01:00">7.30pm, 20 January 2016 is 8.30pm in France</time> +<!-- Chamando um número de semana específico --> +<time datetime="2016-W04">The fourth week of 2016</time></pre> + +<h2 id="Resumo">Resumo</h2> + +<p>Isso marca o fim de nosso estudo da semântica de texto HTML. Lembre-se de que o que você viu durante este curso não é uma lista exaustiva de elementos de texto HTML — queríamos tentar cobrir o essencial, e alguns dos mais comuns que você verá na natureza, ou pelo menos podem achar interessantes. Para encontrar muito mais elementos HTML, você pode dar uma olhada no nosso <a href="/pt-BR/docs/Web/HTML/Element">HTML element reference</a> (a seção <a href="/pt-BR/docs/Web/HTML/Element#Semânticas_textuais_inline">Inline text semantics</a> seria um ótimo ponto de partida.) No próximo artigo, examinaremos os elementos HTML que você usaria para estruturar as diferentes partes de um documento HTML.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="Neste_módulo">Neste módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Introdução ao HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">O que tem na cabeça? Metadados em HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Fundamentos de texto HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Criando hiperlinks</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Formatação avançada de texto</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Estrutura de documentos e sites</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Depurando HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marcando uma carta</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Estruturando uma página de conteúdo</a></li> +</ul> diff --git a/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html new file mode 100644 index 0000000000..1abbfa20c4 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/creating_hyperlinks/index.html @@ -0,0 +1,324 @@ +--- +title: Criando hyperlinks +slug: Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks +tags: + - Guía + - HTML + - HTTP + - Iniciante + - Link + - URL + - absoluto + - href + - hyperlinks + - relativo +translation_of: Learn/HTML/Introduction_to_HTML/Creating_hyperlinks +--- +<div> +<p>{{LearnSidebar}}</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> +</div> + +<p class="summary">Os hiperlinks são realmente importantes — são o que torna a Web uma <em>web</em>. Este artigo mostra a sintaxe necessária para criar um link e discute as suas melhores práticas.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pre-requisitos:</th> + <td> + <p>Familiaridade básica em HTML, conforme <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Começando com o HTML</a>. Formatação de texto em HTML, conforme <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Para aprender a implementar um hiperlink efetivamente e vincular vários arquivos juntos.</td> + </tr> + </tbody> +</table> + +<h2 id="O_que_é_um_hiperlink">O que é um hiperlink?</h2> + +<p>Os hiperlinks são uma das inovações mais interessantes que a Web oferece. Bem, eles são uma característica da Web desde o início, mas são o que torna a Web como ela é — eles nos permitem vincular nossos documentos a qualquer outro documento (ou outro recurso) que queremos. Também podemos vincular para partes específicas de documentos e podemos disponibilizar aplicativos em um endereço web simples (em contraste com aplicativos nativos, que devem ser instalados e tantas outras coisas). Qualquer conteúdo da web pode ser convertido em um link, para que, quando clicado (ou ativado de outra forma) fará com que o navegador vá para outro endereço ({{glossary("URL")}}).</p> + +<div class="note"> +<p dir="ltr" id="tw-target-text"><strong>Nota</strong>: Um URL pode apontar para arquivos HTML, arquivos de texto, imagens, documentos de texto, arquivos de vídeo e áudio e qualquer outra coisa que possa estar na Web. Se o navegador não souber exibir ou manipular o arquivo, ele perguntará se você deseja abrir o arquivo (nesse caso, o dever de abrir ou manipular o arquivo é passado para um aplicativo nativo adequado no dispositivo) ou fazer o download dele (nesse caso, você pode tentar lidar com isso mais tarde).</p> +</div> + +<p dir="ltr" id="tw-target-text">A página inicial da BBC, por exemplo, contém um grande número de links que apontam não apenas para várias notícias, mas também diferentes áreas do site (funcionalidade de navegação), páginas de login/registro (ferramentas do usuário) e muito mais.</p> + +<p><img alt="frontpage of bbc.co.uk, showing many news items, and navigation menu functionality" src="https://mdn.mozillademos.org/files/12405/bbc-homepage.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Anatomia_de_um_link">Anatomia de um link</h2> + +<p dir="ltr" id="tw-target-text">Um link básico é criado envolvendo o texto (ou outro conteúdo, veja {{anch("Block level links")}}) que você quer transformar em um link dentro de um elemento {{htmlelement("a")}}, e dando-lhe um atributo {{htmlattrxref("href", "a")}}, (também conhecido como <strong>Hypertext Reference</strong>, ou <strong>target</strong>) que conterá o endereço da Web para o qual você deseja que o link aponte.</p> + +<pre class="brush: html notranslate"><p>Estou criando um link para +<a href="https://www.mozilla.org/pt-BR/">a página inicial da Mozilla</a>. +</p></pre> + +<p dir="ltr" id="tw-target-text">Isso nos dá o seguinte resultado:</p> + +<p>Estou criando um link para <a class="ignore-external" href="https://www.mozilla.org/pt-BR/">a página inicial da Mozilla</a>.</p> + +<h3 id="Adicionando_informações_de_suporte_com_o_atributo_title">Adicionando informações de suporte com o atributo <em>title</em></h3> + +<p>Outro atributo que você pode querer adicionar aos seus links é o <code>title</code>; pretende-se que ele contenha informações úteis adicionais sobre o link, como, que tipo de informação a página contém ou informações importantes. Por exemplo:</p> + +<pre class="brush: html notranslate"><p>Estou criando um link para +<a href="https://www.mozilla.org/pt-BR/" + title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir"> a página inicial da Mozilla</a>. +</p></pre> + +<p>Isto nos dá o seguinte resultado (o título aparecerá como uma dica de ferramenta quando o link estiver suspenso):</p> + +<p>Estou criando um link para <a class="ignore-external" href="https://www.mozilla.org/pt-BR/" title="O melhor lugar para encontrar mais informações sobre a missão da Mozilla e como contribuir">a página inicial da Mozilla</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Um título de link só é revelado ao passar o mouse sobre ele, o que significa que as pessoas que dependem do teclado ou <em>touchscreen</em> para navegar em páginas web terão dificuldade em acessar a informação do título. Se a informação de um título é realmente importante para a usabilidade da página, então você deve apresentá-la de uma maneira que será acessível a todos os usuários, por exemplo, colocando-o no texto normal.</p> +</div> + +<p dir="ltr" id="tw-target-text">Aprendizagem na prática: criando seu próprio link de exemplo</p> + +<p dir="ltr" id="tw-target-text">Momento da aprendizagem na prática: gostaríamos que você criasse um documento HTML usando seu editor de código local (nosso <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">modelo inicial</a> seria interessante.)</p> + +<ul> + <li>Dentro do corpo do HTML, tente adicionar um ou mais parágrafos ou outros tipos de conteúdo que você já conhece.</li> + <li> + <p dir="ltr" id="tw-target-text">Transforme alguns dos conteúdos em links.</p> + </li> + <li> + <p dir="ltr" id="tw-target-text">Inclua atributos de título.</p> + </li> +</ul> + +<h3 id="Links_de_nível_de_bloco">Links de nível de bloco</h3> + +<p dir="ltr" id="tw-target-text">Como falamos anteriormente, você pode transformar qualquer conteúdo em um link, mesmo <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started#Elementos_em_bloco_versus_elementos_inline">elementos de nível de bloco</a>. Se você tiver uma imagem que queira transformar em um link, você pode simplesmente colocar a imagem entre as tags <code><a></a></code>.</p> + +<pre class="brush: html notranslate"><a href="https://www.mozilla.org/pt-BR/"> + <img src="mozilla-image.png" alt="Logotipo mozilla que liga a página inicial do mozilla"> +</a></pre> + +<div class="note"> +<p><strong>Nota</strong>: Você descobrirá muito mais sobre o uso de imagens na Web em artigo posterior.</p> +</div> + +<h2 dir="ltr" id="Um_guia_rápido_sobre_URLs_e_caminhos">Um guia rápido sobre URLs e caminhos</h2> + +<p dir="ltr" id="tw-target-text">Para entender completamente os destinos de links, você precisa entender URLs e caminhos de arquivos. Esta seção fornece as informações que você precisa para conseguir isso.</p> + +<p>Um URL ou <em>Uniform Resource Locator</em> é simplesmente uma sequência de texto que define onde algo está localizado na Web. Por exemplo, a página inicial em inglês da Mozilla está localizada em <code>https://www.mozilla.org/en-US/</code>.</p> + +<p>Os URLs usam caminhos para encontrar arquivos. Os caminhos especificam onde, no explorador de arquivos, o recurso que você está interessado está localizado. Vejamos um exemplo simples de uma estrutura de diretório (veja o diretório de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/creating-hyperlinks">criação de hiperlinks</a>).</p> + +<p><img alt="A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively" src="https://mdn.mozillademos.org/files/12409/simple-directory.png" style="display: block; margin: 0 auto;"></p> + +<p>A raiz dessa estrutura de diretório é chamada de <code>criação de hiperlinks</code>. Ao trabalhar localmente com um site, você terá um diretório no qual ele todo esta dentro. Incluído na raiz, temos um arquivo <code>index.html</code> e um arquivo <code>contacts.html</code>. Em um site real, <code>index.html</code> seria nossa página inicial ou página de entrada (uma página da web que serve como ponto de entrada para um site ou uma seção específica de um site).</p> + +<p>Existem também dois diretórios dentro da nossa raiz — <code>pdfs</code> e <code>projects</code>. Cada um deles contém um único arquivo — um PDF (<code>projetos-brief.pdf</code>) e um arquivo <code>index.html</code>, respectivamente. Observe como é possível, felizmente, ter dois arquivos <code>index.html</code> em um projeto, desde que estejam em locais diferentes no sistema de arquivos. Muitos sites fazem isso. O segundo <code>index.html</code> poderia ser a página de destino principal para informações relacionadas ao projeto.</p> + +<ul> + <li> + <p><strong>Mesmo diretório: </strong>se você deseja incluir um hiperlink dentro de <code>index.html</code> (o <code>index.html</code> de nível superior) apontando para <code>contacts.html</code>, basta especificar o nome do arquivo ao qual deseja vincular, já que está no mesmo diretório que o arquivo atual. Portanto, o URL que você usaria seria <code>contacts.html</code>:</p> + + <pre class="brush: html notranslate"><p>Deseja entrar em contato com um membro da equipe específica? +Encontre detalhes sobre nossos serviços em nossa <a href="contato.html">página de contatos</a>.</p></pre> + </li> + <li> + <p><strong>Movendo-se para baixo em subdiretórios: </strong>se você quisesse incluir um hiperlink dentro do <code>index.html</code> apontando para o <code>projeto/index.html</code>, você precisaria descer no diretório de projetos antes de indicar o arquivo que deseja vincular. Isso é feito especificando o nome do diretório, depois uma barra inclinada e, em seguida, o nome do arquivo. Então o URL que você usaria seria <code>projeto/index.html</code>:</p> + + <pre class="brush: html notranslate"><p>Visite minha <a href="projects/index.html">pagina inicial do projeto</a>.</p></pre> + </li> + <li> + <p><strong>Movendo-se de volta para os diretórios pai: </strong>se você quisesse incluir uma hiperlink dentro de <code>projeto/index.html</code> apontando para pdfs/<code>projetos-brief.pdf</code>, você precisaria subir um nível de diretório e voltar para o diretório <code>pdf</code>. "Subir um diretório" é indicado usando dois pontos — <code>..</code> — então a URL que você usaria seria <code>../pdfs/project-brief.pdf</code></p> + + <pre class="brush: html notranslate"><p>Um link para o meu <a href="../pdfs/project-brief.pdf"> breve de projeto</a>.</p></pre> + </li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Você pode combinar várias instâncias desses recursos em URLs complexas, se necessário, por exemplo<code>../../../complex/path/to/my/file.html</code>.</p> +</div> + +<h3 id="Fragmentos_de_documento">Fragmentos de documento</h3> + +<p>É possível vincular a uma parte específica de um documento HTML (conhecido como um <strong>fragmento de documento</strong>) e não apenas ao topo do documento. Para fazer isso, primeiro você deve atribuir um atributo "id" ao elemento ao qual deseja vincular. Normalmente faz sentido vincular a um título específico, então ficaria algo do tipo:</p> + +<pre class="brush: html notranslate"><h2 id="Mailing_address">Endereço de correspondência</h2></pre> + +<p>Em seguida, para vincular a esse <code>id</code> específico, você o incluirá no final do URL, precedido por um símbolo de hashtag/cerquilha, por exemplo:</p> + +<pre class="brush: html notranslate"><p>Quer escrever uma carta? Use nosso<a href="contacts.html#Mailing_address">endereço de correspondência</a>.</p></pre> + +<p>Você pode até usar apenas referência de fragmento do documento por si só para vincular a outra parte do mesmo documento:</p> + +<pre class="brush: html notranslate"><p>O <a href="#Mailing_address">endereço postal da empresa</a> pode ser encontrado na parte inferior desta página.</p></pre> + +<h3 id="URLs_absolutos_versus_relativos">URLs absolutos versus relativos</h3> + +<p>Dois termos que você encontrará na Web são URL <strong>absoluto</strong> e URL <strong>relativo</strong>:</p> + +<p><strong>URL absoluto: </strong>aponta para um local definido por sua localização absoluta na web, incluindo "protocolo" e "nome de domínio". Então, por exemplo, se uma página <code>index.html</code> for carregada para um diretório chamado <code>projeto</code> que fica dentro da raiz de um servidor web, e o domínio do site é <code>http://www.exemplo.com</code>, a página estará disponível em <code>http://www.exemplo.com/projeto/index.html</code> (ou mesmo apenas <code>http://www.exemplo.com/projeto/</code>, pois a maioria dos servidores web apenas procura uma página de destino como index.html para carregar, se não está especificado no URL.)</p> + +<p>Um URL absoluto sempre aponta para o mesmo local, não importa onde seja usado.</p> + +<p><strong>URL relativa: </strong>aponta para um local <em>relativo</em> ao arquivo do qual você está vinculando, mais como o que vimos na seção anterior. Por exemplo, se desejássemos vincular nosso arquivo de exemplo em <code>http://www.exemplo.com/projeto/index.html</code> para um arquivo PDF no mesmo diretório, o URL seria apenas o nome do arquivo — por exemplo, <code>project-brief.pdf</code> — nenhuma informação extra é necessária. Se o PDF estava disponível em um subdiretório dentro de <code>projects</code> chamado <code>pdfs</code>, o link relativo seria <code>pdfs/projeto-brief.pdf</code> (o URL absoluto equivalente seria <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>).</p> + +<p>Um URL relativo apontará para lugares diferentes, dependendo da localização real do arquivo ao qual você se refere — por exemplo, se tivermos movido nosso arquivo <code>index.html</code> para fora do diretório de projetos e para a raiz do site (no nível superior, não em qualquer diretório), o link relativo à URL referente a <code>pdfs/project-brief.pdf</code> agora apontaria para um arquivo localizado em <code>http://www.example.com/pdfs/project-brief.pdf</code>, não para um arquivo localizado em <code>http://www.example.com/projects/pdfs/project-brief.pdf</code>.</p> + +<h2 id="Práticas_recomendadas">Práticas recomendadas</h2> + +<p>Existem algumas práticas recomendadas a seguir, ao escrever links. Vejamos.</p> + +<ul> +</ul> + +<h3 id="Use_palavras-chave_claras">Use palavras-chave claras</h3> + +<p>É muito fácil jogar links na sua página, porém somente isto não é suficiente. Precisamos tornar nossos links <em>acessíveis</em> a todos os leitores, independentemente do contexto atual e de quais ferramentas eles prefiram. Por exemplo:</p> + +<ul> + <li>Os usuários de leitores de telas gostam pular de link a outro link na página e ler links fora do contexto.</li> + <li>Os motores de busca usam o texto do link para indexar arquivos de destino, por isso é uma boa idéia incluir palavras-chave no texto do link para descrever efetivamente o que está sendo vinculado.</li> + <li>Os usuários normalmente deslizam sobre a página em vez de ler cada palavra, e são atraídos para recursos de página que se destacam, como links. Eles acharão os textos descritivos de links úteis.</li> +</ul> + +<p>Vejamos um exemplo específico:</p> + +<p><em>Texto de link </em><strong>correto</strong>:<em> </em><a href="https://firefox.com/">Baixe o Firefox</a></p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + Baixe o Firefox +</a></p></pre> + +<p><em>Texto de link</em> <strong>incorreto</strong>: <a href="https://firefox.com/">clique aqui</a> para baixar o Firefox</p> + +<pre class="brush: html notranslate"><p><a href="https://firefox.com/"> + clique aqui +</a> +para baixar o Firefox</p> +</pre> + +<p>Outras dicas:</p> + +<ul> + <li>Não repita o URL como parte do texto do link — Os URLs parecem feios e até são mais feios quando um leitor de tela os lê letra por letra.</li> + <li>Não diga "link" ou "links para" no texto do link — é apenas ruído. Os leitores de tela já dizem às pessoas que existe um link. Os usuários visuais também sabem que existe um link, porque eles geralmente são de cor diferente e sublinhados (esta convenção geralmente não deve ser quebrada, pois os usuários estão muito acostumados a isso).</li> + <li>Mantenha seu rótulo de link o mais curto possível — links longos irritam especialmente os usuários de leitores de tela, que têm que ouvir o texto inteiro lido.</li> + <li>Minimize instâncias em que o mesmo texto esteja ligado a diferentes lugares. Isso pode causar problemas para os usuários do leitor de tela, que muitas vezes mostrará uma lista dos links fora do contexto — vários links todos rotulados como "clique aqui", "clique aqui", "clique aqui"... seria confuso.</li> +</ul> + +<h3 id="Use_links_relativos_sempre_que_possível">Use links relativos sempre que possível</h3> + +<p>A partir da descrição acima, você pode pensar que é uma boa idéia usar apenas links absolutos o tempo todo; Afinal, eles não quebram quando uma página é movida como pode ocorrer com <em>links relativos</em>. No entanto, você deve usar <em>links relativos</em> sempre que possível ao vincular a outros locais dentro do mesmo site (ao vincular a outro site, você precisará usar um link absoluto):</p> + +<ul> + <li>Para começar, é muito mais fácil verificar seu código — os URL relativos geralmente são muito mais curtos que os URLs absolutos, o que torna o código de leitura muito mais fácil.</li> + <li>Em segundo lugar, é mais eficiente usar URLs relativas sempre que possível. Quando você usa um URL absoluto, o navegador começa procurando a localização real do servidor no Servidor de Nomes de Domínio "DNS"; veja <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/Como_a_Web_funciona">Como a web funciona</a> para obter mais informações), então ele vai para esse servidor e encontra o arquivo que está sendo solicitado. Por outro lado, com um URL relativo, o navegador apenas procura o arquivo que está sendo solicitado, no mesmo servidor. Então, se você usa URLs absolutos para fazer o que os URLs relativos fariam, você está constantemente fazendo o seu navegador realizar trabalho extra, o que significa que ele irá executar de forma menos eficiente.</li> +</ul> + +<h3 id="Vinculando-se_a_recursos_que_não_sejam_HTML_—_deixe_indicadores_claros">Vinculando-se a recursos que não sejam HTML — deixe indicadores claros</h3> + +<p>Ao vincular a um arquivo que será baixado (como um documento PDF ou Word) ou transmitido (como vídeo ou áudio) ou ainda tiver outro efeito potencialmente inesperado (abrir uma janela pop-up ou carregar um filme Flash), você deve adicionar uma redação clara para reduzir qualquer confusão. Pode ser bastante irritante, por exemplo:</p> + +<ul> + <li>Se você estiver em uma conexão de baixa banda larga, clicar em um link e, em seguida, um download de muitos megabytes começa inesperadamente.</li> + <li>Se você não tiver instalado o Flash Player, clicar em um link e, de repente, ser levado para uma página que requer Flash Player.</li> +</ul> + +<p>Vejamos alguns exemplos, para ver que tipo de texto pode ser usado aqui:</p> + +<pre class="brush: html notranslate"><p><a href="http://www.example.com/large-report.pdf"> + Baixe o relatório de vendas (PDF, 10MB) +</a></p> + +<p><a href="http://www.example.com/video-stream/"> + Assista ao vídeo (o fluxo abre em separado, qualidade HD) +</a></p> + +<p><a href="http://www.example.com/car-game"> + Jogue o jogo de carro (requer Flash Player) +</a></p></pre> + +<h3 id="Use_o_atributo_de_download_ao_vincular_a_um_download">Use o atributo de download ao vincular a um download</h3> + +<p>Quando você está apontando para um arquivo que deve ser baixado em vez de ser aberto no navegador, poderá usar o atributo de download para fornecer um nome de arquivo salvo padrão. Aqui está um exemplo, com um link de <code>baixar</code> para a versão do Windows 39 do Firefox:</p> + +<pre class="brush: html notranslate"><a href="https://download.mozilla.org/?product=firefox-39.0-SSL&os=win&lang=en-US" + download="firefox-39-installer.exe"> + Faça o download do Firefox 39 para Windows +</a></pre> + +<h2 id="Aprendizagem_ativa_criando_um_menu_de_navegação">Aprendizagem ativa: criando um menu de navegação</h2> + +<p>Para este exercício, gostaríamos que você vinculasse algumas páginas a um menu de navegação para criar um <em>site</em> com várias páginas. Essa é uma maneira comum de criá-los — a mesma estrutura de página é usada em todas elas, incluindo o mesmo menu de navegação. Portanto, quando os <em>links</em> são clicados, dá a impressão de que você permanece no mesmo lugar e que um conteúdo diferente está sendo criado.</p> + +<p>Você precisará fazer cópias locais das quatro páginas a seguir, tudo no mesmo diretório (veja também o diretório de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-start">início do menu de navegação</a> para uma lista completa de arquivos):</p> + +<ul> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/index.html">index.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/projects.html">projects.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/pictures.html">pictures.html</a></li> + <li><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/navigation-menu-start/social.html">social.html</a></li> +</ul> + +<p>Você deve:</p> + +<ol> + <li>Adicionar uma lista não ordenada no local indicado em uma página, contendo os nomes das páginas a serem vinculadas. Um menu de navegação geralmente é apenas uma lista de <em>links</em>, então está semanticamente correto.</li> + <li>Transformar o nome de cada página em um <em>link</em> para essa página.</li> + <li>Copiar o menu de navegação para cada uma.</li> + <li>Em cada página, remova apenas o <em>link</em> para a mesma página - é confuso e inútil que uma página inclua um link para si mesma, e a falta de um <em>link</em> é um bom lembrete visual de qual página você está atualmente.</li> +</ol> + +<p>O exemplo final acabaria por parecer algo assim:</p> + +<p><img alt="An example of a simple HTML navigation menu, with home, pictures, projects, and social menu items" src="https://mdn.mozillademos.org/files/12411/navigation-example.png" style="display: block; margin: 0 auto;"></p> + +<div class="note"> +<p><strong>Note</strong>: Se você ficar preso, ou não tem certeza se o fez bem, você pode verificar o diretório de <a href="https://github.com/mdn/learning-area/tree/master/html/introduction-to-html/navigation-menu-marked-up">navegação-menu-marcado</a> para ver a resposta correta.</p> +</div> + +<h2 id="Links_de_e-mail">Links de e-mail</h2> + +<p>É possível criar <em>links</em> ou botões que, quando clicados, abrem uma nova mensagem de e-mail de saída em vez de vincular a um recurso ou página. Isso é feito usando o elemento {{HTMLElement("a")}} e o <code>mailto:</code> estrutura de URL.</p> + +<p>Na sua forma mais comum, um <code>mailto:</code> simplesmente indica o endereço de e-mail do destinatário pretendido. Por exemplo:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org">Enviar email para nenhum lugar</a> +</pre> + +<p>Isso resulta em um <em>link</em> que se parece com isto: <a href="mailto:nowhere@mozilla.org">Enviar e-mail para lugar nenhum.</a></p> + +<p>Na verdade, o endereço de e-mail é opcional. Se você deixar de fora (ou seja, seu {{htmlattrxref("href", "a")}} for simplesmente "mailto:"), uma nova janela de e-mail de saída será aberta pelo aplicativo de e-mail do usuário sem um destinatário. Isso geralmente é útil como "Compartilhar" <em>links</em> que os usuários podem clicar para enviar um e-mail para um endereço escolhido.</p> + +<h3 id="Especificando_detalhes">Especificando detalhes</h3> + +<p>Além do endereço de e-mail, você pode fornecer outras informações. Na verdade, qualquer campo de cabeçalho de correio padrão pode ser adicionado ao URL do <code>mailto:</code> que você fornece. Os mais utilizados são "assunto", "cc" e "corpo" (que não é um campo de cabeçalho verdadeiro, mas permite que você especifique uma mensagem de conteúdo curta para o novo e-mail). Cada campo e seu valor são especificados como um termo de consulta.</p> + +<p>Aqui está um exemplo que inclui um cc, bcc, assunto e corpo de texto:</p> + +<pre class="brush: html notranslate"><a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email"> + Aqui está um exemplo, incluindo um cc, bcc, assunto e corpo: +</a></pre> + +<div class="note"> +<p><strong>Nota:</strong> Os valores de cada campo devem ser codificados por URL, ou seja, com caracteres não imprimíveis (caracteres invisíveis, como guias, carriage returns e quebras de página) e espaços com <a href="http://en.wikipedia.org/wiki/Percent-encoding">percent-escaped</a>. Observe também o uso do ponto de interrogação (<code>?</code>) Para separar o URL principal dos valores do campo e do <em>e</em> comercial (&) para separar cada campo no <code>mailto:</code> URL. Essa é a notação de consulta padrão do URL. Leia <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data#The_GET_method">O método GET</a> para entender para que esta notação de consulta é mais comum.</p> +</div> + +<p>Aqui estão alguns outros exemplos de URLs de <code>mailto:</code></p> + +<ul> + <li><a href="mailto:">mailto:</a></li> + <li><a href="mailto:nowhere@mozilla.org">mailto:nowhere@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org,nobody@mozilla.org">mailto:nowhere@mozilla.org,nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org</a></li> + <li><a href="mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject">mailto:nowhere@mozilla.org?cc=nobody@mozilla.org&subject=This%20is%20the%20subject</a></li> +</ul> + +<h2 id="Resumo">Resumo</h2> + +<p>Por enquanto isto é tudo sobre links! Você retornará aos links mais tarde no curso quando começar a analisar o estilo deles. Em seguida, em HTML, retornaremos à semântica de texto e veremos alguns recursos mais avançados/incomuns que você achará úteis — No próximo artigo você verá a formatação avançada de texto.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/pt-br/learn/html/introduction_to_html/debugging_html/index.html b/files/pt-br/learn/html/introduction_to_html/debugging_html/index.html new file mode 100644 index 0000000000..4b518454d9 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/debugging_html/index.html @@ -0,0 +1,175 @@ +--- +title: Debugging HTML +slug: Aprender/HTML/Introducao_ao_HTML/Debugging_HTML +translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Escrever HTML é legal, mas e se algo der errado, e você não conseguir descobrir onde está o erro no código? Este artigo apresentará algumas ferramentas que podem ajudá-lo a encontrar e corrigir erros no HTML.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Familiaridade com HTML, conforme abordado, por exemplo, em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Introdução ao HTML</a>, <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos de texto em HTML</a> e <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criação de Hiperlinks</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender o básico sobre o uso de ferramentas de depuração (debugging) para encontrar problemas em HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="Depurar_não_é_assustador">Depurar não é assustador</h2> + +<p>Ao escrever algum tipo de código, tudo costuma ir bem, até o temido momento quando ocorre um erro — você fez algo errado, então seu código não funciona - talvez não funcione mais nada ou não funciona exatamente como você queria. Por exemplo, a seguir é mostrado um erro relatado ao tentar {{glossary("compilar")}} um programa simples escrito na linguagem <a href="https://www.rust-lang.org/">Rust</a>.</p> + +<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;">Aqui, a mensagem de erro é relativamente fácil de entender — "string de aspas duplas sem terminação". Se você olhar a listagem, provavelmente verá como <code>println!(Hello, world!");</code> pode estar faltando logicamente uma aspa dupla. No entanto, as mensagens de erro podem ficar mais complicadas e menos fáceis de interpretar à medida que os programas se tornam maiores, e até mesmo casos simples podem parecer um pouco intimidadores para alguém que não sabe nada sobre o Rust.</p> + +<p>Depurar um código não tem que ser assustador, porém — a chave para se sentir confortável em escrever e depurar qualquer linguagem ou código de programação é a familiaridade com a linguagem e as ferramentas.</p> + +<h2 id="HTML_e_depuração">HTML e depuração</h2> + +<p>HTML não é tão complicado de entender quanto o Rust. O HTML <strong>não é compilado</strong> em um formato diferente antes do navegador analisá-lo e mostrar o resultado (ele é interpretado, não compilado). E a sintaxe do {{glossary("elemento")}} HTML é muito mais fácil de entender do que uma "linguagem de programação real" como Rust, {{glossary("JavaScript")}}, ou {{glossary("Python")}}. A forma como os navegadores analisam o HTML é muito mais <strong>permissiva </strong>do que a forma como as linguagens de programação são executadas, o que é bom e ruim.</p> + +<h3 id="Código_permissivo">Código permissivo</h3> + +<p>Então, o que queremos dizer com permissivo? Bem, geralmente quando você faz algo errado no código, existem dois tipos principais de erros que você encontrará:</p> + +<ul> + <li><strong>Erros de sintaxe</strong>: São os erros de ortografia no seu código que realmente fazem com que o programa não seja executado, como o erro do Rust mostrado acima. Estes geralmente são fáceis de corrigir, desde que você esteja familiarizado com a sintaxe (forma de escrever) da linguagem e saiba o que significam as mensagens de erro.</li> + <li><strong>Erros lógicos</strong>: São erros onde a sintaxe está correta, mas o código não é o que você pretendia, o que significa que o programa é executado incorretamente. Geralmente, eles são mais difíceis de corrigir do que erros de sintaxe, pois não há uma mensagem de erro para direcioná-lo para a origem deste erro.</li> +</ul> + +<p>O próprio HTML não sofre de erros de sintaxe porque os navegadores o analisam permissivamente, o que significa que a página ainda é exibida mesmo se houver erros de sintaxe. Os navegadores têm regras internas para indicar como interpretar a marcação escrita incorretamente, para que você obtenha algo em execução, mesmo que não seja o esperado. Isso, claro, ainda pode ser um problema!</p> + +<div class="note"> +<p><strong>Nota</strong>: O HTML é analisado permissivamente porque, quando a web foi criada, foi decidido que permitir que as pessoas publicassem seus conteúdos era mais importante do que garantir que a sintaxe estivesse absolutamente correta. A web provavelmente não seria tão popular quanto é hoje, se tivesse sido mais rigorosa desde o início.</p> +</div> + +<h3 id="Aprendizado_Ativo_Estudando_código_permissivo">Aprendizado Ativo: Estudando código permissivo</h3> + +<p>É hora de estudar a natureza permissiva do código HTML.</p> + +<ol> + <li>Primeiramente, faça o download do <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> e o salve localmente. Esse exemplo contém erros propositais para que possamos explorá-los (tal código HTML é dito <em><strong>badly-formed</strong></em>, em contraponto ao HTML <em><strong>well-formed</strong></em>).</li> + <li>Em seguida, abra o arquivo em um navegador. Você verá algo como:<img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li> + <li>Isso claramente não parece bom; vamos dar uma olhada no código fonte para tentar achar os erros (somente o conteúdo de <em>body</em> é mostrado): + <pre class="brush: html notranslate"><h1>HTML debugging examples</h1> + +<p>What causes errors in HTML? + +<ul> + <li>Unclosed elements: If an element is <strong>not closed properly, + then its effect can spread to areas you didn't intend + + <li>Badly nested elements: Nesting elements properly is also very important + for code behaving correctly. <strong>strong <em>strong emphasised?</strong> + what is this?</em> + + <li>Unclosed attributes: Another common source of HTML problems. Let's + look at an example: <a href="https://www.mozilla.org/>link to Mozilla + homepage</a> +</ul></pre> + </li> + <li>Vamos analisar os erros: + <ul> + <li>Os elementos {{htmlelement("p","parágrafo")}} e {{htmlelement("li","item da lista")}} não possuem <em>tags</em> de fechamento. Olhando a imagem acima, isso não parece ter afetado muito a renderização do HTML já que é fácil deduzir onde um elemento deveria terminar e outro, começar.</li> + <li>O primeiro elemento {{htmlelement("strong")}} não possui <em>tag</em> de fechamento. Isto é um pouco mais problemático porque não é necessariamente fácil determinar onde um elemento deveria terminar. Assim, todo o resto do texto foi fortemente enfatizado.</li> + <li>Essa seção foi aninhada incorretamente: <code><strong>strong <em>strong emphasised?</strong> what is this?</em></code>. Não é fácil dizer como esse trecho foi interpretado por causa do problema anterior.</li> + <li>O valor do atributo {{htmlattrxref("href","a")}} não tem as aspas de fechamento. Isso parece ter causado o maior problema — o <em>link</em> não foi renderizado.</li> + </ul> + </li> + <li>Agora vamos dar uma olhada no HTML que o navegador renderizou, comparando-o com o nosso código fonte. Para fazer isso, usaremos as ferramentas de desenvolvimento oferecidas pelo navegador. Se você não está familiarizado com estas ferramentas, dê uma olhadinha nesse tutorial: <a href="/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">O que são as ferramentas de desenvolvimento do navegador</a>.</li> + <li>No inspetor DOM, você pode ver como o HTML renderizado fica: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text "What causes errors in HTML?" Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li> + <li>Utilizando o inspetor DOM, vamos explorar nosso código detalhadamente para ver como o navegador tentou consertar os erros do código HTML (nós fizemos a análise com o Firefox, mas outros navegadores modernos <em>devem</em> apresentar o mesmo resultado): + <ul> + <li>As <em>tags</em> de fechamento foram colocadas nos parágrafos e itens da lista.</li> + <li>Não está claro onde o primeiro elemento <code><strong></code> deveria terminar, portanto o navegador envolveu cada bloco subsequente em uma <em>tag</em> <em>strong</em> própria até o fim do documento!</li> + <li>O aninhamento incorreto foi corrigido pelo navegador da seguinte maneira: + <pre class="brush: html notranslate"><strong>strong + <em>strong emphasised?</em> +</strong> +<em> what is this?</em></pre> + </li> + <li>O link cujas aspas de fechamento não estavam presentes foi totalmente excluído da renderização. Então o último item ficou assim: + <pre class="brush: html notranslate"><li> + <strong>Unclosed attributes: Another common source of HTML problems. + Let's look at an example: </strong> +</li></pre> + </li> + </ul> + </li> +</ol> + +<h3 id="Validação_HTML">Validação HTML</h3> + +<p>Então, você pode ver pelo exemplo acima que você realmente quer ter certeza de que o seu HTML foi bem construido! Mas Como? Em um pequeno exemplo como o que foi visto acima, é facil analisar as linhas e achar os erros, mas e se fosse um gigante e complexo documento HTML?</p> + +<p>A melhor estratégia é começar rodando a sua página HTML através do <a href="https://validator.w3.org/">Markup Validation Service</a> — criado e mantido pelo W3C, uma organização que cuida das especificações que define o HTML, CSS, e outras tecnologias WEB. Esta página considera um documento HTML como uma entrada, fazendo a leitura dela e retornando o que há de errado com o seu HTML.</p> + +<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p> + +<p>Para especificar o HTML a ser validado, você pode dar um endereço web, fazer o upload de um arquivo HTML, ou diretamente inserir o código HTML.</p> + +<h3 id="Aprendizado_Ativo_Validando_um_documento_HTML">Aprendizado Ativo: Validando um documento HTML</h3> + +<p>Vamos tentar fazer isto com o nosso <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a>.</p> + +<ol> + <li>Primero, carregue o <a href="https://validator.w3.org/">Markup Validation Service</a> em uma aba no seu navegador, caso já não esteja carregada.</li> + <li>Troque para a aba <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a>.</li> + <li>Copie todo o código do documento de exemplo (não apenas o body) e cole dentro da grande área de texto mostrada no Markup Validation Service.</li> + <li>Pressione o botão <em>Check</em>.</li> +</ol> + +<p>Você deverá receber uma lista de erros e outras informações.</p> + +<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p> + +<h4 id="Interpretando_as_mensagens_de_erros">Interpretando as mensagens de erros</h4> + +<p>As mensagens de erros geralmente são úteis, mas algumas vezes elas não ajudam tanto; com um pouco de prática você pode descobrir como interpretar-lás para arrumar o seu código. Vamos dar uma olhada nas mensagens de erros e ver o que elas significam. Você verá que cada mensagem vem com um numero para a linha e um para a coluna afim de ajudar você a localizar o erro facilmente.</p> + +<ul> + <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Estas mensagens indicam que um elemento que esta aberto deveria estar fechado. O final da tag esta implicito, mas não esta realmente lá. A informação de linha/coluna indica para a primeira linha depois de onde a tag de fechamento realmente deveria estar, mas isto é uma pista boa o suficiente para ver o que há de errado.</li> + <li>"Unclosed element <code>strong</code>": Este é muito fácil de entender — um {{htmlelement("strong")}} elemento esta aberto, e uma informação de linha/coluna indica diretamente para onde esta.</li> + <li>"End tag <code>strong</code> violates nesting rules": Este aponta os elementos incorretamente aninhados, e a informação de linha/coluna aponta onde o erro está.</li> + <li>"End of file reached when inside an attribute value. Ignoring tag": This one is rather cryptic; it refers to the fact that there is an attribute value not properly formed somewhere, possibly near the end of the file because the end of the file appears inside the attribute value. The fact that the browser doesn't render the link should give us a good clue as to what element is at fault.</li> + <li>"End of file seen and there were open elements": This is a bit ambiguous, but basically refers to the fact there are open elements that need to be properly closed. The lines numbers point to the last few lines of the file, and this error message comes with a line of code that points out an example of an open element: + <pre class="notranslate">example: <a href="https://www.mozilla.org/>link to Mozilla homepage</a> ↩ </ul>↩ </body>↩</html></pre> + + <div class="note"> + <p><strong>Note</strong>: An attribute missing a closing quote can result in an open element because the rest of the document is interpreted as the attribute's content.</p> + </div> + </li> + <li>"Unclosed element <code>ul</code>": This is not very helpful, as the {{htmlelement("ul")}} element <em>is</em> closed correctly. This error comes up because the {{htmlelement("a")}} element is not closed, due to the missing closing quote mark.</li> +</ul> + +<p><span>If you can't work out what every error message means, don't worry about it — a good idea is to try fixing a few errors at a time. Then try revalidating your HTML to show what errors are left. Sometimes fixing an earlier error will also get rid of other error messages — several errors can often be caused by a single problem, in a domino effect.</span></p> + +<p><span>You will know when all your errors are fixed when you see the following banner in your output: </span></p> + +<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Summary">Summary</h2> + +<p>So there we have it, an introduction to debugging HTML, which should give you some useful skills to count on when you start to debug CSS, JavaScript, and other types of code later on in your career. This also marks the end of the Introduction to HTML module learning articles — now you can go on to testing yourself with our assessments: the first one is linked below.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="Neste_módulo">Neste módulo</h2> + +<ul> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML">O que está no cabeçalho? Metadados em HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando hyperlinks</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites">Estrutura de documento e sites</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html b/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html new file mode 100644 index 0000000000..825d2cec6e --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/document_and_website_structure/index.html @@ -0,0 +1,299 @@ +--- +title: Estrutura de documento e sites +slug: Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites +translation_of: Learn/HTML/Introduction_to_HTML/Document_and_website_structure +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<div>Além de definir as partes individuais de sua página (como "um parágrafo" ou "uma imagem"),</div> + +<p class="summary">o {{glossary("HTML")}} também conta com vários elementos de nível de bloco usados para definir as áreas de seu site (como "o cabeçalho", "o menu de navegação", "a coluna de conteúdo príncipal"). Este artigo explora como planejar uma estrutura básica de website, e escrever o HTML para representar essa estrutura.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pre-requisitos:</th> + <td> + <p>Familiaridade básica com HTML, como mostrado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a>. Formatação de texto HTML, como mostrado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a>. O funcionamento de hiperlinks, como visto em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando hyperlinks</a>.</p> + </td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td> + <p dir="ltr" id="tw-target-text">Aprenda a estruturar seu documento usando tags semânticas e como elaborar a estrutura de um site simples.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Seções_básicas_de_um_documento">Seções básicas de um documento</h2> + +<p dir="ltr" id="tw-target-text">As páginas da web podem e serão muito diferentes umas das outras, mas todas tendem a compartilhar componentes padrão semelhantes, a menos que a página exiba um vídeo ou um jogo em tela cheia, seja parte de algum tipo de projeto de arte ou seja mal estruturada:</p> + +<dl> + <dt>cabeçalho (header)</dt> + <dd> + <p dir="ltr" id="tw-target-text">Normalmente, uma grande faixa na parte superior com um grande título e / ou logotipo. É aí que as principais informações comuns sobre um site geralmente ficam de uma página para outra.</p> + </dd> + <dt>barra de navegação</dt> + <dd> + <p dir="ltr" id="tw-target-text">Links para as principais seções do site; geralmente representado por botões de menu, links ou guias. Como o cabeçalho, esse conteúdo geralmente permanece consistente de uma página para outra - ter uma navegação inconsistente em seu site levará a usuários confusos e frustrados. Muitos web designers consideram a barra de navegação parte do cabeçalho em vez de um componente individual, mas isso não é um requisito; na verdade, alguns também argumentam que ter os dois separados é melhor para acessibilidade, já que os leitores de tela podem ler melhor os dois recursos se estiverem separados.</p> + </dd> + <dt>conteúdo principal</dt> + <dd> + <p dir="ltr" id="tw-target-text">Uma grande área no centro que contém a maior parte do conteúdo exclusivo de uma determinada página da Web, por exemplo, o vídeo que você deseja assistir ou a história principal que você está lendo ou o mapa que deseja visualizar ou as manchetes de notícias, etc. Esta é a única parte do site que definitivamente irá variar de página para página!</p> + </dd> + <dt>barra lateral (sidebar)</dt> + <dd> + <p dir="ltr" id="tw-target-text">Algumas informações periféricas, links, cotações, anúncios etc. Geralmente, isso é contextual ao conteúdo principal (por exemplo, em uma página de um artigo de notícias, a barra lateral pode conter a biografia do autor ou links para artigos relacionados), mas há também casos em que você encontrará alguns elementos recorrentes como um sistema de navegação secundário.</p> + </dd> + <dt>rodapé (footer)</dt> + <dd> + <p dir="ltr">Uma faixa na parte inferior da página que geralmente contém letras pequenas, avisos de direitos autorais ou informações de contato. É um lugar para colocar informações comuns (como o cabeçalho), mas geralmente essas informações não são críticas ou secundárias ao próprio site. O rodapé também é usado às vezes para fins de {{Glossary ("SEO")}}, fornecendo links para acesso rápido a conteúdo popular. Um "site típico" poderia ser colocado assim:</p> + </dd> +</dl> + +<p><img alt="a simple website structure example featuring a main heading, navigation menu, main content, side bar, and footer." src="https://mdn.mozillademos.org/files/12417/sample-website.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="HTML_para_estruturar_conteúdo">HTML para estruturar conteúdo</h2> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" style="text-align: left;"><span lang="pt">O exemplo simples mostrado acima não é bonito, mas é perfeitamente aceitável para ilustrar um exemplo típico de layout de website. Alguns sites têm mais colunas, algumas são bem mais complexas, mas você tem a ideia. Com o CSS certo, você poderia usar praticamente todos os elementos para agrupar as diferentes seções e fazer com que parecesse como você queria, mas como discutido anteriormente, precisamos respeitar a semântica e <strong>usar o elemento certo para o trabalho certo.</strong></span></p> + +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" style="text-align: left;">Isso ocorre porque os visuais não contam toda a história. Usamos cor e tamanho de fonte para chamar a atenção dos usuários para as partes mais úteis do conteúdo, como o menu de navegação e links relacionados, mas sobre pessoas com deficiência visual, por exemplo, que podem não encontrar conceitos como "rosa" e "grande". fonte "muito útil?</p> + +<div class="note"> +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="text-align: left;"><span lang="pt">Nota: as pessoas daltônicas representam cerca de 4% da população mundial ou, em outras palavras, aproximadamente 1 em cada 12 homens e 1 em cada 200 mulheres são daltônicas. Cegos e deficientes visuais representam cerca de 4-5% da população mundial (em 2012 havia 285 milhões de pessoas no mundo, enquanto a população total era de cerca de 7 bilhões).</span></p> +</div> + +<p><span lang="pt">Em seu código HTML, você pode marcar seções de conteúdo com base em sua funcionalidade. Você pode usar elementos que representam as seções de conteúdo descritas acima sem ambigüidade, e tecnologias assistivas, como leitores de tela, podem reconhecer esses elementos e ajudar com tarefas como "localizar a navegação principal". "ou" encontre o conteúdo principal. " Como mencionamos anteriormente no curso, há um número de <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML#Por_que_precisamos_de_estrutura">consequências de não usar a estrutura de elemento e semâtica certas para o trabalho certo.</a></span></p> + +<p><span lang="pt">Para implementar essa marcação semântica, o HTML fornece tags dedicadas que você pode usar para representar essas seções, por exemplo:</span></p> + +<ul> + <li><strong>cabeçalho</strong>: {{htmlelement("header")}}.</li> + <li><strong>barra de navegação: </strong>{{htmlelement("nav")}}.</li> + <li><strong>conteúdo principal: </strong>{{htmlelement("main")}}, com várias subseções de conteúdo representadas por {{HTMLElement("article")}}, {{htmlelement("section")}}, e elementos {{htmlelement("div")}}.</li> + <li><strong>rodapé: </strong>{{htmlelement("footer")}}.</li> +</ul> + +<h3 id="Aprendizagem_ativa_explorando_o_código_para_o_nosso_exemplo"><span lang="pt">Aprendizagem ativa: explorando o código para o nosso exemplo</span></h3> + +<div class="oSioSc"> +<div id="tw-target"> +<div class="gsrt tw-ta-container tw-nfl" id="tw-target-text-container"> +<p class="tw-data-text tw-ta tw-text-small" dir="ltr" style="text-align: left; height: 48px;"><span lang="pt">Nosso exemplo visto acima é representado pelo seguinte código (você também pode <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/document_and_website_structure/index.html">encontrar o exemplo em nosso repositório GitHub</a>). Gostaríamos que você olhasse o exemplo acima e, em seguida, examine a listagem abaixo para ver quais partes compõem a seção do visual.</span> </p> +</div> +</div> +</div> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + + <title>My page title</title> + <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> + <link rel="stylesheet" href="style.css"> + + <!-- as três linhas abaixo são uma correção para que elementos semânticos HTML5 funcionem em versões antigas do Internet Explorer--> + <!--[if lt IE 9]> + <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> + <![endif]--> + </head> + + <body> + <!-- Esse é o cabeçalho (header) principal que vai ser usado em todas as páginas do nosso website --> + + <header> + <h1>Header</h1> + </header> + + <nav> + <ul> + <li><a href="#">Home</a></li> + <li><a href="#">Our team</a></li> + <li><a href="#">Projects</a></li> + <li><a href="#">Contact</a></li> + </ul> + + <!-- Um formulário de pesquisa é uma outra maneira não linear comum de navegar por um site. --> + + <form> + <input type="search" name="q" placeholder="Search query"> + <input type="submit" value="Go!"> + </form> + </nav> + + <!-- Esse é o conteúdo principal da nossa página --> + <main> + + <!-- Contém um artigo --> + <article> + <h2>Article heading</h2> + + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p> + + <h3>Subsection</h3> + + <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p> + + <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p> + + <h3>Another subsection</h3> + + <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p> + + <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> + </article> + + <!-- O contéudo do elemento aside pode ser aninhado dentro do conteúdo do elemento main --> + <aside> + <h2>Related</h2> + + <ul> + <li><a href="#">Oh I do like to be beside the seaside</a></li> + <li><a href="#">Oh I do like to be beside the sea</a></li> + <li><a href="#">Although in the North of England</a></li> + <li><a href="#">It never stops raining</a></li> + <li><a href="#">Oh well...</a></li> + </ul> + </aside> + + </main> + + <!-- Esse é o rodapé principal que vai ser usado em todas as páginas do nosso website --> + + <footer> + <p>©Copyright 2050 by nobody. All rights reversed.</p> + </footer> + + </body> +</html></pre> + +<p>Reserve um tempo para examinar o código e entendê-lo - os comentários dentro do código também devem ajudá-lo a entendê-lo. Não estamos pedindo que você faça muito mais neste artigo, porque a chave para entender o layout do documento é escrever uma estrutura HTML sólida e, em seguida, defini-la com CSS. Nós vamos aguardar isso até que você comece a estudar o CSS layout como parte do tópico do estudo de CSS.</p> + +<h2 id="Elementos_de_layout_do_HTML_em_mais_detalhes">Elementos de layout do HTML em mais detalhes</h2> + +<p>É bom entender o significado geral de todos os elementos de seção do HTML em detalhes - isso é algo em que você trabalhará gradualmente ao começar a obter mais experiência com o desenvolvimento web. Você pode encontrar muitos detalhes lendo o nosso <a href="/pt-BR/docs/Web/HTML/Element">Elementos HTML</a>. Para agora, estes são as principais definições que você deve tentar entender:</p> + +<ul> + <li>{{HTMLElement('main')}} é para o conteúdo único dessa página.Use <main> apenas uma vez por página, e o coloca diretamente dentro do {{HTMLElement('body')}}. Não é ideal aninhar ele dentro de qualquer outro elemento senão o elemento <body>.</li> + <li>{{HTMLElement('article')}} inclui um bloco de conteúdo relacionado o qual faz sentido por si só, sem o restante da página (por exemplo, uma postagem singular dum blog).</li> + <li>{{HTMLElement('section')}} é similar com <article>, mas ele é mais para agrupar uma única parte de página que constitui em um único pedaço de funcionalidade (por exemplo, um minimapa, ou um conjunto de manchetes e resumo). É considerado boa prática começar cada seção com um <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">título</a>; observe também que você pode dividir um <article>s em diferentes <section>s, ou <section>s em diferentes <article>s, dependendo do contexto.</li> + <li>{{HTMLElement('aside')}} é para conteúdo que não está relacionados diretamente com os conteúdos principais, mas que podem providenciar informações complementares a esses (entradas de glossários, biografia do autor, links relacionados, etc.).</li> + <li>{{HTMLElement('header')}} representa um grupo de conteúdo introdutório. Se ele for um elemento filho do {{HTMLElement('body')}}, Ele é um header global da página do site, mas se for um elemento filho de um {{HTMLElement('article')}} ou {{HTMLElement('section')}}, é definido como um header específico para essa seção ( tenta não confundir isso com <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML#Adicionando_um_título">títulos e cabeçalhos</a>).</li> + <li>{{HTMLElement('nav')}} contém a funcionalidade principal de navegação da página. Links secundários, etc., não iria na navegação</li> + <li>{{HTMLElement('footer')}} representa um grupo de conteúdo final da página.</li> +</ul> + +<h3 id="Elementos_de_layout_não-semânticos">Elementos de layout não-semânticos</h3> + +<p>Às vezes, você se depara numa situação em que não consegue encontrar um elemento semântico ideal para agrupar alguns itens ou agrupar algum conteúdo. Nesses momentos, convém agrupar um conjunto de elementos para afetá-los todos como uma única entidade com alguns {{glossary("CSS")}} ou {{glossary("JavaScript")}}. Para casos como esses, HTML oferece os elementos {{HTMLElement("div")}} e {{HTMLElement("span")}}. Você deve usá-los preferencialmente com um atributo {{htmlattrxref('class')}} adequado, para fornecer a eles algum tipo de rótulo para que possam ser facilmente referenciados.</p> + +<p>{{HTMLElement("span")}} é um elemento não-semântico embutido, que você deve usar apenas se não conseguir pensar em um elemento de texto semântico melhor para agrupar seu conteúdo ou se não quiser adicionar um significado específico. Por exemplo:</p> + +<pre class="brush: html notranslate"><p>O rei voltou bêbado para o quarto às 01:00, a cerveja não fez nada para ajudá-lo +enquanto ele cambaleando pela porta <span class="editor-note">[Nota do editor: Neste ponto da peça, as luzes devem estar baixas]</span>.</p></pre> + +<p>Nesse caso, a nota do editor deve meramente fornecer orientação extra para o diretor da peça; não é suposto ter um significado semântico extra. Para usuários observador, talvez o CSS fosse usado para distanciar a nota um pouco do texto principal.</p> + +<p>{{HTMLElement("div")}} é um elemento não semântico no nível de bloco, que você deve usar apenas se não conseguir pensar em um elemento de bloco semântico melhor para usar ou se não quiser adicionar um significado específico. Por exemplo, imagine um widget de carrinho de compras que você poderia escolher a qualquer momento durante o seu tempo em um site de comércio eletrônico:</p> + +<pre class="brush: html notranslate"><div class="carrinho-de-compras"> + <h2>Carrinho de compras</h2> + <ul> + <li> + <p><a href=""><strong>Brincos de prata</strong></a>: $99.95.</p> + <img src="../products/3333-0985/thumb.png" alt="Brincos de prata"> + </li> + <li> + ... + </li> + </ul> + <p>Preço total: $237.89</p> +</div></pre> + +<p>Este não é realmente um <code><aside></code>, pois não está necessariamente relacionado ao conteúdo principal da página (você deseja visualizá-lo de qualquer lugar). Nem sequer garante particularmente o uso de uma <code><section></code>, pois não faz parte do conteúdo principal da página. Portanto, um <div> é bom neste caso. Incluímos um cabeçalho como orientação para ajudar os usuários de leitores de tela a encontrá-lo.</p> + +<div class="warning"> +<p><strong>Aviso:</strong> Divs são tão convenientes de usar que é fácil usá-los demais. Como eles não carregam valor semântico, eles apenas confundem seu código HTML. Tome cuidado para usá-los somente quando não houver uma solução semântica melhor e tente reduzir ao mínimo o uso deles, caso contrário, será difícil atualizar e manter seus documentos.</p> +</div> + +<h3 id="Quebras_de_linha_e_regras_horizontais">Quebras de linha e regras horizontais</h3> + +<p>Dois elementos que você ocasionalmente vai usar e desejerá conhecer são {{htmlelement("br")}} e {{htmlelement("hr")}}:</p> + +<p><code><br></code> cria uma quebra de linha em um parágrafo; é a única maneira de forçar uma estrutura rígida em uma situação em que você deseja uma série de linhas curtas fixas, como em um endereço postal ou um poema. Por exemplo:</p> + +<pre class="brush: html notranslate"><p>Era uma vez um homem chamado O'Dell<br> +Que adorava escrever HTML<br> +Mas sua estrutura era ruim, sua semântica era triste<br> +e sua marcação não leu muito bem.</p></pre> + +<p>Sem os elementos <code><br></code>, o parágrafo seria apenas renderizado em uma longa linha (como dissemos anteriormente no curso, o HTML ignora a maioria dos espaços em branco); com elementos <code><br></code> no código, a marcação é renderizada assim</p> + +<p>Era uma vez um homem chamado O'Dell<br> + Que adorava escrever HTML<br> + Mas sua estrutura era ruim, sua semântica era triste<br> + e sua marcação não leu muito bem.</p> + +<p>Elementos <code><hr></code> criam uma regra horizontal no documento que indica uma alteração temática no texto (como uma alteração no tópico ou na cena). Visualmente, apenas se parece com uma linha horizontal. Como um exemplo:</p> + +<pre class="notranslate"><p>Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.</p> +<hr> +<p>Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.</p></pre> + +<p>Seria renderizado assim:</p> + +<p>Ron foi apoiado em um canto pelas feras inferiores saqueadores. Assustado, mas determinado a proteger seus amigos, ele levantou a varinha e se preparou para a batalha, esperando que seu pedido de socorro tivesse passado.</p> + +<hr> +<p>Enquanto isso, Harry estava sentado em casa, olhando para sua declaração de realeza e ponderando quando a próxima série sairia, quando uma carta de socorro encantada voou pela janela e aterrissou em seu colo. Ele leu-o nebuloso e suspirou; "é melhor voltar ao trabalho então", ele pensou.</p> + +<h2 id="Planejando_um_simples_website">Planejando um simples website</h2> + +<p>Depois de planejar o conteúdo de uma página da Web simples, o próximo passo lógico é tentar descobrir qual conteúdo você deseja colocar em um site inteiro, quais páginas você precisa e como elas devem ser organizadas e vinculadas umas às outras. para a melhor experiência de usuário possível. Isso é chamado {{glossary("Information architecture")}}. Em um site grande e complexo, é possível planejar muito esse processo, mas para um site simples de poucas páginas, isso pode ser bastante simples e divertido!</p> + +<ol> + <li>Lembre-se de que você terá alguns elementos comuns à maioria das páginas (se não todas), como o menu de navegação e o conteúdo do rodapé. Se seu site é para uma empresa, por exemplo, é uma boa ideia ter suas informações de contato disponíveis no rodapé de cada página. Anote o que você deseja que seja comum a todas as páginas.<img alt="the common features of the travel site to go on every page: title and logo, contact, copyright, terms and conditions, language chooser, accessibility policy" src="https://mdn.mozillademos.org/files/12423/common-features.png" style="border-style: solid; border-width: 1px; display: block; height: 375px; margin: 0px auto; width: 600px;"></li> + <li>Em seguida, desenhe um esboço de como a estrutura de cada página deve parecer (pode parecer com nosso site simples acima). Observe o que cada bloco será.<img alt="A simple diagram of a sample site structure, with a header, main content area, two optional sidebars, and footer" src="https://mdn.mozillademos.org/files/12429/site-structure.png" style="border-style: solid; border-width: 1px; display: block; height: 232px; margin: 0px auto; width: 600px;"></li> + <li>Agora, faça um brainstorm de todos os outros conteúdos (comuns a todas as páginas) que você deseja ter no seu site - escreva uma grande lista.<img alt="A long list of all the features that we could put on our travel site, from searching, to special offers and country-specific info" src="https://mdn.mozillademos.org/files/12425/feature-list.png" style="border-style: solid; border-width: 1px; display: block; height: 1066px; margin: 0px auto; width: 600px;"></li> + <li>Em seguida, tente classificar todos esses itens de conteúdo em grupos, para ter uma idéia de quais partes podem viver juntas em páginas diferentes. Isso é muito semelhante a uma técnica chamada {{glossary("Card sorting")}}.<img alt="The items that should appear on a holiday site sorted into 5 categories: Search, Specials, Country-specific info, Search results, and Buy things" src="https://mdn.mozillademos.org/files/12421/card-sorting.png" style="border-style: solid; border-width: 1px; display: block; height: 579px; margin: 0px auto; width: 600px;"></li> + <li>Agora, tente esboçar um mapa do site aproximado - faça um balão para cada página do seu site e desenhe linhas para mostrar o fluxo de trabalho típico entre as páginas. A página inicial provavelmente estará no centro e terá um link para a maioria, senão todas as outras; a maioria das páginas em um site pequeno deve estar disponível na navegação principal, embora haja exceções. Você também pode incluir notas sobre como as coisas podem ser apresentadas.<img alt="A map of the site showing the homepage, country page, search results, specials page, checkout, and buy page" src="https://mdn.mozillademos.org/files/12427/site-map.png" style="border-style: solid; border-width: 1px; display: block; height: 872px; margin: 0px auto; width: 600px;"></li> +</ol> + +<h3 id="Aprendizado_ativo_crie_seu_próprio_mapa_do_site">Aprendizado ativo: crie seu próprio mapa do site</h3> + +<p>Tente realizar o exercício acima para um site de sua própria criação. Sobre o que você gostaria de criar um site?</p> + +<div class="note"> +<p><strong>Nota</strong>: Salve seu trabalho em algum lugar; você pode precisar mais tarde.</p> +</div> + +<h2 id="Resumo">Resumo</h2> + +<p>Nesse ponto, você deve ter uma idéia melhor sobre como estruturar uma página / site. No último artigo deste módulo, estudaremos como depurar HTML.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li><a href="/pt-BR/docs/Sections_and_Outlines_of_an_HTML5_document">Seções e estruturas de um documento HTML5</a>: Guia avançado para elementos semânticos do HTML5 e o algoritmo de estrutura de tópicos do HTML5.</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Advanced_text_formatting", "Learn/HTML/Introduction_to_HTML/Debugging_HTML", "Learn/HTML/Introduction_to_HTML")}}</p> + +<h2 id="Neste_módulo">Neste módulo</h2> + +<ul> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML">O que está no cabeçalho? Metadados em HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando hyperlinks</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites">Estrutura de documento e sites</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Debugging_HTML">Debugging HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li> +</ul> diff --git a/files/pt-br/learn/html/introduction_to_html/getting_started/index.html b/files/pt-br/learn/html/introduction_to_html/getting_started/index.html new file mode 100644 index 0000000000..ed79c15034 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/getting_started/index.html @@ -0,0 +1,755 @@ +--- +title: Iniciando com HTML +slug: Aprender/HTML/Introducao_ao_HTML/Getting_started +tags: + - Codificação de Scripts + - Comentário + - Elemento + - Guía + - HTML + - Iniciante + - atributo + - espaço em branco + - referência de entidade +translation_of: Learn/HTML/Introduction_to_HTML/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Neste artigo nós abordamos os princípios básicos do HTML, para você começar. Definimos os elementos, atributos e todos os outros termos importantes que você possa ter ouvido e onde eles se encaixam na linguagem. Também mostramos como um elemento HTML é estruturado, como uma página HTML típica é estruturada e explicamos outras importantes características básicas da linguagem. Ao longo do caminho, nós brincaremos com um pouco de HTML, para despertar seu interesse!</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Básico de informática, <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">software básico instalado</a> e conhecimento básico de como <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">trabalhar com arquivos</a>.</td> + </tr> + <tr> + <th scope="row">Objetivos:</th> + <td>Obter uma familiaridade básica com a linguagem HTML e adquirir um pouco de prática escrevendo alguns elementos HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="O_que_é_HTML">O que é HTML?</h2> + +<p>{{glossary("HTML")}} (HyperText Markup Language) não é uma linguagem de programação, é uma <em>linguagem de marcação</em> utilizada para dizer ao seu navegador como estruturar a página web que você visita. A página pode ser tanto complicada como simples quanto o desenvolvedor web desejar que seja. HTML consiste em uma série de {{glossary("Element", "elementos")}} que você usa para anexar, envolver ou <em>marcar</em> diferentes partes do conteúdo para que apareça ou aja de uma certa maneira. O fechamento das {{glossary("Tag", "tags")}} pode transformar uma parte do conteúdo dentro do elemento em um link para direcionar à uma outra página web, colocar as palavras em itálico, e assim por diante. Por exemplo, observe o conteúdo a seguir:</p> + +<pre class="notranslate">Meu gato é muito mal-humorado.</pre> + +<p> Se nós quisermos que a linha permaneça, nós podemos especificar que é um parágrafo, fechando-a com a elemento de parágrafo({{htmlelement("p")}}):</p> + +<pre class="brush: html notranslate"><p>Meu gato é muito mal-humorado.</p></pre> + +<h2 id="Anatomia_de_um_elemento_HTML">Anatomia de um elemento HTML</h2> + +<p>Vamos explorar nosso elemento parágrafo um pouco mais:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9347/grumpy-cat-small.png" style="display: block; height: 255px; margin: 0px auto; width: 821px;"></p> + +<p>As partes principais do elemento são:</p> + +<ol> + <li><strong>Tag de abertura:</strong> Consiste no nome do elemento ( neste caso: p ), envolvido entre <strong>parênteses angulares</strong> de abertura e fechamento. Isso indica onde o elemento começa, ou inicia a produzir efeito — neste caso, onde o parágrafo se inicia.</li> + <li><strong> Tag de fechamento:</strong> É o mesmo que a tag de abertura, exceto que este inclui uma barra diagonal antes do nome do elemento. Indica onde o elemento termina — neste caso, onde fica o fim do parágrafo. Falhar em incluir o fechamento de uma tag é um erro comum para iniciantes e pode levar a resultados estranhos.</li> + <li><strong>O conteúdo:</strong> Este é o conteúdo do elemento, que neste caso é somente texto.</li> + <li><strong>O elemento:</strong> A tag de abertura, mais a tag de fechamento, mais o conteúdo, é igual ao elemento.</li> +</ol> + +<h3 id="Aprendizado_ativo_criando_seu_primeiro_elemento_HTML">Aprendizado ativo: criando seu primeiro elemento HTML</h3> + +<p>Edite a linha abaixo na área <em>Entrada</em> colocando-a entre as tags <code><em></code> e <code></em></code> (adicione o <code><em></code> <em>antes para abrir o elemento</em>, e <code></em></code> depois, <em>para fechar o elemento</em>). Isto dará à linha uma ênfase em itálico! Você poderá ver as mudanças efetuadas no momento na área <em>Saída.</em></p> + +<p>Caso você cometa um erro, você pode usar o botão <em>Resetar</em> para desfazer a ação incorreta. Se você realmente não souber o que fazer, pressione o botão <em>Mostrar solução</em> para visualizar a resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Saída ao vivo</h2> +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Código editável</h2> +<p class="a11y-label">Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).</p> + +<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%"> + Este é meu texto. +</textarea> + +<div class="controls"> + <input id="reset" type="button" value="Resetar" /> + <input id="solution" type="button" value="Mostrar solução" /> +</div> +</pre> + +<pre class="brush: css notranslate">html { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +} +</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solução'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solução') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solução'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solução'; + } + updateCode(); +}); + +var htmlSolution = '<em>Este é meu texto.</em>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Mostrar solução') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Aninhando_elementos">Aninhando elementos</h3> + +<p>Elementos podem ser inseridos dentro de outros elementos — isto é chamado de <strong>aninhamento</strong>. Se nós quisermos dizer que nosso gato é <strong>muito </strong>mal-humorado, nós poderemos envolver a palavra "muito" com o elemento {{htmlelement("strong")}}, que significa enfatizar fortemente a palavra:</p> + +<pre class="brush: html notranslate"><p>Meu gato é <strong>muito</strong> mal-humorado.</p></pre> + +<p>No entanto, você precisa garantir que seus elementos estejam adequadamente aninhados: no exemplo acima nós abrimos o elemento <code>p</code> primeiro, e então o elemento <code>strong</code>, portanto temos que fechar o elemento <code>strong</code> primeiro, depois o <code>p</code>. O código a seguir está errado:</p> + +<pre class="example-bad brush: html notranslate"><p>Meu gato é <strong>muito mal-humorado.</p></strong></pre> + +<p>Os elementos devem abrir e fechar corretamente para que eles fiquem claramente dentro ou fora do outro. Caso eles se sobreponham, como no exemplo acima, então o seu navegador tentará adivinhar o que você quis dizer, e talvez você obtenha resultados inesperados. Então não faça isso!</p> + +<h3 id="Elementos_em_bloco_versus_elementos_inline">Elementos em bloco versus elementos inline</h3> + +<p>Há duas categorias importantes no HTML, que você precisa conhecer. Eles são elementos em bloco e elementos inline.</p> + +<ul> + <li>Elementos em bloco formam um bloco visível na página — eles aparecerão em uma nova linha logo após qualquer elemento que venha antes dele, e qualquer conteúdo depois de um elemento em bloco também aparecerá em uma nova linha. Elementos em bloco geralmente são elementos estruturais na página que representam, por exemplo: parágrafos, listas, menus de navegação, rodapés etc. Um elemento em bloco não seria aninhado dentro de um elemento inline, mas pode ser aninhado dentro de outro elemento em bloco.</li> + <li>Elementos inline (na linha) são aqueles que estão contidos dentro de elementos em bloco envolvem apenas pequenas partes do conteúdo do documento e não parágrafos inteiros ou agrupamentos de conteúdo. Um elemento inline não fará com que uma nova linha apareça no documento: os elementos inline geralmente aparecem dentro de um parágrafo de texto, por exemplo: um elemento {{htmlelement("a")}}(hyperlink) ou elementos de ênfase como {{htmlelement("em")}} ou {{htmlelement("strong")}}.</li> +</ul> + +<p>Veja o seguinte exemplo:</p> + +<pre class="brush: html notranslate"><em>primeiro</em><em>segundo</em><em>terceiro</em> + +<p>quarto</p><p>quinto</p><p>sexto</p> +</pre> + +<p>O elemento {{htmlelement("em")}} é inline, então como você pode ver abaixo, os três primeiros elementos ficam na mesma linha uns dos outros sem espaço entre eles. O {{htmlelement("p")}}, por outro lado, é um elemento em bloco, então cada elemento aparece em uma nova linha, com espaço acima e abaixo de cada um (o espaçamento é devido à <a href="/pt-BR/docs/Learn/CSS/First_steps">estilização CSS</a> padrão que o browser aplica aos parágrafos).</p> + +<p>{{ EmbedLiveSample('Elementos_em_bloco_versus_elementos_inline', 700, 200, "", "") }}</p> + +<div class="note"> +<p><strong>Nota</strong>: o HTML5 redefiniu as categorias de elemento em HTML5: veja <a href="http://www.whatwg.org/specs/web-apps/current-work/complete/section-index.html#element-content-categories">Categorias de conteúdo de elementos</a>. Enquanto essas definições são mais precisas e menos ambíguas que as anteriores, elas são muito mais complicadas de entender do que "em bloco" e "inline", então usaremos estas ao longo deste tópico.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: <span class="tlid-translation translation" lang="pt"><span title="">Os termos "bloco" e "inline", conforme usados neste tópico, não devem ser confundidos com os <a href="/pt-BR/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">tipos de caixas CSS</a> com os mesmos nomes.</span> <span title="">Embora eles se correlacionem por padrão, alterar o tipo de exibição CSS não altera a categoria do elemento e não afeta em quais elementos ele pode conter e em quais elementos ele pode estar contido. Um dos motivos pelos quais o HTML5 abandonou esses termos foi</span> <span title="">evitar essa confusão bastante comum.</span></span> </p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Você pode encontrar páginas de referência úteis que incluem uma lista de elementos inline e em bloco — veja <a href="/en-US/docs/Web/HTML/Block-level_elements">elementos em bloco</a> e <a href="/en-US/docs/Web/HTML/Inline_elements">elementos inline</a>.</p> +</div> + +<h3 id="Elementos_vazios">Elementos vazios</h3> + +<p>Nem todos os elementos seguem o padrão acima de: tag de abertura, conteúdo, tag de fechamento. Alguns elementos consistem apenas em uma única tag, que é geralmente usada para inserir/incorporar algo no documento no lugar em que ele é incluído. Por exemplo, o elemento {{htmlelement("img")}} insere uma imagem em uma página na posição em que ele é incluído:</p> + +<pre class="brush: html notranslate"><img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png"></pre> + +<p>Isto exibirá em sua página:</p> + +<p>{{ EmbedLiveSample('Elementos_vazios', 700, 300, "", "", "hide-codepen-jsfiddle") }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Elementos vazios são também chamados de <em>void elements</em>.</p> +</div> + +<h2 id="Atributos">Atributos</h2> + +<p>Elementos também podem conter atributos, que se apresentam da seguinte forma:</p> + +<p><img alt='&amp;lt;p class="editor-note">My cat is very grumpy&amp;lt;/p>' src="https://mdn.mozillademos.org/files/9345/grumpy-cat-attribute-small.png" style="display: block; height: 156px; margin: 0px auto; width: 1287px;"></p> + +<p>Atributos contém informação extra sobre o elemento, mas que você não deseja que apareça no conteúdo. Nete caso, o atributo <code>class</code> permite que você dê ao elemento um nome de identificação, que pode ser usada mais tarde para direcionar informação de estilo ao elemento e outras coisas.</p> + +<p>Um atributo deve conter:</p> + +<ol> + <li>Um espaço entre ele e o nome do elemento (ou o atributo anterior, caso o elemento já contenha um ou mais atributos.)</li> + <li>O nome do atributo, seguido por um sinal de igual.</li> + <li><span class="tlid-translation translation" lang="pt"><span title="">Um valor de atributo, com aspas de abertura e fechamento em volta dele.</span></span></li> +</ol> + +<h3 id="Aprendizado_ativo_Adicionando_atributos_a_um_elemento">Aprendizado ativo: Adicionando atributos a um elemento</h3> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Outro exemplo de um elemento é </span></span>{{htmlelement("a")}}<span class="tlid-translation translation" lang="pt"><span title=""> </span></span>—<span class="tlid-translation translation" lang="pt"><span title=""> isso significa "âncora" e fará com que a parte do texto que ele envolve vire um link.</span> <span title="">Isso pode ter vários atributos, mas o mais comuns são os seguintes:</span></span></p> + +<ul> + <li>O valor desse atributo especifica o endereço da web para o qual você deseja que o link aponte; onde o navegador irá quando o link for clicado. Por exemplo <code>href="https://www.mozilla.org/"</code>.</li> + <li><code>title</code>: O atributo <code>title</code> especifica uma informação extra sobre o link, assim como o assunto da página que está sendo linkada. Por exemplo <code>title="Homepage da Mozilla"</code>. Isto será exibido como uma <em>tooltip (dica de contexto)</em> quando passarmos o mouse sobre o link.</li> +</ul> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Edite a linha abaixo na área de Entrada para transformá-la em um link para o seu site favorito.</span></span></p> + +<ol> + <li>Primeiro, adicione o elemento <code><a></code>.</li> + <li>Segundo, adicione o atributo <code>href</code> e o atributo <code>title</code>.</li> + <li>Por último, especifique o atributo <code>target</code> para abrir o link em uma nova aba.</li> +</ol> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Você poderá ver as atualizações das alterações ao vivo na área Saída.</span> <span title="">Você deve ver um link que, quando passa o mouse sobre ele, exibe o valor do atributo </span></span><code>title</code><span class="tlid-translation translation" lang="pt"><span title=""> e, quando clicado, navega para o endereço da web no atributo </span></span><code>href</code><span class="tlid-translation translation" lang="pt"><span title="">.</span> <span title="">Lembre-se de que você precisa incluir um espaço entre o nome do elemento e cada atributo.</span></span></p> + +<p>Caso você cometa um erro, você poderá desfazê-lo usando o botão <em>Reset</em>ar. Caso você realmente não saiba como fazer, pressione o botão <em>Mostrar solução</em> para ver a resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code2">Playable code2</h6> + +<pre class="brush: html notranslate"><h2>Saída ao vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Código editável</h2> +<p class="a11y-label">Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;Um link para o meu site favorito.&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Resetar"> + <input id="solution" type="button" value="Mostrar solução"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solução'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solução') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solução'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solução'; + } + updateCode(); +}); + +var htmlSolution = '<p>Um link para o meu <a href="https://www.mozilla.org/" title="Página da Mozilla" target="_blank"> site favorito</a>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Mostrar solução') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Atributos_boleanos">Atributos boleanos</h3> + +<p>Às vezes você verá atributos escritos sem valores — isso é permitido nos chamados atributos boleanos, e eles podem ter somente um valor, que é geralmente o mesmo nome do atributo. Por exemplo, o atributo {{htmlattrxref("disabled", "input")}} você pode atribuir para os elementos de entrada de formulários, se desejar que estes estejam desativados (acinzentados), para que o usuário não possa inserir nenhum dado neles.</p> + +<pre class="notranslate"><input type="text" disabled="disabled"></pre> + +<p>De forma abreviada, é perfeitamente permitido escrever isso da seguinte maneira (também incluímos um elemento de entrada de formulário não desativado para referência, para dar uma idéia do que está acontecendo):</p> + +<pre class="brush: html notranslate"><!-- o uso do atributo disabled impede que o usuário final insira texto na caixa de entrada --> +<input type="text" disabled> + +<!-- O usuário pode inserir texto na caixa de entrada a seguir, pois não contém o atributo disabled --> +<input type="text"> +</pre> + +<p>Ambos resultarão em uma <em>Saída</em> da seguinte forma:</p> + +<p>{{ EmbedLiveSample('Atributos_boleanos', 700, 100) }}</p> + +<h3 id="Omitindo_as_aspas_dos_valores_do_atributo">Omitindo as aspas dos valores do atributo</h3> + +<p>Olhando a World Wide Web (internet), você encontrará todos os tipos de estilos de marcação HTML, incluindo valores de atributos sem as aspas. Isso é permitido em algumas circunstâncias, mas irá quebrar sua marcação em outras. Por exemplo, se voltarmos ao exemplo anterior de link , nós podemos escrever a versão básica deste somente com o atributo <code>href</code>, da seguinte forma:</p> + +<pre class="notranslate"><a href=<code>https://www.mozilla.org/</code>>site favorito</a></pre> + +<p>No entanto, assim que adicionamos o atributo <code>title</code> neste elemento, a marcação resultará em erro:</p> + +<pre class="example-bad brush: html notranslate"><a href=<code>https://www.mozilla.org/</code> title=The Mozilla homepage>site favorito</a></pre> + +<p>Neste ponto, o navegador irá interpretar errado sua marcação, de modo a pensar que o atributo <code>title</code> trata-se, na verdade, de três atributos: o atributo <code>title</code> com o valor "The", e dois atributos boleanos, <code>Mozilla</code> e <code>homepage</code>. Esta obviamente não era a intenção e irá causar erros ou um comportamento inesperado no código, assim como visto no exemplo abaixo. Tente colocar o mouse em cima do link para visualizar qual é o título que aparece!</p> + +<p>{{ EmbedLiveSample('Omitindo_as_aspas_dos_valores_do_atributo', 700, 100) }}</p> + +<p>Nossa recomendação é <em>sempre incluir as aspas nos valores dos atributos </em>— isto evita inúmeros problemas, além de resultar em um código mais legível.</p> + +<h3 id="Aspas_simples_ou_duplas">Aspas simples ou duplas?</h3> + +<p>Você pode perceber que os valores dos atributos exemplificados neste artigo estão todos com aspas duplas, mas você poderá ver aspas simples no HTML de algumas pessoas. Esta é puramente uma questão de estilo e você pode se sentir livre para escolher qual prefere. As duas linhas de código a seguir são equivalentes:</p> + +<pre class="brush: html notranslate"><a href="http://www.example.com">Um link para o exemplo.</a> + +<a href='http://www.example.com'>Um link para o exemplo.</a></pre> + +<p>Entretanto, você deve se certificar de não misturar os dois tipos de aspas juntos. O exemplo a seguir está errado!</p> + +<pre class="example-bad brush: html notranslate"><a href="http://www.exemplo.com'>Um link para o exemplo.</a></pre> + +<p>Se utilizar um tipo de aspas no seu HTML, você pode inserir o outro tipo de aspas no texto, por exemplo, que não ocorrerá erro, desta forma: </p> + +<pre class="brush: html notranslate"><a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a></pre> + +<p>No entanto, se você quiser incluir aspas, dentro de aspas onde ambas as aspas são do mesmo tipo (aspas simples ou aspas duplas), será necessário usar entidades HTML para as aspas. <span title="">Por exemplo, isso irá quebrar:</span></p> + +<pre class="example-bad brush: html notranslate"><a href='http://www.example.com' title='Isn't this fun?'>A link to my example.</a></pre> + +<p>Então você precisa fazer isso:</p> + +<pre class="brush: html notranslate"><a href='http://www.example.com' title='Isn&#39;t this fun?'>A link to my example.</a></pre> + +<h2 id="Anatomia_de_um_documento_HTML">Anatomia de um documento HTML</h2> + +<p>Já vimos os conceitos básicos dos elementos individuais do HTML, mas eles não são muito úteis sozinhos, Vamos aprender como estes elementos individuais são combinados entre si para criar uma página HTML inteira:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>My test page</title> + </head> + <body> + <p>This is my page</p> + </body> +</html></pre> + +<p>Neste código nós temos:</p> + +<ol> + <li><code><!DOCTYPE html></code>: O doctype. Nas névoas do tempo, quando o HTML era recente (por volta de 1991/2), doctypes funcionavam como links para uma série de regras as quais uma página HTML tinha que seguir para ser considerada uma página com um bom HTML, o que poderia significar a verificação automática de erros e outras coisas úteis. Ele costumava ser assim: + + <pre class="notranslate"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" +"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></pre> + <span class="tlid-translation translation" lang="pt"><span title="">No entanto, atualmente, ninguém se importa com eles, e eles são realmente apenas um artefato histórico que precisa ser incluído para que tudo funcione corretamente.</span> <span title=""><! DOCTYPE html> é a menor cadeia de caracteres que conta como um doctype válido;</span> <span title="">é tudo o que você realmente precisa saber.</span></span></li> + <li><code><html></html></code>: O elemento <a href="/pt-BR/docs/Web/HTML/Element/html" title="The HTML <html> element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element."><code><html></code></a> envolve o conteúdo da página inteira e é conhecido como o "elemento raiz" da página HTML.</li> + <li><code><head></head></code>: O elemento <a href="/pt-BR/docs/Web/HTML/Element/head" title="The HTML <head> element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets."><code><head></code></a> atua como um container para todo o conteúdo da página HTML que não é visível para os visitantes do site. Isso inclui palavras-chave e a descrição da página que você quer que apareça nos resultados de busca, o CSS para estilizar o conteúdo da página (apesar de ser recomendado faze-lo num aquivo separado), declaração de conjunto de caracteres, e etc. Você aprenderá mais sobre isso no próximo artigo da série.</li> + <li><code><meta charset="utf-8"></code>: Este elemento define o tipo da codificação dos caracteres que o seu documento deve usar, neste caso, para o tipo UTF-8, que inclui a maioria dos caracteres das linguas humanas escritas. Essencialmente, ele consegue lidar com qualquer tipo de conteúdo textual que você puder colocar no documento. Não há motivos para não indicar essa informação e esse elemento ajuda a evitar vários problemas na sua página.</li> + <li><code><title></title></code>: O elemento <a href="/pt-BR/docs/Web/HTML/Element/title" title="The HTML Title element (<title>) defines the document's title that is shown in a browser's title bar or a page's tab."><code><title></code></a>. Isto define o título de sua página, que aparecerá na guia do navegador na qual a página está carregada e é usado para descrevê-la quando for salva nos favoritos.</li> + <li><code><body></body></code>: O elemento <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body" title="The HTML <body> Element represents the content of an HTML document. There can be only one <body> element in a document."><code><body></code></a> contém <em>todo</em> o conteúdo que você quer mostrar aos usuários quando eles visitarem sua página, como texto, imagens, vídeos, jogos, faixas de áudio reproduzíveis, ou qualquer outra coisa.</li> +</ol> + +<h3 id="Aprendizado_ativo_Adicionando_alguns_recursos_ao_documento_HTML">Aprendizado ativo: Adicionando alguns recursos ao documento HTML</h3> + +<p>Se você quiser experimentar como funciona um documento HTML no seu computador, você pode:</p> + +<ol> + <li>Copiar o exemplo de página HTML mostrada acima.</li> + <li>Criar um novo documento em seu editor de texto.</li> + <li>Colar o código no novo arquivo de texto.</li> + <li>Salvar o arquivo com o nome <code>index.html</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Você também pode encontrar o template básico de HTML no <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">MDN Learning Area Github repo</a>.</p> +</div> + +<p>Você pode abrir este arquivo no navegador para ver como o código renderizado se apresenta, e então, editar o código e atualizar a página no navegador para ver o resultado com as mudanças. Inicialmente será exibido assim:</p> + +<p><img alt="A simple HTML page that says This is my page" src="https://mdn.mozillademos.org/files/12279/template-screenshot.png" style="display: block; height: 365px; margin: 0px auto; width: 595px;">Neste exercício, você pode editar o código localmente em seu computador, com descrito acima, ou você pode editá-lo na janela de exemplo editável abaixo (esta janela editável representa apenas o conteúdo do elemento <code><body></code> , neste caso). Nós gostaríamos que você seguisse as seguintes etapas:</p> + +<ul> + <li>Logo abaixo da tag de abertura <a href="/pt-BR/docs/Web/HTML/Element/body" title="The HTML <body> Element represents the content of an HTML document. There can be only one <body> element in a document."><code><body></code></a>, adicione um título principal para o documento. Isso deve estar dentro da tag de abertura <code><h1></code>e da tag de fechamento <code></h1></code> .</li> + <li>Edite o conteúdo do parágrafo para incluir algum texto sobre algo de seu interesse.</li> + <li>Faça com que todas as palavras importantes sejam destacadas em negrito, colocando-as dentro da tag de abertura <code><strong></code> e da tag de fechamento <code></strong></code> .</li> + <li>Adicione um link ao seu parágrafo, conforme <a href="/pt-BR/Aprender/HTML/Introducao_ao_HTML/Getting_started#Aprendizado_ativo_Adicionando_atributos_a_um_elemento">explicado anteriormente neste artigo</a>.</li> + <li>conforme explicado anteriormente no artigo. <span title="">Você receberá pontos de bônus se conseguir vincular a uma imagem diferente (localmente no seu computador ou em outro lugar da web).</span></li> +</ul> + +<p>Caso você cometa um erro, você poderá desfazê-lo usando o botão <em>Resetar</em>. Caso você realmente não saiba como fazer, pressione o botão <em>Mostrar solução</em> para ver a resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code3">Playable code3</h6> + +<pre class="brush: html notranslate"><h2>Saída ao vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Código editável</h2> +<p class="a11y-label">Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).</p> + +<textarea id="code" class="input" style="min-height: 100px;width: 95%"> + &lt;p&gt;Esta é minha página&lt;/p&gt; +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Resetar"> + <input id="solution" type="button" value="Mostrar Solução"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h1 { + color: blue; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +img { + max-width: 100%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar Solução'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar Solução') { + textarea.value = solutionEntry; + solution.value = 'Ocultar Solução'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar Solução'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Algumas músicas</h1><p>Gosto muito de <strong> tocar bateria </strong>. Um dos meus bateristas favoritos é Neal Peart, que toca na banda <a href="https://pt.wikipedia.org/wiki/Rush" title="Artigo da Rush na Wikipedia">Rush</a>. Meu álbum favorito do Rush atualmente é <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p><img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Mostrar Solução') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code3', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Espaços_em_branco_no_HTML">Espaços em branco no HTML</h3> + +<p>Nos exemplos anteriores, você pode ter percebido a presença de espaços em branco nos códigos — isto não é necessário; os dois trechos de códigos a seguir são equivalentes:</p> + +<pre class="brush: html notranslate"><p>Dogs are silly.</p> + +<p>Dogs are + silly.</p></pre> + +<p>Não importa quantos espaços em branco você use (que pode incluir caracteres de espaço, mas também quebras de linha), o analisador de HTML reduz cada um deles em um único espaço ao renderizar o código. Então, por que espaço em branco? A resposta é legibilidade — é muito mais fácil entender o que está acontecendo no seu código, se você o tiver bem formatado, e não apenas agrupado em uma grande confusão. Em nosso HTML, cada elemento aninhado é indentado em dois espaços a mais do que aquele em que está localizado. Depende de você que estilo de formatação você usa (quantos espaços para cada nível de recuo, por exemplo), mas considere formatá-lo.</p> + +<h2 id="Referências_de_entidades_incluindo_caracteres_especiais_no_HTML">Referências de entidades: incluindo caracteres especiais no HTML</h2> + +<p>No HTML, os caracteres <code><</code>, <code>></code>,<code>"</code>,<code>'</code> e o <code>&</code> são caracteres especiais. Eles fazem parte da própria sintaxe HTML; portanto, como você inclui um desses caracteres no seu texto? Por exemplo, se você realmente deseja usar um e comercial ou sinal de menor que, e não tenha ele interpretado como código.</p> + +<p>Temos que usar referências de caracteres — códigos especiais que representam caracteres e podem ser usados nessas circunstâncias. Cada referência de caractere é iniciada com um e comercial (&) e finalizada por um ponto e vírgula (;).</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Caractere literal</th> + <th scope="col">Referência de caractere equivalente</th> + </tr> + </thead> + <tbody> + <tr> + <td><</td> + <td>&lt;</td> + </tr> + <tr> + <td>></td> + <td>&gt;</td> + </tr> + <tr> + <td>"</td> + <td>&quot;</td> + </tr> + <tr> + <td>'</td> + <td>&apos;</td> + </tr> + <tr> + <td>&</td> + <td>&amp;</td> + </tr> + </tbody> +</table> + +<p>No exemplo abaixo, você pode ver dois parágrafos, que estão falando sobre tecnologias da web:</p> + +<pre class="brush: html notranslate"><p>Em HTML, você define um parágrafo usando o elemento <p>.</p> + +<p>Em HTML, você define um parágrafo usando o elemento &lt;p&gt;.</p></pre> + +<p>Na saída ao vivo abaixo, você pode ver que o primeiro parágrafo deu errado, porque o navegador pensa que a segunda instância de <p> está iniciando um novo parágrafo. O segundo parágrafo parece bom, porque substituímos os parênteses angulares por referências de caracteres.</p> + +<p>{{EmbedLiveSample('Referências_de_entidades_incluindo_caracteres_especiais_no_HTML', 7700, 200, "", "", "hide-codepen-jsfiddle")}}</p> + +<div class="note"> +<p><strong>Nota</strong>: A tabela com todas as referências de caracteres disponíveis em HTML pode ser encontrada na Wikipédia: <a class="external text" href="http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references" rel="nofollow">List of XML and HTML character entity references</a>. Observe que você não precisa usar referências de entidade para outros símbolos, pois os navegadores modernos manipularão os símbolos reais muito bem, desde que a codificação de caracteres do HTML esteja definida como UTF-8.</p> +</div> + +<h2 id="Comentários_no_HTML">Comentários no HTML</h2> + +<p>Em HTML, assim como na maioria das linguagens de programação, há um mecanismo para escrevermos comentários no código — comentários são ignorados pelo navegador e são invisíveis para o usuário, seu propósito é permitir a inclusão de comentários para descrever como o código funciona, especificar o que cada parte dele faz, e por ai vai. <span class="tlid-translation translation" lang="pt"><span title="">Isso pode ser muito útil se você retornar a uma base de código em que não trabalhou há muito tempo e não se lembrar do que fez </span></span> — <span class="tlid-translation translation" lang="pt"><span title=""> ou se você entregar seu código para outra pessoa trabalhar.</span></span></p> + +<p>Para transformar uma seção do conteúdo HTML em um comentário, você precisa agrupá-lo nos marcadores especiais <code><!--</code> e <code>--></code>, por exemplo:</p> + +<pre class="brush: html notranslate"><p>Eu não estou dentro de um comentário</p> + +<!-- <p>Eu estou!</p> --></pre> + +<p>Como você pode ver abaixo, o primeiro parágrafo fica visível na saída ao vivo, mas o segundo (que é um comentário) não.</p> + +<p>{{ EmbedLiveSample('Comentários_no_HTML', 700, 100) }}</p> + +<h2 id="Sumário">Sumário</h2> + +<p>Você chegou ao final do artigo — esperamos que tenha gostado do seu tour pelos princípios básicos do HTML! Nesse ponto, você deve entender como é a linguagem, como ela funciona em um nível básico e ser capaz de escrever alguns elementos e atributos. Este é o lugar perfeito para se estar agora, já que os artigos subseqüentes deste módulo abordarão algumas das coisas que você já examinou com mais detalhes e introduzirão alguns novos conceitos da linguagem. Fique ligado!</p> + +<div class="note"> +<p><strong>Nota</strong>: Nesse ponto, à medida que você começa a aprender mais sobre HTML, também pode querer explorar os conceitos básicos de Cascading Style Sheets, ou <a href="/pt-BR/docs/Aprender/CSS">CSS</a>. CSS é a linguagem usada para estilizar suas páginas da web (por exemplo, alterando a fonte ou as cores ou alterando o layout da página). HTML e CSS vão muito bem juntos, como você descobrirá em breve.</p> +</div> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="/pt-BR/docs/Web/HTML/Applying_color">Aplicando cores a elementos HTML usando CSS</a> </li> +</ul> + +<div>{{NextMenu("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML")}}</div> + +<h2 id="Neste_módulo">Neste módulo</h2> + +<ul> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML">O que está no cabeçalho? Metadados em HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando links</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites">Estrutura do documento e site</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Debugging_HTML">Depurando HTML</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Marking_up_a_letter">Marcando uma carta</a></li> + <li><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Structuring_a_page_of_content">Estruturando o conteudo de uma página</a></li> +</ul> diff --git a/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html b/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html new file mode 100644 index 0000000000..47ca918b68 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/html_text_fundamentals/index.html @@ -0,0 +1,955 @@ +--- +title: Fundamentos do texto em HTML +slug: Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML +tags: + - Aprender + - Guía + - HTML + - Iniciante + - Introdução + - Texto + - cabeçalho + - parágrafo + - semántica +translation_of: Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</div> + +<p class="summary">Um dos principais objetivos do HTML é dar estrutura de texto e significado, também conhecido como {{glossary("semantics", "semântica")}}), para que um navegador possa exibi-lo corretamente. Este artigo explica a forma como {{glossary("HTML")}} pode ser usado para estruturar uma página de texto, adicionar títulos e parágrafos, enfatizar palavras, criar listas e muito mais.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Familiaridade básica em HTML, tal como coberto <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com o HTML.</a></td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprenda como marcar uma página básica de texto para dar-lhe estrutura e significado — incluindo parágrafos, títulos, listas, ênfase e citações.</td> + </tr> + </tbody> +</table> + +<h2 id="O_básico_Cabeçalhos_e_Parágrafos">O básico: Cabeçalhos e Parágrafos</h2> + +<p>O texto mais estruturado é composto por títulos e parágrafos,esteja você lendo uma história, um jornal, um livro da faculdade, uma revista, etc.</p> + +<p><img alt="An example of a newspaper front cover, showing use of a top level heading, subheadings and paragraphs." src="https://mdn.mozillademos.org/files/12371/newspaper_small.jpg" style="display: block; margin: 0 auto;"></p> + +<p>O conteúdo estruturado torna a experiência de leitura mais fácil e mais agradável.</p> + +<p>Em HTML, cada parágrafo deve ser envolvido em um elemento {{htmlelement("p")}} , assim:</p> + +<pre class="brush: html notranslate"><p>Eu sou um parágrafo, oh sim, eu sou.</p></pre> + +<p>Cada título deve ser envolvido em um elemento de título:</p> + +<pre class="brush: html notranslate"><h1>Eu sou o título da história.</h1></pre> + +<p>Existem seis elementos de título — {{htmlelement("h1")}}, {{htmlelement("h2")}}, {{htmlelement("h3")}}, {{htmlelement("h4")}}, {{htmlelement("h5")}} e {{htmlelement("h6")}} . Cada elemento representa um nível diferente de conteúdo no documento; <code><h1></code> representa o título principal, <code><h2></code> representa subtítulos, <code><h3></code> representa sub-subtítulos, e assim por diante.</p> + +<h3 id="Implementando_hierarquia_estrutural">Implementando hierarquia estrutural</h3> + +<p>Como exemplo, em uma história, <code><h1></code> representaria o título da história, <code><h2></code> representaria o título de cada capítulo e <code><h3></code> representaria sub-seções de cada capítulo, e assim por diante.</p> + +<pre class="brush: html notranslate"><h1>O furo esmagador</h1> + +<p>Por Chris Mills</p> + +<h2>Capítulo 1: A noite escura</h2> + +<p>Era uma noite escura. Em algum lugar, uma coruja piou. A chuva caiu no chão ...</p> + +<h2>Capítulo 2: O eterno silêncio</h2> + +<p>Nosso protagonista não podia ver mais que um relance da figura sombria ...</p> + +<h3>O espectro fala</h3> + +<p>Várias horas se passaram, quando, de repente, o espectro ficou em pé e exclamou: "Por favor, tenha piedade da minha alma!"</p></pre> + +<p>Depende realmente de você, o quê, exatamente, representam os elementos envolvidos, desde que a hierarquia faça sentido. Você só precisa ter em mente algumas das melhores práticas ao criar tais estruturas:</p> + +<ul> + <li>Preferencialmente, você deve usar apenas um <code><h1></code> por página — esse é o título do nível superior e todos os outros ficam abaixo dele, na hierarquia.</li> + <li>Certifique-se de usar os títulos na ordem correta na hierarquia. Não use <code><h3></code> para representar subtítulos, seguido de <code><h2></code>para representar sub-subtítulos - isso não faz sentido e levará a resultados estranhos.</li> + <li>Dos seis níveis de cabeçalho disponíveis, você deve usar no máximo três por página, a menos que considere necessário usar mais. Documentos com vários níveis (ou seja, uma hierarquia profunda de cabeçalho) tornam-se difíceis de navegar. Nessas ocasiões, é aconselhável espalhar o conteúdo por várias páginas, se possível.</li> +</ul> + +<h3 id="Por_que_precisamos_de_estrutura">Por que precisamos de estrutura?</h3> + +<p>Para responder a esta pergunta, dê uma olhada em <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> — o ponto de partida do nosso exemplo em execução para este artigo (uma boa receita de hummus.) Você deve salvar uma cópia desse arquivo em sua máquina local, pois será necessário para os exercícios posteriores. No momento, o corpo deste documento contém várias partes do conteúdo — elas não são marcadas de forma alguma, mas são separadas por quebras de linha (Enter/Return pressionado para ir para a próxima linha).</p> + +<p>No entanto, quando você abre o documento em seu navegador, você verá que o texto aparece como uma só parte!</p> + +<p><img alt="A webpage that shows a wall of unformatted text, because there are no elements on the page to structure it." src="https://mdn.mozillademos.org/files/14827/Screen%20Shot%202017-03-29%20at%2009.20.35.png" style="display: block; height: 377px; margin: 0px auto; width: 600px;"></p> + +<p>Isso ocorre porque não há elementos para dar a estrutura de conteúdo, então o navegador não sabe o que é um título e o que é um parágrafo. Além disso:</p> + +<ul> + <li>Os usuários que olham para uma página web tendem a procurar rapidamente conteúdo relevante, muitas vezes apenas lendo os títulos para começar (normalmente <a href="http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/">passamos um tempo muito curto em uma página web</a>). Se eles não conseguem ver nada útil dentro de alguns segundos, eles provavelmente ficarão frustrados e irão para outro lugar.</li> + <li>Os mecanismos de pesquisa que indexam sua página consideram o conteúdo dos títulos como palavras-chave importantes para influenciar os rankings de pesquisa da página. Sem cabeçalhos, sua página irá funcionar mal em termos de {{glossary("SEO")}} (Search Engine Optimization).</li> + <li>As pessoas com deficiência visual, muitas vezes, não leem páginas da web; elas escutam-na em vez disso. Isso é feito com um software chamado <a href="https://pt.wikipedia.org/wiki/Leitor_de_tela" title="screen readers">leitor de tela</a>. Este software fornece formas de obter acesso rápido a determinado conteúdo de texto. Entre as várias técnicas utilizadas, elas fornecem um esboço do documento lendo os títulos, permitindo que seus usuários encontrem as informações que precisam rapidamente. Se os títulos não estiverem disponíveis, eles serão obrigados a ouvir todo o documento lido em voz alta.</li> + <li>Para criar um estilo de conteúdo com {{glossary("CSS")}}, ou fazer coisas interessantes com {{glossary("JavaScript")}}, você precisa ter elementos que envolvam o conteúdo relevante, assim CSS/JavaScript pode efetivamente segmentá-lo.</li> +</ul> + +<p>Nós, portanto, precisamos dar marcações estruturais ao nosso conteúdo.</p> + +<h3 id="Aprendizagem_ativa_Fornecendo_nossa_estrutura_de_conteúdo">Aprendizagem ativa: Fornecendo nossa estrutura de conteúdo</h3> + +<p>Vamos pular diretamente com um exemplo ao vivo. No exemplo abaixo, adicione elementos ao texto bruto no campo <em>Entrada</em> para que ele apareça como um título e dois parágrafos no campo <em>Saída</em>.</p> + +<p>Se você cometer um erro, você sempre pode reiniciar usando o botão <em>Resetar</em>. Se você ficar preso, pressione o botão <em>Mostrar solução</em> para ver a resposta.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Saída ao vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Código editável</h2> +<p class="a11y-label">Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">Minha pequena história: sou policial e meu nome é Trish. + +Minhas pernas são feitas de papelão e sou casada com um peixe.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Resetar"> + <input id="solution" type="button" value="Mostrar solução"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solução'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solução') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solução'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solução'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Minha pequena história</h1>\n<p>Sou policial e meu nome é Trish.</p>\n<p>Minhas pernas são feitas de papelão e sou casada com um peixe.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Mostrar solução') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Por_que_precisamos_de_semântica">Por que precisamos de semântica?</h3> + +<p>A semântica estã em todos os lugares — contamos com experiência anterior para nos dizer qual é a função dos objetos do dia a dia. Quando vemos algo, sabemos qual será a sua função. Então, por exemplo, esperamos que um semáforo vermelho signifique "pare" e um semáforo verde signifique "ir". As coisas podem ficar complicadas muito rapidamente se a semântica errada for aplicada (os países usam vermelho para significar "ir"? Espero que não).</p> + +<p>Na mesma linha, precisamos ter certeza de que estamos usando os elementos corretos, dando ao nosso conteúdo o significado, função ou aparência corretos. Nesse contexto, o elemento {{htmlelement("h1")}} também é um elemento semântico, que dá o texto que envolve a representação (ou significado) de "um título de nível superior em sua página".</p> + +<pre class="brush: html notranslate"><h1>Este é um título de nível superior</h1></pre> + +<p>Por padrão, o navegador fornecerá um tamanho de fonte grande para torná-lo um cabeçalho (embora você possa estilizá-lo como qualquer coisa que você quiser usando CSS). Mais importante, seu valor semântico será usado de várias maneiras, por exemplo, por mecanismos de pesquisa e leitores de tela (como mencionado acima).</p> + +<p>Por outro lado, você pode fazer com que qualquer elemento se pareça um título de nível superior. Considere o seguinte:</p> + +<pre class="brush: html notranslate"><span style="font-size: 32px; margin: 21px 0;">Este é um título de nível superior?</span></pre> + +<p>Este é um elemento {{htmlelement("span")}}. Não tem semântica. Você usa-o para agrupar conteúdo quando deseja aplicar o CSS (ou fazer algo com JavaScript) sem dar-lhe nenhum significado extra (você saberá mais sobre isto mais tarde, no curso). Nós aplicamos alguns CSS para fazê-lo parecer um título de nível superior, mas como não tem valor semântico, ele não receberá nenhum dos benefícios extras descritos acima. É uma boa idéia usar o elemento HTML relevante para o trabalho.</p> + +<h2 id="Listas">Listas</h2> + +<p>Agora voltemos nossa atenção para as listas. As listas estão em toda parte na vida — de sua lista de compras à lista de instruções que você seguiu inconscientemente para chegar à sua casa todos os dias, para as listas das instruções que está seguindo nesses tutoriais! As listas também estão na Web e temos três tipos diferentes para prestarmos atenção.</p> + +<h3 id="Não_ordenada">Não ordenada</h3> + +<p>As listas não ordenadas são usadas para marcar listas de itens para os quais a ordem dos itens não importa — vamos pegar uma lista de compras como um exemplo.</p> + +<pre class="notranslate">leite +ovos +pão +homus</pre> + +<p>Toda lista desordenada começa com um {{htmlelement("ul")}} — isso envolve todos os itens da lista:</p> + +<pre class="brush: html notranslate"><ul> +leite +ovos +pão +homus +</ul></pre> + +<p>O último passo é envolver cada item da lista em um elemento {{htmlelement("li")}} (elemento da lista):</p> + +<pre class="brush: html notranslate"><ul> + <li>leite</li> + <li>ovos</li> + <li>pão</li> + <li>homus</li> +</ul></pre> + +<h4 id="Aprendizagem_ativa_Marcando_uma_lista_desordenada">Aprendizagem ativa: Marcando uma lista desordenada</h4> + +<p>Tente editar a amostra, ao vivo, abaixo para criar sua própria lista não ordenada HTML.</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Saída ao vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Código editável</h2> +<p class="a11y-label">Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).</p> + +<textarea id="code" class="input" style="min-height: 100px; width: 95%">leite +ovos +pão +hummus</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Resetar"> + <input id="solution" type="button" value="Mostrar solução"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solução'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solução') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solução'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solução'; + } + updateCode(); +}); + +var htmlSolution = '<ul>\n<li>leite</li>\n<li>ovos</li>\n<li>pão</li>\n<li>hummus</li>\n</ul>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Mostrar solução') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 400, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Ordenada">Ordenada</h3> + +<p>As listas ordenadas são listas em que a ordem dos itens é importante — vamos seguir um conjunto de instruções como exemplo:</p> + +<pre class="notranslate">Dirija até o final da estrada +Vire à direita +Vá em frente nas duas primeiras rotatórias +Vire à esquerda na terceira rotatória +A escola fica à sua direita, a 300 metros da estrada</pre> + +<p>A estrutura de marcação é a mesma das listas não ordenadas, exceto que você deve conter os itens da lista em um elemento {{htmlelement("ol")}}, em vez de <code><ul></code>:</p> + +<pre class="brush: html notranslate"><ol> + <li>Dirija até o final da estrada</li> + <li>Vire à direita</li> + <li>Vá em frente nas duas primeiras rotatórias</li> + <li>Vire à esquerda na terceira rotatória</li> + <li>A escola fica à sua direita, a 300 metros da estrada</li> +</ol></pre> + +<h4 id="Aprendizagem_ativa_Marcando_uma_lista_ordenada">Aprendizagem ativa: Marcando uma lista ordenada</h4> + +<p>Tente editar a amostra ao vivo abaixo, para criar sua própria lista ordenada por HTML.</p> + +<div class="hidden"> +<h6 id="Playable_code_3">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Saída ao vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Código editável</h2> +<p class="a11y-label">Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Dirija até o final da estrada +Vire à direita +Vá em frente nas duas primeiras rotatórias +Vire à esquerda na terceira rotatória +A escola fica à sua direita, a 300 metros da estrada</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Resetar"> + <input id="solution" type="button" value="Mostrar solução"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solução'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solução') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solução'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solução'; + } + updateCode(); +}); + +var htmlSolution = '<ol>\n<li>Dirija até o final da estrada</li>\n<li>Vire à direita</li>\n<li>Vá em frente nas duas primeiras rotatórias</li>\n<li>Vire à esquerda na terceira rotatória</li>\n<li>A escola fica à sua direita, a 300 metros da estrada</li>\n</ol>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Mostrar solução') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_3', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Aprendizagem_ativa_marcando_nossa_página_de_receita">Aprendizagem ativa: marcando nossa página de receita</h3> + +<p>Então, neste ponto do artigo, você tem todas as informações necessárias para marcar nosso exemplo de página de receita. Você pode optar por salvar uma cópia local do nosso arquivo inicial de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-start.html">text-start.html</a> e fazer o trabalho lá, ou fazê-lo no exemplo editável abaixo. Fazê-lo, localmente, provavelmente será melhor, pois você conseguirá salvar o trabalho que está fazendo. Enquanto que, se o preencher no exemplo editável, ele será perdido na próxima vez que você abrir a página. Ambos têm prós e contras.</p> + +<div class="hidden"> +<h6 id="Playable_code_4">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Saída ao vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Código editável</h2> +<p class="a11y-label">Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%">Receita rápida de hummus + + Esta receita faz hummus rápido e saboroso, sem mexer. Foi adaptado de várias receitas diferentes que li ao longo dos anos. + + Hummus é uma deliciosa pasta grossa usada fortemente em pratos gregos e do Oriente Médio. É muito saboroso com salada, carnes grelhadas e pães pitta. + + Ingredientes + + 1 lata (400g) de grão de bico + 175g de tahine + 6 tomates secos + Metade de pimenta vermelha + Uma pitada de pimenta caiena + 1 dente de alho + Uma pitada de azeite + + Instruções + + Retire a pele do alho e pique + Retire todas as sementes e caule da pimenta e pique + Adicione todos os ingredientes em um processador de alimentos + Processar todos os ingredientes em uma pasta + Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo + Se você deseja um hummus suave, processe-o por mais tempo + + Para um sabor diferente, você pode tentar misturar uma pequena quantidade de limão e coentro, pimenta, limão e chipotle, harissa e hortelã ou espinafre e queijo feta. Experimente e veja o que funciona para você. + + Armazenamento + + Leve à geladeira o hummus processado em um recipiente fechado. Você poderá usá-lo por cerca de uma semana depois de fazer isso. Se começar a ficar borbulhante, você definitivamente deve descartá-lo. + + Hummus é adequado para congelamento; você pode descongelá-lo e usá-lo dentro de alguns meses.</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Resetar"> + <input id="solution" type="button" value="Mostrar solução"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solução'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solução') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solução'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solução'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Receita rápida de hummus</h1>\n\n<p>Esta receita faz hummus rápido e saboroso, sem mexer. Foi adaptado de várias receitas diferentes que li ao longo dos anos.</p>\n\n<p>Hummus é uma deliciosa pasta grossa usada fortemente em pratos gregos e do Oriente Médio. É muito saboroso com salada, carnes grelhadas e pães pitta.</p>\n\n<h2>Ingredientes</h2>\n\n<ul>\n<li>1 lata (400g) de grão de bico</li>\n<li>175g de tahine</li>\n<li>6 tomates secos</li>\n<li>Metade de pimenta vermelha</li>\n<li>Uma pitada de pimenta caiena</li>\n<li>1 dente de alho</li>\n<li>Uma pitada de azeite</li>\n</ul>\n\n<h2>Instruções</h2>\n\n<ol>\n<li>Retire a pele do alho e pique</li>\n<li>Retire todas as sementes e caule da pimenta e pique</li>\n<li>Adicione todos os ingredientes em um processador de alimentos</li>\n<li>Processar todos os ingredientes em uma pasta</li>\n<li>Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo</li>\n<li>Se você deseja um hummus suave, processe-o por mais tempo</li>\n</ol>\n\n<p>Para um sabor diferente, você pode tentar misturar uma pequena quantidade de limão e coentro, pimenta, limão e chipotle, harissa e hortelã ou espinafre e queijo feta. Experimente e veja o que funciona para você.</p>\n\n<h2>Armazenamento</h2>\n\n<p>Leve à geladeira o hummus processado em um recipiente fechado. Você poderá usá-lo por cerca de uma semana depois de fazer isso. Se começar a ficar borbulhante, você definitivamente deve descartá-lo.</p>\n\n<p>Hummus é adequado para congelamento; você pode descongelá-lo e usá-lo dentro de alguns meses.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Mostrar solução') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_4', 900, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>Se você ficar preso, você sempre pode pressionar o botão<em> Mostrar solução</em>, ou confira nosso exemplo de <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/html-text-formatting/text-complete.html">text-complete.html</a> em nosso repositório Github.</p> + +<h3 id="Aninhando_listas">Aninhando listas</h3> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Não há problema em aninhar uma lista dentro de outra.</span> <span title="">Você pode ter algumas sub-listas abaixo de uma lista de nível superior.</span> <span title="">Vamos pegar a segunda lista do nosso exemplo de receita</span></span>:</p> + +<pre class="brush: html notranslate"><ol> + <li>Retire a pele do alho e pique</li> + <li>Retire todas as sementes e caule da pimenta e pique</li> + <li>Adicione todos os ingredientes em um processador de alimentos</li> + <li>Processar todos os ingredientes em uma pasta</li> + <li>Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo</li> + <li>Se você deseja um hummus suave, processe-o por mais tempo</li> +</ol> </pre> + +<p>Uma vez que as duas últimas listas estão intimamente relacionadas com a anterior (elas leem como sub-instruções ou escolhas que se encaixam abaixo dessa lista), pode fazer sentido aninhá-las dentro de sua própria lista desordenada e colocar essa lista dentro da quarta lista. Isso pareceria assim:</p> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Como os dois últimos itens da lista estão intimamente relacionadas (eles são lidos como sub-instruções ou opções que se encaixam abaixo dessa lista), pode fazer sentido aninha-los em sua própria lista não ordenada e colocá-los no quarto item da lista atual</span><span title="">.</span> <span title="">Isso seria assim:</span></span></p> + +<pre class="brush: html notranslate"><ol> + <li>Retire a pele do alho e pique</li> + <li>Retire todas as sementes e caule da pimenta e pique</li> + <li>Adicione todos os ingredientes em um processador de alimentos</li> + <li>Processar todos os ingredientes em uma pasta + <ul> + <li>Se você quiser um hummus grosso "pesado", processe-o por um curto período de tempo</li> + <li>Se você deseja um hummus suave, processe-o por mais tempo</li> + </ul> + </li> +</ol></pre> + +<p>Tente voltar ao exemplo de aprendizagem ativo anterior e atualizar a segunda lista como esta aqui.</p> + +<h2 id="Ênfase_e_importância">Ênfase e importância</h2> + +<p>Na linguagem humana, muitas vezes enfatizamos certas palavras para alterar o significado de uma frase, e muitas vezes queremos marcar certas palavras como importantes ou diferentes de alguma forma. O HTML fornece vários elementos semânticos que nos permitem marcar o conteúdo textual com esses efeitos, e, nesta seção, vamos ver alguns dos mais comuns.</p> + +<h3 id="Ênfase">Ênfase</h3> + +<p>Quando queremos acrescentar ênfase na linguagem falada, enfatizamos certas palavras, alterando sutilmente o significado do que estamos dizendo. Da mesma forma, em linguagem escrita tendemos a enfatizar as palavras colocando-as em itálico. Por exemplo, as seguintes duas frases têm significados diferentes.</p> + +<p>Estou <em>feliz </em>que você não chegou <em>atrasado</em>.</p> + +<p>Estou <strong>feliz </strong>que você não chegou <strong>atrasado</strong>.</p> + +<p>A primeira frase parece genuinamente aliviada de que a pessoa não estava atrasada. Em contraste, a segunda parece ser sarcástica ou passiva-agressiva, expressando aborrecimento que a pessoa chegou um pouco atrasada.</p> + +<p>Em HTML usamos o elemento de ênfase {{htmlelement("em")}} para marcar tais instâncias. Além de tornar o documento mais interessante de ler, estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem isso como itálico por padrão, mas você não deve usar esta tag apenas para obter estilo itálico. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e alguns CSS, ou talvez um elemento {{htmlelement("i")}} (veja abaixo).</p> + +<pre class="brush: html notranslate"><p>Eu estou <em>feliz</em> você não está <em>atrasado</em>.</p></pre> + +<h3 id="Importância">Importância</h3> + +<p>Para enfatizar palavras importantes, tendemos a enfatizá-las na linguagem falada e colocá-la em <strong>negrito</strong> na linguagem escrita. Por exemplo:</p> + +<p>Este líquido é <strong>altamente tóxico</strong>.</p> + +<p>Eu estou contando com você. <strong>Não</strong> se atrase!</p> + +<p>Em HTML usamos o elemento {{htmlelement("strong")}} (importância) para marcar tais instâncias. Além de tornar o documento mais útil, novamente estes são reconhecidos pelos leitores de tela e falados em um tom de voz diferente. Os navegadores exibem este texto como negrito por padrão, mas você não deve usar esta marca apenas para obter um estilo negrito. Para fazer isso, você usaria um elemento {{htmlelement("span")}} e algum CSS, ou talvez um {{htmlelement("b")}} (veja abaixo).</p> + +<pre class="brush: html notranslate"><p>Este líquido é <strong>altamente tóxico</strong>.</p> + +<p>Estou contando com você. <strong>Não</strong> se atrase!</p></pre> + +<p>Você pode aninhar importância e ênfase entre si, se desejar:</p> + +<pre class="brush: html notranslate"><p>Este líquido é <strong>altamente tóxico</strong> - +Se você beber, <strong>você pode <em>morrer</em></strong>.</p></pre> + +<h3 id="Aprendizagem_ativa_Vamos_ser_importantes!">Aprendizagem ativa: Vamos ser importantes!</h3> + +<p>Nesta seção de aprendizado ativo, fornecemos um exemplo editável. Nele, gostaríamos que você tentasse adicionar ênfase e importância às palavras que acha que precisam delas, apenas para praticar um pouco.</p> + +<div class="hidden"> +<h6 id="Playable_code_5">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Saída ao vivo</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Código editável</h2> +<p class="a11y-label">Pressione Esc para afastar o foco da área de código (Tab insere um caractere de tabulação).</p> + +<textarea id="code" class="input" style="min-height: 200px; width: 95%"><h1>Notícia importante</h1> +<p>No domingo, 9 de janeiro de 2010, uma gangue de góticos foi + vista roubando vários gnomos de jardim de um + centro comercial no centro de Milwaukee. Eles estavam + todos vestindo macacões verdes e chapéus bobos, que + pareciam ter a forma de uma baleia. Se alguém + tiver alguma informação sobre este incidente, por favor + entre em contato com a polícia.</p></textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Resetar"> + <input id="solution" type="button" value="Mostrar solução"> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">var textarea = document.getElementById('code'); +var reset = document.getElementById('reset'); +var solution = document.getElementById('solution'); +var output = document.querySelector('.output'); +var code = textarea.value; +var userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Mostrar solução'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Mostrar solução') { + textarea.value = solutionEntry; + solution.value = 'Ocultar solução'; + } else { + textarea.value = userEntry; + solution.value = 'Mostrar solução'; + } + updateCode(); +}); + +var htmlSolution = '<h1>Notícia importante</h1>\n<p>No <strong>domingo, 9 de janeiro de 2010</strong>, uma gangue de <em>góticos</em> foi vista roubando <strong><em>vários</em> gnomos de jardim</strong> de um centro comercial no centro de <strong>Milwaukee</strong>. Eles estavam todos <em>vestindo macacões verdes e chapéus bobos</em>, que pareciam ter a forma de uma baleia. Se alguém tiver <strong>alguma informação</strong> sobre este incidente, por favor entre em contato com a <strong>polícia</strong>.</p>'; +var solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + var scrollPos = textarea.scrollTop; + var caretPos = textarea.selectionStart; + + var front = (textarea.value).substring(0, caretPos); + var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Mostrar solução') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_5', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h3 id="Itálico_negrito_sublinhado...">Itálico, negrito, sublinhado...</h3> + +<p>Os elementos que discutimos até agora têm clara semântica associada. A situação com {{htmlelement("b")}}, {{htmlelement("i")}}, e com {{htmlelement("u")}} é um pouco mais complicada. Eles surgiram para que as pessoas pudessem escrever negrito, itálico ou texto sublinhado em uma época em que o CSS ainda era pouco suportado. Elementos como este, que apenas afetam a apresentação e não a semântica, são conhecidos como <strong>elementos de apresentação</strong> e não devem mais ser usados, porque, como já vimos, a semântica é importante para a acessibilidade, SEO, etc.</p> + +<p>O HTML5 redefiniu <code><b></code>, <code><i></code> e <code><u></code> com novas funções semânticas um pouco confusas.</p> + +<p>Aqui está a melhor regra geral: provavelmente é apropriado usar <code><b></code>, <code><i></code> ou <code><u></code> para transmitir um significado tradicionalmente transmitido com negrito, itálico ou sublinhado, desde que não exista um elemento mais adequado. No entanto, sempre é essencial manter uma mentalidade de acessibilidade. O conceito de itálico não é muito útil para pessoas que usam leitores de tela ou para pessoas que usam um sistema de escrita diferente do alfabeto Latino.</p> + +<ul> + <li>{{htmlelement("i")}} é usado para transmitir um significado tradicionalmente transmitido por itálico: palavras estrangeiras, designação taxonômica, termos técnicos, um pensamento...</li> + <li>{{htmlelement("b")}} é usado para transmitir um significado tradicionalmente transmitido por negrito: palavras-chave, nomes de produtos, sentença principal...</li> + <li>{{htmlelement("u")}} é usado para transmitir um significado tradicionalmente transmitido pelo sublinhado: nome próprio, erro de ortografia...</li> +</ul> + +<div class="note"> +<p>Um aviso amável sobre o sublinhado: <strong>as pessoas associam fortemente o sublinhado com hiperlinks</strong>. Portanto, na Web, é melhor sublinhar apenas os links. Use o elemento <code><u></code> quando for semanticamente apropriado, mas considere usar o CSS para alterar o sublinhado padrão para algo mais apropriado na Web. O exemplo abaixo ilustra como isso pode ser feito.</p> +</div> + +<pre class="brush: html notranslate"><!-- nomes científicos --> +<p> + O Colibri Ruby-throated (<i>Archilochus colubris</i>) + é o colibri mais comum do Leste da América do Norte. +</p> + +<!-- palavras estrangeiras --> +<p> + O menu era um mar de palavras exóticas como <i lang="uk-latn">vatrushka</i>, + <i lang="id">nasi goreng</i> e <i lang="fr">soupe à l'oignon</i>. +</p> + +<!-- um erro de ortografia conhecido --> +<p> + Algum dia eu vou aprender como <u style="text-decoration-line: underline; text-decoration-style: wavy;">jogar</u> melhor. +</p> + +<!-- Destaque as palavras-chave em um conjunto de instruções --> +<ol> + <li> + <b>Fatie</b>dois pedaços de pão do pão. + </li> + <li> + <b>Colocar</b> uma fatia de tomate e uma folha de + alface entre as fatias de pão. + </li> +</ol></pre> + +<h2 id="Teste_suas_habilidades!"><span class="tlid-translation translation" lang="pt"><span title="">Teste suas habilidades</span></span>!</h2> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Você chegou ao final deste artigo, mas consegue se lembrar das informações mais importantes?</span> <span title="">Você pode encontrar alguns testes adicionais para verificar se você absorveu essas informações antes de prosseguir </span></span>—<span class="tlid-translation translation" lang="pt"><span title=""> consulte <a href="/pt-BR/docs/Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics">Teste suas habilidades: noções básicas de texto HTML</a>.</span></span></p> + +<h2 id="Resumo">Resumo</h2> + +<p><span class="tlid-translation translation" lang="pt"><span title="">Por enquanto é isso!</span> <span title="">Este artigo deve fornecer uma boa idéia de como começar a marcar texto em HTML e apresentar alguns dos elementos mais importantes nessa área.</span> <span title="">Há muito mais elementos semânticos a serem abordados nesta área, e veremos muito mais em nosso artigo de <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação avançada de texto</a>, mais adiante neste curso.</span> <span title="">No próximo artigo, veremos detalhadamente como <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">criar links</a>, possivelmente o elemento mais importante na Web.</span></span></p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML", "Learn/HTML/Introduction_to_HTML/Creating_hyperlinks", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/pt-br/learn/html/introduction_to_html/index.html b/files/pt-br/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..f0e69d61d4 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/index.html @@ -0,0 +1,69 @@ +--- +title: Introdução ao HTML +slug: Aprender/HTML/Introducao_ao_HTML +tags: + - Codificação de Script + - Estrutura + - HTML + - Introdução ao HTML + - Links + - Página de destino + - Texto + - cabeçalho + - semántica +translation_of: Learn/HTML/Introduction_to_HTML +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Em sua essência, {{glossary("HTML")}} é uma linguagem bastante simples composta de <a href="https://developer.mozilla.org/pt-BR/docs/Glossario/Elemento">elementos</a>, que podem ser aplicados a pedaços de texto para dar-lhes significado diferente em um documento (é um parágrafo? é uma lista de seleção? é parte de uma tabela?), estrutura um documento em seções lógicas (Possui um cabeçalho? Três colunas de conteúdo? Um menu de navegação?) e incorpora conteúdo como imagens e vídeos em uma página. Este módulo irá introduzir os dois primeiros e apresentar conceitos fundamentais e a sintaxe que você precisa saber para entender o HTML.</p> + +<h2 id="Pré-requisitos">Pré-requisitos</h2> + +<p>Antes de iniciar este módulo, você não precisa de nenhum conhecimento prévio sobre HTML, mas deve ter pelo menos uma familiaridade básica em utilizar computadores e utilizar a web passivamente (por exemplo, apenas navegando e consumindo conteúdo). Você deve ter um ambiente de trabalho básico configurado (como detalhado em <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os programas básicos</a>) e entender como criar e gerenciar arquivos (como detalhado em <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">Lidando com arquivos</a>). Ambos são partes do nosso módulo completo para iniciantes <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/Getting_started_with_the_web">indrodução à web</a>.</p> + +<div class="note"> +<p><span style="font-size: 14px;"><strong>Nota</strong></span>: Se você estiver trabalhando em um computador/tablet/outro dispositivo que não permita a criação de seus próprios arquivos, você pode testar (a maior parte) dos exemplos de códigos em um programa de codificação online como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://glitch.com/">Glitch</a>.</p> +</div> + +<h2 id="Guias">Guias</h2> + +<p>Este módulo contém os seguintes artigos, que te levarão por toda teoria básica do HTML e fornecerão muitas oportunidades para você testar algumas habilidades.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com o HTML</a></dt> + <dd>Abrange todo o básico do HTML, para você iniciar - nós definimos elementos, atributos e outros termos importantes, e mostramos onde eles se encaixam na linguagem. Também mostramos como uma página HTML típica e um elemento HTML é estruturado, e explicamos outros recursos básicos importantes da linguagem. Ao longo do caminho, nós brincaremos com algum HTML, para fazer você se interessar!</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML">O que está no cabeçalho? Metadados no HTML</a></dt> + <dd>O {{glossary("Head", "cabeçalho")}} de um documento HTML é a parte que <strong>não é</strong> mostrada no navegador web quando a página é carregada. Ele contém informações como o {{htmlelement("title")}} da página, links para {{glossary("CSS")}} (se você quiser estilizar seu conteúdo HTML com CSS), links para favicons personalizados e metadados (que são dados sobre o HTML, tais como quem o escreveu e palavras-chaves importantes que descrevem o documento).</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto HTML</a></dt> + <dd>Uma das principais funções do HTML é dar significado ao texto (também conhecido como {{glossary("Semantics", "semântica")}}), para que o navegador saiba como exibi-lo corretamente. Este artigo analisa como usar HTML para dividir um bloco de texto em uma estrutura de títulos e parágrafos, adicionar ênfase/importância nas palavras, criar listas e muito mais.</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">Criando hiperlinks</a></dt> + <dd>Os hiperlinks são realmente importantes — eles são o que faz da web o que ela é. Este artigo mostra a sintaxe necessária para criar um link e discute as melhores práticas para links.</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Formatacao_avancada_texto">Formatação de texto avançada</a></dt> + <dd>Existem muitos outros elementos em HTML para formatar o texto, que não apresentamos no artigo sobre os <a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML</a>. Os elementos aqui são menos conhecidos, mas ainda úteis para se conhecer. Neste artigo, você aprenderá sobre marcação de citações, listas de descrições, código de computador e outros textos relacionados, subscrito e sobrescrito, informações de contatos e muito mais.</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estrutura_de_documento_e_sites">Estrutura dos documentos e do site</a></dt> + <dd>Além de definir partes individuais de sua página (como "um parágrafo" ou "uma imagem"), o HTML também é usado para definir as áreas do seu site (como "o cabeçalho", "o menu de navegação" ou "a coluna de conteúdo principal"). Este artigo analisa como planejar uma estutura básica de site e como escrever o HTML para representar esta estrutura.</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Debugging_HTML">Depuração HTML</a></dt> + <dd>Escrever HTML é tranquilo, mas e se algo der errado, e você não conseguir descobrir onde o erro está no código? Este artigo irá apresentar algumas ferramentas que podem ajudar.</dd> +</dl> + +<h2 id="Avaliações">Avaliações</h2> + +<p>As avaliações a seguir testarão sua compreensão dos princípios básicos de HTML abordados nos guias acima.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Marcando_uma_carta">Marcando uma carta</a></dt> + <dd>Todos aprendemos a escrever uma carta mais cedo ou mais tarde; também é um exemplo útil para testar habilidades de formatação de texto. Nesta avaliação, você receberá uma carta para marcar.</dd> + <dt><a href="https://developer.mozilla.org/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Estruturando_uma_pagina_de_conteudo">Estruturando a página de conteúdo</a></dt> + <dd>Essa avaliação testa sua capacidade de utilizar HTML para estruturar uma página simples de conteúdo, contendo um cabeçalho, um rodapé, um menu de navegação, o conteúdo principal e uma barra lateral.</dd> +</dl> + +<h2 id="Veja_também">Veja também</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics/">Noções básica sobre alfabetização na web 1</a> (em inglês)</dt> + <dd>Um excelente curso da Fundação Mozilla que explora e testa muitas das habilidades discutidas no Módulo <em>Introdução ao HTML. </em>Os estudantes se familiarizam com a leitura, a redação e a participação na web neste módulo de seis partes. Descubra as bases da web através da produção e da colaboração.</dd> +</dl> + +<div id="gtx-trans" style="position: absolute; left: 57px; top: 1691px;"> +<div class="gtx-trans-icon"></div> +</div> diff --git a/files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html b/files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html new file mode 100644 index 0000000000..c6d49c4015 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/test_your_skills_colon__html_text_basics/index.html @@ -0,0 +1,72 @@ +--- +title: 'Teste suas habilidades: Noções básicas de texto HTML' +slug: 'Aprender/HTML/Introducao_ao_HTML/Test_your_skills:_HTML_text_basics' +tags: + - HTML + - Iniciante + - Teste suas habilidades + - Texto + - aprendizado +translation_of: 'Learn/HTML/Introduction_to_HTML/Test_your_skills:_HTML_text_basics' +--- +<div>{{learnsidebar}}</div> + +<p>O objetivo deste teste de habilidades é avaliar se você entendeu nosso artigo <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Fundamentos_textuais_HTML">Fundamentos do texto em HTML.</a></p> + +<div class="blockIndicator note"> +<p><strong>Nota</strong>: Você pode testar suas soluções nos editores interativos abaixo, entretanto pode ser de ajuda fazer download do código e usar uma ferramenta online como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, ou <a href="https://glitch.com/">Glitch</a> para trabalhar nas tarefas.<br> + <br> + Se você ficar travado em alguma tarefa, peça-nos ajuda — veja a seção{{anch("Assessment or further help")}} no final desta página.</p> +</div> + +<h2 id="Texto_básico_em_HTML_1">Texto básico em HTML 1</h2> + +<p>Nesta tarefa queremos que você faça a marcação do HTML fornecido, utilizando a semântica de título e parágrafo. Tente editar a amostra, ao vivo, para alterar o exemplo final:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text1.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text1-download.html">Faça download do ponto de partida desta tarefa</a> para trabalhar em seu próprio editor ou em um editor online.</p> +</div> + +<h2 id="Texto_básico_em_HTML_2">Texto básico em HTML 2</h2> + +<p>Nesta tarefa queremos que você transforme a primeira lista sem marcação em uma lista não ordenada e a segunda em uma lista ordenada.</p> + +<p>Tente editar a amostra, ao vivo, para alterar o exemplo final:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text2.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text2-download.html">Faça download do ponto de partida desta tarefa</a> para trabalhar em seu próprio editor ou em um editor online.</p> +</div> + +<h2 id="Texto_básico_em_HTML_3">Texto básico em HTML 3</h2> + +<p>Nesta tarefa um parágrafo é fornecido e o seu objetivo é usar elementos de ênfase para fazer a marcação apropriada de algumas palavras com forte importância e com ênfase.</p> + +<p>Tente editar a amostra, ao vivo, para alterar o exemplo final:</p> + +<p>{{EmbedGHLiveSample("learning-area/html/introduction-to-html/tasks/basic-text/basic-text3.html", '100%', 700)}}</p> + +<div class="blockIndicator note"> +<p><a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/tasks/basic-text/basic-text3-download.html">Faça download do ponto de partida desta tarefa</a> para trabalhar em seu próprio editor ou em um editor online.</p> +</div> + +<h2 id="Avaliação_ou_ajuda_adicional">Avaliação ou ajuda adicional</h2> + +<p>Você pode praticar os exemplos nos Editores Interativos acima.</p> + +<p>Se você gostaria de ter seu trabalho avaliado ou está travado e quer pedir ajuda:</p> + +<ol> + <li>Coloque seu trabalho em um editor online compartilhável como <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a> ou <a href="https://glitch.com/">Glitch</a>. Você pode escrever o código por si só ou usar os arquivos linkados nas seções acima.</li> + <li>Escreva um post pedindo por avaliação e/ou ajuda no <a href="https://discourse.mozilla.org/c/mdn/learn">Fórum de discussão do MDN na categoria Learning</a>. Seu post deve incluir: + <ul> + <li>Um título descritivo como "Avaliação desejada para o teste de habilidade Texto básico em HTML 1"</li> + <li>Detalhes sobre o que você já tentou e o que você gostaria que fizéssemos, p. ex. se você está travado e precisa de ajuda ou se deseja uma avaliação.</li> + <li>Um link para o exemplo que você deseja ser avaliado ou ajudado em um editor online compartilhável (como mencionado no passo 1 acima). Essa é uma boa prática para se adquirir - é muito difícil ajudar alguém com um problema no código, se você não consegue ver o código.</li> + <li>Um link para a tarefa atual ou página de avaliação, assim poderemos achar a questão na qual você quer ajuda.</li> + </ul> + </li> +</ol> diff --git a/files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..66dd155c09 --- /dev/null +++ b/files/pt-br/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,284 @@ +--- +title: O que está no cabeçalho? Metadados em HTML +slug: Aprender/HTML/Introducao_ao_HTML/The_head_metadata_in_HTML +tags: + - Guía + - HTML + - Iniciante + - head + - lang + - metadados +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}} </div> + +<p class="summary">O {{glossary("Head", "head")}} de um documento HTML é a parte que não é exibida no navegador da Web quando a página é carregada. Ele contém informações como {{glossary("title")}} , links para {{htmlelement("CSS")}} (se você deseja modelar seu conteúdo HTML com CSS), links para favicons personalizados e outros metadados (dados sobre o HTML, como quem o escreveu, e palavras-chave importantes que descrevem o documento.) Neste artigo, abordaremos todas as coisas acima e mais. Dando-lhe uma boa base para lidar com marcação.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td> + <table> + <tbody> + <tr> + <td>Familiaridade básica em HTML, tal como <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML.</a></td> + </tr> + </tbody> + </table> + </td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender sobre o cabeçalho HTML, seu propósito, os itens mais importantes que ele pode conter e que efeito isso pode ter no documento HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="O_que_há_no_cabeçalho_HTML">O que há no cabeçalho HTML?</h2> + +<p>Vamos rever o simples<a href="/en-US/Learn/HTML/Introduction_to_HTML/Getting_started#Anatomy_of_an_HTML_document"> </a><a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started#Anatomia_de_um_elemento_HTML">Documento HTML que abordamos no artigo anterior:</a></p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>Minha página de teste</title> + </head> + <body> + <p>Essa é minha página</p> + </body> +</html></pre> + +<p>O cabeçalho HTML é o conteúdo do elemento {{htmlelement("head")}} — ao contrário do conteúdo do elemento {{htmlelement("body")}} (que são exibidos na página quando carregados no navegador), o conteúdo do cabeçalho não é exibido na página, em vez disso, o trabalho do cabeçalho é conter {{glossary("Metadata", "metadados")}} sobre o documento. No exemplo seguinte, o cabeçalho é bem simples:</p> + +<pre class="brush: html notranslate"><head> + <meta charset="utf-8"> + <title>Minha página de teste</title> +</head></pre> + +<p>Em páginas maiores, o cabeçalho pode ter mais conteúdo. Tente acessar um dos seus sites favoritos e use as <a href="/pt-BR/docs/Learn/Common_questions/ferramentas_de_desenvolvimento_do_navegador">ferramentas de desenvolvimento</a> para verificar o conteúdo do cabeçalho. Nosso objetivo aqui não é mostrar a você como usar tudo o que é possível pôr no cabeçalho, mas te ensinar a usar as coisas mais obvias que você vai querer incluir no cabeçalho, e lhe dar alguma familiaridade. Vamos começar.</p> + +<h2 id="Adicionando_um_título">Adicionando um título</h2> + +<p>Nós já vimos o elemento {{htmlelement("title")}} em ação — ele pode ser usado para adicionar um título ao documento, mas pode ser confundido com o elemento {{htmlelement("h1")}}, que é usado para adicionar um título de nível superior ao conteúdo do body — as vezes também é associado como o título da página. Mas são coisas diferentes!</p> + +<ul> + <li>O elemento {{htmlelement("h1")}} aparece na página quando é carregado no navegador — geralmente isso deve ser usado uma vez por página, para marcar o título do conteúdo da sua página, (o título da história, ou da notícia, ou o que quer que seja apropriado para o uso).</li> + <li>O elemento {{htmlelement("title")}} é um metadado que representa o título de todo o document HTML (não o conteúdo do documento).</li> +</ul> + +<h3 id="Aprendizado_ativo_observando_um_exemplo_simples">Aprendizado ativo: observando um exemplo simples</h3> + +<ol> + <li>Para começar esta aprendizagem ativa, gostaríamos que você fosse ao nosso depósito GitHub e baixasse uma cópia do nossa página <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html</a>. Para fazer isso: + + <ol> + <li>Copie e cole o código em um novo arquivo de texto no seu editor e salve-o com o nome de index.html em um lugar de fácil acesso.</li> + <li>Pressione o botão "Raw" na página do GitHub, que faz com que o código bruto apareça (possivelmente em uma nova guia do navegador). Em seguida, escolha o menu <em>Arquivo do navegador> Salvar página como ...</em> e escolha um local adequado para salvar o arquivo.</li> + </ol> + </li> + <li>Agora abra o arquivo no seu navegador. Você deve ver algo assim: + <p><img alt="A simple web page with the title set to <title> element, and the <h1> set to <h1> element." src="https://mdn.mozillademos.org/files/12323/title-example.png" style="display: block; margin: 0 auto;">Agora deve ser completamente óbvio onde o conteúdo <code><h1></code> aparece e onde o conteúdo <code><title></code> aparece!</p> + </li> + <li>Você também deve tentar abrir o código no seu editor, editar o conteúdo desses elementos e atualizar a página no seu navegador. divirta-se.</li> +</ol> + +<p>O conteúdo do elemento <code><title></code> também é usado de outras maneiras. Por exemplo, se você tentar favoritar a página, (<em>Favoritos > Adicionar página aos favoritos </em>ou o ícone da estrela na barra de URL no Fireofx), você verá o conteúdo <code><title></code> preenchido como o nome sugerido do favorito.</p> + +<p><img alt="A webpage being bookmarked in firefox; the bookmark name has been automatically filled in with the contents of the <title> element " src="https://mdn.mozillademos.org/files/12337/bookmark-example.png" style="display: block; margin: 0 auto;"></p> + +<p>Os conteúdos <code><title></code> também são usados nos resultados de pesquisa, conforme você verá abaixo.</p> + +<h2 id="Metadados_o_elemento_<meta>">Metadados: o elemento <meta></h2> + +<p>Metadados é dado descreve dados, e HTML possui uma maneira "oficial" de adicionar metadados a um documento — o elemento {{htmlelement("meta")}}. Claro, as outras coisas em que estamos falando neste artigo também podem ser pensadas como metadados. Existem muitos tipos diferentes de elementos <code><meta></code> que podem ser incluídos no <head><strong> </strong>da sua página, mas não tentaremos explicar todos eles nesta fase, pois seria muito confuso. Em vez disso, explicaremos algumas coisas que você pode ver comumente, apenas para lhe dar uma idéia.</p> + +<h3 id="Especificando_a_codificação_de_caracteres_do_seu_documento">Especificando a codificação de caracteres do seu documento</h3> + +<p>No exemplo que vimos acima, esta linha foi incluída:</p> + +<pre class="brush: html notranslate"><meta charset="utf-8"></pre> + +<p>Este elemento simplesmente especifica a codificação de caracteres do documento — o conjunto de caracteres que o documento está autorizado a usar. <code>utf-8</code> é um conjunto de caracteres universal que inclui praticamente qualquer caractere de qualquer linguagem humana. Isso significa que sua página web poderá lidar com a exibição de qualquer idioma; portanto, é uma boa idéia configurar isso em todas as páginas web que você cria! Por exemplo, sua página poderia lidar com o Inglês e Japonês muito bem:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to universal, or utf-8. Both languages display fine," src="https://mdn.mozillademos.org/files/12343/correct-encoding.png" style="display: block; margin: 0 auto;">Se você definir sua codificação de caracteres para <code>ISO-8859-1</code>, por exemplo (o conjunto de caracteres para o alfabeto latino), a renderização de sua página ficaria toda bagunçada:</p> + +<p><img alt="a web page containing English and Japanese characters, with the character encoding set to latin. The Japanese characters don't display correctly" src="https://mdn.mozillademos.org/files/12341/bad-encoding.png" style="display: block; height: 365px; margin: 0px auto; width: 604px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Alguns navegadores (como o Chrome) corrigem automaticamente as codificações incorretas, então, dependendo do navegador que você usar, você pode não ver esse problema. Ainda assim, você deve definir uma codificação do <code>utf-8</code> em sua página, para evitar problemas em outros navegadores.</p> +</div> + +<h3 id="Aprendizagem_ativa_Experimento_com_a_codificação_de_caracteres">Aprendizagem ativa: Experimento com a codificação de caracteres</h3> + +<p>Para experimentar isso, revise o modelo HTML simples que você obteve na seção anterior em <code><title></code> (a página <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/title-example.html">title-example.html </a>), tente alterar o valor do meta charset para <code>ISO-8859-1</code> e adicione o Japonês à sua página . Este é o código que usamos:</p> + +<pre class="brush: html notranslate"><p>Exemplo Japonês:ご飯が熱い</p></pre> + +<h3 id="Adicionando_um_autor_e_descrição">Adicionando um autor e descrição</h3> + +<p>Muitos elementos <code><meta></code> incluem atributos de <code>name</code> e <code>content</code>:</p> + +<ul> + <li>O <code>name</code> especifica o tipo de elemento meta que é; que tipo de informação contém.</li> + <li>O <code>content</code> especifica o conteúdo real do meta.</li> +</ul> + +<p>Dois desses meta-elementos que são úteis para incluir na sua página definem o autor da página e fornecem uma descrição concisa da página. Vejamos um exemplo:</p> + +<pre class="brush: html notranslate"><meta name="author" content="Chris Mills"> +<meta name="description" content="A Área de Aprendizagem do MDN tem como objetivo +proporcionar iniciantes em Web com tudo o que eles precisam saber +para começar a desenvolver sites e aplicativos."></pre> + +<p>Especificar um autor é útil de muitas maneiras: é útil para poder descobrir quem escreveu a página, se quiser enviar perguntas sobre o conteúdo que você gostaria de contacta-la. Alguns sistemas de gerenciamento de conteúdo possuem ferramentas para extrair automaticamente as informações do autor da página e disponibilizá-las para seus propósitos.</p> + +<p>Especificar uma descrição que inclua palavras-chave relacionadas ao conteúdo da sua página é útil porque tem potencial para tornar sua página mais alta nas pesquisas relevantes realizadas nos mecanismos de busca (tais atividades são denominadas <a href="/pt-BR/docs/Glossario/SEO">Search Engine Optimization</a> ou {{glossary("SEO")}}.</p> + +<h3 id="Aprendizagem_ativa_Uso_da_descrição_nos_motores_de_busca">Aprendizagem ativa: Uso da descrição nos motores de busca</h3> + +<p>A descrição também é usada nas páginas de resultados do mecanismo de pesquisa. Vamos passar por um exercício para explorar isso</p> + +<ol> + <li>Vá para a <a href="https://developer.mozilla.org/en-US/">página inicial da Mozilla Developer Network.</a></li> + <li>Veja a fonte da página (botão direito do mouse/<kbd>Ctrl</kbd> + clique na página, escolha <em>Ver código-fonte da página</em> no menu de contexto).</li> + <li>Encontre a meta tag de descrição. Isso parecerá assim: + <pre class="brush: html notranslate"><meta name="description" content="A Mozilla Developer Network (MDN) fornece +informações sobre tecnologias Open Web, incluindo HTML, CSS e API para ambos +Sites e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox."></pre> + </li> + <li>Agora, procure por "Mozilla Developer Network" no seu motor de busca favorito (Utilizamos o Yahoo.) Você notará a descrição <code><meta></code> e <code><title></code> elemento usado no resultado da pesquisa — definitivamente vale a pena ter! + <p><img alt='A Yahoo search result for "Mozilla Developer Network"' src="https://mdn.mozillademos.org/files/12347/search-result.png" style="display: block; margin: 0 auto;"></p> + </li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: No Google, você verá algumas subpáginas relevantes do MDN listadas abaixo do principal link da página inicial do MDN — estes são chamados de sitelinks e são configuráveis nas <a href="http://www.google.com/webmasters/tools/">Ferramentas para webmasters do Google</a> — uma maneira de melhorar os resultados de pesquisa do seu site no mecanismo de pesquisa do Google.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Muitos recursos <code><meta></code> simplesmente não são mais usados. Por exemplo, a palavra-chave <code><meta></code> elemento (<code><meta name="keywords" content="preencha, suas, palavras-chave, aqui"></code>) — que é suposto fornecer palavras-chave para os motores de busca para determinar a relevância dessa página para diferentes termos de pesquisa — são ignorados pelos motores de busca, porque os spammers estavam apenas preenchendo a lista de palavras-chave com centenas de palavras-chave, influenciando os resultados.</p> +</div> + +<h3 id="Outros_tipos_de_metadados">Outros tipos de metadados</h3> + +<p>Ao navegar pela web, você também encontrará outros tipos de metadados. Muitos dos recursos que você verá em sites são criações proprietárias, projetados para fornecer a determinados sites (como sites de redes sociais) informações específicas que eles podem usar.</p> + +<p>Por exemplo, <a href="http://ogp.me/">Open Graph Data</a> é um protocolo de metadados que o Facebook inventou para fornecer metadados mais ricos para sites. No código-fonte MDN, você encontrará isso:</p> + +<pre class="brush: html notranslate"><meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> +<meta property="og:description" content="A Mozilla Developer Network (MDN) fornece +informações sobre tecnologias Open Web, incluindo HTML, CSS e APIs para ambos os sites da Web +e aplicativos HTML5. Ele também documenta produtos Mozilla, como o sistema operacional Firefox."> +<meta property="og:title" content="Mozilla Developer Network"></pre> + +<p>Um efeito disso é que, quando você liga a MDN no facebook, o link aparece junto com uma imagem e descrição: uma experiência mais rica para usuários.</p> + +<p><img alt="Open graph protocol data from the MDN homepage as displayed on facebook, showing an image, title, and description." src="https://mdn.mozillademos.org/files/12349/facebook-output.png" style="display: block; margin: 0 auto;">O Twitter também possui seus próprios metadados proprietários, o que tem um efeito semelhante quando o URL do site é exibido no twitter.com. Por exemplo:</p> + +<pre class="brush: html notranslate"><meta name="twitter:title" content="Mozilla Developer Network"></pre> + +<h2 id="Adicionando_ícones_personalizados_ao_seu_site">Adicionando ícones personalizados ao seu site</h2> + +<p>Para enriquecer ainda mais o design do seu site, você pode adicionar referências a ícones personalizados em seus metadados, e estes serão exibidos em determinados contextos. O mais usado é o <strong>favicon</strong> (abreviação de "favorites icon", referindo-se ao seu uso nas listas "favoritos" nos navegadores).</p> + +<p>O humilde favicon existe há muitos anos. É o primeiro ícone desse tipo: um ícone 16 pixels quadrados usado em vários lugares. Você pode ver (dependendo do navegador) ícones favoritos exibidos na guia do navegador que contém cada página aberta e ao lado de páginas marcadas no painel de favoritos.</p> + +<p>Um favicon pode ser adicionado à sua página:</p> + +<ol> + <li>Salvando-o no mesmo diretório que a página de índice do site, salvo no formato <code>.ico</code> (a maioria dos navegadores suportará favicons em formatos mais comuns como <code>.gif</code> ou <code>.png</code>, mas usar o formato ICO irá garantir que ele funcione tão bem como o Internet Explorer 6 .)</li> + <li>Adicionando a seguinte linha ao HTML <code><head></code> para fazer referência a ele: + <pre class="brush: html notranslate"><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"></pre> + </li> +</ol> + +<p>Aqui está um exemplo de um favicon em um painel de faforitos:</p> + +<p><img alt="The Firefox bookmarks panel, showing a bookmarked example with a favicon displayed next to it." src="https://mdn.mozillademos.org/files/12351/bookmark-favicon.png" style="display: block; margin: 0 auto;"></p> + +<p>Há muitos outros tipos de ícones para considerar nestes dias também. Por exemplo, você encontrará isso no código-fonte da página inicial do MDN Web Docs:</p> + +<pre class="brush: html notranslate"><!-- iPad de terceira geração com tela retina de alta resolução: --> +<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png"> +<!-- iPhone com tela retina de alta resolução: --> +<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png"> +<!-- iPad de primeira e segunda geração: --> +<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png"> +<!-- iPhone não-Retina, iPod Touch e dispositivos Android 2.1+: --> +<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png"> +<!-- favicon básico --> +<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png"></pre> + +<p>Os comentários explicam onde cada ícone é usado - esses elementos cobrem coisas como fornecer um ícone de alta resolução agradável para usar quando o site é salvo na tela inicial do iPad.</p> + +<p>Não se preocupe muito com a implementação de todos esses tipos de ícone agora — este é um recurso bastante avançado, e você não precisará ter conhecimento disso para avançar no curso. O objetivo principal aqui é permitir que você saiba o que são essas coisas, no caso de você encontrá-las enquanto navega no código-fonte dos outros sites.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Se o seu site usa uma Política de Segurança de Conteúdo (CSP) para aumentar sua segurança, a política se aplica ao favicon. Se você encontrar problemas com o favicon não carregando, verifique se a diretiva <a href="/pt-BR/docs/Web/HTTP/Headers/Content-Security-Policy/img-src"><code>img-src</code></a> do cabeçalho <a href="/pt-BR/docs/Web/HTTP/Headers/Content-Security-Policy" title="The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints. This helps guard against cross-site scripting attacks (XSS)."><code>Content-Security-Policy</code></a> não está impedindo o acesso a ele.</p> +</div> + +<h2 id="Aplicando_CSS_e_JavaScript_ao_HTML">Aplicando CSS e JavaScript ao HTML</h2> + +<p>Todos os sites que você usar nos dias atuais empregarão o {{glossary("CSS")}} para torná-los legais e o {{glossary("JavaScript")}} para ativar a funcionalidade interativa, como players de vídeo, mapas, jogos e muito mais. Estes são comumente aplicados a uma página web usando o elemento {{htmlelement("link")}} e o elemento {{htmlelement("script")}} , respectivamente.</p> + +<ul> + <li> + <p>O elemento {{htmlelement("link")}} sempre vai no cabeçalho do seu documento. Isso requer dois atributos, rel = "stylesheet", que indica que é a folha de estilo do documento e href, que contém o caminho para o arquivo de folha de estilo:</p> + + <pre class="brush: html notranslate"><link rel="stylesheet" href="meu-arquivo-css.css"></pre> + </li> + <li> + <p>O elemento {{htmlelement("script")}} não precisa ir no cabeçalho; na verdade, muitas vezes é melhor colocá-lo na parte inferior do corpo do documento (antes da tag<code> </body></code> de fechamento), para garantir que todo o conteúdo HTML tenha sido lido pelo navegador antes de tentar aplicar o JavaScript nele (se o JavaScript tentar acessar um elemento que ainda não existe, o navegador gerará um erro.)</p> + + <pre class="brush: html notranslate"><script src="meu-arquivo-js.js"></script></pre> + + <div class="note"> + <p><strong>Nota</strong>: O elemento <code><script></code> pode parecer um elemento vazio, mas não é, e, portanto, precisa de uma tag de fechamento. Em vez de apontar para um arquivo de script externo, você também pode escolher colocar seu script dentro do elemento <code><script></code>.</p> + </div> + </li> +</ul> + +<h3 id="Aprendizagem_ativa_aplicar_CSS_e_JavaScript_a_uma_página">Aprendizagem ativa: aplicar CSS e JavaScript a uma página</h3> + +<ol> + <li>Para iniciar esta aprendizagem ativa, pegue uma cópia dos nossos arquivos <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a>, <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/script.js">script.js</a> e <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">style.css</a> e salve-os em seu computador local no mesmo diretório. Verifique se eles são salvos com os nomes e extensões de arquivo corretos.</li> + <li>Abra o arquivo HTML em seu navegador e seu editor de texto.</li> + <li>Ao seguir as informações fornecidas acima, adicione os elementos {{htmlelement("link")}} e {{htmlelement("script")}} ao seu HTML, para que seu CSS e JavaScript sejam aplicados ao seu HTML.</li> +</ol> + +<p>Se for feito corretamente, quando você salvar seu HTML e atualizar seu navegador, verá que as coisas mudaram:</p> + +<p><img alt="Example showing a page with CSS and JavaScript applied to it. The CSS has made the page go green, whereas the JavaScript has added a dynamic list to the page." src="https://mdn.mozillademos.org/files/12359/js-and-css.png" style="display: block; margin: 0 auto;"></p> + +<ul> + <li>O JavaScript adicionou uma lista vazia à página. Agora, quando você clica em qualquer lugar da lista, uma caixa de diálogo aparecerá pedindo para que você, insira algum texto para um novo item de lista. Quando você pressiona o botão OK, um novo item será adicionado à lista contendo o texto. Quando você clica em um item de lista existente, uma caixa de diálogo será exibida permitindo que você altere o texto do item.</li> + <li>O CSS fez com que o plano de fundo ficasse verde e o texto se tornasse maior. Ele também estilizou parte do conteúdo que o JavaScript adicionou à página (a barra vermelha com a borda preta é o estilo que o CSS adicionou à lista gerada por JS).</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Se você ficar preso neste exercício e não conseguir aplicar o CSS/JS, tente verificar nossa página de exemplo <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/css-and-js.html">css-and-js.html</a>.</p> +</div> + +<h2 id="Definir_o_idioma_principal_do_documento">Definir o idioma principal do documento</h2> + +<p>Finalmente, vale a pena mencionar que você pode (e realmente deveria) definir o idioma da sua página. Isso pode ser feito adicionando o <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang">atributo lang</a> à tag HTML de abertura (como visto no <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/meta-example.html">meta-example.html</a> e mostrado abaixo).</p> + +<pre class="brush: html notranslate"><html lang="pt-BR"></pre> + +<p>Isso é útil de várias maneiras. O seu documento HTML será indexado de forma mais eficaz pelos motores de busca se o seu idioma for definido (permitindo que ele apareça corretamente em resultados específicos do idioma, por exemplo), e é útil para pessoas com deficiências visuais usando leitores de tela (por exemplo, a palavra "seis" existe em Francês e Inglês, mas é pronunciado de forma diferente.)</p> + +<p>Você também pode definir seções secundárias do seu documento para serem reconhecidas em diferentes idiomas. Por exemplo, podemos configurar nossa seção do idioma Japonês para ser reconhecida como japonesa, assim:</p> + +<pre class="brush: html notranslate"><p>Exemplo japonês: <span lang="jp">ご飯が熱い。</span>.</p></pre> + +<p>Esses códigos são definidos pelo padrão <a href="https://pt.wikipedia.org/wiki/ISO_639">ISO 639</a>. Você pode encontrar mais sobre eles em <a href="https://www.w3.org/International/articles/language-tags/">Tags de idioma em HTML e XML</a>.</p> + +<h2 id="Resumo">Resumo</h2> + +<p>Isso marca o fim de nossa rápida turnê pelo HTML — há muito mais que você pode fazer aqui, mas uma excursão exaustiva seria chata e confusa nesta fase, e nós só queríamos dar uma idéia das coisas mais comuns você encontrará lá, por enquanto! No próximo artigo, veremos o básico do texto HTML.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}</p> diff --git a/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html new file mode 100644 index 0000000000..2ebc971f42 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/adding_vector_graphics_to_the_web/index.html @@ -0,0 +1,352 @@ +--- +title: Adicionando vetor gráfico na web +slug: Aprender/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +translation_of: Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div class="summary"> +<p>Vector graphics are very useful in many circumstances — they have small file sizes and are highly scalable, so they don't pixelate when zoomed in or blown up to a large size. In this article we'll show you how to include one in your webpage.</p> +</div> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>You should know the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">basics of HTML</a> and how to <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">insert an image into your document</a>.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>Learn how to embed an SVG (vector) image into a webpage.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: This article doesn't intend to teach you SVG; just what it is, and how to add it to web pages.</p> +</div> + +<h2 id="O_que_são_vetores_gráficos">O que são vetores gráficos?</h2> + +<p>Na web, você pode trabalhar com dois tipos de imagem — <strong>raster images</strong>, and <strong>vector images</strong>:</p> + +<ul> + <li><strong>Imagens Raster</strong> são definidos usando uma grade de pixels — a raster image file contains information showing exactly where each pixel is to be placed, and exactly what color it should be. Popular web raster formats include Bitmap (<code>.bmp</code>), PNG (<code>.png</code>), JPEG (<code>.jpg</code>), and GIF (<code>.gif</code>.)</li> + <li><strong>Imagens vetoriais</strong> são definidas usando algoritmos — um arquivo de imagem vetorial contains shape and path definitions that the computer can use to work out what the image should look like when rendered on the screen. The {{glossary("SVG")}} format allows us to create powerful vector graphics for use on the Web.</li> +</ul> + +<p>To give you an idea of the difference between the two, let's look at an example. You can find this example live on our Github repo as <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> — it shows two seemingly identical images side by side, of a red star with a black drop shadow. The difference is that the left one is a PNG, and the right one is an SVG image.</p> + +<p>The difference becomes apparent when you zoom in the page — the PNG image becomes pixellated as you zoom in because it contains information on where each pixel should be (and what color). When it is zoomed, each pixel is simply increased in size to fill multiple pixels on screen, so the image starts to look blocky. The vector image however continues to look nice and crisp, because no matter what size it is, the algorithms are used to work out the shapes in the image, with the values simply being scaled as it gets bigger.</p> + +<p><img alt="Two star images" src="https://mdn.mozillademos.org/files/12866/raster-vector-default-size.png" style="display: block; height: 112px; margin: 0px auto; width: 223px;"></p> + +<p><img alt="Two star images zoomed in, one crisp and the other blurry" src="https://mdn.mozillademos.org/files/12868/raster-vector-zoomed.png" style="display: block; height: 328px; margin: 0px auto; width: 677px;"></p> + +<div class="note"> +<p><strong>Note</strong>: The images above are actually all PNGs — with the left-hand star in each case representing a raster image, and the right-hand star representing a vector image. Again, go to the <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/adding-vector-graphics-to-the-web/vector-versus-raster.html">vector-versus-raster.html</a> demo for a real example!</p> +</div> + +<p>Moreover, vector image files are much lighter than their raster equivalents, because they only need to hold a handful of algorithms, rather than information on every pixel in the image individually.</p> + +<h2 id="What_is_SVG">What is SVG?</h2> + +<p><a href="/en-US/docs/Web/SVG">SVG</a> is an {{glossary("XML")}}-based language for describing vector images. It's basically markup, like HTML, except that you've got many different elements for defining the shapes you want to appear in your image, and the effects you want to apply to those shapes. SVG is for marking up graphics, not content. At the simplest end of the spectrum, you've got elements for creating simple shapes, like {{svgelement("circle")}} and {{svgelement("rect")}}. More advanced SVG features include {{svgelement("feColorMatrix")}} (transform colors using a transformation matrix,) {{svgelement("animate")}} (animate parts of your vector graphic,) and {{svgelement("mask")}} (apply a mask over the top of your image.)</p> + +<p>As a simple example, the following code creates a circle and a rectangle:</p> + +<pre class="brush: html notranslate"><svg version="1.1" + baseProfile="full" + width="300" height="200" + xmlns="http://www.w3.org/2000/svg"> + <rect width="100%" height="100%" fill="black" /> + <circle cx="150" cy="100" r="90" fill="blue" /> +</svg></pre> + +<p>This creates the following output:</p> + +<p>{{ EmbedLiveSample('What_is_SVG', 300, 200, "", "", "hide-codepen-jsfiddle") }}</p> + +<p>From the example above, you may get the impression that SVG is easy to handcode. Yes, you can handcode simple SVG in a text editor, but for a complex image this quickly starts to get very difficult. For creating SVG images, most people use a vector graphics editor like <a href="https://inkscape.org/en/">Inkscape</a> or <a href="https://en.wikipedia.org/wiki/Adobe_Illustrator">Illustrator</a>. These packages allow you to create a variety of illustrations using various graphics tools, and create approximations of photos (for example Inkscape's Trace Bitmap feature.)</p> + +<p>SVG has some additional advantages besides those described so far:</p> + +<ul> + <li>Text in vector images remains accessible (which also benefits your {{glossary("SEO")}}).</li> + <li>SVGs lend themselves well to styling/scripting, because each component of the image is an element that can be styled via CSS or scripted via JavaScript.</li> +</ul> + +<p>So why would anyone want to use raster graphics over SVG? Well, SVG does have some disadvantages:</p> + +<ul> + <li>SVG can get complicated very quickly, meaning that file sizes can grow; complex SVGs can also take significant processing time in the browser.</li> + <li>SVG can be harder to create than raster images, depending on what kind of image you are trying to create.</li> + <li>SVG is not supported in older browsers, so may not be suitable if you need to support older versions of Internet Explorer with your web site (SVG started being supported as of IE9.)</li> +</ul> + +<p>Raster graphics are arguably better for complex precision images such as photos, for the reasons described above.</p> + +<div class="note"> +<p><strong>Note</strong>: In Inkscape, save your files as Plain SVG to save space. Also, please refer to this <a href="http://tavmjong.free.fr/INKSCAPE/MANUAL/html/Web-Inkscape.html">article describing how to prepare SVGs for the Web</a>.</p> +</div> + +<h2 id="Adding_SVG_to_your_pages">Adding SVG to your pages</h2> + +<p>In this section we'll go through the different ways in which you can add SVG vector graphics to your web pages.</p> + +<h3 id="The_quick_way_htmlelementimg">The quick way: {{htmlelement("img")}}</h3> + +<p>To embed an SVG via an {{htmlelement("img")}} element, you just need to reference it in the src attribute as you'd expect. You will need a <code>height</code> or a <code>width</code> attribute (or both if your SVG has no inherent aspect ratio). If you have not already done so, please read <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</p> + +<pre class="brush: html notranslate"><img + src="equilateral.svg" + alt="triangle with all three sides equal" + height="87" + width="100" /></pre> + +<h4 id="Pros">Pros</h4> + +<ul> + <li>Quick, familiar image syntax with built-in text equivalent available in the <code>alt</code> attribute.</li> + <li>You can make the image into a hyperlink easily by nesting the <code><img></code> inside an {{htmlelement("a")}} element.</li> + <li>The SVG file can be cached by the browser, resulting in faster loading times for any page that uses the image loaded in the future.</li> +</ul> + +<h4 id="Cons">Cons</h4> + +<ul> + <li>You cannot manipulate the image with JavaScript.</li> + <li>If you want to control the SVG content with CSS, you must include inline CSS styles in your SVG code. (External stylesheets invoked from the SVG file take no effect.)</li> + <li>You cannot restyle the image with CSS pseudoclasses (like <code>:focus</code>).</li> +</ul> + +<h3 id="Troubleshooting_and_cross-browser_support">Troubleshooting and cross-browser support</h3> + +<p>For browsers that don't support SVG (IE 8 and below, Android 2.3 and below), you could reference a PNG or JPG from your <code>src</code> attribute and use a {{htmlattrxref("srcset", "img")}} attribute (which only recent browsers recognize) to reference the SVG. This being the case, only supporting browsers will load the SVG — older browsers will load the PNG instead:</p> + +<pre class="brush: html notranslate"><img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg"></pre> + +<p>You can also use SVGs as CSS background images, as shown below. In the below code, older browsers will stick with the PNG that they understand, while newer browsers will load the SVG:</p> + +<pre class="brush: css notranslate"><code>background: url("fallback.png") no-repeat center;</code> +<code>background-image: url("image.svg"); +background-size: contain;</code></pre> + +<p>Like the <code><img></code> method described above, inserting SVGs using CSS background images means that the SVG can't be manipulated with JavaScript, and is also subject to the same CSS limitations.</p> + +<p>If your SVGs aren't showing up at all, it might be because your server isn't set up properly. If that's the problem, this <a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started#A_Word_on_Webservers">article will point you in the right direction</a>.</p> + +<h3 id="How_to_include_SVG_code_inside_your_HTML">How to include SVG code inside your HTML</h3> + +<p>You can also open up the SVG file in a text editor, copy the SVG code, and paste it into your HTML document — this is sometimes called putting your <strong>SVG inline</strong>, or <strong>inlining SVG</strong>. Make sure your SVG code snippet begins and ends with the <code><a href="/en-US/docs/Web/SVG/Element/svg"><svg></svg></a></code> tags (don't include anything outside those.) Here's a very simple example of what you might paste into your document:</p> + +<pre class="brush: html notranslate"><svg width="300" height="200"> + <rect width="100%" height="100%" fill="green" /> +</svg> +</pre> + +<h4 id="Pros_2">Pros</h4> + +<ul> + <li>Putting your SVG inline saves an HTTP request, and therefore can reduce a bit your loading time.</li> + <li>You can assign <code>class</code>es and <code>id</code>s to SVG elements and style them with CSS, either within the SVG or wherever you put the CSS style rules for your HTML document. In fact, you can use any <a href="/en-US/docs/Web/SVG/Attribute#Presentation_attributes">SVG presentation attribute </a>as a CSS property.</li> + <li>Inlining SVG is the only approach that lets you use CSS interactions (like <code>:focus</code>) and CSS animations on your SVG image (even in your regular stylesheet.)</li> + <li>You can make SVG markup into a hyperlink by wrapping it in an {{htmlelement("a")}} element.</li> +</ul> + +<h4 id="Cons_2">Cons</h4> + +<ul> + <li>This method is only suitable if you're using the SVG in only one place. Duplication makes for resource-intensive maintenance.</li> + <li>Extra SVG code increases the size of your HTML file.</li> + <li>The browser cannot cache inline SVG as it would cache regular image assets, so pages that include the image will not load faster after the first page containing the image is loaded.</li> + <li>You may include fallback in a {{svgelement("foreignObject")}} element, but browsers that support SVG still download any fallback images. You need to weigh whether the extra overhead is really worthwhile, just to support obsolescent browsers.</li> +</ul> + +<ul> +</ul> + +<h3 id="How_to_embed_an_SVG_with_an_htmlelementiframe">How to embed an SVG with an {{htmlelement("iframe")}}</h3> + +<p>You can open SVG images in your browser just like webpages. So embedding an SVG document with an <code><iframe></code> is done just like we studied in <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a>.</p> + +<p>Here's a quick review:</p> + +<pre class="brush: html notranslate"><iframe src="triangle.svg" width="500" height="500" sandbox> + <img src="triangle.png" alt="Triangle with three unequal sides" /> +</iframe></pre> + +<p>This is definitely not the best method to choose:</p> + +<h4 id="Cons_3">Cons</h4> + +<ul> + <li><code>iframe</code>s do have a fallback mechanism, as you can see, but browsers only display the fallback if they lack support for <code>iframe</code>s altogether.</li> + <li>Moreover, unless the SVG and your current webpage have the same {{glossary('origin')}}, you cannot use JavaScript on your main webpage to manipulate the SVG.</li> +</ul> + +<h2 id="Active_Learning_Playing_with_SVG">Active Learning: Playing with SVG</h2> + +<p>In this active learning section we'd like you to simply have a go at playing with some SVG for fun. In the <em>Input</em> section below you'll see that we've already provided you with some samples to get you started. You can also go to the <a href="/en-US/docs/Web/SVG/Element">SVG Element Reference</a>, find out more details about other toys you can use in SVG, and try those out too. This section is all about practising your research skills, and having some fun.</p> + +<p>If you get stuck and can't get your code working, you can always reset it using the <em>Reset</em> button.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><h2>Live output</h2> + +<div class="output" style="min-height: 50px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="width: 95%;min-height: 200px;"> + <svg width="100%" height="100%"> + <rect width="100%" height="100%" fill="red" /> + <circle cx="100%" cy="100%" r="150" fill="blue" stroke="black" /> + <polygon points="120,0 240,225 0,225" fill="green"/> + <text x="50" y="100" font-family="Verdana" font-size="55" + fill="white" stroke="black" stroke-width="2"> + Hello! + </text> + </svg> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution" disabled> +</div></pre> + +<pre class="brush: css notranslate">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js notranslate">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = ''; +let solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Summary">Summary</h2> + +<p>This article has provided you with a quick tour of what vector graphics and SVG are, why they are useful to know about, and how to include SVG inside your webpages. It was never intended to be a full guide to learning SVG, just a pointer so you know what SVG is if you meet it in your travels around the Web. So don't worry if you don't feel like you are an SVG expert yet. We've included some links below that might help you if you wish to go and find out more about how it works.</p> + +<p>In the last article of this module we will explore responsive images in detail, looking at the tools HTML has to allow you to make your images work better across different devices.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/SVG/Tutorial/Getting_Started">SVG tutorial</a> on MDN</li> + <li><a href="http://thenewcode.com/744/Making-SVG-Responsive">Quick tips for responsive SVGs</a></li> + <li><a href="https://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/">Sara Soueidan's tutorial on responsive SVG images</a></li> + <li><a href="https://www.w3.org/TR/SVG-access/">Accessibility benefits of SVG</a></li> + <li><a href="https://css-tricks.com/scale-svg/">How to scale SVGs </a>(it's not as simple as raster graphics!)</li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding/Responsive_images", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> diff --git a/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html b/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html new file mode 100644 index 0000000000..4f463148c1 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/images_in_html/index.html @@ -0,0 +1,368 @@ +--- +title: Imagens no HTML +slug: Aprender/HTML/Multimedia_and_embedding/Images_in_HTML +tags: + - Guía + - HTML + - Imagens + - alt text + - captions + - figcaption + - figure + - img +translation_of: Learn/HTML/Multimedia_and_embedding/Images_in_HTML +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary">No início a Web era somente texto, e era tedioso. Felizmente, não demorou muito para que a capacidade de incorporar imagens (e outros tipos de conteúdo mais interessantes) dentro das páginas da web fosse adicionada. Existem outros tipo de mídia para se considerar, mas é lógico começar com o humilde elemento {{htmlelement("img")}}, usado para inserir uma simples imagem em uma página web. Neste artigo, analisaremos como dominar seu uso, incluindo o básico, anotando-o com legendas usando o elemento {{htmlelement("figure")}}, e detalhando como ele se relaciona com imagens de fundo do CSS.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Conhecimento básico em informática, <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">Instalando os Programas Básicos</a>, conhecimento básico em <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">lidando com arquivos</a>, familiaridade com fundamentos do HTML (como abordado em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Iniciando com HTML</a>.)</td> + </tr> + <tr> + <th scope="row">Objetivos:</th> + <td>Para aprender a incorporar imagens simples em HTML, anote-as com legendas e como as imagens HTML se relacionam às imagens de plano de fundo CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Como_colocamos_uma_imagem_numa_página_web">Como colocamos uma imagem numa página web?</h2> + +<p>Para colocar uma única imagem em uma página da web, usamos o elemento {{htmlelement("img")}}. Isso é um elemento vazio (quer dizer que não possui conteúdo de texto ou tag de fechamento) que requer no mínimo um atributo para ser útil — <code>src</code> (às vezes pronunciado como seu título completo, <em>source</em>). O atributo src contém um caminho apontando para a imagem que você deseja incorporar na página, que pode ser uma URL relativa ou absoluta, da mesma maneira que o valores de atributo <code>href</code> no elemento {{htmlelement("a")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Antes de continuar, você deveria ler <a href="https://developer.mozilla.org/en-US/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#A_quick_primer_on_URLs_and_paths">Um guia rápido sobre URLs e caminhos</a> para refrescar sua memória sobre URL relativo e absoluto.</p> +</div> + +<p>Por exemplo, se sua imagem for chamada <code>dinossauro.jpg</code>, e está no mesmo diretório de sua página HTML, você poderia inserir a imagem assim:</p> + +<pre class="brush: html"><img src="dinossauro.jpg"></pre> + +<p>Se a imagem estivesse em um subdiretório de <code>images</code>, que estivesse dentro do mesmo diretório da página HTML (que o Google recomenda para fins de indexição/{{glossary("SEO")}}), então você a incorporaria da seguinte maneira:</p> + +<pre class="brush: html"><img src="images/dinossauro.jpg"></pre> + +<p>E assim por diante.</p> + +<div class="note"> +<p><strong>Note</strong>: Os mecanismos de pesquisa também leem os nomes dos arquivos de imagem e os contam para o SEO. Portanto, dê à sua imagem um nome de arquivo descritivo; <code>dinosaur.jpg</code> é melhor que <code>img835.png</code>.</p> +</div> + +<p>Você pode incorporar a imagem usando seu URL absoluto, por exemplo:</p> + +<pre class="brush: html"><img src="https://www.example.com/images/dinosaur.jpg"></pre> + +<p>Mas isso é inútil, pois apenas faz o navegador trabalhar mais, pesquisando o endereço IP do servidor DNS novamente, etc. Você quase sempre manterá as imagens do seu site no mesmo servidor que o HTML.</p> + +<div class="warning"> +<p><strong>Aviso:</strong> A maioria das imagens tem direitos autorais. Não exiba uma imagem em sua página da web, a menos que:</p> + +<p>1) você é o dono da imagem<br> + 2) você recebeu permissão explícita e por escrito do proprietário da imagem, ou<br> + 3) você tem ampla prova de que a imagem é, de fato, de domínio público.</p> + +<p><br> + Violações de direitos autorais são ilegais e antiéticas. Além disso, <strong>nunca</strong> aponte seu atributo <code>src </code>para uma imagem hospedada no site de outra pessoa à qual você não tem permissão para vincular. Isso é chamado de "hotlinking". Mais uma vez, roubar a largura de banda de alguém é ilegal. Ele também torna a página mais lenta, deixando você sem controle sobre se a imagem é removida ou substituída por algo embaraçoso.</p> +</div> + +<p>Nosso código acima nos daria o seguinte resultado:</p> + +<p><img alt="A basic image of a dinosaur, embedded in a browser, with Images in HTML written above it" src="https://mdn.mozillademos.org/files/12700/basic-image.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Elementos como {{htmlelement("img")}} e {{htmlelement("video")}} às vezes são chamados de elementos substituídos. Isso ocorre porque o conteúdo e o tamanho do elemento são definidos por um recurso externo (como uma imagem ou arquivo de vídeo), não pelo conteúdo do próprio elemento.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Você pode encontrar o exemplo final desta seção <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/images-in-html/index.html">running on Github</a> (Veja o <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/images-in-html/index.html">source code</a> também.)</p> +</div> + +<h3 id="Texto_alternativo">Texto alternativo</h3> + +<p>O próximo atributo que veremos é <code>alt</code>. Seu valor deve ser uma descrição textual da imagem, para uso em situações em que a imagem não pode ser vista/exibida ou leva muito tempo para renderizar devido a uma conexão lenta à Internet. Por exemplo, nosso código acima pode ser modificado da seguinte maneira:</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth"></pre> + +<p>A maneira mais fácil de testar seu texto <code>alt</code> é digitar incorretamente seu nome de arquivo. Se, por exemplo, o nome da nossa imagem estivesse escrito <code>dinosooooor.jpg</code>, o navegador não exibiria a imagem, mas exibiria o texto alternativo:</p> + +<p><img alt="The Images in HTML title, but this time the dinosaur image is not displayed, and alt text is in its place." src="https://mdn.mozillademos.org/files/12702/alt-text.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>Então, por que você veria ou precisaria de texto alternativo? Pode ser útil por vários motivos:</p> + +<ul> + <li>O usuário é deficiente visual e usa um <a href="https://pt.wikipedia.org/wiki/Leitor_de_tela">leitor de tela</a> para ler a web para eles. De fato, ter o texto alternativo disponível para descrever imagens é útil para a maioria dos usuários.</li> + <li>Como descrito acima, você pode ter digitado o nome do arquivo ou caminho errado.</li> + <li>O navegador não suporta o tipo de imagem. Algumas pessoas ainda usam navegadores somente de texto, como <a href="https://pt.wikipedia.org/wiki/Lynx_(navegador_web)">Lynx</a>, que alternativamente exibe o texto alternativo das imagens.</li> + <li>Você pode fornecer texto para os mecanismos de pesquisa utilizarem. Por exemplo, os mecanismos de pesquisa podem corresponder o texto alternativo às consultas de pesquisa.</li> + <li>Os usuários desativaram as imagens para reduzir o volume e as distrações de transferência de dados. Isso é especialmente comum em telefones celulares e em países onde a largura de banda é limitada e cara.</li> +</ul> + +<p>O que exatamente você deve escrever dentro do seu atributo <code>alt</code>? Depende do <em>por que</em> a imagem está lá em primeiro lugar. Em outras palavras, o que você perde se sua imagem não aparecer:</p> + +<ul> + <li><strong>Decoração. </strong>Se a imagem é apenas decoração e não faz parte do conteúdo, adicione um espaço em branco <code>alt=""</code>. Por exemplo, um leitor de tela não perde tempo lendo conteúdo que não é essencial para o usuário. Imagens decorativas realmente não pertencem ao seu HTML. {{anch("CSS background images")}} deve ser usado para inserir decoração, mas se for inevitável, <code>alt=""</code> é o melhor caminho a percorrer.</li> + <li><strong>Conteúdo. </strong>Se sua imagem fornecer informações significativas, forneça as mesmas informações em um <em>breve</em><em> </em><code>alt</code> texto. Ou melhor ainda, no texto principal que todos podem ver. Não escreva redundante <code>alt</code> texto. O quão irritante seria para um usuário que enxerga se todos os parágrafos fossem escritos duas vezes no conteúdo principal? Se a imagem for descrita adequadamente pelo corpo do texto principal, você pode simplesmente usar <code>alt=""</code>.</li> + <li><strong>Link.</strong> Se você colocar uma imagem dentro das tags {{htmlelement("a")}}, para transformar uma imagem em um link, você ainda deve fornecer <a href="/pt-BR/docs/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks#Pr%C3%A1ticas_recomendadas">links acessíveis</a>. Nesses casos, você também pode escrevê-lo no mesmo elemento <code><a></code>, ou dentro do atributo <code>alt</code> da imagem. O que funcionar melhor no seu caso.</li> + <li><strong>Texto.</strong> Você não deve colocar seu texto em imagens. Se o cabeçalho principal precisar de uma sombra projetada, por exemplo, <a href="/pt-BR/docs/Web/CSS/text-shadow">use CSS</a> para isso, em vez de colocar o texto em uma imagem. No entanto, se você <em>realmente não puder evitar fazer isso</em>, deve fornecer o texto dentro do atributo <code>alt</code>.</li> +</ul> + +<p>Essencialmente, a chave é oferecer uma experiência utilizável, mesmo quando as imagens não podem ser vistas. Isso garante que todos os usuários não estejam perdendo nenhum conteúdo. Tente desativar as imagens no seu navegador e veja como as coisas ficam. Você logo perceberá como o texto alternativo é útil se a imagem não puder ser vista.</p> + +<div class="note"> +<p><strong>Nota</strong>: Para mais informações, consulte o nosso guia para <a href="/pt-BR/docs/Learn/Accessibility/HTML#Alternativas_em_textos">Textos alternativos</a>.</p> +</div> + +<h3 id="Largura_e_altura">Largura e altura</h3> + +<p>Você pode usar os atributos <code>width</code> e <code>height</code>, para especificar a largura e altura da sua imagem. Você pode encontrar a largura e a altura da sua imagem de várias maneiras. Por exemplo, no Mac, você pode usar <kbd>Cmd</kbd> + <kbd>I</kbd> para exibir as informações do arquivo de imagem. Voltando ao nosso exemplo, poderíamos fazer isso:</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="A cabeça e o tronco de um esqueleto de dinossauro; + tem uma cabeça grande com dentes longos e afiados" + width="400" + height="341"></pre> + +<p>Isso não resulta em muita diferença para a tela, em circunstâncias normais. Mas se a imagem não estiver sendo exibida, por exemplo, o usuário acabou de navegar para a página e a imagem ainda não foi carregada, você notará que o navegador está deixando um espaço para a imagem aparecer:</p> + +<p><img alt="The Images in HTML title, with dinosaur alt text, displayed inside a large box that results from width and height settings" src="https://mdn.mozillademos.org/files/12706/alt-text-with-width-height.png" style="display: block; height: 700px; margin: 0px auto; width: 700px;"></p> + +<p>É uma coisa boa a fazer, resultando no carregamento da página mais rápido e sem problemas.</p> + +<p>No entanto, você não deve alterar o tamanho das suas imagens usando atributos HTML. Se você definir o tamanho da imagem muito grande, terá imagens granuladas, confusas ou muito pequenas e desperdiçando largura de banda ao fazer o download de uma imagem que não atenda às necessidades do usuário. A imagem também pode ficar distorcida, se você não mantiver a <a href="Proporção de tela">proporção de tela</a>. Você deve usar um editor de imagens para colocar sua imagem no tamanho correto antes de colocá-la em sua página da web.</p> + +<div class="note"> +<p><strong>Nota</strong>: Se você precisar alterar o tamanho de uma imagem, use <a href="/pt-BR/docs/Aprender/CSS">CSS</a> então.</p> +</div> + +<h3 id="Títulos_de_imagem">Títulos de imagem</h3> + +<p>Como <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Criando_hyperlinks">nos links</a>, você também pode adicionar o atributo <code>title</code> nas images, para fornecer mais informações de suporte, se necessário. No nosso exemplo, poderíamos fazer isso:</p> + +<pre class="brush: html"><img src="images/dinosaur.jpg" + alt="A cabeça e o tronco de um esqueleto de dinossauro; + tem uma cabeça grande com dentes longos e afiados" + width="400" + height="341" + title="Um T-Rex em exibição no Museu da Universidade de Manchester"></pre> + +<p>Isso nos dá uma dica de ferramenta, assim como os títulos dos links:</p> + +<p><img alt="The dinosaur image, with a tooltip title on top of it that reads A T-Rex on display at the Manchester University Museum " src="https://mdn.mozillademos.org/files/12708/image-with-title.png" style="display: block; height: 341px; margin: 0px auto; width: 400px;"></p> + +<p>Os títulos das imagens não são essenciais para incluir. Geralmente, é melhor incluir essas informações de suporte no texto principal do artigo, em vez de anexá-las à imagem. No entanto, eles são úteis em algumas circunstâncias; por exemplo, em uma galeria de imagens quando você não tem espaço para legendas.</p> + +<h3 id="Aprendizado_ativo_incorporando_uma_imagem">Aprendizado ativo: incorporando uma imagem</h3> + +<p>Agora é sua vez de jogar! Esta seção de aprendizado ativo o ajudará a executar com um simples exercício de incorporação. Você é fornecido com um básico {{htmlelement("img")}} tag; gostaríamos que você incorporasse a imagem localizada no seguinte URL:</p> + +<p>https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg</p> + +<p>Anteriormente, dissemos para nunca vincular as imagens a outros servidores, mas isso é apenas para fins de aprendizado; portanto, deixaremos você de fora dessa vez.</p> + +<p>Também gostaríamos que você:</p> + +<ul> + <li>Adicione algum texto alternativo e verifique se ele funciona incorretamente com o URL da imagem.</li> + <li>Defina a imagem correta <code>width</code> e <code>height</code> (dica; isto é 200px largo e 171px altura), experimente outros valores para ver qual é o efeito.</li> + <li>Defina um <code>title</code> na imagem.</li> +</ul> + +<p>Se você cometer um erro, sempre poderá redefini-lo usando o botão <em>Reset</em>. Se você realmente ficar preso, pressione o botão <em>Show solution</em> para ver a resposta:</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"> +<img></textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171"\n title="A T-Rex on display in the Manchester University Museum">'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 500) }}</p> + +<h2 id="Anotar_imagens_com_figuras_e_legendas_de_figuras">Anotar imagens com figuras e legendas de figuras</h2> + +<p>Por falar em legendas, existem várias maneiras de adicionar uma legenda para acompanhar sua imagem. Por exemplo, não haveria nada para impedi-lo de fazer isso:</p> + +<pre class="brush: html"><div class="figure"> + <img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341"> + + <p>A T-Rex on display in the Manchester University Museum.</p> +</div></pre> + +<p>Está tudo bem. Isso contém o conteúdo que você precisa e é bem estiloso usando CSS. Mas há um problema aqui: não há nada que vincule semanticamente a imagem à sua legenda, o que pode causar problemas para os leitores de tela. Por exemplo, quando você tem 50 imagens e legendas, qual legenda combina com qual imagem?</p> + +<p>Uma solução melhor, é usar os elementos do HTML5 {{htmlelement("figure")}} e {{htmlelement("figcaption")}}. Eles são criados exatamente para esse propósito: fornecer um contêiner semântico para figuras e vincular claramente a figura à legenda. Nosso exemplo acima, pode ser reescrito assim:</p> + +<pre><figure> + <img src="images/dinosaur.jpg" + alt="The head and torso of a dinosaur skeleton; + it has a large head with long sharp teeth" + width="400" + height="341"> + + <figcaption>A T-Rex on display in the Manchester University Museum.</figcaption> +</figure></pre> + +<p>O elemento {{htmlelement("figcaption")}} informa aos navegadores e à tecnologia de assistência que a legenda descreve o outro conteúdo do elemento {{htmlelement("figure")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Do ponto de vista da acessibilidade, legendas e {{htmlattrxref('alt','img')}} texto têm papéis distintos. As legendas beneficiam até as pessoas que podem ver a imagem, enquanto {{htmlattrxref('alt','img')}} texto fornece a mesma funcionalidade que uma imagem ausente. Portanto, legendas e <code>alt</code> texto não deve apenas dizer a mesma coisa, porque ambos aparecem quando a imagem desaparece. Tente desativar as imagens no seu navegador e veja como fica.</p> +</div> + +<p>Uma figura não precisa ser uma imagem. É uma unidade de conteúdo independente que:</p> + +<ul> + <li>Expressa seu significado de maneira compacta e fácil de entender.</li> + <li>Pode ir em vários lugares no fluxo linear da página.</li> + <li>Fornece informações essenciais de suporte ao texto principal.</li> +</ul> + +<p>Uma figura pode ser várias imagens, um trecho de código, áudio, vídeo, equações, uma tabela ou outra coisa.</p> + +<h3 id="Aprendizado_ativo_criando_uma_figura">Aprendizado ativo: criando uma figura</h3> + +<p>Nesta seção de aprendizado ativo, gostaríamos que você pegasse o código finalizado da seção de aprendizado ativo anterior e o transformasse em uma figura:</p> + +<ul> + <li>Envolve em um elemento {{htmlelement("figure")}}.</li> + <li>Copie o texto do atributo <code>title</code>, remova o atributo <code>title</code>, e coloque o texto dentro de um elemento {{htmlelement("figcaption")}} abaixo da imagem.</li> +</ul> + +<p>Se você cometer um erro, sempre poderá redefini-lo usando o botão <em>Reset</em>. Se você realmente ficar preso, pressione o botão <em>Show solution</em> para ver a resposta:</p> + +<div class="hidden"> +<h6 id="Playable_code_2">Playable code 2</h6> + +<pre class="brush: html"><h2>Input</h2> +<textarea id="code" class="input"> +</textarea> +<h2>Output</h2> +<div class="output"></div> +<div class="controls"> + <input id="reset" type="button" value="Reset" /> + <input id="solution" type="button" value="Show solution" /> +</div> +</pre> + +<pre class="brush: css">body { + font-family: 'Open Sans Light',Helvetica,Arial,sans-serif; +} + +.input, .output { + width: 90%; + height: 10em; + padding: 10px; + border: 1px solid #0095dd; + overflow: auto; +} + +button { + padding: 10px 10px 10px 0; +} +</pre> + +<pre class="brush: js">var textarea = document.getElementById("code"); +var reset = document.getElementById("reset"); +var code = textarea.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +function drawOutput() { + output.innerHTML = textarea.value; +} + +reset.addEventListener("click", function() { + textarea.value = code; + drawOutput(); +}); + +solution.addEventListener("click", function() { +textarea.value = '<figure>\n <img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg"\n alt="The head and torso of a dinosaur skeleton; it has a large head with long sharp teeth"\n width="200"\n height="171">\n <figcaption>A T-Rex on display in the Manchester University Museum</figcaption>\n</figure>'; + drawOutput(); +}); + +textarea.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code_2', 700, 500) }}</p> + +<h2 id="Imagens_de_fundo_CSS">Imagens de fundo CSS</h2> + +<p>Você também pode usar CSS para incorporar imagens em páginas da web (e JavaScript, mas isso é outra história). A propriedade {{cssxref("background-image")}} do CSS, e o outras propriedades <code>background-*</code>, são usados para controlar o posicionamento da imagem de fundo. Por exemplo, para colocar uma imagem de plano de fundo em cada parágrafo de uma página, você pode fazer o seguinte:</p> + +<pre class="brush: css">p { + background-image: url("images/dinosaur.jpg"); +}</pre> + +<p>A imagem incorporada resultante é sem dúvida mais fácil de posicionar e controlar do que as imagens HTML. Então, por que se preocupar com imagens HTML? Como sugerido acima, as imagens de plano de fundo CSS são apenas para decoração. Se você quiser adicionar algo bonito à sua página para melhorar o visual, tudo bem. No entanto, essas imagens não têm significado semântico. Eles não podem ter nenhum equivalente de texto, são invisíveis para os leitores de tela, etc. É hora das imagens HTML brilharem!</p> + +<p>Resumindo: se uma imagem tiver significado, em termos de seu conteúdo, você deverá usar uma imagem HTML. Se uma imagem é puramente decorativa, você deve usar imagens de plano de fundo CSS.</p> + +<div class="note"> +<p><strong>Nota</strong>: Você aprenderá muito mais sobre <a href="/en-US/docs/Learn/CSS/Styling_boxes/Backgrounds">CSS background images</a> no nosso tópico de <a href="/pt-BR/docs/Aprender/CSS">CSS</a>.</p> +</div> + +<p>É tudo por agora. Cobrimos imagens e legendas em detalhes. No próximo artigo, avançaremos, analisando como usar HTML para incorporar vídeo e áudio em páginas da web.</p> + +<p>{{NextMenu("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding")}}</p> diff --git a/files/pt-br/learn/html/multimedia_and_embedding/index.html b/files/pt-br/learn/html/multimedia_and_embedding/index.html new file mode 100644 index 0000000000..d644018330 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/index.html @@ -0,0 +1,67 @@ +--- +title: Multimídia e Incorporação +slug: Aprender/HTML/Multimedia_and_embedding +tags: + - Acesso + - Aprender + - Audio + - Avaliação + - Flash + - Gráficos Vetoriais + - Guia(2) + - HTML + - Imagens + - Iniciante + - SVG + - Vídeo(2) + - iframes +translation_of: Learn/HTML/Multimedia_and_embedding +--- +<p>{{LearnSidebar}}</p> + +<p class="summary">Nós vimos muito sobre texto até aqui nesse curso, mas a internet seria muito chata se usassemos apenas texto. Vamos começar a ver como fazer a internet criar vida, com conteúdo mais interessante! Esse módulo explora como usar HTML para incluir multimídia em sua pagina web,usando as diferentes formas de inclusão de imagens , e como adicionar video, audio, e até paginas da web inteiras.</p> + +<h2 id="Pré-requisitos">Pré-requisitos</h2> + +<p>Antes de iniciar esse módulo, você deve ter um conhecimento razoável de HTML, como previamente abrangido em <a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML">introdução a HTML</a>. Se você não estudou esse módulo (ou algo similar), estude-o primeiro e depois retorne!</p> + +<div class="note"> +<p><strong>Nota</strong>: Se você está trabalhando em um computador/tablet/outro dispositivo onde você não tem a habilidade de criar seus próprios arquivos, você pode testar (maior parte) dos exemplos de códigos em um programa online para codar tais como <a href="http://jsbin.com/">JSBin</a> ou <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guias">Guias</h2> + +<p>Esse módulo contém os seguintes artigos, que vão passar por todos os fundamentos para inserir multimídia em páginas da web.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imagens em HTML</a></dt> + <dd>Existem outros tipos de multimídia para considerar, porém é lógico começar com o modesto elemento {{htmlelement("img")}} , usado para inserir uma simples imagem em uma página da web. Nesse artigo vamos aprender a usar esse elemento com mais profundidade, incluindo os básicos, anotando com legendas usando {{htmlelement("figure")}} e como se relaciona com imagens de fundo em CSS.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Conteúdo em áudio e video</a></dt> + <dd>Agora nós iremos aprender como usar os elementos HTML5 {{htmlelement("video")}} e {{htmlelement("audio")}} , para inserir video e audio em nossa página; incluindo o basico, fornecendo acesso a diferentes tipos de arquivo para navegadores diferentes, adicionando legenda , e como adicionar alternativas para navegadores mais antigos.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> para <iframe> — outras tecnologias incorporadas</a></dt> + <dd>A essa altura, nós gostariamos de avançar alguns passos sobre um conjunto de elementos que permitem você incorporar uma ampla variedade de tipos de conteúdo na suas páginas web: os elementos {{htmlelement("iframe")}}, {{htmlelement("embed")}} e {{htmlelement("object")}}. <code><iframe></code>s servem para incorporar outras páginas web, enquanto as outras duas permitem você incorporar PDFs, SVG, e até mesmo Flash — uma tecnologia cada vez menos presente, mas que ainda é possível você encontrar de forma quase regular.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adicionando gráficos vetoriais à Web</a></dt> + <dd>Gráficos vetoriais podem ser muito úteis em determinadas situações. Diferente dos formatos comuns, como PNG/JPG, eles não sofrem distorção/pixelização quando o zoom é ampliado — podendo continuar com a mesma qualidade quando alterado em escala. Esse artigo irá introduzir a você o que são os gráficos vetoriais e como incluir o formato {{glossary("SVG")}} nas páginas web.</dd> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagens responsivas</a></dt> + <dd>Com a atual variedade de tipos de dispositivos capazes de navegar na web - de celulares móveis à computadores pessoais - um conceito essencial para dominar o mundo web moderno é o design responsivo. Este se refere à criação de páginas web que podem automaticamente mudar seus atributos para se adaptar a diferentes resoluções e tamanhos de tela. Isso será explorado em mais detalhes em um módulo CSS posterior, mas, por enquanto, iremos verificar as ferramentas HTML disponíveis para criar imagens responsivas, incluindo o elemento {{htmlelement("picture")}}.</dd> +</dl> + +<h2 id="Testes_de_Conhecimentos">Testes de Conhecimentos</h2> + +<p>Os testes de conhecimentos a seguir vão avaliar seu aprendizado nos assuntos abaixo:</p> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Página Inicial do Mozilla</a></dt> + <dd>Neste teste nós vamos avaliar seus conhecimentos quanto a algumas técnicas discutidas nos artigos desse módulo, devendo você adicionar imagens e videos numa divertida página inicial sobre o Mozilla!</dd> +</dl> + +<h2 id="Veja_também">Veja também</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image">Adicionando um hitmap no topo de uma imagem</a></dt> + <dd>Image maps consiste em um mecanismo que torna diferentes partes de uma imagem em uma forma de acesso para outros lugares ou coisas (pense em um mapa mundi que apresenta informações sobre o país em que você clicou em cima). Essa técnica pode ser útil as vezes.</dd> + <dt><a href="https://teach.mozilla.org/activities/web-lit-basics-two/">Web literacy basics 2</a></dt> + <dd> + <p>An excellent Mozilla foundation course that explores and tests some of the skills talked about in the <em>Multimedia and embedding</em> module. Dive deeper into the basics of composing webpages, designing for accessibility, sharing resources, using online media, and working open. </p> + </dd> +</dl> diff --git a/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html new file mode 100644 index 0000000000..80299e4f72 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/other_embedding_technologies/index.html @@ -0,0 +1,394 @@ +--- +title: Do objeto ao iframe - outras tecnologias de incorporação +slug: Aprender/HTML/Multimedia_and_embedding/Other_embedding_technologies +translation_of: Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary"><font><font>Até agora você já deve ter aprendido a incorporar coisas em suas páginas da web, incluindo imagens, vídeo e áudio. </font><font>Neste ponto, gostaria de ter um pouco de um passo para o lado, olhando para alguns elementos que permitem incorporar uma ampla variedade de tipos de conteúdo em suas páginas: as </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (<iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code><iframe></code></a><font><font>, </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="O elemento HTML <embed> incorpora conteúdo externo no ponto especificado no documento. Este conteúdo é fornecido por um aplicativo externo ou outra fonte de conteúdo interativo, como um plug-in de navegador."><code><embed></code></a><font><font>e </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="O elemento HTML <object> representa um recurso externo, que pode ser tratado como uma imagem, um contexto de navegação aninhado ou um recurso a ser tratado por um plug-in."><code><object></code></a><font><font>elementos. </font></font><code><iframe></code><font><font>s são para incorporar outras páginas da Web, e as outras duas permitem incorporar PDFs, SVG e até Flash - uma tecnologia que está saindo, mas que você ainda verá semi-regularmente.</font></font></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td><font><font>Conhecimento </font><font>básico em informática, </font></font><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software"><font><font>software básico instalado</font></font></a><font><font> , conhecimento básico sobre o </font></font><a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files"><font><font>trabalho com arquivos</font></font></a><font><font> , familiaridade com os fundamentos de HTML (conforme abordado em </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started"><font><font>Introdução ao HTML</font></font></a><font><font> ) e os artigos anteriores deste módulo.</font></font></td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td> + <table> + <tbody> + <tr> + <td><font><font>Para saber como itens incorporar em páginas da web que usam </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="O elemento HTML <object> representa um recurso externo, que pode ser tratado como uma imagem, um contexto de navegação aninhado ou um recurso a ser tratado por um plug-in."><code><object></code></a><font><font>, </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="O elemento HTML <embed> incorpora conteúdo externo no ponto especificado no documento. Este conteúdo é fornecido por um aplicativo externo ou outra fonte de conteúdo interativo, como um plug-in de navegador."><code><embed></code></a><font><font>e </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (<iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code><iframe></code></a><font><font>, como filmes em Flash e outras páginas da web.</font></font></td> + </tr> + </tbody> + </table> + </td> + </tr> + </tbody> +</table> + +<h2 id="Uma_breve_história_de_incorporação"><font><font>Uma breve história de incorporação</font></font></h2> + +<p>Há muito tempo, na Web, era popular o uso de <strong>quadros</strong> para criar sites - pequenas partes de um site armazenadas em páginas HTML individuais. Elas foram incorporadas em um documento mestre chamado <strong>conjunto de quadros</strong>, que permitiu especificar a área na tela que cada quadro preenchia, como dimensionar as colunas e linhas de uma tabela. Eles foram considerados o auge da frescura entre a metade e o final dos anos 90, e havia evidências de que ter uma página da Web dividida em partes menores como essa era melhor para as velocidades de download - especialmente perceptível pelas conexões de rede que eram tão lentas na época. No entanto, eles tinham muitos problemas, que superavam quaisquer positivos à medida que as velocidades da rede ficavam mais rápidas, para que você não as veja mais sendo usadas.</p> + +<p><font><font>Um pouco mais tarde (final dos anos 90, início dos anos 2000), as tecnologias de plug-in tornaram-se muito populares, como </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Java"><font><font>Java Applets</font></font></a><font><font> e </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/Adobe_Flash"><font><font>Flash</font></font></a><font><font> - isso permitiu que os desenvolvedores da Web incorporassem conteúdo rico em páginas da Web, como vídeos e animações, que não estavam disponíveis apenas no HTML. </font><font>A incorporação dessas tecnologias foi alcançada através de elementos como </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/object" title="O elemento HTML <object> representa um recurso externo, que pode ser tratado como uma imagem, um contexto de navegação aninhado ou um recurso a ser tratado por um plug-in."><code><object></code></a><font><font>, e os menos utilizados </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed" title="O elemento HTML <embed> incorpora conteúdo externo no ponto especificado no documento. Este conteúdo é fornecido por um aplicativo externo ou outra fonte de conteúdo interativo, como um plug-in de navegador."><code><embed></code></a><font><font>, e eles eram muito úteis na época. </font><font>Desde então, ficaram fora de moda devido a muitos problemas, incluindo acessibilidade, segurança, tamanho do arquivo e muito mais; </font><font>hoje em dia, a maioria dos dispositivos móveis não suporta mais esses plug-ins, e o suporte para desktop está saindo.</font></font></p> + +<p><font><font>Finalmente, o elemento </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (<iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code><iframe></code></a><font><font> apareceu (juntamente com outras formas de incorporar conteúdo, como </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas" title="Use o elemento <canvas> HTML com a API de script de tela ou a API WebGL para desenhar gráficos e animações."><code><canvas></code></a><font><font>, </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="O elemento HTML Video (<video>) incorpora um media player que suporta a reprodução de vídeo no documento. Você também pode usar <video> para conteúdo de áudio, mas o elemento <audio> pode fornecer uma experiência de usuário mais apropriada."><video></a> </code><font><font>etc.). Isso fornece uma maneira de incorporar um documento da Web inteiro dentro de outro, como se fosse um </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" title="O elemento HTML <img> incorpora uma imagem no documento."><code><img></code></a><font><font>ou outro elemento, e é usado regularmente hoje .</font></font></p> + +<p>Com a lição de história fora do caminho, vamos seguir em frente e ver como usar algumas delas.</p> + +<h2 id="Aprendizado_ativo_usos_clássicos_de_incorporação"><font><font>Aprendizado ativo: usos clássicos de incorporação</font></font></h2> + +<p><font><font>Neste artigo, vamos pular direto para uma seção de aprendizado ativo, para fornecer imediatamente uma idéia real de para que servem as tecnologias de incorporação. </font><font>O mundo on-line está muito familiarizado com o </font></font><a href="https://www.youtube.com/" rel="noopener"><font><font>Youtube</font></font></a><font><font> , mas muitas pessoas não conhecem alguns dos recursos de compartilhamento disponíveis. </font><font>Vejamos como o YouTube nos permite incorporar um vídeo em qualquer página que gostamos de usar </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (<iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code><iframe></code></a><font><font>.</font></font></p> + +<ol> + <li><font><font>Primeiro, vá ao Youtube e encontre o vídeo que você gosta.</font></font></li> + <li><font><font>Abaixo do vídeo, você encontrará um </font><font>botão </font></font><em><font><font>Compartilhar</font></font></em><font><font> - selecione para exibir as opções de compartilhamento.</font></font></li> + <li><font><font>Selecione o </font><font>botão </font></font><em><font><font>Incorporar</font></font></em><font><font> e você receberá um </font></font><code><iframe></code><font><font>código - copie isso.</font></font></li> + <li><font><font>Insira-o na </font><font>caixa de </font></font><em><font><font>entrada</font></font></em><font><font> abaixo e veja qual é o resultado na </font></font><em><font><font>saída</font></font></em><font><font> .</font></font></li> +</ol> + +<p><font><font>Para pontos de bônus, você também pode tentar incorporar um </font></font><a href="https://www.google.com/maps/" rel="noopener"><font><font>mapa do Google</font></font></a><font><font> no exemplo:</font></font></p> + +<ol> + <li><font><font>Vá para o Google Maps e encontre um mapa que você gosta.</font></font></li> + <li><font><font>Clique no "Menu Hamburger" (três linhas horizontais) no canto superior esquerdo da interface do usuário.</font></font></li> + <li><font><font>Selecione a opção </font></font><em><font><font>Compartilhar ou incorporar mapa</font></font></em><font><font> .</font></font></li> + <li><font><font>Selecione a opção Incorporar mapa, que fornecerá algum </font></font><code><iframe></code><font><font>código - copie isso.</font></font></li> + <li><font><font>Insira-o na </font><font>caixa de </font></font><em><font><font>entrada</font></font></em><font><font> abaixo e veja qual é o resultado na </font></font><em><font><font>saída</font></font></em><font><font> .</font></font></li> +</ol> + +<p><font><font>Se você cometer um erro, sempre poderá redefini-lo usando o </font><font>botão </font></font><em><font><font>Redefinir</font></font></em><font><font> . </font><font>Se você realmente ficar atolado, pressione o botão </font></font><em><font><font>Mostrar solução</font></font></em><font><font> para ver uma resposta.</font></font></p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><h2>Live output</h2> + +<div class="output" style="min-height: 250px;"> +</div> + +<h2>Editable code</h2> +<p class="a11y-label">Press Esc to move focus away from the code area (Tab inserts a tab character).</p> + +<textarea id="code" class="input" style="width: 95%;min-height: 100px;"> +</textarea> + +<div class="playable-buttons"> + <input id="reset" type="button" value="Reset"> + <input id="solution" type="button" value="Show solution"> +</div></pre> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +h2 { + font-size: 16px; +} + +.a11y-label { + margin: 0; + text-align: right; + font-size: 0.7rem; + width: 98%; +} + +body { + margin: 10px; + background: #f5f9fa; +}</pre> + +<pre class="brush: js">const textarea = document.getElementById('code'); +const reset = document.getElementById('reset'); +const solution = document.getElementById('solution'); +const output = document.querySelector('.output'); +let code = textarea.value; +let userEntry = textarea.value; + +function updateCode() { + output.innerHTML = textarea.value; +} + +reset.addEventListener('click', function() { + textarea.value = code; + userEntry = textarea.value; + solutionEntry = htmlSolution; + solution.value = 'Show solution'; + updateCode(); +}); + +solution.addEventListener('click', function() { + if(solution.value === 'Show solution') { + textarea.value = solutionEntry; + solution.value = 'Hide solution'; + } else { + textarea.value = userEntry; + solution.value = 'Show solution'; + } + updateCode(); +}); + +const htmlSolution = '<iframe width="420" height="315" src="https://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen>\n</iframe>\n\n<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d37995.65748333395!2d-2.273568166412784!3d53.473310471916975!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x487bae6c05743d3d%3A0xf82fddd1e49fc0a1!2sThe+Lowry!5e0!3m2!1sen!2suk!4v1518171785211" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>\n</iframe>'; +let solutionEntry = htmlSolution; + +textarea.addEventListener('input', updateCode); +window.addEventListener('load', updateCode); + +// stop tab key tabbing out of textarea and +// make it write a tab at the caret position instead + +textarea.onkeydown = function(e){ + if (e.keyCode === 9) { + e.preventDefault(); + insertAtCaret('\t'); + } + + if (e.keyCode === 27) { + textarea.blur(); + } +}; + +function insertAtCaret(text) { + const scrollPos = textarea.scrollTop; + const caretPos = textarea.selectionStart; + + const front = (textarea.value).substring(0, caretPos); + const back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length); + textarea.value = front + text + back; + caretPos = caretPos + text.length; + textarea.selectionStart = caretPos; + textarea.selectionEnd = caretPos; + textarea.focus(); + textarea.scrollTop = scrollPos; +} + +// Update the saved userCode every time the user updates the text area code + +textarea.onkeyup = function(){ + // We only want to save the state when the user code is being shown, + // not the solution, so that solution is not saved over the user code + if(solution.value === 'Show solution') { + userEntry = textarea.value; + } else { + solutionEntry = textarea.value; + } + + updateCode(); +};</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 600, "", "", "hide-codepen-jsfiddle") }}</p> + +<h2 id="Iframes_em_detalhes"><font><font>Iframes em detalhes</font></font></h2> + +<p><font><font>Então, isso foi fácil e divertido, certo? Os elementos </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe" title="O elemento HTML Inline Frame (<iframe>) representa um contexto de navegação aninhado, incorporando outra página HTML à atual."><code><iframe></code></a><font><font> foram projetados para permitir que você incorpore outros documentos da Web ao documento atual. </font><font>Isso é ótimo para incorporar conteúdo de terceiros em seu site sobre o qual você pode não ter controle direto e não querer implementar sua própria versão - como vídeo de fornecedores de vídeo on-line, sistemas de comentários como </font></font><a href="https://disqus.com/" rel="noopener"><font><font>Disqus</font></font></a><font><font> , mapas on-line fornecedores de mapas, banners publicitários etc. Os exemplos editáveis ao vivo que </font></font>você está usando neste curso<font><font> são implementados usando </font></font><code><iframe></code><font><font>s.</font></font></p> + +<p><font><font>Existem algumas sérias </font></font><a href="https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#Security_concerns"><font><font>preocupações de segurança</font></font></a><font><font> a serem consideradas com </font></font><code><iframe></code><font><font>s, como discutiremos abaixo, mas isso não significa que você não deve usá-las em seus sites - apenas requer algum conhecimento e pensamento cuidadoso. </font><font>Vamos explorar o código um pouco mais detalhadamente. </font><font>Digamos que você queira incluir o glossário MDN em uma de suas páginas da web - você pode tentar algo como isto:</font></font></p> + +<pre><iframe src="https://developer.mozilla.org/en-US/docs/Glossary" + width="100%" height="500" frameborder="0" + allowfullscreen sandbox> + <p> + <a href="https://developer.mozilla.org/en-US/docs/Glossary"> + Fallback link for browsers that don't support iframes + </a> + </p> +</iframe></pre> + +<p><font><font>Este exemplo inclui os fundamentos básicos necessários para usar um </font></font><code><iframe></code><font><font>:</font></font></p> + +<dl> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowfullscreen">allowfullscreen</a></code></dt> + <dd><font><font>Se definido, ele </font></font><code><iframe></code><font><font>poderá ser colocado no modo de tela cheia usando a </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API"><font><font>API de tela cheia</font></font></a><font><font> (um pouco além do escopo deste artigo).</font></font></dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-frameborder">frameborder</a></code></dt> + <dd><font><font>Se definido como 1, isso indica ao navegador para desenhar uma borda entre esse quadro e outros quadros, que é o comportamento padrão. </font><font>0 remove a borda. </font><font>Usar isso não é mais recomendado, pois o mesmo efeito pode ser melhor alcançado usando </font><font>em seu </font><a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS" title="CSS: CSS (Cascading Style Sheets) is a declarative language that controls how webpages look in the browser."><font>CSS</font></a><font> .</font></font><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/border" title="A propriedade CSS abreviada da borda define a borda de um elemento."><code>border</code></a><code>: none;</code></dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-src">src</a></code></dt> + <dd><font><font>Este atributo, como </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="O elemento HTML Video (<video>) incorpora um media player que suporta a reprodução de vídeo no documento. Você também pode usar <video> para conteúdo de áudio, mas o elemento <audio> pode fornecer uma experiência de usuário mais apropriada."><code><video></code></a><font><font>/ </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img" title="O elemento HTML <img> incorpora uma imagem no documento."><code><img></code></a><font><font>, contém um caminho apontando para o URL do documento a ser incorporado.</font></font></dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-width">width</a></code><font><font> e </font></font><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-height">height</a></code></dt> + <dd><font><font>Esses atributos especificam a largura e a altura que você deseja que o iframe seja.</font></font></dd> + <dt>Conteúdo alternativo</dt> + <dd><font><font>Da mesma forma que outros elementos semelhantes </font></font><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" title="O elemento HTML Video (<video>) incorpora um media player que suporta a reprodução de vídeo no documento. Você também pode usar <video> para conteúdo de áudio, mas o elemento <audio> pode fornecer uma experiência de usuário mais apropriada."><code><video></code></a><font><font>, você pode incluir conteúdo de fallback entre as </font></font><code><iframe></iframe></code><font><font>tags de </font><font>abertura e fechamento </font><font>que aparecerão se o navegador não suportar </font></font><code><iframe></code><font><font>. </font><font>Nesse caso, incluímos um link para a página. </font><font>É improvável que você encontre qualquer navegador que não suporte </font></font><code><iframe></code><font><font>s atualmente.</font></font></dd> + <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-sandbox">sandbox</a></code></dt> + <dd><font><font>Esse atributo, que funciona em navegadores um pouco mais modernos que o restante dos </font></font><code><iframe></code><font><font>recursos (por exemplo, IE 10 e superior), requer configurações de segurança mais elevadas; </font><font>falaremos mais sobre isso na próxima seção.</font></font></dd> +</dl> + +<div class="note"> +<p><strong><font><font>Nota</font></font></strong><font><font>: Para melhorar a velocidade, é uma boa ideia definir o </font></font><code>src</code><font><font>atributo </font><font>do iframe </font><font>com JavaScript após o carregamento do conteúdo principal. </font><font>Isso torna sua página utilizável mais cedo e diminui o tempo de carregamento da página oficial (uma importante </font><font>métrica de </font></font><a href="https://developer.mozilla.org/en-US/docs/Glossary/SEO" title="SEO: SEO (Search Engine Optimization) é o processo de tornar um site mais visível nos resultados de pesquisa, também denominado melhorar as classificações de pesquisa."><font><font>SEO</font></font></a><font><font> ).</font></font></p> +</div> + +<h3 id="Preocupações_com_segurança">Preocupações com segurança</h3> + +<p><font><font>Acima, mencionamos preocupações de segurança - vamos abordar isso com mais detalhes agora. </font><font>Não esperamos que você entenda todo esse conteúdo perfeitamente da primeira vez; </font><font>queremos apenas que você fique ciente dessa preocupação e forneça uma referência para retornar à medida que for mais experiente e começar a considerar o uso de </font></font><code><iframe></code><font><font>s em seus experimentos e trabalhos. </font><font>Além disso, não há necessidade de ter medo e não usar </font></font><code><iframe></code><font><font>s - você só precisa ter cuidado. </font><font>Leia...</font></font></p> + +<p><font><font>Fabricantes de navegadores e desenvolvedores da Web descobriram da maneira mais difícil que iframes são um alvo comum (termo oficial: </font></font><strong><font><font>vetor de ataque</font></font></strong><font><font> ) para pessoas más na Web (geralmente chamadas de </font></font><strong><font><font>hackers</font></font></strong><font><font> ou, mais precisamente, </font></font><strong><font><font>crackers</font></font></strong><font><font> ) atacarem se estiverem tentando modificar maliciosamente seu página da web ou induzir as pessoas a fazer algo que não desejam, como revelar informações confidenciais como nomes de usuário e senhas. </font><font>Por esse motivo, engenheiros de especificações e desenvolvedores de navegadores desenvolveram vários mecanismos de segurança para torná- </font></font><code><iframe></code><font><font>los mais seguros, e também existem práticas recomendadas a serem consideradas - abordaremos alguns deles abaixo.</font></font></p> + +<div class="note"> +<p>{{interwiki('wikipedia','Clickjacking')}} <font>é um tipo comum de ataque iframe, no qual hackers incorporam um iframe invisível ao documento (ou incorporam o documento ao próprio site malicioso) e o usam para capturar as interações dos usuários. </font><font>Essa é uma maneira comum de enganar os usuários ou roubar dados confidenciais.</font></p> +</div> + +<p><font><font>Um primeiro exemplo rápido - tente carregar o exemplo anterior que mostramos acima em seu navegador - você pode </font></font><a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html" rel="noopener"><font><font>encontrá-lo ao vivo no Github</font></font></a><font><font> ( </font></font><a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/iframe-detail.html" rel="noopener"><font><font>consulte o código-fonte</font></font></a><font><font> também.) Na verdade, você não verá nada exibido na página e se olhar para o </font></font><em><font><font>console</font></font></em><font><font> nas </font></font><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"><font><font>ferramentas de desenvolvedor</font></font></a><font><font> do </font><a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools"><font>navegador</font></a><font> , você verá uma mensagem informando o motivo. </font><font>No Firefox, você será informado sobre o </font></font><em><font><font>Load negado pelo X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary não permite o enquadramento</font></font></em><font><font> . </font><font>Isso ocorre porque os desenvolvedores que criaram o MDN incluíram uma configuração no servidor que serve as páginas do site para impedir que elas sejam incorporadas dentro de </font></font><code><iframe></code><font><font>s (consulte </font></font><a href="https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies#Configure_CSP_directives"><font><font>Configurar diretivas CSP</font></font></a><font><font>, abaixo.) Isso faz sentido - uma página MDN inteira não faz sentido para ser incorporada em outras páginas, a menos que você queira fazer algo como incorporá-las ao seu site e reivindicá-las como suas - ou tentar roubar dados via clickjacking , que são coisas muito ruins para se fazer. </font><font>Além disso, se todos começassem a fazer isso, toda a largura de banda adicional começaria a custar muito dinheiro à Mozilla.</font></font></p> + +<h4 id="Incorporar_somente_quando_necessário">Incorporar somente quando necessário</h4> + +<p><font><font>Às vezes, faz sentido incorporar conteúdo de terceiros - como vídeos e mapas do youtube -, mas você pode economizar muitas dores de cabeça se incorporar apenas conteúdo de terceiros quando completamente necessário. </font><font>Uma boa regra geral para a segurança da Web é </font></font><em><font><font>"Você nunca pode ser muito cauteloso. Se você fez isso, verifique-o de qualquer maneira. Se alguém o fez, assuma que é perigoso até prova em contrário".</font></font></em></p> + +<p><font><font>Além da segurança, você também deve estar ciente dos problemas de propriedade intelectual. </font><font>A maioria dos conteúdos tem direitos autorais, offline e online, mesmo o conteúdo que você não pode esperar (por exemplo, a maioria das imagens no </font></font><a href="https://commons.wikimedia.org/wiki/Main_Page" rel="noopener"><font><font>Wikimedia Commons</font></font></a><font><font> ). </font><font>Nunca exiba conteúdo em sua página da Web, a menos que você seja o proprietário ou os proprietários tenham lhe dado uma permissão inequívoca por escrito. </font><font>As penalidades por violação de direitos autorais são severas. </font><font>Novamente, você nunca pode ser muito cauteloso.</font></font></p> + +<p><font><font>Se o conteúdo for licenciado, você deverá obedecer aos termos da licença. </font><font>Por exemplo, o conteúdo no MDN é </font></font><a href="https://developer.mozilla.org/en-US/docs/MDN/About#Copyrights_and_licenses"><font><font>licenciado sob CC-BY-SA</font></font></a><font><font> . </font><font>Isso significa que você deve </font></font><a href="https://wiki.creativecommons.org/wiki/Best_practices_for_attribution" rel="noopener"><font><font>creditar-nos adequadamente</font></font></a><font><font> quando citar nosso conteúdo, mesmo que faça alterações substanciais.</font></font></p> + +<h4 id="Use_HTTPS">Use HTTPS</h4> + +<p>{{Glossary("HTTPS")}} é a versão criptografada do {{Glossary("HTTP")}}. Você deve utilizar HTTPS em seus websites sempre que possível:</p> + +<ol> + <li>HTTPS reduz a chance de que conteúdo remoto tenha sido adulterado no caminho.</li> + <li>HTTPS previne que conteúdo que tenha incorporado ao site acesse conteúdo em seu documento de origem, e vice versa.</li> +</ol> + +<p>Utilizar HTTPS requer um certificado de segurança, que pode ser bem caro (apesar que o <a href="https://letsencrypt.org/">Let's Encrypt</a> deixe as coisas mais fáceis) — se você não puder obter um certificado, você deve fornecer seus documentos com HTTP. Contudo, por conta do segundo benefício do HTTPS descrito acima, <em>não importa o custo, você nunca deve incorporar conteúdo de terceiros em HTTP. </em>(No caso do melhor cenário, o navegador de seu usuário irá dá-lo um aviso assustador.) Todas as empresas com boa reputação irão fornecer conteúdo para ser incoporado por meio <code><iframe></code> irá fazê-lo disponível através de HTTPS — veja a URLs dentro do <code><iframe></code> <code>no</code>atributo src, quando você está incorporando conteúdo do Google Maps ou Youtube, por exemplo.</p> + +<div class="note"> +<p><strong>Nota</strong>: <a href="/en-US/docs/Learn/Common_questions/Using_Github_pages">Páginas do Github</a> permitem que conteúdo seja fornecido via HTTPS por padrão, então é útil para hospedar conteúdo. Se você está utilizando uma hospedagem diferente e não tem certeza do mesmo, pergunte sobre com o seu provedor de hospedagem.</p> +</div> + +<h4 id="Sempre_utilize_o_atributo_sandbox">Sempre utilize o atributo <code>sandbox</code></h4> + +<p>Você deseja que os atacantes tenham a menor quantidade possível de poder para causar danos ao seu website, portanto, você deve dar ao conteúdo incorporado <em>apenas a permissão para fazer o seu trabalho. </em>É claro, isto se aplica ao seu próprio conteúdo, também. Um container para código onde ele possa ser utilizado apropriadamente — ou para testes — mas não pode causar nenhum dano ao resto do código base (tanto acidental quanto maliciosa) é chamado <a href="https://en.wikipedia.org/wiki/Sandbox_(computer_security)">sandbox</a>.</p> + +<p>Conteúdo fora de uma sandbox pode fazer muito mais que o esperado (executar JavaScript, submeter forms, criar novas janelas no navegador, etc.) Por padrão, você deve impor todas as restrições disponíveis utilizando o atributo<code>sandbox</code> sem parâmetros, como mostrado em nosso exemplo anterior.</p> + +<p>Se absolutamente necessário, você pode adicionar permissões uma a uma (dentro do valor do atributo<code>sandbox=""</code>) — veja em {{htmlattrxref('sandbox','iframe')}} as referências de entrada para todas as opções disponíveis. Uma nota importante é que você <em>nunca</em> deve adicionar ambos <code>allow-scripts</code> e <code>allow-same-origin</code> no atributo de sandbox — neste caso, conteúdo incorporado pode burlar a política de segurança de mesmo destino que impede sites de executarem scripts, e utilizar JavaScript para desativar o sandboxing completamente.</p> + +<div class="note"> +<p><strong>Nota</strong>: Sandboxing não fornece nenhuma proteção se atacantes puderem enganar os usuários para que visitem conteúdo malicioso diretamete (fora de um <code>iframe</code>). Se existir qualquer chance que certo conteúdo possa ser malicioso (exemplo, conteúdo gerado por usuários), por favor forneça-o em um {{glossary("domain")}} diferente de seu site principal.</p> +</div> + +<h4 id="Configure_directivas_CSP">Configure directivas CSP</h4> + +<p>{{Glossary("CSP")}} significa <strong><a href="/en-US/docs/Web/Security/CSP">política de segurança de conteúdo</a></strong> e fornece um <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">conjunto de cabeçalhos HTTP</a> (metadados enviados junto com suas páginas da web quando são veiculados de um servidor da web) projetados para melhorar a segurança do seu documento HTML. Quando se trata de proteger <code><iframe></code> s, você pode <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configurar seu servidor para enviar um cabeçalho <code>X-Frame-Options</code> apropriado</a></em>.</p> + +<p>stands for <strong><a href="/en-US/docs/Web/Security/CSP">content security policy</a></strong> and provides <a href="/en-US/docs/Web/Security/CSP/CSP_policy_directives">a set of HTTP Headers</a> (metadata sent along with your web pages when they are served from a web server) designed to improve the security of your HTML document. When it comes to securing <code><iframe></code>s, you can <em><a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/X-Frame-Options">configure your server to send an appropriate <code>X-Frame-Options</code> header.</a></em> Isso pode impedir que outros sites incorporem seu conteúdo em suas páginas da Web (o que habilitaria o {{interwiki('wikipedia','clickjacking')}} e vários outros ataques), exatamente o que os desenvolvedores do MDN fizeram, como vimos anteriormente.</p> + +<div class="note"> +<p><strong>Nota</strong>: Você pode ler a publicação de Frederik Braun <a href="https://blog.mozilla.org/security/2013/12/12/on-the-x-frame-options-security-header/">X-Frame-Options Security Header</a> para obter mais informações sobre este tópico. Obviamente, está fora do escopo uma explicação completa neste artigo.</p> +</div> + +<h2 id="The_<embed>_and_<object>_elements">The <embed> and <object> elements</h2> + +<p>The {{htmlelement("embed")}} and {{htmlelement("object")}} elements serve a different function to {{htmlelement("iframe")}} — these elements are general purpose embedding tools for embedding multiple types of external content, which include plugin technologies like Java Applets and Flash, PDF (which can be shown in a browser with a PDF plugin), and even content like videos, SVG and images!</p> + +<div class="note"> +<p><strong>Note</strong>: A <strong>plugin</strong>, in this context, refers to software that provides access to content the browser cannot read natively.</p> +</div> + +<p>However, you are unlikely to use these elements very much — Applets haven't been used for years, Flash is no longer very popular, due to a number of reasons (see {{anch("The case against plugins")}}, below), PDFs tend to be better linked to than embedded, and other content such as images and video have much better, easier elements to handle those. Plugins and these embedding methods are really a legacy technology, and we are mainly mentioning them in case you come across them in certain circumstances like intranets, or enterprise projects.</p> + +<p>If you find yourself needing to embed plugin content, this is the kind of information you'll need, at a minimum:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"></th> + <th scope="col">{{htmlelement("embed")}}</th> + <th scope="col">{{htmlelement("object")}}</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{glossary("URL")}} of the embedded content</td> + <td>{{htmlattrxref('src','embed')}}</td> + <td>{{htmlattrxref('data','object')}}</td> + </tr> + <tr> + <td><em>accurate </em>{{glossary("MIME type", 'media type')}} of the embedded content</td> + <td>{{htmlattrxref('type','embed')}}</td> + <td>{{htmlattrxref('type','object')}}</td> + </tr> + <tr> + <td>height and width (in CSS pixels) of the box controlled by the plugin</td> + <td>{{htmlattrxref('height','embed')}}<br> + {{htmlattrxref('width','embed')}}</td> + <td>{{htmlattrxref('height','object')}}<br> + {{htmlattrxref('width','object')}}</td> + </tr> + <tr> + <td>names and values, to feed the plugin as parameters</td> + <td>ad hoc attributes with those names and values</td> + <td>single-tag {{htmlelement("param")}} elements, contained within <code><object></code></td> + </tr> + <tr> + <td>independent HTML content as fallback for an unavailable resource</td> + <td>not supported (<code><noembed></code> is obsolete)</td> + <td>contained within <code><object></code>, after <code><param></code> elements</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: <code><object></code> requires a <code>data</code> attribute, a <code>type</code> attribute, or both. If you use both, you may also use the {{htmlattrxref('typemustmatch','object')}} attribute (only implemented in Firefox, as of this writing). <code>typemustmatch</code> keeps the embedded file from running unless the <code>type</code> attribute provides the correct media type. <code>typemustmatch</code> can therefore confer significant security benefits when you're embedding content from a different {{glossary("origin")}} (it can keep attackers from running arbitrary scripts through the plugin).</p> +</div> + +<p>Here's an example that uses the {{htmlelement("embed")}} element to embed a Flash movie (see this <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">live on Github</a>, and <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/embed-flash.html">check the source code</a> too):</p> + +<pre class="brush: html"><embed src="whoosh.swf" quality="medium" + bgcolor="#ffffff" width="550" height="400" + name="whoosh" align="middle" allowScriptAccess="sameDomain" + allowFullScreen="false" type="application/x-shockwave-flash" + pluginspage="http://www.macromedia.com/go/getflashplayer"></pre> + +<p>Pretty horrible, isn't it? The HTML generated by the Adobe Flash tool tended to be even worse, using an <code><object></code> element with an <code><embed></code> element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.</p> + +<p>Now let's look at an <code><object></code> example that embeds a PDF into a page (see the <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">live example</a> and the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/other-embedding-technologies/object-pdf.html">source code</a>):</p> + +<pre class="brush: html"><object data="mypdf.pdf" type="application/pdf" + width="800" height="1200" typemustmatch> + <p>You don't have a PDF plugin, but you can + <a href="mypdf.pdf">download the PDF file. + </a> + </p> +</object></pre> + +<p>PDFs were a necessary stepping stone between paper and digital, but they pose many <a href="http://webaim.org/techniques/acrobat/acrobat">accessibility challenges</a> and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.</p> + +<h3 id="The_case_against_plugins">The case against plugins</h3> + +<p>Once upon a time, plugins were indispensable on the Web. Remember the days when you had to install Adobe Flash Player just to watch a movie online? And then you constantly got annoying alerts about updating Flash Player and your Java Runtime Environment. Web technologies have since grown much more robust, and those days are over. For virtually all applications, it's time to stop delivering content that depends on plugins and start taking advantage of Web technologies instead.</p> + +<ul> + <li><strong>Broaden your reach to everyone. </strong>Everyone has a browser, but plugins are increasingly rare, especially among mobile users. Since the Web is easily used without any plugins, people would rather just go to your competitors' websites than install a plugin.</li> + <li><strong>Give yourself a break from the <a href="https://webaim.org/techniques/flash/">extra accessibility headaches </a>that come with Flash and other plugins.</strong></li> + <li><strong>Stay clear of additional security hazards. </strong>Adobe Flash is <a href="https://www.cvedetails.com/product/6761/Adobe-Flash-Player.html?vendor_id=53">notoriously insecure,</a> even after countless patches. In 2015, Alex Stamos, then-Chief Security Officer at Facebook, <a href="https://www.theverge.com/2015/7/13/8948459/adobe-flash-insecure-says-facebook-cso">requested that Adobe discontinue Flash.</a></li> +</ul> + +<div class="blockIndicator note"> +<p><strong>Note: </strong>Due to its inherent issues and the lack of support for Flash, Adobe announced that they would stop supporting it at the end of 2020. As of January 2020, most browsers block Flash content by default, and by December 31st of 2020, all browsers will have completly removed all Flash functionality. Any existing Flash content will be inaccessable after that date.</p> +</div> + +<p>So what should you do? If you need interactivity, HTML and {{glossary("JavaScript")}} can readily get the job done for you with no need for Java applets or outdated ActiveX/BHO technology. Instead of relying on Adobe Flash, you should use <a href="/en-US/docs/Learn/HTML/Howto/Add_audio_or_video_content_to_a_webpage">HTML5 video</a> for your media needs, <a href="/en-US/docs/Learn/HTML/Howto/Add_vector_image_to_a_webpage">SVG</a> for vector graphics, and <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial">Canvas</a> for complex images and animations. <a href="https://plus.google.com/+PeterElst/posts/P5t4pFhptvp">Peter Elst was already writing some years ago</a> that Adobe Flash is rarely the right tool for the job. As for ActiveX, even Microsoft's {{glossary("Microsoft Edge","Edge")}} browser no longer supports it.</p> + +<h2 id="Test_your_skills!">Test your skills!</h2> + +<p>You've reached the end of the this article, but can you remember the most important information? You can find some further tests to verify that you've retained this information before you move on — see <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content/Test_your_skills:_Multimedia_and_embedding">Test your skills: Multimedia and embedding</a>.</p> + +<h2 id="Summary">Summary</h2> + +<p>The topic of embedding other content in web documents can quickly become very complex, so in this article, we've tried to introduce it in a simple, familiar way that will immediately seem relevant, while still hinting at some of the more advanced features of the involved technologies. To start with, you are unlikely to use embedding for much beyond including third-party content like maps and videos on your pages. As you become more experienced, however, you are likely to start finding more uses for them.</p> + +<p>There are many other technologies that involve embedding external content besides the ones we discussed here. We saw some in earlier articles, such as {{htmlelement("video")}}, {{htmlelement("audio")}}, and {{htmlelement("img")}}, but there are others to discover, such as {{htmlelement("canvas")}} for JavaScript-generated 2D and 3D graphics, and {{SVGElement("svg")}} for embedding vector graphics. We'll look at <a href="/en-US/docs/Web/SVG">SVG</a> in the next article of the module.</p> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Video_and_audio_content", "Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio content</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">From <object> to <iframe> — other embedding technologies</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adding vector graphics to the Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> diff --git a/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html new file mode 100644 index 0000000000..961ec6d82e --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -0,0 +1,259 @@ +--- +title: Imagens responsivas +slug: Aprender/HTML/Multimedia_and_embedding/Responsive_images +translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<p class="summary">Neste artigo nós iremos aprender sobre o conceito de imagens responsivas —imagens que funcionam em dispositivos com diferentes tamanhos de tela, resoluções e outras funcionalidades— e entrar em contato com quais ferramentas o HTML oferece para ajudar a implementá-las. Imagens responsivas são apenas uma parte do web design responsivo, um futuro <a href="/en-US/docs/Learn/CSS">tópico de CSS</a> para você aprender.</p> +</div> + +<table class="learn-box nostripe standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Você deve ter visto a <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">introdução ao HTML</a> e como <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">adicionar imagens estáticas numa página web</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Aprender como usar funcionalidades como {{htmlattrxref("srcset", "img")}} e o elemento {{htmlelement("picture")}} para implementar soluções de imagens responsivas em websites.</td> + </tr> + </tbody> +</table> + +<h2 id="Por_que_imagens_responsivas">Por que imagens responsivas?</h2> + +<p>Então qual o problema nós estamos tentando resolver com imagens responsivas? Vamos examinar um cenário típico. Um típico website provavelmente tem uma imagem de cabeçalho, para ter uma boa aparência para os visitantes, e talvez mais algumas imagens no conteúdo abaixo. Você provavelmente quer fazer uma imagem do cabeçalho em toda a largura do cabeçalho, e o as imagens no conteúdo caiba dentro de alguma coluna. Vamos dar uma olhada em um exemplo simples disso:</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"></p> + +<p>Isto funciona bem em um dispositivo de tela grande, como um laptop ou desktop (você pode <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">ver o exemplo ao vivo</a> e encontrar o <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/not-responsive.html">código-fonte</a> no Github.) Nós não vamos discutir muito o CSS, exceto para dizer que:</p> + +<ul> + <li>O conteúdo do <body> foi colocado para o máximo de 1200 pixels de largura (width) —em viewports acima, o body continua a 1200 pixels e centrado no espaço disponível. Em viewports abaixo, o body vai usar 100% da largura disponível.</li> + <li>A imagem de cabeçalho foi colocada para estar sempre no centro, não importando a largura do título. Então, se a página está sendo vista em uma tela mais estreita, o detalhe importante no centro da imagem (as pessoas) continuam sendo visto, e o excesso é perdido nos lados. E tem 200 pixels de altura.</li> + <li>As imagens do conteúdo foram configuradas para caso o elemento body se torne menor que as imagens, então elas começam a diminuir. Assim sempre estarão dentro do body, mesmo que ultrapassando ele.</li> +</ul> + +<p>Isto está bom, mas o problema vem quando você começa a ver a página em uma tela estreita - o cabeçalho parece bom, mas está começando a pegar um tamanho grande para um dispositivo móvel; A primeira imagem do conteúdo por outro lado parece terrível - neste tamanho você mal consegue ver as pessoas nela.</p> + +<p><img alt="Our example site as viewed on a narrow screen; the first image has shrunk to the point where it is hard to make out the detail on it." src="https://mdn.mozillademos.org/files/12936/non-responsive-narrow.png" style="display: block; height: 793px; margin: 0px auto; width: 320px;"></p> + +<p>Seria muito melhor mostrar uma versão cortada da imagem que contenha os detalhes importantes quando a página é vista em uma tela estreita, e talvez algo entre as duas para uma tela de largura média como um tablet - isto é comumente conhecido como o <strong>problema de direção artística</strong>.</p> + +<p>Ainda, não é preciso embutir estas imagens grandes em páginas se será visto em pequenas telas de celulares; isto é chamado de problema de mudança de resolução - uma imagem rasterizada é um número de pixels de largura e um número de pixels de altura; como nós vimos quando olhamos para <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vetores gráficos</a>, uma imagem rasterizada começa a parecer granulada e horrível se é mostrada maior que seu tamanho original (enquanto que um vetor não). E se isto é mostrado muito menor que seu tamanho original, é um desperdício de largura de banda - usuários mobile especialmente não querem ter que gastar seu pacote de dados baixando uma imagem grande feita para desktop, quando uma imagem pequena poderia ser feita para seu dispositivo. Uma situação ideal seria ter múltiplas resoluções disponíveis e apresentar tamanhos apropriados dependendo dos diferentes dispositivos que acessam a página.</p> + +<p>Para tornar as coisas mais complicadas, alguns dispositivos tem uma alta resolução, que demanda imagens maiores do que as que você espera para ficar bom. Isto é essencialmente o mesmo problema, mas em um contexto diferente.</p> + +<p>Você pode pensar que imagens vetorizadas resolveria estes problemas, e elas resolvem em certo grau - elas têm um tamanho pequeno e se adaptam bem, e você deveria usá-las sempre que possível. Mas elas não são possíveis para todos os tipos de imagem - enquanto elas são ótimas para gráficos simples, padrões, elementos de interface, etc., começa a ficar complexo criar uma imagem baseada em vetor com o tipo de detalhe que você encontraria em uma foto, por exemplo. Formatos de imagens rasterizadas, como JPEGs, são melhores para este tipo como nós vemos no exemplo acima.</p> + +<p>Este tipo de problema não existe quando a web começou a existir, no começo dos anos 1990 - naquele tempo somente desktops e laptops navegavam a Web, então engenheiros de navegadores e programadores nem pensavam em implementar soluções. <em>Tecnologias de imagens responsivas</em> foram implementadas recentemente para resolver os problemas indicados acima, permitindo a você oferecer ao navegador vários arquivos de imagens, todas mostrando a mesma coisa mas contendo diferente número de pixels (mudança de resolução), ou diferentes imagens para diferente espaços de alocação (direção de arte).</p> + +<div class="note"> +<p><strong>Note</strong>: As novas funcionalidades discutidas neste artigo — {{htmlattrxref("srcset", "img")}}/{{htmlattrxref("sizes", "img")}}/{{htmlelement("picture")}} — são todas suportadas nas versões atuais de navegadores mobile e desktop (incluindo Microsoft Edge, embora não suportada pelo Internet Explorer).</p> +</div> + +<h2 id="Como_você_faz_para_criar_imagens_responsivas">Como você faz para criar imagens responsivas?</h2> + +<p>Nesta seção, nós iremos ver os dois problemas ilustrados acima e mostrar como resolvê-los usando fucionalidades de imagens responsivas do HTML. Você deve notar que nós iremos focar no elemento HTML {{htmlelement("img")}} para esta seção, como visto na área de conteúdo do exemplo acima - a imagem no cabeçalho da página é somente para decoração, e assim implementada usando imagens de background CSS. <a href="http://blog.cloudfour.com/responsive-images-101-part-8-css-images/">CSS indiscutivelmente tem ferramentas melhores para design responsivo</a> do que HTML, e nós iremos falar sobre estas ferramentas em um módulo futuro de CSS.</p> + +<h3 id="Mudança_de_resolução_Diferentes_tamanhos">Mudança de resolução: Diferentes tamanhos</h3> + +<p>Então, qual é o problema que nós queremos resolver com mudança de resolução? Nós queremos mostrar identico conteúdo da imagem, somente maior ou menor dependendo do dispositivo - esta é a situação que nós temos com a segunda imagem do conteúdo em nosso exemplo. O padrão do elemento {{htmlelement("img")}} tradicionalmente somente permite apontar o navegador para uma única fonte:</p> + +<pre class="brush: html"><img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> + +<p>Nós podemos, entretanto, usar dois novos atributos — {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}} —para fornecer várias fontes adicionais juntamente com sugestões para ajudar o navegador a pegar a correta. Você pode ver um exemplo disso no nosso exemplo <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> no Github (ver também <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/responsive.html">o código fonte</a>):</p> + +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg 320w, + elva-fairy-480w.jpg 480w, + elva-fairy-800w.jpg 800w" + sizes="(max-width: 320px) 280px, + (max-width: 480px) 440px, + 800px" + src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy"></pre> + +<p>Os atributos <code>srcset</code> e <code>sizes</code> parecem complicados, mas não são difíceis de entender se você formata eles como mostrado acima, com uma parte diferente do valor do atributo para cada linha. Cada valor contém uma lista separada por vírgula, e cada parte da lista é dividida em três sub-partes. Vamos percorrer o conteúdo de cada agora:</p> + +<p><strong><code>srcset</code></strong> define o conjunto de imagens que nós iremos permitir ao navegador escolher, e qual tamanho cada imagem tem. Antes de cada vírgula nós escrevemos:</p> + +<ol> + <li>Um<strong> nome do arquivo da imagem</strong> (<code>elva-fairy-480w.jpg</code>).</li> + <li>Um espaço.</li> + <li>A <strong>largura da imagem em pixels </strong>(<code>480w</code>) — note que é usado a unidade <code>w</code>, e não <code>px</code> como você pode esperar. Este é o tamanho real da imagem, que pode ser encontrado no arquivo dela no seu computador (por exemplo no Mac você pode selecionar a imagem no Finder, e pressionar <kbd>Cmd</kbd> + <kbd>I</kbd> para mostrar as informações na tela).</li> +</ol> + +<p><strong><code>sizes</code></strong> define um conjunto de condições de mídia (ex.: largura da tela) e indica qual tamanho da imagem deveria ser a melhor escolha, quando certas condições de tela são verdadeiras - Estas são as sugestões que nós falamos antes. Neste caso, antes de cada vírgula nós escrevemos:</p> + +<ol> + <li>Uma <strong>condição de mídia</strong> (<code>(max-width:480px)</code>) — Você vai aprender mais sobre isso no <a href="/en-US/docs/Learn/CSS">tema CSS</a>, mas para agora vamos somente dizer que a condição de mídia descreve um possível estado em que a tela pode estar. Neste caso, nós estamos dizendo "quando a largura da tela é 480px ou menos".</li> + <li>Um espaço.</li> + <li>A <strong>largura do slot da imagem</strong> vai preencher quando a condição de mídia for verdadeira (<code>440px</code>).</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Para a largura do slot, você pode fornecer um tamanho absoluto (<code>px</code>, <code>em</code>) ou um tamanho relativo (como porcentagem).Você pode ter notado que o último slot de largura não tem condição de mídia - isto é o padrão que será escolhido quando nenhuma condição for verdadeira. O navegador ignora tudo depois da primeira condição satisfeita, então tenha cuidado com a ordem de condições.</p> +</div> + +<p>Então, com estes atributos no lugar, o navegador irá:</p> + +<ol> + <li>Ver a largura do dispositivo.</li> + <li>Ver qual condição de mídia na lista <code>sizes</code> é a primeira a ser verdadeira.</li> + <li>Ver qual é o slot para aquela condição de mída.</li> + <li>Carregar a imagem definida na lista <code>srcset</code> que mais chega perto do tamanho do slot.</li> +</ol> + +<p>E é isto! Então neste ponto, se um navegador suportado com uma largurar de 480px carregar a página, a condição (<code>max-width: 480px</code>) será verdadeira, então o slot <code>440px</code> será escolhido, então o <code>elva-fairy-480w.jpg</code> será carregada, como a largura inerente (<code>480w</code>) é a mais próxima de <code>440px</code>. A imagem de 800px é 128KB no disco enquanto que a versão de 480px é somente 63KB - economizando 65KB. Agora imagine se fosse uma página que tivesse várias imagens. Usando esta técnica poderia economizar os dados de usuários de celular.</p> + +<p>Navegadores antigos que não suportam estas funcionalidades serão ignorados, seguiremos e carregaremos a imagem definida no atributo {{htmlattrxref("src", "img")}} como normal.</p> + +<div class="note"> +<p><strong>Nota:</strong> No {{htmlelement("head")}} do documento você encontrará a linha <code><meta name="viewport" content="width=device-width"></code>: isto força navegadores de celular adotar a largura real para carregar páginas web (alguns navegadores mobile mentem sobre sua largura da janela, e em vez carregam páginas em uma largura grante e então encolhem a página carregada, o que é de muita ajuda para imagens e design responsivos. Nós iremos ensinar mais sobre isso em um módulo futuro).</p> +</div> + +<h3 id="Ferramentas_de_desenvolvimento_úteis">Ferramentas de desenvolvimento úteis</h3> + +<p>Há algumas <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">ferramenta de desenvolvimento </a>úteis em navegadores para ajudar a exercitar o necessário para slot de largura, etc, que você precisa usar. Quando eu estava trabalhando neles, eu primeiro carreguei a versão não responsiva do meu exemplo (<code>not-responsive.html</code>), então fui no <a href="/en-US/docs/Tools/Responsive_Design_Mode">Modo de Design Responsivo </a>(Ferramentas >Desenvolvimento Web > Modo de Design Responsivo), que permite a você ver o layout da sua página como se ele estivesse visto através de uma variedade de diferentes tamanhos de telas.</p> + +<p>Eu configurei a largura da janela para 320px e depois 480px; para cada uma eu fui no <a href="/en-US/docs/Tools/Page_Inspector">DOM Inspector</a>, cliquei no elemento {{htmlelement("img")}} no qual nós estamos interessados, então olhei o tamanho na aba Box Model view no lado direito da tela. Isto deve dar para você a dica da largura de imagem que você precisa.</p> + +<p><img alt="A screenshot of the firefox devtools with an image element highlighted in the dom, showing its dimensions as 440 by 293 pixels." src="https://mdn.mozillademos.org/files/12932/box-model-devtools.png" style="display: block; height: 845px; margin: 0px auto; width: 480px;"></p> + +<p>Próximo, você pode checar se o <code>srcset </code>está funcionando configurando a largura da janela para a qual você quiser (coloque para uma largura estreita, por exemplo), abrindo o Network Inspector (Ferramentas > Web Developer > Network), então recarregue a página. Isto deve dar a você uma lista do que foi carregado na página, e aqui você pode checar qual arquivo da imagem foi escolhida para baixar.</p> + +<div class="note"> +<p><strong>Nota: </strong>Use o Mozilla Firefox para testar <code>srcset</code>. O Chrome carrega a melhor imagem se estiver em cache no navegador, anulando o propósito do teste na ferramenta de desenvolvimento.</p> +</div> + +<p><img alt="a screenshot of the network inspector in firefox devtools, showing that the HTML for the page has been downloaded, along with three images, which include the two 800 wide versions of the responsive images" src="https://mdn.mozillademos.org/files/12934/network-devtools.png" style="display: block; height: 630px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Mudança_de_Resolução_Mesmo_tamanho_diferente_resoluções">Mudança de Resolução: Mesmo tamanho, diferente resoluções</h3> + +<p>Se você está dando suporte a múltiplas resoluções de vídeo, mas todas veem sua imagem no tamanho real na tela, você pode permitir ao navegador escolher uma resolução apropriada para a imagem usando <code>srcset</code> com x indentificadores e sem <code>sizes </code>- uma sintaxe um pouco mais fácil! Você pode encontrar um exemplo de como isto parece em <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">srcset-resolutions.html </a>(ver também <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/responsive-images/srcset-resolutions.html">o código fonte</a>):</p> + +<pre class="brush: html"><img srcset="elva-fairy-320w.jpg, + elva-fairy-480w.jpg 1.5x, + elva-fairy-640w.jpg 2x" + src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy"> +</pre> + +<p><img alt="A picture of a little girl dressed up as a fairy, with an old camera film effect applied to the image" src="https://mdn.mozillademos.org/files/12942/resolution-example.png" style="display: block; height: 425px; margin: 0px auto; width: 480px;">Neste exemplo, o seguinte CSS é aplicado na imagem, então ela etra uma largura de 320 pixels na tela (também chamado pixels CSS):</p> + +<pre class="brush: css">img { + width: 320px; +}</pre> + +<p>Neste caso, <code>sizes</code> não é preciso - o navegador simplesmente encontra qual resolução é a que será mostrada, e fornece a mais apropriada definida no <code>srcset</code>. Então se o dispositivo que acessa a página tem um padrão de baixa resolução, com um pixel do dispositivo representando cada pixel CSS, a imagem <code>elva-fairy-320w.jpg</code> será carregada (o 1x é implícito, então você não precisa incluí-lo). Se o dispositivo tem uma alta resolução de dois pixels do dispositivo para pixel CSS ou mais, a imagem <code>elva-fairy-640w.jpg</code> será carregada. A imagem 640px é 93KB, enquanto a 320px é somente 39KB.</p> + +<h3 id="Direção_de_Arte">Direção de Arte</h3> + +<p>Recapitulando, o problema de direção de arte involve querer mudar a imagem mostrada para se adequar a diferentes tamanhos de tela. Por exemplo, se uma foto de um grande panorama com uma pessoa no centro é mostrada em uma página quando visualizada em um navegador de desktop, então é encolhido quando a página é vista em um navegador de celular, ficará ruim pois a pessoa no centro aparecerá bem pequena e difícil de ver. Provavelmente seria melhor mostrar uma imagem menor e em formato retrato (em pé) no celular, que mostrará a pessoa ampliada. O elemento {{htmlelement("picture")}} permite a nós implementar justamente este tipo de solução.</p> + +<p>Voltando para o nosso exemplo <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/not-responsive.html">not-responsive.html</a>, nós temos uma imagem que precisa de uma direção de arte:</p> + +<pre class="brush: html"><img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"></pre> + +<p>Vamos consertar isso, com {{htmlelement("picture")}}! Como <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content"><code><video></code> e <code><audio></code></a>, O elemento <code><picture></code> é um invólocro contendo muitos elementos {{htmlelement("source")}} que fornecem muitas fontes diferentes para o navegador escolher, seguido pelo elemento mais importante {{htmlelement("img")}}. O código em <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/responsive-images/responsive.html">responsive.html</a> ficará assim então:</p> + +<pre class="brush: html"><picture> + <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"> + <source media="(min-width: 800px)" srcset="elva-800w.jpg"> + <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva"> +</picture> +</pre> + +<ul> + <li>Os elementos <code><source> </code>inclui um atributo <code>media</code> que contem uma condição de mídia - como no nosso primeiro exemplo <code>srcset</code>, estas condições são testadas para qual imagem será mostrada no dispositivo - a primeira que retornar um valor verdadeiro, será escolhida. Neste caso, se a largura da janela é 799px ou menor, a primeira imagem do elemento <code><source></code> será mostrada. Se a largura da janela é 800px ou maior, será escolhida a segunda.</li> + <li>Os atributos <code>srcset</code> contem o caminho para a imagem que será apresentada. Note que como acabamos de ver acima com <code><img></code>, <code><source></code> pode pegar um atributo srcsetcom múltiplas imagens referenciadas, e um atributo sizes também. Então você pode oferecer múltiplas imagens via um elemento <code><picture></code>, mas também oferecer múltiplas resoluções para cada uma. Na prática, você provavelmente não vai querer fazer isso com frequência.</li> + <li>Em todos os casos, você deve fornecer um elemento <code><img></code>, com <code>src</code> e <code>alt</code>, logo antes do <code></picture></code>, de outra forma não aparecerá imagens. Assim um padrão será aplicado quando nenhuma condição for atendida (você pode remover o segundo elemento <code><source></code> neste exemplo), e verificar navegadores que não suportam o elemento <code><picture></code>.</li> +</ul> + +<p>Este código nos permite mostrar uma imagem adequada em ambas extensas e estreitas telas, como podemos ver abaixo:</p> + +<p><img alt="Our example site as viewed on a wide screen - here the first image works ok, as it is big enough to see the detail in the center." src="https://mdn.mozillademos.org/files/12940/picture-element-wide.png" style="display: block; height: 554px; margin: 0px auto; width: 700px;"><img alt="Our example site as viewed on a narrow screen with the picture element used to switch the first image to a portrait close up of the detail, making it a lot more useful on a narrow screen" src="https://mdn.mozillademos.org/files/12938/picture-element-narrow.png" style="display: block; height: 710px; margin: 0px auto; width: 320px;"></p> + +<div class="note"> +<p>Nota: Você deveria usar o atributo <code>media</code> somente em cenários de direção de arte; quando você usa <code>media</code>, não oferecendo também condições com o atributo <code>sizes</code>.</p> +</div> + +<h3 id="Por_que_não_podemos_só_fazer_isso_usando_CSS_ou_JavaScript">Por que não podemos só fazer isso usando CSS ou JavaScript?</h3> + +<p>Quando o navegador começa a carregar a página, inicia o download de todas as imagens antes do analisador principal ter começado a carregar e interpretar o JavaScript e o CSS da página. Isto é uma técnica útil, a qual diminui o tempo de carregamento médio em 20%. Entretanto, isto não é útil para imagens responsivas, então é necessário implementar soluções como srcset. Você não pode, por exemplo, carregar o elemento {{htmlelement("img")}}, então detectar a largura da janela com JavaScript e mudar dinamicamente o arquivo da imagem para um menor, caso deseje. Até lá, a imagem original deveria já ter sido carregado, e você iria carregar uma menor, o que é ainda pior em termos de imagens responsivas.</p> + +<ul> +</ul> + +<h3 id="Use_bastante_formatos_de_imagens_modernos">Use bastante formatos de imagens modernos</h3> + +<p>Há vários novos e excitantes formatos de imagens (como WebP e JPEG-2000) que podem manter baixo tamanho de arquivo e alta qualidade ao mesmo tempo. Entretanto, o suporte do navegador é menor.</p> + +<p><code><picture></code> permite-nos continuar dando suporte para navegadores antigos. Você pode suprir tipos MIME dentro de atributos <code>type</code>, então o navegador pode rejeitar imediatamente arquivos não suportados:</p> + +<pre class="brush: html"><picture> + <source type="image/svg+xml" srcset="pyramid.svg"> + <source type="image/webp" srcset="pyramid.webp"> + <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles"> +</picture> +</pre> + +<ul> + <li><em>Não</em> use o atributo <code>media</code>, a menos que você também precise de direção de arte.</li> + <li>No elemento <code><source></code>, você só pode refenciar imagens de tipos declarados em <code>type</code>.</li> + <li>Como antes, você é encorajado a usar uma lista separada por vírgula com <code>srcset</code> e <code>sizes</code>, caso precise.</li> +</ul> + +<h2 id="Aprendizado_ativo_Implementando_suas_próprias_imagens_responsivas">Aprendizado ativo: Implementando suas próprias imagens responsivas</h2> + +<p>Para esse exercício, nós estamos esperando que você seja corajoso e vá sozinho.. principalmente. Nós queremos que você implemente sua própria adequada direção de arte em tela estreita/ampla usando <code><picture></code>, e um exemplo de mudança de resolução que use <code>srcset</code>.</p> + +<ol> + <li>Escreva um simples HTML contendo seu código (use <code>not-responsive.html</code> como um ponto de partida, se quiser)</li> + <li>Encontre uma boa imagem ampla de um panorama com algum detalhe contido em alguma parte. Crie uma versão de tamanho web usando um editor de imagem, então coloque parra mostrar uma pequena parte que amplia o detalhe, e salve em uma segunda imagem (algo como 480px está bom).</li> + <li>Use o elemento <code><picture></code> para implementar uma mudança de imagem!</li> + <li>Crie múltiplos arquivos de imagem de diferentes tamanhos, cada um mostrando a mesma imagem.</li> + <li>Use <code>srcset</code>/<code>size</code> para criar um exemplo de mudança de resolução, que sirva para os mesmos tamanhos de imagens em diferentes resoluções, ou diferentes tamanhos de imagens em cada largura de janela.</li> +</ol> + +<div class="note"> +<p><strong>Nota:</strong>Use a ferramenta de desenvolvimento do navegador para ajudar a ver os tamanhos que você precisa, como mencionado acima.</p> +</div> + +<h2 id="Sumário">Sumário</h2> + +<p>Isto é um geral sobre imagens responsivas - nós esperamos que você tenha aproveitado estas novas técnicas. Recapitulando, há dois problemas que nós discutimos aqui:</p> + +<ul> + <li><strong>Direção de Arte: </strong>O problema consiste em apresentar imagens cortadas para diferentes layouts - por exemplo, uma imagem panorâmica mostrada completa em um layout desktop, e uma imagem retrato mostrando o objeto principal ampliado em um layout mobile. Isto pode ser resolvido usando o elemento {{htmlelement("picture")}}.</li> + <li><strong>Mudança de resolução:</strong> O problema é apresentar arquivos menores de imagens para dispositivos estreitos, porque eles não precisam de imagens gigantes como em computadores - e também, opcionalmente, que você quer apresentar imagens de diferentes resoluções para alta e baixa densidades de tela. Isto pode resolver usando <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">vector graphics</a> (imagens SVG), e os atributos {{htmlattrxref("srcset", "img")}} e {{htmlattrxref("sizes", "img")}}.</li> +</ul> + +<p>Isto também encerra o módulo <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding">Multimedia and embedding</a>! A única coisa para fazer agora é seguir e tentar nosso teste de multimídia, e ver como você está. Se divirta.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a href="http://blog.cloudfour.com/responsive-images-101-definitions">Jason Grigsby's excelente introdução a imagens responsivas</a></li> + <li><a href="https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/">Imagens respondivas: Se você está mudando de resolução, use srcset</a> — Inclui mais explicação sobre como o navegador resolve qual imagem usar</li> + <li>{{htmlelement("img")}}</li> + <li>{{htmlelement("picture")}}</li> + <li>{{htmlelement("source")}}</li> +</ul> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web", "Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<div> +<h2 id="Neste_Módulo">Neste Módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Imagens em HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Video_and_audio_content">Video and audio</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies">De <object> a <iframe> — outras tecnologias</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web">Adicionando gráficos vetorias na Web</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Imagens responsivas</a></li> + <li><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Mozilla_splash_page">Mozilla splash page</a></li> +</ul> +</div> diff --git a/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html new file mode 100644 index 0000000000..2a894b7fd0 --- /dev/null +++ b/files/pt-br/learn/html/multimedia_and_embedding/video_and_audio_content/index.html @@ -0,0 +1,319 @@ +--- +title: Conteúdo de vídeo e áudio +slug: Aprender/HTML/Multimedia_and_embedding/Video_and_audio_content +tags: + - Artigos + - Audio + - Guías + - HTML + - Video +translation_of: Learn/HTML/Multimedia_and_embedding/Video_and_audio_content +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</div> + +<p class="summary"><span id="result_box" lang="pt"><span class="alt-edited">Agora que estamos à vontade para adicionar imagens simples a uma página da Web, o próximo passo é começar a adicionar players de vídeo e áudio aos seus documentos HTML!</span></span> <span class="short_text" id="result_box" lang="pt"><span class="alt-edited">Neste artigo vamos olhar para fazer exatamente isso com os elementos </span></span>{{htmlelement("video")}} e {{htmlelement("audio")}} ; <span id="result_box" lang="pt"><span class="alt-edited">Então, vamos terminar de olhar como adicionar legendas/subtítulos aos seus vídeos.</span></span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td><span class="short_text" id="result_box" lang="pt"><span>Alfabetização básica em informática</span></span>, <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/instalando_programas_basicos">software básico instalado</a>, <span class="short_text" id="result_box" lang="pt"><span>conhecimento básico de <a href="/pt-BR/docs/Aprender/Getting_started_with_the_web/lidando_com_arquivos">trabalhar com arquivos</a></span></span>, <span class="short_text" id="result_box" lang="pt"><span>familiaridade com os fundamentos HTML</span></span> (<span class="short_text" id="result_box" lang="pt"><span>Como coberto em <a href="/pt-BR/docs/Aprender/HTML/Introducao_ao_HTML/Getting_started">Introdução ao HTML</a></span></span>) e <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML">Images in HTML</a>.</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td><span id="result_box" lang="pt"><span>Para aprender a incorporar conteúdo de vídeo e áudio em uma página da Web e adicionar legendas/subtítulos ao vídeo.</span></span></td> + </tr> + </tbody> +</table> + +<h2 id="Audio_e_video_na_web">Audio e video na web</h2> + +<p><span id="result_box" lang="pt"><span class="alt-edited">Os desenvolvedores da Web quiseram usar vídeo e áudio na Web por um longo tempo, desde o início dos anos 2000, quando começamos a ter largura de banda rápida o suficiente para suportar qualquer tipo de vídeo</span></span> ( <span id="result_box" lang="pt"><span>Os arquivos de vídeo são muito maiores que o texto ou mesmo imagens</span></span>.). Nos primeiros dias, as tecnologias web nativas, como o HTML, não tinham a capacidade de incorporar vídeo e áudio na Web, de modo que as tecnologias proprietárias (ou baseado em plugin) como o <a href="https://pt.wikipedia.org/wiki/Adobe_Flash">Flash</a> (e depois, <a href="https://pt.wikipedia.org/wiki/Silverlight">Silverlight</a>) tornaram-se populares para lidar com esse conteúdo . <span id="result_box" lang="pt"><span>Esse tipo de tecnologia funcionou bem, mas teve vários problemas, incluindo não funcionar bem com recursos HTML/CSS, problemas de segurança e problemas de acessibilidade</span></span>.</p> + +<p>Uma solução nativa resolveria muito disso, se bem feita. Felizmente, alguns anos depois, o {{glossary("HTML5")}} especificação tinha tais recursos adicionados, com o {{htmlelement("video")}} e{{htmlelement("audio")}} elementos, e alguns novos brilhantes {{Glossary("JavaScript")}} {{Glossary("API","APIs")}} por controlá-los. Não veremos o JavaScript aqui - apenas os fundamentos básicos que podem ser alcançados com o HTML.</p> + +<p>Não ensinaremos como produzir arquivos de áudio e vídeo - isso requer um conjunto de habilidades completamente diferente. Nós fornecemos a você <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">amostras de arquivos de áudio e vídeo e exemplos de códigos</a> para sua própria experimentação, caso você não consiga se apossar.</p> + +<div class="note"> +<p><strong>Nota</strong>: Antes de começar aqui, você também deve saber que existem algumas {{glossary("OVP","OVPs")}} (fornecedores de vídeo online) como <a href="https://www.youtube.com/">YouTube</a>, <a href="http://www.dailymotion.com">Dailymotion</a>, e <a href="https://vimeo.com/">Vimeo</a>, e provedores de áudio on-line como <a href="https://soundcloud.com/">Soundcloud</a>. Essas empresas oferecem uma maneira conveniente e fácil de hospedar e consumir vídeos, para que você não precise se preocupar com o enorme consumo de largura de banda. Os OVPs geralmente oferecem código pronto para incorporar vídeo / áudio em suas páginas da web. Se você seguir esse caminho, poderá evitar algumas das dificuldades que discutimos neste artigo. Discutiremos esse tipo de serviço um pouco mais no próximo artigo.</p> +</div> + +<h3 id="O_elemento_<video>">O elemento <video> </h3> + +<p>O elemento {{htmlelement("video")}} permite incorporar um vídeo com muita facilidade. Um exemplo realmente simples é assim:</p> + +<pre class="brush: html"><video src="rabbit320.webm" controls> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> +</video></pre> + +<p>Os recursos da nota são:</p> + +<dl> + <dt>{{htmlattrxref("src","video")}}</dt> + <dd>Da mesma maneira que para o elemento {{htmlelement("img")}}, O atributo <code>src</code> contém um caminho para o vídeo que você deseja incorporar. Funciona exatamente da mesma maneira.</dd> + <dt>{{htmlattrxref("controls","video")}}</dt> + <dd>Os usuários devem poder controlar a reprodução de vídeo e áudio (isso é especialmente crítico para pessoas que possuem <a href="https://pt.wikipedia.org/wiki/Epilepsia">epilepsy</a>.) Você deve usar o atributo <code>controls</code> para incluir a própria interface de controle do navegador ou criar sua interface usando o apropriado <a href="/en-US/docs/Web/API/HTMLMediaElement">JavaScript API</a>. No mínimo, a interface deve incluir uma maneira de iniciar e parar a mídia e ajustar o volume.</dd> + <dt>O parágrafo dentro do <code><video></code> tags</dt> + <dd>Isso é chamado de <strong>conteúdo alternativo</strong> - será exibido se o navegador que acessa a página não suportar o elemento <code><video></code>, permitindo fornecer um substituto para navegadores mais antigos. Isso pode ser o que você quiser; nesse caso, fornecemos um link direto para o arquivo de vídeo, para que o usuário possa acessá-lo de alguma forma, independentemente do navegador que estiver usando.</dd> +</dl> + +<p>O vídeo incorporado será mais ou menos assim:</p> + +<p><img alt="A simple video player showing a video of a small white rabbit" src="https://mdn.mozillademos.org/files/12794/simple-video.png" style="display: block; height: 592px; margin: 0px auto; width: 589px;"></p> + +<p>Você pode tentar o <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">exemplo ao vivo</a> aqui (veja também o <a href="https://github.com/mdn/learning-area/blob/master/html/multimedia-and-embedding/video-and-audio-content/simple-video.html">código fonte</a>.)</p> + +<h3 id="Usando_vários_formatos_de_origem_para_melhorar_a_compatibilidade">Usando vários formatos de origem para melhorar a compatibilidade</h3> + +<p>Há um problema no exemplo acima, que você já deve ter notado se você tentou acessar o link do video acima em navegadores mais antigos como Internet Explorer ou até mesmo uma versão antiga do Safari. O vídeo não será reproduzido, porque navegadores diferentes suportam diferentes formatos de vídeo (e áudio). Felizmente, existem coisas que você pode fazer para ajudar a evitar que isso seja um problema.</p> + +<h4 id="Conteúdo_de_um_arquivo_de_mídia">Conteúdo de um arquivo de mídia</h4> + +<p>Primeiro, vamos analisar a terminologia rapidamente. Formatos como MP3, MP4 e WebM são chamados de <a href="https://pt.wikipedia.org/wiki/Arquivo_recipiente">arquivos recipiente</a> (formatos de contêiner). Eles definem uma estrutura na qual cada faixa de áudio e / ou vídeo que compõe a mídia é armazenada, juntamente com os metadados que descrevem a mídia, quais codecs são usados para codificar seus canais e assim por diante.</p> + +<p>As faixas de áudio e vídeo também estão em diferentes formatos, por exemplo:</p> + +<ul> + <li>Um contêiner WebM geralmente empacota o áudio do Ogg Vorbis com vídeo VP8 / VP9. Isso é suportado principalmente no Firefox e Chrome.</li> + <li>Um contêiner MP4 geralmente empacota áudio AAC ou MP3 com vídeo H.264. Isso é suportado principalmente no Internet Explorer e Safari.</li> + <li>O contêiner Ogg mais antigo tende a usar o áudio Ogg Vorbis e o vídeo Ogg Theora. Isso foi suportado principalmente no Firefox e Chrome, mas foi basicamente substituído pelo formato WebM de melhor qualidade.</li> +</ul> + +<p>Existem alguns casos especiais. Por exemplo, para alguns tipos de áudio, os dados de um codec geralmente são armazenados sem um contêiner ou com um contêiner simplificado. Uma dessas instâncias é o codec FLAC, que é armazenado com mais frequência em arquivos FLAC, que são apenas faixas FLAC brutas.</p> + +<p>Outra situação é o sempre popular arquivo MP3. Um "arquivo MP3" é na verdade uma faixa de áudio MPEG-1 Audio Layer III (MP3) armazenada em um contêiner MPEG ou MPEG-2. Isso é especialmente interessante, pois embora a maioria dos navegadores não suporte o uso de mídia MPEG nos elementos {{HTMLElement("video")}} e {{HTMLElement("audio")}}, eles ainda podem suportar MP3 devido à sua popularidade.</p> + +<p>Um reprodutor de áudio tenderá a reproduzir uma faixa de áudio diretamente, por exemplo um arquivo MP3 ou Ogg. Estes não precisam de contêineres.</p> + +<div class="note"> +<p><strong>Note</strong>: Não é tão simples, como você pode ver no nosso <a href="https://developer.mozilla.org/en-US/docs/Web/Media/Formats#Browser_compatibility">tabela de compatibilidade de codec de áudio e vídeo</a>. Além disso, muitos navegadores de plataforma móvel podem reproduzir um formato não suportado, entregando-o ao reprodutor de mídia do sistema subjacente. Mas isso servirá por enquanto.</p> +</div> + +<h4 id="Suporte_a_arquivos_de_mídia_em_navegadores">Suporte a arquivos de mídia em navegadores</h4> + +<p>Os codecs descritos na seção anterior existem para compactar vídeo e áudio em arquivos gerenciáveis, pois o áudio e o vídeo bruto são extremamente grandes. Cada navegador da web suporta uma variedade de <strong>{{Glossary("Codec","Codecs")}}</strong>, como Vorbis ou H.264, que são usados para converter o áudio e o vídeo compactados em dados binários e vice-versa. Cada codec oferece suas próprias vantagens e desvantagens, e cada contêiner também pode oferecer seus próprios recursos positivos e negativos, afetando suas decisões sobre qual usar.</p> + +<p>As coisas se tornam um pouco mais complicadas porque cada navegador não apenas suporta um conjunto diferente de formatos de arquivo de contêiner, como também suporta uma seleção diferente de codecs. Para maximizar a probabilidade de seu site ou aplicativo funcionar no navegador de um usuário, você pode precisar fornecer cada arquivo de mídia usado em vários formatos. Se o seu site e o navegador do usuário não compartilharem um formato de mídia em comum, sua mídia simplesmente não será reproduzida.</p> + +<p>Devido à complexidade de garantir que a mídia do aplicativo seja visível em todas as combinações de navegadores, plataformas e dispositivos que você deseja acessar, a escolha da melhor combinação de codecs e contêiner pode ser uma tarefa complicada. Veja {{SectionOnPage("/en-US/docs/Web/Media/Formats/Containers", "Choosing the right container")}} para obter ajuda na seleção do formato de arquivo do contêiner mais adequado às suas necessidades; Da mesma forma, veja {{SectionOnPage("/en-US/docs/Web/Media/Formats/Video_codecs", "Choosing a video codec")}} e {{SectionOnPage("/en-US/docs/Web/Media/Formats/Audio_codecs", "Choosing an audio codec")}} para obter ajuda na seleção dos primeiros codecs de mídia a serem usados no seu conteúdo e no seu público-alvo.</p> + +<p>Um aspecto adicional a ter em mente: os navegadores móveis podem suportar formatos adicionais não compatíveis com seus equivalentes de desktop, assim como podem não suportar os mesmos formatos da versão para desktop. Além disso, os navegadores de desktop e móveis <em>podem </em>ser projetados para descarregar o manuseio da reprodução de mídia (para todas as mídias ou apenas para tipos específicos que não podem ser tratados internamente). Isso significa que o suporte à mídia depende parcialmente do software que o usuário instalou.</p> + +<div class="note"> +<p><strong>Note:</strong> Você pode estar se perguntando por que essa situação existe. <strong>MP3</strong> (para áudio) e <strong>MP4 / H.264</strong> (para vídeo) são amplamente suportados e de boa qualidade. No entanto, eles também são patentiados - as patentes americanas cobrem o MP3 até pelo menos 2017 e o H.264 até 2027, o que significa que os navegadores que não possuem a patente precisam pagar grandes quantias para suportar esses formatos. Além disso, muitas pessoas evitam, por princípio, software restrito, a favor de formatos abertos. É por isso que precisamos fornecer vários formatos para diferentes navegadores.</p> +</div> + +<p>Então, como fazemos isso? Dê uma olhada no seguinte <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">exemplo atualizado</a>(<a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-video-formats.html">tente ao vivo aqui</a>, também):</p> + +<pre class="brush: html"><video controls> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video></pre> + +<p>Aqui nós tiramos o atributo <code>src</code> (source) do {{HTMLElement("video")}} tag, mas incluímos os elementos {{htmlelement("source")}} que apontam para suas próprias fontes. Nesse caso, o navegador passará pelo elemento {{HTMLElement("source")}} e reproduza o primeiro que ele possui o codec para suportar. A inclusão de fontes WebM e MP4 deve ser suficiente para reproduzir seu vídeo na maioria das plataformas e navegadores atualmente.</p> + +<p>Cada elemento <code><source></code> também tem um atributo {{htmlattrxref("type", "source")}}. Isso é opcional, mas é recomendável que você os inclua - eles contêm o {{glossary("MIME type","MIME types")}} dos arquivos de vídeo, e os navegadores podem lê-los e pular imediatamente os vídeos que não entendem. Se não estiverem incluídos, os navegadores carregarão e tentarão reproduzir cada arquivo até encontrar um que funcione, consumindo ainda mais tempo e recursos.</p> + +<div class="note"> +<p><strong>Nota</strong>: Consulte o nosso <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">guia sobre tipos e formatos de mídias</a> (inglês) para obter ajuda na seleção dos melhores contêineres e codecs para suas necessidades, bem como procurar os tipos MIME certos para especificar cada</p> +</div> + +<h3 id="Outros_recursos_de_<video>">Outros recursos de <video></h3> + +<p>Há vários outros recursos que você pode incluir em um vídeo HTML5. Dê uma olhada no nosso terceiro exemplo, abaixo:</p> + +<pre class="brush: html"><video controls width="400" height="400" + autoplay loop muted + poster="poster.png"> + <source src="rabbit320.mp4" type="video/mp4"> + <source src="rabbit320.webm" type="video/webm"> + <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> +</video> +</pre> + +<p>Isso nos dará uma saída parecida com esta:</p> + +<p><img alt="A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!" src="https://mdn.mozillademos.org/files/12796/extra-video-features.png" style="display: block; height: 731px; margin: 0px auto; width: 653px;">Os novos recursos são:</p> + +<dl> + <dt>{{htmlattrxref("width","video")}} and {{htmlattrxref("height","video")}}</dt> + <dd>Você pode controlar o tamanho do vídeo com esses atributos ou com {{Glossary("CSS")}}. Nos dois casos, os vídeos mantêm sua proporção largura-altura nativa - conhecida como <strong>proporção de tela</strong>. Se a proporção não for mantida pelos tamanhos definidos, o vídeo aumentará para preencher o espaço horizontalmente, e o espaço não preenchido receberá apenas uma cor sólida de fundo por padrão.</dd> + <dt>{{htmlattrxref("autoplay","video")}}</dt> + <dd>Faz com que o áudio ou o vídeo comece a ser reproduzido imediatamente, enquanto o restante da página está sendo carregado. É aconselhável não usar vídeo (ou áudio) de reprodução automática em seus sites, porque os usuários podem achar isso realmente irritante.</dd> + <dt>{{htmlattrxref("loop","video")}}</dt> + <dd>Faz com que o vídeo (ou áudio) comece a ser reproduzido novamente sempre que terminar. Isso também pode ser irritante, portanto, use apenas se for realmente necessário.</dd> + <dt>{{htmlattrxref("muted","video")}}</dt> + <dd>Faz com que a mídia seja reproduzida com o som desativado por padrão.</dd> + <dt>{{htmlattrxref("poster","video")}}</dt> + <dd>O URL de uma imagem que será exibida antes da reprodução do vídeo. Destina-se a ser usado para uma tela inicial ou tela de publicidade.</dd> + <dt>{{htmlattrxref("preload","video")}}</dt> + <dd> + <p>Usado para armazenar arquivos grandes em buffer; pode levar um dos três valores:</p> + + <ul> + <li><code>"none"</code> não armazena em buffer o arquivo</li> + <li><code>"auto"</code> armazena em buffer o arquivo de mídia</li> + <li><code>"metadata" </code>armazena em buffer apenas os metadados do arquivo</li> + </ul> + </dd> +</dl> + +<p>Você pode encontrar o exemplo acima disponível para <a href="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">tocar ao vivo no Github</a> (veja também o <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/extra-video-features.html">código fonte</a>.) Observe que não incluímos o atributo <code>autoplay</code> na versão ao vivo - se o vídeo começar a ser reproduzido assim que a página for carregada, você não poderá ver o pôster!</p> + +<h3 id="O_elemento_<audio>">O elemento <audio></h3> + +<p>O elemento {{htmlelement("audio")}} funciona exatamente como o elemento {{htmlelement("video")}}, com algumas pequenas diferenças, conforme descrito abaixo. Um exemplo típico pode parecer assim:</p> + +<pre class="brush: html"><audio controls> + <source src="viper.mp3" type="audio/mp3"> + <source src="viper.ogg" type="audio/ogg"> + <p>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p> +</audio></pre> + +<p>Isso produz algo como o seguinte em um navegador:</p> + +<p><img alt="A simple audio player with a play button, timer, volume control, and progress bar" src="https://mdn.mozillademos.org/files/12798/audio-player.png" style="display: block; height: 413px; margin: 0px auto; width: 626px;"></p> + +<div class="note"> +<p><strong>Note</strong>: You can <a href="http://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">run the audio demo live</a> on Github (also see the <a href="https://github.com/mdn/learning-area/blob/gh-pages/html/multimedia-and-embedding/video-and-audio-content/multiple-audio-formats.html">audio player source code</a>.)</p> +</div> + +<p>Isso ocupa menos espaço do que um reprodutor de vídeo, pois não há componente visual - você só precisa exibir controles para reproduzir o áudio. Outras diferenças do vídeo HTML5 são as seguintes:</p> + +<ul> + <li>O elemento {{htmlelement("audio")}} não suporta os atributos <code>width</code>/<code>height</code> — novamente, não há componente visual; portanto, não há nada para atribuir uma largura ou altura.</li> + <li>Também não suporta o atributo <code>poster</code> — novamente, não há componente visual</li> +</ul> + +<p>Mais do que isso, <code><audio></code> suporta todos os mesmos recursos que <code><video></code> — revise as seções acima para obter mais informações sobre elas.</p> + +<h3 id="Reiniciando_a_reprodução_de_mídia">Reiniciando a reprodução de mídia</h3> + +<p>A qualquer momento, você pode redefinir a mídia para o início, incluindo o processo de seleção da melhor fonte de mídia, se mais de uma for especificada usando o elemento {{HTMLElement("source")}} — chamando o método {{domxref("HTMLMediaElement.load", "load()")}} do elemento:</p> + +<pre><code>const mediaElem = document.getElementById("my-media-element"); +mediaElem.load();</code></pre> + +<h3 id="Detectando_adição_e_remoção_de_faixas">Detectando adição e remoção de faixas</h3> + +<p>Você pode monitorar as listas de faixas em um elemento de mídia para detectar quando as faixas são adicionadas ou removidas da mídia do elemento. Por exemplo, você pode assistir ao evento {{event ("addtrack")}} ser disparado no objeto associado {{domxref ("AudioTrackList")}} (recuperado por meio de {{domxref ("HTMLMediaElement.audioTracks")}} ) para ser informado quando as faixas de áudio forem adicionadas à mídia:</p> + +<pre><code>const mediaElem = document.querySelector("video"); +mediaElem.audioTracks.onaddtrack = function(event) { + audioTrackAdded(event.track); +}</code></pre> + +<p>Você encontrará mais informações sobre isso na nossa documentação {{domxref ("TrackEvent")}}.</p> + +<h2 id="Exibindo_trilhas_de_texto_em_vídeo">Exibindo trilhas de texto em vídeo</h2> + +<p>Agora discutiremos um conceito um pouco mais avançado que é realmente útil para se conhecer. Muitas pessoas não podem ou não querem ouvir o conteúdo de áudio / vídeo que encontram na Web, pelo menos em determinados momentos. Por exemplo:</p> + +<ul> + <li>Muitas pessoas têm problemas auditivos (mais comumente conhecidos como deficientes auditivos ou surdos), portanto, não conseguem ouvir o áudio.</li> + <li>Outros podem não conseguir ouvir o áudio porque estão em ambientes barulhentos (como um bar lotado quando um jogo de esportes está sendo exibido) ou podem não querer incomodar os outros se estiverem em um local silencioso (como uma biblioteca).</li> + <li>As pessoas que não falam o idioma do vídeo podem querer uma transcrição de texto ou mesmo tradução para ajudá-las a entender o conteúdo da mídia.</li> + <li>Da mesma forma, em ambientes em que a reprodução do áudio seria uma distração ou perturbação (como em uma biblioteca ou quando um parceiro está tentando dormir), ter legendas pode ser muito útil.</li> +</ul> + +<p>Não seria bom poder fornecer a essas pessoas uma transcrição das palavras que estão sendo ditas no áudio / vídeo? Bem, graças ao vídeo HTML5, você pode, com o formato <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/WebVTT_API">WebVTT </a>e o elemento {{htmlelement ("track")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: "Transcrever" significa "escrever as palavras faladas como texto". O texto resultante é uma "transcrição".</p> +</div> + +<p>O WebVTT é um formato para gravar arquivos de texto contendo várias seqüências de texto, juntamente com metadados, como a que horas do vídeo você deseja que cada sequência de texto seja exibida e até informações limitadas sobre estilo / posicionamento. Essas cadeias de texto são chamadas de <strong>pistas </strong>e existem vários tipos de pistas que são usadas para propósitos diferentes. As dicas mais comuns são:</p> + +<dl> + <dt>subtitles</dt> + <dd>Traduções de material estrangeiro, para pessoas que não entendem as palavras ditas no áudio.</dd> + <dt>captions</dt> + <dd>Transcrições sincronizadas de diálogos ou descrições de sons significativos, para permitir que as pessoas que não conseguem ouvir o áudio entendam o que está acontecendo.</dd> + <dt>timed descriptions</dt> + <dd>Texto que deve ser falado pelo media player para descrever elementos visuais importantes para usuários cegos ou deficientes visuais.</dd> +</dl> + +<p>Um arquivo WebVTT típico terá a seguinte aparência:</p> + +<pre class="eval line-numbers language-html"><code class="language-html">WEBVTT + +1 +00:00:22.230 --> 00:00:24.606 +This is the first subtitle. + +2 +00:00:30.739 --> 00:00:34.074 +This is the second. + + ...</code> +</pre> + +<p>Para que isso seja exibido juntamente com a reprodução de mídia HTML, você precisa:</p> + +<ol> + <li>Salve-o como um arquivo <code>.vtt</code> em um local adequado.</li> + <li>Vincule ao arquivo <code>.vtt</code> com o elemento {{htmlelement ("track")}}. <code><track></code> deve ser colocado dentro de <code><audio></code> ou <code><video></code>, mas depois de todos os elementos <code><source></code>. Use o atributo {{htmlattrxref ("kind", "track")}} para especificar se as pistas são <code>subtitles</code>, <code>captions, </code>ou <code>descriptions</code>. Além disso, use {{htmlattrxref ("srclang", "track")}} para informar ao navegador em que idioma você escreveu as legendas.</li> +</ol> + +<p>Aqui está um exemplo:</p> + +<pre class="brush: html"><video controls> + <source src="example.mp4" type="video/mp4"> + <source src="example.webm" type="video/webm"> + <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> +</video></pre> + +<p>Isso resultará em um vídeo com legendas exibidas, mais ou menos assim:</p> + +<p><img alt='Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."' src="https://mdn.mozillademos.org/files/7887/video-player-with-captions.png" style="display: block; height: 365px; margin: 0px auto; width: 593px;"></p> + +<p>Para mais detalhes, leia <a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>. Você pode <a href="http://iandevlin.github.io/mdn/video-player-with-captions/">encontrar o exemplo</a> que acompanha este artigo no Github, escrito por Ian Devlin (consulte o <a href="https://github.com/iandevlin/iandevlin.github.io/tree/master/mdn/video-player-with-captions">código-fonte</a> também.) Este exemplo usa algum JavaScript para permitir que os usuários escolham entre diferentes legendas. Observe que, para ativar as legendas, você precisa pressionar o botão "CC" e selecionar uma opção - inglês, alemão ou espanhol.</p> + +<div class="note"> +<p><strong>Nota</strong>: As faixas de texto também ajudam você com o {{glossary ("SEO")}}, pois os mecanismos de pesquisa prosperam especialmente no texto. As trilhas de texto permitem até que os mecanismos de pesquisa sejam vinculados diretamente a um ponto no meio do vídeo.</p> +</div> + +<h3 id="Aprendizado_ativo_incorporando_seu_próprio_áudio_e_vídeo">Aprendizado ativo: incorporando seu próprio áudio e vídeo</h3> + +<p>Para esse aprendizado ativo, gostaríamos (idealmente) de você sair para o mundo e gravar alguns de seus próprios vídeos e áudio - a maioria dos telefones hoje em dia permite gravar áudio e vídeo com muita facilidade, e desde que você possa transferi-lo para o seu computador, você pode usá-lo. Talvez você precise fazer algumas conversões para obter um WebM e MP4 no caso de vídeo e um MP3 e Ogg no caso de áudio, mas existem programas suficientes disponíveis para permitir isso sem problemas, como o <a href="http://www.mirovideoconverter.com/">Miro Video Converter</a> e o <a href="https://sourceforge.net/projects/audacity/">Audacity</a>. Gostaríamos que você experimentasse!</p> + +<p>Se você não conseguir obter nenhum vídeo ou áudio, pode usar nossos <a href="https://github.com/mdn/learning-area/tree/master/html/multimedia-and-embedding/video-and-audio-content">exemplos de arquivos de áudio e vídeo</a> para realizar este exercício. Você também pode usar nosso código de exemplo para referência.</p> + +<p>Gostaríamos que você:</p> + +<ol> + <li>Salve seus arquivos de áudio e vídeo em um novo diretório no seu computador.</li> + <li>Crie um novo arquivo HTML no mesmo diretório, chamado <code>index.html</code>.</li> + <li>Adicione elementos <code><audio></code> e <code><video></code> à página; faça com que eles exibam os controles padrão do navegador.</li> + <li>Forneça os dois elementos <code><source></code> para que os navegadores encontrem o formato de áudio mais compatível e o carreguem. Isso deve incluir atributos de <code>type</code>.</li> + <li>Dê ao elemento <code><video></code> um pôster que será exibido antes que o vídeo comece a ser reproduzido. Divirta-se criando seu próprio gráfico de pôster.</li> +</ol> + +<p>Para um bônus adicional, você pode tentar pesquisar faixas de texto e descobrir como adicionar legendas ao seu vídeo.</p> + +<h2 id="Resumo">Resumo</h2> + +<p>E isso é um tudo; esperamos que você tenha se divertido brincando com vídeo e áudio em páginas da web! No próximo artigo, veremos outras maneiras de incorporar conteúdo na Web, usando tecnologias como {{htmlelement ("iframe")}}} e {{htmlelement ("object")}}.</p> + +<h2 id="Ver_também">Ver também</h2> + +<ul> + <li>Os elementos de mídia HTML: {{htmlelement("audio")}}, {{htmlelement("video")}}, {{htmlelement("source")}}, {{htmlelement("track")}}.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media">Tecnologias de mídia da Web</a>.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Media/Formats">Guia para tipos e formatos de mídia na Web</a>.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/Apps/Build/Audio_and_video_delivery/Adding_captions_and_subtitles_to_HTML5_video">Adicionando legendas e legendas ao vídeo HTML5</a>.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_delivery">Entrega de áudio e vídeo:</a> muitos detalhes sobre como colocar áudio e vídeo em páginas da Web usando HTML e JavaScript.</li> + <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Apps/Fundamentals/Audio_and_video_manipulation">Manipulação de áudio e vídeo:</a> muitos detalhes sobre a manipulação de áudio e vídeo usando JavaScript (por exemplo, adicionando filtros).</li> + <li>Opções automatizadas para <a href="http://www.inwhatlanguage.com/blog/translate-video-audio/">traduzir multimídia.</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/HTML/Multimedia_and_embedding/Images_in_HTML", "Learn/HTML/Multimedia_and_embedding/Other_embedding_technologies", "Learn/HTML/Multimedia_and_embedding")}}</p> + +<dl> +</dl> + +<ul> +</ul> diff --git a/files/pt-br/learn/html/tables/basics/index.html b/files/pt-br/learn/html/tables/basics/index.html new file mode 100644 index 0000000000..36dcaebfa7 --- /dev/null +++ b/files/pt-br/learn/html/tables/basics/index.html @@ -0,0 +1,559 @@ +--- +title: HTML table basics +slug: Aprender/HTML/Tables/Basics +translation_of: Learn/HTML/Tables/Basics +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Aprender/HTML/Tabelas/Avançado", "Aprender/HTML/Tabelas")}}</div> + +<p class="summary">Este artigo é uma introdução às tabelas HTML, cobrindo o básico, como linhas e células, cabeçalhos, fazendo as células ocuparem várias colunas e linhas e como agrupar todas as células em uma coluna para fins de estilo.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Pré-requisitos:</th> + <td>Noções básicas de HTML (consulte <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introdução ao HTML</a> ).</td> + </tr> + <tr> + <th scope="row">Objetivo:</th> + <td>Para obter familiaridade básica com tabelas HTML.</td> + </tr> + </tbody> +</table> + +<h2 id="O_que_é_uma_tabela">O que é uma tabela?</h2> + +<p>Uma tabela é um conjunto estruturado de dados composto de linhas e colunas (<strong>dados tabulares</strong>). Uma tabela permite consultar de forma rápida e fácil valores que indicam algum tipo de conexão entre diferentes tipos de dados, por exemplo, uma pessoa e sua idade, ou um dia da semana, ou os horários de uma piscina local.</p> + +<p><img alt="Uma tabela de amostra mostrando nomes e idades de algumas pessoas - Chris 38, Dennis 45, Sarah 29, Karen 47." src="https://mdn.mozillademos.org/files/14583/numbers-table.png" style="display: block; height: 156px; margin: 0px auto; width: 350px;"></p> + +<p><img alt="Um cronograma de natação mostrando uma tabela de dados de amostra" src="https://mdn.mozillademos.org/files/14587/swimming-timetable.png" style="display: block; height: 301px; margin: 0px auto; width: 794px;"></p> + +<p>As tabelas são muito comumente usadas na sociedade humana, e têm sido por muito tempo, como evidenciado por este documento do Censo dos EUA de 1800:</p> + +<p><img alt="Um documento de pergaminho muito antigo; os dados não são facilmente legíveis, mas mostram claramente uma tabela de dados sendo usada." src="https://mdn.mozillademos.org/files/14585/1800-census.jpg" style="display: block; height: 505px; margin: 0px auto; width: 800px;"></p> + +<p>Portanto, não é de se admirar que os criadores do HTML tenham fornecido um meio de estruturar e apresentar dados tabulares na web.</p> + +<h3 id="Como_funciona_uma_tabela">Como funciona uma tabela?</h3> + +<p>Tabelas possuem estrutura. As informações são facilmente interpretadas fazendo associações visuais entre os cabeçalhos de linha e coluna. Veja a tabela abaixo, por exemplo, e encontre um gigante gasoso Júpiter com 62 luas. Você pode encontrar a resposta associando os cabeçalhos de linha e coluna relevantes.</p> + +<table> + <caption>Dados sobre os planetas do nosso sistema solar (fatos planetários retirados da <a href="http://nssdc.gsfc.nasa.gov/planetary/factsheet/">Planilha Planetária da Nasa - Métrica</a> .</caption> + <thead> + <tr> + <td colspan="2"></td> + <th scope="col">Nome</th> + <th scope="col">Massa (10 <sup>24</sup> kg)</th> + <th scope="col">Diâmetro (km)</th> + <th scope="col">Densidade (kg/m <sup>3</sup> )</th> + <th scope="col">Gravity (m/s<sup>2</sup>)</th> + <th scope="col">Length of day (hours)</th> + <th scope="col">Distance from Sun (10<sup>6</sup>km)</th> + <th scope="col">Mean temperature (°C)</th> + <th scope="col">Number of moons</th> + <th scope="col">Notes</th> + </tr> + </thead> + <tbody> + <tr> + <th colspan="2" rowspan="4" scope="rowgroup">Terrestial planets</th> + <th scope="row">Mercury</th> + <td>0.330</td> + <td>4,879</td> + <td>5427</td> + <td>3.7</td> + <td>4222.6</td> + <td>57.9</td> + <td>167</td> + <td>0</td> + <td>Closest to the Sun</td> + </tr> + <tr> + <th scope="row">Venus</th> + <td>4.87</td> + <td>12,104</td> + <td>5243</td> + <td>8.9</td> + <td>2802.0</td> + <td>108.2</td> + <td>464</td> + <td>0</td> + <td></td> + </tr> + <tr> + <th scope="row">Earth</th> + <td>5.97</td> + <td>12,756</td> + <td>5514</td> + <td>9.8</td> + <td>24.0</td> + <td>149.6</td> + <td>15</td> + <td>1</td> + <td>Our world</td> + </tr> + <tr> + <th scope="row">Mars</th> + <td>0.642</td> + <td>6,792</td> + <td>3933</td> + <td>3.7</td> + <td>24.7</td> + <td>227.9</td> + <td>-65</td> + <td>2</td> + <td>The red planet</td> + </tr> + <tr> + <th rowspan="4" scope="rowgroup">Jovian planets</th> + <th rowspan="2" scope="rowgroup">Gas giants</th> + <th scope="row">Jupiter</th> + <td>1898</td> + <td>142,984</td> + <td>1326</td> + <td>23.1</td> + <td>9.9</td> + <td>778.6</td> + <td>-110</td> + <td>67</td> + <td>The largest planet</td> + </tr> + <tr> + <th scope="row">Saturn</th> + <td>568</td> + <td>120,536</td> + <td>687</td> + <td>9.0</td> + <td>10.7</td> + <td>1433.5</td> + <td>-140</td> + <td>62</td> + <td></td> + </tr> + <tr> + <th rowspan="2" scope="rowgroup">Ice giants</th> + <th scope="row">Uranus</th> + <td>86.8</td> + <td>51,118</td> + <td>1271</td> + <td>8.7</td> + <td>17.2</td> + <td>2872.5</td> + <td>-195</td> + <td>27</td> + <td></td> + </tr> + <tr> + <th scope="row">Neptune</th> + <td>102</td> + <td>49,528</td> + <td>1638</td> + <td>11.0</td> + <td>16.1</td> + <td>4495.1</td> + <td>-200</td> + <td>14</td> + <td></td> + </tr> + <tr> + <th colspan="2" scope="rowgroup">Dwarf planets</th> + <th scope="row">Pluto</th> + <td>0.0146</td> + <td>2,370</td> + <td>2095</td> + <td>0.7</td> + <td>153.3</td> + <td>5906.4</td> + <td>-225</td> + <td>5</td> + <td>Declassified as a planet in 2006, but this <a href="http://www.usatoday.com/story/tech/2014/10/02/pluto-planet-solar-system/16578959/">remains controversial</a>.</td> + </tr> + </tbody> +</table> + +<p>Quando criadas corretamente, até pessoas cegas podem interpretar dados tabulares em uma tabela HTML - uma tabela HTML bem sucedida deve melhorar a experiência tanto de usuários com deficiências visuais quanto daqueles capazes de ver</p> + +<h3 id="Estilizando_tabelas">Estilizando tabelas</h3> + +<p>You can also have a <a href="https://mdn.github.io/learning-area/html/tables/assessment-finished/planets-data.html">look at the live example</a> on GitHub! One thing you'll notice is that the table does look a bit more readable there — this is because the table you see above on this page has minimal styling, whereas the GitHub version has more significant CSS applied.</p> + +<p>Be under no illusion; for tables to be effective on the web, you need to provide some styling information with <a href="/en-US/docs/Learn/CSS">CSS</a>, as well as good solid structure with HTML. In this module we are focusing on the HTML part; to find out about the CSS part you should visit our <a href="/en-US/docs/Learn/CSS/Styling_boxes/Styling_tables">Styling tables</a> article after you've finished here.</p> + +<p>We won't focus on CSS in this module, but we have provided a minimal CSS stylesheet for you to use that will make your tables more readable than the default you get without any styling. You can find the <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">stylesheet here</a>, and you can also find an <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">HTML template</a> that applies the stylesheet — these together will give you a good starting point for experimenting with HTML tables.</p> + +<h3 id="When_should_you_NOT_use_HTML_tables">When should you NOT use HTML tables?</h3> + +<p>HTML tables should be used for tabular data — this is what they are designed for. Unfortunately, a lot of people used to use HTML tables to lay out web pages, e.g. one row to contain the header, one row to contain the content columns, one row to contain the footer, etc. You can find more details and an example at <a href="/en-US/docs/Learn/Accessibility/HTML#Page_layouts">Page Layouts</a> in our <a href="/en-US/docs/Learn/Accessibility">Accessibility Learning Module</a>. This was commonly used because CSS support across browsers used to be terrible; table layouts are much less common nowadays, but you might still see them in some corners of the web.</p> + +<p>In short, using tables for layout rather than <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout techniques</a> is a bad idea. The main reasons are as follows:</p> + +<ol> + <li><strong>Layout tables reduce accessibility for visually impaired users</strong>: <a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Screenreaders">Screenreaders</a>, used by blind people, interpret the tags that exist in an HTML page and read out the contents to the user. Because tables are not the right tool for layout, and the markup is more complex than with CSS layout techniques, the screenreaders' output will be confusing to their users.</li> + <li><strong>Tables produce tag soup</strong>: As mentioned above, table layouts generally involve more complex markup structures than proper layout techniques. This can result in the code being harder to write, maintain, and debug.</li> + <li><strong>Tables are not automatically responsive</strong>: When you use proper layout containers (such as {{htmlelement("header")}}, {{htmlelement("section")}}, {{htmlelement("article")}}, or {{htmlelement("div")}}), their width defaults to 100% of their parent element. Tables on the other hand are sized according to their content by default, so extra measures are needed to get table layout styling to effectively work across a variety of devices.</li> +</ol> + +<h2 id="Active_learning_Creating_your_first_table">Active learning: Creating your first table</h2> + +<p>We've talked table theory enough, so, let's dive into a practical example and build up a simple table.</p> + +<ol> + <li>First of all, make a local copy of <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/blank-template.html">blank-template.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> in a new directory on your local machine.</li> + <li>The content of every table is enclosed by these two tags : <strong><code><a href="/en-US/docs/Web/HTML/Element/table"><table></table></a></code></strong>. Add these inside the body of your HTML.</li> + <li>The smallest container inside a table is a table cell, which is created by a <strong><code><a href="/en-US/docs/Web/HTML/Element/td"><td></a></code></strong> element ('td' stands for 'table data'). Add the following inside your table tags: + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td></pre> + </li> + <li>If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so: + <pre class="brush: html notranslate"><td>Hi, I'm your first cell.</td> +<td>I'm your second cell.</td> +<td>I'm your third cell.</td> +<td>I'm your fourth cell.</td></pre> + </li> +</ol> + +<p>As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <code><td></code> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.</p> + +<p>To stop this row from growing and start placing subsequent cells on a second row, we need to use the <strong><code><a href="/en-US/docs/Web/HTML/Element/tr"><tr></a></code></strong> element ('tr' stands for 'table row'). Let's investigate this now.</p> + +<ol> + <li>Place the four cells you've already created inside <code><tr></code> tags, like so: + + <pre class="brush: html notranslate"><tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> +</tr></pre> + </li> + <li>Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional <code><tr></code> element, with each cell contained in a <code><td></code>.</li> +</ol> + +<p>This should result in a table that looks something like the following:</p> + +<table> + <tbody> + <tr> + <td>Hi, I'm your first cell.</td> + <td>I'm your second cell.</td> + <td>I'm your third cell.</td> + <td>I'm your fourth cell.</td> + </tr> + <tr> + <td>Second row, first cell.</td> + <td>Cell 2.</td> + <td>Cell 3.</td> + <td>Cell 4.</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: You can also find this on GitHub as <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/simple-table.html">simple-table.html</a> (<a href="http://mdn.github.io/learning-area/html/tables/basic/simple-table.html">see it live also</a>).</p> +</div> + +<h2 id="Adding_headers_with_<th>_elements">Adding headers with <th> elements</h2> + +<p>Now let's turn our attention to table headers — special cells that go at the start of a row or column and define the type of data that row or column contains (as an example, see the "Person" and "Age" cells in the first example shown in this article). To illustrate why they are useful, have a look at the following table example. First the source code:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <td>&nbsp;</td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> +</table></pre> + +<p>Now the actual rendered table:</p> + +<table> + <tbody> + <tr> + <td></td> + <td>Knocky</td> + <td>Flor</td> + <td>Ella</td> + <td>Juan</td> + </tr> + <tr> + <td>Breed</td> + <td>Jack Russell</td> + <td>Poodle</td> + <td>Streetdog</td> + <td>Cocker Spaniel</td> + </tr> + <tr> + <td>Age</td> + <td>16</td> + <td>9</td> + <td>10</td> + <td>5</td> + </tr> + <tr> + <td>Owner</td> + <td>Mother-in-law</td> + <td>Me</td> + <td>Me</td> + <td>Sister-in-law</td> + </tr> + <tr> + <td>Eating Habits</td> + <td>Eats everyone's leftovers</td> + <td>Nibbles at food</td> + <td>Hearty eater</td> + <td>Will eat till he explodes</td> + </tr> + </tbody> +</table> + +<p>The problem here is that, while you can kind of make out what's going on, it is not as easy to cross reference data as it could be. If the column and row headings stood out in some way, it would be much better.</p> + +<h3 id="Active_learning_table_headers">Active learning: table headers</h3> + +<p>Let's have a go at improving this table.</p> + +<ol> + <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table.html">dogs-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same Dogs example as you saw above.</li> + <li>To recognize the table headers as headers, both visually and semantically, you can use the <strong><code><a href="/en-US/docs/Web/HTML/Element/th"><th></a></code></strong> element ('th' stands for 'table header'). This works in exactly the same way as a <code><td></code>, except that it denotes a header, not a normal cell. Go into your HTML, and change all the <code><td></code> elements surrounding the table headers into <code><th></code> elements.</li> + <li>Save your HTML and load it in a browser, and you should see that the headers now look like headers.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/dogs-table-fixed.html">dogs-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/dogs-table-fixed.html">see it live also</a>).</p> +</div> + +<h3 id="Why_are_headers_useful">Why are headers useful?</h3> + +<p>We have already partially answered this question — it is easier to find the data you are looking for when the headers clearly stand out, and the design just generally looks better.</p> + +<div class="note"> +<p><strong>Note</strong>: Table headings come with some default styling — they are bold and centered even if you don't add your own styling to the table, to help them stand out.</p> +</div> + +<p>Tables headers also have an added benefit — along with the <code>scope</code> attribute (which we'll learn about in the next article), they allow you to make tables more accessible by associating each header with all the data in the same row or column. Screenreaders are then able to read out a whole row or column of data at once, which is pretty useful.</p> + +<h2 id="Allowing_cells_to_span_multiple_rows_and_columns">Allowing cells to span multiple rows and columns</h2> + +<p>Sometimes we want cells to span multiple rows or columns. Take the following simple example, which shows the names of common animals. In some cases, we want to show the names of the males and females next to the animal name. Sometimes we don't, and in such cases we just want the animal name to span the whole table.</p> + +<p>The initial markup looks like this:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Hen</td> + </tr> + <tr> + <td>Rooster</td> + </tr> +</table></pre> + +<p>But the output doesn't give us quite what we want:</p> + +<table> + <tbody> + <tr> + <th>Animals</th> + </tr> + <tr> + <th>Hippopotamus</th> + </tr> + <tr> + <th>Horse</th> + <td>Mare</td> + </tr> + <tr> + <td>Stallion</td> + </tr> + <tr> + <th>Crocodile</th> + </tr> + <tr> + <th>Chicken</th> + <td>Hen</td> + </tr> + <tr> + <td>Rooster</td> + </tr> + </tbody> +</table> + +<p>We need a way to get "Animals", "Hippopotamus", and "Crocodile" to span across two columns, and "Horse" and "Chicken" to span downwards over two rows. Fortunately, table headers and cells have the <code>colspan</code> and <code>rowspan</code> attributes, which allow us to do just those things. Both accept a unitless number value, which equals the number of rows or columns you want spanned. For example, <code>colspan="2"</code> makes a cell span two columns.</p> + +<p>Let's use <code>colspan</code> and <code>rowspan</code> to improve this table.</p> + +<ol> + <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table.html">animals-table.html</a> and <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/minimal-table.css">minimal-table.css</a> files in a new directory on your local machine. The HTML contains the same animals example as you saw above.</li> + <li>Next, use <code>colspan</code> to make "Animals", "Hippopotamus", and "Crocodile" span across two columns.</li> + <li>Finally, use <code>rowspan</code> to make "Horse" and "Chicken" span across two rows.</li> + <li>Save and open your code in a browser to see the improvement.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: You can find our finished example at <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/animals-table-fixed.html">animals-table-fixed.html</a> on GitHub (<a href="http://mdn.github.io/learning-area/html/tables/basic/animals-table-fixed.html">see it live also</a>).</p> +</div> + +<table id="tabular" style="background-color: white;"> +</table> + +<h2 id="Providing_common_styling_to_columns">Providing common styling to columns</h2> + +<p>There is one last feature we'll tell you about in this article before we move on. HTML has a method of defining styling information for an entire column of data all in one place — the <strong><code><a href="/en-US/docs/Web/HTML/Element/col"><col></a></code></strong> and <strong><code><a href="/en-US/docs/Web/HTML/Element/colgroup"><colgroup></a></code></strong> elements. These exist because it can be a bit annoying and inefficient having to specify styling on columns — you generally have to specify your styling information on <em>every</em> <code><td></code> or <code><th></code> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.</p> + +<div class="note"> +<p><strong>Note</strong>: Styling columns like this is <a href="https://www.w3.org/TR/CSS22/tables.html#columns">limited to a few properties</a>: <code><a href="/en-US/docs/Web/CSS/border">border</a></code>, <code><a href="/en-US/docs/Web/CSS/background">background</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, and <code><a href="/en-US/docs/Web/CSS/visibility">visibility</a></code>. To set other properties you'll have to either style every <code><td></code> or <code><th></code> in the column, or use a complex selector such as {{cssxref(":nth-child()")}}.</p> +</div> + +<p>Take the following simple example:</p> + +<pre class="brush: html notranslate"><table> + <tr> + <th>Data 1</th> + <th style="background-color: yellow">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow">Jazz</td> + </tr> +</table></pre> + +<p>Which gives us the following result:</p> + +<table> + <tbody> + <tr> + <th>Data 1</th> + <th style="background-color: yellow;">Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td style="background-color: yellow;">Orange</td> + </tr> + <tr> + <td>Robots</td> + <td style="background-color: yellow;">Jazz</td> + </tr> + </tbody> +</table> + +<p>This isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a <code>class</code> set on all three in a real project and specify the styling in a separate stylesheet). Instead of doing this, we can specify the information once, on a <code><col></code> element. <code><col></code> elements are specified inside a <code><colgroup></code> container just below the opening <code><table></code> tag. We could create the same effect as we see above by specifying our table as follows:</p> + +<pre class="brush: html notranslate"><table> + <colgroup> + <col> + <col style="background-color: yellow"> + </colgroup> + <tr> + <th>Data 1</th> + <th>Data 2</th> + </tr> + <tr> + <td>Calcutta</td> + <td>Orange</td> + </tr> + <tr> + <td>Robots</td> + <td>Jazz</td> + </tr> +</table></pre> + +<p>Effectively we are defining two "style columns", one specifying styling information for each column. We are not styling the first column, but we still have to include a blank <code><col></code> element — if we didn't, the styling would just be applied to the first column.</p> + +<p>If we wanted to apply the styling information to both columns, we could just include one <code><col></code> element with a span attribute on it, like this:</p> + +<pre class="brush: html notranslate"><colgroup> + <col style="background-color: yellow" span="2"> +</colgroup></pre> + +<p>Just like <code>colspan</code> and <code>rowspan</code>, <code>span</code> takes a unitless number value that specifies the number of columns you want the styling to apply to.</p> + +<h3 id="Active_learning_colgroup_and_col">Active learning: colgroup and col</h3> + +<p>Now it's time to have a go yourself.</p> + +<p>Below you can see the timetable of a languages teacher. On Friday she has a new class teaching Dutch all day, but she also teaches German for a few periods on Tuesday and Thursdays. She wants to highlight the columns containing the days she is teaching.</p> + +<p>{{EmbedGHLiveSample("learning-area/html/tables/basic/timetable-fixed.html", '100%', 320)}}</p> + +<p>Recreate the table by following the steps below.</p> + +<ol> + <li>First, make a local copy of our <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable.html">timetable.html</a> file in a new directory on your local machine. The HTML contains the same table you saw above, minus the column styling information.</li> + <li>Add a <code><colgroup></code> element at the top of the table, just underneath the <code><table></code> tag, in which you can add your <code><col></code> elements (see the remaining steps below).</li> + <li>The first two columns need to be left unstyled.</li> + <li>Add a background color to the third column. The value for your <code>style</code> attribute is <code>background-color:#97DB9A;</code></li> + <li>Set a separate width on the fourth column. The value for your <code>style</code> attribute is <code>width: 42px;</code></li> + <li>Add a background color to the fifth column. The value for your <code>style</code> attribute is <code>background-color: #97DB9A;</code></li> + <li>Adicione uma cor de fundo diferente mais uma borda à sexta coluna, para indicar que este é um dia especial e ela está dando uma nova aula. Os valores do seu <code>style</code>atributo são<code>background-color:#DCC48E; border:4px solid #C1437A;</code></li> + <li>Os últimos dois dias são dias livres, então apenas defina-os para nenhuma cor de fundo, mas uma largura definida; o valor do <code>style</code>atributo é<code>width: 42px;</code></li> +</ol> + +<p>Veja como você segue com o exemplo. Se você tiver dúvidas ou quiser verificar seu trabalho, pode encontrar nossa versão no GitHub como <a href="https://github.com/mdn/learning-area/blob/master/html/tables/basic/timetable-fixed.html">schedule-fixed.html</a> ( <a href="http://mdn.github.io/learning-area/html/tables/basic/timetable-fixed.html">veja ao vivo também</a> ).</p> + +<h2 id="Resumo">Resumo</h2> + +<p>Isso envolve o básico das tabelas HTML. No próximo artigo, veremos alguns recursos de mesa um pouco mais avançados e começaremos a pensar como eles são acessíveis para pessoas com deficiência visual.</p> + +<div>{{NextMenu("Aprender/HTML/Tabelas/Avançado", "Aprender/HTML/Tabelas")}}</div> + +<div> +<h2 id="Neste_módulo">Neste módulo</h2> + +<ul> + <li><a href="/en-US/docs/Learn/HTML/Tables/Basics">Noções básicas de tabela HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Advanced">Recursos avançados e acessibilidade da tabela HTML</a></li> + <li><a href="/en-US/docs/Learn/HTML/Tables/Structuring_planet_data">Estruturação de dados do planeta</a></li> +</ul> +</div> diff --git a/files/pt-br/learn/html/tables/index.html b/files/pt-br/learn/html/tables/index.html new file mode 100644 index 0000000000..990e9ad438 --- /dev/null +++ b/files/pt-br/learn/html/tables/index.html @@ -0,0 +1,36 @@ +--- +title: Tabelas em HTML +slug: Aprender/HTML/Tables +tags: + - tabelas +translation_of: Learn/HTML/Tables +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Uma tarefa muito comum em HTML é estruturar os dados tabulares, e há vários elementos e atributos próprios para essa finalidade. Em conjunto com a linguagem <a href="https://developer.mozilla.org/pt-PT/docs/Learn/CSS">CSS</a> para estilização, o HTML torna fácil a exibição de tabelas com informação na Web, tais como o seu plano de lições escolares, o horário na sua piscina local, ou estatísticas sobre os seus dinossauros favoritos ou seu time de futebol favorito. Este módulo te guia por tudo que você precisa saber sobre a estruturação de dados tabulares utilizando o HTML.</p> + +<h2 id="Pré-requisitos">Pré-requisitos</h2> + +<p>Antes de iniciar este módulo, você deverá ter domínio dos básicos de HTML — consulte <a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Introducao_ao_HTML">Introdução ao HTML</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: se está utilizando um computador/tablet/outro dispositivo onde não tem a possibilidade de criar os seus próprios arquivos, pode testar a maioria dos exemplos de código num programa de codificação on-line, tais como <a href="http://jsbin.com/" rel="noopener">JSBin</a> ou <a href="https://thimble.mozilla.org/" rel="noopener">Thimble</a>.</p> +</div> + +<h2 id="Guias">Guias</h2> + +<p>Este módulo contém os seguintes artigos:</p> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Tables/Basicos">HTML - o básico sobre tabelas</a></dt> + <dd>Este artigo apresenta as tabelas HTML, cobrindo o essencial, tal como linhas e células, cabeçalhos, como extender células por múltiplas colunas e linhas, e como agrupar todas as células numa coluna para efeitos de estilo.</dd> + <dt><a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Tables/Avancada">HTML - funcionalidades avançadas de tabelas e acessibilidade</a></dt> + <dd>No segundo artigo deste módulo, nós vamos ver algumas funcionalidades mais avançadas das tabelas HTML — tais como legendas/resumos e agrupar as suas filas no cabeçalho da tabela (head), seções de corpo (body) e rodapé (footer) — bem como, veremos sobre a acessibilidade das tabelas para os utilizadores deficientes visuais .</dd> +</dl> + +<h2 id="Exercícios">Exercícios</h2> + +<dl> + <dt><a href="https://developer.mozilla.org/pt-PT/docs/Learn/HTML/Tables/Avaliacao_Estruturar_os_dados_dos_planetas">Estruturar dados sobre planetas</a></dt> + <dd>Na nossa avaliação sobre tabelas em HTML, vamos fornecer alguns dados sobre os planetas do nosso sistema solar, para que possa estruturá-los numa tabela HTML.</dd> +</dl> |