HTML (Training pentru BOSCH), Curs 3

Conținut:

- Construire template pe baza claselor din CSS-urile existente

- Atribute HTML și elemente de stil CSS

- DOM - Document Object model

- Clase efective existente deja în CSS-uri evidențiate în template

- Pentru data viitoare ...

Construire template pe baza claselor existente deja în CSS-uri

Construire template pe baza claselor din CSS-urile existente
Prima oră ...

• discutarea elementelor și claselor încercate din exemplul construit în template
• ce ne arata editorul Visual Studio Code când trecem cu mouse-ul peste un element HTML sau o definiție dintr-un fișier CSS
  • pentru un element HTML ne arată o explicație sumară a elementului
  • pentru o definiție dintr-un fișier CSS ne arată un exemplu de folosire

Construire template pe baza claselor din CSS-urile existente
Prima oră (cont.)

• legătura dintre un fișier HTML și fișiere de stil CSS prin tagul link
• tagul hr - horizontal rule (linie orizontală)
• ce înseamnă un id și cum se folosește cu #nume_id în CSS
• ce înseamnă o clasă și cum se folosește cu .nume_clasă în CSS

Construire template pe baza claselor din CSS-urile existente
Prima oră (cont.)

• cum ne uităm la cum se folosește o clasă sau un id deja definite într-un fișier CSS
  • dacă nu se specifică nimic înainte de # sau . înseamnă că se poate aplică pe orice element HTML
  • dacă se specifică un element înainte de # sau . înseamnă că se poate aplica doar pe acel element HTML

Construire template pe baza claselor din CSS-urile existente
Prima oră (cont.)

• când sunt specificate în CSS mai multe componente separate prin spațiu (ca în exemplu: .lotusTitleBar .lotusSearch .lotusSearchButton {...}) atunci stilurile din acolade se referă la ultimul element din listă (adică .lotusSearchButton în exemplul nostru), care trebuie să fie într-un element cu clasa lotusSearch, care , la rândul lui trebuie să fie într-un element cu clasa lotusTitleBar

Construire template pe baza claselor ce există deja în CSS-urile existente
A doua oră ...

• tagurile strong și em - care încapsulează text de o importanță mai mare, respectiv text emfatic
• tagul ancoră a care face salt la altă pagină HTML, cu atributele href (care conține adresa la care se face saltul, de ex. "https://www.w3.org/TR/CSS2/box.html") și target (care specifică în ce tab să se deschidă pagina, lipsa acestui atribut va deschide pagina în același tab, pe când valoarea "_blank", de ex., va deschide pagina într-un tab nou)

Construire template pe baza claselor ce există deja în CSS-urile existente
A doua oră (cont.)

• DOM - Document Object Model
  • e modul prin care toate elementele unui document HTML sunt reprezentate de către browser ca un arbore, în funcție de cum sunt ele imbricate unele în altele
  • a se vedea exemplul din slide-ul următor ...

Construire template pe baza claselor ce există deja în CSS-urile existente
A doua oră (cont.)

• ramura DOM-ului care se vede în partea de jos a inspect-ului de la Google Chrome

Clase efective existente deja în CSS-uri evidențiate în template

Clase efective existente deja în CSS-uri evidențiate în template

• Clase pentru text
  • infoText
  • shadowText
  • lotusAboutText

Clase efective existente deja în CSS-uri evidențiate în template (cont.)

• Clase pentru indentare
  • indent7
  • indent12
  • lotusIndent10
  • lotusIndent15
  • lotusIndent20
  • lotusIndent40
  • lotusIndent60

Clase efective existente deja în CSS-uri evidențiate în template

• Clasa lotusAboutBox, care include:
  • un element cu clasa lotusAboutText, care lasă un spațiu în partea stângă în care am pus o imagine

Clase efective existente deja în CSS-uri evidențiate în template

• Clasa lotusAddComment
  
• Clasele lotusBorderTop, lotusAlignLeft și lotusAlignRight
  
• La fel ca și lotusBorderTop, există și lotusBorderBottom, care pune acel border subtil în partea de jos a elementului.

Pentru data viitoare ...

• prezentare teoretică a elementelor HTML și a stilurilor CSS.

Sfârșit