Search the Community
Showing results for tags 'web-developement'.
Found 11 results
-
Salut, De acestă dată o să vă prezint cel de-al 5-lea modul din micul plan, și anume, "Bazele CSS" ! Ce este CSS? CSS (Cascading Style Sheets) este un limbaj care se foloseşte pentru descrierea semanticii de prezentare a documentului scris într-un limbaj descriptiv (markup language). Cu alte cuvinte, acesta descrie, respectiv ordonează aspectul şi formatarea oricărui element de pe pagină. Regulile CSS ne permit să stilizăm elementele HTML şi alte documente. CSS se foloseşte doar pentru ordonarea şi stilizarea conţinutului în HTML şi a altor documente. CSS este separat de limbajul HTML şi de tag-urile sale. Dacă avem o pagină HTML, nu mai trebuie să corectăm codul respectiv pentru a introduce codul CSS. Pe acesta îl introducem fie într-un fişier separat (cu extensia .css), fie în partea head a documentului HTML. Cum funcţionează CSS-ul? Utilizând CSS, putem crea reguli, cu ajutorul cărora stilizăm cadrul respectiv, dar şi elementele din el. Sintaxa CSS constă în regula CSS (CSS Rule). Regulile CSS sunt alcătuite în mod obligatoriu din două părţi: selectorul (selector) şi declaraţia (declaration). Selectorul indică elementul (sau, dacă sunt mai multe, le separăm prin virgulă) la care se referă respectiva regulă CSS. Declaraţia implementează stilizarea pentru elementul la care se referă regula CSS. Când creăm o regulă CSS, plasăm selectorul, apoi introducem un spaţiu gol şi apoi punem paranteze acolade, după care introducem declaraţia, ca în exemplul de mai jos: h1 { color:red; } Declaraţiile sunt, de asemenea, alcătuite din două părţi: proprietate (property) şi valoare (value). Dacă vrem ca paragrafele paginii noastre să aibă fontul Tahoma şi dimensiunea de 12 px, vom scrie următoarele: p { font-family:Tahoma; font-size:12px; } Prin urmare: limbajul CSS este alcătuit din reguli. Fiecare regulă este alcătuită din selector şi declaraţie. Declaraţia este alcătuită din proprietate şi valoare. Modalitatea de scriere a unei reguli CSS Am menţionat că CSS este separat de codul HTML, de aceea există trei opțiuni de plasare a acestuia, din care două se folosesc în mod activ. CSS-ul extern După cum îi spune și numele, CSS-ul extern se află în afara documentului HTML, într-un fişier separat. Cea mai simplă versiune este cea în care avem un fişier HTML, iar lângă el, un fişier CSS. Este suficient să introducem un anumit tag în partea head a fişierului HTML, tag care va conecta fişierul CSS extern. Pe de altă parte, în fişierul CSS scriem doar regulile. În fişierele CSS, nu trebuie să apară nicio parte a limbajului HTML. Tag-ul pentru legarea regulilor CSS în partea head a paginii este <link>. În cazul tag-ului <link>, aceste atribute sunt: href – defineşte calea până la fişierul CSS extern. Poate fi relativă sau absolută. type – defineşte tipul de document la care ne legăm, deoarece tag-ul <link> se poate folosi şi în alte scopuri, deşi în ultimul timp se foloseşte doar pentru CSS. Setăm: ”text/css”. rel – defineşte relaţia dintre fişierul HTML şi cel legat, adică fişierul extern. Setăm: ”stylesheet” <!DOCTYPE html> <html> <head> <title>CSS extern</title> <link href=”css/stilizare.css” type=”text/css” rel=”stylesheet”> </head> <body> </body> </html> CSS-ul intern Spre deosebire de CSS-ul extern, CSS-ul intern se află direct în documentul HTML, mai exact în partea head. În loc să punem un tag <link> ca mai sus, putem adăuga tag-ul <style>, iar în cadrul lui să scriem direct regulile CSS. <!DOCTYPE html> <html> <head> <title>CSS intern</title> <style type=”text/css”> p { font-family:Tahoma; font-size:12px; } </style> </head> <body> </body> </html> Inline CSS Am menţionat că există trei moduri de a scrie codul CSS. În afară de CSS-ul extern şi intern, există şi modul de scriere inline. Acesta se deosebeşte prin faptul că selectorul este omis, iar CSS-ul se scrie direct în tag-ul HTML, la fel ca atributul. În CSS inline, adăugăm atributul style (pe tag-ul HTML pe care vrem să-l stilizăm) și în el scriem între ghilimele proprietăţile şi valorile, ca mai devreme. <p>First paragraph</p> <p style=”font-family:Tahoma; font-size:12px;”>My paragraph</p> <p>Third paragraph</p> Regula ordonării stilurilor CSS In cadrul fişierelor CSS sau al secțiunii CSS din cadrul paginii se poate ajunge la suprapunere. În astfel de situaţii, există anumite reguli care se aplică în mod automat şi determină care regulă CSS va fi aplicată. În cazul în care regulile CSS se suprapun, browser-ul va aplica regula de proximitate (engl. proximity rule), care specifică aplicarea regulii CSS care este cea mai apropiată de elementul-ţintă. Practic, aceasta înseamnă că, în caz că există mai multe stilizări diferite pentru acelaşi element, browser-ul va folosi cel mai apropiat element de elementul respectiv, cu condiţia ca selectorul să fie identic. În caz că selectorii se deosebesc (dar ţintesc acelaşi element), este important care dintre aceştia este mai precis, iar apoi este importantă şi ordinea. Semantica şi noile elemente HTML5 Dacă ne axăm numai asupra aspectului vizual, toate elementele noi se comportă ca niște div-uri şi nu există niciun fel de diferenţă. Dar, pe de altă parte, contribuie la semantica paginii, adică definesc scopul și menirea părților paginii. Cele mai frecvente elemente noi de bază sunt: Elementul <section> inserează o parte a paginii, respectiv a documentului. Poate cuprinde mai multe elemente identice (de exemplu, <article>), care au subiect sau scop similar. Se poate folosi pentru gruparea altor elemente în unități. Dintre elementele noi, unii autori îl consideră cel mai apropiat de vechiul div. Elementul <article> se comportă ca un cadru pentru orice parte a paginii care se poate evidenția în raport cu restul conţinutului. Este destinat pentru articole, postări pe blog, pe forumuri şi orice alt conţinut independent. Se pot ordona unul după altul sau unul într-altul (de exemplu, comentarii pentru un anumit post care este article - comentariile în sine pot fi, de asemenea, article). Deseori, la început putem face confuzie între <section> şi <article>. Elementul <nav> se foloseşte pentru introducerea şi setarea principalelor elemente de navigare pe pagină (site). Încă există o polemică dacă nav trebuie folosit pentru toate poziţiile de pe linkuri din pagină sau doar pentru navigarea principală. O regulă general-acceptată este că nav trebuie folosit pentru Block-uri mai mari de navigare. De exemplu, dacă în footer setăm doar linkuri pentru termenii de utilizare, informaţii legale şi pagina de start, acestea nu trebuie puse în nav. Dar, dacă în acelaşi footer avem repetate complet principalele linkuri, principala navigare a site-ului, atunci trebuie folosit nav. Elementul <aside> are două scopuri, în funcţie de faptul dacă se află în cadrul elementului <article> sau nu. Elementul <header> se foloseşte pentru a defini un header individual al unei anumite părţi sau al unui anumit element al paginii (de exemplu: <article> sau <section>) sau, mult mai frecvent, pentru a defini principalul header al paginii. În cazul în care se află direct pe pagină, setează headerul site-ului care conţine logoul, motorul de căutare, navigarea etc. Elmelentul <footer> este asemănător cu headerul, dar are alt scop. În timp ce headerul setează antetul, footerul setează partea finală a elementului sau a paginii. Dacă se află în interiorul unei părţi a paginii, poate conţine numele autorului textului, paginile legate etc. Dacă se află direct pe pagină, poate să conţină diferite elemente care se găsesc, de obicei, în partea de jos a site-urilor (informaţii legale, linkuri către harta site-ului şi către regulile de utilizare, navigarea repetată etc.). Elementul <figure> are ca principal scop încadrarea conţinutului suplimentar legat de text (partea paginii). De exemplu, pentru setarea imaginilor, a materialului video, a diagramelor etc. În cadrul său, se poate adăuga şi <figcaption> pe lângă conţinutul în sine, ca descriere. În ultimul timp, se pune foarte des întrebarea: „Când şi în ce situaţie putem folosi un element HTML5 sau altul şi, în general, dacă le putem folosi sau dacă ar trebui să le folosim sau ar trebui să revenim la bine cunoscutul DIV?” Toate aceste elemente vi se pot părea confuze acum, deoarece unele sunt identice (de exemplu: aside şi figure), dar fiecare are propriul scop. În general, şi elementele div se folosesc în continuare, nu sunt eliminate din uz. Putem spune că div-ul se foloseşte întotdeauna, excepţie făcând existenţa unui element determinat cu exactitate pentru o anumită aplicare (de exemplu, header sau footer, şi atunci folosim <header>, respectiv <footer>). Elementele Block si Elementele Inline Toate elementele vizibile de pe o pagină, de la imagini şi paragrafe până la linkuri, sunt localizate în cadre invizibile (în limba engleză, se foloseşte termenul box). Aceste cadre apar în două variante: Block şi Inline. Diferenţa dintre aceste elemente constă în comportamentul lor pe pagină: Elementele Block sunt dreptunghiuri, care tind să umple întregul spaţiu orizontal. Elementele Inline sunt dreptunghiuri, care se potrivesc cu alte elemente. În ilustraţia de mai sus, putem vedea în ce constă diferenţa dintre aceste elemente. Elementele Block se aranjează unul sub altul, indiferent de lăţimea lor. Elementele Inline se aranjează unul lângă altul, precum literele într-un text. Dacă nu le definim altfel, elementele Block ocupă cât mai mult spaţiu pe orizontală şi mută elementul precedent şi pe cel următor deasupra sau sub ele. Practic, împing toate elementele aflate lângă ele dedesubt şi rămân singure pe rândul respectiv. Elementele Block reprezintă instrumentul principal de a ordona paginile. Elementele Inline se bazează pe formatarea textului şi astfel se şi scriu. Dimensiunile lor depind doar de conţinutul din cadrul lor. Dacă definim lăţimea unui element Inline, de exemplu la 200 px, nu se va întâmpla nimic, lăţimea lui va depinde în continuare de lăţimea conţinutului. Contrar acestui lucru, adăugarea de text va mări lăţimea. În mod implicit, fiecare element de pe pagină (în cadrul secțiunii <body>) este element Block sau Inline. Totuşi, cu ajutorul lui CSS, putem schimba un element Inline într-unul Block sau invers. De exemplu, elementele de pe o listă neordonată (Block) se pot transforma în elemente Inline şi astfel obţinem un rând de text cu elemente puse unul lângă altul. De asemenea, putem schimba un şir de linkuri dintr-un text (Inline) în elemente Block, pentru a obţine linkuri aranjate pe verticală. In mod implicit, în elementele Block intră: elemente div (<div>) paragrafe (<p>) liste (<ul>) elementele listelor (<li>) titluri (<h1> – <h6>) tabele (<table>) elementele HTML5 de bază (<section>, <aside>, <nav>, <header> şi <footer>) tag-ul body (<body>) În mod implicit, în elementele Inline intră: elemente span (<span>) linkuri (<a>) formatarea bold (<strong> sau <b>) formatarea italică (<em> sau <i>) imagini (<img>) citate (<cite>) etichete (<label>) Gruparea elementelor. Gruparea mai multor elemente într-un singur element Block (div) Elementul <div> ne permite să grupăm mai multe elemente într-un singur element Block. De exemplu, putem să creăm un div pentru antetul paginii şi să punem în el toate elementele antetului (logo, slogan, navigare, căutare). Tag-ul div, fiind de tip Block, începe pe un rând nou. În afară de aceasta, el nu influenţează aspectul paginii. În mod implicit, div-urile nu au niciun fel de stilizare (fundalul este transparent, border, margin şi padding sunt 0, înălţimea depinde de conţinut şi aşa mai departe). Totuşi, le putem adăuga valori ID şi/sau CLASS şi să le ţintim cu regulile CSS. Această simplitate de bază, pe de o parte, și marile posibilităţi de stilizare, pe de altă parte, fac din elementele div structura de bază a fiecărui site. Gruparea mai multor elemente într-un singur element Inline (SPAN) Elementul <span> este echivalentul Inline al elementului <div>. Cu ajutorul lui putem grupa mai multe elemente Inline într-unul singur. De obicei, se foloseşte pentru a separa părţile din text, deoarece putem, de exemplu, să marcăm o parte din text, să adăugăm CLASS sau ID, iar apoi cu o descriere CSS să influenţăm partea respectivă a textului (care este înconjurată de span). Modelul CSS Box După cum am menţionat deja, în jurul fiecărui element vizibil de pe pagină există un cadru (box) imaginar pe care îl putem stiliza. Dacă am împărți afişarea unui element în etape, am obţine următoarea ordine: HTML setează conţinutul şi creează un cadru imaginar. CSS stilizează cadrul respectiv, îl modifică după nevoie, pentru ca în final să afişeze utilizatorului elementul respectiv. Modelul Box este alcătuit din 5 proprietăţi de bază ale elementelor. Acestea sunt: Width (lăţimea) Height (înălţimea) Margin (marginea sau spaţiul extern) Padding (padding sau spaţiul intern) Border (bordură, cadru) Marginile sunt întotdeauna transparente şi separă elementul de alte elemente de pe pagină. Cadrele (Borders) pot avea diferite stiluri şi stabilesc graniţele elementului. Padding separă conţinutul (content) unui element de cadrele sale. Setările elementelor de fundal se referă la aria din interiorul cadrului, împreună cu secțiunea Padding şi Content (în imagine, secțiunea Padding este afişată cu verde mai închis, deşi în realitate este invizibilă). Proprietăţile Margins, Borders şi Padding pot avea valori diferite pentru fiecare parte a unui element (Top, Right, Bottom, Left). În mod implicit, aceste proprietăţi sunt, de obicei, 0. Este important de reţinut că valorile Width şi Height determină doar lăţimea, respectiv înălţimea conţinutului elementului. Înălţimea şi lăţimea reală pe care elementul le ocupă pe pagină sunt: Content + Padding + Border De exemplu, dacă avem un element div în care conţinutul este de 100x100 pixeli, Padding este 10 px (pe toate părţile), iar Border este 2 pixeli (de asemenea, pe toate părţile), acesta va ocupa 124x124 pixeli. Asta se datorează faptului că lăţimea totală este: 100px pentru conţinut + 10px pentru Padding x2 pentru Padding-ului din stânga şi dreapta + 2px pentru Border x2, deoarece avem şi cadru în stânga şi în dreapta (100 + 10x2 + 2x2 = 124px). Acelaşi lucru este valabil şi pentru înălţime. Codul CSS pentru elementele din acest exemplu ar putea fi: div { width:100px; height:100px; padding:10px; margin:0; border-width:2px; border-style:solid; border-color:#f90; } Proprietăţile CSS în modelul box Width şi Height Cele două proprietăţi reprezintă lăţimea, respectiv înălţimea conţinutului elementului. În mod implicit, lăţimea şi înălţimea sunt atât de mari cât trebuie să înconjoare conţinutul. Excepţie face lăţimea elementelor Block, care se extinde la maxim. Valoarea poate fi în pixeli, procente sau în valori em. Pixelii sunt cel mai popular mod și se folosesc în majoritatea cazurilor. Dacă folosim procente, dimensiunea va fi stabilită de dimensiunea ferestrei browser-ului, respectiv de dimensiunea elementului părinte (dacă există). La valoarea em, dimensiunea depinde de dimensiunea textului (fontului) din cadrul lui: .myDiv { width:400px; height:80%; } Padding Această proprietate defineşte spaţiul intern (Padding). Dacă nu punem nicio valoare, cea implicită este 0. Dacă proprietatea nu conţine niciun sufix, atunci aceasta se aplică pe toate cele patru părţi: padding:10px; Dacă vrem valori Padding diferite, sus, la dreapta, la stânga şi jos, putem scrie, de exemplu: padding-top:10px; padding-right:15px; padding-bottom:20px; padding-left:25px; Există şi un mod prescurtat de scriere (Shorthand). Putem folosi doar proprietatea Padding (fără sufix), pentru a determina toate cele 4 valori: padding:10px 15px 20px 25px; Este important de menţionat doar că valorile se scriu întotdeauna în sensul acelor de ceasornic, începând de sus. În exemplul nostru, 10 px este valoarea Padding-ului de sus, 15 px a celui din dreapta, 20 px a celui de jos, iar 25 px a celui din stânga. Margin Această proprietate defineşte spaţiul extern (Margin). Toate regulile valabile pentru Padding sunt valabile şi pentru Margin. Valoarea implicită este 0 la elementele div. Putem să scriem proprietatea generală (Margin) sau să folosim aceleaşi sufixe pentru părți ca şi la Padding sau putem să scriem şi proprietatea shorthand (prescurtată). margin:100px; margin-top:100px; margin-right:30px; margin-bottom:200px; margin-left:25px; margin:100px 30px 200px 25px; Border-width Folosim această proprietate pentru a defini grosimea marginii din jurul elementului. Putem folosi pixeli sau una dintre următoarele trei valori: thin, medium, thick. În acest caz, procentele şi alte unităţi nu sunt permise. La fel ca la margin şi padding, valoarea border se aplică tuturor celor patru părţi. Valorile diferite le putem scrie prescurtat (shorthand) sau separat, de exemplu: border-top-width: 6px; border-right-width: medium; border-bottom-width: 3px; border-left-width: thin; Border-style Această proprietate se folosește pentru a determina tipul de bordură, cadrul (border) din jurul elementului. În imaginea de mai jos, putem vedea opțiunile posibile. În general, se foloseşte solid (o linie simplă). Valoarea este propriul nume al tipului: solid, double, grooved etc. Dacă toate marginile elementului sunt identice, scriem: border-style:solid; De asemenea, putem determina şi tipul marginii, folosind: border-top-style: solid; border-right-style: groove; border-bottom-style: dotted; border-left-style: outset; Border-color După cum îi spune numele, această proprietate defineşte culoarea marginii. Valoarea culorii poate fi scrisă în diferite moduri, cu ajutorul sistemului hex, RGB sau cu ajutorul numelor culorilor (despre culorile pe web vom discuta într-o lecţie separată): border-color: #FF9900; Alte proprietăţi importante: Display Mai devreme, am menţionat că elementele Block se pot transforma în elemente Inline şi invers. Tipul de element poate fi determinat folosind proprietatea Display prin CSS. Dacă, de exemplu, la valoarea Display a unui element Inline îi atribuim valoarea Block, atunci acest element va fi tratat ca oricare alt element Block: span { display:block; } Cu acest exemplu, am transformat elementele span în elemente Block. În afară de valorile Block şi Inline, pe care le folosim pentru a schimba tipul, proprietatea Display poate avea şi valoarea none. În acest caz, dacă aplicăm display:none, browser-ul se va comporta ca și când elementul nu ar exista, deşi acesta se va afla în cod. De asemenea, orice element încorporat în cadrul elementului respectiv nu va fi afişat, deşi îi este acordată o altă valoare Display. De exemplu, tag-ul span este un element Inline. Dacă atribuim valoarea display:block, practic aceasta se va comporta ca un div. Pe de altă parte, dacă postăm display:none, span-ul menţionat nu va fi vizibil. Totuşi, trebuie să reţinem faptul că, datorită acestei opţiuni nu eliminăm în totalitate elementul, ci doar ascundem afişarea lui, însă utilizatorul va putea citi întotdeauna codul-sursă HTML, pe care îl conţine partea respectivă. Datele sensibile nu ar trebui ascunse în acest mod. Visibility Proprietatea visibility asigură ascunderea unui anumit element, în timp ce spaţiul rezervat pentru elementul respectiv rămâne. Poate avea una dintre următoarele două valori: hidden (ascunde elementul) sau visible (afişează elementul - aceasta este valoarea implicită şi nu trebuie să o scriem). span { visibility:hidden; } Diferenţa dintre visibility:hidden; şi display:none; constă în faptul că, în primul caz, elementul dispare, însă rămâne un spaţiu rezervat pentru el, iar celelalte elemente nu se mută, în timp ce în al doilea caz, elementul dispare de pe pagină și odată cu el şi spaţiul rezervat, aşadar şi celelalte elemente se mută pe pagină. Vă reamintim că, atunci când se utilizează aceste două tehnici, elementele sunt ascunse utilizatorului doar din punct de vedere vizual, rămânând în continuare disponibile în cod, aşadar nu trebuie să ascundem date sensibile în acest mod. Overflow Această proprietate se folosește pentru a defini ce se întâmplă în cazul în care conţinutul depăşeşte cadrele date. De exemplu, putem să definim lăţimea şi înălţimea unui div la 200x300 px, iar apoi să introducem întreaga pagină de text. Deoarece dimensiunile definite sunt mai mici decât cele necesare, textul întreg nu va fi vizibil (partea care depășește div-ul). Totuşi, folosind proprietatea overflow, putem să definim cazul în care conţinutul din cadrul elementului se derulează utilizând overflow:scroll; . O altă valoare posibilă este overflow:hidden; , care va tăia partea ce iese în afara cadrului. Valoarea implicită este overflow:visible; div.myText { overflow:scroll; } În trecut, această proprietate se folosea mai mult pentru introducerea textelor mai lungi în niște cadre limitate. Acum, odată cu dezvoltarea web-ului, proprietatea a devenit inutilă, chiar ineficientă. Totuşi, o caracteristică secundară a acestei proprietăţi a devenit utilă pe site-urile moderne. Min-width, max-width După cum ne şi spun denumirile acestor proprietăţi, este vorba de o lăţime minimă, respectiv maximă a elementelor. În loc să folosim dimensiuni fixe, putem să definim dimensiunea minimă şi/sau maximă: #wrapper { min-width:960px; max-width:1280px; } Utilizarea ambelor proprietăţi în acelaşi element nu este obligatorie. Nu trebuie combinate cu lățimea fixă. Min-height, max-height Proprietăţile min-height şi max-height se comportă la fel ca proprietățile menționate mai sus, singura diferenţă constând în faptul că se referă la înăţimea elementului: p { min-height:10px; max-height:26px; }
-
Salut, De acestă dată o să vă prezint cel de-al 4-lea modul din micul plan, și anume, "Tabelele, formularele si informatiile de pe pagina" ! Vom incepe cu Tabelele Structura tabelului Există mai multe tipuri de date care sunt mai uşor de reprezentat sub formă de tabel decât sub formă de text. De exemplu, rezultatele sportive, rapoartele financiare, orarele şi multe alte informaţii de pe site-uri sunt mai uşor de reprezentat prin tabele. În limbajul HTML, tabelele sunt alcătuite din celule, pe care le marcăm cu td (table data), şi din rânduri, pe care le marcăm cu tr (table row) - acestea sunt conținute în cadrul tag-ului table, care înconjoară totul. Observați imaginea de mai jos pentru a înțelege mai bine: Aceasta este reprezentarea unui tabel cu trei rânduri şi patru coloane, în total 12 celule. În imagine, este marcată şi ordinea în care sunt aranjate celulele. Când scriem tabele în limbajul HTML, trebuie să respectăm următorii paşi: Deschidem tag-ul <table> Deschidem rândul tabelului <tr> Scriem toate celulele <td>, în acest caz - patru Închidem rândul actual <tr> Deschidem următorul rând <tr> Scriem toate celulele <td> În cod, un astfel de tabel ar arăta astfel: <table width="600" border="1"> // atributul 'border' - este pentru grosimea liniei tabelului <tr> <th>*</th> <th>monday</th> <th>tuesday</th> <th>wednesday</th> <th>thursday</th> <th>friday</th> </tr> <tr> <th>morning</th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th>evening</th> <td> </td> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> Atributele td Unirea pe orizontală Dacă trebuie să unim anumite celule ale tabelului pe orizontală, pe prima celulă care trebuie unită vom pune atributul colspan, în care definim peste câte celule trebuie să se extindă. <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> Însă, dacă vrem să unim celulele 4 şi 5, atunci trebuie să adăugăm atributul colspan cu valoarea 2 (deoarece unim două celule) și, de asemenea, trebuie să eliminăm întregul tag <td> al celulei 5. <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td colspan="2">4</td> <td>6</td> </tr> </table><span style="font-size: 14px;"> </span> Unirea pe verticală Dacă vrem să unim celulele pe verticală, utilizăm o tehnică similară celei prin care realizăm unirea pe orizontală, numai că în acest caz atributul este rowspan, în loc de colspan. <table> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> Dacă schimbăm codul, arata astfel: <table> <tr> <td rowspan="2">1</td> <td>2</td> <td>3</td> </tr> <tr> <td>5</td> <td>6</td> </tr> </table> Tabelele lungi Dacă avem nevoie de tabele foarte lungi sau complicate, putem ramifica părțile <head>, <body> şi <footer> ale tabelului. Termenii ne reamintesc de anumite părţi ale documentului HTML, însă similitudinea nu este foarte mare. Tag-ul <thead> se foloseşte pentru a marca antetele tabelului. Tag-ul <tbody> se foloseşte pentru a introduce rândurile şi celulele obișnuite. Tag-ul <tfoot> se foloseşte pentru a marca partea de jos a tabelului. Iată cum arată în cod: <table> <thead> <tr> <td>celula părţii head</td> </tr> <tr> <td>celula părţii head</td> </tr> </thead> <tfoot> <tr> <td>celula părţii footer</td> </tr> <tr> <td>celula părţii footer</td> </tr> </tfoot> <tbody> <tr> <td>celula părţii body</td> </tr> <tr> <td>celula părţii body</td> </tr> </tbody> </table> Bazele formularelor Formularele în sine nu au nicio funcţionalitate, ci reprezintă doar un tip de şablon pentru colectarea informaţiilor. Când utilizatorul completează un formular de pe un site, datele colectate sunt transmise până la script-urile de pe o altă pagină, care va finaliza activitatea de colectare a datelor. Pagina contact.html conţine un formular în care utilizatorul introduce datele şi un mesaj. După ce utilizatorul trimite formularul, acesta apelează pagina contact_send.php, pe care se află un script, care procesează datele colectate şi le trimite prin e-mail la adresa indicată. Script-ul poate trimite e-mailuri, poate scrie/citi datele din baza de date sau poate face alte lucruri definite. Tag-ul form Baza formularului web este tag-ul form. Acesta este doar un simplu element HTML cu atribute şi subelemente caracteristice. Astfel, în el introducem tot ceea ce vrem să trimitem serverului prin formularul respectiv. Fiecare formular (<form>) recunoaşte evenimentul submit. Acesta activează formularul şi transferă valorile acestuia către server. Tag-ul se scrie foarte simplu: <form></form> Totuşi, acest lucru nu este suficient pentru început. Fiecare formular trebuie să aibă următoarele atribute: Action Method ID Action Fiecare formular conţine atributul action care indică script-urile la care vor fi transferate datele. În exemplul de mai sus, era vorba de pagina contact_send.php. Observăm că pagina-ţintă este de tip .php. Acest lucru este frecvent (.php, .asp, .jsp) deoarece procesarea parametrilor de server se poate efectua doar din script-urile de pe server. În cazul în care nu vrem să transmitem parametri către server, nu avem nevoie de formular. Dacă omitem acest atribut, browser-ul va subînţelege că aceeaşi pagină care conține formularul va procesa și datele. Method Atributul method defineşte modul în care vor fi transmise datele. Există două opţiuni, şi anume: metoda GET - datele din formular sunt trimise serverului printr-un URL. Informaţiile transmise în acest mod sunt transparente şi supuse atacurilor din partea hackerilor. Deoarece un URL poate avea cel mult 8.192 de caractere, această metodă nu este adecvată pentru formulare mai lungi. De asemenea, putem ajunge la transliteraţie sau transcripţie, iar unele caractere se pot modifica sau pierde pe parcurs. metoda POST - această metodă împachetează datele formularului în cadrul cererii HTTP. Datele nu sunt codificate şi de aceea (deşi sunt mai sigure decât în cazul metodei GET) sunt supuse atacurilor din partea hackerilor. Aşadar, în cazul în care colectăm informaţii personale, precum nume de utilizator, parole sau numere de carduri de credit, trebuie să asigurăm o conexiune mai sigură până la un server sigur. Name şi ID ID-ul se foloseşte pentru determinarea unică a elementului HTML pe o pagină în Document Object Model (prin JavaScript sau pentru stilizare prin CSS). ID-ul trebuie să fie unic. Name determină numele formularului. Inserarea unui formular Având în vedere toate cele menţionate mai sus, codul formularului nostru poate avea aspectul următor: <form action="script.php" method="POST" name="formular_exemplu" id="formular_exemplu"> // some cods </form> Controalele formularului Input (text) Tag-ul pe care îl întâlnim cel mai des în formulare este <input>. Acesta este un tag cu autoînchidere, deoarece toţi parametrii lui sunt setați prin atribute. Acelaşi tag se foloseşte pentru mai multe controale diferite, însă este determinat de atributul type obligatoriu. Prin urmare, dacă vrem să introducem un câmp text simplu, vom introduce tag-ul input cu atributul type="text": <input type="text" name="color" id="color"> Mai putem adăuga și atributul maxlength, cu care determinăm numărul maxim de caractere. De exemplu, dacă vrem să limităm numărul posibil de caractere la 4, vom adăuga maxlength="4" <label for="color">color</label> <input type="text" name="color" id="color"> Fără tag-ul label adăugat, s-ar fi afişat doar câmpul fără textul din stânga lui. Tag-ul label nu trebuie să se afle imediat înainte de tag-ul input, însă de cele mai multe ori îl găsim în această poziție. Important este faptul că label posedă atributul for, care îl leagă de un anumit input. Atributul for al tag-ului input trebuie să fie același ca şi atributul ID al tag-ului input (sau al unui alt tag). Input (password) Tag-ul input se foloseşte tot pentru introducerea parolei (password). În acest caz, atributul type este adăugat pe password. Toate celelalte atribute sunt la fel ca și în cazul textului input. <input type="password" name="pass" id="pass"> Textarea Acest tag creează un câmp textual ceva mai mare, care poate susţine și mai multe rânduri de text. Spre deosebire de câmpul input, textarea nu este un tag cu autoînchidere, aşadar necesită un început şi un sfârşit. Între acestea, se introduce textul care se va afişa în control după încărcarea paginii. <textarea name="description" id="description">Lorem ipsum dolor sit amet.</textarea> Radio buttons (Butoanele radio) Butonul radio este un control destul de diferit din punct de vedere vizual față de controalele menţionate mai devreme, însă şi acesta se bazează pe tag-ul input. <input name="country" type="radio" id="Serbia" value="Serbia" checked="checked"> <label for="Serbia">Serbia</label> <br> <input name="country" type="radio" id="Romania" value="Romania"> <label for="Romania">Romania</label> <br> <input name="country" type="radio" id="Ukraine" value="Ukraine"> <label for="Ukraine">Ukraine</label> Dacă vrem ca, pe măsură ce pagina se încarcă, să fie indicată o valoare, vom adăuga atributul checked="checked" pe tag-ul ei input. Valoarea este întotdeauna aceeaşi. Putem adăuga acest atribut doar pe un input radio din grup. Câmpurile Checkbox Acest control este foarte similar cu controlul radio, însă se deosebeşte prin faptul că utilizatorul poate selecta mai multe valori în acelaşi grup. <input name="country" type="checkbox" id="Serbia" value="Serbia" checked="checked"> <label for="Serbia">Serbia</label> <br> <input name="country" type="checkbox" id="Romania" value="Romania"> <label for="Romania">Romania</label> <br> <input name="country"type="checkbox" id="Ukraine" value="Ukraine"> <label for="Ukraine">Ukraine</label> După cum putem vedea, totul este identic, doar atributul type este modificat. Astfel, am activat alegerea multiplă, unde valorile nu se anulează reciproc. Restul rămâne la fel ca în cazul butoanelor radio. Select (dropdown) Acest control permite utilizatorului să selecteze o valoare din meniul dropdown (derulant): <select name="country" id="country"> <option value="Serbia">Serbia</option> <option value="Romania" selected="selected">Romania</option> <option value="Ukraine">Ukraine</option> </select> La fel ca şi unele controale anterioare, putem alege valoarea care trebuie selectată în momentul încărcării paginii. În acest caz, putem adăuga atributul şi valoarea selected="selected" la opţiunea dorită (în exemplu, a fost adăugată celei de-a doua opţiuni - "Romania"). Incărcarea fişierului Controlul care asigură încărcarea fişierelor prin intermediul formularelor este din nou input type (type="file" <input type="file" name="CV" id="CV"> Dacă folosim acest control, formularul trebuie să aibă metoda setată la POST, precum şi un enctype-ul: multipart/form-data Butonul submit Butonul submit, respectiv controlul submit, cum este mai corect, se foloseşte pentru a trimite formulare şi date introduse unui server, unde vor fi procesate. Din nou se foloseşte bine cunoscutul input, dar cu atributul type setat la submit: <input type="submit" name="submit" id="submit" value="Finish"> Fieldset şi legend Dacă vrem să încadrăm o parte din formular şi să-i adăugăm un anumit titlu, putem face acest lucru cu ajutorul tag-ului fieldset cu care încadrăm toate controalele pe care le selectăm. Putem adăuga tag-ul legend imediat după ce deschidem tag-ul fieldset. În continuare, avem următorul exemplu: <fieldset> <legend>Contact</legend> <label>Email:<br> <input type="text" name="email"> </label><br> <label>Phone:<br> <input type="text" name="phone"> </label> </fieldset> Meta tag-urile Tag-urile <meta> se inserează în partea head a paginii, iar rolul lor este să ofere informaţii suplimentare despre pagina pe care se află. Totuşi, aceste informaţii nu sunt vizibile utilizatorului la prima vedere. Deoarece se află în partea head a paginii, nu apar în browser. Aceste informaţii sunt utilizate doar de browser-e pentru o afişare corectă şi de motoarele de căutare (Google și altele) pentru indexarea paginilor. De exemplu, cu un meta tag putem să definim enconding-ul paginii, aspect important pentru browser în ceea ce priveşte afişarea corectă a textelor. Cu ajutorul acestor tag-uri, putem introduce şi descrierea paginii, pe care o va folosi Google în momentul indexării paginii. Tag-ul <meta> este unul cu autoînchidere, deci nu are început şi sfârşit, iar toate informaţiile se află în cadrul atributelor de pe tag. Este important de menţionat că pentru toate meta tag-urile se utilizează practic acelaşi tag - <meta>-, însă cu atribute diferite. Totuşi, nu putem combina mai multe atribute diferite într-un rând. Trebuie să deschidem un tag <meta> nou. Pentru a clarifica acest lucru, vom analiza următorul exemplu: <!DOCTYPE html> <html> <head> <title>Titlul paginii</title> <meta name="description" content="Exemplul paginii pentru meta tag-uri"> <meta name="keywords" content="HTML, Meta, HTML5, xHTML, lectie"> <meta name="author" content="Beny"> </head> Tag-ul Title Deşi nu face parte dintr-un meta tag real, tag-ul title al paginii este deseori inclus în această categorie (nu foloseşte meta, ci propriul său tag title). Ne-am întâlnit deja cu el la începutul cursului. În el, introducem titlul paginii, care este foarte important pentru motoare de căutare. Opinia expertului SEO despre meta tag-uri Meta tag-urile, care se află în antetul paginii HTML, poate nu au un rol important atunci când utilizatorul vizualizează un site, însă funcţia lor capătă o importanţă foarte mare pe pagina cu rezultatele căutării. Prin urmare, prin introducerea cuvintelor-cheie în motorul de căutare şi prin listarea rezultatelor căutării, toate site-urile sunt prezentate prin trei elemente standard: titlu, o scurtă descriere şi adresele URL. Titlul afişat reprezintă, de fapt, conţinutul aflat în tag-ul Meta Title. Dacă Meta Title al nostru conţine cuvintele-cheie pe care le-a introdus utilizatorul, ele vor fi marcate cu un font bolduit, ceea ce va evidenţia site-ul nostru ca fiind o sursă relevantă de informaţii pentru utilizator. Cele mai bune rezultate se obțin folosind tag-ul Meta Title, cu o lungime totală de până la 70 de caractere şi cu un conţinut de cuvinte-cheie în forma în care utilizatorii le introduc în câmpul de căutare. Bineînţeles, motorul de căutare preia următorul principiu similar, conţinutul descrierii paginii din tag-ul Meta Description. Valoarea tag-ului Meta Description nu se află în cuvintele-cheie. De fapt, s-a confirmat faptul că pagina noastră nu va avea o poziţie mai bună dacă tag-ul Meta Description conţine cuvintele-cheie dorite. Adevărata valoare a tag-ului Meta Description stă în abilitatea de a influența acţiunea utilizatorului. Având în vedere că motorul de căutare ne oferă opţiunea de a ne prezenta printr-o singură propoziție, ar trebui să o utilizăm la maxim și să-i afişăm utilizatorului ceea ce poate obţine de la pagina noastră, trebuie să menţionăm avantajele pe care le oferim şi să-i dăm un motiv să ne aleagă tocmai pe noi dintre toate site-urile listate. SEO este o ştiinţă de sine stătătoare. -
Salut, De data aceasta vom începe cu modulul "Linkurile si Imaginile". Link-urile Noțiunea de hyperlink, ne ajută la conectarea și trecerea de la o pagină la alta. Pentru a accesa un link avem nevoie de structura: <a href=”http://www.google.com”> Click here </a> “A”-ul este exterem de utilizat pe site-uri și de aceea tag-ul este așa de scurt, “A”-ul vine din cuvântul englezesc “anchor” ceea ce înseamnă în limba română ancoră. “Href” este prescurtarea cuvantului englezesc hypertext reference. Deci, în cod vedem tag-ul <a>, precum şi atributul href cu URL-ul care duce la site-ul Google: Atributul Href este alcatuit din 2 parti: numele atributului (A) si locatia (URL) la care duce link-ul (B). Exista si 2 tipuri de link-uri: relative si absolute. Link-urile absolute Acest tip de linkuri se utilizează, de obicei, atunci când vrem să conectăm pagina noastră cu o pagină sau un material de pe un alt site. Linkurile absolute sunt probabil cel mai simplu de introdus, dar se pot dovedi și cele mai complicate în ceea ce privește o viitoare modificare. Exemplu: <a href="http://www.google.com/">Google</a> Link-urile relative Spre deosebire de linkurile absolute, unde doar destinația contează, la linkurile relative este foarte importantă și locația linkului, adică de unde este direcționat vizitatorul site-ului. Linkurile relative sunt, de obicei, utilizate pentru a crea conexiuni în cadrul unui site. Deşi acum linkurile absolute pot părea drept cea mai practică soluţie, de fapt e invers. Linkurile relative se folosesc întotdeauna pentru linkuri în cadrul site-urilor. Exemplu: <a href="contact-us.html">Contact info</a> Atributul Target Am menţionat deja că tag-ul <a> trebuie să aibă atributul href, deoarece fără el, practic, este inutil. Există și un atribut target opțional, care definește modul în care a fost activat linkul și care poate avea una dintre următoarele valori: _blank – încarcă documentul legat într-o nouă fereastră _parent – încarcă documentul legat într-un element părinte al paginii, în care se află linkul. În cazul în care linkul nu se află pe pagina inclusă, acesta se încarcă în toată fereastra _self – încarcă documentul legat în aceeaşi fereastră în care se află şi linkul. Dacă omitem atributul target, această valoare va fi considerată implicită _top – încarcă în toată fereastra, ignorând cadrele (frames). Named anchors (Ancorele denumite) Named anchors se folosesc atunci când vrem ca linkul să direcţioneze spre o parte exactă a paginii. În anumite cazuri, o pagină poate avea un conținut care necesită mult derularea (scroll) pe verticală pentru a găsi un anumit detaliu. Putem plasa named anchors oriunde pe pagină şi apoi setăm un link, la secţiunea respectivă de pe pagină. Pentru a posta ancora, introducem tag-ul <a>, dar, deoarece ancora nu este un link, nu duce nicăieri, ci doar indică locul respectiv, nu are un atribut href și nici conţinut. Exemplu: <a name="something"></a> Aceasta este doar o parte a procesului. Am setat un Named anchor care are un nume și nu este vizibilă în browser. Acum, ne rămâne să legăm această ancoră de aceeași pagină sau de o altă pagină. De exemplu, dacă vrem să legăm o ancoră de aceeași pagină, vom adăuga: Exemplu: <a href="#something">Link</a> Pe de altă parte, dacă vrem să ne legăm de ancora de pe o altă pagină, vom adăuga: Exemplu: <a href="index.html#something">Link</a> Deci, un link clasic cu adăugarea unui Named anchor precedat de semnul #. Imaginile Există doar patru formate de imagini pe care le putem utiliza astăzi pe paginile web. Acestea sunt JPG, GIF, PNG, SVG JPG (Joint Photographic Experts Group) foloseşte extensia .jpg sau .jpeg. Acest format nu suportă transparența, nici animația, dar este excelent pentru comprimarea fotografiilor, deoarece suportă milioane de culori. GIF (Graphics Interchange Format) este limitat la 256 de culori. GIF-urile sunt excelente pentru desene tehnice și pentru imagini mici (iconițe, thumbnails etc). GIF-urile pot memora 2, 4, 16 până la 256 de culori, așadar putem salva mult din dimensiune în momentul în care creăm fișierele. PNG (Portable Network Graphic) este un format mai nou suportat de către toate browser-ele actuale și combină funcţionalitățile formatelor GIF și JPEG. Acest format raster pentru imagini foloseşte comprimarea fără pierderi. Utilizează RGB și sistemul de culori în tonurile gri. Există două tipuri de formate: PNG-8, care conține informația pe 8 biți despre culori (asemănător cu GIF); PNG-24, care conține informația pe 24 de biţi despre culori (combină cele mai bune aspecte ale formatelor GIF și JPG). SVG (Scalable Vector Graphics), este un format pentru imagini de tip vectorial, bazat pe XML fiind utilizat pentru grafică 2D, care permite interactivitatea și animația. Dacă rezumăm toate cele trei tipuri, ajungem la următoarele concluzii: JPG este cel mai bun pentru fotografii și imagini cu multe detalii GIF este cel mai bun pentru imagini mici şi iconiţe PNG combină cele mai bune aspecte ale formatelor GIF și JPG, dar în detrimentul dimensiunii fișierelor. Nu este suportat de browser-ele vechi. SVG cel mai mare avantaj este posibilitatea de a scala imaginile la orice dimensiune fără să pierdem din calitate Imaginea trebuie să aibă rezoluţia şi dimensiunile corespunzătoare Fiecare imagine este, de asemenea, compusă din pixeli, iar termenul de rezoluţie indică numărul de pixeli (puncte) per inch (dots per inch - dpi). Rezoluția standard în care majoritatea monitoarelor afişează site-urile este de 72 dpi, așa că imaginile ar trebui salvate întotdeauna la această rezoluție. În afară de rezoluție, trebuie să avem grijă şi de dimensiuni, adică de lățimea (engl. Width) și înălțimea (engl. Height) imaginilor. Dimensiunile trebuie să fie aceleași în care se va afişa şi imaginea pe pagină. Este important să reţinem că imaginile trebuie mai întâi pregătite în Adobe Photoshop sau într-un instrument similar și abia apoi importate în documentul HTML. Adăugarea imaginilor Pentru a adăuga imagini pe o pagină HTML, folosim tag-ul <img>. Acest tag este cu autoînchidere, respectiv nu are nici început și nici sfârșit, dar trebuie să conțină următoarele două atribute: Src indică URL-ul din care se apelează imaginea (imaginea este întotdeauna în afara fişierului HTML) Alt defineşte textul care va fi afișat vizitatorului site-ului dacă, indiferent de motiv, imaginea nu este afişată Atributele opţionale ale tag-ului img: Title – putem folosi acest atribut dacă vrem să introducem informații suplimentare despre o imagine. Majoritatea browser-elor moderne afișează textul ca un tooltip atunci când stăm cu mouse-ul deasupra imaginii. Width şi Height – lăţimea şi înălţimea imaginii în pixeli. Dacă nu sunt setate aceste atribute, browser-ul va încărca valorile din fișierul imaginii. Align s-a utilizat pentru poziționarea imaginilor în raport cu elementele din jur. Comportamentul lor se poate observa în imaginea de mai jos: Imaginile, respectiv tag-urile img din limbajul HTML sunt aşa-numitele elemente inline.
-
Salutare, #include<iostream> #include<math.h> #include<conio.h> using namespace std; int main () { float MediaAritmetica; int x, nr, suma; suma=0; nr=1; cout<<"Dati numarul x= "; cin>>x; while(x!=0) { suma=suma+x; nr++; cout<<"Dati numarul x= "; cin>>x; } nr--; MediaAritmetica=suma/nr; cout<<"Media aritmetica este egal cu:"<<MediaAritmetica; return 0; _getch(); }
-
- 2
-
-
- c++
- tehnologie
- (and 2 more)
-
Salut, De acestă dată o să vă prezint cel de-al 2-lea modul din micul plan, și anume, "Tag-urile textuale" ! Vom incepe cu Textul Titlurile (headings) Exemplu de titluri în limbajul HTML: <h1>Lorem ipsum dolor sit amet</h1> <h2>Lorem ipsum dolor sit amet</h2> <h3>Lorem ipsum dolor sit amet</h3> <h4>Lorem ipsum dolor sit amet</h4> <h5>Lorem ipsum dolor sit amet</h5> <h6>Lorem ipsum dolor sit amet</h6> Si afişarea acestora în browser: Paragrafele (Paragraphs) Paragrafele reprezintă ceea ce, de obicei, numim text obişnuit. Exemplu de paragraf în limbajul HTML: <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip</p> Bold Efectul bold (îngroșarea caracterelor), putem posta una dintre aceste două variante, mai exact tag-ul <b> sau <strong> și vom obține același efect. Italic Putem folosi fie tag-urile <i>, fie tag-urile <em>. Em este prescurtarea de la cuvântul englezesc Emphasize, care înseamnă a sublinia, a accentua. Sup şi sub Uneori, în texte avem nevoie de caractere pe care trebuie să le poziționăm deasupra, respectiv sub rândul principal/linia de bază (base line), în special în formule. Pentru astfel de detalii, folosim tag-urile <sup>, respectiv <sub>. Sup este prescurtarea de la superscript, iar sub de la subscript. <br> – break Am menționat deja că la sfârșitul și începutul unui paragraf nou se adaugă un rând nou. Însă, uneori vrem să întrerupem rândul în mijlocul paragrafului, fără să creăm un paragraf nou. Putem face acest lucru prin simpla adăugare a unui tag, care are marcajul <br>. <hr> - horizontal rule Hr este un tag care funcționează similar cu tag-ul <br> sus-menționat, în sensul că se scrie doar o singură dată ca <hr> în varianta limbajului HTML, însă are o funcție cu totul diferită. Acest tag adaugă o linie orizontală în text. Hr este prescurtarea de la englezescul horizontal rule (linie orizontală). Caracterele speciale Pentru afişarea caracterelor speciale, folosim instrucţiuni HTML corespunzătoare. Acestea încep întotdeauna cu semnul & şi se termină cu semnul ; <p>CopyRight © Beny</p> - CopyRight Beny Listele Tipurile de liste - Există trei tipuri de liste: Ordered (liste ordonate) sunt liste ale căror elemente sunt marcate cu un tip de element ordonat. De obicei, numerele, cifrele romane, literele alfabetului etc. Unordered (liste neordonate) sunt liste ale căror elemente sunt marcate cu diferite elemente - pătrate, cercuri, liniuțe etc. Spre deosebire de listele ordonate, aici ordinea elementelor nu este importantă. Definition (liste de definiţie) sunt liste ale căror elemente sunt alcătuite din două părţi, text şi definiţie. Sunt utile pentru a crea întrebări şi răspunsuri, deoarece sunt întotdeauna formate din perechi. Listele ordonate Pentru a indica listele ordonate, folosim tag-ul <ol>. Ca și în cazul tag-urilor menţionate mai devreme, scriem un tag <ol> de început şi un tag </ol> de final, după care, în interiorul acestuia, scriem noi tag-uri <li>, fiecare reprezentând un nou element al listei. De exemplu: <ol> <li>Acasa</li> <li>Servicii</li> <li>Despre noi</li> <li>Contact</li> </ol> Listele neordonate Listele neordonate au o structură foarte asemănătoare cu cea a listelor ordonate menţionate mai devreme. Diferenţa constă în tag-ul folosit. În cazul listelor neordonate, tag-ul folosit este <ul> Având în vedere acest lucru, priviți următorul exemplu: <ul> <li> Acasa </li> <li> Servicii </li> <li> Despre noi</li> <li> Contact </li> </ul> Mai există și așa-numitele liste incluse (embedded), care, spre deosebire de exemplele anterioare, au mai multe niveluri de elemente. Iată un exemplu: <ul> <li>Audi <ul> <li>Audi rs5</li> <li>Audi rs6</li> </ul> </li> <li>Bmw</li> <li>Ford</li> <li>Volkswagen</li> </ul> Iată cum arată acest cod în browser: Atributul type pentru listele <ul> şi <ol> Simbolul afișat în fața elementelor care alcătuiesc lista poate fi definit cu ajutorul regulilor CSS, după cum vom vedea mai târziu în acest curs, sau prin atributul HTML type aplicat pe listă în cadrul codului HTML. Se recomandă exclusiv folosirea regulilor CSS pentru stilizare, atât pentru stilizarea listelor, cât şi pentru stilizarea altor elemente. Atributul type pentru liste neordonate (ul) poate avea următoarele valori: circle - cerc; disc - disc; square - pătrat. Pentru listele ordonate (ol), valorile pot fi: A - majuscule; a - minuscule; I - cifre romane majuscule; i - cifre romane minuscule. Listele de definiţie Listele de definiție se utilizează mai rar, dar pot fi foarte utile. Cea mai frecventă utilizare este pentru paginile de întrebări frecvente (FAQ - Frequently Asked Questions), deoarece acestea sunt aproape întotdeauna sub formă de întrebări și răspunsuri, respectiv în perechi. Rețineți că elementele sunt alcătuite întodeauna din două părți, reprezentate de tag-urile <dt> și <dd>, iar lista în sine este marcată cu tag-ul <dl> (definition list). Iată un exemplu în HTML: <dl> <dt>HTML</dt> <dd>Hyper Text Markup Language</dd> <dt>CSS</dt> <dd>Cascading Style Sheets</dd> <dt>JS</dt> <dd>JavaScript</dd> <dt>PHP</dt> <dd>Hypertext Preprocesor</dd> </dl> Iată cum arată acest cod în browser: Aceasta a doua lecție, vor mai urma si altele, Have a nice day !
-
- 2
-
-
- web-developement
- tehnologie
- (and 1 more)
-
Salut, Astăzi o să încep o serie de tutoriale (documentație + exemple) care ne vor ajuta să devenim web developeri. Pentru inceput am să vă prezint un mic plan de introducere în HTML și CSS, cu modulele aferente: Modulul I: Introducere în limbajele HTML și CSS Crearea primei pagini HTML Tag-urile de bază ale paginii HTML: Paginile HTML nu se scriu la întâmplare, ci respectă o structură definită cu precizie. Trei tag-uri sunt obligatorii, <html>, <body> şi <head>. Tag-ul HTML se află la începutul documentului, în timp ce tag-ul HTML de final se află întotdeauna la sfârșitul documentului. Practic, acest lucru înseamnă că întregul conținut al documentului HTML complet se află în cadrul acestui tag. Tot ceea ce se găseşte în cadrul tag-ului (între începutul şi sfârşitul tag-ului html) reprezintă partea paginii HTML. Nu mai putem scrie nimic înainte sau după el, în afară de o excepţie, despre care vom vorbi într-una din lecţiile viitoare. De asemenea, acest element apare doar o singură dată pe pagină. Tag-ul head trebuie scris imediat după deschiderea tag-ului <html> menţionat mai devreme. În tag-ul head, se află elemente care nu sunt vizibile în mod direct pe pagină. De exemplu, în partea head inserăm meta tag-urile folosite de motoarele de căutare când indexăm paginile. De asemenea, aici plasăm şi linkuri către fișiere CSS externe și către alte fișiere etc. Fiecare tag in parte are un început și un sfârșit <html> ... </html> - Slash-ul ( / ) - reprezintă închidere tag-ului. Prima noastră pagină HTML Deoarece deja am asimilat câteva cunoștințe, haideţi să creăm prima noastră pagină HTML. CSS-ul îl lăsăm pentru mai târziu. După ce aţi pornit editorul de text (NotPad++), de preferat un editor de text special (eu folosesc Atom) introduceţi următorul cod: 1 2 3 4 5 6 7 8 9 <html> <head> <title>My first HTML page</title> </head> <body> <h1>Hello!</h1> <p>I am HTML document.</p> </body> </html> Doctype - Document Type Declaration Fiecare document trebuie să posede o declaraţie (în care se găsesc datele despre document şi caracteristicile limbajului) Declaraţia se numeşte Document Type Declaration şi se găseşte la începutul fiecărei paginii HTML în „tag”-ul DOCTYPE. Motivul pentru care am introdus cuvântul tag între ghilimele este că acest DOCTYPE, de fapt, nu este un tag HTML adevărat, ci este o instrucţiune dată browser-ului, pentru a recunoaște ce tip de fișier este. <!DOCTYPE html> Meta pentru utf8 Un detaliu foarte important, care, deseori, se poate anticipa, este setarea lui encoding, respectiv inserarea lui meta tag, care va determina modul în care browser-ul trebuie să citească pagina noastră şi cum să afişeze caracterele/literele specifice unei limbi. Se recomandă ca encoding-ul să fie setat întotdeauna la utf-8. În caz contrar, caracterele specifice limbii române/diacriticele (ă, î, ş, ţ, â şi altele) s-ar fi pierdut în totalitate. De aceea, în partea <head> inserăm întotdeauna: <meta charset="utf-8"> Structura paginilor HTML Culoarea roşie indică existența codului HTML, în timp ce textul de pe pagină este negru. Concluzia la care probabil ați ajuns şi singuri este că în documentele HTML există părţi vizibile utilizatorului și părţi care nu îi sunt vizibile. Acele părţi care nu sunt vizibile determină și fac diferența între elementele paginii. Să analizăm mai bine exemplul. Există câteva elemente. Fiecare are propriul tag de început şi de sfârşit: Observăm următoarele elemente: <html> … </html> La început şi la sfârşit este un tag <html>, respectiv tag-ul de început şi cel de final. Ele înconjoară toate elementele şi indică faptul că tot ce se află între ele este cod html. <body> ... </body> Imediat după tag-ul <html> de început, respectiv după cel de final, se află tag-urile <body>. Tot ce se află între ele, va fi afișat în fereastra browser-ului web. <h1> ... </h1> <p>...</p> <h2>...</h2> Acum, vom explica ce este un tag HTML şi cum se inserează acesta. Reguli de bază pentru scrierea limbajului HTML Când scriem tag-uri, trebuie să respectăm două reguli de bază: 1. Prima regulă: Un tag (element) poate cuprinde un număr nelimitat de alte tag-uri. Să vedem un exemplu. Exemplu corect: <p>HTML este acronimul de la <strong> HyperText Markup Language </strong></p> Exemplu incorect: <p>HTML este acronimul de la <strong> HyperText Markup Language </p></strong> 2. A doua regulă: Fiecare tag de început trebuie să aibă şi un tag de final. Respectiv, dacă vom începe un anumit element (tag), trebuie să-l şi încheiem undeva. Tag-urile cu autoînchidere Tag-urile cu autoînchidere sunt cele care încep și se termină în același timp. De exemplu: semnul pentru întreruperea/separarea unui rând în cadrul unui paragraf este <br> (br de la comanda break). Acest tag nu are conţinut și, dacă am respecta regulile de mai sus, ar trebui să-l scriem ca <br> </ br>. Deoarece acest lucru nu este necesar (şi incorect pe deasupra), tag-urile vor fi scrise doar ca <br> sau <br />. <p>HTML este acronimul de la <br>HyperText Markup Language </p> Atributele tag-urilor HTML Atributele sunt formate din două părți: din numele atributului și din valoarea atributului. Acestea se scriu pe tag-ul de început al elementului și sunt separate de caracterul tipului de tag printr-un spațiu. Numele atributului se scrie cu minuscule, apoi se pune semnul egal, după care, între ghilimele se inserează valoarea atributului. Spațiile sunt interzise în interiorul structurii atributului. Iată un exemplu - paragrafului i-a fost adăugată o clasă folosind numele atributului class. <p class="xyz">HTML este acronimul de la HyperText Markup Language</p> Aceasta a fost prima lectie de inceput, vor mai urma si altele, Have a nice day !
-
- 2
-
-
- web-developement
- tehnologie
- (and 1 more)
-
Salutare, <html> <head> <script type="text/javascript" src="script.js"></script> <title>Magicianul Valentino - Iti voi ghici la orice numar te gandesti</title> <script> alert("M-am gandit ca o sa accesezi acest site de curiozitate."); var kj = 0; function Direction(Choice){ // The choice of the first buttons if(Choice == "okay"){ document.getElementById("result").innerHTML = "<center>~~~~~~~~~~~~~~~~<br><br>Va vedeti numarul mai jos? <br><pre>17 25 30 22<br><br>23 31 16 29<br><br>19 27 20 24<br><br>26 21 28 18</pre>"; document.getElementById('okay').style.display = 'none'; document.getElementById("result").style.display = 'inline'; document.getElementById('yes').style.display = 'inline'; document.getElementById("no").style.display = 'inline'; } } function Direction2(Choice){ if(Choice == 'yes'){ kj+=16;} document.getElementById("result2").innerHTML = "<center>~~~~~~~~~~~~~~~~<br><br>Ce zici aici? <br><pre> 7 2 10 15<br><br>23 18 31 26<br><br> 3 27 11 19<br><br> 6 30 14 22</pre>"; document.getElementById('yes').style.display = 'none'; document.getElementById("no").style.display = 'none'; document.getElementById("result2").style.display = 'inline'; document.getElementById('yes2').style.display = 'inline'; document.getElementById('no2').style.display = 'inline'; } function Direction3(Choice){ if(Choice == 'yes2'){ kj+=2;} document.getElementById("result3").innerHTML = "<center>~~~~~~~~~~~~~~~~<br><br>Trebuie sa fii sigur. Vezi numarul asta aici? <br><pre>24 12 8 28<br><br> 9 30 10 29<br><br>25 15 13 27<br><br>31 26 11 14</pre>"; document.getElementById('yes2').style.display = 'none'; document.getElementById("no2").style.display = 'none'; document.getElementById("result3").style.display = 'inline'; document.getElementById('yes3').style.display = 'inline'; document.getElementById('no3').style.display = 'inline'; } function Direction4(Choice){ if(Choice == 'yes3'){ kj+=8;} document.getElementById("result4").innerHTML = "<center>~~~~~~~~~~~~~~~~<br><br>Aproape am terminat, prietene. Numarul dvs. este aici? <br><pre>31 1 7 25<br><br>23 9 15 17<br><br>29 3 11 27<br><br>21 5 13 19</pre>"; document.getElementById('yes3').style.display = 'none'; document.getElementById("no3").style.display = 'none'; document.getElementById("result4").style.display = 'inline'; document.getElementById('yes4').style.display = 'inline'; document.getElementById('no4').style.display = 'inline'; } function Direction5(Choice){ if(Choice == 'yes4'){ kj+=1;} document.getElementById("result5").innerHTML = "<center>~~~~~~~~~~~~~~~~<br><br> In cele din urma, vedeti numarul dvs. de mai jos? <br><pre>20 28 12 4<br><br> 5 31 21 29<br><br>13 6 22 30<br><br> 7 14 23 15</pre>"; document.getElementById('yes4').style.display = 'none'; document.getElementById("no4").style.display = 'none'; document.getElementById("result5").style.display = 'inline'; document.getElementById('yes5').style.display = 'inline'; document.getElementById('no5').style.display = 'inline'; } function Direction6(Choice){ if(Choice == 'yes5'){ kj+=4;} document.getElementById("result6").innerHTML = "<center>~~~~~~~~~~~~~~~~<br><br><h4>Numarul tau este "+kj+"</h4><br>Sunt un maestru mai mare ca DEXTER!!!"; document.getElementById('yes5').style.display = 'none'; document.getElementById("no5").style.display = 'none'; document.getElementById("result6").style.display = 'inline'; } </script> </head> <body> <h1 align="center">Valentino Magic Abracadabra</h1> <h1 align="center"> GameLife Romania</h1> <style> h1{ font-family: Roboto; text-align: center; font-size: 100px; } div{ font-family: roboto; text-align: center; font-size: 30px; } button { border-radius: 30px; font-family: Roboto; color: #ffffff; font-size: 20px; background: mediumvioletred; padding: 10px 20px 10px 20px; } body { background-color: papayawhip; } </style> <div> <p>Inainte de a incepe, alegeti un numar intre 0 si 31.</p> </div> <div id="result"></div> <div id="result2"></div> <div id="result3"></div> <div id="result4"></div> <div id="result5"></div> <div id="result6"></div> <hr width="340px" /> <br> <div> <button id="okay" onclick="Direction('okay')">Bine frate!</button> </div> <!-- the first buttons run the function Direction() when clicked --> <div> <button id="yes" style="display: none" onclick="Direction2('yes')">DA</button> <button id="no" style="display: none" onclick="Direction2('no')">NO</button> </div> <div> <button id="yes2" style="display: none" onclick="Direction3('yes2')">DA</button> <button id="no2" style="display: none" onclick="Direction3('no2')">NO</button> </div> <div> <button id="yes3" style="display: none" onclick="Direction4('yes3')">DA</button> <button id="no3" style="display: none" onclick="Direction4('no3')">NO</button> </div> <div> <button id="yes4" style="display: none" onclick="Direction5('yes4')">DA</button> <button id="no4" style="display: none" onclick="Direction5('no4')">NO</button> </div> <div> <button id="yes5" style="display: none" onclick="Direction6('yes5')">DA</button> <button id="no5" style="display: none" onclick="Direction6('no5')">NO</button> </div> </body> </html>
-
- 2
-
-
-
- web-developement
- tehnologie
- (and 1 more)
-
Te gandesti sa te apuci de web development? Daca vrei sa iti construiesti o cariera in acest domeniu, sa stii ca ti-a venit o idee super. Dar poate te intrebi unde sa incepi si ce ar trebui sa faci mai exact? Acest articol iti vine in ajutor. Vei afla in curand ce inseamna sa fii web developer, cum sa incepi invatarea in acest domeniu si unde sa faci asta. Ce este un Web Developer? Un web developer (sau pe romaneste dezvoltator web), este o profesie moderna care tine de crearea de noi site-uri web si aplicatii pentru mediul online. Un web developer trebuie sa cunoasca bine limbajul de programare folosit pentru dezvoltarea unei anumite aplicatii sau unui website, dar nu numai. El se ocupa si de mentenanta site-ului si de bazele de date unde toata informatia este stocata. In zilele noastre, un developer poate fi un full-stack developer sau cineva specializat pe o nisa anume. Ce este un full-stack developer? O astfel de persoana stie sa se ocupe de un website (sau aplicatie) in intregime. El poate sa creeze sau sa altereze orice parte a site-ului, atat designul cat si functionarea si constructia. Dar am spus ca exista si web developeri specializati pe anumite domenii. De exemplu, poti deveni back-end developer. Acesta se ocupa cu functionarea unui site, sau unei aplicatii. Practic, aceasta este partea care nu este vazuta de utilizatorul site-ului, dar este foarte importanta. Fara un astfel de dezvoltator, un site n-ar face aproape nimic. Dar poti fi si front-end developer. O astfel de persoana se ocupa de design si constructie. Acest domeniu include tot ce se vede, atunci cand o persoana acceseaza acel site: butoanele, imaginile si tot designul in sine. Cum si unde sa incepi? Poate crezi ca e complicat si costisitor sa inveti dezvoltare web. Dar nu e adevarat. Oricine care are acces la internet, poate invata. Trebuie sa incepi cu bazele. Un website, sau aplicatie web este creata cu ajutorul limbajului HTML. Acesta este baza, scheletul pe care se construieste intregul site. Urmeaza sa faci site-ul sa arate frumos. Aici intervine CSS. Acest limbaj este folosit pentru a da viata site-ului. Orice culoare, font si efect este realizat folosind CSS. Dar un site sau o aplicatie nu va face multe daca nu are anumite functionalitati predefinite. JavaScript este un limbaj de programare sau scripting folosit sa ii creezi functionalitatea noului tau site web. Aceste trei cunostinte trebuie sa le dobandesti, pentru a putea construi un site cat de simplu. Dar poate te intrebi, unde? Pe internet poti gasi o multime de resurse care te invata cum sa devii un web developer. Dar iti voi spune despre un site care a ajutat deja mii de oameni sa invete dezvoltare web. Acesta se numeste Codecademy.com. Ce este special la acest website? Vine in doua planuri diferite: unul gratis si unul contra cost. Dar planul gratis este tot ce iti trebuie sa inveti bazele programarii web. Sincer. Aici poti gasi o multime de cursuri legate de multe subiecte diferite, nu doar dezvoltare web. Dar in aceasta tema, Codecademy exceleaza. De obicei un curs include mai multe etape de invatare. Daca esti interesat in web development, acel curs vine cu studiul mai multor tehnologii: HTML, CSS, JavaScript si React JS. Cursul este in timp real, adica tot ce faci este vizibil intr-o fereastra aditionala in care poti sa vezi cum arata site-ul la care lucrezi. Fiecare curs include proiecte reale, pe care le vei finaliza pana la sfarsitul cursului. Daca decizi ca vrei sa lucrezi ca si web developer, aceste proiecte le poti pune in portfoliul tau si sa le arati viitorului angajator. Comunitatea iti va si ea de mare folos in timpul finalizarii cursului. Daca intampini o problema sau un pas pe care nu-l intelegi in intregime, doar da o fuga pe forum. Sigur vei gasi raspunsul intr-o clipa. Mai multe informatii : AICI
-
Ce este dezvoltarea web? Acest termen este la fel de vast ca și oceanul. Există numeroase limbaje de programare, precum și numeroase cadre și instrumente care ajuta la dezvoltarea aplicatiilor web. Dezvoltarea web este, într-adevăr, în aceeași barcă cu dezvoltarea aplicațiilor desktop și mobile. Dezvoltarea web simplificată Cea mai simplă modalitate de a descrie dezvoltarea web este că se învârte în jurul creării de aplicații și instrumente care rulează pe browsere web. Aceste aplicații și unelte pot fi dependente exclusiv de serverul care le-a creat. Pe de altă parte, unele dintre ele pot utiliza serverul numai în timpul dezvoltării inițiale sau pentru stocarea și recuperarea datelor, printre altele. O privire asupra istoriei dezvoltării web. Pentru a înțelege prezentul și viitorul dezvoltării web, să încercăm mai întâi să înțelegem trecutul său. Istoria dezvoltării web a început cu pagini web statice și navigare cu hyperlink-uri. Inițial, dezvoltatorii au creat pagini web statice și le-au legat folosind hyperlink-uri. Spre deosebire de site-urile Web și de aplicațiile web de astăzi, a existat o minimă interactivitate, deoarece aceste pagini web au fost proiectate pentru a transmite pur și simplu informații și nimic mai mult. CGI a fost folosit pentru a genera cod HTML pe baza datelor trimise către server de către browser. Evoluțiile care au venit mai târziu au fost proiectate pentru a ușura generarea HTML dinamică. ASP și ColdFusion sunt exemple de astfel de evoluții și au servit drept limbaje pentru dezvoltarea web-ului. Prin intermediul acestora, codul HTML ar putea fi amestecat cu etichete speciale și marcaje, ceea ce a făcut ca generarea HTML să fie mai ușoară, condiționată și dependentă de o anumită pagină web. Mai târziu, JavaScript a apărut pentru a extinde capacitățile instrumentelor și aplicațiilor web, pe măsură ce computerele erau acum mai rapide, iar tehnologia mai recentă a fost disponibilă imediat dezvoltatorilor. CSS și-a făcut apariția la aproximativ același timp ca și JavaScript. Cu CSS, dezvoltatorii puteau acum să schițeze și să modifice aspectul web. Tehnologiile dezvoltarii web Cele mai frecvente tehnologii cu care dezvoltatorii lucrează în dezvoltarea de site-uri web și de aplicatii web sunt HTML, JavaScript și CSS. Hypertext Markup Language, HTML HTML este inima dezvoltării web. Acesta formează blocurile pe care dezvoltatorii le utilizează pentru a crea aplicații web. De fapt, este posibil să creati în întregime un site complet in HTML. HTML reprezinta o serie de etichete pentru a defini formatul unei pagini web, aspectul și componentele. Pe cont propriu, HTML-ul este incomplet si ar trebui însoțit de JavaScript și CSS pentru a realiza pagini complexe si placute vizual. CSS(Cascading Style Sheets) HTML a fost folosit inițial pentru a specifica formatul și aspectul paginii web. Problema a fost totuși că trebuia făcut o mulțime de lucruri pentru a executa o mică schimbare de stil. De exemplu, modificarea culorii butoanelor dintr-un site Web, a necesitat o modificare a codului HTML în mai multe locuri. Astăzi stilul și conținutul web sunt tratate diferit în timpul dezvoltării. HTML gestionează conținutul și stilurile CSS. În acest fel, se poate utiliza un set mic de fișiere CSS pentru a modela o întreagă aplicație web. Un singur fișier poate fi, de exemplu, modificat în CSS pentru a schimba culoarea butoanelor dintr-un întreg site. JavaScript Acesta este un limbaj de programare care permite dezvoltatorului să manipuleze paginile web. Prin manipularea modelului unei pagini Web folosind JavaScript, un dezvoltator poate schimba cu ușurință stilul și structura unei pagini Web. Acest lucru face JavaScript o resursa puternica, cu un rol esențial în dezvoltarea web. Mai multe idei, concepte gasati : AICI / AICI / AICI
-
Salutare, daca aveti nevoie de un countup, pentru a-l adauga pe un website a-l vostru aveti un link mai jos pentru a-l descarca foarte usor de pe mediafire. Sport la lucru! Link de descarcat: aici Link de la VirusTotal: aici
-
- 1
-
-
- tehnologie
- web-developement
- (and 1 more)
-
Salutare, Daca doresti pentru website-ul tau un background de timp matrix ai un link mai jos: Link de descarcat: aici Link VirusTotal: aici
-
- 1
-
-
- tehnologie
- web-developement
- (and 1 more)
