Jump to content
×
×
  • Create New...

[Web Development] Modulul II - Tag-urile textuale


BeNy gL
 Share

Recommended Posts

Salut,

De acestă dată o să vă prezint cel de-al 2-lea modul din micul plan, și anume, "Tag-urile textuale" !

Vom incepe cu Textul

 

Titlurile (headings)
 

   Exemplu de titluri în limbajul HTML:

<h1>Lorem ipsum dolor sit amet</h1>

<h2>Lorem ipsum dolor sit amet</h2>

<h3>Lorem ipsum dolor sit amet</h3>

<h4>Lorem ipsum dolor sit amet</h4>

<h5>Lorem ipsum dolor sit amet</h5>

<h6>Lorem ipsum dolor sit amet</h6>

 

  Si afişarea acestora în browser:

 CGC2ihH.jpg

 


Paragrafele (Paragraphs)

   Paragrafele reprezintă ceea ce, de obicei, numim text obişnuit. Exemplu de paragraf în limbajul HTML:

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad

minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p>

 

Bold

   Efectul bold (îngroșarea caracterelor), putem posta una dintre aceste două variante, mai exact tag-ul <b> sau <strong> și vom obține același efect.

 

Italic

   Putem folosi fie tag-urile <i>, fie tag-urile <em>. Em este prescurtarea de la cuvântul englezesc Emphasize, care înseamnă a sublinia, a accentua. 

 

Sup şi sub

   Uneori, în texte avem nevoie de caractere pe care trebuie să le poziționăm deasupra, respectiv sub rândul principal/linia de bază (base line), în special în formule. Pentru astfel de detalii, folosim tag-urile <sup>, respectiv <sub>Sup este prescurtarea de la superscript, iar sub de la subscript.

3aWpH8B.jpg


<br> – break

   Am menționat deja că la sfârșitul și începutul unui paragraf nou se adaugă un rând nou. Însă, uneori vrem să întrerupem rândul în mijlocul paragrafului, fără să creăm un paragraf nou. Putem face acest lucru prin simpla adăugare a unui tag, care are marcajul <br>.

 

<hr> - horizontal rule

   Hr este un tag care funcționează similar cu tag-ul <br> sus-menționat, în sensul că se scrie doar o singură dată ca <hr> în varianta limbajului HTML, însă are o funcție cu totul diferită. Acest tag adaugă o linie orizontală în textHr este prescurtarea de la englezescul horizontal rule (linie orizontală).

 

Caracterele speciale

   Pentru afişarea caracterelor speciale, folosim instrucţiuni HTML corespunzătoare. Acestea încep întotdeauna cu semnul & şi se termină cu semnul ; 

<p>CopyRight &copy Beny</p>   -   CopyRight ©️ Beny

 

Listele

 

 Tipurile de liste - Există trei tipuri de liste:

  1. Ordered (liste ordonate) sunt liste ale căror elemente sunt marcate cu un tip de element ordonat. De obicei, numerele, cifrele romane, literele alfabetului etc. 
  2. Unordered (liste neordonate) sunt liste ale căror elemente sunt marcate cu diferite elemente - pătrate, cercuri, liniuțe etc. Spre deosebire de listele ordonate, aici ordinea elementelor nu este importantă.
  3. Definition (liste de definiţie) sunt liste ale căror elemente sunt alcătuite din două părţi, text şi definiţie. Sunt utile pentru a crea întrebări şi răspunsuri, deoarece sunt întotdeauna formate din perechi.

 

Listele ordonate

   Pentru a indica listele ordonate, folosim tag-ul <ol>. Ca și în cazul tag-urilor menţionate mai devreme, scriem un tag <ol> de început şi un tag </ol> de final, după care, în interiorul acestuia, scriem noi tag-uri <li>, fiecare reprezentând un nou element al listei. De exemplu:

<ol>

   <li>Acasa</li>

   <li>Servicii</li>

   <li>Despre noi</li>

   <li>Contact</li>

</ol>

Listele neordonate

   Listele neordonate au o structură foarte asemănătoare cu cea a listelor ordonate menţionate mai devreme. Diferenţa constă în tag-ul folosit. În cazul listelor neordonate, tag-ul folosit este <ul> Având în vedere acest lucru, priviți următorul exemplu:

<ul>

  <li> Acasa </li>

  <li> Servicii </li>

  <li> Despre noi</li>

  <li> Contact </li>

</ul>

   Mai există și așa-numitele liste incluse (embedded), care, spre deosebire de exemplele anterioare, au mai multe niveluri de elemente. Iată un exemplu: 

<ul>

  <li>Audi

    <ul>

      <li>Audi rs5</li>

      <li>Audi rs6</li>

    </ul>

  </li>

  <li>Bmw</li>

  <li>Ford</li>

  <li>Volkswagen</li>

</ul>

  Iată cum arată acest cod în browser:

kTZXvIo.png

 

Atributul type pentru listele <ul> şi <ol>

    Simbolul afișat în fața elementelor care alcătuiesc lista poate fi definit cu ajutorul regulilor CSS, după cum vom vedea mai târziu în acest curs, sau prin atributul HTML type aplicat pe listă în cadrul codului HTML. Se recomandă exclusiv folosirea regulilor CSS pentru stilizare, atât pentru stilizarea listelor, cât şi pentru stilizarea altor elemente.

   Atributul type pentru liste neordonate (ul) poate avea următoarele valori:

  • circle - cerc;
  • disc - disc;
  • square - pătrat.

   Pentru listele ordonate (ol), valorile pot fi:

  • A - majuscule;
  • a - minuscule;
  • I - cifre romane majuscule;
  • i - cifre romane minuscule.

Listele de definiţie

   Listele de definiție se utilizează mai rar, dar pot fi foarte utile. Cea mai frecventă utilizare este pentru paginile de întrebări frecvente (FAQ - Frequently Asked Questions), deoarece acestea sunt aproape întotdeauna sub formă de întrebări și răspunsuri, respectiv în perechi.

   Rețineți că elementele sunt alcătuite întodeauna din două părți, reprezentate de tag-urile <dt> și <dd>, iar lista în sine este marcată cu tag-ul <dl> (definition list).

Iată un exemplu în HTML:

<dl>

    <dt>HTML</dt>

    <dd>Hyper Text Markup Language</dd>

    <dt>CSS</dt>

    <dd>Cascading Style Sheets</dd>

    <dt>JS</dt>

    <dd>JavaScript</dd>

    <dt>PHP</dt>

    <dd>Hypertext Preprocesor</dd>

</dl>

Iată cum arată acest cod în browser:

qjVc9py.png

 

Aceasta a doua lecție, vor mai urma si altele, Have a nice day !

  • Like 2

9LTRztA.gif

76561198121939610.png

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Recently Browsing   0 members

    No registered users viewing this page.