M-am hotarat sa pasesc in lumea webdesign. Dupa multe lecturi pe internet si dupa cum am fost sfatuita, am ales HTML, Dreamweaver si Adobe Photoshop pentru ca este mai usor. Pasii sunt multi, marunti si greu de parcurs si am decis ca fiecare lectie pe care o voi invata si fiecare tutorial pe care-l voi face o sa-l prezint aici din doua motive:
1. Repetitia este mama invataturii, repetand voi retine mai bine.
2. Poate acest blog facut in pasi marunti va mai ajuta pe cineva.
Voi incepe sa invat bazele HTML-ului in Notepad dupa care voi trece la Dreamweaver
Cine doreste sa invete pas cu pas cu mine este binevenita (binevenit)

Lectia 4 : Atribute HTML

Atributele pot fi definite ca niste proprietati ale tag-urilor. Atributele se pun numai in tag-ul de inceput. Daca un tag nu are nici un atribut, atunci browser-ul va lua in considerare valorile implicite ale tag-ului respectiv. Pentru a intelege mai bine notiunea de atribut sa vedem cateva exemple:
Atributul BGCOLOR care se foloseste cu tag-ul <BODY> indica ce culoare va avea fondul viitoarei pagini web. Fondul unei pagini web are in mod implicit culoarea alba, dar sa spunem ca vrem ca fondul paginii noastre sa fie portocaliu. Codul culorii orange este: #FF9900 (voi pune pe o pagina codurile pentru toate culorile)
Bun, deci ca sa fac pagina portocalie atasez atributul BGCOLOR la <BODY> in documentul deja creat:

<HTML>
<HEAD>
<TITLE>Tutorial</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9900">
Prima incercare<BR>
<HR>
Un exemplu de tag singular este BR<BR>
Tag-ul BR defineste capatul unui rand si tot ce va fi scris dupa el in pagina va apare pe un rand nou<BR>
Un alt exemplu de tag singular este HR
<HR>
HR traseaza o linie dreapta pe pagina<BR>
Pentru inceput il vom folosi pentru a delimita anumite campuri in pagina.
</BODY>
</HTML>

Acum pagina este portocalie

In pagina avem cele doua linii date de TAG-urile HR. Sa spunem ca vrem sa le facem rosii.
Pentru prima linie punem codul pentru culoarea rosie <HR COLOR="#FF0000">


<HTML>
<HEAD>
<TITLE>Tutorial</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9900">
Prima incercare<BR>
<HR COLOR="#FF0000">Un exemplu de tag singular este BR<BR>
Tag-ul BR defineste capatul unui rand si tot ce va fi scris dupa el in pagina va apare pe un rand nou<BR>
Un alt exemplu de tag singular este HR
<HR>
HR traseaza o linie dreapta pe pagina<BR>
Pentru inceput il vom folosi pentru a delimita anumite campuri in pagina.
</BODY>
</HTML>

Sa spunem ca a 2a linie vrem sa o facem altfel
Pentru a da o lungime cat jumatate din valoarea implicita punem (WIDTH="50%") si ca sa o facem putin mai groasa decat prima linie punem (SIZE="5%") si o vom alinia unde vrem, in centru, stanga sau dreapta. O punem in centru: (ALIGN="center")

Am sa las cateva explicatii si pe pagina pentru a putea vedea si face diferente dintre ce este scris in Notepad si cum se vede in Explorer.
Introduc Width, Size si Alingn la a 2a linie (<HR>)

<HTML>
<HEAD>
<TITLE>Tutorial</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9900">
Prima incercare<BR>
<HR COLOR="#FF0000">
Un exemplu de tag singular este BR<BR>
Tag-ul BR defineste capatul unui rand si tot ce va fi scris dupa el in pagina va apare pe un rand nou<BR>
Un alt exemplu de tag singular este HR
<HR COLOR="#FF0000" WIDTH="50%" SIZE="5%" ALIGN="center">
Pentru inceput atributul HR il vom folosi pentru a delimita anumite campuri in pagina.
HR traseaza o linie dreapta pe pagina<BR>
Daca nu se pune nici un atribut linia va fi cat toata pagina (exemplu prima linie)<BR>
Sa spunem ca a 2a linie vrem sa o facem altfel<BR>
Pentru a da o lungime cat jumatate din valoarea implicita punem (WIDTH="50%") si ca sa o facem putin mai groasa decat prima linie punem (SIZE="5%") si o vom alinia unde vrem, in centru, stanga sau dreapta. O punem in centru: (ALIGN="center")
Mai adaug o linie ca sa exersez si bineinteles nu voi uita sa inchei randul cu BR<BR>
<HR>
Se observa ca ultima linie neavand nici un atribut este default (gri si cat toata pagina)
</BODY>
</HTML>

Acum pagina va arata asa:



Folosirea atributelor pentru schimbarea culorii si marimii textului.
Pentru a schimba culoarea folosim tag-ul FONT la care adaugam atributul COLOR="#0000FF" ( <FONT COLOR="#0000FF" )
Pentru a schimba marimea textului folosim tag-ul FONT cu atributul SIZE ( <FONT COLOR="#0000FF" SIZE="6"> )
Am facut urmatoarele modificari in acelasi document html:

<HTML>
<HEAD>
<TITLE>Tutorial</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9900">
Recapitulare<BR>
Tag-uri pereche : HTML, HEAD, BODY (toate aceste tag-uri se scriu intre < > si sunt pereche )<BR>
HTML defineste inceputul si sfarsitul documentului<BR>
TITLE denumeste pagina<BR>
BODY marcheaza continutul paginii<BR>
Daca vrem sa dam o culoare paginii folosim atributul BGCOLOR ( In acest caz am folosit BGCOLOR="#FF9900" )<BR>
<FONT COLOR="#0000FF">
Daca vrem sa coloram un text folosim tagul FONT urmat de atributul COLOR, in cazul acesta am folosit COLOR="#0000FF" pentru culoarea albastra. Nu uitati sa inchideti randul colorat cu tag-ul /FONT<BR>
</FONT>
<FONT COLOR="#00FFFF" SIZE="4">
Daca vrem sa modificam marimea textului folosim atributul SIZE la tag-ul FONT ( aici am folosit COLOR="#00FFFF" SIZE="4" )<BR>
Se observa si culoarea schimbata pentru ca am schimbat si atributul COLOR cu codul pentru agua<BR>
</FONT>
Cam dor ochii de la culoarea asta dar asta e :) mergem mai departe<BR>
Tag-urile de sfarsit au / in fata<BR>
Tag-uri singulare : exemple de taguri singulare sunt HR si BR<BR>
Tag-ul BR defineste capatul unui rand si tot ce va fi scris dupa el in pagina va apare pe un rand nou<BR>
Tag-ul HR trage o linie. Daca nu se pune nici un atribut linia va fi cat toata pagina<BR>
<HR>
Daca vrem sa coloram linia folosim atribute, in cazul de mai jos am folosit atributul COLOR="#FF0000" care este pentru rosu
<HR COLOR="#FF0000">
Daca vrem sa modificam aspectul liniei folosim atributele WIDTH, SIZE, ALIGN
<HR COLOR="#FF0000" WIDTH="50%" SIZE="5%" ALIGN="center">
</BODY>
</HTML>


Pentru a exersa si repeta am facut si o recapitulare pe care am prins-o in pagina.
Nu e asa ca deja incepe sa semene a pagina web? :))))))


Acestea sunt doar elemente de inceput pe care le-am inteles extrem de usor si le-am retinut prin cateva exercitii simple.
Sa vedem ce va urma :)

Niciun comentariu:

Trimiteți un comentariu