Members BeNy gL Posted April 4, 2020 Members Posted April 4, 2020 Salut, Astăzi o să încep o serie de tutoriale (documentație + exemple) care ne vor ajuta să devenim web developeri. Pentru inceput am să vă prezint un mic plan de introducere în HTML și CSS, cu modulele aferente: Modulul I: Introducere în limbajele HTML și CSS Crearea primei pagini HTML Tag-urile de bază ale paginii HTML: Paginile HTML nu se scriu la întâmplare, ci respectă o structură definită cu precizie. Trei tag-uri sunt obligatorii, <html>, <body> şi <head>. Tag-ul HTML se află la începutul documentului, în timp ce tag-ul HTML de final se află întotdeauna la sfârșitul documentului. Practic, acest lucru înseamnă că întregul conținut al documentului HTML complet se află în cadrul acestui tag. Tot ceea ce se găseşte în cadrul tag-ului (între începutul şi sfârşitul tag-ului html) reprezintă partea paginii HTML. Nu mai putem scrie nimic înainte sau după el, în afară de o excepţie, despre care vom vorbi într-una din lecţiile viitoare. De asemenea, acest element apare doar o singură dată pe pagină. Tag-ul head trebuie scris imediat după deschiderea tag-ului <html> menţionat mai devreme. În tag-ul head, se află elemente care nu sunt vizibile în mod direct pe pagină. De exemplu, în partea head inserăm meta tag-urile folosite de motoarele de căutare când indexăm paginile. De asemenea, aici plasăm şi linkuri către fișiere CSS externe și către alte fișiere etc. Fiecare tag in parte are un început și un sfârșit <html> ... </html> - Slash-ul ( / ) - reprezintă închidere tag-ului. Prima noastră pagină HTML Deoarece deja am asimilat câteva cunoștințe, haideţi să creăm prima noastră pagină HTML. CSS-ul îl lăsăm pentru mai târziu. După ce aţi pornit editorul de text (NotPad++), de preferat un editor de text special (eu folosesc Atom) introduceţi următorul cod: 1 2 3 4 5 6 7 8 9 <html> <head> <title>My first HTML page</title> </head> <body> <h1>Hello!</h1> <p>I am HTML document.</p> </body> </html> Doctype - Document Type Declaration Fiecare document trebuie să posede o declaraţie (în care se găsesc datele despre document şi caracteristicile limbajului) Declaraţia se numeşte Document Type Declaration şi se găseşte la începutul fiecărei paginii HTML în „tag”-ul DOCTYPE. Motivul pentru care am introdus cuvântul tag între ghilimele este că acest DOCTYPE, de fapt, nu este un tag HTML adevărat, ci este o instrucţiune dată browser-ului, pentru a recunoaște ce tip de fișier este. <!DOCTYPE html> Meta pentru utf8 Un detaliu foarte important, care, deseori, se poate anticipa, este setarea lui encoding, respectiv inserarea lui meta tag, care va determina modul în care browser-ul trebuie să citească pagina noastră şi cum să afişeze caracterele/literele specifice unei limbi. Se recomandă ca encoding-ul să fie setat întotdeauna la utf-8. În caz contrar, caracterele specifice limbii române/diacriticele (ă, î, ş, ţ, â şi altele) s-ar fi pierdut în totalitate. De aceea, în partea <head> inserăm întotdeauna: <meta charset="utf-8"> Structura paginilor HTML Culoarea roşie indică existența codului HTML, în timp ce textul de pe pagină este negru. Concluzia la care probabil ați ajuns şi singuri este că în documentele HTML există părţi vizibile utilizatorului și părţi care nu îi sunt vizibile. Acele părţi care nu sunt vizibile determină și fac diferența între elementele paginii. Să analizăm mai bine exemplul. Există câteva elemente. Fiecare are propriul tag de început şi de sfârşit: Observăm următoarele elemente: <html> … </html> La început şi la sfârşit este un tag <html>, respectiv tag-ul de început şi cel de final. Ele înconjoară toate elementele şi indică faptul că tot ce se află între ele este cod html. <body> ... </body> Imediat după tag-ul <html> de început, respectiv după cel de final, se află tag-urile <body>. Tot ce se află între ele, va fi afișat în fereastra browser-ului web. <h1> ... </h1> <p>...</p> <h2>...</h2> Acum, vom explica ce este un tag HTML şi cum se inserează acesta. Reguli de bază pentru scrierea limbajului HTML Când scriem tag-uri, trebuie să respectăm două reguli de bază: 1. Prima regulă: Un tag (element) poate cuprinde un număr nelimitat de alte tag-uri. Să vedem un exemplu. Exemplu corect: <p>HTML este acronimul de la <strong> HyperText Markup Language </strong></p> Exemplu incorect: <p>HTML este acronimul de la <strong> HyperText Markup Language </p></strong> 2. A doua regulă: Fiecare tag de început trebuie să aibă şi un tag de final. Respectiv, dacă vom începe un anumit element (tag), trebuie să-l şi încheiem undeva. Tag-urile cu autoînchidere Tag-urile cu autoînchidere sunt cele care încep și se termină în același timp. De exemplu: semnul pentru întreruperea/separarea unui rând în cadrul unui paragraf este <br> (br de la comanda break). Acest tag nu are conţinut și, dacă am respecta regulile de mai sus, ar trebui să-l scriem ca <br> </ br>. Deoarece acest lucru nu este necesar (şi incorect pe deasupra), tag-urile vor fi scrise doar ca <br> sau <br />. <p>HTML este acronimul de la <br>HyperText Markup Language </p> Atributele tag-urilor HTML Atributele sunt formate din două părți: din numele atributului și din valoarea atributului. Acestea se scriu pe tag-ul de început al elementului și sunt separate de caracterul tipului de tag printr-un spațiu. Numele atributului se scrie cu minuscule, apoi se pune semnul egal, după care, între ghilimele se inserează valoarea atributului. Spațiile sunt interzise în interiorul structurii atributului. Iată un exemplu - paragrafului i-a fost adăugată o clasă folosind numele atributului class. <p class="xyz">HTML este acronimul de la HyperText Markup Language</p> Aceasta a fost prima lectie de inceput, vor mai urma si altele, Have a nice day ! 2
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now