1 / 45

Crearea şi programarea paginilor WEB

Crearea şi programarea paginilor WEB. Curriculum la decizia şcolii Clasa a XII-a. Prof. Sanda Popescu. Terminologie. Internet- reţeaua mondială unică de computere interconectate prin protocoalele (regulile) de comunicare

sue
Download Presentation

Crearea şi programarea paginilor WEB

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Crearea şi programarea paginilor WEB Curriculum la decizia şcolii Clasa a XII-a Prof. Sanda Popescu

  2. Terminologie • Internet- reţeaua mondială unică de computere interconectate prin protocoalele (regulile) de comunicare • World Wide Web (abreviat WWW, sau pur şi simplu Web-ul) defineşte un spaţiu informaţional, desfăşurat cu ajutorul Internetului • Provider- firmă specializată ce distribuie servicii Internet • Server - aplicaţie pe computer, uneori chiar un computer întreg, care operează continuu în reţeaua sa şi aşteaptă solicitări din partea altor calculatoare din reţea,numite client • Browser- soft, ansamblu de programe pentru manevrarea informaţiilor bazate pe grafică şi text (Internet Explorer, Mozilla Firefox) • URL (Uniform Resourse Locator)- adresa unică a unei pagini WEB- alcătuită din: identificator de conţinut (http:// Hyper Text Transfer Protocol sau ftp:// File Transfer Protocol) şi localizare (formată din numele domeniului şi numele unei anumite resurse). Exemple: http://www.google.ro, http://www.w3schools.com • Site- ansamblul: spaţiu pe hard+fişierele pe care le conţine+adresa.

  3. HTMLHyperText Markup Language • Un fişier HTML este un fişier text care conţine markup tags • Aceste markup tags spun browser-ului cum să afişeze pagina • Un fişier HTML trebuie să aibă extensia htm sau html • Un fişier HTML poate fi creat utilizând unsimplu text editor:Notepad

  4. <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Salvaţi fişierul cu numele pagina1.htm Atenţie la extensia htm sau html Executaţi Textul dintre tag-urile <head> şi </head> reprezintă informaţia header-ului. Aceasta nu este afişatăîn fereastra browser-ului. Textul dintre tag-urile <title>este titlul documentului şi este afişată în bara de titlu. Textul dintre tag-urile <body> este textul care se va afişa în fereastra browser-ului. Textul dintre tag-urile <b> şi </b> tags va afişa textul cu litere îngroşate (Bold) Introduceţi următorul text:

  5. Observaţie • Putem edita un fişier HTML cu uşurinţă, folosind un editor WYSIWYG (what you see is what you get) cum ar fi FrontPage sau Dreamweaver. • Dacă dorim, totuşi, să devenim adevăraţi programatori de pagini Web, este recomandabil să utilizăm un editor de text pentru a învăţa abecedarul HTML.

  6. Atributele Tag-urilor • Tag-urile pot avea atribute. Atributele oferă informaţii suplimentare unui element HTML. Următorul tag defineşteun tabel: <table>. Acestuia îi putem adăuga un chenar adăugând un atribul <table border="0">. Fără acesta, tabelul nu are chenar. • Atributeleapar întotdeauna în perechi name/value de forma: name="value". • Atributelesunt întotdeauna specificate în tag-ul de start al elementului HTML. • Atributelesunt de cele mai multe ori case-insensitive. • Valorile atributelor trebuie cuprinse între ghilimele (duble sau simple) • În rare situaţii, ca în cazul în care valoarea atribului în sine conţine ghilimele, este necesară folosirea apostrofurilor, ca în exemplu: name='John "ShotGun" Nelson'

  7. Headings (Titluri) Headings sunt definite cu tag-uri <h1> … <h6>. <h1> defineşte cel mai mare heading iar <h6> defineşte heading-ul cel mai mic. <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> HTML adaugă automat linii goale înainte şi după heading. Comments in HTML Un comentariu va fi ignorat de browser. <!-- This is a comment --> Paragrafuri Paragrafurilesunt definite cu tag-ul <p> <p>This is a paragraph</p> <p>This is another paragraph</p> HTML adaugă automat linii goale înainte şi după paragraf. Sfârşit de linie Tag-ul <br> este folosit când se doreşte salt la linia următoare (enter) <p>This <br> is a para<br>graph with line breaks</p> Tag-ul <br> este folosit singur, nu trebuie închis. Titluri, paragrafe, comentarii

  8. <html> <body> <b>This text is bold</b><br> <strong> This text is strong </strong><br> <big> This text is big </big><br> <em> This text is emphasized </em><br> <i> This text is italic </i><br> <small> This text is small </small><br> This text contains <sub> subscript </sub><br> This text contains <sup> superscript </sup> </body> </html> <html> <body> <pre> This is preformatted text. It preserves both spaces and line breaks. </pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html> Formatarea textului în HTML

  9. <html> <body> <code>Computer code</code> <br> <kbd>Keyboard input</kbd> <br> <tt>Teletype text</tt> <br> <samp>Sample text</samp> <br> <var>Computer variable</var> <br> <p> <b>Note:</b> These tags are often used to display computer/programming code. </p> </body> </html> Computer code Keyboard input Teletype text Sample text Computer variableNotă: Aceste tag-uri sunt folosite pentru a afişa linii de program. Tag-uri “Computer output”

  10. Basic HTML Tags <html>Defines an HTML document <body>Defines the document's body <h1> to <h6>Defines header 1 to header 6 <p>Defines a paragraph <br>Inserts a single line break <hr>Defines a horizontal rule <!-->Defines a comment Text Formatting Tags <b>Defines bold text <big>Defines big text <em>Defines emphasized text  <i>Defines italic text <small>Defines small text <strong>Defines strong text <sub>Defines subscripted text <sup>Defines superscripted text <ins>Defines inserted text <del>Defines deleted text <s>Deprecated. Use <del> instead <strike>Deprecated. Use <del> instead <u>Deprecated. Use styles instead

  11. Citations, Quotations, and Definition Tags <abbr>Defines an abbreviation <acronym>Defines an acronym <address>Defines an address element <bdo>Defines the text direction <blockquote>Defines a long quotation <q>Defines a short quotation <cite>Defines a citation <dfn>Defines a definition term "Computer Output" Tags <code>Defines computer code text <kbd>Defines keyboard text  <samp>Defines sample computer code <tt>Defines teletype text <var>Defines a variable <pre>Defines preformatted text<listing>Deprecated. Use <pre> instead <plaintext>Deprecated. Use <pre> instead<xmp>Deprecated. Use <pre> instead

  12. Caractere speciale în HTML • Unele caractere au o semnificaţie aparte în HTML, cum ar fi semnul (<) 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 HTML. • O entitate caracter are trei părţi: un ampersand (&), un nume de entitate sau semnul # şi un număr al entităţii, construcţie terminată prin (;). • Pentru a afişa semnul de “mai mic” trebuie să scrieţi: &lt; or &#60; • 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 recunoaşte cele mai noi nume de entităţi, în timp ce entităţile numere sunt foarte bine suportate de orice browser. • Numele entităţilor sunt case sensitive. 

  13. Crearea link-urilor în HTML Tag-ul “ancoră” şi atributul Href HTML foloseşte tag-ul <a> (anchor) pentru a crea un link spre un alt document. • O ancoră poate direcţiona spre un alt produs: o pagină HTML, o imagine, un fişier sunet, un film, etc. • Sintaxa:  <a href="url">Text to be displayed</a> Atributul hrefeste utilizat pentru a specifica adresa documentului spre care se face link-ul, şi cuvintele care vor apărea între tag-ul de început si cel de sfârşit vor fi afişate ca hyperlink. Această ancoră defineşte un link spre W3Schools: <a href="http://www.w3schools.com/">Visit W3Schools!</a> • Afişarea se va face de către browser în felul următor:Visit W3Schools!

  14. Atributul Target Cu 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 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>

  15. <html> <body> <p> <a href="#C4">See also Chapter 4.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p> </body> </html> See also Chapter 4. Chapter 1 This chapter explains ba bla bla Chapter 2 This chapter explains ba bla bla Chapter 3 This chapter explains ba bla bla Chapter 4 This chapter explains ba bla bla Exemplu

  16. Folosind cadre (chenare) se pot afişa mai multe documente HTML în aceeaşi fereastră a browser-ului. Fiecare document HTML se numeşte cadru şi fiecare cadru este independent unul faţă de celălalt. Dezavantaje: - Realizatorul paginii web trebuie să ţină cont de mai multe documente HTML Este mai dificil să listezi la imprimantă întreaga pagină. Tag-ul Frameset Defineşte modul în care se divide fereastra în chenare. Fiecare frameset defineşte un număr de rînduri şi un număr de coloane. Aceste valori indică cantitatea de spaţiu de pe ecran ocupată de fiecare rând şi coloană. Tag-ul Frame Defineşte ce document HTML se pune în fiecare chenar. Exemplu: <frameset cols="25%,75%">    <frame src="frame_a.htm">    <frame src="frame_b.htm"> </frameset> Notă:Lăţimea unui chenar poate fi exprimată şi în pixeli: (cols="200,500"). Chenare HTML

  17. Exemplu <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>

  18. Acest exemplu demonstrează cum să împarţi pagina în trei chenare structurate pe linii şi coloane. • <html> • <frameset rows="50%,50%"> • <frame src="frame_a.htm"> • <frameset cols="25%,75%"> • <frame src="frame_b.htm"> • <frame src="frame_c.htm"> • </frameset> • </frameset> • </html>

  19. Navigarea între chenareAcest 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 “tryhtml_contents.htm" conţine trei link-uri.Codul sursă al acestor link-uri este: <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_c.htm" target ="showframe">Frame c</a>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>

  20. Tabele Tabelele sunt definite cu tag-ul <table>. Un tabel este împărţit în rânduri (cu tag-ul <tr> )şi fiecare rând în celule ce conţin date(cu tag-ul <td>). O astfel de celulă poate conţine text, imagini, liste, paragrafe, form-uri, tabele, rigle orizontale, etc. <table border="1"> <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> Un astfel de tabel va arăta: Tabele HTML

  21. Capete de tabel Sunt 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> 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>

  22. Liste HTML • HTML permite definirea listelor ordonate sau neordonate. • Exemple Listă neordonată foloseşte tag-ul <ul> <ul> <li>Coffee</li> <li>Milk</li> </ul> Listă ordonată foloseşte tag/ul <ol> <ol> <li>Coffee</li> <li>Milk</li> </ol>

  23. Definirea unei liste nu este o listă de itemi. Este o listă de termeni şi explicaţii ale acestora. Definiţia listet începe cu tag-ul <dl>. Fiecare termen definit începe cu tag-ul <dt>. Fiecare explicaţie a termenilor începe cu tag-ul <dd>. <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl> Aşa apare în browser: Coffee Black hot drink Milk White cold drink În interiorul tag-ului <dd> se pot defini paragrafe, linii de la capăt, imagini, link-uri, alte liste, etc. Definirea Listelor

  24. Forme O formă este o zonă care conţine elemente formă. Elementele formă permit utilizatorului să introducă informaţii (cum ar fi texte, meniuri, butoane radio, casuţe de verificare (checkboxes), etc.) într-o formă. O formă este definită cu tag-ul <form>. <form> <input> <input> </form> Intrări Cea mai utilizată tag-formă este tag-ul <input>. Tipul datei introduse este specificat de tipul atributului. Vom explica cele mai utilizate tipuri de date. Câmpuri Text Sunt utilizate pentru a introduce texte, numere într-o formă. <form> First name:<input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> Forme şi intrări în HTML Lungimea implicită a unui câmp text este de 20 caractere

  25. Butoane Radio Sunt folosite când doreşti ca utilizatorul să selecteze o opţiune dintr-un număr limitat de opţiuni. <form> <input type="radio" name="sex" value="male">Male <br> <input type="radio" name="sex" value="female"> Female </form> Căsuţe de verificare(checkboxes) Sunt utilizate când doreşti ca utilizatorul să selecteze una sau mai multe opţiuni dintr-un număr limitat de opţiuni. <form> I have a bike: <input type="checkbox" name="vehicle" value="Bike" /> <br /> I have a car: <input type="checkbox" name="vehicle" value="Car" /> <br /> I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> </form>

  26. Câmpuri Password <html> <body> <form action=""> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form> </body> </html> Efect la browser: De reţinut că atunci când scrieţi caractere în câmpul password, browser-ul afişează asteriscuri sau bullets în loc de caractere.

  27. Liste ascunse <html> <body> <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected="selected">Fiat</option> <option value="audi">Audi</option> </select> </form> </body> </html>

  28. Acest form trimite un e-mail la W3Schools <html> <body> <form action="MAILTO:someone@w3schools.com" method="post" enctype="text/plain"> <h3>This form sends an e-mail to W3Schools.</h3> Name:<br> <input type="text" name="name" value="yourname" size="20"> <br> Mail:<br> <input type="text" name="mail" value="yourmail" size="20"> <br> Comment:<br> <input type="text" name="comment" value="yourcomment" size="40"> <br><br> <input type="submit" value="Send"> <input type="reset" value="Reset"> </form> </body> </html>

  29. Tag-ul img şi atributul Src În HTML, imaginile sunt definite cu tag-ul <img>, care nu se închide. Pentru a afişa o imagine în pagină, trebuie să utiizaţi atributul src (source). Valoarea atributului src este URL-ul imaginiipe care doriţi s-o afişaţi în pagină. Sinaxa pentru definirea imaginii: <img src="url">. URL-ul arată locaţiaunde imaginea este stocată. O imagine numită "boat.gif" localizatăîn directorul "images" din "www.w3schools.com" are URL-ul: http://www.w3schools.com/images/boat.gif. Daca imaginea este stocată pe disk, trebuie specificată calea spre aceasta. Atributul Alt Atriburul alt este utilizat pentru a defini un text alternativ unei imagini. Valoarea atributului alt este un text definit de autorul paginii: <img src="boat.gif" alt="Big Boat"> Atributul "alt" spune cititorului ce lipseşte din pagină dacă browser-ul nu poate încărca imaginea.Browser-ul va afişa în acest caz textul în locul imaginii. Este o bună practică să includeţi atributul alt pentru fiecare imagine din pagină, astfel încât cei ce folosesc doar un browser text-only să poată folosi pagina creată de voi. Inserarea imaginilor în HTML

  30. Imagine ca link • <html> • <body> • <p> • You can also use an image as a link: • <a href="lastpage.htm"> • <img border="0" src="buttonnext.gif" width="65" height="38"> • </a> • </p> • </body> • </html>

  31. Imagine folosită ca background • <html> • <body background="background.jpg"> • <h3>Look: A background image!</h3> • <p>Both gif and jpg files can be used as HTML backgrounds.</p> • <p>If the image is smaller than the page, the image will repeat itself.</p> • </body> • </html>

  32. Fundal Tag-ul <body> are două atribute prin care se poate specifica fundalul unei pagini. Acesta poate fi color sau o imagine. Bgcolor Atributul bgcolor atribuie o culoare specificată pentru fundalul paginii. Valoarea acestui atribut poate fi un număr hexazecimal, o valoare RGB, sau un nume de culoare: <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black"> Background Atributul background specifică o imagine pentru fundalul unei pagini HTML. Valoarea acestui atribut este URL-ul imaginii pe care daoreşti s-o utilizezi. Dacă imaginea este prea mică ea se va repeta până când se umple întreaga fereastră a browser-ului. <body background="clouds.gif"> <body background="http://www.w3schools.com/clouds.gif"> URL-ulpoate fi relativ (ca în prima linie de mai sus) sau absolut (ca în a doua linie din exemplul de mai sus). Background- Fundal

  33. Atenţie: Dacă doreşti să foloseşti o imagine ca background, ar trebui să te gândeşti la următoarele: • Background-ul imagine va mări timpul de încărcare prea mult? • Background-ul imagine va arăta bine cu alte imagini în pagină? • Background-ul imagine va arăta bine cu un text colorat pe pagină? • Background-ul imagine va arăta bine cînd imaginea se repetă pe pagină? • Background-ul imagine nu va distrage atenţia de la text?

  34. Culori 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.

  35. Derularea textului în controale marquee Controlul marquee este un marcaj de efect ce determină animarea unui text într-o pagină Web. Exemplu: • <marquee> <h1> Text la plimbare</h1> </marquee> Pentru a controla direcţia de deplasare se foloseşte atributul direction care poate lua următoarele valori: left (implicit- de la stânga la dreapa), right, down, up. Atributul behavior are trei valori: Scroll (implicit- textul se plimbă pe ecran, se pierde la stânga şi reapare în dreapta) Slide- textul se opreşte la marginea opusă apariţiei Alternate- se deplasează alternativ, stânga, dreapta, fără a părăsi ecranul Exemplu: • <marquee behavior=slide direction=right> <h1> text plimbaret </h1> </marquee>

  36. CSS Cascading Style Sheets • CSS - limbaj prin care se poate realiza formatarea textului, aplicarea unui stil asupra unor elemente de acelaşi tip (paragraf, imagine, tabel, etc.) • Stilurile definesc how to displayelementele HTML • Stilurile sunt în mod normal stocate în Style Sheets • Stilurile sunt adăugate în HTML pentru a rezolva o problemă • External Style Sheetste poate salva de la o grămadă de muncă • External Style Sheets sunt stocate în fişiere CSS

  37. Sintaxa CSS Sintaxa CSS este formată din trei părţi: un selector, o proprietateşi o valoare: • selector {property: value} Selectoruleste în mod normalelementul/tag-ul HTML pe care doreşti să-l defineşti, proprietatea este atributuloe care doreşti să-l schimbi, şi fiecare proprietate poate lua o valoare. Proprietatea şi valoarea sunt separate prin (;) şi cuprinse între acolade: • body {color: black} Note:Dacă valoarea este formată din mai multe cuvinte, atunci aceasta trebuie cuprinsă între ghilimele: • p {font-family: "sans serif"} Dacă doreşti să specifici mai mult decât o proprietate, trebuie să separi fiecare proprietate prin (;). Exemplul următor un paragraf cu text centrat şi colorat roşu: • p {text-align:center;color:red}

  38. EXEMPLUL 1 (fişier extern .css): Rezultatul este un chenar de forma de mai jos

  39. <html> <head> <link rel="stylesheet" type="text/css" href="ex2.css" /> </head> <body> <h1>This is a header 1</h1> <hr /> <p>You can see that the style sheet formats the text</p> <p><a href="http://www.w3schools.com" target="_blank">This is a link</a></p> </body> </html> body {background-color: tan} h1 {color:maroon; font-size:20pt} hr {color:navy} p {font-size:11pt; margin-left: 15px} a:link {color:green} a:visited {color:yellow} a:hover {color:black} a:active {color:blue} EXEMPLUL 2 (fişier extern .css) Fişierul pagina.html Fişierul ex2.css Rezultatul

  40. EXEMPLUL 3: (foaie internă) <html> <head> <style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html> 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>

  41. EXEMPLUL 4: (foaie internă) <html> <head> <style type="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} </style> </head> <body> <h1>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p> </body> </html>

  42. <html> <head> <style type="text/css"> ol.decimal {list-style-type: decimal} ol.lroman {list-style-type: lower-roman} ol.uroman {list-style-type: upper-roman} ol.lalpha {list-style-type: lower-alpha} ol.ualpha {list-style-type: upper-alpha} </style> </head> <body> <ol class="decimal"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="lroman"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="uroman"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="lalpha"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> <ol class="ualpha"> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ol> </body> </html> EXEMPLUL 5 - Liste

  43. <html> <head> <style type="text/css"> table.one { table-layout: automatic } table.two { table-layout: fixed } </style> </head> <body> <table class="one" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <table class="two" border="1" width="100%"> <tr> <td width="20%">1000000000000000000000000000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> </body> </html> Exemplul 6 - Tabele

  44. Bibliografie • http://www.w3schools.com/ • Tudor Sorin, Vlad Huţanu, Crearea şi programarea paginilor Web, Editura L&S Soft, 2003 • Marcel Homorodeanu, Irina Iosupescu, Internet şi pagini Web, Editura Niculescu, 2001

More Related