Google Git
Sign in
apache / netbeans-website-cleanup / refs/heads/asciidoc-features / . / src / content / kb / 73 / webclient / html5-editing-css_pt_BR.html
blob: 1683af50f47468a37c15ece5f8a460db62a5676d [file] [log] [blame]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../netbeans.css">
<title>Trabalhando com Folhas de Estilo CSS em uma Aplicação em HTML5 - Tutorial do NetBeans</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="description" content="A tutorial that demonstrates how the IDE provides tools that can help you work with CSS rules to modify the layout of
an application.">
<meta name="keywords" content="NetBeans, IDE, integrated development environment, jQuery, CSS, HTML5">
</head>
<body>
<!--
Copyright (c) 2013, Oracle and/or its affiliates. All rights reserved.
-->
<h1>Trabalhando com Folhas de Estilo CSS em uma Aplicação em HTML5</h1>
<p>O NetBeans IDE 7.3 introduz um novo tipo de projeto para ajudá-lo a desenvolver aplicações em HTML5. As aplicações em HTML5 costumam combinar HTML, CSS e JavaScript para criar aplicações executadas em um browser e exibidas em diversos dispositivos, incluindo smartphones, tablets e laptops. Este documento demonstra como o IDE oferece ferramentas que podem ajudá-lo a trabalhar com regras de CSS para modificar o layout de uma aplicação.</p>
<p>A extensão NetBeans Connector para o browser Chrome pode ajudá-lo a exibir aplicações da forma como elas seria, exibidas em vários dispositivos. A extensão ativa o browser Chrome e o IDE para se comunicarem um com o outro. O modo Inspecionar no NetBeans pode ajudá-lo a localizar elementos no seu código-fonte, selecionando-os no browser. Depois que você selecionar um elemento no browser, poderá usar o IDE para exibir as regras de CSS e as propriedades aplicadas a esse elemento.
</p>
<p>Para obter detalhes sobre como instalar a extensão NetBeans Connector para o browser Chrome, consulte o tutorial <a href="html5-gettingstarted.html">Conceitos Básicos sobre Aplicações em HTML5 </a>.</p>
<p class="tips">Para observar um screencast deste tutorial, consulte <a href="../../docs/web/html5-css-screencast.html">Vídeo do Trabalho com Folhas de Estilo CSS em Aplicações HTML5</a>.</p>
<h3>Conteúdo</h3>
<img alt="O conteúdo desta página aplica-se ao NetBeans IDE 7.3" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="O conteúdo desta página se aplica ao NetBeans IDE 7.3">
<ul class="toc">
<li><a href="#createproject">Criando a Aplicação do NetBeans em HTML5</a></li>
<li><a href="#viewing">Exibindo a Aplicação em Dispositivos Diferentes</a></li>
<li><a href="#layout">Modificando o Layout</a>
<ul>
<li><a href="#newstylesheet">Criar uma Folha de Estilo de Mídia</a>
<li><a href="#addrules">Adicionar Regras CSS</a>
</ul>
</li>
<li><a href="#summary">Resumo</a></li>
<li><a href="#seealso">Consulte Também</a></li>
</ul>
<h4>Para concluir este tutorial, você precisará dos recursos a seguir:</h4>
<table id="requiredSoftware">
<tbody>
<tr>
<th class="tblheader" scope="col">Software ou Recurso</th>
<th class="tblheader" scope="col">Versão Necessária</th>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE, Java</a></td>
<td class="tbltd1">7.3</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://www.oracle.com/technetwork/java/javase/downloads/index.html">Java Development Kit (JDK)</a></td>
<td class="tbltd1">6 ou 7</td>
</tr>
<tr>
<td class="tbltd1"><a href="http://www.google.com/chrome">Browser Chrome</a></td>
<td class="tbltd1">--</td>
</tr>
<tr>
<td class="tbltd1"><a href="https://chrome.google.com/webstore/detail/netbeans-connector/hafdlehgocfcodbgjnpecfajgkeejnaa?utm_source=chrome-ntp-icon">Extensão NetBeans Connector para Chrome</a></td>
<td class="tbltd1">1.0.0</td>
</tr>
<tr>
<td class="tbltd1"><a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip">HTML5DemoSiteTemplate.zip</a></td>
<td class="tbltd1">--</td>
</tr>
</tbody>
</table>
<p><strong class="notes">Observações:</strong></p>
<ul>
<li>O modelo <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip">HTML5DemoSiteTemplate.zip</a> é um modelo de site que você irá usar ao criar o projeto.</li>
<li>Se você quiser comparar seu projeto com uma solução em funcionamento, poderá fazer download do <a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoCssSiteTemplate.zip">modelo de site</a> do projeto acabado.</li>
<li>Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript.</li>
</ul>
<!-- ++++++++++++++++ Creating the Application ++++++++++++++++ -->
<a name="create"></a>
<h2>Criando a Aplicação do NetBeans em HTML5</h2>
<p>Neste tutorial, você utilizará um site modelo para criar o projeto em HTML5. O modelo de site que você usa neste tutorial é o mesmo que foi salvo como modelo de site no tutorial <a href="html5-gettingstarted.html">Conceitos Básicos sobre Aplicações em HTML5</a>. Se você tiver executado as etapas do tutorial Conceitos Básicos, poderá usar o modelo de site que salvou na última seção. Como alternativa, você pode fazer download do modelo de site HTML5DemoSiteTemplate.zip.</p>
<p>Execute as etapas a seguir para criar a aplicação de um modelo de site.</p>
<ol>
<li>Faça download do modelo HTML5 (<a href="https://netbeans.org/projects/samples/downloads/download/Samples/Web%20Client/HTML5DemoSiteTemplate.zip">HTML5DemoSiteTemplate</a>)</li>
<li>Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto.</li>
<li>Selecione a categoria <strong>HTML/JavaScript</strong>e <strong>Aplicação HTML5</strong>. Clique em Próximo.</li>
<li>Digite <strong>HTML5DemoCss</strong> para nome do projeto e especifique uma localização. Clique em Próximo.</li>
<li>Selecione a opção <strong>Selecionar Modelo</strong> e clique em Procurar para localizar o modelo de site (<tt>HTML5DemoSiteTemplate.zip</tt>). Clique em Finalizar. <br> <img alt="tela do assistente Nova Aplicação em HTML5" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-newproject.png" title="Especifique o modelo de site no assistente Nova Aplicação em HTML5">
</li>
</ol>
<p>Quando você clica em Finalizar, o IDE cria o projeto e abre o arquivo <tt>index.html</tt> no editor. Na janela Projetos, você pode ver que o projeto contém <tt>index.html</tt>, uma folha de estilo CSS, algumas bibliotecas JavaScript e algumas imagens. As janelas Regras de CSS e Navegador também são abertas no IDE.</p>
<!-- ++++++++++++++++ Viewing the Application ++++++++++++++++ -->
<a name="viewing"></a>
<h2>Exibindo a Aplicação em Dispositivos Diferentes</h2>
<p>Neste tutorial, você executará a aplicação no browser Chrome com a extensão NetBeans Connector instalada. Quando a extensão for instalada, você poderá usar o menu do NetBeans no browser para redimensionar facilmente a janela do browser e exibir a aplicação como ela apareceria em dispositivos comuns.
</p>
<p class="notes"><strong>Observações.</strong> Para esse tutorial, é recomendável usar o browser Chrome e instalar a extensão do NetBeans para Chrome. Consulte o tutorial <a href="html5-gettingstarted.html">Conceitos Básicos sobre Aplicações em HTML5</a> para obter detalhes sobre como instalar a extensão NetBeans Connector.</p>
<p>Execute as etapas a seguir para executar a aplicação no browser Chrome.</p>
<ol>
<li>Confirme que Chrome com Integração NetBeans está selecionado na lista drop-down, na Barra de Ferramentas.
</li>
<li>Clique no botão Executar na barra de ferramentas para executar a projeto no browser Chrome.
<p>No browser, você pode ver uma menu expansível simples.</p>
<p>Você perceberá que há uma barra amarela na guia do browser que o notifica que o NetBeans Connector está depurando a guia. O IDE e o browser são conectados e podem se comunicar um com o outro quando a barra amarela está visível. Quando você inicializa uma aplicação HTML5 do IDE, o depurador JavaScript é ativado automaticamente. Quando você salva as alterações em um arquivo ou faz alterações em uma folha de estilos CSS, não precisa recarregar a página, pois a janela do browser será atualizada automaticamente para exibir as alterações.</p>
<p class="alert">Se você fechar a barra amarela ou clicar em Cancelar, quebrará a conexão entre o IDE e o browser. Se você interromper a conexão, será necessário iniciar a aplicação em HTML5 a partir do IDE.</p>
<p>Você obsevará também que o ícone do NetBeans ficará visível no campo do local do URL do browser. É possível clicar no ícone para abrir um menu que oferece várias opções para alterar o tamanho de exibição do browser e para ativar o modo Inspecionar no NetBeans.</p>
</li>
<li>Clique no ícone Abrir Ação do NetBeans no campo URL do browser para abrir o menu NetBeans e selecionar Retrato do Tablet no menu.
<p>A janela é redimensionada para o tamanho de um browser do tablet em modo retrato. O menu é estendido para preencher o lado direito e todo o menu ficar visível.</p>
<img alt="tela do browser na view Retrato do Tablet" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-tabletbrowser1.png" title="Tamanho de exibição de Retrato do Tablet no browser">
<p>Se você selecionar um dos dispositivos default no menu, a janela do browser se redimensionará de acordo com as dimensões do dispositivo. Isso permite que você veja como será a aparência da aplicação no dispositivo selecionado. As aplicações em HTML5 geralmente são projetadas para responder ao tamanho da tela do dispositivo em que são exibidas. Você pode usar regras de JavaScript e CSS que respondam ao tamanho da tela e modificar a forma como as aplicações são exibidas, de maneira que o layout seja otimizado para o dispositivo. </p></li>
<li>Clique no ícone NetBeans novamente e selecione Paisagem do Smartphone no menu do NetBeans.<br> <img alt="tela do menu NetBeans no browser" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-tabletbrowser2.png" title="Selecione Paisagem do Smartphone no menu do NetBeans no browser">
<p>A janela é redimensionada para o tamanho de um smartphone em orientação paisagem e você poderá ver que a parte inferior do menu não fica visível sem a rolagem de tela.</p>
<img alt="tela da janela do browser redimensionada para Paisagem do Smartphone" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-smartphonebrowser1.png" title="Janela do browser redimensionada para Paisagem do Smartphone"></li>
</ol>
<p>Na próxima seção, você modificará a folha de estilo para que seja possível exibir todo a menu sem rolar a tela em um smartphone ma view Paisagem.</p>
<!-- ++++++++++++++++ Modifying the Application Layout ++++++++++++++++ -->
<a name="layout"></a>
<h2>Modificando o Layout</h2>
<p>Deve haver a possibilidade de fazer algumas pequenas alterações no elementos da página, de forma que nenhum rolagem de tela seja necessária. Essas alterações só devem ser aplicadas quando o tamanho do browser equivaler ao de um smartphone ou for menor. Quando está em orientação de paisagem, a janela do browser de um smartphone tem 480 pixels de largura e 320 pixels de altura.</p>
<div class="indent">
<!-- ++++++++++++++++ Media Style Sheet ++++++++++++++++ -->
<a name="newstylesheet"></a>
<h3>Criar uma Folha de Estilo de Mídia</h3>
<p>Neste exercício, você criará uma nova folha de estilo e adicionará uma regra de mídia para dispositivos com exibições de smartphone. Em seguida, você adicionará alguma Regras de CSS à regra de mídia.</p>
<ol>
<li>Clique com o botão direito do mouse no nó da pasta <tt>css</tt>, na janela Projetos, e escolha Nova > Folha de Estilo em Cascata no menu pop-up.</li>
<li>Digite <strong>mycss</strong> como Nome de Arquivo. Clique em Finalizar.
<p>Quando você clicar em Finalizar, a nova folha de estilo será aberta no editor.</p></li>
<li>Adicione a regra de mídia a seguir à folha de estilo.
<pre class="examplecode">/*My rule for smartphone*/
@media (max-width: 480px) {
}</pre>
<p>Toda regra de CSS que você adicionar entre colchetes para esta regra será aplicada apenas quando a dimensão do browser for de 480 pixels de largura ou menos.</p>
<p class="tips">Crie modelos de código para os snippets de código que você usa mais frequentemente. Você pode criar modelos de código CSS na guia Modelos de Código na categoria Editor da janela Opções.</p>
</li>
<li>Salve as alterações.</li>
<li>Abra <tt>index.html</tt> no editor.</li>
<li>Adicione o link a seguir à folha de estilo entre as tags <tt>&lt;head></tt> no <tt>index.html</tt>. Salve as alterações.
<pre class="examplecode">&lt;link type="text/css" rel="stylesheet" href="css/mycss.css"&gt;</pre>
<p class="tips">Você pode usar a funcionalidade autocompletar código no editor para ajudá-lo a adicionar o link à folha de estilo.</p>
</li>
</ol>
<!-- ++++++++++++++++ Add CSS Rules ++++++++++++++++ -->
<a name="addrules"></a>
<h3>Adicionando Regras de CSS</h3>
<ol>
<li>No browser Chrome, clique no ícone do NetBeans e selecione Inspecionar no Modo NetBeans, no menu.</li>
<li>Clique ma imagem no browser.
<p>Um elemento é realçado quando selecionado no modo Inspecionar. Nesta tela, você pode ver que a imagem está realçada de azul.</p>
<img alt="tela da imagem selecionada no browser" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-selectimage.png" title="Imagem selecionada no browser Chrome.">
<p>No IDE, você pode ver que as regras e propriedades de CSS aplicadas ao <tt>img</tt> são listadas na janela Estilos de CSS. A guia Seleção da janela Estilos de CSS tem três painéis que oferecem detalhes sobre o elemento selecionado.</p>
<img alt="tela da janela Estilos de CSS quando a imagem é selecionada" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-styleswindow1.png" style="float:left;" title="Janela Estilos de CSS quando a imagem é selecionada.">
<h4>Painel Superior</h4>
<p>
No painel Propriedades da janela, é possível ver que seis pares propriedade-valor são aplicados ao elemento <tt>img</tt>. Três dos pares (<tt>borda</tt>, <tt>flutuação</tt> e <tt>margem</tt>) são aplicados via regra CSS para o elemento <tt>img</tt>. Os três pares restantes são aplicados porque o elemento <tt>img</tt> herda as propriedades dos seletores de classe que são aplicadas aos objetos que contêm o elemento <tt>img</tt>. Você pode ver claramente a estrutura do DOM na janela Navegador. A propriedade <tt>borda</tt> está selecionada no momento no painel Propriedades da janela Estilo CSS.
</p>
<h4>Painel Central</h4>
<p>No painel central Estilos Aplicados, você pode ver que a propriedade <tt>borda</tt> e o valor especificado em uma regra CSS definem o elemento <tt>img</tt>. A regra está localizado na linha 12 do arquivo <tt>basecss.css</tt>. Você pode clicar no local do painel para abrir a folha de estilo no editor.</p>
<h4>Painel Inferior</h4>
<p>O painel inferior exibe todas as propriedades definidas na regra CSS para a regra que está selecionada no painel central. Nesse caso, é possível verificar que a regra para <tt>img</tt> define as propriedades <tt>borda</tt>, <tt>flutuação</tt> e <tt>margem</tt>.</p>
<br clear="all">
</li>
<li>Clique no botão Editar Regras de CSS (<img alt="Botão Editar Regras de CSS" src="../../../images_www/articles/73/web/html5-gettingstarted/newcssrule.png" title="Botão Editar Regras de CSS">) no painel Estilos Aplicados da janela Estilos de CSS para abrir a caixa de diálogo Editar Regras de CSS.</li>
<li>Selecione o Elemento como Tipo de Seletor e digite <strong>img</strong> como Seletor.</li>
<li>Selecione <tt>css/mycss.css</tt> como Folha de Estilo e <strong>(max-width:480px)</strong> como Na Regra. Clique em OK.<br> <img alt="tela da caixa de diálogo Editar Regras de CSS" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-editcssrules.png" title="Caixa de diálogo Editar Regras de CSS">
<p>Quando você clica em OK, o IDE cria uma regra de CSS para <tt>img</tt> na folha de estilo <tt>css/mycss.css</tt> entre os colchetes da regra de mídia. A nova regra agora está listada no painel Estilos Aplicados. Você pode ver que há duas regras de CSS para <tt>img</tt>. Uma das regras está localizada em <tt>mycss.css</tt> e a outra em <tt>basecss.css</tt>.</p></li>
<li>Selecione a nova regra <tt>img</tt> (definida em <tt>mycss.css</tt>) no painel Estilos Aplicados da janela Estilos de CSS. <br> <img alt="tela de estilos para o elemento selecionado na janela Estilos de CSS." class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-styleswindow2.png" title="Estilos para o elemento selecionado na janela Estilos de CSS.">
<p>No painel inferior da janela, você pode ver que a regra não têm propriedades.</p>
</li>
<li>Clique no botão Adicionar Propriedade no painel inferior da janela Estilos de CSS para abrir a caixa de diálogo Adicionar Propriedade.</li>
<li>Digite <strong>width</strong> no campo filtro, na parte superior da caixa de diálogo, e digite<strong>90px</strong> como valor da propriedade <tt>width</tt>. Clique em OK. <br> <img alt="tela da caixa de diálogo Adicionar Propriedade" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-addproperty.png" title="Caixa de diálogo Adicionar Propriedade">
<p>Quando você clica em OK, a imagem no browser é automaticamente redimensionada para ficar com 90 pixels de largura. O IDE adicionou a propriedade à regra de CSS na folha de estilo <tt>mycss.css</tt>. O editor a folha de estilo deve agora conter a regra a seguir.</p>
<pre class="examplecode">/*My rule for smartphone*/
@media (max-width: 480px) {
img {
width: 90px;
}
}</pre>
<p>Algumas alterações adicionais precisam ser feitas na folha de estilo porque o menu ainda não cabe na janela. </p>
</li>
<li>Selecione o elemento (<tt>&lt;ul></tt>) da lista não ordenada na janela do browser.<br> <img alt="tela do elemento de lista selecionado no browser" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-smartphonebrowser2.png" title="Elemento da lista selecionado no browser">
<p>Quando você seleciona o elemento, pode ver que <tt>&lt;ul></tt> está selecionada na janela Navegador e você pode ver os estilos aplicados a esse elemento na janela Estilo de CSS.</p>
<img alt="tela da janela Navegador" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-navigatorwindow.png" title="Elemento da lista selecionado na janela Navegador">
<p>Se você selecionar <tt>font-family</tt> na janela Estilos de CSS, poderá ver que a propriedade e o valor <tt>font-family</tt> são definidos no seletor de classe <tt>.ui-widget</tt>.</p>
</li>
<li>Clique no arquivo <tt>index.html</tt> no editor e clique na guia Documento na janela Estilos de CSS.</li>
<li>Expanda o nó <tt>css/mycss.css</tt> ma janela de Estilos de CSS.<br> <img alt="tela da guia Documento da janela Estilos de CSS" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-styleswindow3.png" title="Folha de Estilo selecionada na guia Documento da janela Estilos de CSS">
<p>A folha de estilo <tt>mycss.css</tt> no momento tem a regra <tt>root</tt> default para a <tt>img</tt> criada anteriormente.</p>
</li>
<li>Clique no botão Editar Regras de CSS (<img alt="Botão Editar Regras de CSS" src="../../../images_www/articles/73/web/html5-gettingstarted/newcssrule.png" title="Botão Editar Regras de CSS">) na janela Estilos de CSS para abrir a caixa de diálogo Editar Regras de CSS.</li>
<li>Selecione a Classe como Tipo de Seletor e digite <strong>ui-widget</strong> como Seletor.</li>
<li>Selecione <strong><tt>css/mycss.css</tt></strong> como Folha de Estilo e <strong>(max-width:480px)</strong> como Na Regra.</li>
<li><strong>Desmarque</strong> Aplicar Alterações ao Elemento. Clique em OK.<br> <img alt="tela da caixa de diálogo Editar Regras de CSS" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-editcssrules2.png" title="Criar um seletor de classe na caixa de diálogo Editar Regras de CSS">
<p>Quando você clica em OK, o IDE adiciona a nova regra à folha de estilo <tt>mycss.css</tt> e abre o arquivo no editor. Se o arquivo não for aberto no editor, você pode clicar duas vezes na regra <tt>ui-widget</tt> no nó <tt>css/mycss.css</tt> na janela Estilos de CSS para abrir a folha de estilo. O cursor é colocado na linha que contém a regra na folha de estilo.</p></li>
<li>Adicione a propriedade e o valor (em negrito) a seguir à regra para a <tt>ui-widget</tt>.
<pre class="examplecode">.ui-widget {
<strong>font-size: 0.9em;</strong>
}</pre>
<p>Quando você altera o valor na folha de estilo, a página o atualiza automaticamente na janela do browser.</p>
<p class="tips">Você pode digitar a propriedade e o valor no editor e usar o recurso autocompletar código para ajudá-lo. Como alternativa, selecione a regra <tt>.ui-widget</tt> no painel superior e clique no botão Adicionar Propriedade no painel inferior para abrir a caixa de diálogo Adicionar Propriedade.</p>
<img alt="tela do recurso autocompletar código de CSS no editor" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-csseditor1.png" title="Recurso autocompletar código no editor">
<p>Depois de adicionar a regra, você pode ver que o menu agora se ajusta à página.</p>
<img alt="tela da página no browser após a aplicação das regras de CSS" class="margin-around b-all" src="../../../images_www/articles/73/web/html5-css/html5-css-smartphonebrowser3.png" title="Página exibida no browser com novas regras de CSS aplicadas">
</li>
<li>Clique no ícone do NetBeans no browser e selecione Retrato do Tablet no menu.
<p>Quando a janela do browser é redimensionada, você pode ver que as alterações na folha de estilo não afetam a exibição quando o tamanho da tela é maior do que 480 pixels de largura.</p></li>
</ol>
</div>
<h2 id="summary">Resumo</h2>
<p>Neste tutorial, você aprendeu a adicionar e modificar as regras de uma aplicação em HTML5 para aprimorar a forma como a aplicação é exibida com um tamanho de tela menor. Você exibiu a aplicação em um browser que foi redimensionado ao tamanho de um smartphone padrão. Você usou o Modo Inspecionar no NetBeans no browser Chrome para ajudá-lo a localizar as regras de estilo de CSS e depois modificou as regras para otimizar o layout para uma tela menor.</p>
<div class="feedback-box">
<a href="/about/contact_form.html?to=3&amp;subject=Feedback:%20Working%20With%20CSS%20Style%20Sheets%20in%20an%20HTML5%20Application">Enviar Feedback neste Tutorial</a>
</div>
<br style="clear:both;">
<br>
<h2 id="seealso">Consulte Também</h2>
<p>Para obter mais informações sobre suporte para aplicações no HTML5 no IDE, consulte os seguintes recursos em <a href="https://netbeans.org/">netbeans.org</a>:</p>
<ul>
<li><a href="html5-gettingstarted.html">Conceitos Básicos sobre Aplicações em HTML5</a>. Um documento que demonstra como instalar a extensão NetBeans Connector para Chrome e criar e executar uma aplicação simples em HTML5.</li>
<li><a href="html5-js-support.html">Depurando e Testando JavaScript em Aplicações em HTML5</a>. Um documento que demonstra como o IDE oferece ferramentas que podem ajudá-lo a depurar e testar arquivos JavaScript no IDE.</li>
<li><a href="../ide/javascript-editor_pt_BR.html">Editando JavaScript</a>. Um documento que descreve as funcionalidades básicas de edição JavaScript fornecidas pelo IDE.</li>
</ul>
<p>Para obter mais informações sobre o jQuery, consulte a documentação oficial:</p>
<ul>
<li>Home Page Oficial: <a href="http://jquery.com">http://jquery.com</a></li>
<li>Home Page da IU: <a href="http://jqueryui.com/">http://jqueryui.com/</a></li>
<li>Tutoriais: <a href="http://docs.jquery.com/Tutorials">http://docs.jquery.com/Tutorials</a></li>
<li>Página Principal da Documentação: <a href="http://docs.jquery.com/Main_Page">http://docs.jquery.com/Main_Page</a></li>
<li>Demonstrações de IU e Documentação: <a href="http://jqueryui.com/demos/">http://jqueryui.com/demos/</a></li>
</ul>
</body>
</html>