Documente Academic
Documente Profesional
Documente Cultură
Terminologie
Internet- reeaua mondial unic de computere interconectate prin protocoalele (regulile) de comunicare World Wide Web (abreviat WWW, sau pur i simplu Web-ul) definete un spaiu informaional, desfurat cu ajutorul Internetului Provider- firm specializat ce distribuie servicii Internet Server - aplicaie pe computer, uneori chiar un computer ntreg, care opereaz continuu n reeaua sa i ateapt solicitri din partea altor calculatoare din reea, numite client Browser- soft, ansamblu de programe pentru manevrarea informaiilor bazate pe grafic i text (Internet Explorer, Mozilla Firefox) URL (Uniform Resourse Locator)- adresa unic a unei pagini WEBalctuit din: identificator de coninut (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: spaiu pe hard+fiierele pe care le conine+adresa.
HTML
HyperText Markup Language
Un
fiier HTML este un fiier text care conine markup tags Aceste markup tags spun browserului cum s afieze pagina Un fiier HTML trebuie s aib extensia htm sau html Un fiier HTML poate fi creat utiliznd un simplu text editor: Notepad
Textul dintre tag-urile <head> i </head> reprezint informaia header-ului. Aceasta nu este afiat n fereastra browser-ului. Textul dintre tag-urile <title>este titlul documentului i este afiat n bara de titlu. Textul dintre tag-urile <body> este textul care se va afia n fereastra browser-ului. Textul dintre tag-urile <b> i </b> tags va afia textul cu litere ngroate (Bold)
Observaie
Putem
edita un fiier HTML cu uurin, folosind un editor WYSIWYG (what you see is what you get) cum ar fi FrontPage sau Dreamweaver. Dac dorim, totui, s devenim adevrai programatori de pagini Web, este recomandabil s utilizm un editor de text pentru a nva abecedarul HTML.
Atributele Tag-urilor
Tag-urile pot avea atribute. Atributele ofer informaii suplimentare unui element HTML. Urmtorul tag definete un tabel: <table>. Acestuia i putem aduga un chenar adugnd un atribul <table border="0">. Fr acesta, tabelul nu are chenar. Atributele apar ntotdeauna n perechi name/value de forma: name="value". Atributele sunt ntotdeauna specificate n tag-ul de start al elementului HTML. Atributele sunt de cele mai multe ori case-insensitive. Valorile atributelor trebuie cuprinse ntre ghilimele (duble sau simple) n rare situaii, ca n cazul n care valoarea atribului n sine conine ghilimele, este necesar folosirea apostrofurilor, ca n exemplu: name='John "ShotGun" Nelson'
<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>
<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 variable Not: Aceste tag-uri sunt folosite pentru a afia linii de program.
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
"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
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
Unele caractere au o semnificaie aparte n HTML, cum ar fi semnul (<) care definete nceputul unui tag. Dac vrei s afiai un astfel de caracter, trebuie s inserai o entitate caracter n sursa HTML. O entitate caracter are trei pri: un ampersand (&), un nume de entitate sau semnul # i un numr al entitii, construcie terminat prin (;). Pentru a afia semnul de mai mic trebuie s scriei: < or < Avantajul folosirii unui nume n locul unui numr este faptul c poate fi mai uor de amintit i identificat. Dezavantajul este c nu orice browser recunoate cele mai noi nume de entiti, n timp ce entitile numere sunt foarte bine suportate de orice browser. Numele entitilor sunt case sensitive.
Atributul Target
Cu acest atribut poi defini locul n care fiierul 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> Tag-ul Anchor i atributul Name Atributul name este utilizat pentru a se identifica o ancor. Cnd foloseti numele ancorei poi crea un link cu salt direct la o seciune specificat din pagin, m loc s foloseti bara de scroll pentru a defila pn la seciunea cutat. Sintaxa pentru denumirea unei ancore: <a name="label">Text to be displayed</a> Atributul name denumete ancora. Acesta poate fi orice text, ca de exemplu: <a name="tips">Useful Tips Section</a> Se poate sesiza c numele ancorei nu este afiat ntr-un mod special. Pentru a crea link direct la seciunea tips adugai caracterul # i numele ancorei la sfritul 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 Seciunea Useful Tips fr a mai folosi fiierul "html_links.asp" va arta aa: <a href="#tips">Jump to the Useful Tips Section</a>
Exemplu
<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 bla Chapter 2 This chapter explains bla Chapter 3 This chapter explains bla Chapter 4 This chapter explains bla
ba bla
ba bla
ba bla
ba bla
Chenare HTML
Folosind cadre (chenare) se pot afia mai multe documente HTML n aceeai fereastr a browser-ului. Fiecare document HTML se numete cadru i fiecare cadru este independent unul fa de cellalt. 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 Definete modul n care se divide fereastra n chenare. Fiecare frameset definete un numr de rnduri i un numr de coloane. Aceste valori indic cantitatea de spaiu de pe ecran ocupat de fiecare rnd i coloan. Tag-ul Frame Definete 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: Limea unui chenar poate fi exprimat i n pixeli: (cols="200,500").
Exemplu
<html> <frameset cols="25%,50%,25 %"> <frame src="frame_a.htm"> <frame src="frame_b.htm"> <frame src="frame_c.htm"> </frameset> </html>
Acest exemplu demonstreaz cum s mpari 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>
Tabele HTML
Tabele Tabelele sunt definite cu tag-ul <table>. Un tabel este mprit n rnduri (cu tag-ul <tr> )i fiecare rnd n celule ce conin date(cu tag-ul <td>). O astfel de celul poate conine 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 arta:
Atributul Border Dac nu este specificat atributul border, tabelul va fi afiat fr margine. Cteodat acest lucru este util dar uneori vrem ca marginile s fie vizibile. Pentru a afia 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 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>
Liste HTML
HTML permite definirea listelor ordonate sau neordonate. Exemple List neordonat folosete tag-ul <ul> <ul> <li>Coffee</li> <li>Milk</li> </ul> List ordonat folosete tag/ul <ol> <ol> <li>Coffee</li> <li>Milk</li> </ol>
Definirea Listelor
Definirea unei liste nu este o list de itemi. Este o list de termeni i explicaii ale acestora. Definiia listet ncepe cu tagul <dl>. Fiecare termen definit ncepe cu tag-ul <dt>. Fiecare explicaie 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>
Milk
n interiorul tag-ului <dd> se pot defini paragrafe, linii de la capt, imagini, linkuri, alte liste, etc.
Butoane Radio Sunt folosite cnd doreti ca utilizatorul s selecteze o opiune dintr-un numr limitat de opiuni. <form> <input type="radio" name="sex" value="male">Male <br> <input type="radio" name="sex" value="female"> Female </form>
Csue de verificare (checkboxes) Sunt utilizate cnd doreti ca utilizatorul s selecteze una sau mai multe opiuni dintr-un numr limitat de opiuni. <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>
Cmpuri 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 reinut c atunci cnd scriei caractere n cmpul password, browser-ul afieaz asteriscuri sau bullets n loc de caractere.
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>
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>
<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>
Background- Fundal
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 numr 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 daoreti s-o utilizezi. Dac imaginea este prea mic ea se va repeta pn cnd se umple ntreaga fereastr a browser-ului. <body background="clouds.gif"> <body background="http://www.w3s chools.com/clouds.gif"> URL-ul poate fi relativ (ca n prima linie de mai sus) sau absolut (ca n a doua linie din exemplul de mai sus).
Atenie: Dac doreti s foloseti o imagine ca background, ar trebui s te gndeti la urmtoarele: Background-ul imagine va mri timpul de ncrcare prea mult? Background-ul imagine va arta bine cu alte imagini n pagin? Background-ul imagine va arta bine cu un text colorat pe pagin? Background-ul imagine va arta bine cnd imaginea se repet pe pagin? Background-ul imagine nu va distrage atenia de la text?
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.
CSS
Cascading Style Sheets
CSS - limbaj prin care se poate realiza formatarea textului, aplicarea unui stil asupra unor elemente de acelai tip (paragraf, imagine, tabel, etc.) Stilurile definesc how to display elementele HTML Stilurile sunt n mod normal stocate n Style Sheets Stilurile sunt adugate n HTML pentru a rezolva o problem External Style Sheets te poate salva de la o grmad de munc External Style Sheets sunt stocate n fiiere CSS
Sintaxa CSS
Sintaxa CSS este format din trei pri: un selector, o proprietate i o valoare: selector {property: value} Selectorul este n mod normal elementul/tag-ul HTML pe care doreti s-l defineti, proprietatea este atributul oe care doreti 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 doreti s specifici mai mult dect o proprietate, trebuie s separi fiecare proprietate prin (;). Exemplul urmtor un paragraf cu text centrat i colorat rou: p {text-align:center;color:red}
Fiierul ex2.css
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}
Rezultatul
Legtura dintre HTML i CSS se face prin elementul STYLE care utilizeaz tag-urile <style> i </style>. Cele dou tag-uri vor fi aezate ntre <head> i </head>
<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>
EXEMPLUL 5 - Liste
<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> <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>
<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>
Exemplul 6 - Tabele
<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%">100000000000000000000000 0000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> <table class="two" border="1" width="100%"> <tr> <td width="20%">100000000000000000000000 0000</td> <td width="40%">10000000</td> <td width="40%">100</td> </tr> </table> </body> </html>
Bibliografie
http://www.w3schools.com/
Tudor
Sorin, Vlad Huanu, Crearea i programarea paginilor Web, Editura L&S Soft, 2003 Marcel Homorodeanu, Irina Iosupescu, Internet i pagini Web, Editura Niculescu, 2001