Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • HTML

    Încărcat de

    Cristina
    22 vizualizări12 pagini
    Notiuni introductive de HTML

    Titlu original

    html

    Drepturi de autor

    © Attribution Non-Commercial (BY-NC)

    Formate disponibile

    DOC, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    Notiuni introductive de HTML

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    22 vizualizări12 pagini

    HTML

    Încărcat de

    Cristina
    Notiuni introductive de HTML

    Drepturi de autor:

    Attribution Non-Commercial (BY-NC)
    Descărcați ca DOC, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 12

    Java Script Este un limbaj script ( ca si html coul este vizibil la utilizator ) dezvoltat de Netscape cu care pot fi create

    pagini interactive. Pentru a rula o aplicatie Java script este nevoie de un brower compatibil Java Script. Includerea codurilor Java Script in pagina se realizeaza natural, direct si vizibil in codul sursa. Spre exemplu:
    <html> <body> <script language="JavaScript"> document.write("Acesta este un text Java Script!") </script> <br> Acesta este un text HTML </body> </html>

    Desi exemplul in cauza poate fi rescris in intregime in HTML este scoasa in evidenta eticheta care face apel la capabilitatea Java Script: <script language="JavaScript"> document.write este o comanda Java Script ce permite scrierea unui mesaj in documentul curent, in cazul de fata fiind chiar documentul HTML. Un browser incompatibil Java Script nu va vizualiza decat mesajele HTML. O aplicatie frecvent folosita este incarcarea a doua pagini odata in doua cadre diferite. Spre exemplu sa presupunem ca fereastra contine 3 cadre: frame1, frame2, frame3 iar utilizatorul foloseste o legatura aflata in frame1 care trebuie sa aiba ca rezultat incarcarea in doua pagini diferite in celelalte doua cadre. O solutie este folosirea functiei loadtwo( ) astfel:
    function loadtwo(url1,url2) {parent.frame2.location.href=url1; parent.frame3.location.href=url2; }

    Functia va putea fi apelata avand ca parametri cele doua fisiere care se vor incarca
    loadtwo('fis1.html','fis2.html'); <a href="javascript: loadtwo('up2.html','right2.html')">click here</a>

    Java Script - prelucrarea butoanelor radio Eticheta care realizeaza un buton radio este <INPUT TYPE=RADIO>. Mai exact: <INPUT TYPE=RADIO NAME="radio-set-id" VALUE="choice-id" [CHECKED]> Este o forma ce permite utilizatorului sa aleaga dintr-un set de alternative. Fiecare buton radio din setul de alternative din forma are aceeasi valoare a atributului. Evident, un singur buton radio poate fi selectat o data. Atributul VALUE specifica datele transmise. CHECKED se specifica in dreptul butonului care vrem sa fie selectat implicit (optional). Urmatorul exemplu prelucreaza "raspunsul" transmis de utilizator. Acesta trebuie sa aleaga numai unul din mai multe alternative posibile. Parametrul transmis este un numar (una din valorile 1, 2, 3 sau o alta valoare, respectiv 4). In functie de fiecare dintre aceste valori se afiseaza un alt mesaj.

    Cat esti de inalt(a)? scund(a) inalt(a) de inaltime medie atat cat mi-am dorit Functia radio de parametru value verifica valoarea transmisa din elementul buton radio din formular. Functia este apelata la evenimentul onclick realizat prin clic de mouse a butonului radio corespunzator si are forma: function radio( value ) { if( value == 1 ) alert('Minionii sunt dragalasi de felul lor!'); else if (value == 2) alert('Te-ai gandit sa te faci fotomodel?'); else if (value == 3)

    alert("Foarte convenabil!"); else alert("E mare lucru sa te simti bine in pielea ta!"); } Forma html este urmatoarea: <form> Cat esti de inalt(a)? <p><input type="radio" name="Q1" value="1" onclick="radio(1);">scund(a) <br><input type="radio" name="Q1" value="2" onclick="radio(2);">inalt(a) <br><input type="radio" name="Q1" value="3" onclick="radio(3);">de inaltime medie <br><input type="radio" name="Q1" value="4" onclick="radio(4);">atat cat mi-am dorit</td> </form> Aplicatie: Realizati o forma html ce contine mai multe seturi de butoane, fiecare set permitand caracterizarea unei persoane dintr-un anumit punct de vedere. Dati mesaje pentru fiecare alegere, raportandu-va la fata (baiatul) visurilor voastre. Dati click aici pentru un exemplu de test simplu cu butoane radio. Uitati-va in sursa. Dati click aici pentru un exemplu de test cu butoane radio, in care se calculeaza scorul obtinut. Raspundeti la intrebarile din test. Testul este corect din punct de vedere al rezultatului? (incercati sa dati click de mai multe ori pe raspunsul corect). O precizie mai mare necesita cunostinte de programare avansata (tablouri) in Java (vezi unul din testele date la teza). Uitati-va in sursa. Incercati si voi sa realizati un test scurt (nu neaparat de programare).

    Laborator11 Java Script - Prelucrarea campurilor de text In cadrul etichetelor <FORM> .. </FORM>, este valabila eticheta HTML: INPUT TYPE=TEXT <INPUT [TYPE=TEXT] NAME="text-identificator" [SIZE=nn] [MAXLENGTH=nn] [VALUE="default text"]> Atributul SIZE se foloseste pentru specificarea numarului de caractere care sa caracterizeze dimensiunea ferestrei de introducere a textului.

    Atributul MAXLENGTH se foloseste pentru limitarea numarului de caractere de intrare. Daca valoarea MAXLENGTH este mai mare decat valoarea SIZE, atunci browser-ul va permite scroll pe textul de intrare. Atributul VALUE se foloseste pentru afisarea unui text de intrare implicit, ce va fi afisat odata cu forma si va putea fi modificat prin editare. Urmatorul exemplu valideaza introducerea unui sir care nu trebuie sa fie vid:

    Tasteaza numele tau Forma contine doua elemente: - un camp de text in care utilizatorul va tasta un sir de caractere - un buton care va testa sirul introdus in scopul validarii acestuia

    <form> <INPUT TYPE=TEXT NAME="camp_text" > <input type="button" name="butony" value="OK" onClick="test(this.form)"> </form> Sectiunea body declara crearea a doua elemente: un camp de text si un buton. Butonul apeleaza functia test( ). Functia test( ) are forma: function test(form ) { if( form.camp_text.value = ="" ) alert("Scrie macar un pseudonim, o porecla, ceva!"); else alert("Salut "+form.camp_text.value+", invata JavaScript!"); } Pentru functionarea corecta a functiei parametrul transferat in functie este this.form Functia test de parametru form verifica daca sirul introdus in elementul camp_text este vid, caz in care afiseaza "camp gol!" prin comparatie cu ""; alfel, afiseaza un mesaj in care intervine sirul tastat de utilizator in secventa: form.camp_text.value. Functia este apelata la evenimentul onClick realizat prin clic de mouse pe butonul "butony". Urmatorul exemplu foloseste o functie add_2_num() pentru a calcula suma a doua numere intregi.

    A= B= Forma contine doua elemente: - doua campuri de text in care utilizatorul va tasta cate un numar - un buton in care se calcula suma celor doua numere <form> <INPUT TYPE="TEXT" NAME="Text1"> <INPUT TYPE="TEXT" NAME="Text2"> <INPUT TYPE="BUTTON" NAME="Button1" VALUE="A + B " ONCLICK="add_2_num()"> < Butonul apeleaza functia add_2_num( ), care are forma: function add_2_num() { var a_str = Form1.Text1.value; var b_str = Form1.Text2.value; var a_int = parseInt(a_str); var b_int = parseInt(b_str); var c = 0; c = a_int + b_int; alert("Suma= " + c ); }

    //Preia in variabilele de tip sir de caractere //cele 2 numere introduse //conversie la intreg //pentru conversie la real, se foloseste parseFloat

    Aplicatii: 1. Realizati un camp de text in care utilizatorul sa tasteze un text, iar voi sa-i dati un mesaj in care sa apara textul introdus. 2. Prelucrati functia add_2_num() pentru a calcula diferenta, produsul si catul impartirii a doua sau mai multe numere. Laborator12 Java Script - Prelucrarea ferestrelor de editare (TEXTAREA) In cadrul etichetei <Form>...</Form> este valabila si eticheta: <TEXTAREA NAME="text-id" [COLS=nn] [ROWS=nn]>default text</TEXTAREA> Eticheta TEXTAREA prezinta o fereastra pentru editare de text pe mai multe linii (este un container HTML). Textul continut intre etichetele <TEXTAREA> si </TEXTAREA> apare ca fiind un continut implicit. Exemplul urmator ofera o posibilitate de utilizare a etichetei <textarea>

    C z P es
    ra

    ag

    O neb ni depagin !
    u e

    a! !

    Faceti clic pe butonul "Transform" dupa ce ati tastat un sir de caractere in prima zona de text.Veti avea ca rezultat intr-o noua fereastra textul modificat ca dimensiune si culoare in timp ce codul aferent il veti gasi in cea de a doua fereastra. Puteti copia codul pentru a-l utiliza intr-o noua pagina. Pentru rezultate cat mai bune puteti modifica si background-ul. Scrie un text aici: Copiaza acest text in codul sursa al paginii tale web.

    Laborator 13 Macromedia Dreamweaver notiuni introductive Macromedia Dreamweaver este un program de generare de pagini web. Pagina se construieste ca intr-un editor de text obisnuit si se salveaza automat cu extensia html. Pagina creata poate fi vizualizata in orice browser (Internet Explorer, Netscape etc). Codul sursa se genereaza automat (continand etichetele corespunzatoare) si poate fi vizualizat din Internet Explorer, de exemplu, cu View Source. Codul sursa poate fi modificat ulterior de utilizator. Suprafaa de lucru a programului contine: fereastra Document; palete flotante n partea superioar a ferestrei Document. Fereastra Document Afieaz pagina Web aproximativ n acelai mod n care va aprea ntr-un browser Web.

    Fereastra Document conine : o bar de titlu conine titlul paginii Web curente. Lng titlu, n paranteze se gsete numele fiierului (numele cu care este salvat pagina pe hard-disk); o bar de meniuri; o bar de stare (n partea inferioar). Aceasta conine : selectorul de etichete permite selectarea oricreia dintre etichetele HTML care controleaz un obiect meniul pop-up Window Size permite recrearea unei anumite rezoluii de ecran; statisticile de descrcare estimeaz timpul de descrcare a paginii create; bara Mini-Launcher. Palete i inspectori Majoritatea comenzilor din Dreamweaver sunt disponibile n mai multe locuri sub forma unei comenzi dintr-un meniu sau dintr-o palet. Paletele sunt andocabile (pot fi combinate ntr-o palet comun cu rubrici pentru a economisi spaiu n fereastra Document). Numele comenzilor pot fi uor diferite de numele paletelor sau inspectorilor (Ex. Inspectorul Property se lanseaz cu comanda Properties). Palete andocabile Iniial, paletele sunt andocate toate la un loc. Se poate anula andocarea unei palete prin selectare i tragerea cu mouse-ul n afara ferestrei curente. Pentru a andoca o palet se trage eticheta acesteia ntr-o fereastr care conine alte palete. Inspectorul Property - afieaz toate proprietile obiectului curent selectat. Paleta Object- Conine butoane pentru inseria unor elemente comune ale paginilor Web : imagini, tabele, formulare, hiperlegturi, etc. Crearea unei pagini Web noi

    Din meniul File se alege comanda New. Pentru a introduce text se tasteaz textul n fereastra Document. Textul poate fi formatat cu ajutorul butoanelor din Inspectorul Property (marime, font, culoare, stil, aliniere). Pentru stabilirea titlului documentului, se tasteaza acesta in caseta cu titlu (n partea superioar a casetei Page Properties) Salvati documantul creat Configurarea culorilor textului i marginile paginilor Se stabilesc n Page Properties din meniul Modify..

    Marginile stabilesc distana ntre coninutul paginii i marginile din stnga, marginea de sus, limea marginii i nlimea marginii. Internet Explorer folosete valorile marginii din stnga, respectiv de sus; Netscape folosete valorile limii, respectiv nlimii marginii. Formatarea textului, schimbarea dimensiunilor textului, selectarea corpului de liter se pot realiza cu ajutorul inspectorului Property. Tot aici se stabileste culoarea fundalului. Se poate pune o imagine ca fundal (click pe Browse din dreptul lui Background Image si alegeti imaginea dorita ca fundal). Transformarea textului n list

    List neodonat: tastai 3 elemente apsnd enter dup fiecare element; tragei cursorul deasupra tuturor celor 3 articole pentru a le selecta clic pe butonul Unorderer List din inspectorul Property Pentru. a aduga o a doua list imbricat n prima: plasai punctul de insertie dup ultimul element Enter pentru a crea o linie nou; linia nou trebuie precedat de un marcaj Tastai 3 articole ca pentru lista anterioar Tragei cursorul peste noile elemente i selectai butonul Indent din inspectorul Property Pentru a readuce lista imbricat la acelai nivel cu lista principal, selectai butonul Outdent. Adugare separator la o pagin Pentru a aduga o rigl orizontal la pagina Web se selecteaz obiectul HR din paleta Object sau comanda Horizontal Rule din meniul Insert. Afiarea imaginilor ntr-o pagin

    1. 2. 3. 4.

    Plasai cursorul n punctul dorit; Selectai Insert Image din meniul Insert; Clic pe Browse din inspectorul Property. Apare caseta de dialog Select Image Source; Selectai fiierul imagine. Pentru a redimensiona imaginea tragei cu mouse-ul de mnerele de redimensionare. Pentru a pstra raportul dimensiunilor imaginii apsai Shift n timp ce tragei cu mouse-ul de un mner de redimensionare plasat ntr-un col al imaginii. Exist dou comenzi de aliniere pentru imagini : o comand aliniaz imaginea n pagina Web (butoane de aliniere n inspectorul Property); o comand controleaz modul n care se aliniaz cu imaginea obiectele amplasate lng aceasta (meniul pop-up Align plasat n jumtatea superioar a inspectorului Property). Pentru a mri distana ntre imagine i alte elemente modificai valorile din Vspace i Hspace. Pentru a insera text alternativ la o imagine, acesta se introduce n caseta Alt text din inspectorul Property.

    Aplicatie : 1. Realizati o pagina web in care sa aveti un titlu, o linie orizontala, cateva paragrafe formatate diferit, o lista numerotata (cu marcatori si / sau numere), o imagine inserata. Stabiliti o culoare de fundal. Salvati. Vizualizati pagina intr-un browser. 2. Realizati o pagina web care sa contina o imagine ca fundal. 3. Vizualizati codurile sursa ale paginilor create. Recunoasteti vreo eticheta?

    Laborator 14
    Crearea paginilor web recapitularea cunostintelor din lectia anterioara Creati o pagina web noua si salvati-o cu numele unu.htm. Configurati proprietatile paginii (alegeti o culoare sau o imagine de fundal si dati un titlu paginii voastre, cu ajutorul comenzii Page Properties din meniul Modify). Adaugati un titlu in interiorul paginii (un text aliniat la centru). Editati apoi 3 paragrafe de text si formatati-le in mod diferit. Inserati o imagine in pagina ca banner si inca una intre paragrafele 2 si 3 (gasiti imagini in directorul D:\Laboratoare\Imagini sau va puteti crea propriile imagini in Corel Draw si sa le exportati). Vizualizati pagina intr-un browser (Internet Explorer). Modificati cateva elemente din pagina. Salvati. Vizualizati pagina modificata. Exemplu:

    Hiperlegaturi Hiperlegaturile permit trecerea de la o pagina web la alta, sau, in cazul paginilor mari, trecerea de la o zona a paginii la alta, care nu e vizibila in acel moment. Hiperlegaturile permit si lansarea unei aplicaii de pot electronic. Legaturile pot fi atat texte cat si imagini. Legaturile textuale sunt subliniate; acest mod de semnalizare este considerat implicit pentru a fi recunoscute ca legaturi; pot aparea in culori, in functie de modul de setare a browser-ului utilizatorului si de formatul folosit de proiectant. Cand se trece cu mouse-ul in dreptul unei legaturi, cursorul ia forma unei maini. Pentru a aduga o hiperlegtur : 1. Creati pagina web si salvati-o. Adugai o cantitate de text 2. Selectai un cuvnt din text care poate fi folosit ca legtur cu cellalt fiier 3. Selectai pictograma Browse (form de dosar) de lng caseta Link. Navigai spre catalogul unde este localizat cealalt pagin. Selectai numele fiierului i executai clic pe butonul Select.

    4. Vizualizati pagina intr-un browser si verificati daca link-ul functioneaza Organizarea unei pagini lungi cu ajutorul ancorelor Atunci cand pagina are dimensiuni mari, e bine sa se foloseasca elemente de legatura catre diferite zone ale paginii. Pentru aceasta, in acele zone trebuie create ancore care vor avea un anumit nume. Pentru a crea o ancor cu nume: 1. Plasati punctul de inserie n locul unde va fi amplasat ancora cu nume; 2. Selectai Named Anchor din meniul Insert Invisible Tags

    3. Denumii ancora n caseta de dialog Insert Named Anchor

    4. OK. Pentru a crea o legtur cu o ancor cu nume, in cadrul aceleiasi pagini : 1. Selectai textul care va constitui legtura cu ancora cu nume; 2. Introducei numele ancorei precedat de simbolul # n caseta Link.

    3. Salvati si deschideti pagina intr-un browser Pentru a crea o legtur cu o ancor cu nume, in alta pagina : 1. Selectai textul care va constitui legtura cu ancora cu nume; 2. Introducei n caseta Link numele fisierului urmat de # si numele ancorei (fara spatii)

    3. Salvati si deschideti pagina intr-un browser Link-urile se pot realiza si pe imagini. Procedeul este acelasi: se selecteaza imaginea si se scrie in caseta Link numele paginii si/sau ancorei catre care se face legatura.

    Aplicatie: Deschideti in Macromedia Dreamweaver doua pagini web create de voi. A doua pagina web sa contina un text mai lung de o pagina (daca nu contine, mai editati voi). Stabiliti un link de la un cuvant din prima pagina la a doua pagina Adaugati o ancora sfarsit unui cuvant de la sfarsitul celei de a doua pagini Stabiliti un link pe un cuvant din a doua pagina catre ancora sfarsit Stabiliti un link pe o imagine din prima pagina catre ancora sfarsit din cea de-a doua pagina.

    a) b) c) d)

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