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 7 : Inserarea imaginilor

Pana aici a fost extrem de simplu (parerea mea) si am inteles perfect cum sta treaba cu tag-urile, culorile si atributele, la ce si cum se folosesc. E timpul sa trec la ceva mai distractiv: pozele si imaginile.
Imaginile pot avea mai multe extensii:
-Jpeg sau jpg : de obicei aceste formate le gasim la poze si au o rezolutie si o calitate mult mai mare
-GIF : acestea sunt imagini animate si se pot folosi pentru butoane, icon-uri sau animatii pe pagina
Un exemplu de GIF:




Pentru a introduce o imagine pe pagina se foloseste <IMG SRC="numeleimaginii.extensie">

Este bine ca atunci cand vrei sa faci un site, sa tii toate fisierele (pagini HTML, imagini etc.) in cadrul aceluiasi folder. Daca vei folosi in codul HTML al paginilor site-ului tau linia de cod de mai sus, imaginea va fi afisata doar daca pagina respectiva va fi in acelasi folder cu imaginea pe care vrei sa o folosesti. In caz contrar imaginea nu va fi afisata. Daca muti imaginea din folder nu va mai fi afisata pe pagina.

Am sa simplific pagina asa incat sa fie cat mai putin aglomerata pentru a putea urmari ce ma intereseaza.
Ce este cel mai important este sa avem in minte cat mai bine ce structura va avea site-ul. Daca va contine mai multe pagini este bine ca in folderul principal sa se faca mai multe foldere numite (sa zicem) Poze, Pagini, Texte etc.
Sa spunem ca vrem sa punem o poza numita pic1 pe pagina si aceasta se afla in folderul in care salvam tot ce lucram intr-un subfolder numit Poze. Atunci vom utiliza o linie de coduri :
<IMG SRC="Poze/pic1.jpg"> (trebuie scrisa neaparat si extensia)<HTML>
<HEAD>
<TITLE>Tutorial</TITLE>
</HEAD>
<BODY BGCOLOR="#FF9900">
<FONT COLOR="red" FACE="Arial" SIZE="7"><CENTER>Aceasta este prima mea pagina web</CENTER></FONT><P>
<HR COLOR="#FF0000">
<FONT COLOR="red" FACE="Arial" SIZE="4"><I>Recapitulare</I></FONT><BR>
<HR COLOR="#FF0000">
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>
<IMG SRC="Poze/pic1.jpg"><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>


Rezultatul: