1.Introducere
a) Ce inseamna HTML?
HTML = Hyper Text Markup Language
b) Html este fata ascunsa a site-ului.Cu html poti crea tabelele, scrisul, legaturile, imaginile.
Un site este de fapt o succesiune de tabele.
De exemplu :
Curs de html
de fapt, in spatele paginii web arata ca un tabel:
Fisierul de html se salveaza cu terminatia .htm sau .html.
c) Cu ce program lucrez?
Poti lucra in Notepad (Start, All Programs, Accessories, Notepad) sau in Microsoft FrontPage. Pentru incepatori, va sfatuiesc sa lucrati in Front Page deoarece acolo puteti desena, iar Front Page creeaza singur codul, si astfel puteti invata mai multe.
d) Html este format din taguri!
Documentul tau HTML de baza arata astfel:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Cred ca ti-ai dat seama singur: in interior la <body> se adauga textul.
e) Pentru a defini titlul unei pagini, inconjori textul cu etichetele:
<title> situl meu </title>
REGULA: Intotdeauna cand deschizi un tag, trebuie sa il si inchizi!
f) Cum se transporta site-ul pe net?
Cu ajutorul programelor “FTP”. Cauta pe google si vei gasi o multime de astfel de programe: smart ftp, crystal ftp. Practica vei avea deschise doua ecrane mici si vei transporta din calculator pe internet ceea ce lucrezi tu in fisierul respectiv. Nu e deloc greu!
Sau poti lucra local, cu ajutorul programului MIcrosoft Front Page. Chiar este recomandat sa lucrezi la inceput cu acest program. Vei vedea singur de ce! Te ajuta!
2.Despre text
Sa realizam o prima pagina. Sa incepem cu textul.
Sa scriem ceva:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
Primul meu text online!
</BODY>
</HTML>
Ai sa observi ca va aparea “Primul meu text online!”. Sper ca folosesti Front Page ca sa iti fie mai usor!
Realizarea paragrafelor
Daca ai nevoie sa folosesti paragraf, poti folosi eticheta <P>.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
Primul meu text online!
<P>A doua linie</P>
</BODY>
</HTML>
Etichete elementare pentru formatarea textului
<B> </B> pentru bold, ingrosat
<I> </I> pentru italic, aplecat
<U> </U> pentru subliniat
Alinierea paragrafelor
Eticheta <Center> iti ofera ofera posibilitatea de a centra textul.
<P align=”center”>text</P>
<P align=”left”>text</P>
<P align=”right”>text</P>
Eticheta <BR>
Am aflat ca pentru a separa textul in paragrafe poti folosi eticheta <P>. Cand un browser descopera eticheta <P> el incepe un paragraf nou, pe un rand separat, si insereaza un rand suplimentar, gol dupa paragraful precedent.
Dar daca nu doresti acest rand suplimentar? Poate doresti sa listezi o lista de elemente avand fiecare element pe un rand separat, fara a exista spatiu intre elemente.
Eticheta <BR> aduce textul pe un alt rand, fara sa insereze un rand separat.
Fontul textului <FONT>
a) modificarea fontului
Browserul foloseste un font obisnuit pentru a-ti prezenta paginile. Cu toate acestea, poti modifica fontul astfel:
<FONT FACE=”verdana”> </FONT>
b) modificarea marimii textului
<FONT SIZE=”20”></FONT>
Partea SIZE este un numar care arata dimensiunea dorita a textului.
Ex.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<FONT FACE=”arial” SIZE=”6”>
Primul meu text online!</FONT>
<BR>
Al doilea text.
<P>A doua linie</P>
</BODY>
</HTML>
Culorile
Textul poate avea culori diferite. In majoritatea timpului vei specifica o culoare introducand un cod din 6 cifre care are urmatoarea forma:
#rrggbb
Stiu ca arata ciudat, dar e matematic explicabil. RR este partea de rosu din culoare, gg este partea de verde, bb este partea de albastru. Cu alte cuvinte, fiecare cod reprezinta o combinatie a primelor trei culori primare, iar aceasta combinatie produce culoarea finala. Acestea sunt numite valori RGB.
Codurile RGB pentru culorile obisnuite:
#000000 – NEGRU
#FFFFFF – ALB
#FF0000 – ROSU
#00FF00 – VERDE
#000FF – ALBASTRU
#FFFF00 – GALBEN
ex.
<FONT COLOR=”FF0000”>Acest text este rosu</FONT>
ex.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<FONT FACE=”arial” SIZE=”6” COLOR=”#FF0000”>Primul meu text online!</FONT>
<BR>
Al doilea text.
<P>A doua linie</P>
</BODY>
</HTML>
3. Linkurile (legaturile)
Cum se realizeaza legaturile intre pagini?
Etichetele html care realizeaza legaturile sunt <A> si </A>, versiune speciala numita ancora.
<A HREF="URL"> cuvant sau imagine</A>
<A HREF="www.google.ro"> text </A>
Lucrul cu directoarele
S-ar putea sa stii ca un director este o zona de stocare a fisierelor. Atunci cand te inscrii la o companie care iti va “gazdui” paginile web, respectiva companie iti va furniza propriul tau director pe serverul ei. Daca ai doar cateva pagini, respectivul director va fi mai mult decat satisfacator. Daca insa construiesti un site mai mare, ar trebui sa te gandesti putin la organizarea fisierelor. De ce? Ei bine, gandeste-te la calculatorul tau. Este putin probabil ca ai totul inghesuit intr-un singur director. Mai probabil ai directoare separate pentru diferitele programe pe care le folosesti si alte directoare pentru fisierele tale de date.
Nu exista nici un motiv pentru care nu ai putea realiza o schema asemanatoare in casa ta de pe web.
Pe situl meu, am directoare separate pentru horoscop (horoscop.htm), citate, pentru fiecare curs in parte, pentru poze.
Exista trei situatii care trebuiesc urmarite:
a) Referirea la un alt fisier din acelasi director. Acest lucru este cel mai usor, deoarece nu trebuie sa incluzi nici o informatie despre director. Sa presupunem ca fisierul HTM la care lucrezi este in directorul in care scrii si ca doresti sa faci referire la pagina citate.htm care se afla tot in respectivul director. In acest caz folosesti doar numele fisierului:
<A HREF=”citate.htm”>
b) Referirea la un fisier aflat intr-un subdirector din directorul principal. Acesta este un lucru obisnuit, deoarece este posibil ca pagina ta de start sa aibe legaturi catre fisiere un subdirectoare.
De ex., sa presupunem ca doresti sa faci o legatura catre o pagina numita citate.htm din subdirectorul citate aflat in pagina ta de start.
<A HREF=”citate/citate.htm”>
c) Referirea la un fisier dintr-un subdirector aflat intr-un alt subdirector. Acesta este cazul cel mai dificil. De ex., sa presupunem ca ai o pagina in subdirectorul citate si doresti sa o legi de o pagina numita horoscop.htm din subdirectorul horoscop.
<A HREF=”../horoscop/horoscop.htm”>
Creearea unei legaturi prin e-mail - mailto
Nu exista nici un motiv pentru care o legatura sa conduca obligatoriu la o pagina web. Ceea ce trebuie sa faci este sa modifici partea “cum” a adresei URL si te vei conecta la majoritatea celorlalte servicii Internet.
Forma generala este:
<A HREF="mailto:adresa ta de email">textul legaturii</A>
<A HREF="mailto:eu@yahoo.com">trimite email</A>Acest link poti sa il plasezi in spatele unui text, a unei poze sau a unui buton.
4.Imaginile
Webul s-a standardizat la numai doua formate d-ale imaginilor - GIF si JPEG.
Exista un cod html care spune browserului sa afiseze o imagine: <IMG>.
<IMG SRC=”nume fisier”>
SRC este prescurtarea de la source, iar nume fisier este numele fisierului grafic pe care doresti sa-l afisezi.
De ex., sa spunem ca ai o imagine numita rege.jpg pe care vrei sa o afisezi. Folosesti linia urmatoare:
<IMG SRC=”rege.jpg” width=”30” height=”50”>
Observam doua atribute noi: width si height: specifica latimea si inaltimea pozei.
Transformarea unei imagini in legatura
<A HREF=”URL”><IMG SRC=”numefisier”></A>
Cand poza este folosita ca link, se mai adauga un atribut: border=”0”. Daca nu adaugi acest atribut, o margine apare in jurul pozei. Daca doresti margine, poti adauga border=”2” sau3, 4, 5 cum vrei tu.
5.Pentru motoarele de cautare
Ai construit un site! Unul dintre milioanele de situri! Cum vor sti oamenii cararea catre casuta ta? Trebuie sa le arati tu, sa instalezi niste indicatoare, niste semne.
Cu alte cuvinte, trebuie sa iti inscrii situl la motoarele de cautare importante ale webului, astfel incat oamenii sa te poata gasi atunci cand cauta situri cu un continut asemanator cu al tau.
Inregistrarea sitului
Toate motoarele de cautare au o pagina pe care o poti folosi pentru a introduce particularitatile sitului tau.
Exemple de adrese de motoare de cautare:
www.federal.ro;
www.w1.ro;
www.clicklink.ro
Sunt peste 100 de motoare de cautare.
Utilizarea etichetei <META> pentru ca motoarele de cautare sa iti remarce site-ul
Principalele motoare de cautare, cum ar fi Google scruteaza web-ul pentru a…
6.Construirea unui tabel
Adaugarea tabelelor in pagina web
Un site este de fapt o succesiune de tabele.
Sa facem o mica introducere in limbajul specific tabelelor:
- Rand. O singura “linie” de date care traverseaza tabelul.
Ex de tabel cu doua randuri.
- Coloana. O singura sectiune verticala de date.
Ex de tabel cu doua coloane.
- Margini. Acestea sunt liniile care inconjoara tabelul.
- Titlul. Este textul care apare in partea desus a tabelului si este folosit pentru a descrie continutul tabelului.
Baza
Tabelele folosesc intotdeauna urmatorul continut de baza:
<TABLE>
</TABLE>
Toate celelalte etichete pentru tabel se incadreaza intre acestea doua.
Marginea tabelului
Daca doresti ca marginea tabelului sa fie vizibila, folosesti eticheta <TABLE BORDER=”n”> unde”n” este inaltimea marginii…
7.Slefuirea: mai multe despre tabele
Alinierea textului in interiorul celulelor
Poti alinia textul central, la stanga sau la dreapta, sus, jos sau la mijloc.
<TD align=”aliniere”>
Cazuri posibile:
<TD align=”center”> - centru
<TD align=”left”> - stanga
<TD align=”right”> - dreapta
<TD align=”bottom”> - jos
<TD align=”top”> - sus
<TD align=”middle”> - la mijloc
Culoarea fundalului
Pentru a asocia o culoare personalizata pentru fundalul unui tabel sau chiar pentru o celula individuala, folositi atributul BGCOLOR=”#rrggbb” la eticheta <TABLE> sau la eticheta <TD>
<TABLE BGCOLOR=”#CCCCCC”>
Imagine de fundal
Poti seta imaginea de funal, in locul unei culori de fundal pentru un tabel sau o celula. Se introduce atributul BACKGROUND in interiorul etichetei <TABLE> sau <TD> si setezi atributul egal cu numele fisierului imagine pe care doresti sa-l folosesti, ca in exemplu:
<TABLE BACKGROUND=”table.gif”>
Marimea marginii
Pentru a modifica grosimea marginii tabelului, poti asocia o valoare atributului BORDER al etichetei <TABLE>.
<TABLE BORDER=”5”>
Latimea si inaltimea tabelului
Daca ai nevoie ca tabelul tau sa aibe o anumita latime, foloseste atributul WIDTH pentru eticheta <TABLE>.Poti specifica fie o marime in pixeli, fie un procentaj din latimea ferestrei disponibile.
<TABLE WIDTH=”75%”>tabelul ocupa 75% din latimea ferestrei
sau
<TABLE WIDTH=”500”>
Pentru determinarea inaltimii tabelului, se foloseste atributul HEIGHT. Utilizarea cea mai obisnuita este setarea atributului la 100% astfel incat tabelul sa se intinda intotdeauna pe inaltimea ferestrei browserului.
Latimea unei celule
Poti specifica, de asemenea latimea unei celule individuale adaugand atributul WIDTH la eticheta <TD>.
<TD WIDTH=”50%”> celula ocupa 50% din latimea tabelului.
Cantitatea de spatiu dintre celule
Implicit, browserul lasa un spatiu de doi pixeli intre celule (pe verticala sau pe orizontala). Pentru â mari acest spatiu, folosesti atributul CELLSPACING pentru eticheta <TABLE>
<TABLE CELLSPACING=”10”> mareste spatiul dintre celule la 10
Cantitatea de spatiu intre continutul unei celule si marginea acesteia
Browserul lasa un spatiu de un pixel intre continutul celulei si marginea celulei. Pentru â da datelor din tabel mai mult spatiu sa respire, foloseste atributul CELLPADING al etichetei <TABLE>.
<TABLE CELLPADING=”10”> spune browserului sa rezerve un spatu de umplere de 10 pixeli deasupra, dedesubtul, la stanga si la dreapta continutului din fiecare celula
Extinderea textului sau imaginii pe mai multe randuri sau coloane
Pana acum, datele introduse de noi au ocupat o singura celula. Dar daca vreau sa ocupe doua celule? Sau trei?
Sa incepem cu intinderea pe mai multe coloane.
Pentru a face acest lucru, trebuie sa interpui atributul COLSPAN (column span = intinderea coloanei) intre etichetele <TD>
<TD COLSPAN=”coloane”>
Coloanele reprezinta numarul de coloane pe care doresti sa se intinda celula.
Iata un exemplu:
<HTML>
<HEAD>
<TITILE> despre colspan</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”1”>
<TR>
<TD COLSPAN=”2”>
Acum ne intindem pe doua coloane
</TD>
<TD>
e o coloana obisnuita
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Extinderea pe randuri multiple este asemanatoare, cu exceptia faptului ca inlocuiesti atributul COLSPAN cu ROWSPAN in etichetele <TD>.
<TD ROWSPAN=”randuri”>
Valoarea “randuri” reprezinta numarul de randuri pe care doresti sa se intinda celula.
Iata un exemplu care arata o celula intinsa pe doua randuri:
<HTML>
<HEAD>
<TITILE> despre colspan</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”1”>
<TR>
<TD ROWSPAN=”2”>
Acum ne intindem pe doua randuri
</TD>
</TR>
<TR>
<TD>
un rand obisnuit
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
8.Introducerea sunetelor in pagina web
Adaugarea fisierelor de sunet in pagina web este destul de simpla. Tot ce trebuie sa faci este sa copiezi fisierul pe situk tau web si apoi sa realizezi o legatura spre fisierul respectiv:
<A HREF=”burn.wav”>apasa aici ca sa asculti melodia</A>
Incorporarea unui sunet de funal
Daca vrei sa asculti o melodie pe toata durata vizionarii sitului tau, folosesti eticheta <BGSOUND>
<BGSOUND SRC=”numefisier” LOOP=”numardeori”>
Partea “numefisier” reprezinta fisierul de sunet care doresti sa fie rulat. Partea “numardeori” spune browserului de cate ori sa ruleze sunetul. Poti sa introduci fie un numar pozitiv, fie sa folosesti LOOP=”INFINITE” pentru a rula sunetul pana cand navigatorul se enerveaza si da cu pumnii in monitor .
<BGSOUND=”cats.mp3” LOOP=”1”>
9.Creearea unui text derulant-marquee
Poti afisa un cuvant sau o fraza care intra pe ecranul browserului in dreapta, se deplaseaza pe tot ecranul si apoi iese prin stanga. Poti repeta acest lucru de cate roi doresti si chiar poti schimba directia textului. Eticheta pe car eo folosesti pentru aceasta smecherie este <MARQUEE>.
<MARQUEE> aici scrii textul care se deplaseaza</MARQUEE>
Textul dintre cele 2 etichete este cel ce se deplaseaza pe ecran.
Atributele etichetei <MARQUEE>:
- ALIGN = “Aliniere”. Determina modul in care textul inconjurator este aliniat pe verticala fata de textul derulant. Pentru “aliniere” se foloseste TOP sau BOTTOM.
- BEHAVIOUR = “Tip”. Determina cum se comporta textul derulant. Pentru TIP se foloseste SCROLL(deplasare) pentru a obtine miscarea standarad de deplasare pe ecran; foloseste SLIDE(alunecare) pentru â face textul sa se deplaseze si apoi sa se opreasca atunci cand ajunge in partea opusa; foloseste ALTERNATE (alternativ) pentru a face textul sa “sara” inainte si inapoi.
- BGCOLOR = “Culoare”. Seteaza culoarea fundalului pentru textul derulant.
- DIRECTION = “Sens”. Acest stribut spune browserului in ce parte se deplaseaza textul. “Sens” poate fi LEFT sau RIGHT.
- LOOP = “de cate ori”. Specifica de cate ori vrei sa se deplaseze textul.
- SCROLLDELAY = “Timp”. Atributul seteaza intervalul dintre bucle in milisecunde.
- SCROLLAMOUNT = “Pixeli”. Acest atribut determina numarul de pixeli cu care se deplaseaza textul la fiecare iterare. Cu cat valoarea pentru “pixeli” este mai mare, cu atat textul se deplaseaza mai repede.
- HEIGHT=”Valoare”. Specifica inaltimea textului in pixeli sau ca procent din ecran.
- WIDTH = “Valoare”. Specifica latimea textului in pixeli sau ca procent din ecran.
<HTML>
<HEAD>
<TITLE>marquee</TITLE>
</HEAD>
<BODY>
<MARQUEE ALIGN=”BOTTOM” BGCOLOR=”SILVER” WIDTH=”50” SCROLLAMOUNT=”4”> Bine ati venit!</MARQUEE>
</BODY>
</HTML>
10.Redirectionarea browser-elor prin tehnologia client pull
Daca iti muti site-ul sau daca redenumesti o pagina – cel mai bine este sa creezi o pagina in vechea locatie care sa includa o legatura catre noul site sau catre noua pagina. Navogatorii pot atunci sa execute click pe legatua pentru a ajunge acolo unde doresti sa ajunga.
Cu toate acestea, poti folosi o caracteristica excelenta, numita client pull, pentru a trimite automat vizitatorii catre noua pagina. Atunci cand ajungi la vechea adresa, pagina se incarca si numai dupa doua secunde esti redirectionat automat catre actuala pagina de start a cartii.
Cam asa arata:
<HTML>
<HEAD>
<TITLE>aceasta pagina s-a mutat</TITLE>
<META NAME=”REFRESH” CONTENT=”2”; URL=”www.ro”>
</HEAD>
Secretul consta in eticheta suplimentara <META> din antet. Esenta ei este atributul CONTENT, care foloseste urmatorul format:
CONTENT=”secunde”, URL=”pagina”>
“Secunde” reprezinta numarul de secunde in care browserul asteapta inainte de a incarca pagina specificata in URL.
11.Formularele
Majoritatea programelor moderne iti trantesc in fata o caseta de dialog daca au nevoie sa obtina ma multe informatii de la tine. Un formular este in esenta, echivalentul unei case de dialog intr-o pagina web.
Un exemplu de formular:
Crearea unui formular
Formularele se formeaza cu ajutorul etichetelor HTML. Pentru a incepe, introdu etichetele <FORM> si </FORM>. Acestea pot fi inserate oriunde in interiorul paginii. Vei plasa apoi celelalte etichete legate de formular intre etichetele <FORM> si </FORM>.
Eticheta <FORM> include cateva atribute suplimentare care spune…
12.Lucrul cu clasele de stiluri
Clasa de stiluri a fosat creata pentru a rezolva o problema obisnuita: ce se intampla daca doresti sa aplici un anumit stil pentru mai multe etichete si sectiuni diferite din documentul tau?
Dar ce se intampla daca te hotarasti sa modifici stilul? Atunci ar trebui sa treci prin intreaga pagina si sa editezi toate acele stiluri interioare. O abordare mai simpla ar fi realizarea unei clase de stiluri in cadrul foii principale de stiluri.
Formularul de baza:
NumeClasa{scrie aici definitie de stil}
Aici, numeclasa este un nume unic (care nu contine spatii}, pe care il folosesti pentru desemnarea clasei.
Exemple:
TextTitlu{font-size:20pt; color: Gray; text-align:center}
TextSubtitlu{font-size:12pt; color: Black; text-align:left}
Aici, TextTitlu foloseste o marime â fontului de 20 de puncte, text de culoare verde si o aliniere centrata.
TextSubtitlu foloseste o marime a fontului de 12 puncte, text de culoare neagra si o aliniere spre stanga.
Pentru a folosi aceste clase, se adauga atributul CLASS etichetelor carora doresti sa le aplici stilul; dupa aceea, fiecare eticheta care foloseste clasa se modifica automat.
Iata un exemplu:
<HTML>
<HEAD>
<TITLE>clase</TITLE>
</HEAD>
<STYLE TYPE=”text/css”>
TextTitlu{font-size:20pt; color: Gray; text-align:center}
TextSubtitlu{font-size:12pt; color: Black; text-align:left}
</STYLE>
<BODY>
<DIV CLASS=” TextTitlu”>aista e titlu documentului</DIV>
<DIV CLASS=” TextSubtitlu”>aista e titlu documentului</DIV>
</BODY>
</HTML>
Eticheta <DIV> este folosita pentru a imparti pagina in sectiuni separate.
13.Adaugarea scripturilor JavaScript
Codul Java Script se afla in interiorul paginii web, asemenea etichetelor HTML. Scripturile Java se plaseaza intre etichetele <SCRIPT> si </SCRIPT> si au urmatoarea forma:
<SCRIPT LANGUAGE=”JavaScript” TYPE=”text/javascript”>
<! - -
Comenzile scriptului sunt scrise aici
// - - >
</SCRIPT>
Pozitionarea scriptului
Locul unde stochezi scriptul in pagina ta depinde de rolul acestuia:
- Daca scriptul scrie text in pagina, il vei pozitiona acolo unde doresti sa apara textul.
- Altminteri, vei pozitiona scriptul in interiorul antetului paginii (intre etichetele <HEAD> si </HEAD>).
Afisarea unui mesaj pentru utilizator
Acest script afiseaza un mesaj pentru utilizator intr-o casuta de dialog simpla.
alert(“scrie mesajul aici”)
Intre ghilimele inrtoduci orice mesaj doresti sa fie afisat.
Ex.
<SCRIPT LANGUAGE=”JavaScript” TYPE=”text/javascript”>
<! - -
alert(“bine ai venit pe site!”)
// - - >
</SCRIPT>
Daca iti este util acest blog , il apreciezi si vrei sa imi arati acest lucru apasa pe una sau mai multe dintre reclamele de pe blog ( aceasta este singura metoda de venit a acestui blog ). Multumesc!
Comentarii
Trimiteți un comentariu