- Tutorial HTML pentru începători. Istoria limbajului și exemple practice.
- Tutorial HTML:Partea a doua – Formatarea textului, linkuri si imagini
- Tutorial HTML:Partea a treia – Design
- Tutorial HTML:Partea a patra – Tabele și liste
Ce este HTML?
HTML, sau HyperText Markup Language, este limbajul de marcare folosit pentru a crea documente web. Aceste documente pot include text, imagini, sunet și conținut multimedia și sunt afișate în browser-ul web prin intermediul unei conexiuni la internet.
HTML este un limbaj de marcare ce folosește etichete sau marcaje pentru a specifica modul în care trebuie să fie prezentat conținutul într-un document web. De exemplu, eticheta <p> este utilizată pentru a indica un paragraf de text, în timp ce eticheta <img> este utilizată pentru a insera o imagine într-un document web.
Datorită utilizării etichetelor, HTML permite crearea de documente web cu o structură și organizare clară, care poate fi interpretată și afișată într-un mod consistent de către browser-ul web. De asemenea, HTML permite crearea de link-uri către alte pagini web, prin intermediul etichetei <a>, ceea ce face posibilă navigarea între pagini și crearea de site-uri web complexe.
O scurtă istorie a limbajului
HTML a fost creat în 1989 de către Tim Berners-Lee, un cercetător de la CERN, în scopul de a putea partaja documente între colegii săi. Limbajul a avut o evoluție rapidă în anii 1990, când a fost adoptat de către întreaga comunitate a internetului. Primul standard al HTML a fost publicat în 1993, sub numele de HTML 2.0.
Cu fiecare versiune nouă a HTML, au fost adăugate noi elemente și caracteristici care au permis crearea de conținut mai complex și mai interactiv pe paginile web. Astfel, HTML a trecut prin mai multe versiuni, cum ar fi HTML 3.2, HTML 4.0 și HTML 4.01, fiecare dintre ele adăugând noi funcționalități și îmbunătățiri față de versiunea precedentă.
HTML5 este ultima versiune a limbajului HTML (Hypertext Markup Language), care este utilizată pentru a crea paginile web. De la lansarea sa în 2014, HTML5 a devenit rapid standardul de facto pentru dezvoltarea de aplicații web, oferind o gamă largă de avantaje față de versiunile anterioare ale HTML.
Una dintre cele mai importante schimbări aduse de HTML5 este adăugarea de noi elemente și atribute, care permit dezvoltatorilor web să structurizeze conținutul paginilor web într-un mod mai logic și mai semantic. Acest lucru înseamnă că HTML5 permite dezvoltatorilor web să creeze paginile web care sunt mai ușor de înțeles de către utilizatori și de către alte aplicații, cum ar fi motoarele de căutare.
O altă caracteristică importantă a HTML5 este suportul pentru media integrat. Cu HTML5, dezvoltatorii web pot adăuga audio și video direct în pagini web fără a mai fi nevoiți să folosească plugin-uri suplimentare, cum ar fi Adobe Flash. Acest lucru face ca paginile web să fie mai ușor de accesat de către utilizatori, deoarece suportul este implicit.
Legătura cu celelalte limbaje de programare web
HTML, sau Hypertext Markup Language, este un limbaj de marcare de hipertext utilizat pentru a crea structura paginilor web. Împreună cu alte limbaje de programare, cum ar fi JavaScript și CSS, HTML poate fi utilizat pentru a crea experiențe de utilizator interactive și pentru a controla aspectul și stilul conținutului unei pagini web.
CSS
CSS (Cascading Style Sheets) este un limbaj de stilizare utilizat pentru a defini aspectul şi prezentarea unui document scris în limbajul de marcare de hipertext, cum ar fi HTML. Acest limbaj ne permite să controlăm culorile, fonturile, dimensiunea şi alte aspecte ale aspectului unui site web sau aplicaţie, făcându-le mai uşor de întreţinut şi de actualizat.
CSS a fost creat în anii 1990 de către World Wide Web Consortium (W3C) pentru a oferi o modalitate standardizată de a stiliza documentele HTML. În prezent, majoritatea site-urilor web şi aplicaţiilor utilizează CSS pentru a le face mai atractive şi mai uşor de utilizat de către utilizatori.
Folosind CSS, puteţi crea un aspect consistent pentru întregul site web sau aplicaţie. De exemplu, dacă doriţi să schimbaţi culoarea de fundal a tuturor paginilor dintr-un site, puteţi face acest lucru rapid şi uşor folosind CSS, în loc să modificaţi fiecare pagină în parte. De asemenea, puteţi utiliza CSS pentru a crea animaţii şi tranziţii ale elementelor.
JavaScript
JavaScript este un limbaj de programare folosit pentru a adăuga interacțiune și dinamism site-urilor web. Acesta este un limbaj de scriptare, ceea ce înseamnă că codul JavaScript este scris într-un fișier separat și apoi încorporat într-un document HTML pentru a fi executat de către browser.
JavaScript este un limbaj de programare interpretat, ceea ce înseamnă că este executat direct de către browser fără a fi nevoie de compilare. Acest lucru permite dezvoltatorilor să scrie și să testeze rapid codul, dar poate avea dezavantajul unei performanțe mai scăzute comparativ cu limbajele compilate.
Alegerea editorului de text
Poti scrie codul HTML intr-un editor de text cum ar fi Notepad sau TextEdit. Incepe prin a deschide editorul de text si a scrie codul HTML in el. Apoi salveaza fisierul cu extensia „.html” (de exemplu, „pagina_mea.html”). Dupa ce ai salvat fisierul, il poti deschide folosind un browser web (cum ar fi Google Chrome, Firefox sau Safari) si vei putea vedea pagina web pe care ai creat-o. Totusi, ar fi foarte anost să folosești in 2022 un asemenea editor de text. La ora actuală, există alternative mult mai bine. Am scris un articol foarte bun despre cele mai bune editoare de text pentru programare: check it out.
Hello world în HTML
Începem cu cea mai simplă pagină, un soi de Hello World din HTML. Pagina va conține un titlu de document ce va fi vizibil în bara de titlu a browserului sau tab-ul paginii, un titlu în corpul paginii și un paragraf.
<!DOCTYPE html>
<html>
<head>
<title>Titlul paginii mele</title>
</head>
<body>
<h1>Aceasta este o pagina HTML</h1>
<p>Acesta este un paragraf.</p>
</body>
</html>
În limbajul HTML există o serie de cuvinte speciale, ce sunt incadrate între <>. Tag-urile pot fi de două tipuri:
- Taguri pereche: Un tag HTML pereche începe cu o etichetă de deschidere: numele etichetei inclus în parantezele unghiulare; De exemplu, o etichetă de deschidere a unui paragraf este scrisă ca
<p>. Conținutul urmează eticheta de deschidere, care se termină cu o etichetă de sfârșit: numele etichetei care începe cu o bară oblică; de exemplu, o etichetă de sfârșit de paragraf este scrisă ca</p>. - Taguri simple: O etichetă HTML se numește etichetă nepereche sau simplă atunci când eticheta are doar o etichetă de deschidere. Uneori sunt denumite și etichete autonome sau etichete singulare.
Codul HTML de mai sus definește o pagină web cu un titlu și un singur paragraf. Elementul <!DOCTYPE html> specifică că aceasta este o pagină HTML5, iar <html> și </html> marchează începutul și sfârșitul paginii HTML. Elementul <head> conține metadate despre pagină, cum ar fi titlul, în timp ce elementul <body> conține elementele care vor fi afișate pe pagina web. În acest caz, pagina conține un titlu de nivel 1 (<h1>) și un paragraf (<p>).
Comentariile in HTML
Comentariile HTML sunt secțiuni de cod HTML care sunt ignorate de browser atunci când sunt afișate paginile web. Ele sunt utilizate pentru a adăuga observații și instrucțiuni în codul sursă, pentru a ajuta la înțelegerea și întreținerea acestuia. În HTML, comentariile sunt scrise între două simboluri de exclamare și semnul de numărul semnului (<!-- și -->).
<!-- Aceasta este un comentariu HTML -->
<!-- Aceasta este o secțiune de cod HTML care va fi ignorată de browser -->Cele mai frecvent utilizate etichete HTML
<p>– folosită pentru a defini un paragraf<br>– folosită pentru a introduce o linie nouă<img>– folosită pentru a include o imagine într-o pagină web<a>– folosită pentru a crea un link către o altă pagină web sau o adresă de email<div>– folosită pentru a grupa elemente HTML într-un container<header>– folosită pentru a defini un container pentru elementele de antet (cum ar fi titlul și meniul de navigare) ale unei pagini web<nav>– folosită pentru a defini o secțiune care conține link-uri de navigare<section>– folosită pentru a defini o secțiune tematică a unei pagini web<footer>– folosită pentru a defini un container pentru elementele de subsol (cum ar fi informațiile de contact și link-urile de politici) ale unei pagini web
Acestea sunt doar câteva dintre etichetele HTML cele mai frecvent utilizate. Există multe alte etichete care pot fi utilizate în HTML pentru a formata și structura conținutul unei pagini web.
Exemplu de pagină web
O pagină care ar folosi aceste etichete ar putea arată ca în exemplul de mai jos:
<!DOCTYPE html>
<html>
<head>
<title>Titlul Paginii Mele</title>
</head>
<body>
<header>
<h1>Titlul Paginii Mele</h1>
<nav>
<ul>
<li><a href="#">Acasă</a></li>
<li><a href="#">Despre</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section>
<h2>Despre</h2>
<p>Aceasta este o pagină web de exemplu care demonstrează câteva dintre etichetele HTML cele mai frecvent utilizate.</p>
</section>
<footer>
<p>Copyright 2023</p>
</footer>
</body>
</html>
Exemplu de pagină cu Tailwind CSS și HTML5
Și în final, pentru a vă stârni curiozitatea, mai jos puteți vedea un mic exemplu de ce poți face cu HTML și CSS, folosind un framework CSS popular, Tailwind CSS, ce permite să specifici în mod declarativ stilurile unui element, prin compunerea de stiluri CSS fundamentale.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodeIT - Portalul de tutoriale web si PC</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="max-w-5xl mx-auto bg-gray-200 min-h-screen flex flex-col items-center justify-center">
<div class="bg-white p-10">
<header class="text-center">
<h1 class="text-5xl font-bold text-indigo-600">Code IT</h1>
<p class="text-xl font-light">Portalul de tutoriale web si PC</p>
</header>
<nav class="flex justify-center">
<ul class="flex">
<li class="px-2"><a href="#about" class="font-medium text-indigo-600 hover:text-indigo-800">Despre noi</a></li>
<li class="px-2"><a href="#services" class="font-medium text-indigo-600 hover:text-indigo-800">Servicii</a></li>
<li class="px-2"><a href="#contact" class="font-medium text-indigo-600 hover:text-indigo-800">Contact</a></li>
</ul>
</nav>
<main class="flex flex-col gap-10 my-10">
<section id="about">
<h2 class="text-3xl font-bold text-indigo-600">Despre noi</h2>
<p class="text-lg leading-loose">Welcome to our website! We are a company that provides high-quality services. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet aliquam libero, non feugiat nisi pharetra id.</p>
</section>
<section id="services">
<h2 class="text-3xl font-bold text-indigo-600">Servicii</h2>
<ul class="flex flex-col md:flex-row gap-5 mt-3 justify-center items-center">
<li class="w-full md:w-1/3 mb-6">
<div class="bg-white rounded-lg shadow-md border p-6">
<h3 class="text-lg font-medium mb-4">Service 1</h3>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel velit bibendum, sit amet commodo lectus commodo. </p>
<a class="text-indigo-600 font-medium" href="#">Learn More</a>
</div>
</li>
<li class="w-full md:w-1/3 mb-6">
<div class="bg-white rounded-lg shadow-md border p-6">
<h3 class="text-lg font-medium mb-4">Service 2</h3>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel velit bibendum, sit amet commodo lectus commodo. </p>
<a class="text-indigo-600 font-medium" href="#">Learn More</a>
</div>
</li>
<li class="w-full md:w-1/3 mb-6">
<div class="bg-white rounded-lg shadow-md border p-6">
<h3 class="text-lg font-medium mb-4">Service 3</h3>
<p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel velit bibendum, sit amet commodo lectus commodo. </p>
<a class="text-indigo-600 font-medium" href="#">Learn More</a>
</div>
</li>
</ul>
</section>
<section id="contact">
<h2 class="text-3xl font-bold text-indigo-600">Contact</h2>
<form action="#" method="post" class="text-left w-1/2">
<input class="w-full py-2 px-3 bg-white border border-gray-400 rounded-lg focus:outline-none focus:border-indigo-600" type="text" placeholder="Name"><br><br>
<input class="w-full py-2 px-3 bg-white border border-gray-400 rounded-lg focus:outline-none focus:border-indigo-600" type="email" placeholder="Email"><br><br>
<textarea class="w-full py-2 px-3 bg-white border border-gray-400 rounded-lg focus:outline-none focus:border-indigo-600" placeholder="Message"></textarea>
<input class="py-2 px-3 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 cursor-pointer" type="submit" value="Submit">
</form>
</section>
</main>
<footer class="text-center text-gray-600 py-3">
© 2022 CodeIT | Portalul de tutoriale web si PC
</footer>
</div>
</body>
</html>
În următoarea parte a tutorialului vom discuta despre formatarea textului, iar apoi despre linkuri și imagini.
Resurse web
- Codecademy: Codecademy oferă un curs gratuit de HTML și CSS, care vă va învăța elementele de bază ale acestor limbaje și cum să le utilizați pentru a crea paginile web.
- W3Schools: W3Schools oferă o gamă largă de tutoriale HTML, care vă vor arăta cum să creați diferite elemente HTML și cum să le stilizați cu CSS.
- MDN Web Docs: MDN Web Docs este un site de documentație gratuit pentru tehnologiile web, inclusiv HTML. Acesta oferă o referință detaliată a tuturor elementelor HTML și a atributelor lor.
- Khan Academy: Khan Academy oferă un curs complet de programare web, care include module de HTML și CSS. Acesta se adresează începătorilor și vă va oferi o introducere pas cu pas în aceste limbaje.
Foarte tare tutorialul!keep it up with the good work.