sâmbătă, 5 mai 2012

L17. Inserarea scripturilor

Script inseamna un program realizat intr-unul din limbajele suportate de web (de obicei JavaScript).

Aceste scripturi se refera la aspecte variate ale unui site:

  • realizarea unui slideshow pentru albumul foto

  • afisarea datei si a orei

  • meniuri (glisante, ascunse, ...)

  • contorizarea numarului de vizitatori


Scripturile pot fi gasite cu o simpla cautare pe G

miercuri, 2 mai 2012

L15. Crearea unui site din FRAME-uri

Aceasta metoda presupune impartirea intregului ecran in cadre/ferestre, fiecare din ele avand atasat un fisier

  • pentru cadrul cu banner, banner.html

  • pentru cadrul cu meniul, meniu.html

  • pentru cadrul cu continutul, continut.html


Pentru aceasta vom folosi tagul <FRAMESET> pentru a descrie orice mod de impartire a  ecranului iar pentru descrierea unui  frame folosim tagul FRAME (identic cu IFRAME).

Tagul FRAMESET


<FRAMESET [ ROWS="structura-linii"] [ COLS="structura-coloane"] [ FRAMEBORDER=1|0] [ FRAMESPACING=interspatiu]> continut-cadre </FRAMESET>

unde :

  • se foloseste fie ROWS (daca in principal e vorba de mai multe linii), fie COLS (daca in principal e vorba de mai multe coloane)

  • structura liniilor/coloanelor se da in procente si se poate folosi caracterul * cu semnificatia , restul (ce a mai ramas)...

  • FRAMEBORDER specifica daca frame-urile se separa cu linie

  • FRAMESPACING = distanta intre cadre

  • continut -cadre = alte taguri FRAMESET sau FRAME


Tagul FRAME


<FRAME [ SRC="adresa-URL"] [ NAME="nume-cadru"] [ NORESIZE] [ SCROLLING="yes"|"no"|"auto"] [ MARGINWIDTH="lãtime"] [ MARGINHEIGHT="&înãltime"] [ ALIGN=top|middle|bottom|left|right] [ FRAMEBORDER=0|1]>

cu acelesi expicatii de la IFRAME

Pentru modelul nostru, fisierul principal index.html va contine descrierea:

  • <FRAMESET ROWS=" 20%,*">

    • <FRAME SRC= "banner.html" name="bannner">

    • <FRAMESET COLS="25%, * " >

      • <FRAME SRC= "meniu.html" name="meniu">

      • <FRAME SRC= "continut.html" name="continut">



    • </FRAMESET>



  • </FRAMESET>


A ramas nelamurita problema linkurilor din meniu. Fiecare link din fisierul meniu.html trebuie sa se deschida in cadrul/fereastra continut. Sa ne reamintim tagul <A> , pentru linkuri:

<A HREF="link-url" [ REL="tip-rel"] [ REV="tip-rev"] [ TITLE="title-name"] [ TARGET=window|_blank|_parent|_self|_top]> text_legaturã </A>

Observatii:

  • HREF= hyper-referinta, reprezinta adresa paginii care se va deschide

  • TARGET= puteti specifica unde se va deschide noua pagina

    • window = indica fereastra in care se afiseaza; daca nu exista, va fi creata o fereastra cu acest nume

    • _blank=pagina se deschide intr-o fereastra noua

    • _parent= pagina se deschide in fereastra anterioara

    • _self=  pagina se deschide in aceeasi fereastra ca si documentul curent

    • _top= pagina se deschide in fereastra initiala




Practic, trebuie sa stabilim ca valoare a TARGET, cadrul continuturi. De exemplu linkul corespunzator butonului  HOME ar putea sa arate asa (restul fiind analoge):

<A HREF="home.html" TARGET ="continut"> <img src="buton.jpg"> </A>

L14. Introducerea unui IFRAME

Notiunea de FRAME (cadru) presupune stabilirea unei ferestre/cadru a carei contiut sa fie dat de un anumit fisier. ( 1 cadru are atasat un fisier).

In celula de CONTINUT al tabelului din LAYOUT vom declara un FRAME ce va avea atasat fisierul home.html cu continutul corespunzator butonului HOME.

Nu ramane decat sa putem stabili ca butoanele noastre trebuie sa-si dechida paginile in acest frame.

Crearea unui IFRAME


<IFRAME [ SRC="adresa-URL"] [ NAME="nume-cadru"] [ SCROLLING="yes"|"no"] [ MARGINWIDTH="lãatime"] [ MARGINHEIGHT="înãltime"] [ ALIGN=top|middle|bottom|left|right] [ FRAMEBORDER=0|1]>

unde:

  • SRC = calea pana la fisierul atasat

  • NAME = numele ferestrei/cadrului

  • SCROLLING = permite derularea ferestrei daca datele introduse ocupa mai mult loc decat cel rezervat


Ideal ar fi sa desenati intai (in Photoshop) "fatza" unui site (cu butoane) si apoi (cu defunctul Macromedia Firewoks sau aplicatia similara din Adobe) astfel incat:

  • sa puteti elimina spatiul asociat "continutului" si sa inserati acolo  IFRAME-ul

  • sa decupati butoanele, stabilind astfel unde sunt linkurile, cu TARGET spre FRAME-ul "continut".

L13. Crearea unui mini-site folosind tehnica layout

LECTIA 13!!!!!

Ideea acestei tenhnici este crearea unui model pe care sa il pot multiplica.

  1. deseneaza pe caiet modelul paginii dorite (sugerez primul rand = banner, randul 2  coloana pt meniu si coloana pentru continut)

  2. creez si inserez bannerul

  3. creez si inserez butoanele (HOME, LINKS, PHOTOS)

  4. Fac legaturile fiecarui buton catre paginile (inca ne-existente) index.html, links.html, photos.html.

  5. Salvez pagina ca layout.html

  6. Salvez pagina ca index.html, links.html, photos.html.

  7. Incercati index.html

  8. Nu ramane decat sa modificati corespunzator partea de continut a fiecarei pagini




  • in HOME ceva despre voi

  • in PHOTOS o imagine mica, link catre aceeasi imagine in marime naturala

  • in LINKS, un link la un mail.



Dezavantaj. Daca dotiti modificarea modelului (layout-ului), trebuie modificate corespunzator toate paginile create.

L12. Tabele in HTML

Resursa: http://profs.info.uaic.ro/~val/htmlearn.html

Forma generala a unui tabel in html este
<TABLE>
<CAPTION>...</CAPTION> - titlul tabelului
<TR><TH></TH> ... </TR> - linie antet
<TR><TD></TD> ... </TR> - linie curentã
...
<TR><TD></TD> ... </TR> - linie curentã
</TABLE>

Se observa ca:

  • <TABLE> este tagul specific tabelului

  • <CAPTION> este tagul prin care stabilim titlul tabelului

  • tabelul este format din mai multe linii (<TR> table row), fiecare din ele fiind impartit in mai multe celule (<TD>). Daca vorbim de prima linie, atunci ne referim la antetul tabelului si folosim  <TH> (table header)


Exemplu:
<TABLE >
<TR><TH>Nr. crt</TH><TH>Numele si prenumele</TH></TR>
<TR><TD>1.</TD><TD>Popescu Ionel</TD></TR>
<TR><TD>2.</TD><TD>Ionescu Emil</TD></TR>
</TABLE>
















Nr. crtNumele si prenumele
1.Popescu Ionel
2.Ionescu Emil

Marcaje generale pentru tabele

<TABLE [ BORDER[=nn]] [ FRAME=void|above|below|hsides|lhs|rhs|vsides|box] [ RULES=none|groups|rows|cols|all] [ WIDTH=ooo|pn%] [ HEIGHT=mmm|pm%] [ BGCOLOR="#rrggbb"|culoare] [ BORDERCOLOR="#rrggbb"|culoare] [ BORDERCOLORLIGHT="#rrggbb"|culoare] [ BORDERCOLORDARK="#rrggbb"|culoare] [ BACKGROUND="URL-imagine"] [ CELLSPACING=qqq] [ CELLPADDING=rrr] [ ALIGN=left|center|right] [ VALIGN=top|bottom]>
continut-tabel
</TABLE>


este tagul de definire a unui tabel.

BORDER defineste prezenta chenarului. Dacã atributul lipseste sau are valoarea 0 (BORDER=0), atunci tabelul nu va avea chenar. Prin nn pozitiv se indicã, în pixeli, mãrimea umbrei pentru o reprezentare spatialã.
FRAME specificã afisarea bordurilor exterioare. Atributul BORDER trebuie sã fie prezent.Aceasta este o extensie Microsoft.

  • void - fãrã bordurã exterioarã;

  • above - chenar sus;

  • below - chenar jos;

  • hsides - chenar sus si jos;

  • vsides - chenar stânga si dreapta;

  • lhs - chenar stânga;

  • rhs - chenar dreapta;

  • box - chenar complet.


RULES controleazã afisarea liniilor interioare în cazul când se utilizeazã TBODY, TFOOT si THEAD (vezi în continuare). Atributul BORDER trebuie sãa fie prezent. Aceasta este o extensie Microsoft.

  • none - nu se afiseazã linii interioare;

  • groups - afiseazã linii între grupurile tabelului (specific extensiei Microsoft de definire a grupurilor: COLGROUP etc.);

  • rows - afiseazã linii între linii;

  • cols - afiseazã linii între coloane;

  • all - afiseazã toate liniile interioare.


WIDTH comandã lãtimea tabelului: în pixeli, ooo, sau procentual, pn%, din lãtimea ecranului;

HEIGHT, similar cu WIDTH, pentru înãltimea tabelului;

BGCOLOR este culoarea pentru fundalul tabelului. Culoarea de fundal este acoperitã, evident, de culoarea declaratã ca fundal pentru linii (vezi TR), care este acoperitã de culoarea declaratã ca fundal pentru celule (vezi TH si TD). Aceasta este o extensie Netscape si Microsoft;

BORDERCOLOR este culoarea bordurii tabelului. Aceasta este o extensie Microsoft;

BORDERCOLORLIGHT este culoarea liniei luminoase dintr-o bordurã umbritã. Aceasta este o extensie Microsoft;

BORDERCOLORDARK este culoarea umbrei dintr-o bordurã umbritã.Aceasta este o extensie Microsoft;

BACKGROUND specificã adresa URL a fisierului imagine utilizat drept fundal pentru fiecare celulã a tabelului. Aceasta este o extensie Microsoft;
CELLSPACING aratã spatierea, în pixeli, dintre celule;
CELLPADDING aratã spatierea, în pixeli, dintre marginile celulei si continutul ei:
ALIGN comandã alinierea tabelului între marginile laterale ale ferestrei;
VALIGN aratã alinierea verticalã a tabelului.Aceasta este o extensie Microsoft.

continut-tabel defineste celulele tabelului, antetul, captarea si continutul celulelor tabelului.

luni, 26 martie 2012

L11. Liste cu numere sau buline

Asa cum stiti de la lectia similara de WORD, listele sunt de trei feluri:

  • liste cu bulina (valori neordonate)

  • liste cu numere (valori ordonate)

  • liste cu litere (valori ordonate)

  • liste ierarhice (cu mai multe nivele de ordonare)


Liste cu bulina


Tagul folosit este UL (unordered list ?)

  • <ul [compact] [ type=disk|square|circle]>

  • <li> optiune 1

  • <li> optiune 2

  • </ul>


in care

  • COMPACT= permite browserului reducerea distantei intre bulina si tex

  • TYPE= specifica ce tip de marcator va fi folosit


Liste cu numere


Tagul folosit este OL (ordered list)

  • <OL[ COMPACT] [ START=nnnn] [ TYPE=1|a|A|i|I]>

  • <li> optiune

  • <li>optiune

  • </OL>


in care

  • START = specifica valoare de pornire

  • TYPE = specifica tipul de marcator (numeric, alfabetic,  mare/mic, cifre romane mari/mici)


Liste ierarhice


Listele ierarhice se obtin prin combinarea celor doua tipuri de liste, ca in exemplu urmator:







<OL COMPACT START=1 TYPE=1>
<LI>primul element  
<UL COMPACT TYPE="circle">
    <LI>element secundar
   <LI>element secundar
   <LI>element secundar
</UL>
<LI>al doilea element
<LI>al treilea element
<LI>al patrulea element
</OL>


  1. primul element

    • element secundar

    • element secundar

    • element secundar



  2. al doilea element

  3. al treilea element

  4. al patrulea element



Exercitiu:

In pagina LINKS faceti o lista de situri favorite despre: muzica, filme, carti. Fiecare categorie trebuie sa includa mimim 4 linkuri.