Sunteți pe pagina 1din 3

<a></a> link

<br /> trece la randul urmator fara spatiu intre raduri, diferit fata de paragraf
la paragraf
<p></p> paragraf, lasa spatiu intre randuri
<strong> boldat
<em></em> inclinat
<!--text--> comentariu
<h1...h6></h1...h6> font mare descrescator boldat
<hr /> linie orizontala
<a href="link">text </a> atribuie link lui text
<a href="linkul alte pagini din folder.html"> Text </a> atribuie lui text linkul
Pt atunci cand vrem sa accesam o parte de continut fara sa cautam acea parte
manual:
<a name="text"></a> TEXT1234 //aici va merge pagina cand dam click pe link ul de
acces format
<a href="#text>Text ul la care vrei sa ajungi</a> //acesta este linkul pe care dam
click pentru ca pagina sa mearga unde am ales mai inainte. Ne va duce la text1234
<a href="mailto:cata@yahoo.com"> EMAIL</a> va intra in aplicatia de mail si va
trimite email la cata@yahoo.com
<a href="https://www.google.ro" title="astronauti">GOOGLE</a> clickul pe GOOGLE va
duce la un site, in cazul asta google. daca tinem mouseul pe GOOGLE, acesta va
arata titlul :astronauti
<img src="principala.jpg"/> introduci imagine, sursa impaginii este numele acesteia
.extensia
<a href="link"><img src="principala.jpg"/></a> pune link pe imaginea pricipala.jpg
<img src="principala.jpg" height="150"/> setam dimensiunea la imagini
<table></tabel> tabel
<tr></tr> rand
<td></td> coloana
<th></th> header al unui tabel, scris ingrosat, centrat la centru
rand 2 linii 3 coloane:
{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{
<table>
<tr>
<td>link/scris/poza</td>
<td>link/scris/poza </td>
<td>link/scris/poza </td>
</tr>
<tr>
<td>link/scris/poza </td>
<td>link/scris/poza </td>
<td>link/scris/poza </td>
</tr>
</table>
}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}}
<table border="valoare"> adauga margini
<th colspan="2"> Cate coloane sa aiba acelasi titlu, in cazul asta 2, peste cate
coloane sa se intinda titlul
<table width="500 sau un nr cu %"> -cat de larga sa fie coloana fiecarui tabel
<table border="1" cellpadding="10"> largeste tabelul in fiecare parte fata de
margini cu 10 pixeli in toate directiile
<table border="1" cellspacing="10"> separa fiecare celula a tabelului de marginile
tabelului cu 10 pixeli in toate directiile
<ul></ul> pentru a face o lista neordonata
<li>text</li> pentru a pune elemntul text in lista. Comanda se afla in interiorul
<ul> }pt lista neordonata si ordonata
<ol></ol> pentru a face o lista ordonata
<form> </form> - pt forme
In form: Username: <input type="text" name="username" size:"15" maxlength="10"
value:"text"/> Dupa username, pune o fereastra in care poti sa scrii (ca cea de la
google), unde sa ti scrii ceva, in cazul asta usernameul, incap 15
caractere(infulenteaza doar cum arata), poti scrie doar 10. Cand pagina se va
deschide, in acea caseta va fi scris 'text'

CSS:

PENTRU A FACE SCHIMBARI LA O COMPOZITIE DIN BODY, PRECIZAM COMPOZITIA RESPECTIVA


<style type="text/css"></style> aratam ca vrem sa folosim css
<style type="text/css">p {color:blue;}</style> schimbam culoare unui paragraf p din
interiorul body ului cu albastru. Scriem simbolul a ceea ce vrem sa schimbam iar
intre acolade scriem ceea ce vrem sa schimbam si in ce
simbol coresp{line-height:130%;} spatiere intre randuri
simbol coresp{font-weight:bold sau numar fara diez;} boleaza la o anumita valoarare
simbol coresp {font-style: italic;} scris italic
{text-align:center sau right sau left;}aliniaza textul
{text-indent:numarpx;} aliniaza cu numar pixeli
body {background-color:culoare sau #nr6cifre;} alegem culoare fundalului
body {color: white;} pune culoare scrisului alb
body{ background-image:url(numeimagine.jpg)} pune o imagine pe fundal, imaginea
trebuie sa se afle in acelasi director cu site ul
body{ background-repeat:no-repeat;}
background-repeat:repeat-x; sa se repete pe linie orizontala
background-repeat:repeat-y; sa se repete pe linie verticala
background-position: numarpx/numar% numarpx/numar%
background-position: 50% numar pentru a pune imaginea pe centru
{padding:20px;} pune 20 px spatiu intre text si margine pe toate partile
padding-top/left/bottom:20px; pune 20px spatiu intre text si sus jos sau stanga si
margine
border-color }
border-width }pt a pune o margine, trebuie sa specificam astea SAU {border: 3px
solid blue;}
border-style }
margin:1px daca avem mai mult text si vrem sa il apropiem. de exemplu vrem sa
apropiem doua paragrafe, scriem p{margin:1px;}
margin- right bottom right left
margin - in afara marginei, padding - in interiorul marginei
{border-top/left/right/bottom-color:culoare width:nr pixeli style:stilul pe care
vrem sa l folosim} - specifica care margine vrem sa o modificam
{width:nrpixelipx;} specifica cat de mult vrem sa se intinda caseta text a unui
paragraf/h/etc IN DREAPTA
{height:nrpixelipx} specifica cat de mult vrem sa se intinda caseta text a unui
paragraf/h/etc IN JOS
a:link{color:red; text-decoration:none;} -modifca culoarea unui link
a:visited{color:green; etc} -modificam aspectul unui link vizitat
a:hover{color:green; etc} -modificam aspectul unui link cand avem clickul pe el
a:active{color:green; etc} -modificam aspectul unui link cand apasam pe el
ul{list-style-type:square/circle/katakana/etc;} schimba punctele de la inceputul
fiecarui rand neordonat in ce ii dam
ul{list-style-image:url(numeleimaginii.jpg);}schimba punctele de la inceputul
fiecarui rand neordonat in imagine pe care o introducem
ul {list-style-type:none; padding:0;} - sterge punctele de la inceputul fiecarui
rand neordonata si muta scrisul in stanga. daca nu puntem padding:0 va lasa un gol
in locul puncteleor
Atunci cand vrem sa schimbam mai multe randuri de odata, de exemplu paragraf si
header : p, h1 {comanda;}
Daca avem in body: ana are mere <span> multe mere multe </span>, in head, css
punem: span{comanda}, aplicam comanda a doar ce e intre <span> si </span>
<div>text</div> in body. div{position: absolute; top.bottom.left.right:
nrpixelipx;} in head - ne permite sa punem textul unde vrem
.redtext {color:red;} in head, <p class="redtext">I want this text to be red!</p>
in body. face textul rosu. nu trebuie sa punem punctul de la .redtext
#text {instructiune;} in head, <div id="text">1234</p> in body . aplica
instructiunea lui div
Daca avem un paragraf si in el un link, pt a face modificari la linkul din pargraf
folosim :p > a {instructiuni;} (toate linkurile din p vor fi modificate.) In loc
de p putea fi orice. header, etc
PENTRU A APLICA UN STIL LA TOATE PARAGRAFELE SAU HEADURILE SAU LINKURILE SAU ETC DE
PE TOT SITEUL, NU DOAR DE PE O PAGINA,
VOM FACE O PAGINA NOUA CU INSTRUCTIUNILE IN FELUL URMATOR: h1{instructiune;},
etc... VOM SALVA TEXTUL CU EXTENSIA .css. IN PAGINILE
IN CARE VREM SA UTILIZAM ACEST FONT, VOM SCRIE IN HEAD <link rel="stylesheet"
type="text/css" href="numeledocumentuluicustilurile.css"/>
peste <link rel="stylesheet" type="text/css"
href="numeledocumentuluicustilurile.css"/> , putem pune o alta instructiune, de ex
h1{color:blue}. El va ignora culaore data in textul ajutator si o va pune albastru.
postiton: absolute; urmata de alte comenzi - pune textul exact unde i se spune,
chiar daca acolo se afla deja alt text, asaza textul din coltul din stana
postition: relative; urmata de comenzi - asaza texutul fata de ordinea in care este
asezat. de ex daca este al 3 lea paragraf, aplica comenzile fata de al 2 lea
paragraf
Putem folosi pozitiile impreuna
position: fixed; urmata de comenzi - textul se muta odata cu pagina
In body: <img src="nume.jpg"/>. In head: img{max-height: nrpx; max-width:nrpx;}
seteaza inaltimea si latimea maxima a unei poze

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