{"id":4986,"date":"2022-06-13T20:44:14","date_gmt":"2022-06-13T12:44:14","guid":{"rendered":"https:\/\/www.sunsylux.com\/blog\/?p=4986"},"modified":"2023-12-21T17:32:02","modified_gmt":"2023-12-21T09:32:02","slug":"estruturando-a-web-com-html-aprendendo","status":"publish","type":"post","link":"https:\/\/www.sunsylux.com\/blog\/?p=4986","title":{"rendered":"Estruturando a web com HTML Aprendendo desenvolvimento web MDN"},"content":{"rendered":"<p>Usamos para criar uma linha dentro de uma tag p sem criar um par\u00e1grafo. Os elementos em linha podem ficar ao lado de outros elementos em linha. Ap\u00f3s essa introdu\u00e7\u00e3o ao t\u00edtulo do documento, podemos come\u00e7ar a mergulhar no corpo do documento.<\/p>\n<div style='text-align:center'><iframe width='565' height='313' src='https:\/\/www.youtube.com\/embed\/V1_2mV48lOk' frameborder='0' alt='HTML' allowfullscreen><\/iframe><\/div>\n<p>Por padr\u00e3o, o navegador n\u00e3o mostra nenhum controle para esse elemento, apenas o v\u00eddeo. Anteriormente, eu expliquei como voc\u00ea pode criar os cabe\u00e7alhos para as colunas, usando a tag th dentro da primeira tag tr da tabela. Todos esses campos permitem limitar o intervalo entre cada valor. Eu recomendo conferir a MDN para os pequenos detalhes sobre seu uso. Voc\u00ea pode definir o valor pr\u00e9-selecionado usando o atributo checked.<\/p>\n<h2>Conte\u00fado<\/h2>\n<p>Este m\u00f3dulo fornece uma s\u00e9rie de artigos que ajudar\u00e3o voc\u00ea a dominar o essencial dos formul\u00e1rios da web. Os formul\u00e1rios web s\u00e3o uma ferramenta muito poderosa para interagir com os usu\u00e1rios &#8211; geralmente s\u00e3o usados para coletar dados dos usu\u00e1rios ou permitir que eles controlem uma interface do usu\u00e1rio. No entanto, por raz\u00f5es  hist\u00f3ricas e t\u00e9cnicas, nem sempre \u00e9 \u00f3bvio como us\u00e1-las em todo o seu potencial. Abordaremos todos os aspectos essenciais dos formul\u00e1rios da Web, incluindo marca\u00e7\u00e3o de sua estrutura HTML, controles de estilo, valida\u00e7\u00e3o de dados e envio de dados ao servidor.<\/p>\n<ul>\n<li>Para \u00e1udio, podemos utilizar a tag audio, da mesma forma que apresentada na Listagem 14.<\/li>\n<li>O formul\u00e1rio \u00e9 enviado, usando GET ou POST, para o mesmo URL em que reside.<\/li>\n<li>A Figura 10 ilustra o resultado desses c\u00f3digos, com o controle de \u00e1udio exibido no browser.<\/li>\n<li>Atualmente, o conceito de Web Sem\u00e2ntica sugere que utilizemos os recursos dos quais dispomos com mais precis\u00e3o para definir melhor o significado do conte\u00fado dos nossos documentos.<\/li>\n<li>Voc\u00ea, no entanto, n\u00e3o precisa atribuir uma fun\u00e7\u00e3o a cada elemento na p\u00e1gina.<\/li>\n<\/ul>\n<p>Na Listagem 11 temos um exemplo desse tipo de lista, com seu resultado ilustrado na Figura 7. Independentemente do editor utilizado, podemos simplesmente copiar o c\u00f3digo da Listagem 1 para um deles e salvar o arquivo com extens\u00e3o .<a href=\"https:\/\/giro.matanorte.com\/artigo\/curso-de-cientista-de-dados-esteja-preparado-para-a-profissao-do-futuro\/\">Curso de cientista de dados: esteja preparado para a profiss\u00e3o do futuro<\/a>. Em seguida, podemos abrir esse arquivo em um browser. Todas as imagens devem ter uma tag alt descrevendo o conte\u00fado da imagem. \u00c9 exigido pelo padr\u00e3o HTML e seu HTML sem ele n\u00e3o \u00e9 validado.<\/p>\n<h2>Imagens no HTML<\/h2>\n<p>O principal apelo para o uso de tel em vez de text s\u00e3o os celulares, pois o dispositivo pode optar por mostrar um teclado num\u00e9rico. Todas essas caixas de sele\u00e7\u00e3o estar\u00e3o desmarcadas por padr\u00e3o. Use o atributo checked para habilit\u00e1-las no carregamento da p\u00e1gina.<\/p>\n<ul>\n<li>As tags podem ser escritas em letras mai\u00fasculas ou min\u00fasculas.<\/li>\n<li>Existem usu\u00e1rios totalmente cegos ou com defici\u00eancia visual, pessoas com problemas de perda auditiva e uma infinidade de outras defici\u00eancias diferentes.<\/li>\n<li>Por padr\u00e3o, os formul\u00e1rios s\u00e3o enviados usando o m\u00e9todo de HTTP GET.<\/li>\n<\/ul>\n<p>Atrav\u00e9s de um documento <a href=\"https:\/\/temlondrina.com.br\/tecnologia\/qual-escolher-bootcamp-de-programacao-x-cursos-tradicionais\/\">https:\/\/temlondrina.com.br\/tecnologia\/qual-escolher-bootcamp-de-programacao-x-cursos-tradicionais\/<\/a>, ou seja, um documento com a extens\u00e3o .html&nbsp;ou&nbsp;.htm., o navegador faz a leitura do arquivo e renderiza o seu conte\u00fado para que o usu\u00e1rio final possa visualiz\u00e1-lo. Os arquivos .html podem ser visualizados em qualquer navegador (como Google Chrome, Safari, ou Mozilla Firefox). As primeiras vers\u00f5es do HTML foram definidas com regras sint\u00e1ticas flex\u00edveis, o que ajudou aqueles sem familiaridade com a publica\u00e7\u00e3o na Web. Atrav\u00e9s do tempo, a utiliza\u00e7\u00e3o de ferramentas para autoria de HTML aumentou, assim como a tend\u00eancia em tornar a sintaxe cada vez mais r\u00edgida. Apesar disso, por quest\u00f5es hist\u00f3ricas (retrocompatibilidade), os navegadores ainda hoje conseguem interpretar p\u00e1ginas web que est\u00e3o longe de ser um c\u00f3digo HTML v\u00e1lido. O c\u00f3digo da Listagem 17 pode ser utilizado quando desejarmos informar mais de um arquivo de v\u00eddeo como op\u00e7\u00f5es de carregamento, da mesma forma que vimos na  tag audio.<\/p>\n<h2>Use o atributo role<\/h2>\n<p>Essa tag \u00e9 usada para marcar o texto dentro dela como enfatizado. Do mesmo modo que em strong, n\u00e3o \u00e9 uma dica visual, mas uma dica sem\u00e2ntica. Os navegadores, por padr\u00e3o, deixam o texto dessa tag em negrito. Os t\u00edtulos, especialmente a organiza\u00e7\u00e3o dos t\u00edtulos, tamb\u00e9m s\u00e3o essenciais para o SEO. Os mecanismos de pesquisa os usam de v\u00e1rias maneiras. Do mais importante ao menos importante, temos h1, h2, h3, h4, h5 e h6.<\/p>\n<div style='text-align:center'><iframe width='567' height='317' src='https:\/\/www.youtube.com\/embed\/bWNmJqgri4Q' frameborder='0' alt='HTML' allowfullscreen><\/iframe><\/div>\n<p>Por exemplo, o conte\u00fado pode ser estruturado em par\u00e1grafos, em uma lista com marcadores ou usando imagens e tabelas. Como o t\u00edtulo sugere, este artigo fornecer\u00e1 uma compreens\u00e3o b\u00e1sica do HTML e suas fun\u00e7\u00f5es. Como dito anteriormente, o HTML \u00e9 utilizado para estruturar e formatar o conte\u00fado de p\u00e1ginas web atrav\u00e9s de tags, que ser\u00e3o interpretadas pelo navegador. Para que seja poss\u00edvel essa interpreta\u00e7\u00e3o, \u00e9 importante declarar qual a vers\u00e3o do HTML ser\u00e1 usada.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Usamos para criar uma linha dentro de uma tag p sem cri [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[352],"tags":[],"_links":{"self":[{"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4986"}],"collection":[{"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4986"}],"version-history":[{"count":1,"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4986\/revisions"}],"predecessor-version":[{"id":4987,"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=\/wp\/v2\/posts\/4986\/revisions\/4987"}],"wp:attachment":[{"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4986"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4986"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.sunsylux.com\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4986"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}