Mic tutorial de Photoshop

Folosesc Photoshop de cativa ani. Nu stiu sa fac cele mai tari chestii, dar stiu sa fac un layout si sa il pun in HTML.

Am instalat Adobe Photoshop CS4, dar oricare varianta e buna, ca nu folosesc ultimul racnet in materie de tooluri. 

Photoshop lucreaza cu layere. Sa zicem ca punem masa. Masa este un layer(strat). Fata de masa va fi layerul de peste. Fiecare farfurie este un alt layer. O farfurie intinsa e un layer care sta sub layerul reprezentat de farfuria de supa. Asa e si in PS. Layere se suprapun, se ascund, se intesecteaza.

A propos de tooluri, cele mai utile sunt:

– selector de layere
 - tool de decupare
 - zoom
 - guma de sters
– text
 - brush (pensula)
 - color picker – selectam o culoare de pe imaginea curenta
– crop – taie o parte din imaginea curenta, stergand restul
 - magic wand – selecteaza anumite zone, cu culoare identica sau aproape de culoarea selectata
 - lasou – decupeaza neregulat
 - dreptunghi

Toolurile care au o sagetica in coltul din dreapta, jos, au si alte tooluri “surori”. Daca dam click dreapta pe ele, nu se deschide un meniu cu acestea din urma.

Foarte util este toolul de “feliere” – Slice Tool. Practic, taie anumite parti din imagine, generand imagini mai mici si o sa vedem cum se face intr-un post viitor.

Mai sunt si toolurile de forme predefinite, pe langa cel de dreptunghi.

Atunci cand dam click pe un tool, in partea de sus a ecranului va aparea un meniu contextual, pentru diverse alte setari.

Facem un document nou: File->New si setam latime si inaltime. Pentru un site, va trebui sa calculam latimea in functie de rezolutia monitorului pentru majoritatea dintre vizitatori. Spre exemplu, daca facem un site pentru matrimoniale, cautam pe www.trafic.ro dupa cuvantul “matrimoniale”. Primul loc e ocupat de siteul anuntul.ro, dar acesta nu e specializat pe matrimoniale, deci primeste vizite si din alte domenii. Urmatorul este matrimoniale.ro, la ale carui detalii ne si uitam.

Coboram in partea stanga, jos, si dam click pe “Rezolutie”, din boxul “Sistem”. Vedem ca majoritatea vizitatorilor necesita minim 1024 px latime, sau rezolutii mai mari. Inseamna ca siteul nostru va trebui sa intre in 1024 px. De fapt, mai putini. De ce? Mai jos avem prima pagina din google.ro, pentru Mozilla Firefox si pentru Internet Explorer.

Daca ne uitam in partea dreapta, o parte din pixeli sunt “mancati” de bara de scroll. Asadar, vom calcula o latime mai mica de 1024px, pentru a evita aparitia scrollului orizontal. 900 px e o latime suficienta. Vom scrie valoarea de 1100, pentru a avea cate 100 px liberi si in stanga si in dreapta si a lucra mai usor. Inaltime poate fi oricat, pentru ca in web, paginile sunt atat de inalte, cat continut e in ele. Punem 700 px, doar ca sa fie.

Ziceam ca lasam spatii in stanga si in dreapta, deci, dupa ce am facut imaginea de 1100 px, ne ducem cu selectorul de layere pe liniarul din stanga, tinem apasat si tragem. Sub mouse va aparea o bara albastra, pe care o ducem pana la 100 px. Mai tragem o bara pana la 1000px. Barele albastre se numesc guidelines. Intre ele, am lasat 900 px, exact cat va fi latimea paginii noastre.

In acest spatiu, punem tot felul de forme. Sa incepem pe pasi:
1. Dam right click pe toolul cu dreptunghiul (rectangle) si alegem Ellipse Tool. Vedem in bara de sus, de unde putem alege si alta forma, alta culoare, etc.
2. Punem mouseul pe foaia alba si tragem pana facem un cerc de dimensiunea dorita.
3. Apasam pe pointer (selectorul de layere). Sus va aparea meniul contextual pentru acesta. Bifam auto-select si selectam layer. Bifam si show transform controls.
4. Dam click pe cercul desenat si apoi ii modificam dimensiunea tragand de una din margini. In meniul contextual trebuie sa apasam pe bifa pentru a pastra dimensiunea noua. Daca nu dorim, vom apasa pe butonul de langa bifa. Daca nu apasam pe nimic, nu vom putea folosi alt tool.

Sa modificam cercul:
1. In partea dreapta a ecranului, ar trebui sa fie lista de layere. Daca nu se vede, apasam F7, pana apare.
2. Cercul nostru se va numi Shape 1. Dam click dreapta pe nume si alegem blending options. Aici incepe distractia.
3. Dam click pe toate itemele din partea stanga si apoi modificam valori in partea dreapta. Pentru ca am deja “preferinte”, voi folosi drop shadow. Aleg unghiul din care bate lumina si dimensiunile pentru umbra. Folosesc apoi bevel and emboss si ma joc cu dimensiunile pana fac un buton dodolit. Dau ok.

Toate proprietatile din blending options sunt spectaculoase si se pot face o gramada de minunatii in PS.

Acum sa trecem la ceva mai serios. Luam poza urmatoare, a unei fete fara machiaj. O deschidem in PS, mergand la meniul File->open.

Evident, o vom machia. Pasii sunt:
1. Ne ducem, in dreapta, la layers. In partea de jos a panelului, sunt mai multe iconite. Apasam pe layer nou/new layer. Acum avem, deasupra, un layer nou, invizibil.
2. Alegem toolul brush si culoarea rosie. Alegem culoarea apasand pe patratelele colorate de la baza listei de tooluri din stanga. Acolo unde sunt buzele, desenam cu culoarea rosie. Daca va e mai usor, folositi zoom, pentru a mari imaginea pana deasupra buzelor.
3. Daca ati depasit conturul, folositi guma.
4. Layerul pe care am desenat buzele rosii se numeste Layer 1. Dam click dreapta pe nume si apoi blending options.
5. In partea stanga a ferestrei, alegem alt blending mode si alta opacitate. Ne jucam cu optiunile pana gasim culoarea potrivita. Ok! Acum e rujata!
6. Facem un layer nou, ca la pasul 1.
7. Alegem brush si culoarea verde (sau oricare alta culoare). Machiem in jurul ochilor si facem blending options pe layer.
8. La fel, cu un layer nou, cu brush negru, putem folosi dermatograf si mascara.
9. Chiar daca nu e ordinea corecta, putem aplica acum un “fond de ten”. Daca vrem ca fondul de ten sa stea sub machiaj, vom da click pe layer si il vom trage sub celelalte.
10. Sa fim fancy, sa punem si un blush! Adica rosu in obraji! Sa vedem ce a iesit!

                          Inainte                                                                 Dupa

Asta numesc eu machiaj in 5 minute!:))

Tema

1. Incercati toate toolurile din blending options pe un text si pe o forma de stea de serif.
2. Faceti suvite fetei din poza.

Posted in Curs programare web | Tagged , , , , , , , | Comments Off

Div vs Table

De cand au aparut <div>-urile, lumea s-a schimbat! E un fel de “Marea Schisma”. Iubitorii <table>-urilor au incercat sa se tina tare pe pozitie si sa nu is tradeze credinta, pe cand ceilalti s-au dat de partea <div>-urilor cu incredere.

Mie mi-a fost tare greu sa trec de la <table> la <div>. Ambele sunt containere, poti pune in ele diverse elemente. Ca si avantaje:

Table – avantaje

  • elementele din el se pot organiza mai bine
  • nu prea apar probleme de compatibilitate intre browsere
  • altele – astept pareri in comentarii

Div – avantaje

  • e mai elegant
  • se  pot suprapune mai bine elementele
  • suporta si layouturi nestandardizate
  • e… web2.0 (echivalentul modei bio-eco de acum)
  • alte avantaje, tot la comentarii, va rog, si am sa le adaug aici

Acum, partea concreta! Sa zicem ca avem un site care arata asa:

Ca sa il facem cu tabele, trebuie sa folosim urmatorul cod:

<table>
   <tr>
    <td colspan="2"> <!-- grupam 2 coloane -->
      Header
    </td>
  </tr>
  <tr>
    <td>
      Meniu
    </td>
    <td>
      Continut
    </td>
  </tr>
  <tr>
    <td colspan="2">
      Footer
    </td>
  </tr>
</table>

Si cu divuri:

<div id="container">
  <div id="header">
    Header
  </div>
  <div id="middle">
    <div id="meniu">
      Meniu
    </div>
    <div id="continut">
      Continut
    </div>
  </div>
  <div id="footer">
    Footer
  </div>
</div>

Iar CSS-ul:
#container{
  position:absolute;
  width:500px;
  left:50%;
  margin-left:-250px;
}
#header{
  width:100%;
  float:left;
}
#middle{
  width:100%;
  float:left;
}
#meniu{
  float:left;
  width:150px;
}
#continut{
  float:right;
  width:350px;
}
#footer{
  width:100%;
  float:left;
}

In principiu, sunt mai multe moduri de a face treaba asta cu div-uri. Din ce am observat eu, cu metoda asta merge pe browsere fara probleme, dar astept si alte metode.

Dupa cum se vede in CSS, am centrat div-ul cu id-ul “container”. Asta e o metoda “desteapta”, care merge in majoritatea cazurilor. Sa vedem inca o data codul:

    position:absolute;
  width:500px;
  left:50%;
  margin-left:-250px;

Intai, il punem in pozitie absoluta pe pagina. Daca ar fi relativa, ar tine cont de celelalte elemente. Pasul 2 e sa punem o latime fixa, in cazul nostru, 500px.
Cand facem left:50%, punem marginea din stanga a div-ului la mijlocul ecranului:

Cu negru e pagina web, iar cu verde este divul nostru.
Cu margin-left:-250px, tragem div-ul 250 px la stanga, astfel incat mijlocul lui sa se suprapuna pe mijlocul paginii web, astfel:

Tema

Sa se faca cu div-uri si cu tabele, folosind si css si imagini, urmatoarele layouturi:

1.

2.

Posted in Curs programare web | Tagged , , , , , , | Comments Off

CSS – Cascading Style Sheets

CSS este un standard pentru formatarea elementelor unui document. Avantajele folosirii sunt definirea stilurilor de prezentare intr-un singur loc, modificare foarte usoara si pozitionarea continutului cu mare precizie.

Comentariile in CSS se scriu intre /* si */
/* acesta este un comentariu CSS */

Ca sa introducem cod CSS in pagina, avem doua solutii:
1. direct in sectiunea <head></head> a paginii, adaugand:
<style type="text/css">
/* aici se scrie codul CSS */
</style>

2. apeland un fisier extern, tot in sectiunea <head></head> a paginii:
<link rel="stylesheet" href="adresa fisierului *.css" type="text/css" />

Sintaxa CSS este formata din trei parti: un selector, o proprietate si o valoare.
selector {proprietate: valoare}

Selectorul poate fi:

1. un tag
Cand selectorul e un tag, vom scrie direct numele tagului, astfel:
body {color: blue} /* va face textul din pagina albastru*/
p{text-align:center;
color:red;
} /* in toate paragrafele din pagina (deci oriunde va gasi tagul p) va alinia textul la centru si il va face rosu */

2. o clasa
Putem grupa mai multe elemente intr-o clasa, pentru a le da aceleasi proprietati. Ca sa marcam faptul ca acele elemente apartin unei clase, vom adauga in taguri atributul class:
<p class="textAlbastru">....</p>
<h2 class="textAlbastru">...</h2>
<input type="text" class="textAlbastru"/>
In css vom scrie clasa cu punct inaintea numelui, deci:
.textAlbastru{
color:blue;
}

3. un id
ID-ul este unic, iar atunci cand selectorul va fi un id, inseamna ca aplicam un anume stil unui singur element de pe pagina.
<h1 id="titluRosu">...</h1>
In css, id-ul il vom nota cu diez (#) inaintea numelui. Vom avea:
#titluRosu{
color:red;
}
Celelalte elemente h1 de pe pagina nu vor avea textul rosu.

Selectorii se pot grupa cu virgula :
h1,h2,h3,h4,h5,h6 { color: green }

Pseudoselectorii sunt selectori speciali care se aplica anumitor elemente, se exemplu linkurile:
A:link {color:blue;}
A:hover {color:red;}

In plus, putem sa adaugam stiluri CSS si in codul HTML, direct in declaratia tagurilor, folosind atributul style:
<div style='font-size:10px;color:red;'>….</div> <!—declaratie inline-->

Stiluri utilizate cel mai des:

Font & Text

font-family: tip font;
font-size: dimensiune font;
font-style: italic, normal, oblique;
font-weight: bold, bolder, normal;
text-align: left, right, center, justify;
text -decoration: underline, overline, line-through;

Border

border-color: /*setam culoarea, fie cu denumire, fie cu cod*/;
border-style:none,solid, dotted, dashed;
border-top-color
border-top-style
border-bottom-color
border-bottom-style
border-left-color
border-left-style
border-right-color
border-right-style
Sau, pur si simplu:
border: dimensiune tip culoare;
border: 1px solid black;

Proprietati diverse

width: -auto sau definit de utilizator
height:-auto sau definit de utilizator
float: -left, right, none
clear: -all, both, left, right, none
position:-absolute, fixed, relative, static
cursor: – hand, crosshair

Margin & Padding

margin-bottom
margin-left
margin-right
margin-top
margin: top right bottom left;
margin: 5px 3px 5px 3px; padding-bottom
padding -left
padding -right
padding -top
padding: top right bottom left;
padding: 10px 5px 8 px 5 px;

Background

background-color
background-image: url(“cale imagine”)
background-position
background-repeat: repeat-x, repeat-y, no-repeat, repeat

Exercitii

1. Pagina va avea fundalul verde, textul galben, de dimensiune 12px, fontul va fi Arial
body{
background-color:green;
color:yellow;
font-size:12px;
font-family:Arial;
}

2. Textul din headinguri va fi subliniat, bold si italic
h1, h2, h3, h4, h5{
text-decoration:underline;
font-weight:bold;
font-style:italic;
}

3. Pe fundalul paginii se va vedea o imagine care va fi centrata orizontal si vertical
body{
background-image:url(adresapoza.jpg);
background-repeat:no-repeat;
background-position:middle center;
}

4. Pe pagina sunt 5 tabele. Doar pentru unul dintre ele, care are id-ul TabelSpecial, toate celulele vor avea border roz, dublu, de 2 pixeli
#TabelSpecial td { /* se refera la toate tagurile td care se gasesc in tabelul cu id-ul TabelSpecial*/
border:2px double pink;
}

5. Linkurile nu vor fi subliniate si vor fi scrise cu rosu. Cand se va trece cu mouseul peste ele, culoarea de fundal a linkului va fi rosie, iar textul galben. Distanta de la text la marginile linkului va fi, in toate partile, de 10 px
a{
text-decoration:none;
color:red;
padding:10px; /*10 px in toate partile distanta de la text la marginile imaginare ale linkului*/
}
a:hover{/* cand trecem cu mouseul peste link */
color:yellow;
background-color:red;
} /*nu mai punem alte proprietati, deci le mosteneste pe cele definite mai sus, la a */

6. Vom face un div care va avea o imagine de dimensiune 600px x 10px, care se repeta pe verticala
<div style="background-image:url(imagini/imagine.png); background-repeat:repeat-y;">...</div>

Tema

1. un fisier care se numeste cv.html si in care faceti CV-ul propriu
2. un  fisier stil.css in care aplicati stiluri pentru cv.html
3. pozele referite in CV

CV-ul va avea un bacground: o imagine degrade, care se repeta pe orizontala, va fi scris cu gri inchis, cu font de 10, Verdana. Paragrafele vor avea distanta de la text la conturul imaginar de 10px. Se va face un link de trimitere email pe adresa de email. Linkul va fi verde si fara subliniere, iar la trecerea mouseului peste, va fi rosu si subliniat.

4. stilizati formularul din tema trecuta, astfel incat casutele de text vor avea background gri deschis, textul va fi albastru si fontul va fi Comics.

Posted in Curs programare web | Tagged , , , | Comments Off

HTML – formulare

Pe langa afisarea unor informatii, siteurile ne permit sa primim informatii de la vizitatori. Realizam acest lucru cu ajutorul formularelor.

<form></form> – Formular.  Atribute:
  - action metioneaza adresa scriptului (aflat pe server) care va interpreta formularul.  Aceste scripturi pot fi scrise in limbajele PHP, jsp, asp etc..
  - method indica metoda folosita de browser pentru transmiterea formularului. Poate lua valorile get (datele sunt trimise prin adaugarea la adresa indicata de action. Permite trimiterea unor mici cantitati de date) si post (datele sunt trimise separat si sunt permise cantitati mari de date).
- enctype – permite formului sa trimita anumite informatii sau nu. Spre exemplu, daca nu ii dam formularului enctype=”multipart/form-data”, nu putem trimite fisiere.

Un formular va arata cam asa:
<form action="fisier_procesare.php" method="metoda" enctype="tip enctype">
</form>
 <input /> 

Care o fi treaba cu metoda? Sau cand sa folosim get si cand sa folosim post?
Metoda get ne va afisa la adresa valorile campurilor. Pentru a testa asta, mergem pe Google si cautam ceva. Vedem ca in adresa apare si termenul cautat de noi. Ne e util, pentru ca, daca pastram adresa, putem sa vedem si mai tarziu rezultatele.
Evident, daca avem un formular de login, nu am vrea ca parola sa apara in adresa, atunci cand se trimite formularul. Cand nu vrem sa vedem valorile campurilor in adresa, folosim post.

Campuri din formular

Input - diverse controale din formular. In principiu, majoritatea campurilor din formular sunt inputuri. Poate avea atributele:
  - type – indica tipul datelor care vor fi introduse:
   text -text;
   submit –trimite formularul;
   reset –reseteaza formularul;
   password –parola;
   hidden -nu este vizibil, programatorul poate sa isi transmita anumite informatii;
   checkbox -caseta de validare;
   button –buton;
   radio -selectarea unui singur element dintr-un grup;
   file -fisier pentru upload;
   image -butonul va fi inlocuit cu o imagine
  - name – numele asociat campului respectiv. Este folosit la prelucrarea datelor de catre scriptul mentionat in action.
  - size – numarul de caractere vizibile din camp, nu e obligatoriu sa apara.
  - value - daca dorim sa ii dam o valoare, nu e obligatoriu sa apara.

Un input va arata cam asa:
<input type="tip" value="valoare sau nimic" name="nume" size="valoare sau nu apare"/>

Inputul e control nepereche.

Select – ne lasa sa alegem dintr-o lista. Avem posibilitatea sa afisam un text pentru fiecare optiune, dar vom lucra cu valorile optinilor. Concret:
<select name="nume">
   <option value="valoare 1">Text optiune 1</option>
   <option value="valoare 2">Text optiune 2</option>
   <option value="valoare 3">Text optiune 3</option>
   <option value="valoare 4">Text optiune 4</option>

</select>

Textarea – este o casuta de text, unde putem pune textul pe mai multe linii. Nu are atributul value, ci continutul se pune intre tagurile pereche  <textarea></textarea>
<textarea name="nume"> continut
</textarea>
Motivul pentru care textarea nu are atributul value, este faptul ca putem pune in continut si taguri html, care vor fi afisate in textarea.

Asadar, un form va arata:

<form action="script.php" method="post">
   Nume:<input type="text" name="nume"><br />
   Prenume:<input type="text" name="prenume"><br />
   <input type="submit" value="Trimite">
   <input type="reset" value="Sterge">
</form>

Avem nevoie de un buton care sa transmita informatiile, e recomandabil sa folosim un input de tip submit.

Procesarea formularelor se va face la cursul de PHP. Pana atunci, vom invata stilizarea si validarea formularului.

Tema

1. un fisier care se numeste formular.html si in care incercati exemplele din documentatie in html
2. un formular de inregistrare care va avea urmatoarele campuri: 
   nume, prenume – inputuri text
   parola – input password
   universitatea – select
   facultatea – input text
   anul de studii – input radio, cu valori de la 1 la 5
   descriere -  textarea
   poza – fisier
   de acord cu termenii si conditiile – casuta de bifare
   nume fisier curent – camp ascuns
   buton simplu, care nu trimite formularul
   buton de trimitere
   buton de resetare

Posted in Curs programare web | Tagged , , , , , | Comments Off

HTML

HTML – Hyper Text Markup Language

Atunci cand vrem sa vorbim cu un polonez, spre exemplu, trebuie sa gasim un mod de comunicare, o limba pe care sa o stim cu totii. Acelasi lucru e si cu browserul. Pentru a ii transmite ce dorim, trebuie sa folosim aceeasi limba. Practic, aceasta limba este HTML. “Cuvintele” pe care le folosim sunt:

Tag – specifica regiuni importante in documentul HTML si se noteaza astfel : <tag>Element – Un tag complet, care e compus din tag de deschidere <tag> si de inchidere </tag>. Nu toate tagurile au pereche, unele se folosesc astfel : <tag/>Atribut – Se foloseste pentru modificarea elementelor HTML. Se pot folosi atribute multiple, astfel <tag atribut=”valoare atribut”></tag>.

Scopul HTML este prezentarea informatiilor – paragrafe, fonturi, tabele, div-uri, etc. HTML este un format text proiectat pentru a putea fi citit si editat de oameni utilizand un editor de text simplu (Notepad).

O pagina HTML, are urmatoarele elemente de baza:

Tip document – <html></html>
Head – <head></head> – Aici sunt continute informatii descriptive, metadate
Body – <body></body> – Corpul paginii

Ca idee, pagina are un cap si un corp. Asa cum e in viata, corpul se vede din prima, practic, pe browser se va afisa ce e in body. Conteaza “ce are in cap” cineva, deci informatiile din head-ul paginii vor comunica cu browserul si ii vor da detalii despre pagina.

Un alt element important in crearea unei paginii web il reprezinta DOCTYPE-ul. DOCTYPE-ul e necesar intr-o pagina web incat prin acest tag ii spunem browser-ului cum sa interpreteze pagina. Nu va chinuiti sa retinteti tot, google va poate da o linie de cod pt DOCTYPE.

O pagina de HTML ar arata asa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
      <title>Untitled Document</title>
   </head>
   <body>
      <!-- cod html -->
   </body>
</html>

Sa vedem ce etichete HTML apar in exemplu:

<html></html> - Inceputul si sfarsitul fisierului
<head></head> – Contine informatii descriptive si metadata
<title></title>
– Este pozitionat in <head></head> si contine titlul paginii
Etichetele <meta> pot include informaţii despre titlul şi autorul documentului, informaţii structurale despre cum este împărţit documentul în diferite segmente, paragrafe etc. şi informaţii care permit ca documentul să poată fi legat de alte documente (css, javascript). Tot in <head> se pot definii stiluri si functii javascript, care vor fi folosite in documentul html.
<body></body> – Contine corpul paginii, ceea ce se va afisa pe browser. Asadar: tot ce dorim sa apara pe browser, punem intre cele doua taguri <body>..
<!– comentariu –> - Comentariu HTML

Taguri folosite

<h1></h1>Headinguri – Titlurile in HTML sunt numerotate de la 1-6, cu 1 fiind cea mai mare poziţie şi 6 fiind cel mai mica. Prin introducerea de text în cadrul tag-ului <h1>, textul va avea dimensiunea in functie de h-ul adaugat (1-6).

<h1> Titlul 1</h1>
<h2> Titlul 2</h2>
<h3> Titlul 3</h3>
<h4> Titlul 4</h4>
<h5> Titlul 5</h5>
<h6> Titlul 6</h6>

<p></p> - Paragraf
   <p> Acesta este un paragraf. </p>

Rezultat:
Acesta este un paragraf.
Daca scriam:
   p Acesta este un paragraf </p>
Rezultatul ar fi fost:
p Acesta este un paragraf
Paragraful poate avea atribute, printre care si align, cu valorile: left, right, justify, center.

<br / >Rand nou – tag nepereche

<hr />Linie orizontala – tag nepereche

<ol></ol>Lista ordonata. Contine itemi, notati cu <li></li>.;
<ol>
   <li>Primul</li>
   <li>Al doilea</li>
   <li>Al treilea</li>
</ol>
Lista ordonata are atributele:
- start = numarul de la care incepe numerotarea
- type = tipul listei, cu valorile: “a”, “A”, “i”, “I”

<ul></ul>Lista neordonata, sau lista cu bullets. Contine itemi, notati cu <li></li>.
<ul>
<li>text 1</li>
<li>text 2</li>
<li>text 3</li>
</ul>

Lista neordonata are atributul type, care poate fi square, disc, circle.

<dl></dl>Lista de definitii, care contine <dt></dt> – termenul definit, si <dd></dd> – definitia.

<b></b>Bold

<strong></strong> – Text strong, asemanator cu bold

<i></i>Italic

<em></em>Emphasis, asemanator cu italic

<sup></sup>Superscript

<sub></sub>Subscript

<del></del>Text taiat

<code></code>Font cod

<font></font>Font.
Are urmatoarele atribute:
- size – dimensiunea fontului
- color – culoarea fontului
- face – tipul fontului

<a></a>Link
Are urmatoarele atribute:
- href – adresa fisierului destinatie
- target – in ce fereastra se va deschide fisierul destinatie. Poate lua valorile: _blank (pagina va fi incarcata intr-o noua fereastra), _parent (pagina va fi incarcata in fereastra parinte), _top (pagina va fi incarcata in fereastra top a cadrului), _self (pagina va fi incarcata in aceeasi fereastra)
- title – descrierea afisata in momentul in care mouse-ul se afla deasupra linkului
   <a href="adresa-fisier" target="_blank" title="titlu"> nume</a>
Link-urile pot fi interne, locale, sau globale.
Pentru a creea un link de trimitere a unui email, folosim:
   <a href="mailto:angela@soft-build.com?subject=Intrebare blog" >Da-mi un email</a>

<img /> – Eticheta folosita pentru inserarea unei imagini in pagina. Are urmatoarele atribute:
- src = sursa, locul unde se afla imaginea
- width = latimea imaginii
- height = inaltimea imaginii
- alt = numele care inlocuieste imaginea pana se incarca sau cand nu a fost gasita
- border = chenar (0 = lipsa bordura)
   <img src="numepoza.extensie" width="100" height="75" alt="poza" border="0" />

Sursa imaginii, sau adresa ei, poate fi relativa sau absoluta. Sa vedem ce inseamna fiecare:
Daca suntem in Piata Operei, in Timisoara, cu spatele la Opera si intrebam pe cineva unde este catedrala, ne va spune: “Drept inainte”. Asta e calea relativa, pentru ca doar daca stam cu spatele la Opera si mergem inainte, putem gasi Catedrala.

Daca vorbim cu cineva pe messenger si intrebam unde e Catedrala, ne va spune: “Mergi in Piata Operei, stai cu spatele la Opera si mergi inainte”. Asta e calea absoluta, pentru ca oriunde am fi, daca mergem in Timisoara, in Piata Operei si stam cu spatele la Opera, iar apoi mergem inainte, vom ajunge la Catedrala.

Astfel, calea relativa e atunci cand gasesc locatia pozei plecand de la locatia fisierului html. Pot sa zic ca poza e in acelasi director, si voi pune la src “poza.jpg”. Daca poza e in directorul imagini, care e in acelasi director cu fisierul, vom merge la “imagini/poza.jpg”. Daca poza e intr-un director mai sus fata de fisier, vom scrie “../imagini/poza.jpg”.

Pentru a lua o imagine folosind calea absoluta, scriem adresa imaginii din calculator “c:\imagini\poza.jpg” sau de pe internet http://www.site.ro/imagini/poza.jpg. Se mai poate lua si calea absoluta, ca si baza siteului (acolo unde e fisierul index.html, iar aceasta se noteaza asa: “/imagini/poza.jpg”.

O imagine poate fi, la randul ei link, astfel:
<a href="#" alt="" target="_blank">
   <img src="numepoza.extensie" width="100" height="75" alt="poza" border="0" />
</a>

<table></table> – Tabel
<tr></tr> – Rand de table
<td></td> – Celula de table

<table border="1">
   <tr>
      <td>Celula 1</td>
     <td>Celula 2</td>
   </tr>
   <tr>
     <td>Celula 3</td>
     <td>Celula 4</td>
   </tr>
</table>

Atributele etichetei table sunt:
- border = bordura (0 – lipsa bordura)
- width = latimea tabelului
- height = inaltimea tabelului
- bgcolor = culoarea de fundal
- background = imaginea de fundal (W3C invalid, folositi style)
- cellspacing = distanta intre celule
- cellpadding = distanta dintre marginea celulei si continut

Atributele etichetei td sunt:
- align = aliniere pe orizontala a continutului (left, right, center)
- valign = aliniere pe verticalala a continutului (top, bottom, middle)
- width = latimea celulei
- height = inaltimea celulei
- bgcolor = culoarea de fundal
- background = imaginea de fundal (W3C invalid, folositi style)
- colspan = uneste celula cu cea din dreapta ei
- rowspan = uneste celula cu cea de sub ea

<div></div> – Div – o caseta folosita pentru a grupa alte elemente. Nu permite alte elemente pe acelasi rand.

<span></span> – Span – o caseta folosita pentru a grupa alte elemente, dar care permite alte elemente pe acelasi rand.

Entitati si simboluri

Putem folosi anumite simboluri, pentru a afisa anumite caractere. Spre exemplu, pentru ca ochiul uman citeste mai usor codul indentat, browserul nu va lua in seama doua spatii unul dupa celalalt pe care ni le scriem noi in cod, ci va considera ca e un singur spatiu. De aceea, daca vrem sa afisam doua spatii, va trebui sa folosim un simbol special pentru spatiu. Mai putem afisa si alte caractere speciale.

- &nbsp; = spatiu
- &copy; – ©
- &lt; = <
- &gt; =>

Tema

  1. un fisier care se numeste index.html si in care incercati exemplele din documentatie in html
  2. un fisier cv.html care va contine cv-ul vostru in format html, fara stiluri, folosind elementele invatate la html
  3. pozele referite in cod, unde e cazul

Intrebari?:)

Posted in Curs programare web | Tagged , | Comments Off

Generalitati

Salut!

M-am decis sa fac adaug cursul la blog, pentru ca am strans materialele de-a lungul timpului, le-am predat la cursurile Soft Build si am vazut ca ar fi multi interesati sa invete ceva tehnologii web.

Am sa incerc sa pun cat mai putina teorie si sa prezint anumite metode asa cum le aplic eu, fara sa am pretentia ca sunt cele mai “ortodoxe” sau ca ar fi cele recomandate sau optime. Sunt cele care imi sunt mie comode. De altfel, dupa ce am tot lucrat cu programatori, va recomand sa aplicati metodele pe care le stapaniti cel mai bine, in loc sa va “prindeti urechile” cu ce e la moda!

Bun, sa incepem!

Aveti nevoie de un editor de cod. Eu folosesc Dreamweaver, dar puteti folosi si Notepad++ sau orice alt editor de text. Facem HTML, apoi CSS si Javascript. Dupa ce am pus bazele, trecem la partea dinamica a programarii web: PHP si MySQL (baze de date).

Nu va bazati doar pe documentatia din blog, puteti gasi pe net tot felul de informatii. Recomand si siteul www.tizag.com, are tutoriale foarte bune si documentatia noastra e inspirata de acolo.

Va recomand sa nu faceti cu copy+paste exercitiile, pentru ca va ajuta pe voi sa va obisnuiti sa scrieti codul.

Daca e ceva, nu ezitati sa ma intrebati in comments. In primul rand, invatati pentru voi si, daca tot v-ati apucat, e pacat sa nu va lamuriti cum trebuie cu programarea web:).

Posted in Curs programare web | Tagged , , , , , | Comments Off

Getting CodeIgniter to work with IIS

 

IIS is a bit scary, especially for people used to working with Apache. Still, if you use IIS and would like to work with the CodeIgniter framework, you just have to add a “?” in the config.php, next to “index.php” and it will work like a charm.

Just a note: I found this solution on http://codeigniter.com/forums/viewthread/71641/.

Posted in Issues and Errors | Tagged , , | Comments Off

Setting the Culture for a Windows Application

Some of the operating systems that we install our applications on, have the Regional Settings set to Romanian. So there can be problems with the numbers and date formatting. The best sollution is to set your application culture, no matter what the OS culture is:

using System.Threading;
using System.Globalization;
// Put the following code before InitializeComponent()
// Sets the culture
Thread.CurrentThread.CurrentCulture = new CultureInfo("ro-RO");
// Sets the UI culture
Thread.CurrentThread.CurrentUICulture = new CultureInfo("ro-RO");

The code is taken from http://msdn2.microsoft.com/en-us/library/b28bx3bh(VS.71).aspx.

Posted in Issues and Errors | Tagged , | Comments Off

jQuery – how to refer to a div with the class name from multiple classes

Let’s say you have a div that is devined like that:
<div class="class1 class 2"...

and you want to refer to it from jQuery.

You just have to do like this:

    $("div[class*='class1']")

or

    $("div[class*='class2']")

or

$("div[class*='class1 class 2']")

 Notice the *.

I found this great solution here.

Posted in Issues and Errors | Tagged | Comments Off

Prerequisites for Office Add In Visual Studio Setup Project

I had to reinstal Windows and Visual Studio and all the fun stuff that Microsoft offers.

After that wonderful try-to-instal-everything week, I was working on an Office AddIn project and tried to build setup. Of course, the Office 2003 PIAs were not installed anymore, nore the others prerequisits. I googgled it and finally found a great solution:

http://office-development.blogspot.com/2008/10/adding-office-primary-interop.html

Posted in Issues and Errors | Tagged , , , , | Comments Off