- Ukážeme si jak náš zdrojový kód interpretuje prohlížeč.
- Developer tools, devTools
- Má každý moderní prohlížeč, nejlepší Chrome a Firefox.
- Zobrazí nám kód stránky tak, jak ho chápe prohlížeč.
- ukázat základní rozvržení okna (DOM, CSS, webová stránka)
- pozor, toto už není váš kód (i když se mu podobá), nýbrž jeho interpretace prohlížečem
- Ze značek v našem zdrojovém kód vzniknou HTML prvky webové stránky.
- ukázat zvýrazění prvku na stránce při pohybu v DOMu.
- DOM ~ Document Object Model = objektový model dokumentu
- Může se to zdát poněkud abstraktní, ale brzy se to objasní.
- Pro nás je podstatné, že prvky mají různé vlastnosti (velikost, barvu, odsazení).
- A my je můžeme měnit ‒ pomocí jazyka CSS.
- ukázat panel s CSS vlastnostmi, čímž přejdeme k výkladu o CSS
- umožňuje dělat dílčí změny v aktuálně načtené stránce, ty ale vydrží jen dokud na ní zůstáváš
- klávesovou zkratkou F12, popř. Ctrl+Shift+I (na Macu Cmd+Shift+I)
nebo
- pravým myšítkem na prvek, který vás zajímá a vybrat Prozkoumat/Inspect element
- při běžné práci na webu je má kódér otevřeny neustále