{"id":28606,"date":"2024-06-04T07:22:17","date_gmt":"2024-06-03T19:22:17","guid":{"rendered":"https:\/\/goit.global\/?post_type=articles&#038;p=28606"},"modified":"2024-06-04T07:22:17","modified_gmt":"2024-06-03T19:22:17","slug":"html-si-css-ce-este-cine-are-nevoie-si-de-ce","status":"publish","type":"articles","link":"https:\/\/goit.global\/ro\/articles\/html-si-css-ce-este-cine-are-nevoie-si-de-ce\/","title":{"rendered":"HTML \u0219i CSS: ce este, cine are nevoie \u0219i de ce"},"content":{"rendered":"<p>Aproape tot ceea ce vezi pe internet \u2013 de la bloguri \u0219i magazine online p\u00e2n\u0103 la social media \u0219i portaluri de informa\u021bii \u2013 este construit cu ajutorul HTML \u0219i CSS. HTML define\u0219te structura \u0219i con\u021binutul paginilor, \u00een timp ce CSS este responsabil pentru culoarea, stilul \u0219i aspectul acestora. HTML \u0219i CSS sunt esen\u021biale pentru toate tipurile de speciali\u0219ti IT: Frontend Developeri, Programatori Fullstack, software testeri, designeri UI\/UX etc. Ast\u0103zi, vom afla ce este HTML \u0219i CSS \u0219i de ce \u00eenv\u0103\u021barea lor este o idee excelent\u0103 pentru a \u00eencepe cariera \u00een IT. Lets go!<\/p>\n<h2>Ce este HTML \u0219i la ce folose\u0219te<\/h2>\n<p>HTML \u2013 un limbaj de marcare a hipertextului care func\u021bioneaz\u0103 printr-un sistem de etichete menite s\u0103 ajute la structurarea \u0219i aranjarea elementelor din paginile web. Dac\u0103 ne imagin\u0103m c\u0103 un site web este ca o cas\u0103, HTML determin\u0103 aranjamentul \u0219i dispunerea camerelor, dar nu se ocup\u0103 de design. HTML \u00eei spune browserului unde trebuie s\u0103 fie plasat titlul, textul, imaginea, link-ul etc. Acesta este structura pe care sunt construite toate site-urile.<\/p>\n<p>HTML este necesar pentru ca browserul s\u0103 afi\u0219eze corect paginile. F\u0103r\u0103 el, vei vedea doar o gr\u0103mad\u0103 de text haotic amestecat cu imagini. HTML este cel care ajut\u0103 site-urile s\u0103 fie u\u0219or de \u00een\u021beles \u0219i u\u0219or de utilizat. Prin urmare, cuno\u0219tin\u021bele despre HTML reprezint\u0103 baza pentru cei care doresc s\u0103 treac\u0103 la dezvoltarea front-end sau Fullstack. \u00cen\u021belegi c\u00e2t de important este HTML?<\/p>\n<h3>La ce folose\u0219te limbajul HTML<\/h3>\n<p>Acum \u0219tii ce este HTML \u0219i ce rol joac\u0103 \u00een dezvoltarea site-urilor web, hai s\u0103 arunc\u0103m o privire la sarcinile sale cheie. HTML nu creeaz\u0103 doar scheletul paginii, ci v\u0103 ofer\u0103 instrumentele necesare pentru:<\/p>\n<ul>\n<li aria-level=\"1\">Structurarea \u0219i marcarea HTML. Pentru a determina modul \u00een care vor fi aranjate titlurile, listele, paragrafele, tabelele \u0219i imaginile. Este ca \u0219i cum ai muta mobila \u00eentr-o \u00eenc\u0103pere \u2013 tu decizi ce \u0219i unde se pune.<\/li>\n<li aria-level=\"1\">Ad\u0103ugarea hyperlinks. Una dintre principalele caracteristici ale paginilor web este interconectivitatea prin intermediul hyperlink-urilor. Adesea inser\u0103m \u00een articolele noastre linkuri c\u0103tre alte materiale. Este foarte convenabil.<\/li>\n<li aria-level=\"1\">Inserarea multimedia. Dori\u021bi s\u0103 adaugi un videoclip sau un fi\u0219ier audio pe pagin\u0103? Cu HTML aceasta se poate face u\u0219or. El permite integrarea elementelor multimedia direct \u00een con\u021binut, ceea ce face ca site-urile s\u0103 fie mai interactive \u0219i atractive.<\/li>\n<li aria-level=\"1\">Crearea formularelor. HTML permite folosirea diverselor formulare pentru a colecta informa\u021bii (feedback, \u00eenregistrare, c\u0103utare pe site etc).<\/li>\n<\/ul>\n<p>HTML are func\u021bii de baz\u0103 pentru formatarea textului, dar de obicei nu este folosit \u00een acest scop pentru a evita erorile \u0219i pentru a nu aglomera codul surs\u0103. De aceea, JavaScript \u0219i CSS sunt responsabile pentru frumuse\u021bea \u0219i interactivitatea \u0219ablonului HTML. \u00cempreun\u0103, ele pot fi numite cei trei piloni ai dezvolt\u0103rii Frontend.<\/p>\n<h3>Etichetele HTML<\/h3>\n<p>HTML func\u021bioneaz\u0103 cu ajutorul etichetelor, care pot fi comparate cu c\u0103r\u0103mizile pentru construirea paginilor web. Fiecare tag are o func\u021bie unic\u0103. Imagineaz\u0103-\u021bi c\u0103 scrii un manual pentru browser \u00een care fiecare tag este o comand\u0103 separat\u0103.<\/p>\n<p>De obicei, etichetele apar \u00een perechi: exist\u0103 o etichet\u0103 care deschide \u0219i \u00eenchide un element HTML (de exemplu, &lt;p&gt; \u0219i &lt;\/p&gt;&gt;). Este ca \u0219i cum \u00eencepi \u0219i termini un g\u00e2nd. \u00centre ele se afl\u0103 con\u021binutul \u2013 text, imagini, linkuri etc.<\/p>\n<p>S\u0103 analiz\u0103m c\u00e2teva etichete HTML de baz\u0103:<\/p>\n<ul>\n<li aria-level=\"1\">Etichetele de la &lt;h1&gt; p\u00e2n\u0103 la &lt;h6&gt; sunt utilizate pentru titluri (de la cel mai important la cel mai pu\u021bin important).<\/li>\n<li aria-level=\"1\">Eticheta &lt;p&gt;este necesar\u0103 pentru paragrafe.<\/li>\n<li aria-level=\"1\">HTML-tag &lt;a&gt; define\u0219te hyperlink.<\/li>\n<li aria-level=\"1\">Eticheta &lt;img&gt; adaug\u0103 imagini, iar &lt;table&gt; \u2013 tabele.<\/li>\n<\/ul>\n<p>Nu toate etichetele trebuie s\u0103 fie \u00eenchise (&lt;br&gt;, &lt;hr&gt;, &lt;input&gt;, &lt;meta&gt; etc). De asemenea, \u00een interiorul etichetelor se pot specifica atribute HTML. Este un fel de set\u0103ri suplimentare pentru extinderea posibilit\u0103\u021bilor. S\u0103 analiz\u0103m un fragment de cod HTML &lt;a href=\u201dhttps:\/\/www.google.com\u201d&gt; Google&lt;\/a&gt;. Iat\u0103 cum func\u021bioneaz\u0103:<\/p>\n<ul>\n<li aria-level=\"1\">&lt;a&gt; \u2013 etichet\u0103 de deschidere pentru crearea hyperlink.<\/li>\n<li aria-level=\"1\">href=\u201dhttps:\/\/www.google.com\u201d \u2013 atribut care con\u021bine adresa la care conduce (\u00een cazul nostru, este vorba de pagina de pornire Google).<\/li>\n<li aria-level=\"1\">Google \u2013 textul care va fi vizibil pentru utilizatori.<\/li>\n<li aria-level=\"1\">&lt;\/a&gt; \u2013 etichet\u0103 de \u00eenchidere care marcheaz\u0103 sf\u00e2r\u0219itul linkului.<\/li>\n<\/ul>\n<p>Vizitatorii site-ului vor vedea cuv\u00e2ntul &#8220;Google&#8221; \u0219i vor putea face click pe el pentru a ajunge la URL-ul specificat. Sper\u0103m c\u0103 acum \u00een\u021belegi mai bine cum func\u021bioneaz\u0103 HTML. Po\u021bi afla mai multe despre acest limbaj de programare la maratonul nostru online gratuit.<\/p>\n<h3>Avantaje \u0219i dezavantaje HTML<\/h3>\n<p>Nu trebuie s\u0103 pretindem c\u0103 HTML este perfect. Are avantajele \u0219i dezavantajele sale. Printre avantaje se num\u0103r\u0103 urm\u0103toarele:<\/p>\n<ul>\n<li aria-level=\"1\">Sintax\u0103 clar\u0103, u\u0219or de \u00eenv\u0103\u021bat \u0219i de utilizat.<\/li>\n<li aria-level=\"1\">Flexibilitate \u0219i versatilitate. HTML permite crearea unei mari variet\u0103\u021bi de site-uri \u0219i lucreaz\u0103 \u00een combina\u021bie cu alte tehnologii de <a href=\"https:\/\/goit.global\/ua\/courses\/frontend\/\">dezvoltare front-end<\/a>.<\/li>\n<li aria-level=\"1\">Limbajul HTML este bine suportat de toate browserele moderne, ceea ce garanteaz\u0103 c\u0103 paginile sunt accesibile pe scar\u0103 larg\u0103 \u0219i sunt afi\u0219ate corect pe orice dispozitiv.<\/li>\n<\/ul>\n<p>Iat\u0103 dezavantajele:<\/p>\n<ul>\n<li aria-level=\"1\">Posibilit\u0103\u021bi limitate. HTML \u00een sine nu este suficient pentru a stiliza complet paginile \u0219i a le ad\u0103uga interactivitate. Pentru aceasta, este nevoie de CSS \u0219i JavaScript.<\/li>\n<li aria-level=\"1\">Browserele mai vechi nu reac\u021bioneaz\u0103 \u00eentotdeauna la noile etichete HTML \u00eentr-un mod previzibil.<\/li>\n<\/ul>\n<p>Aici ne oprim \u0219i vom trece la CSS. Va fi interesant!<\/p>\n<h2>Ce este CSS \u0219i cum se folose\u0219te<\/h2>\n<p>CSS (Cascading Style Sheets) este responsabil pentru aspectul paginii. Dac\u0103 ne imagin\u0103m HTML ca pe un manechin, CSS este \u00eembr\u0103c\u0103mintea care \u00eel face s\u0103 arate frumos \u0219i elegant.<\/p>\n<p>CSS decoreaz\u0103 elementele create cu ajutorul HTML. De exemplu, modific\u0103 culoarea textului, dimensiunea fontului, spa\u021bierea paragrafelor, adaug\u0103 anima\u021bii \u0219i multe altele. CSS interac\u021bioneaz\u0103 cu HTML prin utilizarea selectorilor \u2013 reguli speciale care determin\u0103 la ce componente se ata\u0219eaz\u0103 stilurile \u0219i cum se ata\u0219eaz\u0103 acestea.<\/p>\n<p>S\u0103 spunem c\u0103 avem un element HTML numit &lt;p&gt; (paragraf). Folosind CSS, putem face ca textul din el s\u0103 fie ro\u0219u \u0219i s\u0103 m\u0103rim fontul ad\u0103ug\u00e2nd urm\u0103torul selector CSS:<\/p>\n<p>p {<\/p>\n<p>color: red;<\/p>\n<p>font-size: 16px;<\/p>\n<p>}<\/p>\n<p>Site-urile f\u0103r\u0103 CSS ar ar\u0103ta teribil de monoton. CSS le ofer\u0103 individualitate \u0219i \u00eembun\u0103t\u0103\u021be\u0219te experien\u021ba utilizatorului (important pentru designerii UI\/UX). De asemenea, ajut\u0103 la cre\u0219terea accesibilit\u0103\u021bii \u0219i a confortului paginilor pentru diferite dispozitive, de la calculatoare p\u00e2n\u0103 la smartphone-uri.<\/p>\n<p>Dac\u0103 deja e\u0219ti familiarizat cu elementele de baz\u0103 HTML \u0219i CSS, \u00eenscrie-te la mini-cursul nostru CSS Grid pentru a-\u021bi \u00eembun\u0103t\u0103\u021bi abilit\u0103\u021bile de machetare \u0219i pentru a ad\u0103uga \u00een portofoliul t\u0103u un site web cu machetare responsiv\u0103.<\/p>\n<h3>Ce sarcini pot fi \u00eendeplinite cu CSS<\/h3>\n<p>Acum \u00een\u021belegi ce este CSS \u0219i cum se integreaz\u0103 \u00een HTML. Acest instrument permite:<\/p>\n<ul>\n<li aria-level=\"1\">Modificarea aspectului textului (culoare, font, spa\u021biu \u00eentre r\u00e2nduri, aliniere etc).<\/li>\n<li aria-level=\"1\">Gestionarea fundalului elementelor HTML.<\/li>\n<li aria-level=\"1\">Crearea designului responsiv.<\/li>\n<li aria-level=\"1\">Proiectarea machetei generale a paginii pentru o structur\u0103 clar\u0103 \u0219i organizat\u0103 a con\u021binutului (inclusiv coloane, spa\u021bii \u0219i margini).<\/li>\n<li aria-level=\"1\">Ad\u0103ugarea anima\u021biilor, tranzi\u021biilor \u0219i efectelor.<\/li>\n<li aria-level=\"1\">Plasarea precis\u0103 a elementelor pe pagin\u0103 prin definirea dimensiunilor \u0219i propor\u021biilor acestora.<\/li>\n<\/ul>\n<p>Cu ajutorul CSS, se pot crea site-uri web destul de complexe \u0219i atractive. Este un lucru foarte util! Poate \u00een articolele viitoare, vom spune mai multe despre cum se lucreaz\u0103 cu CSS. Dac\u0103 dore\u0219ti s\u0103 \u00eenve\u021bi mai multe chiar acum, te invit\u0103m la maratonul nostru gratuit.<\/p>\n<h3>Avantajele \u0219i dezavantajele CSS<\/h3>\n<p>Ca orice instrument, CSS are avantajele \u0219i dezavantajele sale. Cu ajutorul acestuia, po\u021bi schimba stilul elementelor de pe \u00eentreaga pagin\u0103 prin rescrierea unei singure reguli \u00een fi\u0219ierul CSS, ceea ce economise\u0219te timp \u0219i efort. Dezvoltarea modelelor care se adapteaz\u0103 la diferite dimensiuni de ecran \u0219i dispozitive. Crearea paginilor structurate, ordonate \u0219i user-friendly. Posibilitatea de a experimenta \u0219i de a \u00eembun\u0103t\u0103\u021bi constant experien\u021ba utilizatorului. Acestea sunt avantajele sale.<\/p>\n<p>Dezavantajele includ faptul c\u0103 browserele interpreteaz\u0103 diferit codul CSS (uneori sunt necesare eforturi suplimentare pentru a asigura compatibilitatea). De asemenea, fi\u0219ierele CSS de mari dimensiuni sunt dificil de \u00eentre\u021binut, \u00een special \u00een cazul proiectelor de mari dimensiuni. Odat\u0103 ce \u00eencepe\u021bi s\u0103 lucrezi cu CSS, \u00ee\u021bi vei forma propria opinie despre punctele sale forte \u0219i slabe.<\/p>\n<h2>Cine trebuie s\u0103 \u00eenve\u021be HTML \u0219i CSS \u0219i de ce<\/h2>\n<p>\u00cen concluzie, devine clar c\u0103 HTML \u0219i CSS sunt abilit\u0103\u021bi fundamentale care vor fi utile nu numai pentru dezvoltatorii Frontend sau programatorii Fullstack, ci \u0219i pentru o gam\u0103 larg\u0103 de speciali\u0219ti \u00een IT, inclusiv testeri, designeri UI\/UX \u0219i chiar speciali\u0219ti \u00een marketing.<\/p>\n<p>\u00cenv\u0103\u021barea HTML \u0219i CSS este primul \u0219i cel mai important pas pentru oricine dore\u0219te s\u0103-\u0219i construiasc\u0103 cariera \u00een dezvoltare \u0219i design. Acestea deschid u\u0219a c\u0103tre tehnologii \u0219i limbaje de programare mai complexe. No\u021biunile de baz\u0103 HTML \u0219i CSS vor deveni parte integrant\u0103 a setului t\u0103u de instrumente.<\/p>\n<p>Particip\u0103 la maratonul nostru online gratuit pentru a construi primul t\u0103u site web \u00een HTML \u0219i CSS de la zero. Sau \u00eenscrie-te imediat la un curs de Frontend, Fullstack sau UI\/UX design, dac\u0103 te-ai decis deja asupra unei profesii. \u00cencepe s\u0103 studiezi c\u00e2t mai cur\u00e2nd posibil pentru a ob\u021bine un job interesant \u0219i bine pl\u0103tit!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ast\u0103zi, vom afla ce este HTML \u0219i CSS \u0219i de ce \u00eenv\u0103\u021barea lor este o idee excelent\u0103 pentru a \u00eencepe cariera \u00een IT. Lets go!<\/p>\n","protected":false},"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false,"inline_featured_image":false},"categories":[],"tags":[],"class_list":["post-28606","articles","type-articles","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/articles\/28606","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/articles"}],"about":[{"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/types\/articles"}],"wp:attachment":[{"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/media?parent=28606"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/categories?post=28606"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/goit.global\/ro\/wp-json\/wp\/v2\/tags?post=28606"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}