Sunteți pe pagina 1din 45

Crearea i programarea paginilor WEB

Curriculum la decizia colii Clasa a XII-a


Prof. Sanda Popescu

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

Introducei urmtorul text:


<html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html> Salvai fiierul cu numele pagina1.htm Atenie la extensia htm sau html Executai

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'

Titluri, paragrafe, comentarii


Headings (Titluri) Headings sunt definite cu tag-uri <h1> <h6>. <h1> definete cel mai mare heading iar <h6> definete 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 browser. <!-- This is a comment --> de Paragrafuri Paragrafurile sunt definite cu tagul <p> <p>This is a paragraph</p> <p>This is another paragraph</p> HTML adaug automat linii goale nainte i dup paragraf. Sfrit de linie Tag-ul <br> este folosit cnd se dorete salt la linia urmtoare (enter) <p>This <br> is a para<br>graph with line breaks</p> Tag-ul <br> este folosit singur, nu trebuie nchis.

<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>

Formatarea textului n 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>

Tag-uri Computer output


<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 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

Caractere speciale n HTML


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: &lt; or &#60; 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.

Crearea link-urilor n HTML


Tag-ul ancor i atributul Href HTML folosete tag-ul <a> (anchor) pentru a crea un link spre un alt document. O ancor poate direciona spre un alt produs: o pagin HTML, o imagine, un fiier sunet, un film, etc. Sintaxa: <a href="url">Text to be displayed</a> Atributul href este utilizat pentru a specifica adresa documentului spre care se face link-ul, i cuvintele care vor aprea ntre tag-ul de nceput si cel de sfrit vor fi afiate ca hyperlink. Aceast ancor definete un link spre W3Schools: <a href="http://www.w3schools.com/">Visit W3Schools!</a> Afiarea se va face de ctre browser n felul urmtor:Visit
W3Schools!

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>

Navigarea ntre chenare


Acest exemplu arat cum s navigai printre chenare. Chenarul de navigare conine o list de link-uri cu al doilea chenar ca tint. Fiierul cu numele tryhtml_contents.htm" conine 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 arta 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 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>

Aa apare n browser: Coffee

Milk

Black hot drink

n interiorul tag-ului <dd> se pot defini paragrafe, linii de la capt, imagini, linkuri, alte liste, etc.

White cold drink

Forme i intrri n HTML


Forme O form este o zon care conine elemente form. Elementele form permit utilizatorului s introduc informaii (cum ar fi texte, meniuri, butoane radio, casue de verificare (checkboxes), etc.) ntr-o form. O form este definit cu tag-ul <form>. <form> <input> <input> </form>
Intrri 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. Cmpuri 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>

Lungimea implicit a unui cmp text este de 20 caractere

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>

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>

Inserarea imaginilor n HTML


Tag-ul img i atributul Src n HTML, imaginile sunt definite cu tag-ul <img>, care nu se nchide. Pentru a afia o imagine n pagin, trebuie s utiizai atributul src (source). Valoarea atributului src este URL-ul imaginii pe care dorii s-o afiai n pagin. Sinaxa pentru definirea imaginii: <img src="url">. URL-ul arat locaia unde imaginea este stocat. O imagine numit "boat.gif" localizat n directorul "images" din "www.w3schools.com" are URLul: http://www.w3schools.com/imag es/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 lipsete din pagin dac browserul nu poate ncrca imaginea. Browser-ul va afia n acest caz textul n locul imaginii. Este o bun practic s includei atributul alt pentru fiecare imagine din pagin, astfel nct cei ce folosesc doar un browser text-only s poat folosi pagina creat de voi.

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>

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>

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.

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 direcia de deplasare se folosete atributul direction care poate lua urmtoarele valori: left (implicit- de la stnga la dreapa), right, down, up. Atributul behavior are trei valori: Scroll (implicit- textul se plimb pe ecran, se pierde la stnga i reapare n dreapta) Slide- textul se oprete la marginea opus apariiei Alternate- se deplaseaz alternativ, stnga, dreapta, fr a prsi ecranul Exemplu: <marquee behavior=slide direction=right> <h1> text plimbaret </h1> </marquee>

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}

EXEMPLUL 1 (fiier extern .css):

Rezultatul este un chenar de forma de mai jos

EXEMPLUL 2 (fiier extern .css)


Fiierul pagina.html
<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>

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

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>

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>

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>

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

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