Web Dev

HTML:
<!DOCTYPE html>
<html>
<head>
<title>Acesta este un titlu</title>
</head>
<body>
<h1>Acesta este un heading</h1>
<p>Acesta este un paragraf.</p>
<b>Acesta este un text boldat.</b>
</body>
</html>
<b> formateaza textul cu bold

<em> formateaza textul ca sa iasa in
evidenta
<i> formateaza textul cu italic
<small> formateaza textul astfel incat sa
fie mai mic
<strong> formateaza textul ca sa iasa in
evidenta
<sub> formateaza textul ca si subscript
<sup> formateaza textul ca si superscript
<ins> formateaza textul prin adaugarea
unei linii de subliniere
<del> formateaza textul prin taierea
acestuia cu o linie
<mark> evidentiaza / marcheaza textul cu
un fundal galben
Listele:
<ol>
<li>Alexandra</li>
<li>Mihai</li>
</ol>
<ul>
<li>Alexandra</li>
<li>Mihai</li>
</ul>
<dl>
<dt>Alexandra</dt>
<dd>- are ochii albastri</dd>
<dt>Mihai</dt>
<dd>- are ochii verzi</dd>
</dl>
Tabel:
<table bordercolor="blue" border="5">
<tr>
<td >celula 1 rand 1</td>
<td>celula 2 rand 1</td>
</tr>
<tr>
<td colspan="2">celula 1 rand 2</td>
</tr>
</table>
Iframe:
<iframe src="URL"> </iframe> //height, width
Link-urile:
<a href="URL" target="_blank">Textul link-ului / Imagine</ a>
<a id="semncarte">
<a href="#semncarte">Click aici pentru a merge la semnul de carte</a>
Imaginile:
<img src="url" alt="titlul sau descrierea imaginii"> //src , alt , height , width
Un formular HTML:
<form action="url-al-unui-script-aflat-pe-server" method="get||post">
elemente de input
Input:
Nume <input type="text" name="nume" size="25" maxlength="50" />
Parola <input type="password" name="parola" size="25" maxlength="50" />
Hidden <input type="hidden" name="cod" value="valoarea e trimisa pe server">

File <input type="file" name="fisier" />
Submit<input type="submit" name="trimite" value="Trimite formular" />
Image<input type="image" src="imagine-trimite-form.jpg" width="120" height="22" />
Button<button type="button"><img src="sigla.jpg" width="20" height="18"> Like FSEGA

</button>
Reset<input type="reset" value="Resetati">
Textare<textarea name="observatii" rows="5" cols="30"> valoare implicita </textarea>
Select<select>
<option value="Garsoniera">Garsoniera</option>
<optgroup label="Apartament">
<option value="1 camera" selected>1 camera</option>
<option value="2 camere">2 camere</option>
</optgroup>
</select>
<form> //fieldset/legend
<fieldset>
<legend> Detalii personale: </legend>
Nume: <input type="text" name="nume">
</fieldset>
</form>
Label<label for="nume">Nume</label>
<input type="text" id="nume" name="nume" size="25" maxlength="50" />
Audio<audio controls>
<source src="relax.mp3" type="audio/mpeg">
<source src="relax.wav" type="audio/wav">
<source src="relax.ogg" type="audio/ogg">
In cazul in care browserul nu suporta elementul audio se afiseaza acest mesaj.
</audio>
<video width="640" height="480" controls>

<source src="dogs.mp4" type="video/mp4">
<source src="dogs.ogg" type="video/ogg">
<source src="dogs.webm" type="video/webm">
In cazul in care browserul nu suporta elementul video se afiseaza acest mesaj.
</video>
Data <input type="date" name="data_eveniment" />
Data&Time:
<input type="datetime" name="data_ora_eveniment" />
Email:
<input type="email" name="adresa_email" />
Telefon:
<input type="tel" name="telefon" />
Site:
<input type="url" name="adresa_site" />
Color:
<input type="color" name="culoare" />
Datalist-autocomplete:
<form action="script.php" method="get">
<input list="tip" name="browser">
<datalist id="tip">
<option value="Apartament 1 camera">
<option value="Apartament 2 camere">
</datalist>
<input type="submit">
</form>
Number:
Cantitatea (intre 1 si 10): <input type="number" name="cantitate" min="1" max="10">
Range:
<form oninput="ales.value=parseInt(alege.value)">
1<input type="range" id="alege" min="1" max="10" value="5">10
<input type="text" name="ales" size="3">
</form>
Placeholder:
<form action="script. php">
<input type="text" name="prenume" size="25" maxlength="50" placeholder="prenume"
/><br>
<input type="text" name="nume" size="25" maxlength="50" placeholder="nume" /><br>
<input type="submit">
</form>
Required:
<input type="text" name="prenume" size="25" maxlength="50" placeholder="prenume"
required="required" />
CSS:
Extern:
<head>
<link rel="stylesheet" type="text/css" href="stiluri.css">
</head>
Head:
<head>
<style>
h1 { color: red; }
p { color: blue; }
</style>
</head>
Inline:
<h1 style = "color: red"> Titlu </h1>
Selectorul universal: * {} ;
Selectorul de tip: h1, h2, h3 {}
Selectorul de clasa: .azorel {} , p.azorel {}
Selectorul ID: #cnp {};
Selectorul copil: li>a {};
Selectorul descendent: p a {};
Selectorii grupati: h1, p, em, img {}
Formatarea textului:
font: Stabileste toate proprietatile fontului intr-o declaratie;
font-family: Specifica familia de fonturi pentru text; //Verdana, sans-serif;
font-size: Specifica dimensiunea fontului pentru text; //12px, 120%, 1.2em,
font-style: Specifica stilul de font pentru text; //normal, italic, oblique,
font-variant: Specifica daca un text ar trebui sa fie afisat cu litere mic;
font-weight: Specifica greutatea unui font; //normal, bold;
Text-transform:
text-transform: uppercase ;
text-transform: lowercase ;
text-transform: capitalize;
Text-decoration:
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: none;
Line-height:
line-height: 25px;
line-height: 200%;
Letter-spacing si word-spacing:
text-transform: uppercase;
letter-spacing: 1em;
word-spacing: 1em;
Text-align:
text-align: center;
text-align: left;
text-align: right;
Stilizarea link-urilor si a listelor:

a:link - o legatura normala, nevizitata
a:visited - o legatura pe care utilizatorul a vizitat-o
a:hover - o legatura peste care utilizatorul pozitioneaza cursorul mouse-ului
a:active - o legatura in momentul in care se face clic
List-style-type:
list-style-type: circle; //none //disc//circle//square// decimal//decimal-leading-zero//lower-
alpha//upper-alpha// lower-latin//upper-latin//lower-roman//upper-roman// lower-greek//
Dimensionarea si stilizarea casetelor:
 Margin – permite stabilirea unei zone libere transparente in exteriorul bordurii
 Border – permite adaugarea unei borduri in jurul elementului luat in considerare
 Padding – permite stabilirea unei zone libere transparente in interiorul bordurii
 Content – permite introducerea unui continut in cadrul elementului
Border-width:
border-width: 5px 6px 10px 3px;
Min-width, max-width, min-height, max-height:

.adaptabil {
background-color: gold;
min-width: 400px;
max-width: 600px;
padding: 10px; }
Border-style:
.solid { border-style: solid; }
.dotted { border-style: dotted; }
.dashed { border-style: dashed; }
.double { border-style: double; }
.groove { border-style: groove; }
.ridge { border-style: ridge; }
Daniel Mican - Tehnologii web front-end 63
.inset { border-style: inset; }
.outset { border-style: outset; }
Border-color:
div {
border: 15px solid;
border-color: red gold blue green; }
Afisarea si ascunderea elementelor:

inline - acest lucru determina ca un element de tip block sa actioneze ca un element de tip
inline.
block - acest lucru determina ca un element de tip inline sa actioneze ca un element de tip
block.
inline-block - acest lucru determina ca un element de tip block sa fie afisat ca un element de
tip inline, pastrand in acelasi timp celelalte caracteristici ale unui element de tip block.
none - in cazul in care se seteaza aceasta valoare se va ascunde un element din pagina. In
acest caz, elementul actioneaza ca si cum aceasta nu ar fi continut deloc in cadrul paginii (desi
un utilizator ar putea vedea continutul cutiei in cazul in care ar folosi optiunea de vizionare a
sursei in browser).
display: none - ascunde un element, dar spatiul in care este continut nu va fi ocupat.
Elementul va fi ascuns si nu va afecta aspectul.
visibility:hidden - ascunde un element, dar spatiul in care este continut va fi ocupat.
Elementul va fi ascuns, dar afecteaza aspectul.
Stilizarea bordurilor:
border-radius:
border-radius: 5px;
border-top-left-radius: 1em;
border-top-right-radius: 3em;
border-bottom-right-radius: 2em;
border-bottom-left-radius: 4em;
Box-shadow:
none Nu se afiseaza nici o umbra

h-shadow Pozitia umbrei pe orizontala. Sunt permise si valori negative (Obligatoriu)
h-shadow Pozitia umbrei pe verticala. Sunt permise si valori negative (Obligatoriu)
blur Creaza un efect de blur (Optional)
spread Dimensiunea umbrei (Optional)
color Culoarea umbrei. Valoarea implicita este negru (Optional)
box-shadow: 2px 2px 5px #FF33CC;

box-shadow: inset 0px 0px 10px #3366CC;
Background-origin:
padding-box Imaginea de fundal este pozitionata in raport cu caseta padding
border-box Imaginea de fundal este pozitionata in raport cu caseta border
content-box Imaginea de fundal este pozitionata in raport cu caseta continut
Text-shadow:
none Nu se afiseaza nici o umbra
h-shadow Pozitia umbrei pe orizontala. Sunt permise si valori negative (Obligatoriu)
v-shadow Pozitia umbrei pe verticala. Sunt permise si valori negative (Obligatoriu)
blur Creaza un efect de blur (Optional)
color Culoarea umbrei. Valoarea implicita este negru (Optional)
text-shadow: 3px 3px 3px #9999FF;
JavaScript
Fisier extern:
<head>
<script type="text/javascript" src="scriptulmeu.js"></script>
</head>
Script incorporat:
<html>
<head>
<script>
alert("Salutare");
</script >
Functii JavaScript:
function numeFunctie ( parametri ) {
codul care va fi executat;}
Evenimente:
Ca un atribut HTML:
<button onclick="functiaMea();">Click pe mine</button>
window.onclick = functiaMea;
onblur Un element pierde focusul (este parasit)

onchange Continutul unui camp dintr-un formular se modifica
onclick Mouse-ul face clic pe un obiect
onerror Apare o eroare in momentul in care documentul sau o imagine se incarca
onfocus Un element primeste focusul (devine activ)
onkeydown Este apasata o tasta
onkeypress Este apasata o tasta si tinuta apasata
onkeyup O tasta care a fost apasata este eliberata
onload Momentul in care o pagina sau o imagine s-a terminat de incarcat
onmousedown Un buton al mouse-ului este apasat
onmousemove Cursorul mouse-ului este mutat
onmouseout Cursorul mouse-ului este mutat de pe un element
onmouseover Cursorul mouse-ului este mutat peste un element
onmouseup Un buton al mouse-ului este eliberat
onsubmit Se apasa butonul de trimitere intr-un formular
Operatiuni asupra variabilelor:

indexOf() Returneaza pozitia unde s-a gasit prima aparitie a unei valoari specificate intr-un sir
match() Cauta un sir care sa se potriveasca cu o expresie regulata si returneaza sirurile care se
potrivesc
replace() Cauta un sir pentru o valoare specificata, sau o expresie regulata si returneaza un
nou sir in care valorile specificate sunt inlocuite
search() Cauta un sir pentru o valoare specificata, sau expresie regulata si returneaza pozitia in
care a fost gasit
slice() Extrage o parte dintr-un sir si returneaza un nou sir
split() Desparte un sir intr-un array de siruri
substr() Extrage caracterele dintr-un sir, incepand de la o pozitie de start specificata si tinand
cont de numarul de caractere specificat
toLowerCase() Converteste un sir in litere mici
toUpperCase() Converteste un sir in litere mari
trim() Indeparteaza spatiile de la ambele capete ale unui sir
Operatiuni asupra variabilelor de tip number:

var rotunjit = Math.round(4.7); //returneaza 5
var random = Math.random(); // returneaza un numar intre 0 si 1
var maxim = Math.max(2, 3); //returneaza 3
var minim = Math.min(2, 3); //returneaza 2
var putere = Math.pow(2, 3); //returneaza 8
var radical = Math.sqrt(9); //returneaza 3
Operatiuni asupra variabilelor de tip date:

var azi = new Date(); //se creaza un obiect de tipul date cu data si ora curenta
var zi = azi.getDay(); //se afiseaza ziua
var luna = azi.getMonth(); //se afiseaza luna
var an = azi.getFullYear(); //se afiseaza anul
var ora = azi.getHours(); //se afiseaza ora curenta
var minut = azi.getMinutes(); //se afiseaza minutul curent
var secunda = azi.getSeconds(); //se afiseaza secunda curenta
Variabilele de tip array:

concat() Concateneaza doua sau mai multe array-uri si returneaza o copie a noului array
indexOf() Cauta un element intr-un array si returneaza pozitia sa
lastIndexOf() Cauta un element intr-un array, incepand de la sfarsit, si returneaza pozitia sa
pop() Elimina ultimul element dintr-un array si returneaza acest element
push() Adauga elemente noi la sfarsitul unui array si returneaza lungimea noului array
shift() Elimina primul element al unei matrice si returneaza acest element sort() Sorteaza
elementele unui array
splice() Adauga / Elimina elemente dintr-un array
toString() Converteste un array la un string si returneaza rezultatul
unshift() Adauga elemente noi la inceputul unui array si returneaza lungimea noului array
Pentru a putea manipula elementele HTML:

getElementById("Id")
Metoda acceseaza primul element cu Id-ul specificat. Este ablolut necesar sa se furnizeze Id-ul
elementului pe care dorim sa il accesam/manipulam.
getElementsByTagName("TagName")
Metoda acceseaza toate elementele cu tagul specificat. Este ablolut necesar sa se furnizeze
numele tag-ului pe care dorim sa il accesam/manipulam.
getElementsByClassName("ClassName")
Metoda acceseaza toate elementele cu numele clasei specificat. Este ablolut necesar sa se
furnizeze numele clasei pe care dorim sa o accesam/manipulam.
element.innerHTML=
Permite modificarea continutului din cadrul unui element HTML
element.attribute=
Permite modificarea atributului unui element HTML
element.setAttribute(attribute,value)
Permite modificarea atributului unui element HTML
element.style.property=
Permite modificarea stilului unui element HTML
document.createElement()
Permite crearea unui element HTML
document.createTextNode()
Permite crearea unui nod de tip text cu textul specificat pentru elementul HTML
document.appendChild()
Permite adaugarea unui element HTML
document.replaceChild()
Permite inlocuirea unui element HTML
document.removeChild()
Permite eliminarea unui element HTML
document.write(text)
Permite scrierea in fluxul de iesire HTML
Setarea valorii unui element:
<script>
document.getElementById("paragraf").innerHTML="Eu sunt noul text";
</script>
Setarea valorii unui atribut:
element.setAttribute(numeAtribut, valoareAtribut)
document.getElementById("poza").setAttribute("src","poza2.jpg");
Manipularea stilurilor CSS:
document.getElementById("idElement").style.proprietateCss = "valoare";
Crearea unui nou element cu metoda createElement():
var divNou = document.createElement("div");
Crearea unui nou nod de tip text cu metoda createTextNode():
var textDiv = document.createTextNode ("Acesta este textul pentru div");
Adaugarea unui nod cu metoda appendChild():
document.getElementById("divParinte").appendChild(divNou);
Adaugarea unui nod inaintea altui nod cu medoda insertBefore()
var antet = document.createElement("h1");
var textAntet = document.createTextNode("Textul din antet");
antet.appendChild(textAntet);
divParinte.insertBefore(antet, divNou);
Inlocuirea unui nod cu un alt nod folosind metoda replaceChild():
nodParinte.replaceChild(noulNod,vechiulNod)
Stergerea unui nod folosind metoda removeChild():
nodParinte.removeChild(nodDeSters)

Web Dev

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Web Dev

Încărcat de

Drepturi de autor:

Formate disponibile

HTML:

<b> formateaza textul cu bold

Parola <input type="password" name="parola" size="25" maxlength="50" />

Hidden <input type="hidden" name="cod" value="valoarea e trimisa pe server">

Submit<input type="submit" name="trimite" value="Trimite formular" />

Image<input type="image" src="imagine-trimite-form.jpg" width="120" height="22" />

Button<button type="button"><img src="sigla.jpg" width="20" height="18"> Like FSEGA

Reset<input type="reset" value="Resetati">

Textare<textarea name="observatii" rows="5" cols="30"> valoare implicita </textarea>

<video width="640" height="480" controls>

Data <input type="date" name="data_eveniment" />

Stilizarea link-urilor si a listelor:

Min-width, max-width, min-height, max-height:

Afisarea si ascunderea elementelor:

none Nu se afiseaza nici o umbra

box-shadow: 2px 2px 5px #FF33CC;

onblur Un element pierde focusul (este parasit)

Operatiuni asupra variabilelor:

Operatiuni asupra variabilelor de tip number:

Operatiuni asupra variabilelor de tip date:

Variabilele de tip array:

Pentru a putea manipula elementele HTML:

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