Meta tags:
description= Aprenda a construir layouts modernos de páginas HTML com elementos semânticos e colunas responsivas usando CSS Flexbox e CSS Grid.;
Headings (most frequently used words):
de, layout, um, templates, página, com, flexbox, grid, html, estrutura, uma, típica, esqueleto, semântico, duas, colunas, completo, css, ou, qual, devo, usar, layouts, largura, fixa, vs, fluidos, prontos, personalizando, template, prática,
Text of the page (most frequently used words):
html (61), colunas (51), #template (47), uma (40), com (27), layout (26), para (25), grid (24), duas (24), css (22), main (20), svg (19), fixa (18), header (18), footer (17), três (17), página (16), aprender (15), nav (13), fixas (13), largura (12), flexbox (12), lateral (12), aside (11), conteúdo (11), flex (11), html5 (10), que (10), líquido (10), barra (10), templates (9), elementos (9), são (9), porcentagem (9), body (9), canvas (9), como (8), color (8), semânticos (7), coluna (7), div (7), head (7), background (7), title (7), prática (6), mais (6), larguras (6), secundárias (6), não (6), website (6), padding (6), links (6), tags (6), w3docs (5), layouts (5), estrutura (5), page (5), float (5), tutorial (5), mas (5), rodapé (5), the (5), content (5), style (5), area (5), atributos (5), introdução (5), formatter (5), todos (4), code (4), generator (4), ferramentas (4), javascript (4), fluidos (4), qual (4), completo (4), esqueleto (4), this (4), técnica (4), linhas (4), texto (4), imagens (4), você (4), acima (4), por (4), margin (4), metades (4), líquidas (4), híbridas (4), referência (4), use (4), regiões (4), lado (4), width (4), cada (4), região (4), cabeçalho (4), navegação (4), copiar (4), class (4), doctype (4), column (4), container (4), blocos (4), principal (4), json (3), encoder (3), editor (3), quizzes (3), exercícios (3), php (3), usar (3), formulários (3), adequada (3), nosso (3), marcação (3), pode (3), menu (3), forma (3), construir (3), espaço (3), qualquer (3), tela (3), dentro (3), itens (3), vez (3), linha (3), areas (3), 2024 (3), fff (3), 2c3e50 (3), sidebar (3), display (3), font (3), lang (3), elemento (3), media (3), href (3), string (3), tools (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), idioma (2), contato (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), livros (2), exemplos (2), snippets (2), personalizando (2), prontos (2), devo (2), semântico (2), típica (2), computercode (2), verificar (2), center (2), tabelas (2), bidimensional (2), quais (2), comumente (2), usados (2), estruturar (2), adicione (2), exemplo (2), depois (2), esses (2), legada (2), mostradas (2), manter (2), responsivo (2), padrão (2), grande (2), maior (2), líquida (2), galeria (2), download (2), páginas (2), múltiplas (2), pixels (2), dos (2), fluida (2), telas (2), max (2), proporções (2), base (2), 3fr (2), quando (2), inteira (2), divisão (2), modernos (2), bem (2), torna (2), proporção (2), span (2), columns (2), ecf0f1 (2), dfe6e9 (2), gap (2), sans (2), serif (2), arial (2), family (2), organiza (2), las (2), envolva (2), takes (2), único (2), este (2), ainda (2), principais (2), ele (2), antes (2), banner (2), site (2), accept (2), dir (2), atributo (2), url (2), http (2), iso (2), hash (2), 2026, direitos, reservados, feito, desenvolvedores, política, privacidade, sobre, empresa, try, tutoriais, gratuitos, web, desde, 2014, next, previous, yes, was, helpful, tag, margens, negativas, interatividade, reestilize, aprofunde, ajuste, semântica, corresponder, seu, substitua, suas, próprias, escolher, goste, aqui, estão, formas, comuns, torná, sua, foram, construídos, negativa, estudá, los, obter, ideias, reconstrua, abordagens, resultado, fácil, esquerda, preferir, começar, pronta, abaixo, oferece, fixos, híbridos, útil, técnicas, modernas, recomendada, novas, abordagem, antiga, usava, propriedade, junto, valores, negativos, essa, agora, considerada, frágil, difícil, hoje, principalmente, envolver, redor, imagem, informação, valor, exato, oferecem, controle, preciso, adaptam, telefone, estreito, causam, rolagem, horizontal, monitor, largo, deixam, vazio, maioria, sites, combina, dois, geralmente, limitada, muito, largas, permaneçam, legíveis, 240px, 960px, também, chamados, líquidos, expressas, porcentagens, modo, ajusta, preencher, esta, design, comum, robusto, geral, componentes, menores, precisar, juntas, estiver, organizando, fileira, cartões, direção, ambos, suportados, frequentemente, intercambiáveis, têm, natural, trabalho, unidade, significa, fração, livre, portanto, vezes, larga, novamente, mapa, visual, permite, estendam, ambas, simplesmente, repetindo, seus, nomes, 1fr, and, both, navigation, mesmo, tempo, ferramenta, desenhar, simples, atribuir, nomeada, dimensões, direction, 600, fazem, dividirem, disponível, permanecem, fluidas, elas, encolhem, crescem, viewport, ficarem, número, fixo, empilhá, pequenas, regra, query, narrower, second, grows, fill, most, share, shares, space, two, longo, eixo, ideal, disposição, coloca, controla, restante, distribuído, tem, tudo, empilhado, verticalmente, transformar, tarefa, adicionamos, seguir, tangencial, funciona, tanto, quanto, dele, grupo, deve, haver, apenas, estar, aninhado, algumas, regras, vale, lembrar, ads, extra, information, here, related, primary, welcome, contact, about, home, comece, adicionar, onde, naturalmente, encaixa, essas, eram, escritas, genéricos, isso, renderiza, carrega, nenhum, significado, navegador, leitor, mecanismo, busca, consegue, distinguir, descrevem, melhora, acessibilidade, seo, sem, custo, adicional, veja, lista, completa, copyright, secundários, relacionados, anúncios, extras, logotipo, título, finalidade, quase, todo, construído, partir, mesmos, cinco, dispostas, capítulo, mostra, moderna, marcar, posicioná, final, será, capaz, montar, responsiva, zero, aprenda, responsivas, usando, charset, checked, autoplay, action, accesskey, colspan, defer, autofocus, autocomplete, draggable, disabled, coords, controls, contenteditable, async, alt, attribute, reference, forms, vídeos, youtube, multimídia, obsoletos, attributes, gradiente, radial, lineargradient, sombras, projetadas, efeitos, desfoque, aos, filtros, stroking, text, path, polyline, polygon, elipse, círculo, retângulo, gradientes, coordenadas, desenhando, xmp, wbr, video, var, track, time, thead, tfoot, textarea, tbody, table, sup, summary, sub, strong, strike, spacer, source, small, select, section, script, samp, ruby, rtc, progress, pre, picture, plaintext, param, output, option, optgroup, object, noscript, noframes, nobr, meter, meta, menuitem, marquee, mark, map, link, legend, label, keygen, kbd, isindex, ins, input, img, iframe, hgroup, frameset, frame, form, figure, figcaption, fieldset, embed, dialog, dfn, details, del, datalist, data, colgroup, col, cite, caption, button, blockquote, blink, big, bdo, bdi, basefont, audio, article, applet, address, acronym, abbr, evento, globais, obsoletas, xhtml, tabela, tipos, mime, mensagens, status, métodos, atalhos, teclado, entidades, codificação, utf, códigos, 8859, ascii, conjuntos, caracteres, references, migração, suporte, navegadores, áudio, vídeo, caminhos, arquivo, estilos, scripts, comentários, cores, listas, formatação, títulos, básicas, editores, basics, entrar, pesquisar, formatters, reverse, sha256, md5, length, calculator, colors, hsl, hex, mixer, converter, picker, general, cursos,
Text of the page (random words):
templates de layout html w3docs w3docs livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos quizzes exercícios snippets ferramentas general tools html editor password generator html encoder code diff json beautifier todos os 13 color tools color picker color converter color mixer color hex colors hsl todos os 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder todos os 19 code formatters javascript formatter css formatter html formatter json formatter php formatter pesquisar na w3docs k pt english en deutsch de русский ru français fr español es português pt italiano it entrar aprender html html basics introdução ao html editores e ferramentas elementos html tags básicas do html atributos html títulos html formatação html links html listas html cores em html comentários html tabelas html blocos html scripts html estilos html css caminhos de arquivo html html computercode html templates templates de layout templates de formulários html 5 introdução ao html5 tags html5 elementos semânticos áudio vídeo suporte a navegadores html5 migração para html5 html references conjuntos de caracteres ascii iso 8859 1 códigos de idioma iso codificação utf 8 entidades html atalhos de teclado métodos http imagens html mensagens de status http tipos mime tabela de tags html xhtml html url html tags tags obsoletas atributos globais html atributos de evento tags html doctype a abbr acronym address applet area article aside audio b base basefont bdi bdo big blink blockquote body br button canvas caption center cite code col colgroup data datalist dd del details dfn dialog dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link main map mark marquee menu menuitem meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext picture pre progress q rb rp rt rtc ruby s samp script section select small source spacer span strike strong style sub summary sup svg table tbody td template textarea tfoot th thead time title tr track tt u ul var video wbr xmp canvas tutorial introdução ao canvas desenhando no canvas coordenadas do canvas gradientes no canvas texto no canvas imagens no canvas referência do canvas svg tutorial introdução ao svg svg no html5 retângulo svg círculo svg svg elipse linha svg svg polygon svg polyline svg path svg text svg stroking introdução aos filtros svg efeitos de desfoque svg sombras projetadas svg svg lineargradient gradiente radial svg referência svg html attributes atributos obsoletos atributo class do html atributo id do html html media html multimídia vídeos do youtube em html html forms formulários html html attribute reference alt async accept content contenteditable controls coords disabled download draggable autocomplete autofocus defer dir colspan accesskey action autoplay checked accept charset templates de layout html aprenda a construir layouts modernos de páginas html com elementos semânticos e colunas responsivas usando css flexbox e css grid um layout de página é a forma como as principais regiões de uma página o cabeçalho a navegação o conteúdo principal a barra lateral e o rodapé são dispostas na tela este capítulo mostra como construir um layout de forma moderna marcar as regiões com elementos semânticos do html5 e depois posicioná las com css flexbox ou css grid ao final você será capaz de montar uma página responsiva com múltiplas colunas do zero a estrutura de uma página típica quase todo site é construído a partir dos mesmos cinco blocos região finalidade elemento cabeçalho logotipo título do site banner header navegação menu principal links nav conteúdo principal o conteúdo único da página main barra lateral links relacionados anúncios extras aside rodapé copyright contato links secundários footer antes do html5 essas regiões eram escritas como elementos genéricos div com atributos id ou class como div id header isso ainda renderiza bem mas não carrega nenhum significado um navegador um leitor de tela ou um mecanismo de busca não consegue distinguir um banner de um rodapé os elementos semânticos acima descrevem o que cada região é o que melhora a acessibilidade e o seo sem custo adicional veja a lista completa em elementos semânticos no html5 um esqueleto semântico de página comece com a marcação antes de adicionar qualquer css de layout use cada elemento de referência uma vez onde ele naturalmente se encaixa doctype html html lang en head title my page title head body header h1 my website h1 nav a href home a a href about a a href contact a nav header main h2 welcome h2 p this is the primary content of the page p main aside h2 related h2 p links ads or extra information go here p aside footer p 2024 my website p footer body html copiar algumas regras que vale lembrar deve haver apenas um main por página e ele não pode estar aninhado dentro de header nav aside ou footer nav é para blocos de navegação principais não para qualquer grupo de links aside é um conteúdo tangencial ao conteúdo principal funciona tanto dentro de main quanto ao lado dele este esqueleto ainda não tem colunas tudo é empilhado verticalmente o layout transformar esses blocos em colunas é uma tarefa do css que adicionamos a seguir um layout de duas colunas com flexbox o css flexbox organiza itens ao longo de um único eixo uma linha ou uma coluna e é ideal para uma disposição de conteúdo com barra lateral envolva main e aside em um container flex display flex os coloca lado a lado e flex controla como o espaço restante é distribuído doctype html html lang en head title flexbox two column layout title style body margin 0 font family arial sans serif header footer background 2c3e50 color fff padding 16 px container display flex gap 16 px padding 16 px main flex 3 main takes 3 shares of the space background ecf0f1 padding 16 px aside flex 1 sidebar takes 1 share background dfe6e9 padding 16 px style head body header h1 my website h1 header div class container main h2 main content h2 p this column grows to fill most of the width p main aside h2 sidebar h2 p a narrower second column p aside div footer p 2024 my website p footer body html copiar flex 3 e flex 1 fazem as duas colunas dividirem a largura disponível em uma proporção de 3 para 1 como são proporções as colunas permanecem fluidas elas encolhem e crescem com o viewport em vez de ficarem com um número fixo de pixels para empilhá las em telas pequenas envolva a regra em uma media query media max width 600 px container flex direction column copiar um layout completo com css grid o css grid organiza itens em duas dimensões linhas e colunas ao mesmo tempo o que o torna a ferramenta mais adequada para um layout de página inteira com grid template areas você pode desenhar o layout em texto simples e atribuir cada elemento a uma região nomeada doctype html html lang en head title css grid page layout title style body margin 0 font family arial sans serif grid display grid grid template columns 1 fr 3 fr sidebar content grid template areas header header nav main footer footer gap 12 px padding 12 px header grid area header background 2c3e50 color fff nav grid area nav background dfe6e9 main grid area main background ecf0f1 footer grid area footer background 2c3e50 color fff header nav main footer padding 16 px style head body div class grid header h1 my website h1 header nav navigation nav main h2 main content h2 p the header and footer span both columns p main footer p 2024 my website p footer div body html copiar a unidade fr significa uma fração do espaço livre portanto 1fr 3fr torna a coluna de conteúdo três vezes mais larga que a barra lateral novamente uma proporção fluida em vez de uma largura fixa o mapa visual em grid template areas permite que o cabeçalho e o rodapé se estendam por ambas as colunas simplesmente repetindo seus nomes em uma linha flexbox ou grid qual devo usar ambos são modernos bem suportados e frequentemente intercambiáveis mas têm uma divisão natural de trabalho use flexbox quando estiver organizando itens em uma direção uma barra de navegação uma barra de ferramentas uma fileira de cartões ou uma divisão de conteúdo com barra lateral use grid quando precisar de linhas e colunas juntas como um layout de página inteira cabeçalho barra lateral conteúdo rodapé ou uma galeria de imagens um padrão comum e robusto é usar grid para o esqueleto geral da página e flexbox para os componentes menores dentro de cada região layouts de largura fixa vs fluidos os exemplos acima são fluidos também chamados de líquidos as larguras são expressas como proporções flex 3 3fr ou porcentagens de modo que o layout se ajusta para preencher qualquer tela esta é a base do design responsivo um layout de largura fixa fixa as regiões em um valor exato de pixels por exemplo width 960px ou flex 0 0 240px para uma barra lateral larguras fixas oferecem controle preciso mas não se adaptam em um telefone estreito causam rolagem horizontal e em um monitor largo deixam espaço vazio na prática a maioria dos sites combina os dois uma barra lateral de largura fixa ao lado de uma coluna de conteúdo fluida geralmente limitada com max width para que telas muito largas permaneçam legíveis i informação a abordagem mais antiga para layouts de múltiplas colunas usava a propriedade css float junto com valores negativos de margin essa técnica é agora considerada legada é frágil e difícil de manter use flexbox ou grid para layout float hoje é principalmente para envolver texto ao redor de uma imagem templates de layout prontos se você preferir começar com uma estrutura pronta a galeria abaixo oferece layouts html para download fixos fluidos e híbridos com duas ou três colunas são uma referência útil mas as técnicas modernas mostradas acima são a forma recomendada de construir novas páginas duas colunas menu à esquerda template 01 três colunas em porcentagem template 02 três colunas em porcentagem template 03 três colunas em porcentagem template 04 três colunas em porcentagem template 05 três colunas em porcentagem template 06 três colunas fixas template 07 três colunas fixas template 08 três colunas fixas template 09 três colunas fixas template 10 três colunas fixas template 11 três colunas fixas template 12 líquido colunas secundárias de largura fixa template 13 líquido colunas secundárias de largura fixa template 14 líquido colunas secundárias de largura fixa template 15 líquido colunas secundárias de largura fixa template 16 líquido colunas secundárias de largura fixa template 17 líquido colunas secundárias de largura fixa template 18 líquido três colunas larguras híbridas template 19 líquido três colunas larguras híbridas template 20 líquido três colunas larguras híbridas template 21 líquido três colunas larguras híbridas template 22 duas colunas líquidas lateral fixa template 23 duas colunas líquidas lateral fixa template 24 duas colunas em porcentagem template 25 duas colunas em porcentagem template 26 uma coluna líquida e duas metades template 27 uma coluna líquida e duas metades template 28 duas colunas em porcentagem e uma maior template 29 duas colunas em porcentagem e uma maior template 30 duas colunas líquidas lateral fixa e uma grande template 31 duas colunas líquidas lateral fixa e uma grande template 32 duas colunas fixas template 33 duas colunas fixas template 34 duas colunas fixas template 35 duas colunas fixas template 36 duas colunas fixas template 37 duas colunas fixas template 38 uma coluna fixa e duas metades template 39 uma coluna fixa e duas metades template 40 esses templates foram construídos com a técnica legada de css float e margin negativa você pode estudá los para obter ideias mas reconstrua a estrutura com as abordagens de flexbox ou grid mostradas acima para um resultado mais fácil de manter e responsivo por padrão personalizando um template depois de escolher uma estrutura de que goste aqui estão formas comuns de torná la sua substitua o texto de exemplo e adicione suas próprias imagens ajuste a marcação semântica para corresponder ao seu conteúdo aprofunde a marcação com nosso tutorial de html reestilize o layout com nosso tutorial de css adicione interatividade com nosso tutorial de javascript prática prática quais elementos semânticos do html5 são comumente usados para estruturar o layout de uma página quais elementos semânticos do html5 são comumente usados para estruturar o layout de uma página header nav main aside footer float verificar prática qual técnica css é mais adequada para um layout de página bidimensional completo com linhas e colunas qual técnica css é mais adequada para um layout de página bidimensional completo com linhas e colunas css grid css float com margens negativas tabelas html a tag center verificar was this page helpful yes no previous html computercode next templates de formulários on this page a estrutura de uma página típica um esqueleto semântico de página um layout de duas colunas com flexbox um layout completo com css grid flexbox ou grid qual devo usar layouts de largura fixa vs fluidos templates de layout prontos personalizando um template prática w3docs tutoriais exemplos exercícios snippets e quizzes gratuitos para a web desde 2014 livros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python prática exercícios quizzes editor try it ferramentas html editor password generator html encoder code diff json beautifier empresa sobre contato política de privacidade idioma english deutsch русский français español português italiano 2026 w3docs todos os direitos reservados feito para desenvolvedores
|
