09. HTML layout elements

Sto je layout?

Sto je grid?

Sto znaci block level element

Sto znaci inline element

Inline vs block

https://jsfiddle.net/tonkec/63bcvda1/6/

Div element

<div> Content </div>

division

block level

Radimo primjer skupa

Zadatak

1. napravi jedan <div> element

2. u <div> element dodaj <p>

3. dodaj neki tekst u <p>

 

 

Koji su jos block elementi?

span element

<span> Content </span>

inline element

Radimo primjer skupa

koji su jos inline elementi?

https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#list_of_inline_elements

Zadatak

1. Napravi jedan inline element po svom izboru

Nesting

inline elementi se mogu ugnijezditi bilo kome

block elementi se NE mogu ugnijezditi bilo kome

block elementi ne bi trebali ici u inline elemente

nema errora u browseru

Primjer

https://jsfiddle.net/tonkec/3ys1L8d6/14/

Zadaća

Pogledaj video

https://youtu.be/bOh9WjucNsA

Made with Slides.com