C2 HTML Basics Part2

Centrul de Instruire pentru
Tehnologia Informației și
Apărare Cibernetică CURS 2-Bazele HTML
Part 2: Tables, Lists, Classes
Întocmit:
Slt. ROMANIUC Alexandru-Gabriel
romaniuc_alexandrugabriel@yahoo.com
1. HTML Tables
• Tabelele în HTML permit aranjarea datelor în linii și coloane.
• Def: Pentru definiarea unui tabel, se folosește tag-ul <table>

și </table>:
• <thead> reprezină header-ul tabelului și conține
elementele <th> și <td>.
• <tbody> reprezintă o colecție de rânduri de tabel în care
se inserează datele.
• <tfoot> reprezintă footer-ul tabelului.
• <tr> și </tr>= prin acest tag, definim fiecare rând al
tabelului
• <th> și </th> = prin acest tag, definim numele fiecărui
antet al tabelului
• <td> și </td> = datele în tabel se introduc prin
intermediul acestui tag.
• Exemplu 1 <table style="width:100%">
de tabel <tr>
în HTML: <th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr> • Rulare cod:
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
• Observație: Datele introduse în tabel prin intermediul tag-ului <td>
și </td> pot fi de orice tip: text, imagini, liste, alte tabele etc.
• Exemplu 2 <table>
columns
de tabel <colgroup>
în HTML: <col style="width:100px" /><col />
</colgroup> th
header
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
footer
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
Last comes the body (data)
<tr><td>Cell 1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>
</tbody>
</table>
• Rulare Exemplu 2: By default, header text
<table> este boldat și centrat
<colgroup>
<col style="width:200px" /><col />
</colgroup>
<thead>
<tr><th>Column 1</th><th>Column 2</th></tr>
</thead>
<tfoot>
<tr><td>Footer 1</td><td>Footer 2</td></tr>
</tfoot>
<tbody>
<tr><td>Cell Deși subsolul/ footer
1.1</td><td>Cell 1.2</td></tr>
<tr><td>Cell este înaintea datelor
2.1</td><td>Cell 2.2</td></tr>
</tbody> din cod, acesta este
</table> afișat ultimul
Lucrul cu tabele-Alte operațiuni
a) Adăugare chenar tabel: Folosind sintaxa de mai jos, se poate
adăuga un chenar pentru tabel, tot ce trebuie să faceți este să o
introduceți în codul sursă.
• Syntaxes: table, th, td { table, th, td {

border: 1px solid black; border: 1px solid black;
} border-collapse: collapse;
}
Rulare:
b) Alinierea în tabel: Folosind sintaxa de mai jos, se poate alinia
textul din tabel, aliniere stanga, dreapta, centrat.
• Syntax: th {
text-align: right;
}
Rulare:
c) Cell Spacing and Padding: Tabelele au două atribute importante,
cellspacing și cellpadding
• cellspacing • cellpadding
cell cell
cell cell
cell cell
cell cell
• Definește spațiul
liber dintre celule • Definește spațiul liber
in jurul conținutului
dintr-o celulă
• Exemplu Cell Spacing and Padding
<html> • Rulare cod:

<head><title>Table Cells</title></head>
<body>
<table cellspacing="15" cellpadding="0">
<tr><td>First</td>
<td>Second</td></tr>
</table>
<br/>
<table cellspacing="0" cellpadding="10">
<tr><td>First</td><td>Second</td></tr>
</table>
</body>
</html>
d) Column and Row Span: Sunt alte două atribute foarte importante,
Column Span și Row Span
• colspan • rowspan
colspan="1" colspan="1" rowspan="2" rowspan="1"
cell[1,1] cell[1,2] cell[1,2]

cell[1,1]
cell[2,1] cell[2,1]
colspan="2" rowspan="1"
• Definește câte coloane • Definește câte linii

ocupă celula ocupă celula
• Exemplu Column Span - Row Span
<table cellspacing="0">
<tr class="1"><td>Cell[1,1]</td>
<td colspan="2">Cell[2,1]</td></tr>
<tr class=“2"><td>Cell[1,2]</td>
<td rowspan="2">Cell[2,2]</td>
<td>Cell[3,2]</td></tr>
<tr class=“3"><td>Cell[1,3]</td>
<td>Cell[2,3]</td></tr>
</table>
Cell[1,1] Cell[2,1]
• Rulare cod: Cell[1,2] Cell[3,2]

Cell[2,2]
Cell[1,3] Cell[2,3]
2. HTML Lists
• Def: Pentru definiarea unei liste neordonate-unordered list, se
folosește tag-ul <ul> și </ul>:
• <li> și </li>= prin acest tag, introducem date în listă
• Syntax: <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
• Def: Pentru definiarea unei liste ordonate-ordered list, se

folosește tag-ul <ol> și </ol>:
• Syntax: <ol type=“1”>

<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Atributul type:
Atributul type din cod, poate avea valorile 1, A, a, I, or i
1. Apple
2. Orange A. Apple i. Apple
3. Grapefruit B. Orange a. Apple ii. Orange
I. Apple
C. Grapefruit b. Orange II. Orange
iii. Grapefruit
c. Grapefruit
III. Grapefruit
Atributul type din cod, poate avea valorile disc, circle or square
• Apple o Apple  Apple

• Orange o Orange  Orange
• Pear o Pear  Pear
2. HTML Forms
• Def: Introducerea datelor de către un utilizator într-o pagină
web. Formularele, sunt instrumente prin intermediul cărora putem
obține informații introduse pe site-ul Web de către un utilizator.
• Syntax: <form>... </form>

Atributul „method” arată cum ar
• Exemplu: trebui trimise datele formularului
- prin cerere GET sau POST
<form name="myForm" method="post"

action="path/to/some-script.php">
...
</form>
Atributul „action” arată unde trebuie
trimise datele introduse în formular
2.1 Câmpurile formularelor:
a) Single-line text input fields:
• Exemplu:
<input type="text" name="FirstName" value="This is a text field" />
b) Multi-line textarea input fields:
• Exemplu:
<textarea name="Comments">This is a multi-line text </textarea>
c) Câmpuri hidden care conțin date ce nu sunt vizibile pentru user.
• Exemplu:
<input type="hidden" name="Account" value="This is a hidden text field" />

2.2 Fieldsets
• Fieldsets (Seturi de câmpuri) sunt folosite pentru a include un

grup de câmpuri dintr-un formular.
• Exemplu: <form method="post" action="form.aspx">

<fieldset>
<legend>Client Details</legend>
<input type="text" id="Name" />
<input type="text" id="Phone" />
</fieldset>
<fieldset>
<legend>Order Details</legend>
<input type="text" id="Quantity" />
<textarea cols="40" rows="10"
id="Remarks"></textarea>
</fieldset>
</form>
2.3 Instrumente de introducere a datelor într-un formular
a) Checkbox
• Exemplu:
<input type="checkbox" name="fruit" value="apple" />
b) Radio buttons:
• Exemplu:
<input type="radio" name="title" value="Mr." />
c) Grup de butoane radio-doar unu este permis sa fie selectat
• Exemplu:
<input type="radio" name="city" value="Lom" />
<input type="radio" name="city" value="Ruse" />
d) Dropdown menu
• Exemplu: <select name="gender">

<option value="Value 1"
selected="selected">Male</option>
<option value="Value 2">Female</option>
<option value="Value 3">Other</option>
</select>
e) Submit button
• Exemplu: <input type="submit" name="submitBtn"

value="Apply Now" />
f) Reset button
• Exemplu:
<input type="reset" name="resetBtn" value="Reset the form" />

g) Password input = face ca textul introdus să fie cu ****
• Exemplu: <input type="password" name="pass" />
h) Option menu = oferă un meniu, o listă, din care poți

selecta mai mulți itemi deodată
• Exemplu: <select name="products" multiple="multiple">

<option value="Value 1"
selected="selected">keyboard</option>
<option value="Value 2">mouse</option>
<option value="Value 3">speakers</option>
</select>
i) Upload fișiere = buton ce permite încărcarea de fișiere
• Exemplu: <form enctype="multipart/form-data">

<input type="file" name="photo" />
</form>
• Exemplu de formular complet:
• form.html <form name=“formularulMeu“ method="post" action="apply-now.php">

<input name="subject" type="hidden" value="Class" />
<fieldset><legend>Academic information</legend>
<label for="degree">Degree</label>
<select name="degree" id="degree">
<option value="BA">Bachelor of Art</option>
<option value="BS">Bachelor of Science</option>
<option value="MBA" selected="selected">Master of
Business Administration</option>
</select>
<br />
<label for="studentid">Student ID</label>
<input type="password" name="studentid" />
</fieldset>
<fieldset><legend>Personal Details</legend>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" />
<br />
<label for="lname">Last Name</label>
<input type="text" name="lname" id="lname" />
• form.html -> Continuare cod
<br />
Gender:
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label>
<br />
<label for="email">Email</label>
<input type="text" name="email" id="email" />
</fieldset>
<p>
<textarea name="terms" cols="30" rows="4"
readonly="readonly">TERMS AND CONDITIONS...</textarea>
</p>
<p>
<input type="submit" name="submit" value="Send Form" />
<input type="reset" value="Clear Form" />
</p>
</form>
3. HTML Classes
• Def: HTML class este un atribut foarte important în HTML, prin
intermediul lui se specifică o anumită clasă pentru un element
din HTML. Atributul class HTML este folosit pentru a defini
stiluri egale pentru elemente cu același nume de “class”.
• Deci, toate elementele HTML cu același atribut de class vor
obține același stil.
• Exemplu: In următorul exemplu, avem 3 elemente <div> cu

atributul class care are valoarea “city”. Toate cele 3 elemente
vor fi stilizate în mod egal în concordanță cu stilul definit în
.city
• Codul: • În .city este definit stilul, modul de
• <!DOCTYPE html> afișare.
• <html>
• <head>
• <style>
• .city {
• background-color: tomato;
• color: white;
• border: 2px solid black;
• margin: 20px;
• padding: 20px;
• }
• </style>
• </head>
• <body>
• Rulare cod:
• <div class="city">
• <h2>London</h2>
• <p>London is the capital of England.</p>
• </div>
• <h2>Paris</h2>
• <p>Paris is the capital of France.</p>
• </div>
• <h2>Tokyo</h2>
• <p>Tokyo is the capital of Japan.</p> • După care se definesc cele 3 clase, în care
• </div>
putem introduce paragrafe, heading-uri etc.
• </body>
• </html>
3.1 Multiple Class:
• Elementele HTML pot aparține mai multor clase. Pentru a defini mai multe
clase, separați numele claselor cu un spațiu, de ex. <div class = "city
main">. Elementul va fi stilizat în conformitate cu toate clasele
specificate.
• Exemplu: • <h2 class="city main">London</h2>

• <h2 class="city">Paris</h2>
• <h2 class="city">Tokyo</h2>
• Rulare cod:
4. HTML Special Characters:
Symbol Name HTML Entity Symbol

Copyright Sign © ©
Registered Trademark Sign ® ®
Trademark Sign ™ ™
Less Than < <
Greater Than > >
Ampersand & &
Non-breaking Space
Em Dash — —
Quotation Mark " "
Euro € €
British Pound £ £
Japanese Yen ¥ ¥
5. Folosirea <DIV> și <SPAN> . Elementele Block și Inline
Elementele Block și Inline
• Elementele de tip Block adaugă o întrerupere de linie înainte și

după ele
• <div>, <table>, <hr>, headings, lists, <p> sunt elemente de
tip block
• Elementele de tip Inline nu întrerup textul înainte și după ele

• <span>, <a> sunt elemente Inline
Exemplu:
• <div style="font-size:24px; color:red">DIV example</div>

• <p>This one is <span style="color:red; font-weight:bold">only a test</span>.</p>
• Rulare cod: • <div> = creează o
diviziune logică în
pagină
Exemplu:
• <p>My mother has <span style="color:blue">blue</span> eyes.</p>
• Rulare cod:

C2 HTML Basics Part2

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

C2 HTML Basics Part2

Încărcat de

Drepturi de autor:

Formate disponibile

Centrul de Instruire pentru

• Def: Pentru definiarea unui tabel, se folosește tag-ul <table>

• Syntaxes: table, th, td { table, th, td {

<html> • Rulare cod:

colspan="1" colspan="1" rowspan="2" rowspan="1"

cell[1,1] cell[1,2] cell[1,2]

• Definește câte coloane • Definește câte linii

• Rulare cod: Cell[1,2] Cell[3,2]

• Def: Pentru definiarea unei liste ordonate-ordered list, se

• Syntax: <ol type=“1”>

• Apple o Apple  Apple

• Syntax: <form>... </form>

<form name="myForm" method="post"

b) Multi-line textarea input fields:

c) Câmpuri hidden care conțin date ce nu sunt vizibile pentru user.

<input type="hidden" name="Account" value="This is a hidden text field" />

• Fieldsets (Seturi de câmpuri) sunt folosite pentru a include un

• Exemplu: <form method="post" action="form.aspx">

c) Grup de butoane radio-doar unu este permis sa fie selectat

• Exemplu: <select name="gender">

• Exemplu: <input type="submit" name="submitBtn"

<input type="reset" name="resetBtn" value="Reset the form" />

• Exemplu: <input type="password" name="pass" />

h) Option menu = oferă un meniu, o listă, din care poți

• Exemplu: <select name="products" multiple="multiple">

i) Upload fișiere = buton ce permite încărcarea de fișiere

• Exemplu: <form enctype="multipart/form-data">

• form.html <form name=“formularulMeu“ method="post" action="apply-now.php">

• Exemplu: In următorul exemplu, avem 3 elemente <div> cu

• Exemplu: • <h2 class="city main">London</h2>

Symbol Name HTML Entity Symbol

Elementele Block și Inline

• Elementele de tip Block adaugă o întrerupere de linie înainte și

• Elementele de tip Inline nu întrerup textul înainte și după ele

• <div style="font-size:24px; color:red">DIV example</div>

S-ar putea să vă placă și