Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline)
- 1. Limbajul HTML Pagini Web Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline)
- 2. Chestionar 1. Care este principalul tip de document specific serviciului WWW ? a) Document HTML(.html) c) Document Microsoft Office Word(.docx) d) Adobe Portable Document Format (.pdf) c) Text Document(.txt) Răspuns: a) Toate celelalte fi iere pot exista pe Web, se pot realiza legături cătreș ele, însă documentul HTML este baza pentru tot ceea ce există pe Web.
- 3. Chestionar 2. Care este semnifica iaț HTML? HTML este acronimul corespunzător HyperText Markup Language, limbaj de marcare utilizat de serviciul World Wide Web(WWW, Web) pentru crearea hipertext-elor (a paginilor web) ce pot fi afi ate într-un browser sau program de navigare.ș HTML este înzestrat cu: - con inut text-ț Ceea ce vezi? - marcare- Cum să arate? - imagini , elemente multimedia(video, audio) - legături către alte hipertexte sau resurse web- hiperlegături
- 4. Chestionar 3.Care dintre aceste browsere este cel mai bun? a) Microsoft Internet Explorer b) Mozilla Firefox c) Google Chrome d) Apple Safari e) Opera Consultarea informa iilor organizate sub formă de hipertexte seț realizează cu ajutorul unui program special denumit browser. Nici unul nu este cel mai bun. Toate aceste browsere sunt diferite - nici unul nu este perfect. Dacă ai o preferin ă pentru unul dintre acesteț browsere nu înseamnă că i ceilal i utilizatori sunt de acord. Po i săș ț ț încerci ce browser vrei tu.
- 5. Chestionar 4. Prin ce se caracterizează o etichetă HTML (marcator sau tag)? Eticheta reprezintă sintaxa folosită pentru a delimita începutul i sfâr itul unui element HTML,ș ș <tag>…</tag>. Atributele unui element reprezintă perechi de forma nume=valoare scrise în eticheta de început a unui element, imediat după numele acestuia.
- 6. Chestionar 5. Care este structura unui document HTML? Un document HTML este delimitat de perechea de etichete <html>…</html> i este constituit dinș : antetul documentului delimitat de perechea de etichete <head>…</head> unde sunt descrise informa ii despre paginaț respectivă ; corpul documentului delimitat de etichetele <body>…</body> în care se găse te con inutul efectiv al paginii web.ș ț
- 7. Chestionar 6. Care sunt etichetele HTML specifice formatării textului la nivel de bloc (block-level)? - pentru formatarea paragrafelor <p>… </p> - pentru utilizarea paragrafelor titlu <h1>…</h1>,…,<h6>… </h6> - pentru gruparea elementelor la nivel de bloc <div>…</div>
- 8. Chestionar 7. Ce afi ează următoarea secven ă?ș ț <p>Esenţa matematicii este </p> libertatea ei. Esenţa matematicii este libertatea ei.
- 9. Chestionar 7. Ce afi ează următoarea secven ă?ș ț <p>Esenţa matematicii este </p> libertatea ei. Esenţa matematicii este libertatea ei.
- 10. Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline) • Elementele de bloc (block-level)- titlurile, paragrafele, listele sau tabelele-sunt structuri mari care con in alte blocuri, elemente de linieț sau de text. • Elementele de linie sau elementele de text (text-level sau inline)- hiperlegăturile, citatele sau imaginile – sunt structuri mici ce reprezintă sau descriu secven e de text sau de date.ț
- 11. Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline) Trecere la linie nouă-Inline vs. Block • Caracterele albe(whitespaces) sunt practic ignorate de browser-ul care afi ează o pagină Web, de aceea avem nevoie de etichete specialeș pentru a trece la o linie nouă. • Cea mai folosită astfel de etichetă este <br>(break)-(marcator inline) care nu face altceva decât să informeze browser-ul că textul care urmează va fi afi at pe o linie nouă. Etichetaș <br> va genera un marcaj de sfâr it de linie (caracterele ASCIIș Carriage Return / Line Feed). Tag-ul <br> face parte din categoria elemente goale (empty tags). Aceste elemente nu necesită tag de sfâr itș (closing-tag). • Eticheta <p>(marcator de tip block) are ca efect tratarea textului care urmează după ea ca un paragraf nou. • Singura diferen ă reală dintreț <p> iș <br> este că <p> afi eazș ă o linie vidă, menită să separe paragrafele.
- 12. • Exemplu: Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline) Trecere la linie nouă-Inline vs. Block Cod HTML Efect Ce nu poţi explica simplu <br> nu înţelegi suficient. Ce nu poţi explica simplu nu înţelegi suficient. Ce nu poţi explica simplu <br> nu înţelegi <br> suficient. Ce nu poţi explica simplu nu înţelegi suficient. Accesează pagina web http://www.w3schools.com -sec iuneaț HTML Paragraphs- HTML Line Breaks Urmăre te exemplul afi at în fereastraș ș Try it yourself>> Editează un exemplu asemănător. Accesează Edit and Click Me>> Urmăre te rezultatul.ș
- 13. Exerci iul 1ț Scrie i secven a de cod HTML necesară afi ării următoruluiț ț ș text pe 3 linii, folosind eticheta <p>. Cel mai uşor tip de relaţie este cel cu zeci de mii de oameni. Cel mai greu este cu unul singur. Joan Beaz Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline) Trecere la linie nouă-Inline vs. Block Exerci iul 2ț Scrie i secven a de cod HTML necesară afi ării aceluia i text deț ț ș ș mai sus pe 3 linii, folosind eticheta <br>.
- 14. Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline) Etichete HTML de formatare a unui text Pentru eviden ierea textului se folosesc efectele de formatareț specifice editoarelor de text. Accesează pagina web http://www.w3schools.com -sec iuneaț HTML Formating - HTML Text Formating Tag. Selectează etichetele învă ate.ț Urmăre te exemplele afi ate în fereastraș ș Try it yourself>> Editează un exemplu asemănător.Accesează Edit and Click Me>>. Urmăre te rezultatul.ș
- 16. Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline) Etichete HTML pentru afi area coduluiș Aceste elemente sunt folositoare pentru documentarea dezvoltării codului sursă i se referă la:ș Tag Descriere <code>…</code> Define teș codul sursă <samp>…<samp> Define te rezultatulș execu iei coduluiț <tt>…</tt> -a fost ters din HTML 5ș Define te text de tipș “telex” <var>…</var> Define teș o variabilă <kbd>…</kbd> Define te un text introdus de laș tastatură Accesează pagina web http://www.w3schools.com -sec iuneaț HTML Formating - HTML "Computer Output" Tags Selectează etichetele învă ate.ț Urmăre te exemplele afi ate în fereastraș ș Try it yourself>> Editează un exemplu asemănător. Accesează Edit and Click Me>> Urmăre te rezultatul.ș
- 17. • Elementele HTML se pot imbrica. Imbricarea elementelor reprezintă încadrarea unor marcatori în interiorul altor marcatori, fără să afecteze integritatea HTML. Codul HTML este considerat valid dacă ace tiș marcatori sunt închi i în ordinea inversă în care au fost deschi iș ș . Exemplul 1: Tocmai învă săț <b> scriu un cod </b> HTML Tocmai învă săț scriu un cod HTML Exemplul 2: Tocmai învă săț <em> scriu </em> un <b> cod </b> HTML Tocmai învăț scriu un cod HTML Exemplul 3: Tocmai învă săț <em> scriu un <b> cod </b> HTML</em> Tocmai învă săț scriu un cod HTML Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline) Imbricarea elementelor
- 18. Elemente de formatare la nivel de linie sau la nivel de text (text-level sau inline) Pagina Web
- 19. Vă mul umesc pentru aten ie!ț ț Întrebări?