HTML tutoriál

HOME HTML Úvod do HTML HTML editory HTML Basic HTML prvky Atributy HTML HTML nadpisy HTML odstavce HTML styly Formátování HTML HTML citace HTML komentáře HTML barvy HTML CSS HTML odkazy HTML obrázky HTML favicon HTML tabulky HTML seznamy HTML Block & Inline HTML třídy ID HTML HTML iframe HTML JavaScript Cesty souboru HTML HTML hlava Rozložení HTML HTML responzivní Počítačový kód HTML Sémantika HTML Průvodce stylem HTML HTML entity HTML symboly HTML Emojis Znaková sada HTML HTML kódování URL HTML vs. XHTML

HTML formuláře

HTML formuláře Atributy formuláře HTML HTML prvky formuláře Typy vstupu HTML Vstupní atributy HTML Atributy vstupního formuláře HTML

HTML grafika

HTML plátno HTML SVG

HTML média

HTML média HTML video Zvuk HTML HTML pluginy HTML YouTube

HTML API

Geolokace HTML HTML Drag/Drop Webové úložiště HTML HTML Web Workers HTML SSE

Příklady HTML

Příklady HTML HTML kvíz HTML cvičení HTML certifikát HTML souhrn Přístupnost HTML

HTML reference

Seznam značek HTML Atributy HTML Globální atributy HTML Podpora HTML prohlížeče HTML události HTML barvy HTML plátno HTML Audio/Video HTML Doctypes HTML znakové sady HTML kódování URL HTML jazykové kódy Zprávy HTTP HTTP metody Převodník PX na EM Klávesové zkratky

Prvky a techniky rozvržení HTML


Webové stránky často zobrazují obsah ve více sloupcích (jako časopis nebo noviny).


Příklad

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


Prvky rozvržení HTML

HTML má několik sémantických prvků, které definují různé části webové stránky:

HTML5 Semantic Elements
<header> - Defines a header for a document or a section
<nav> - Defines a set of navigation links
<section> - Defines a section in a document
<article> - Defines an independent, self-contained content
<aside> - Defines content aside from the content (like a sidebar)
<footer> - Defines a footer for a document or a section
<details> - Defines additional details that the user can open and close on demand
<summary> - Defines a heading for the <details> element
Sémantické prvky HTML5
  • <header> - Definuje záhlaví pro dokument nebo oddíl
  • <nav> - Definuje sadu navigačních odkazů
  • <section> - Definuje sekci v dokumentu
  • <article> - Definuje nezávislý, samostatný obsah
  • <aside> - Definuje obsah vedle obsahu (jako postranní panel)
  • <footer> - Definuje zápatí dokumentu nebo oddílu
  • <details> - Definuje další podrobnosti, které může uživatel na požádání otevřít a zavřít
  • <summary>- Definuje nadpis pro <details>prvek

Více o sémantických prvcích si můžete přečíst v naší kapitole Sémantika HTML .


Techniky rozvržení HTML

Existují čtyři různé techniky vytváření vícesloupcových rozvržení. Každá technika má své klady a zápory:

  • CSS framework
  • Vlastnost CSS float
  • CSS flexbox
  • CSS mřížka


CSS rámce

Pokud chcete vytvořit rozvržení rychle, můžete použít framework CSS, jako je W3.CSS nebo Bootstrap .

Slyšeli jste někdy o W3Schools Spaces ? Zde si můžete vytvořit svůj web od začátku nebo použít šablonu a hostovat jej zdarma.

Začněte zdarma ❯

* není vyžadována žádná kreditní karta


Plovákové rozvržení CSS

Je běžné dělat rozvržení celého webu pomocí vlastnosti CSS float. Float je snadné se naučit - stačí si zapamatovat, jak floata clearvlastnosti fungují. Nevýhody: Plovoucí prvky jsou svázány s tokem dokumentů, což může narušit flexibilitu. Více se o floatingu dozvíte v naší kapitole CSS Float and Clear .

Příklad

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


Rozložení CSS Flexbox

Použití flexboxu zajišťuje, že se prvky chovají předvídatelně, když se rozložení stránky musí přizpůsobit různým velikostem obrazovky a různým zobrazovacím zařízením.

Více o flexboxu se dozvíte v naší kapitole CSS Flexbox .

Příklad

Cities

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Footer


Rozložení mřížky CSS

Modul CSS Grid Layout Module nabízí systém rozvržení založený na mřížce s řádky a sloupci, což usnadňuje navrhování webových stránek bez nutnosti použití plovoucích prvků a umístění.

Další informace o mřížkách CSS naleznete v úvodní kapitole mřížky CSS.