Laboratorul 1
Realizează un folder cu numele congres
Deschide aplicația Notepad++. Din Encoding din bara de menu bifează opțiunea Encode în UTF-8.
În laborator vom realiza un site web, prin transformarea unui site dat, pe care îl puteți descărca de pe prima pagină.
Imaginea de pe fișierul index este cea următoare:
Pagina ca design are mai multe greșeli: coloanele nu sunt la același nivel; elementele header și footer sunt rudimentare; pagina nu are titlu; listele din a doua coloană sunt inestetice; background-ul de la lista din meniu; exprimări inadcevate: scurtă prezentare (titlul coloanei a doua) pentru un conținut care se referă la scopurile conferinței; conținutul coloanei a treia poate fi integrat în a doua coloană; partea cu personalități este plasată greșit sub meniul vertical; trebuie schimbat în coloana a treia.
Structura paginii:
Refacerea paginii index
Noua structură este:
Noua schemă se realizează prin flex-box, care este o nouă proprietate css, un layout mode, adică un algoritm care determină poziția și mărimea containerelor bazat pe modul cum interacționează cu "frații" și "strămoșii" lor. Cele trei divuri incluse în divul continut sunt copiii acestuia. Divul continut este flex-box, iar cele trei divuri sunt itemii flex.
Vezi codul.Conținuturile
În body scrie:
-h1- Congresul de la Viena -/h1-
-h2- Caracteristici generale -/h2-
-p-Congresul de la Viena (1 noiembrie 1814 - 9 iunie 1815) a fost o conferință a statelor europene desfășurată la sfârșitul războaielor napoleoniene cu scopul de a reinstaura în Europa ordinea conservatoare existentă înaintea izbucnirii Revoluției Franceze. Scopul Congresului de la Viena a fost restabilirea vechilor regimuri absolutiste, și înlăturarea urmărilor ocupației franceze în Europa. Între preocupările majore ale congresului s-a numărat favorizarea autorităților tradiționale, adică a nobilimii conservatoare și clericale. -/p-
-h2-Cronologie-/h2-
-p-01.11.1814 Incep sedintele oficiale-/p-
-p -09.06.1815 Semnarea actului final-p-
-p-18.06.1815 Bătălia de la Waterloo-p-
-p-26.09.1815 Semnarea tratatului Sfintei Alianțe-/p-
-h2-Meniu-h2-
-ul-
-li-Acasa-li-
-li-Participanti si obiective-/li-
-li-Consecinte-/li-
-li-Structura sociala a statelor-/li-
-/ul-
-h2-Personalitati-/h2
-p-Klemens von Metternich al Imperiului Austriac-/p-
-p-Lordul Castlereagh al Angliei-/p
-p-Ministrul de externe al Frantei, Talleyrand-/p-
-p-Tarul Alexandru I al Rusiei-/p
-p-Baronul prusac Heinrich Friedrich Karl vom Stein-/p-
ATENȚIE: selectorii h1, h2, ul etc. trebuie încadrați între taguri: <>!!!. Șterge liniuțele -.
Inserare imagine
Descarcă arhiva. După descărcare dezarhivează. Arhiva trebuie să se fie în folderul congres.
Afișarea unei imagini pe o pagină web se face prin scriptul -img src=""-. Înlocuiește liniuțele cu taguri. Între ghilimele trebuie scrisă calea relativă: numele folderului dacă este cazul (și este) și numele fișierului. Plasează imaginea după Scurtă prezentare.
Cerință:
Fă o captură de ecran paginii web realizate și încarc-o.