Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Program Initiere in IT - Sinteza Lab. 5+6

    Încărcat de

    l3utzu1
    5 vizualizări5 pagini
    laborator it

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document
    laborator it

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    5 vizualizări5 pagini

    Program Initiere in IT - Sinteza Lab. 5+6

    Încărcat de

    l3utzu1
    laborator it

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 5

    Initiere 

    in IT 

    Laboratoare 5 si 6:   Front‐End Development 
     

    Limbaje de front‐end: 

    HTML = structura site‐ului (Hyper Text Markup Language) 

    CSS = estetica site‐ului (Cascading Style Sheets) 

    Javascript = comportamentul site‐ului 

    HTML 
     

    Folosim etichete de forma: <eticheta> …. </eticheta> 

    Exemple de etichete: 

    <p> … </p> ‐ crearea de paragrafe 

    <h1> … </h1> ‐ crearea unui titlu (exista si h2 …h6 ‐ subtitluri) 

    CSS 
     

    Creem stiluri de forma: 

    .stil1 {  #stil2 {  eticheta { 


    comanda 1  comanda 1  comanda 1 
    comanda 2  comanda 2  comanda 2 
    }  }  } 
     

    Selectori pentru stiluri: 

    #  = ID (#stil45) ‐> se folosesc 1 data pe pagina 

    .   = CLASA (.stil45) ‐> se folosesc de oricate ori 

    p  = ETICHETA (ex. H1) ‐> se pot folosi si direct etichete, fara id sau clasa 

    Legatura intre fisierul HTML si cel CSS (se pune in pagina HTML): 
    <head> 
    <link rel="stylesheet" type="text/css" href="initiere.css"> 
    </head> 
     
    Exemple de proprietati CSS: 

     background: black;  (fundal negru) 
     color:white; (culoarea textului sa fie alba) 
     font‐family: Impact; (ce tip de font sa fie folosit) 
    In  afara  de  fonturile  standard  recunoscute  de  browsere  (Arial,  Verdana,  “Times  New  Roman” 
    etc.) se pot prelua fonturi si de pe Google Fonts (fonts.google.com) = “embed font” 
    Pentru a lucra cu HTML si CSS folosim un editor web (ex. Notepad++) sau un editor online (ex. 
    cssdesk.com) 
     

    Javascript 
     

     este utilizat pentru programarea comportamentului paginilor web si interactivitate; 
     este case sensitive (conteaza daca scrii un cuvant cu litera mare sau cu litera mica); 
     este un limbaj de scripting client‐side (ruleaza pe calculatorul utilizatorului si nu pe 
    server. Rezultatul se poate afisa diferit de la un utilizator la altul. Este dependent de 
    setarile browserului) 
     
    JavaScript si Java sunt doua limbaje de programare complet diferite. 
    Putem scrie codurile Javascript in doua feluri: 
    1. (intern) direct in pagina HTML folosind etichetele <script> si </script> 
    2. (extern) in afara paginii HTML, folosind un fisier .js 
     

    Varianta 1 – exemple folosind etichetele <script> si </script>:  
    Exemplu 1 
    In pagina HTML, inainte de </head>: 
    <script> 
    alert("Bine ai venit!"); 
    </script> 
     
    sau:  
    prompt("Bine ai venit! Cum te numesti?"); 
     
    Exemplu 2 
    var nume=prompt("Bine ai venit! Cum te numesti?"); 
    if (nume!=””) { alert ("Buna, "+nume);} 
     
    Explicatie: Am creat o variabila nume care ia valoarea textului pe care il introduc eu cand scriu 
    numele. Apoi codul spune: daca variabila nume este diferita de nimic (adica am scris ceva acolo) 
    atunci afiseaza buna si numele introdus.  Adica, daca am introdus ceva la nume atunci sa afiseze 
    textul buna si numele pe care l‐am introdus. Daca nu scriu nimic la nume nu imi apare nimic. 
    Modific codul astfel incat daca nu scriu un nume, sa ma atentioneze ca nu am scris nimic: 
    var nume=prompt("Bine ai venit! Cum te numesti?"); 
    if (nume!="") { alert("Buna, "+nume);} else alert("Nu ai introdus numele"); 
     
     
    Exemplu 3  
    Modific culoarea fundalului paginii HTML, din negru in albastru. Codul pe pune dupa </head>. 
    <button type="button" onclick="document.body.style.backgroundColor = 
    'midnightblue';">Fundal ALBASTRU</button> 
    Cum apare si in engleza, comanda spune:   
    1. Se modifica documentul (document) 
    2. Din document se modifica partea de body 
    3. Din corpul documentului (body) se modifica stilul (style) 
    4. La stil se modifica culoarea de fundal (backgroundColor) 
    5. In ce anume se modifica fundalul? In midnightblue. 
     
    Exercitiu: 
    Creeaza un al doilea buton care sa schimbe culoarea fundalului in “teal”. Apoi adauga un al treilea 
    buton, ca sa poti modifica fundalul asa cum era initial. 
    Rezolvare: 
    <button type="button" onclick="document.body.style.backgroundColor = 
    'midnightblue';">Fundal ALBASTRU</button> 
    <button type="button" onclick="document.body.style.backgroundColor = 'teal';">Fundal 
    TEAL</button> 
    <button type="button" onclick="document.body.style.backgroundColor = 'black';">Fundal 
    NEGRU</button> 
     

    Exemplu 4 
    alert("Latimea Ecranului: "+ screen.width ); 
    screen.width = functia care retine latimea la care este setat ecranul  
     
    Exemplu 5 
    alert("Limba: "+ navigator.language);  
    in ce limba este setat browser‐ul utilizatorului  
     
    Exemplu 6 
    alert(navigator.userAgent); 
    ce sistem de operare foloseste vizitatorul site‐ului tau  

     
    Vad  ca  scrie  Windows  NT  10.0  pe  64  de  biti.  NT  10.0  corespunde  pentru  Windows  10. 
    Corespondentele sunt: 

    Windows 3.11  Win16 
    Windows 95  Windows 95|Win95|Windows_95 
    Windows 98  Windows 98|Win98 
    Windows 2000  Windows NT 5.0|(Windows 2000 
    Windows XP  Windows NT 5.1|(Windows XP 
    Windows Server 2003  Windows NT 5.2 
    Windows Vista  Windows NT 6.0 
    Windows 7  Windows NT 6.1 
    Windows 8  Windows NT 6.2|WOW64 
    Windows 10  Windows 10.0|Windows NT 10.0 
    Windows 8.1  Windows 8.1|Windows NT 6.3 
    Windows NT 4.0  Windows NT 4.0|WinNT4.0|WinNT|Windows NT 
    Windows ME  Windows ME 
    Open BSD  OpenBSD 
    Sun OS  SunOS 
    Linux  Linux|X11 
    Mac OS  Mac_PowerPC)|(Macintosh)', 
    QNX  QNX', 
     

    Varianta 2 – folosind un fisier Javascript separat 

    Creezi un fisier si il salvezi cu terminatia .js 
    Apoi in fisierul HTML, intre <head> si </head> scrie legatura cu fisierul JS: 
    <script src="initiere.js"></script> 

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