Recapitulare

- Tag-uri HTML-

• <div>, <span>
• <h1>, <h2>, <h3>....   titluri pe nivele
• <p> paragraf
• <b>, <i>, <s> modificatori ai stilului de text (bold, italic, strike)
• <a href = "path"> link către locația path
• <ol> cu <li>: lista ordonata cu elementele ei
• <ul> cu <li>: lista neordonata cu elementele
• <img src = "path">    o imagine găsită la locația path
• <table>, <tr>, <th>, <td>  Tabel, celulă îngroșată, celulă normală
• <form>, <input type = "tip_input" name="nume_input>
  • input type poate fi: {"text", "checkbox", "radio", "password", "submit", "reset" și altele}
  • <select> cu <option>

Recapitulare

- Selectori CSS-

• Selectorul general de tag:   body, h1, h2....
• Selectorul clasa:      .numeClasa   selectează toate elementele din acea clasa
• Selectorul id:   #id   selectează elementul cu id-ul specificat
• Pseudoclase:
  • :hover   - se activează clasa doar dacă mousul face hover
  • :nth-child(even / odd) - selectează elementele pare / impare

- combinare selectori -

• Combinarea prin virgulă  ->  s selectează separat lucrurile separate de virgulă
• Combinare prin spatii .sel1 .sel2  -> se selectează elementele sel2 care sunt descendenți ai lui sel1
• Combinare prin descendență directă  >
• Combinare fara spații:  h1.cls2  -> se selectează elementele h1 de clasă cls 2

Recapitulare

- Proprietăți CSS-

• display (inline / block)
• float (left /right)
• background-color
• width
• height
• padding
• margin
• border
• box-shadow -> de pe net

• color
• font-size
• font-family
• font-weight
• text-decoration
• text-shadow
• etc.

- Practic - HTML -

• În folderul site_caini se va crea un nou fișier: "galerie.html".
• Acesta va fi de forma stabilită în pagină:
  • va avea conținutul într-un div de clasă wrapper
  • Se va copia navbar-ul
• după navbar, și eventual o linie orizontală, se va crea un nou div, de clasă galerie care va conține galeria
• În div-ul galerie se vor adăuga 15 imagini, cu una din sursele următoare, modificând un pic dimensiunea la fiecare:
  • https://loremflickr.com/600/400/hound
  • "https://source.unsplash.com/600x400/?puppy"
• Se va include fișierul css extern style.css

- Practic - HTML -

 Pentru a adăuga un videoclip de pe youtube, vom obține tagul de <iframe>, dând SHARE și alegând opțiunea de embed a videoclipului.

- Practic - CSS -

În fișierul CSS vom adăuga stiluri pentru imaginile conținute în div-ul de clasă galerie: .galerie img

• Acestea vor avea display:inline-block.
• Tuturor imaginilor li se va da aceeași înălțime (de ex. 180px) folosind proprietatea height
• toate imaginile vor avea margini de 8 px pe toate părțile
• în momentul în care se face hover pe una din imagini, acesteia i se va adăuga un box-shadow, la alegere.

Pentru ca imaginile sa nu plutească afară din div-ul mare .galerie, acesta va avea proprietatea: overflow:hidden.

Deasemenea pentru a alinia imaginle frumos stanga-dreapta text-align: justify;

- Practic - CSS -

Putem crea o clasă numită special pentru elementele speciale din galerie. Acestea vor avea înălțimea dublă, pentru a fi pe 2 linii, și pentru ca celelalte imagini să se alinieze în jurul lor vom folosi proprietatea de plutire: float: left.