crearea şi programarea paginilor web

Crearea Crearea şi şi programarea paginilor programarea paginilor

WEBWEB

Curriculum la decizia şcoliiCurriculum la decizia şcolii

Clasa a XII-aClasa a XII-a

Prof. Sanda Popescu

TerminologieTerminologie Internet- Internet- reţeauareţeaua mondială unică de mondială unică de computerecomputere interconectate interconectate

prin protocoalele (regulile) de comunicare prin protocoalele (regulile) de comunicare World Wide WebWorld Wide Web (abreviat (abreviat WWWWWW, sau pur şi simplu , sau pur şi simplu Web-ulWeb-ul) )

defineşte un spaţiu informaţional, desfăşurat cu ajutorul defineşte un spaţiu informaţional, desfăşurat cu ajutorul InternetuluiInternetului ProviderProvider- firmă specializată ce distribuie servicii Internet- firmă specializată ce distribuie servicii Internet ServerServer - - aplicaţie pe aplicaţie pe computercomputer, uneori chiar un computer întreg, , uneori chiar un computer întreg,

care operează continuu în reţeaua sa şi aşteaptă solicitări din care operează continuu în reţeaua sa şi aşteaptă solicitări din partea altor calculatoare din reţeapartea altor calculatoare din reţea,, numite clientnumite client

BrowserBrowser- soft, ansamblu de programe pentru manevrarea - soft, ansamblu de programe pentru manevrarea informaţiilor bazate pe grafică şi text (Internet Explorer, Mozilla informaţiilor bazate pe grafică şi text (Internet Explorer, Mozilla Firefox)Firefox)

URLURL (Uniform Resourse Locator)- adresa unică a unei pagini WEB- (Uniform Resourse Locator)- adresa unică a unei pagini WEB- alcătuită din: identificator de conţinut (http:// Hyper Text Transfer alcătuită din: identificator de conţinut (http:// Hyper Text Transfer Protocol sau ftp:// File Transfer Protocol) şi localizare (formată din Protocol sau ftp:// File Transfer Protocol) şi localizare (formată din numele domeniului şi numele unei anumite resurse). numele domeniului şi numele unei anumite resurse). Exemple: Exemple:

http://www.google.ro, , http://www.w3schools.com SiteSite- ansamblul: spaţiu pe hard+fişierele pe care le - ansamblul: spaţiu pe hard+fişierele pe care le

conţine+adresa.conţine+adresa.

HTMLHTML

HyperText Markup Language HyperText Markup Language

Un fişierUn fişier HTML HTML este un fişier este un fişier text text care care conţine conţine markup tagsmarkup tags

Aceste markup Aceste markup tags tags spun browser-spun browser-ului ului cum să afişezecum să afişeze pagina pagina

Un fişier Un fişier HTML HTML trebuie să aibă trebuie să aibă extensia extensia htmhtm sau sau htmlhtml

Un fişierUn fişier HTML HTML poate fi creat utilizând poate fi creat utilizând unun simplsimpluu text editor text editor:: NotepadNotepad

Introduceţi următorul text:Introduceţi următorul text:<html> <html> <head><head><title>Title of page</title><title>Title of page</title></head> </head> <body> This is my first <body> This is my first

homepage. <b>This text is homepage. <b>This text is bold</b> </body>bold</b> </body>

</html> </html> Salvaţi fişierul cu numele Salvaţi fişierul cu numele

pagina1.htmpagina1.htm Atenţie la extensia htm sau Atenţie la extensia htm sau

htmlhtml ExecutaţiExecutaţi

Textul dintre tag-urile Textul dintre tag-urile <head> <head> şi şi </head></head> reprezintă informaţia reprezintă informaţia header-uluiheader-ului. . Aceasta nu este Aceasta nu este afişatăafişată îîn n fereastrafereastra browser browser--uluiului..

TTextul dintre tag-urileextul dintre tag-urile <title><title>este titlul este titlul documentului şi este afişată documentului şi este afişată în bara de titluîn bara de titlu..

Textul dintre tag-urile Textul dintre tag-urile <body> <body> este textul care se este textul care se va afişa în fereastra va afişa în fereastra browserbrowser-ului-ului..

Textul dintre tag-urileTextul dintre tag-urile <b> <b> şişi </b> tags </b> tags va afişa textul va afişa textul cu litere îngroşate (Bold)cu litere îngroşate (Bold)

ObservaţieObservaţie

Putem edita un fişier Putem edita un fişier HTML HTML cu cu uşurinţă, folosind un editoruşurinţă, folosind un editor WYSIWYG WYSIWYG (what you see is what you get) (what you see is what you get) cum cum ar fi ar fi FrontPage FrontPage sausau Dreamweaver Dreamweaver..

Dacă dorim, totuşi, să devenim Dacă dorim, totuşi, să devenim adevăraţi programatori de pagini adevăraţi programatori de pagini Web, este recomandabil să utilizăm Web, este recomandabil să utilizăm un editor de text pentru a învăţa un editor de text pentru a învăţa abecedarul abecedarul HTML.HTML.

Atributele Atributele TagTag-urilor-urilor

TagTag-urile pot avea-urile pot avea atribute atribute. . AtributeAtributele oferă informaţii le oferă informaţii suplimentare unui element suplimentare unui element HTML. HTML. Următorul tUrmătorul tag defineag defineşteşte unun tab tabeel: <table>. l: <table>. Acestuia îi putem adăuga un chenar Acestuia îi putem adăuga un chenar adăugând un atribul adăugând un atribul <table border="0"><table border="0">. Fără acesta, . Fără acesta, tabelul nu are chenar.tabelul nu are chenar.

AtributeAtributelele apar întotdeauna în perechi apar întotdeauna în perechi name/value name/value de de formaforma: name="value".: name="value".

AtributeAtributelele sunt întotdeauna specificate îsunt întotdeauna specificate în n tag-ul de tag-ul de start start al al elementuluielementului HTML. HTML.

AtributeAtributelele sunt de cele mai multe ori sunt de cele mai multe ori case-insensitive. case-insensitive. Valorile Valorile atributeatributelor trebuie cuprinse între ghilimele (duble lor trebuie cuprinse între ghilimele (duble

sau simple)sau simple) ÎÎn rare situan rare situaţţiiii, , ca în cazul în care valoarea atribului în sine ca în cazul în care valoarea atribului în sine

conţine ghilimele, este necesară folosirea apostrconţine ghilimele, este necesară folosirea apostroofurilor, ca furilor, ca în exemplu: în exemplu: name='John "ShotGun" Nelson'name='John "ShotGun" Nelson'

Titluri, paragrafe, comentariiTitluri, paragrafe, comentariiHeadingsHeadings (Titluri) (Titluri) Headings Headings sunt definite cu tag-uri sunt definite cu tag-uri

<h1> <h1> …… <h6>. <h1> <h6>. <h1> defineşte defineşte cel mai mare cel mai mare headingheading iar iar <h6> <h6> definedefineşteşte heading heading-ul cel mai mic-ul cel mai mic..

<h1>This is a heading</h1> <h1>This is a heading</h1> <h2>This is a heading</h2> <h2>This is a heading</h2> <h3>This is a heading</h3> <h3>This is a heading</h3> <h4>This is a heading</h4> <h4>This is a heading</h4> <h5>This is a heading</h5> <h5>This is a heading</h5> <h6>This is a heading</h6><h6>This is a heading</h6>

HTML HTML adaugă automat linii goale adaugă automat linii goale înainte şi după înainte şi după heading.heading.

Comments in HTMLComments in HTMLUn comentariu va fi ignorat de Un comentariu va fi ignorat de

browser.browser.<!>

ParagraParagrafurifuri ParagraParagrafurilefurile sunt dsunt definefinitite e cu tag-cu tag-

ulul <p> <p> <p>This is a paragraph</p> <p>This is a paragraph</p>

<p>This is another <p>This is another paragraph</p>paragraph</p>

HTML HTML adaugă automat linii goale adaugă automat linii goale înainte şi după paragraf.înainte şi după paragraf.

Sfârşit de lSfârşit de lininiie e Tag-ulTag-ul <br> <br> este folosit când se este folosit când se

doreşte salt la linia următoare doreşte salt la linia următoare (enter)(enter)

<p>This <br> is a <p>This <br> is a para<br>graph with line para<br>graph with line breaks</p>breaks</p>

Tag-ulTag-ul <br> <br> este folosit singur, nu este folosit singur, nu trebuie închistrebuie închis..

Formatarea textului în Formatarea textului în HTMLHTML<html><html><body><body><b>This text is bold</b><br><b>This text is bold</b><br><strong><strong>This text is strongThis text is strong</strong><br></strong><br><big><big>This text is bigThis text is big</big><br></big><br><em><em>This text is emphasizedThis text is emphasized</em><br></em><br><i><i>This text is italicThis text is italic</i><br></i><br><small><small>This text is smallThis text is small</small><br></small><br>This text containsThis text contains<sub><sub>subscriptsubscript</sub><br></sub><br>This text containsThis text contains<sup><sup>superscriptsuperscript</sup></sup></body></body></html></html>

<html><html><body><body>

<pre><pre>This isThis ispreformatted text.preformatted text.It preserves both spacesIt preserves both spacesand line breaks.and line breaks.</pre></pre>

<p>The pre tag is good for displaying <p>The pre tag is good for displaying computer code:</p>computer code:</p>

<pre><pre>for i = 1 to 10for i = 1 to 10 print iprint inext inext i</pre></pre>

</body></body></html></html>

Tag-uri “Computer output”Tag-uri “Computer output”<html><html><body><body>

<code>Computer code</code><code>Computer code</code><br><br><kbd>Keyboard input</kbd><kbd>Keyboard input</kbd><br><br><tt>Teletype text</tt><tt>Teletype text</tt><br><br><samp>Sample text</samp><samp>Sample text</samp><br><br><var>Computer variable</var><var>Computer variable</var><br><br>

<p><p><b>Note:</b> These tags are often used <b>Note:</b> These tags are often used

to display computer/programming to display computer/programming code.code.

</p></p>


Computer code Computer code Keyboard input Keyboard input Teletype text Teletype text Sample text Sample text Computer variableComputer variable NotNotăă:: Aceste Aceste tag-uri sunt folosite tag-uri sunt folosite pentru a afişa linii pentru a afişa linii de program. de program.

Basic HTML TagsBasic HTML Tags<html>Defines an HTML Defines an HTML

documentdocument<body>Defines the Defines the

document's bodydocument's body<h1> to <h6>Defines Defines

header 1 to header 6header 1 to header 6<p>Defines a paragraphDefines a paragraph<br>Inserts a single line Inserts a single line

breakbreak<hr>Defines a horizontal ruleDefines a horizontal rule<!-->Defines a commentDefines a comment

Text Formatting TagsText Formatting Tags<b>Defines bold textDefines bold text<big>Defines big textDefines big text<em>Defines emphasized text Defines emphasized text <i>Defines italic textDefines italic text<small>Defines small textDefines small text<strong>Defines strong textDefines strong text<sub>Defines subscripted textDefines subscripted text<sup>Defines superscripted textDefines superscripted text<ins>Defines inserted textDefines inserted text<del>Defines deleted textDefines deleted text<s>Deprecated. Use <del> Deprecated. Use <del>

insteadinstead<strike>Deprecated. Use <del> Deprecated. Use <del>

insteadinstead<u>Deprecated. Use styles Deprecated. Use styles

insteadinstead

Citations, Quotations, Citations, Quotations, and Definition Tagsand Definition Tags

<abbr>Defines an Defines an abbreviationabbreviation

<acronym>Defines an Defines an acronymacronym

<address>Defines an <address>Defines an address elementaddress element

<bdo>Defines the text <bdo>Defines the text directiondirection

<blockquote>Defines a <blockquote>Defines a long quotationlong quotation

<q>Defines a short <q>Defines a short quotationquotation

<cite>Defines a citation<cite>Defines a citation<dfn>Defines a <dfn>Defines a

definition termdefinition term

"Computer Output" Tags"Computer Output" Tags<code>Defines computer <code>Defines computer

code textcode text<kbd>Defines keyboard text <kbd>Defines keyboard text <samp>Defines sample <samp>Defines sample

computer codecomputer code<tt>Defines teletype text<tt>Defines teletype text<var>Defines a variable<var>Defines a variable<pre>Defines preformatted <pre>Defines preformatted

text<listing>Deprecated. text<listing>Deprecated. Use <pre> instead Use <pre> instead <plaintext>Deprecated. <plaintext>Deprecated. Use <pre> Use <pre> instead<xmp>Deprecated. instead<xmp>Deprecated. Use <pre> insteadUse <pre> instead

Caractere speciale în Caractere speciale în HTMLHTML Unele caractere au o semnificaţie aparte în Unele caractere au o semnificaţie aparte în HTML, HTML, cum ar fi semnulcum ar fi semnul (<) (<)

care defineşte începutul unui tag. Dacă vreţi să afişaţi un astfel de care defineşte începutul unui tag. Dacă vreţi să afişaţi un astfel de caracter, trebuie să inseraţi o entitate caracter în sursa caracter, trebuie să inseraţi o entitate caracter în sursa HTML.HTML.

O entitate caracter are trei părţi: un O entitate caracter are trei părţi: un ampersand (&), ampersand (&), un nume de entitate un nume de entitate sau semnul sau semnul # # şi un număr al entităţii, construcţie terminată prin şi un număr al entităţii, construcţie terminată prin (;). (;).

Pentru a afişa semnul de “mai mic” trebuie să scrieţi: Pentru a afişa semnul de “mai mic” trebuie să scrieţi: << or or << Avantajul folosirii unui nume în locul unui număr este faptul că poate fi Avantajul folosirii unui nume în locul unui număr este faptul că poate fi

mai uşor de amintit şi identificat. Dezavantajul este că nu orice browser mai uşor de amintit şi identificat. Dezavantajul este că nu orice browser recunoaşte cele mai noi nume de entităţi, în timp ce entităţile numere recunoaşte cele mai noi nume de entităţi, în timp ce entităţile numere sunt foarte bine suportate de orice browser.sunt foarte bine suportate de orice browser.

Numele entităţilor sunt Numele entităţilor sunt case sensitive. case sensitive.

Crearea link-urilor în HTMLCrearea link-urilor în HTMLTag-ul “ancoră” şi atributul Tag-ul “ancoră” şi atributul Href Href

HTML HTML foloseşte tag-ul foloseşte tag-ul <a> (anchor) <a> (anchor) pentru a crea un link pentru a crea un link spre un alt documentspre un alt document..

O ancoră poate direcţiona spre O ancoră poate direcţiona spre un alt produs: un alt produs: o paginăo pagină HTML, HTML, o o imagimaginine, e, un fişier sunetun fişier sunet, , un filmun film, etc., etc.

SintaxaSintaxa: :

<a href="url">Text to be displayed</a><a href="url">Text to be displayed</a>

Atributul Atributul hrefhref este utilizat pentru a specifica adresa documentului este utilizat pentru a specifica adresa documentului spre care se face spre care se face linklink-ul-ul, , şi cuvintele care vor apărea între tag-ul şi cuvintele care vor apărea între tag-ul de început si cel de sfârşit vor fi afişate ca de început si cel de sfârşit vor fi afişate ca hyperlink.hyperlink.

Această ancoră defineşte un link spre Această ancoră defineşte un link spre W3Schools:W3Schools:

<a href="http://www.w3schools.com/">Visit W3Schools!<a href="http://www.w3schools.com/">Visit W3Schools!</a></a>

Afişarea se va face de către browser în felul următor:Afişarea se va face de către browser în felul următor:Visit Visit

W3Schools!W3Schools!

Atributul TargetCu acest atribut poţi defini locul în care fişierul spre care se face link va fi deschis. Exemplul de mai jos va deschide un document într-o fereastră nouă a browser-ului

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a></a>

Tag-ul Anchor şi atributul Name Atributul name este utilizat pentru a se identifica o ancoră. Când foloseşti numele ancorei poţi crea un link cu salt direct la o secţiune specificată din pagină, îm loc să foloseşti bara de scroll pentru a defila până la secţiunea căutată.Sintaxa pentru denumirea unei ancore:<a name="label">Text to be displayed</a>Atributul name denumeşte ancora. Acesta poate fi orice text, ca de exemplu:<a name="tips">Useful Tips Section</a>Se poate sesiza că numele ancorei nu este afişat într-un mod special.Pentru a crea link direct la secţiunea “tips” adăugaţi caracterul # şi numele ancorei la sfârşitul URL-ului, ca în exemplu:<a href="http://www.w3schools.com/html_links.asp#tips"> Jump to the Useful Tips Section</a>Un hyperlink spre Secţiunea Useful Tips fără a mai folosi fişierul "html_links.asp" va arăta aşa: <a href="#tips">Jump to the Useful Tips Section</a>

ExempluExemplu<html><html><body><body>

<p><p><a href="#C4">See also Chapter 4.</a><a href="#C4">See also Chapter 4.</a></p></p>

<h2>Chapter 1</h2><h2>Chapter 1</h2><p>This chapter explains ba bla bla</p><p>This chapter explains ba bla bla</p>



<h2><a name="C4">Chapter <h2><a name="C4">Chapter 4</a></h2>4</a></h2>

<p>This chapter explains ba bla bla</p><p>This chapter explains ba bla bla</p></body></body></html></html>

See also Chapter 4. See also Chapter 4. Chapter 1Chapter 1This chapter explains ba bla This chapter explains ba bla

blablaChapter 2Chapter 2This chapter explains ba bla This chapter explains ba bla



blabla

Chenare Chenare HTMLHTMLFolosind cadre (chenare) se pot Folosind cadre (chenare) se pot

afişa mai multe documente afişa mai multe documente HTML HTML în aceeaşi fereastră a în aceeaşi fereastră a browser-ului. Fiecare browser-ului. Fiecare document HTML se numeşte document HTML se numeşte cadru şi fiecare cadru este cadru şi fiecare cadru este independent unul faţă de independent unul faţă de celălalt.celălalt.

Dezavantaje:Dezavantaje:- Realizatorul paginii - Realizatorul paginii wwebeb

trebuie să ţină cont de mai trebuie să ţină cont de mai multe documente HTMLmulte documente HTML

Este mai dificil să listezi la Este mai dificil să listezi la imprimantă întreaga pagină.imprimantă întreaga pagină.

TTag-ul ag-ul Frameset Frameset Defineşte modul în care se divide Defineşte modul în care se divide

fereastra în chenare.fereastra în chenare.Fiecare frameset defineşte un număr Fiecare frameset defineşte un număr

de rînduri şi un număr de coloane.de rînduri şi un număr de coloane.Aceste valori indică cantitatea de Aceste valori indică cantitatea de

spaţiu de pe ecran ocupată de spaţiu de pe ecran ocupată de fiecare rând şi coloană.fiecare rând şi coloană.

TTag-ulag-ul Frame Frame Defineşte ce document Defineşte ce document HTML HTML se pune se pune

în fiecare chenar.în fiecare chenar.Exemplu:Exemplu:<frameset cols="25%,75%"> <frameset cols="25%,75%"> <frame src="frame_a.htm"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_b.htm">

</frameset> </frameset> NotNotăă:: Lăţimea unui chenar poate fi Lăţimea unui chenar poate fi

exprimată şi în pixeli:exprimată şi în pixeli: (cols="200,500").(cols="200,500").

ExempluExemplu

<html><html>

<frameset <frameset cols="25%,50%,25%cols="25%,50%,25%">">

<frame <frame src="frame_a.htm">src="frame_a.htm">

<frame <frame src="frame_b.htm">src="frame_b.htm">

<frame <frame src="frame_c.htm">src="frame_c.htm">

</frameset></frameset>

</html></html>

Acest exemplu demonstrează cum să împarţi pagina în trei Acest exemplu demonstrează cum să împarţi pagina în trei chenare structurate pe linii şi coloane.chenare structurate pe linii şi coloane.

<html><html>

<frameset rows="50%,50%"><frameset rows="50%,50%">

<frame src="frame_a.htm"><frame src="frame_a.htm">

<frameset cols="25%,75%"><frameset cols="25%,75%"> <frame src="frame_b.htm"><frame src="frame_b.htm"> <frame src="frame_c.htm"><frame src="frame_c.htm"> </frameset></frameset>

</frameset></frameset>

</html></html>

Navigarea între chenareNavigarea între chenareAcest exemplu arată cum să navigaţi printre chenare. Chenarul de navigare conţine o Acest exemplu arată cum să navigaţi printre chenare. Chenarul de navigare conţine o listă de link-uri cu al doilea chenar ca tintă. Fişierul cu numele “listă de link-uri cu al doilea chenar ca tintă. Fişierul cu numele “tryhtml_contents.htm" tryhtml_contents.htm" conţine trei link-uri.conţine trei link-uri. Codul sursă al acestor link-uri este: Codul sursă al acestor link-uri este: <a href ="frame_a.htm" target ="showframe">Frame a</a><br><a href ="frame_a.htm" target ="showframe">Frame a</a><br><a href ="frame_b.htm" target ="showframe">Frame b</a><br><a href ="frame_b.htm" target ="showframe">Frame b</a><br><a href ="frame_c.htm" target ="showframe">Frame c</a><a href ="frame_c.htm" target ="showframe">Frame c</a>Al doilea chenar va arăta documentul spre care se face link.Al doilea chenar va arăta documentul spre care se face link.

<html>

<frameset cols="120,*">

<frame src="tryhtml_contents.htm"><frame src="frame_a.htm" name="showframe">

</frameset>

</html>

Tabele Tabele HTMLHTML

TabeTabeleleTabTabeelelele sunt definite cu le sunt definite cu

tag-ultag-ul <table>. <table>. Un Un tabel este împărţit în tabel este împărţit în rânduri (cu tag-ul rânduri (cu tag-ul <tr> <tr> )şi fiecare rând în )şi fiecare rând în celule ce conţin celule ce conţin date(cu tag-ul date(cu tag-ul <td><td>). ). O astfel de celulă O astfel de celulă poate conţine text, poate conţine text, imagini, liste, imagini, liste, paragrafe, form-uri, paragrafe, form-uri, tabele, rigle orizontale, tabele, rigle orizontale, etc.etc.

<table border="1"> <table border="1">

<tr> <tr>

<td>row 1, cell 1</td> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> 2</td>

</tr> </tr>

</table> </table>

Un astfel de tabel va arăta:Un astfel de tabel va arăta:

Atributul Border Dacă nu este specificat atributul border, tabelul va fi afişat fără margine. Câteodată acest lucru este util dar uneori vrem ca marginile să fie vizibile. Pentru a afişa un tabel cu bordură, se poate folosi atributul border :<table border="1"> <tr> <td>Row 1, cell 1</td> <td>Row 1, cell 2</td> </tr> </table>

Capete de tabelSunt definite cu tag-ul <th>.<table border="1"> <tr> <th>Heading</th> <th>Another Heading</th></tr> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>

HTML HTML permite definirea permite definirea listelor ordonate sau listelor ordonate sau neordonate.neordonate.

ExExeemplempleListă neordonată foloseşte Listă neordonată foloseşte

tag-ul tag-ul <ul><ul><ul> <ul> <li>Coffee</li> <li>Coffee</li> <li>Milk</li><li>Milk</li> </ul></ul> Listă ordonatăListă ordonată folose foloseşşte te

tag/ul <ol>tag/ul <ol><ol> <ol> <li>Coffee</li> <li>Coffee</li> <li>Milk</li> <li>Milk</li> </ol></ol>

Liste HTML

Definirea Definirea ListListelorelor

Definirea unei liste nu este o Definirea unei liste nu este o listă de itemi. Este o listă de listă de itemi. Este o listă de termeni şi explicaţii ale termeni şi explicaţii ale acestora.acestora.

Definiţia listet începe cu tag-Definiţia listet începe cu tag-ul ul <dl>. <dl>. Fiecare termen Fiecare termen definit începe cu tag-ul definit începe cu tag-ul <dt>. <dt>. Fiecare explicaţie a termenilor Fiecare explicaţie a termenilor începe cu tag-ul începe cu tag-ul <dd>.<dd>.

<dl> <dl> <dt>Coffee</dt> <dt>Coffee</dt> <dd>Black hot drink</dd> <dd>Black hot drink</dd>

<dt>Milk</dt> <dt>Milk</dt> <dd>White cold drink</dd> <dd>White cold drink</dd> </</dldl> >

Aşa apare în browser:Aşa apare în browser:Coffee Coffee

– Black hot drink Black hot drink Milk Milk

– White cold drink White cold drink În interiorul tag-ului În interiorul tag-ului <dd> <dd>

se pot defini paragrafe, linii se pot defini paragrafe, linii de la capăt, imagini, link-de la capăt, imagini, link-uri, alte liste,uri, alte liste, etc. etc.

Forme Forme şi intrări în şi intrări în HTMLHTML

FormFormee O formă este o zonă care O formă este o zonă care

conţine elemente formă.conţine elemente formă. Elementele formă permit Elementele formă permit

utilizatorului să introducă utilizatorului să introducă informaţii (cum ar fi texte, informaţii (cum ar fi texte, meniuri, butoane radio, meniuri, butoane radio, casuţe de verificare casuţe de verificare (checkboxes), etc.(checkboxes), etc.) ) într-o într-o formăformă..

O formă este definită cu O formă este definită cu tag-ul tag-ul <form>. <form>.

<form> <form> <input> <input> <input> <input> </form> </form>

IntrăriIntrări Cea mai utilizată tag-formă este Cea mai utilizată tag-formă este

tag-ul tag-ul <input> <input>. Tipul datei . Tipul datei introduse este specificat de tipul introduse este specificat de tipul atributului. Vom explica cele mai atributului. Vom explica cele mai utilizate tipuri de date.utilizate tipuri de date.

Câmpuri Câmpuri Text Text Sunt utilizate pentru a introduce Sunt utilizate pentru a introduce

texte, numere într-o formă. texte, numere într-o formă. <form> <form> First name:First name: <input type="text" <input type="text"

name="firstname"> <br> name="firstname"> <br> Last name: <input type="text" Last name: <input type="text"

name="lastname"> name="lastname"> </form></form>

Lungimea implicită a unui câmp text este de 20 caractere

Butoane Butoane Radio Radio Sunt folosite când doreşti Sunt folosite când doreşti

ca utilizatorul să selecteze ca utilizatorul să selecteze o opţiune dintr-un număr o opţiune dintr-un număr limitat de opţiuni. limitat de opţiuni.

<form> <form> <input type="radio" <input type="radio"

name="sex" name="sex" value="male">Male <br> value="male">Male <br>

<input type="radio" <input type="radio" name="sex" name="sex" value="female"> Femalevalue="female"> Female

</form> </form>

Căsuţe de verificareCăsuţe de verificare (checkboxes)(checkboxes) Sunt utilizate când doreşti ca utilizatorul Sunt utilizate când doreşti ca utilizatorul

să selecteze una sau mai multe opţiuni să selecteze una sau mai multe opţiuni dintr-un număr limitat de opţiuni. dintr-un număr limitat de opţiuni.

<form> <form> I have a bike: <input type="checkbox" I have a bike: <input type="checkbox"

name="vehicle" value="Bike" /> <br /> name="vehicle" value="Bike" /> <br /> I have a car: <input type="checkbox" I have a car: <input type="checkbox"

name="vehicle" value="Car" /> <br /> name="vehicle" value="Car" /> <br /> I have an airplane: <input I have an airplane: <input

type="checkbox" name="vehicle" type="checkbox" name="vehicle" value="Airplane" /> value="Airplane" />

</form></form>

Câmpuri PasswordCâmpuri Password<html><html><body><body>

<form action=""><form action="">Username: Username: <input type="text" <input type="text"

name="user">name="user"><br><br>Password: Password: <input type="password" <input type="password"

name="password">name="password"></form></form></body></body></html></html>

Efect la browser:Efect la browser:

De reţinut că atunci De reţinut că atunci când scrieţi caractere când scrieţi caractere în câmpul password, în câmpul password, browser-ul afişează browser-ul afişează asteriscuri sau bullets asteriscuri sau bullets în loc de caractere. în loc de caractere.

Liste ascunseListe ascunse<html><html><body><body>

<form action=""><form action=""><select name="cars"><select name="cars"><option <option

value="volvo">Volvo</option>value="volvo">Volvo</option><option <option

value="saab">Saab</option>value="saab">Saab</option><option value="fiat" <option value="fiat"

selected="selected">Fiat</optionselected="selected">Fiat</option>>

<option <option value="audi">Audi</option>value="audi">Audi</option>

</select></select></form></form>


Acest form trimite un e-mail la Acest form trimite un e-mail la W3SchoolsW3Schools <html><html><body><body><form <form

action="MAILTO:[email protected]" action="MAILTO:[email protected]" method="post" enctype="text/plain">method="post" enctype="text/plain">

<h3>This form sends an e-mail to <h3>This form sends an e-mail to W3Schools.</h3>W3Schools.</h3>

Name:<br>Name:<br><input type="text" name="name"<input type="text" name="name"value="yourname" size="20">value="yourname" size="20"><br><br>Mail:<br>Mail:<br><input type="text" name="mail"<input type="text" name="mail"value="yourmail" size="20">value="yourmail" size="20"><br><br>Comment:<br>Comment:<br><input type="text" name="comment"<input type="text" name="comment"value="yourcomment" size="40">value="yourcomment" size="40"><br><br><br><br><input type="submit" value="Send"><input type="submit" value="Send"><input type="reset" value="Reset"><input type="reset" value="Reset">

</form></form></body></body></html></html>

Inserarea imaginilorInserarea imaginilor în HTML în HTML Tag-ul img şi atributul Tag-ul img şi atributul Src Src ÎÎn HTML, imagn HTML, imaginile sunt definite inile sunt definite

cu tag-ul cu tag-ul <img><img>, care nu se , care nu se închide.închide.

Pentru a afişa o imagine în Pentru a afişa o imagine în pagină, trebuie să utiizaţi pagină, trebuie să utiizaţi atributul atributul srcsrc ( (sourcesource)). . Valoarea Valoarea atributului src este atributului src este URLURL-ul -ul imagimaginiiinii pe care doriţi s-o afişaţi în paginăpe care doriţi s-o afişaţi în pagină. .

Sinaxa pentru definirea imaginii:Sinaxa pentru definirea imaginii: <img src="url"><img src="url">. . URLURL-ul arată -ul arată

localocaţţiiaa unde imaginea este unde imaginea este stocatăstocată. . O imagine numităO imagine numită "boat.gif" loca"boat.gif" localizalizattăă îîn directorn directorulul "images" "images" didin n "www.w3schools.com" "www.w3schools.com" areare URL URL-ul-ul: : http://www.w3schools.com/imagehttp://www.w3schools.com/images/boat.gif. s/boat.gif. Daca imaginea este Daca imaginea este stocată pe disk, trebuie stocată pe disk, trebuie specificată calea spre aceasta.specificată calea spre aceasta.

Atributul Atributul Alt Alt AtriburulAtriburul alt alt este utilizat pentru a este utilizat pentru a

defini un text alternativ unei defini un text alternativ unei imagini. Valoarea atributului alt imagini. Valoarea atributului alt este un text definit de autorul este un text definit de autorul paginii: paginii:

<img src="boat.gif" alt="Big <img src="boat.gif" alt="Big Boat">Boat">

AtributulAtributul "alt" "alt" spune cititorului ce spune cititorului ce lipseşte din pagină dacă browser-lipseşte din pagină dacă browser-ul nu poate încărca imaginea.ul nu poate încărca imaginea. Browser-ul va afişa în acest caz Browser-ul va afişa în acest caz textul în locul imaginii. Este o textul în locul imaginii. Este o bună practică să includeţi bună practică să includeţi atributul alt pentru fiecare atributul alt pentru fiecare imagine din pagină, astfel încât imagine din pagină, astfel încât cei ce folosesc doar un browser cei ce folosesc doar un browser text-only să poată folosi pagina text-only să poată folosi pagina creată de voi. creată de voi.

Imagine ca linkImagine ca link <html><html> <body><body> <p><p> You can also use an image You can also use an image

as a link:as a link: <a href="lastpage.htm"><a href="lastpage.htm"> <img border="0" <img border="0"

src="buttonnext.gif" src="buttonnext.gif" width="65" height="38">width="65" height="38">

</a></a> </p></p>

</body></body> </html></html>

Imagine folosită ca background <html><html> <body <body

background="background.jpg">background="background.jpg">

<h3>Look: A background image!<h3>Look: A background image!</h3></h3>

<p>Both gif and jpg files can be <p>Both gif and jpg files can be used as HTML backgrounds.</p>used as HTML backgrounds.</p>

<p>If the image is smaller than <p>If the image is smaller than the page, the image will repeat the page, the image will repeat itself.</p>itself.</p>

</body></body> </html></html>

Background- FundalBackground- FundalFundalFundal TTag-ulag-ul <body> <body> are două are două

atribute prin care se poate atribute prin care se poate specifica fundalul unei paginispecifica fundalul unei pagini. . Acesta poate fi color sau o Acesta poate fi color sau o imagine.imagine.

BgcolorBgcolor Atributul Atributul bgcolor atribubgcolor atribuiie e o o

culoare specificată pentru culoare specificată pentru fundalul paginii. Valoarea fundalul paginii. Valoarea acestui atribut poate fi un acestui atribut poate fi un număr număr hexahexazzecimal, ecimal, o valoare o valoare RGB, RGB, sau un nume de sau un nume de ccuuloloaarree::

<body bgcolor="#000000"> <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"><body bgcolor="black">

BackgroundBackground AtributulAtributul background background specifică specifică

o imagine pentru fundalul o imagine pentru fundalul unei pagini unei pagini HTML. HTML. Valoarea Valoarea acestui acestui atribut atribut este este URLURL-ul -ul imagimaginii pe care daoreşti s-o inii pe care daoreşti s-o utilizeziutilizezi. . Dacă imaginea este Dacă imaginea este prea mică ea se va repeta prea mică ea se va repeta până când se umple întreaga până când se umple întreaga fereastră a fereastră a browserbrowser-ului-ului..

<body <body background="clouds.gif"> background="clouds.gif"> <body <body background="http://www.w3sbackground="http://www.w3schools.com/clouds.gif">chools.com/clouds.gif">

URLURL-ul-ul poate fi relativ poate fi relativ ((cca a îîn n prima linie de mai susprima linie de mai sus) ) sausau absolut (absolut (cca a îîn n a doua linie din a doua linie din exemplul de mai susexemplul de mai sus).).

AtenţieAtenţie: : Dacă doreşti să foloseşti o imagine Dacă doreşti să foloseşti o imagine ca background, ar trebui să te gândeşti la ca background, ar trebui să te gândeşti la următoareleurmătoarele::

Background-ul imagine va mări timpul de Background-ul imagine va mări timpul de încărcare prea mult?încărcare prea mult?

Background-ul imagine va arăta bine cu Background-ul imagine va arăta bine cu alte imagini în paginăalte imagini în pagină? ?

Background-ul imagine va arăta bine cu un Background-ul imagine va arăta bine cu un text colorat pe paginătext colorat pe pagină? ?

Background-ul imagine va arăta bine cînd Background-ul imagine va arăta bine cînd imaginea se repetă pe paginăimaginea se repetă pe pagină? ?

Background-ul imagine nu va distrage Background-ul imagine nu va distrage atenţia de la textatenţia de la text? ?

Culori HTMLCulori HTML

Numele culorilor standard:HTML validează 16 nume pentru culori: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

Derularea textului în controale Derularea textului în controale marqueemarquee

Controlul marquee este un marcaj de efect ce determină animarea Controlul marquee este un marcaj de efect ce determină animarea unui text într-o pagină Web.unui text într-o pagină Web.

Exemplu:Exemplu: <marquee> <h1> Text la plimbare</h1> </marquee><marquee> <h1> Text la plimbare</h1> </marquee>Pentru a controla direcPentru a controla direcţţia de deplasare se foloseia de deplasare se foloseşştete atributul direction atributul direction

care poate lua următoarele valori: left (implicit- de la stânga la care poate lua următoarele valori: left (implicit- de la stânga la dreapa), right, down, up.dreapa), right, down, up.

Atributul behavior are trei valori:Atributul behavior are trei valori:Scroll (implicit- textul se plimbă pe ecran, se pierde la stânga şi Scroll (implicit- textul se plimbă pe ecran, se pierde la stânga şi

reapare în dreapta)reapare în dreapta)Slide- textul se opreşte la marginea opusă apariţieiSlide- textul se opreşte la marginea opusă apariţieiAlternate- se deplasează alternativ, stângaAlternate- se deplasează alternativ, stânga, , dreapta, fără a părăsi dreapta, fără a părăsi

ecranulecranulExemplu:Exemplu: <marquee behavior=slide direction=right> <h1> text plimbaret <marquee behavior=slide direction=right> <h1> text plimbaret

</h1> </marquee></h1> </marquee>

CSS CSS CCascading ascading SStyle tyle SSheetsheets

CSS - limbaj prin care se poate realiza formatarea CSS - limbaj prin care se poate realiza formatarea textului, aplicarea unui stil asupra unor elemente textului, aplicarea unui stil asupra unor elemente de acelade acelaşi tip (paragraf, imagine, tabel, etc.)şi tip (paragraf, imagine, tabel, etc.)

Stilurile definesc Stilurile definesc how to displayhow to display elementele elementele HTML HTML

Stilurile sunt în mod normal stocate în Stilurile sunt în mod normal stocate în Style Style SheetsSheets

Stilurile sunt adăugate în Stilurile sunt adăugate în HTML HTML pentru a pentru a rezolva o problemărezolva o problemă

External Style SheetsExternal Style Sheets te poate salva de la o te poate salva de la o grămadă de muncăgrămadă de muncă

External Style Sheets External Style Sheets sunt stocate în fişiere sunt stocate în fişiere CSSCSS

Sintaxa Sintaxa CSSCSS

Sintaxa Sintaxa CSS CSS este formată din trei părţieste formată din trei părţi: : unun selector, selector, oo proprproprieiettateate şi o valoareşi o valoare::

selector {property: value}selector {property: value}SSelectorelectorulul eesste în mod normalte în mod normal elementul/tag-ul elementul/tag-ul HTML HTML pe care pe care

doreşti să-l defineştidoreşti să-l defineşti, prop, propririetetatea este atea este atributatributulul oe care oe care doreşti să-l schimbidoreşti să-l schimbi, , şi fiecare proprietate poate lua o şi fiecare proprietate poate lua o valoare. Proprietatea şi valoarea sunt separate prin (;) şi valoare. Proprietatea şi valoarea sunt separate prin (;) şi cuprinse între acoladecuprinse între acolade::

body {color: black}body {color: black}Note:Note: Dacă valoarea este formată din mai multe cuvinte, Dacă valoarea este formată din mai multe cuvinte,

atunci aceasta trebuie cuprinsă între ghilimeleatunci aceasta trebuie cuprinsă între ghilimele:: p {font-family: "sans serif"}p {font-family: "sans serif"}Dacă doreşti să specifici mai mult decât o proprietate, trebuie Dacă doreşti să specifici mai mult decât o proprietate, trebuie

să separi fiecare proprietate prin (;). Exemplul următor un să separi fiecare proprietate prin (;). Exemplul următor un paragraf cu text centrat şi colorat roşu:paragraf cu text centrat şi colorat roşu:

p {text-align:center;color:red}p {text-align:center;color:red}

EXEMPLUL 1 (fişier extern .css):EXEMPLUL 1 (fişier extern .css):

Rezultatul este un chenar de forma de mai jos

EXEMPLUL 2 (fişier extern .css)EXEMPLUL 2 (fişier extern .css)

<html><html><head><head><link rel="stylesheet" <link rel="stylesheet"

type="text/css"type="text/css"href="ex2.css" />href="ex2.css" /></head></head><body><body><h1>This is a header 1</h1><h1>This is a header 1</h1><hr /><hr /><p>You can see that the style <p>You can see that the style sheet formats the text</p>sheet formats the text</p><p><a <p><a

href="http://www.w3schools.com" href="http://www.w3schools.com" target="_blank">This is a target="_blank">This is a

link</a></p>link</a></p></body></body></html></html>

body {background-color: tan}body {background-color: tan}h1 {color:maroon; font-size:20pt}h1 {color:maroon; font-size:20pt}hr {color:navy}hr {color:navy}p {font-size:11pt; margin-left: 15px}p {font-size:11pt; margin-left: 15px}a:link {color:green}a:link {color:green}a:visited {color:yellow}a:visited {color:yellow}a:hover {color:black}a:hover {color:black}a:active {color:blue}a:active {color:blue}

Fişierul pagina.htmlFişierul ex2.css

Rezultatul

EXEMPLUL 3: (foaie internă)EXEMPLUL 3: (foaie internă)<html><html><head><head>

<style type="text/css"><style type="text/css">body {background-color: yellow}body {background-color: yellow}h1 {background-color: #00ff00}h1 {background-color: #00ff00}h2 {background-color: transparent}h2 {background-color: transparent}p {background-color: rgb(250,0,255)}p {background-color: rgb(250,0,255)}</style></style>

</head></head>

<body><body>

<h1>This is header 1</h1><h1>This is header 1</h1><h2>This is header 2</h2><h2>This is header 2</h2><p>This is a paragraph</p><p>This is a paragraph</p>


Legătura dintre HTML şi CSS se face prin elementul STYLE care utilizează tag-urile <style> şi </style>. Cele două tag-uri vor fi aşezate între <head> şi </head>

EXEMPLUL 4: (foaie internă)EXEMPLUL 4: (foaie internă)<html><html>

<head><head><style type="text/css"><style type="text/css">h1 {color: #00ff00}h1 {color: #00ff00}h2 {color: #dda0dd}h2 {color: #dda0dd}p {color: rgb(0,0,255)}p {color: rgb(0,0,255)}</style></style></head></head>

<body><body><h1>This is header 1</h1><h1>This is header 1</h1><h2>This is header 2</h2><h2>This is header 2</h2><p>This is a paragraph</p><p>This is a paragraph</p></body></body>

</html></html>

EXEMPLUL 5 - ListeEXEMPLUL 5 - Liste<html><html><head><head><style type="text/css"><style type="text/css">ol.decimal {list-style-type: decimal}ol.decimal {list-style-type: decimal}ol.lroman {list-style-type: lower-roman}ol.lroman {list-style-type: lower-roman}ol.uroman {list-style-type: upper-roman}ol.uroman {list-style-type: upper-roman}ol.lalpha {list-style-type: lower-alpha}ol.lalpha {list-style-type: lower-alpha}ol.ualpha {list-style-type: upper-alpha}ol.ualpha {list-style-type: upper-alpha}</style></style></head></head>

<body><body><ol class="decimal"><ol class="decimal"><li>Coffee</li><li>Coffee</li><li>Tea</li><li>Tea</li><li>Coca Cola</li><li>Coca Cola</li></ol></ol>

<ol class="lroman"><ol class="lroman"><li>Coffee</li><li>Coffee</li><li>Tea</li><li>Tea</li><li>Coca Cola</li><li>Coca Cola</li></ol></ol>

<ol class="uroman"><ol class="uroman"><li>Coffee</li><li>Coffee</li><li>Tea</li><li>Tea</li><li>Coca Cola</li><li>Coca Cola</li></ol></ol>

<ol class="lalpha"><ol class="lalpha"><li>Coffee</li><li>Coffee</li><li>Tea</li><li>Tea</li><li>Coca Cola</li><li>Coca Cola</li></ol></ol>

<ol class="ualpha"><ol class="ualpha"><li>Coffee</li><li>Coffee</li><li>Tea</li><li>Tea</li><li>Coca Cola</li><li>Coca Cola</li></ol></ol></body></body>

</html></html>

Exemplul 6 - TabeleExemplul 6 - Tabele<html><html><head><head><style type="text/css"><style type="text/css">table.onetable.one{{table-layout: automatictable-layout: automatic}}table.twotable.two{{table-layout: fixedtable-layout: fixed}}</style></style></head></head><body><body>

<table class="one" border="1" width="100%"><table class="one" border="1" width="100%"><tr><tr><td <td

width="20%">100000000000000000000000width="20%">1000000000000000000000000000</td>0000</td>

<td width="40%">10000000</td><td width="40%">10000000</td><td width="40%">100</td><td width="40%">100</td></tr></tr></table></table>

<table class="two" border="1" width="100%"><table class="two" border="1" width="100%"><tr><tr><td <td

width="20%">100000000000000000000000width="20%">1000000000000000000000000000</td>0000</td>

<td width="40%">10000000</td><td width="40%">10000000</td><td width="40%">100</td><td width="40%">100</td></tr></tr></table></table>


BibliografieBibliografie

http://www.w3schools.com/http://www.w3schools.com/ Tudor Sorin, Vlad HuţanuTudor Sorin, Vlad Huţanu,, Crearea şi Crearea şi

programarea paginilor Web, Editura programarea paginilor Web, Editura LL&&SS Soft, 2003 Soft, 2003

Marcel Homorodeanu, Irina Marcel Homorodeanu, Irina Iosupescu, Internet Iosupescu, Internet şi pagini Web, şi pagini Web, Editura Niculescu, 2001Editura Niculescu, 2001

crearea şi programarea paginilor web

Documents