Exerciții

HTML

Transformă textul de mai jos într-un link spre – https://www.google.com

<!DOCTYPE html>
<html>
<body>
    This is a link
</body>
</html>

Adaugă o linie orizontală <hr> între titlu și paragraf.

<!DOCTYPE html>
<html>
<body>
    <h1>London</h1>
    <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</body>
</html>

Adaugă șase titluri în pagină cu textul “Hello”. Începe cu cel mai important titlu și finisează cu cel mai puțin important.

<!DOCTYPE html>
<html>
<body>
  
</body>
</html>

Marchează textul de mai jos cu tag-urile corespunzătoare.

  • Universal Studios Presents – este cel mai important text.

  • Jurassic Park – este puțin mai neimportant decât precedentul.

  • About – e și mai neimportant decât – Jurassic Park.

  • Ultima propoziție este un simplu paragraf.

Afișează fiecare vers a poeziei de mai jos din rând nou.

Formează o listă din elementele de mai jos.

Adaugă pe tag-ul h1 de mai jos clasa “titlu”.

Adaugă comentarii în codul de mai jos.

Cum se descifrează HTML?

  1. Hyperlinks and Text Markup Language

  2. Hyper Text Markup Language

  3. Home Tool Markup Language

  4. Hyper-Phrase Marketing Language

Care tag conține partea vizuală a unei pagini web?

  1. <section>

  2. <head>

  3. <body>

Modifică codul de mai jos așa încât să ai o listă de imagini.

Flosește tagul <table> pentru a crea un tabel cu 4 rânduri si 3 coloane.

Include paragrafele de mai jos într-o diviziune (bloc) cu clasa “container”.

Care este diferența dintre <head> și <header>?

Ce trebuie să conțină atributul href=” ”?

  • Numele paginii pe care trebuie să fii transferat.

  • URL-ul paginii pe care trebuie să fii transferat.

  • Dacă noua pagină ar trebui să fie deschisă în aceeași fereastră sau într-o fereastră nouă.

Completează spațiile libere și vezi ce v-a apărea în pagina ta web.

CSS Selectori

Selectează toate tag-urile <p> din pagină.

Selectează toate tag-urile <span> din pagină.

Selectează tag-ul <span> cu clasa black.

Selectează tag-ul <span> care se află în tag-ul <p>.

Selectează tag-ul <img> care se află în tag-ul <span> cu clasa black.

Selectează tag-urile <img> cu clasa animals.

Selectează tag-urile <img> cu clasa animals care se află în tag-urile <p>.

Selectează toate tag-urile <img> și <p>.

Selectează doar tag-urile <span> cu clasa fancy.

Selectează tag-ul <span> cu clasa hidden și conținutul „I am the most hidden”.

CSS Proprietăți

Modifică culoarea următorului paragraf în blue.

Pentru următorul citat, aliniază numele autorului pe partea dreaptă.

Pentru următorul citat, mărește textul citatului la 18px, iar numele autorului la 21px.

Subliniază cu o linie și mărește grosimea termenului următoarei noțiuni. Modifică culoarea pe fundal în hotpink.

Modifică spațiul între litere la 1.5px în textul următorului citat.

CSS Poziționare

Poziționează butonul {save} în colțul dreapta-jos 10px x 10px fiind disponibil chiar dacă scrolăm pagina.

Poziționează cardul astfel ca 70px din el să fie pe imagine și spațiul inițial ocupat de card să rămână același.

Poziționează titlurile <h1> și <h2> pe imagine centru-jos.

Poziționează titlurile <h1> și <h3> pe imagine centru-jos și elementul cu clasa overlay pe imagine și în spatele titlurilor.

Poziționează elementul cu clasa popup-overlay pe toate elementele din pagină și elementul cu clasa boxa albă cu butoane centru-jos 50px.

Wireframes

Articol

Blog

Contacte

Content

Galerie

Multimedia

Produse

Echipa

Last updated