Manual HTML
32
Cătălin Tudose – Scurtă prezentare html – elemente de bază 1 LIMBAJUL HTML
Transcript of Manual HTML
Cătălin Tudose – Scurtă prezentare html – elemente de bază
1
LIMBAJUL HTML
Cătălin Tudose – Scurtă prezentare html – elemente de bază
2
1. COMPONENTELE ELEMENTARE ALE UNUI DOCUMENT HTML <html> <head> <title> PAS 01 - Pagina elementara </title> </head> <body> Hello world ! </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
3
22. GGEENNEERRAARREEAA UUNNUUII SSAALLTT LLAA LLIINNIIEE NNOOUUĂĂ ÎÎNN HHTTMMLL <html> <head> <title> PAS 02 - Trecerea la linie noua </title> </head> <body> In HTML putem crea o noua linie folosind BR sau P (nu ENTER)<br> Linie terminata cu BR (break)<br> Linie terminata cu BR<br> Linie terminata cu BR<br> Linie terminata cu P (Paragraph)<p> Linie terminata cu P<p> Linie terminata cu P<p> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
4
33. FFOOLLOOSSIIRREEAA MMĂĂRRIIMMIILLOORR SSTTAANNDDAARRDD DDEE CCAARRAACCTTEERREE <html> <head> <title> PAS 03 - Marimi standard ale caracterelor </title> </head> <body> Aceste marimi depind de setarile din meniul View -> Text size... <h1> Titlu marimea H1 </h1> <h2> Titlu marimea H2 </h2> <h3> Titlu marimea H3 </h3> <h4> Titlu marimea H4 </h4> <h5> Titlu marimea H5 </h5> <h6> Titlu marimea H6 </h6> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
5
44. DDIIMMEENNSSIIUUNNEEAA IIMMPPLLIICCIITTĂĂ AA FFOONNTTUULLUUII ÎÎNN BBRROOWWSSEERR
<html> <head> <title> curs 04 - Folosirea marimii implicite a fontului </title> </head> <body> Marimea fontului depinde de setarile Browser-ului </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
6
55. SSEELLEECCTTAARREEAA TTIIPPUULLUUII DDEE FFOONNTT <html> <head> <title> PAS 05 - Alegerea fontului </title> </head> <body> <font face = "times new roman"> Aici folosim Times new roman </font><br> <font face = "arial"> Aici folosim Arial </font><br> <font face = "tahoma"> Aici folosim Tahoma</font> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
7
66. SSEELLEECCTTAARREEAA MMĂĂRRIIMMIIII FFOONNTTUULLUUII <html> <head> <title> PAS 06 - Alegerea marimii fontului </title> </head> <body> <font face = "times new roman" size = "4"> font marimea 4 </font><br> <font face = "times new roman" size = "3"> font marimea 3 </font><br> <font face = "times new roman" size = "2"> font marimea 2 </font><br> <font face = "times new roman" size = "1"> font marimea 1 </font><br> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
8
77. SSEELLEECCTTAARREEAA CCUULLOORRIIII FFOONNTTUULLUUII <html> <head> <title> PAS 07 - Alegerea culorii fontului </title> </head> <body> <font face = "times new roman" size = "4" color = "blue"> font marimea 4 </font><br> <font face = "times new roman" size = "3" color = "red"> font marimea 3 </font><br> <font face = "times new roman" size = "2" color = "lime"> font marimea 2 </font><br> <font face = "times new roman" size = "1" color = "light blue"> font marimea 1 </font><br> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
9
88. EETTIICCHHEETTEE AAJJUUTTĂĂTTOOAARREE ((TTOOOOLLTTIIPPSS)) <html> <head> <title> PAS 08 - Etichete ajutatoare (tooltips) </title> </head> <body> <font face = "times new roman" size = "3" color = "blue" title = "Font albastru"> Aduceti mouse-ul deasupa acestui text ! </font> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
10
99. SSTTIILLUURRII DDEE AAFFIIŞŞAARREE AA FFOONNTTUULLUUII <html> <head> <title> PAS 09 - Formatari Bold, Italic, Underlined </title> </head> <body> <font face = "times new roman" size = "3"> Scris <b>Bold (ingrosat)</b>,<i> Italic (inclinat)</i>,<u> Underlined (subliniat),</u><br> <b><i> Bold si Italic </i></b>,<i><u> Italic si Underlined,<b> Bold, Italic si Underlined </b></u></i>. </font> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
11
1100. FFOORRMMAATTĂĂRRII SSTTRRIIKKEE <html> <head> <title> PAS 10 - Formatari strike </title> </head> <body> <font face = "times new roman" size = "4" color ="red"> <b> Text <strike> taiat cu o linie orizontala </strike> </font> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
12
1111. FFOORRMMAATTĂĂRRII SSMMAALLLL ŞŞII BBIIGG <html> <head> <title> PAS 11 - Formatari Small si Big </title> </head> <body> <font face = "times new roman" size = "4" color ="blue"> <big> Text mai mare </big> Text normal <small> Text mai mic </small> </font> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
13
1122. FFOORRMMAATTĂĂRRII IINNDDIICCEE ŞŞII EEXXPPOONNEENNTT <html> <head> <title> PAS 12 - Formatari Indice si Exponent </title> </head> <body> <font face = "times new roman" size = "2" color ="black"> Pitagora: <b>c<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>;</b><br> John Doe: <b>X<sub>i</sub>=a<sub>j</sub>+b<sub>k</k>;</b> </font> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
14
1133. IINNSSEERRAARREEAA FFOORRMMUULLEELLOORR <html> <head> <title> PAS 13 - Formatari tip formula </title> </head> <body> <font face = "times new roman" size = "2"> Ecuatia de gradul doi: <code>ax<sup>2</sup>+bx+c=0</code> </font> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
15
1144. TTAABBEELLEE SSIIMMPPLLEE <html> <head> <title> PAS 14 - Tabele simple </title> </head> <body> <font face="times new roman"><b><center>Tabele simple</center></b></font><br> <table border = "1"> <tr><td>NR.</td><td>NUME</td><td>Prenume</td><td>Varsta </td></tr> <tr><td>1.</td><td>Vasilescu</td><td>Ionut</td><td>25</td></tr> <tr><td>2.</td><td>Ionescu</td><td>Marius</td><td>18</td></tr> <tr><td>3.</td><td>Popescu</td><td>Ioana</td><td>28</td></tr> </table> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
16
1155. TTAABBEELLEE 33DD <html> <head> <title> PAS 15 - Tabele 3D </title> </head> <body> <font face="times new roman"><b> Tabele 3D (border > 3)</b></font><br><br><br> <table border = "3"> <tr><td>NR.</td><td>NUME</td><td>Prenume</td><td> Varsta</td></tr> <tr><td>1.</td><td>Vasilescu</td><td>Ionut</td><td>25</td></tr> <tr><td>2.</td><td>Ionescu</td><td>Marius</td><td>18</td></tr> <tr><td>3.</td><td>Popescu</td><td>Ioana</td><td>28</td></tr> </table> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
17
1166. FFOORRMMAATTAARREEAA CCEELLUULLEELLOORR <html> <head> <title> PAS 16 - Formatari ale celulelor in tabel </title> </head> <body> <font face="times new roman"><b>Formatari in tabel (cellspacing, cellpadding)</b></font><br> <table border = "3" color = "red" cellpadding = "10" cellspacing = "5"> <tr><td>NR.</td><td>N</td><td>Prenume</td><td>Varsta</td></tr> <tr><td>1.</td><td>Vasilescu</td><td>Ionut</td><td>25</td></tr> <tr><td>2.</td><td>Ionescu</td><td>Marius</td><td>18</td></tr> <tr><td>3.</td><td>Popescu</td><td>Ioana</td><td>28</td></tr> </table> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
18
1177. AALLIINNIIEERREEAA IINN CCEELLUULLEE <html> <head> <title> PAS 17 - Alinierea in celule </title> </head> <body> <font face="times new roman"><b>Alinierea in celule</b></font><br> <table border = "3"> <tr><td>NR.</td><td>ABCDEFGH</td><td> ABCDEFGH</td><td>ABCDEFGH</td></tr> <tr><td align = "center">1.</td><td align = "right">Vasilescu</td><td>Ionut</td><td>25</td></tr> <tr><td align = "center">2.</td><td align = "right">Ionescu</td><td>Marius</td><td>18</td></tr> <tr><td align = "center">3.</td><td align = "right">Popescu</td><td>Ioana</td><td>28</td></tr> </table> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
19
1188. UUNNIIRREEAA CCEELLUULLEELLOORR <html> <head> <title> PAS 18 - Unirea celulelor </title> </head> <body> <font face="times new roman"><b><center> Unirea celulelor (colspan)</center></b></font><br> <table border = "1"> <tr><td>NR.</td><td>NUME</td><td>Prenume</td><td>Varsta</td></tr> <tr><td>1.</td><td>Vasilescu</td><td>Ionut</td><td>25</td></tr> <tr><td>2.</td><td>Ionescu</td><td>Marius</td><td>18</td></tr> <tr><td>3.</td><td colspan = 2>John Doe</td><td>?!</td></tr> </table> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
20
1199. LLIISSTTEE OORRDDOONNAATTEE ŞŞII NNEEOORRDDOONNAATTEE <html> <head> <title> PAS 19 - Liste ordonate si neordonate </title> </head> <body> <font face = "times new roman" size = "4">Liste<br> <font face = "times new roman" size = "2">Neordonate<br> <ul> <li> Prima <li> A doua <li> A treia </ul> <br> <font face = "times new roman" size = "2">Ordonate<br> <br> <ol> <li> Prima <li> A doua <li> A treia </ol> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
21
2200. LLIISSTTEE IIMMBBRRIICCAATTEE <html> <head> <title> PAS 20 - Liste imbricate </title> </head> <body> <font face = "times new roman" size = "4">Liste imbricate<br> <font face = "times new roman" size = "2"><br> <ul><li> A<li> B <ul><li> B1<li> B2 <li> B3 </ul> <li> C <li> D </ul> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
22
2211. FFOOLLOOSSIIRREEAA LLEEGGĂĂTTUURRIILLOORR ((HHYYPPEERRLLIINNKKSS)) <html> <head> <title> PAS 21 - Legaturi </title> </head> <body> <a href = "#tinta 3"> Mergem la tinta 1 </a><br> <a href = "#tinta 2"> Mergem la tinta 2 </a><br> <a href = "#tinta 3"> Mergem la tinta 3 </a><br> SFE Corporation Limited este o companie publică ale cărei acţiuni sunt listate la Austock. Se are în vedere listarea la Asx în 2002. SFE şi filialele sale asigură realizarea tranzacţiilor bursiere şi oferă servicii financiare OTC în principal instituţiilor din regiunea Asia - Pacific. Complet electronică şi cu posibilitate de tranzacţionare 24 de ore SFE oferă pieţei financiare produse pentru investiţii şi management de risc, diseminează timpul real de timpul istoric în privinţa datelor de piaţă şi oferă clearing centralizat, settlement şi depozite pentru produse derivate şi produse cash. <br><a name = "tinta 1"> Tinta 1 </a><br> … </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
23
2222. IINNSSEERRAARREEAA IIMMAAGGIINNIILLOORR <html> <head> <title> curs 22 - Imagini </title> </head> <body> <h5> Imagini ! </h5> <img src = "imagini\fish.jpg"> <img src = "imagini\earth.jpg" align = "center"><br> <img src = "imagini\cake.jpg" align = "right" border = "3"><br> </body> </html>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
24
SSIINNTTAAXXAA LLIIMMBBAAJJUULLUUII HHTTMMLL
Sintaxa elementelor pentru texte:
< FONT >
<FONT... COLOR="Font colour" FACE="Font Face" LANG="Language" SIZE="Font size" STYLE="In line styling" TITLE="Informational ToolTip"
Exemple:
<FONT SIZE=4>Schimba marimea fontului la 4</FONT> <FONT SIZE=+2>schimba marimea fontului la marimea de baza + 2</FONT> <FONT COLOR="Red">Acest text este rosu.</FONT> <FONT FACE="Courier New, Comic Sans MS"> Acest font va fi afisat fie Courier New, fie Comic Sans MS, in functie de ce fonturi sunt instalate pe calculatorul client. </FONT>
< B >
<B... LANG="Language" TITLE="Informational ToolTip">
Exemplu: Textul urmator va fi afisat <b> ingrosat</b>.
< I >
<I... LANG="Language" LANGUAGE="Scripting language" TITLE="Informational ToolTip">
Cătălin Tudose – Scurtă prezentare html – elemente de bază
25
Exemplu:
Acesta este un <i>text italic</i>
< U >
<U... LANG="Language" TITLE="Informational ToolTip">
Exemplu:
<U>Text subliniat</U>
Cătălin Tudose – Scurtă prezentare html – elemente de bază
26
< STRIKE >
<STRIKE... LANG="Language" TITLE="Informational ToolTip">
STYLE="In line styling"
Exemplu:
<strike> Text taiat</strike>
< SUB >
<SUB... LANG="Language" LANGUAGE="Scripting language" TITLE="Informational ToolTip">
Exemplu:
Textul urmator va fi afisat ca un <sub>indice</sub>.
< SUP >
<SUP... LANG="Language" TITLE="Informational ToolTip">
Exemplu:
<sup> Textul acesta </sup> va fi afisat ca exponent.
Cătălin Tudose – Scurtă prezentare html – elemente de bază
27
<CODE ...>
<CODE... LANG="Language" TITLE="Informational ToolTip">
Exemplu:
Formula este : <CODE>x=(-b+/-(b2-4ac)½)/2a</CODE>.
Cătălin Tudose – Scurtă prezentare html – elemente de bază
28
Elemente de formatare în blocuri de texte:
< BLOCKQUOTE >
<BLOCKQUOTE... LANG="Language" TITLE="Informational ToolTip">
Este folosit pentru a afişa citate din alte surse. Textul citat va fi indentat la stânga şi la dreapta fata de cel normal.
< CENTER >
<CENTER... LANG="Language" TITLE="Informational ToolTip">
Centrează textul în cadrul paginii HTML.
< P >
<P... ALIGN="Heading alignment" LANG="Language" TITLE="Informational ToolTip">
Cătălin Tudose – Scurtă prezentare html – elemente de bază
29
Este folosit pentru introducerea paragrafelor.
Exemplu:
<P align=left> Acesta este un paragraph aliniat la stanga</P>
<MARQUEE >
<MARQUEE ALIGN="left|right|top|middle|bottom" BEHAVIOR="scroll|slide|alternate" BGCOLOR="#rrggbb|colour name" DIRECTION="left|right" HEIGHT="value|value%" LOOP="value|-1|infinite" TITLE="Informational ToolTip" WIDTH="value|value%">
Cătălin Tudose – Scurtă prezentare html – elemente de bază
30
Exemplu:
<MARQUEE BGCOLOR="#F0F8FF" BEHAVIOR=ALTERNATE>Acest text se va derula pe ecran!<MARQUEE> <MARQUEE SCROLLDELAY=1 SCROLLAMOUNT=75>Sunt foarte rapid</MARQUEE>
Sintaxa elementelor pentru liste
Liste pentru definiţii:
< DL >
<DL... LANG="Language" LANGUAGE="Scripting language" STYLE="In line styling" TITLE="Informational ToolTip">
Trebuie să fie imediat urmat de elementele <DT> şi <DD>.
Exemplu:
<DL> <DT>CPU <DD>Unitate centrala de prelucrare <DT>HDD <DD>Hard disk drive </DL>
Liste ordonate:
Cătălin Tudose – Scurtă prezentare html – elemente de bază
31
< OL >
<OL... LANG="Language" LANGUAGE="Scripting language" TITLE="Informational ToolTip" TYPE="Numbering type"
START="Start value">
Trebuie să fie imediat urmat de elementul <LI> care va defini fiecare element al listei. Exemplu: <OL> <LI>Click on the desired file to download. <LI>In the presented dialog box, enter a name to save the file with. <LI>Click 'OK' to download the file to your local drive. </OL>
Atributul TYPE poate lua următoarele valori: (TYPE=A) – litere mari. Ex: A, B, C ... (TYPE=a) – litere mici. Ex: a, b, c ... (TYPE=I) – Cifre romane. Ex: I, II, III ... (TYPE=i) – Cifre romane mici. Ex: i, ii, iii ... (TYPE=1) – Cifre arabe. Ex: 1, 2, 3 ...
Cătălin Tudose – Scurtă prezentare html – elemente de bază
32
Atributul START specifică poziţia de la care se porneşte în numerotare: <OL TYPE=a START=3> <LI>Click on the desired file to download. <LI>In the presented dialog box, enter a name to save the file with. <LI>Click 'OK' to download the file to your local drive. </OL>
Liste neordonate
< UL >
<UL... LANG="Language" TITLE="Informational ToolTip" TYPE="Bullet type">
Trebuie urmat de elementul <LI> care va preciza elementul listei. Exemplu: <UL> <LI>First list item <LI>Second list item <LI>Third list item </UL> Atributul TYPE poate lua următoarele valori: •TYPE=disc •TYPE=circle •TYPE=square
