M5 | L1 – Introducere HTML I

Astăzi vom afla despre:

  • Etichete/Tag-uri: h, h2, p, img, a;
  • Atributele etichetelor ;
  • Crearea link-urilor

Aplicațiile pe care le vom folosi sunt:

Notepad++; CodePen

PROIECTE:

Primul Site

  1. Editor de text

Editarea fisierelor (dezvoltarea limbajului HTML) cu extensia  HTML va fi realizata cu aplicatii-editoare de texte

Link Proiect Final: https://codepen.io/it_junior/pen/jOBygWp

  1. Ce este HTML?

HTML, sau HyperText Markup Language, este un limbaj  utilizat pentru a descrie structura unei pagini web. Utilizează o sintaxă sau notare specială pentru a organiza și a da informații despre pagină browserului. Elementele au de obicei etichete de deschidere și închidere care înconjoară și dau sens conținutului. De exemplu, există diferite opțiuni de etichetă de plasat în jurul textului pentru a arăta dacă este un titlu, un paragraf sau o listă.

De exemplu:

Devine:

  1. Primul site

Majoritatea elementelor HTML au o etichetă de deschidere și o etichetă de închidere.

  • Deschiderea etichetelor arată astfel: <h1>
  • Etichetele de închidere arată astfel: </h1>

Singura diferență între etichetele de deschidere și închidere este slash-ul după bracketul de deschidere al unei etichete de închidere.

Challenge 1:

  • Schimbați textul elementului h1 pentru a spune „Hello World”.

Elementul h2 pe care îl veți adăuga în acest pas va adăuga o rubrică de nivel doi la pagina web.

Acest element informează browserul despre structura site-ului dvs. web. Elementele h1 sunt adesea utilizate pentru rubricile principale, în timp ce elementele h2 sunt utilizate în general pentru subpoziții. Există, de asemenea, elemente h3, h4, h5 și h6 pentru a indica diferite niveluri de subpoziții.

Challenge 2:

  • Adăugați o etichetă h2 care spune „CatPhotoApp” pentru a crea un al doilea element HTML sub elementul „Hello World” h1.

Elementul p este elementul preferat pentru text de pe site-urile web. p este scurt pentru „paragraf”. You can create a paragraph element like this: <p>I’m a p tag!</p>

Challenge 3:

  • Creați un element p sub elementul dvs. h2 și dați-l textul „Hello Paragraf”.

Notă: Ca o convenție, toate etichetele HTML sunt scrise cu litere mici, de exemplu <p> </p> și nu <P> </P>.

Comentarea este o modalitate prin care poți lăsa comentarii pentru alți dezvoltatori din codul tău, fără a afecta codul in sine. Comentarea este, de asemenea, o modalitate convenabilă de a face codul inactiv fără a fi necesar să îl ștergeți în întregime.

Comentariile în HTML încep cu <!– și se termină cu –>

HTML5 introduce mai multe etichete HTML descriptive. Acestea includ main, header, footer, nav, video, article, section și altele.

Aceste etichete oferă o structură descriptivă HTML care ajută la optimizarea motoarelor de căutare și la accesibilitate. Eticheta main HTML5 ajută motoarele de căutare și alți dezvoltatori să găsească conținutul principal al paginii tale.

Challenge 4:

  • Creați un al doilea element p după elementul p existent cu următorul text kitty: Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
  • Apoi, creează un element main și introduceti cele două elemente p din interiorul elementului main.

Puteți adăuga imagini pe site-ul web utilizând elementul img și indicați adresa URL a unei anumite imagini folosind atributul src.

Rețineți că elementele img se auto-închid. Toate elementele img trebuie să aibă un atribut alt. Textul din interiorul unui atribut alt este pentru a îmbunătăți accesibilitatea și este afișat dacă imaginea nu se încarcă. În mod ideal, atributul alt nu trebuie să conțină caractere speciale decât dacă este necesar.

Challenge 5:

  • În elementul main existent, introduceți un element img înaintea elementelor p existente. Setați acum atributul src astfel încât să indice către acest url: https://bit.ly/fcc-relaxing-cat
  • În sfârșit, nu uitați să oferiți elementului dvs. img un atribut alt cu textul aplicabil.

Puteți utiliza un element a (ancoră) pentru a face link către conținut în afara paginii web. Elementul a are nevoie de o adresă web de destinație numită ca atribut href. De asemenea, au nevoie de text ancoră. Iată un exemplu:

Apoi browserul va afișa textul „ this links to freecodecamp.org” ca link pe care puteți face clic. Iar acel link vă va duce la adresa web https://www.freecodecamp.org.

Challenge 6:

  • Creați un element care se leagă de https://freecatphotoapp.com care are „ cat photos” ca text de ancoră.

Elementele a (ancora) pot fi de asemenea folosite pentru a crea legături interne pentru a trece la diferite secțiuni din cadrul unei pagini web.

Pentru a crea o legătură internă, atribuiți atributul href al unei legături simbolul # plus valoarea atributului id pentru elementul la care doriți să faceți o legătură internă, de obicei mai jos în josul paginii. Apoi, trebuie să adăugați același atribut id elementului pe care îl conectați. Un id este un atribut care descrie în mod unic un element.

Mai jos este un exemplu de legătură ancoră internă și elementul țintă:

Challenge 7:

  • Creati un element footer ca ultimul element din main care sa aiba atributul id “footer”.
  • Creati o legatura interna adaugat un elemnt ancora cu atributul href = “#footer” si textul “Sari jos”.

Puteti introduce linkuri in interiorul elemtelor de text:

Textul normal este învelit în elementul p: <p> Here’s a … for you to follow.</p>

Următorul este elementul ancoră <a> (care necesită o etichetă de închidere </a>): Tinta <a> … </a> este un atribut de etichetă ancoră care specifică unde să deschidă link-ul, iar valoarea „_blank” specifică ca link-ul se va deschide într-o nouă filă.

href este un atribut de etichetă ancoră care conține adresa URL a link-ul:<a href=”http://freecodecamp.org”> … </a>

Textul, „link to freecodecamp.org”, în cadrul unui element numit text ancora, va afișa un link pentru a face clic pe:<a href=” … „> link către freecodecamp.org </a>

Challenge 7:

  • Creati un nou element de text care sa aiba in interior un element ancora care va deschide un link cu poze pentru pisici.
  • Noul paragraf ar trebui să aibă text care spune „ View more cat photos”, unde „ cat photos” este un link, iar restul textului este text simplu.

Puteti transformate alte elemnte in link-uri daca le introduceti intr-un elemnt ancora.

Challenge 8:

  • Introduceti poza intr-un element ancora cu atributul href=”#” ceea ce semnifica un link mort care nu duce nicaieri.