RSS

Category Archives: C1_3 Modul Internet

Articole legate de folosirea Web-ului si a Internetului

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

 
1 Comment

Posted by on 05/05/2012 in C1_3 Modul Internet

 

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>

 
1 Comment

Posted by on 02/05/2012 in C1_3 Modul Internet

 

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”.
 
1 Comment

Posted by on 02/05/2012 in C1_3 Modul Internet

 

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.

 
1 Comment

Posted by on 02/05/2012 in C1_3 Modul Internet

 

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. crt Numele 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.

 
1 Comment

Posted by on 02/05/2012 in C1_3 Modul Internet

 

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.

 
1 Comment

Posted by on 26/03/2012 in C1_3 Modul Internet

 

L10. Crearea legaturilor in HTML

Un link (legatura) este o trimitere de la un text sau imagine catre

  • o pagina de web, locala sau de pe internet
  • o locatie din aceeasi pagina (ancora, bookmark)

Linkuri

Tagul pentru linkuri este

<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

Exemple:

  • <a href=”exemplu1.html”> aici gasiti exemplul nr 1 </a>
    • fisierul exemplu1.html se deschide in aceeasi fereastra
  • <a href=”http://www.google.com&#8221; target =”_blank”> Cu acest link ajungeti la Google </a>
    • pagina Google se deschide intr-o fereastra noua
  • <a href=”albumfoto.html” > <img src=”images/albumfoto.jpg”> </a>
    • imaginea albumfoto.jpg este buton (face trimitere) pentru pagina albumfoto.html
  • <a href=”http://www.acasa.com/pdfs/document.pdf&#8221; target =”_blank”> Link la DOCUMENT.PDF </a>
  • <a href=”mailto:aaa@bbb.com”> Email-ul meu</a>
    • link la email-ul aaa@bbb.com

Exercitii:

  • Salvati pagina de la lectia IMAGINI cu numele model.html
  • realizati linkuri de la fiecare buton catre o pagina cu acelasi nume
    • butonul Home catre index.html
    • butonul Album catre album.html
    • butonul Links catre links.html
  • Salvati pagina model sub numele fisierelor de mai sus
  • Completati fiecare pagina conform semnificatiei ei
  • Vizualizati situl incepand cu index.html. Acesta este primul dvs site.

Ancore

Acest tip de link presupune marcarea unei zone ca destinatie.

  1. sa marcam zona unde vrem sa sarim
    1. <A NAME=”nume_zona“> text-denumire </A>
  2. sa realizam trimiterea catre zona noastra
    1. <A HREF=”#nume_zona“> text_legaturã </A>

Exemplu:

  • daca in pagina prezentam o lucrare cu mai multe capitole, in dorinta de a nu pune utilizatorul sa gliseze pagina sus-jos intre cuprins si continut, ii punem la dispozitie un sistem de linkuri
    • dorim, ca la inceputul fisierului sa realizam un cuprins de genul “Titlul_lucrarii Capitol1 Capitol 2 Capitol3” cu legaturi catre fiecare capitol in parte.
    • la terminarea fiecarui capitol dorim un link (HOME) catre titlul lucrarii
 
4 Comments

Posted by on 23/03/2012 in C1_3 Modul Internet

 
 
%d bloggers like this: