PAGINI WEB CU HTML
Un document HTML este un fisier de text obisnuit caruia i se asociaza o serie de elemente speciale HTML cum ar fi: coduri, etichete, taguri, marcaje, controale, ce semnifica acelasi lucru. Vom utiliza termenul de CONTROL.
Controlul trebuie plasat intre paranteze unghiulare <control1> pentru a se putea face diferenta dintre el si textul obisnuit.
<control 1>
</control 1> = locul in care controlul isi inceteaza actiunea "/"
I FORMATAREA UNUI DOCUMENT
utilizam controale pereche
<html> text de formatat </html>
Un text html este alcatuit din doua parti:
HEAD= antet
BODY=corp in care se plaseaza controalele si textul documentului
In antet putem preciza un titlu care va aparea pe bara de titlu a ferestrei utilizate.
EX: <head >
<title>
Catalog firme.
</title>
</head>
v alegerea unei culori pentru font: <body bgcolor=numeculoare>
v trecerea la un rand nou se face prin utilizarea controlului <br>
EX: Limbajul de marcare<br>
v marirea fontului literelor de pe un anumit rand si scrierea lui cu alta culoare <font size=6 color=red> Dimensiunile posibile pentru font sunt de la 1 la 7(valoarea maxima).
v Scrierea cu litere italice se face utilizand controlul <i>
v Pentru a scrie anumite informatii despre autori, adresa lor vom adauga controlul <adress>
EX: <adress>
Colegiul National..<br> Tudor Vianu Bucuresti
&axelsoft&marcel
</adress>
v Inchiderea unei pagini se face: </body>
</html>
II UTILIZAREA CULORILOR
Culorile pot fi referite:
1. prin nume
Exista 16 culori importante ce pot fi referite prin nume:
AQUA = albastru marin
GRAY = gri
NAVY = bleumarin
SILVER = argintiu
BLACK = negru
GREEN = verde
TEAL = verde inchis
BLUE = albastru
LIME = verde citron
PURPLE = violet
WHITE = alb
FUCHSIA = violet deschis
RED = rosu
YELLOW = galben
2. prin sistemul RGB - fiecare culoare are asociata o grupa de doua cifre hexa cu valori de la 00 la FF
EX: <font color=red> = <font color=ff0000>
<body bgcolor=aqua> = <body bgcolor=00ffff>
Exemple de alte culori: FF BB DD
A6 6A A6
D0 D0 D0
III CUM SA ARATE TEXTUL FORMATAT?
Sa fie scris cu o anumita culoare = se foloseste atributul text in controlul body. EX: <body text=blue>
Vreau sa merg la mare<br>
vara asta </body>
Sa fie scris pe un fundal de o anumita culoare (culoarea hartiei). Pentru a schimba culoarea de fundal se utilizeaza atributul: bgcolor = "nume-culoare" in controlul body.
Ex: <body text=white bgcolor=black>
Sa se foloseasca litere cu anumite caracteristici. Pentru a stabili dimensiunea unui caracter se foloseste controlul FONT cu atributul SIZE ce poate lua valori de la 1 la 7. Valoarea implicita este 3.
EX: <font size=2> sau <basefont=4>
pentru a stabili cum sa arate corpul literei se foloseste controlul FONT cu atributul FACE in care se precizeaza numele fontului ales.
<font face= "courier new">
EX: <font face=garamond, impact>
pentru a stabili stilul fontului se pot utiliza urmatoarele marcaje:
q marcajul de formatare italica inclinata <i>
q marcajul de formatare ingrosata <b>
q marcajul de subliniere <u>
q marcajul de corectura <strike>
pentru a desparti textul in paragrafe se utilizeaza controlul <p>. Se utilizeaza marcajul de titlu <hn> unde n ia valori de la 1 la 7 .
titlul unui paragraf poate fi plasat in centrul paginii (pe orizontala) utilizand controlul <center>.
EX: <center>paragraf1</center>
sa se separe textul prin linii orizontale = <hr>
EX: linie 1 <br>
<hr>
linie 2 <br>
O linie orizontala poate:
sa aiba dimensiune folosind atributul SIZE
sa nu fie trasata pe intreaga latime a ecranului folosind atributul WIDTH
sa fie aliniata in stanga, dreapta sau mijlocul ecranului folosind ALIGN
sa fie colorata folosind COLOR
sa nu aiba umbra utilizand NOSHADE (evident daca nu se utilizeaza atributul COLOR)
EX: <hr size=10 width=50% color=red align=center> (linie orizontala inalta de 10 pixeli, ocupand jumatate din latimea ecranului, colorata in rosu si aliniata pe orizontala in centru ecranului. )
IV UTILIZAREA LISTELOR
In HTML exista trei tipuri de liste:
Liste ordonate 1. a.
2. b.
3. c.
Liste neordonate (marcate):
Viena
Liste de definitii:
a
prima litera a alfabetului
b
a doua litera..
O lista ordonata se descrie cu ajutorul controlului <ol>... </ol> iar fiecare element din lista va fi precedat de controlul <li>.
EX: <ol>
<li> Andrei 1. Andrei
<li> Bogdan 2. Bogdan
<li> Corina 3. Corina
</ol>
Obs:
1.Se observa ca nu se foloseste eticheta de inchidere pentru articolele din lista </li>. El nu este obligatoriu deoarece inceputul articolului urmator implica sfarsitul articolului precedent. Totusi, daca se foloseste in lista foi de stil sau caracteristici Dymanic HTML eticheta de inchidere este necesara.
2. In cadrul corpului unei liste sunt permise si etichetele de intrerupere de rand, <p> si <br> pentru a controla mai bine infatisarea si formatarea sa.
Daca se doreste un alt tip de numerotare se foloseste atributul TYPE in eticheta order list (ol).
TYPE poate fi:
a. TYPE = "1" - numere standard (1, 2, 3 etc)
b. TYPE = "a" - litere mici (a, b, c, d etc)
c. TYPE = "A" - litere mari (A, B, C, D etc)
d. TYPE = "i" - cifre romane mici (i, ii, iii, )
e. TYPE = "I" - cifre romane mari (I, II, III, etc)
EX; <ol type="a">..</ol>
Daca se doreste numerotarea listei de la o anumita litera, nr etc se foloseste atributul START in eticheta order list (ol).
EX: <ol type="a" start="f"> numerotarea listei va incepe de la litera f, g, h, etc
O lista neordonata (cu marcatori) se descrie cu ajutorul controlului <ul>... </ul> iar fiecare element din lista va fi precedat de controlul <li>.
EX: <ul>
<li> Andrei Andrei
<li> Bogdan Bogdan
<li> Corina Corina
</ul>
Marcatorii pot fi de mai multe tipuri
TYPE:
disc (marcator standard care apare implicit)
o circle (cerc)
q square (patrat)
daca avem de reprodus in text caracterele speciale "<" si ">" atunci le inlocuim cu sirul < pentru "<" si > pentru ">"
EX: <p> = < p >
O lista de definitii presupune un termen de definit si o descriere a definitiei. Lista de definitii este cuprinsa intre contoalele <dl> si </dl>. Termenul definit va fi precedat de controlul <dt> iar descrierea definitiei de controlul <dd>.
EX: <dl>
<dt> marcajul B
<dd> afiseaza text ingrosat
<dt> marcajul U
<dd> afiseaza text subliniat
</dl>
Textul va fi transcris:
marcajul B
afiseaza text ingrosat
marcajul U
afiseaza text subliniat
1. Se poate insera in aceasta definitie si alte controale cum ar fi <font>, <size>, <face>, <color> in orice pozitie se doreste.
EX: <dl>
<dt> marcajul B
<dd> afiseaza text ingrosat
<dt> marcajul FONT
<dd> specifica atribute ale textului incadrat
<dt> marcajul U
<dd> afiseaza text subliniat
</dl>
Textul va fi transcris:
marcajul B
afiseaza text ingrosat
marcajul FONT
specifica atribute ale textului incadrat
marcajul U
afiseaza text subliniat
2.Se poate combina lista de definitie cu o lista neordonata, prima preluand marcajele celei de-a doua daca se inlocuiesc toate contoalele <dt> cu <li>.
EX: <dl>
<dt> marcajul B
<dd> afiseaza text ingrosat
<dt> marcajul U
<dd> afiseaza text subliniat
</dl>
devine <dl>
<li> marcajul B
<dd> afiseaza text ingrosat
<li> marcajul U
<dd> afiseaza text subliniat
</dl>
Textul va fi transcris:
marcajul B
afiseaza text ingrosat
marcajul U
afiseaza text subliniat
3.Unele elemente sa fie plasate mai in interior dar tot in lista respectiva. Se utilizeaza un nou control numit <menu> care incadreaza textul vrut cu contolul pereche </menu>.
EX: <dl>
<li> marcajul B
<dd> afiseaza text ingrosat
<menu>
<li> marcajul FONT
<dd> specifica atribute ale textului incadrat
<li> marcajul U
<dd> afiseaza text subliniat
</menu>
</dl>
Textul va fi transcris:
marcajul B
afiseaza text ingrosat
o marcajul FONT
specifica atribute ale textului incadrat
o marcajul U
afiseaza text subliniat
MARCAJE SPECIALE
marcajul BLOCKUOTE permite identarea (inserare mai in interiorul paginii) textului. Se foloseste mai ales la editarea poeziilor.
EX: <body>
<blockquote> De treci codrii de .. <br>
DE...<br>
</blockquote>
</body>
marcajul PRE care considera textul preformatat si-l va plasa in document asa cum a fost editat.
Ex: <pre>
Nmjl;...
</pre>
marcajul TT considera textul scris cu font monospatiu = fiecare litera ocupa aceasi dimensiune in latime chiar daca litera este mai ingusta.
Ex: <tt>
Mkkklll;;;;;lllll<br>
</tt>
Un comentariu se poate face doar in interiorul constructiei <!--urmeaza un text neformatat--> si acesta poate fi vizualizat doar in textul sura nu si in doc formatat.
V TABELE
Tabel: <table>...</table>
Linie tabel <tr>.. </tr> _____________
O celula=verde: <td bgcolor="green">
Un rand = galben: <tr bgcolor="yellow">
Continutul celulei: <td> luni </td>
Titlu tabel=legenda <caption> ORAR </caption>
Legenda poate fi aliniata: <caption align="top/bottom">
Spatiul dintre doua celule: <table border="1" cellspacing="6">
Fundalul tabelului=albastru: <table bgcolor="aqua">
Fundalul tabelului = culoare: <tabel bgcolor="red">
Marginea cu umbra se obtine: <border="8">
Continutul celulei antet=ingrosat: <th> luni </th>
Pentru a scrie cu indice inf X1=2: <td> X <sub> 1 </sub> =2 </td>
Textul din celula extinsa poate fi: <tr valign="bottom / top / middle">
Alinierea pe orizontala a textului: <tr align="center / left / right">
Marginea tabelului=1, 2, 3(marimi): <table border="1">
Extinderea cel pe mai multe randuri:
Pentru a scrie cu indice sup 7 - 1340 <td> 7 - 13 <sup> 40 </sup> </td>
Cantitatea de spatiu dintre celule (10): <table cellspacing="10">
Sp dintre textul celulei si marginea ei : <table cellpadding="5">
Latimea tabelului din latimea ferestrei: <tabel width="50%">
Fundal celula = imagine: <td background ='TOACA.JPG.gif'width ='100'> </td>
Fundal tabel = imagine: <table background="TOACA.JPG" width="100" height="20">
Modificari in controlul TABLE
modificarea culorii chenarului: <tabel bordercolor=blue> (astfel se pierde efectul de umbra din jurul chenarului)
modificarea culorii chenarului atat in partea umbrita: <tabel bordercolordark=blue>
modificarea culorii chenarului atat in partea fara umbra: <tabel bordercolorlight=blue>
modificarea liniilor exterioare = FRAME <table frame=void>
modificarea liniilor interioare = RULES <table rules=all>
Valori pentru atributul FRAME
Void = elimina toate muchiile exterioare
Above = afiseaza numai muchia din partea superioara
Below = afiseaza numai muchia din partea inferioara
Hsides = afiseaza cate o muchie in partea superioara si inferioara
Lhs = afiseaza numai muchia din partea stanga
Rhs = afiseaza numai muchia din partea dreapta
Vsides = afiseaza cate o muchie in stanga si in dreapta
Box = afiseaza cate o muchie pe toate laturile
Valori pentru atributul RULES
None = elimina toate muchiile interioare
Rows = afiseaza toate muchiile orizontale
Cols = afiseaza toate muchiile verticale
All = afiseaza toate muchiile interioare
LEGATURI
O hiperlegatura se realizeaza cu ajutorul elementului ANCHOR. "a-ul" din eticheta reprezinta cuvantul anchor (ancora). Atributul href (referinta hipertext) este necesar, fara el hiperlegatura nu exista.
O legatura catre o alta pagina arata astfel: <a href='Tabel1.html'>Tabel</a>.
O legatura pentru e-mail afiseaza o fereastra pe care utilizatorul o poate folosi pentru a trimite un mesaj proprietarului site-ului. Ea are forma urmatoare:
<a href='mailto:gordanandreea@yahoo.com'>Trimite e-mail</a>.
O imagine poate deveni si ea o legatura:
<a href="URL"><img src="fisierul.gif">text daca vrei</a>
IMAGINI
O imagine are forma urmatoare:
<img src='TOACA.JPG.gif' WIDTH='25%' HEIGHT='20%'>
IMPORTANT!
De multe ori utilizatorii cu conexiuni slabe de internet percep imaginea ca o pictograma si nu poza propriu-zisa. Exista totusi o solutie: se poate da o decscriere a imaginii. Pentru aceasta in eticheta <IMG> se introduce atributul suplimentar ALT. El se poate introduce pentru a furniza text alternativ, care apare in locul imaginii. Deci atunci cand poza nu poate aparea cititorul nu va mai vedea un x pe ecran ci textul alternativ. Formatul este: <IMG SRC="numefisier" ALT="text alternativ">
Alinierea textului si a imaginilor:
<img src="numefisier" ALIGN="VALUE">
Value poate fi:
TOP - textul este aliniat cu partea superioara a imaginii
MIDDLE - textul este aliniat la mijlocul imaginii
BOTTOM - textul este aliniat cu partea inferioara a imaginii
LEFT - imaginea apare in partea stanga a ferestrei browser-ului, iar textul incadreaza imaginea in dreapta
RIGHT - imaginea apare in partea dreapta a ferestrei browser-ului, iar textul incadreaza imaginea in stanga.
Atributele hspace si vspace - se folosesc atunci cand se doreste ca in jurul imaginii sa apara spatii albe. Atributele hspace si vspace fixeaza marimea acestor spatii albe in pixelii. Sintaxa este:
<IMG src="URL" id=pixels vspace=pixels>
SUNETE IN PAGINA WEB
Formate audio standard:
AU. - format obisnuit in lumea sunetelor pe web; suportat de Netscape Navigator si Internet Explorer;
Wav. - formatul standard folosit in Windows;
MP3 - format utilizat in muzica digitala. Se foloseste cu Windows Media Player;
RA - Real Audio este folosit pt "fluidizarea" formatelor audio de mari dimensiuni. Browser-ul ia prima parte a fisierului si incepe sa-l ruleze, in timp ce restul fisierului este descarcat in fundal;
MIDI - Musical Instrument Digital Interface - folosit pentru reprezentarea muzicii electronice create cu un sintetizator MIDI.
Introducerea intr-un fisier a unei melodii:
<BGSOUND SRC="melodie.ext" LOOP="valoare">
Extensia poate fi: .AU, .WAV sau .MIDI. Valoarea poate fi: 1, 2, 3, 4, .etc. sau INFINITE. Ea exprima nr de cate ori trebuie repetata melodia respectiva.
EXEMPLU DE UN FISIER CU MELODIE: Musica.html
<HTML>
<HEAD>
<TITLE> a WAV example</TITLE>
</HEAD>
<BODY>
CE MAI FACI
<BGSOUND SRC='Valoarea.wav' LOOP='1'>
</body>
</html>
CREAREA UNUI TEXT DERULANT = MARQUEE
Se foloseste eticheta pt animare: <marquee> text </marquee>
In eticheta MARQUEE se mai folosesc si alte atribute cum ar fi:
ALIGN - determina modul in care textul inconjurator este aliniat pe verticala fata de textul derulant. Se foloseste doar TOP sau BOTTOM.
BEHAVIOR (tip) - determina comp. textului derulant. Poate avea trei valori:
1. scroll (deplasare) = se pierde in stanga ecranului si reapare in dreapta
2. slide (alunecare) = textul se deplaseaza si se opreste cand ajunge in partea opusa
3.alternate(alternativ) = textul "sare" inainte si inapoi
BGCOLOR="culoare" - seteaza culoarea fundalului pentru textul derulant.
DIRECTION (sens) - spune browser-ului in ce parte se deplaseaza textul.
Directia poate fi: Left de la dreapta la stanga
Right de la stanga la dreapta
Down de sus in jos
Up de jos in sus
LOOP - (de cate ori) - de cate ori se deplaseaza textul. INFINITE = -1
SCROLLDELAY "Timp" - intervalul dintre bucle in milisecunde
SCROLLAMOUNT (Pixeli) - nr de pixeli cu care se deplaseaza textul la fiecare iterare. Cu cat valoarea este mai mare cu atat textul se deplaseaza mai repede.
WIDTH = latimea textului in pixeli sau ca procent din ecran
HEIGHT = inaltimea textului in pixeli sau ca procent din ecran
EXEMPLU 1:
<HTML>
<HEAD>
<TITLE> Marquee Malarkey</TITLE>
</HEAD>
<BODY>
Welcome Web <MARQUEE ALIGN='BOTTOM' BGCOLOR='SILVER' WIDTH='50' SCROLLAMONT='4'>
maker..mastermeister
spinnerweaverwelder.
</MARQUEE>!
</BODY>
</HTML>
CREAREA DE FORMULARE
Se introduce intre etichetele <FORM>...</FORM>. In eticheta form se introduc mai multe atribute:
ACTION="URL" - url este adresa unde se trimit datele
METHOD="Metoda" - spune cum sa trimita datele din formular la adresa url specificata prin atributul ACTION. Exista doua posibilitati: POST SI GET.
BUTON DE VALIDARE - <input type="sumit" value="Nume Buton">
BUTON CU IMAGINE - <input type="image" src="poza.gif">
BUTON DE ANULARE - <input type="reset" value="Nume Buton">
CASETA TEXT - <input type="text" name="Nume Camp(Prenume/Adresa)">
MARIMEA CASETEI - se foloseste atributul SIZE="40"
EX: <input type="text" name="Adresa" size="40">
LUNGIMEA TEXTULUI <input type="text" name="Nume" maxlenght="10">
Exemplu:Buton.html
<html>
<head>
<title> The Box Example</title>
</head>
<body>
<H3>Please tell me about yourself:</H3>
<form action='https://www.mcfedries.com/scripts/formtest.asp' method='post'>
First Name:<input type='text' name='First' size="40" maxlenght="10">
<p>
Last Name: <input type='text' name='Last'>
<p>
Nick Name: <input type='text' name='Nick'>
<p>
<input type='submit' value='Just Do It!'>
<input type='reset' value='Just reset it!'>
</form>
</body>
</html>
Daca se doreste mai mult spatiu pentru exprimarea ideilor/opiniilor se poate folosi, pentru un rezultat mai bun, o zona de text (text area) decat o caseta de text. Avantaj: zonele de text pot afisa doua sau mai multe randuri in acelasi timp. WRAP este optional si spune browser-ului sa incadreze textul pe randul urmator de cate ori textul introdus ajunge la marginea din dreapta a zonei de text.
<TEXTAREA NAME="Nume Camp" ROWS="Total randuri" COLS="Total coloane" WRAP>
</TEXTAREA>
CASETA DE VALIDARE - <input type="checkbox" name="Nume Camp">
Pentru a afisa o caseta de validare bifata in mod implicit se foloseste CHECKED="OM"
BUTOANELE RADIO - <input type="radio" name="Nume Camp" value="Val">
Nume Camp este numele campului dar in acest caz el trebuie sa fie acelasi nume pentru toate butoanele radio care vor fi grupate laolalta. Val - text unic - textul care apare in dreptul butonului si va fi sau nu bifat de utilizator. Se poate adauga si CHECKED la unul dintre butoane pentru a aparea bifat in mod implicit un anume buton.
Ex cum apare un astfel de formular.
OBS. Pentru intrebarea 1 la Nume Camp se foloseste Salariu la toate raspunsurile posibile pentru ca numai asa cititorul poate alege o singura categorie si nu mai multe. Pentru intrebarea 2 la Nume Camp se foloseste Varsta si functioneaza dupa acelasi principiu.
Exemplu de formular: D:ANDREEAHTMLFormular1.html
1. Care dintre urmatoarele categorii descrie cel mai bine nivelul salariului dvs?
q Poverty
q Living
q Comfy
q DINK
2.In ce categorie de varsta va incadrati?
q 18-25 ani
q 26-40 ani
q 41-60 ani
q peste 61
OBS. Pentru optiuni multimple (mai multe de 5-6) este indicat sa folosesti LISTE DE SELECTARE. Sunt putin mai complicate dar nu cu mult fata decat celelalte etichete de formular. Formatul este:
<SELECT NAME="Nume Camp" SIZE="Elemente">
<OPTION>Textul pentru primul element</OPTION>
<OPTION>Textul pentru al doilea element</OPTION>
<OPTION>Si asa mai departe...n elemente</OPTION>
</SELECT>
JOCUL CU CADRELE
Construirea unei pagini de continut necesita doua tipuri de etichete pentru cadre:
<FRAMESET> si <FRAME>. Se incepe cu eticheta <FRAMESET> si, intre aceasta si eticheta de final </FRAMESET> , SE ADAUGA O ETICHETa <FRAME> pentru fiecare cadru pe care vrei sa-l creezi. Cand se construiesc cadre nu se foloseste eticheta BODY.
Exemplu pt o pagina cu trei cadre=frame:
<HTML>
<HEAD>
<TITLE>.</TITLE>
</HEAD>
<FRAMESET>
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Cadre in cadre - imbricarea cadrelor
Se foloseste eticheta <frameset> in interiorul unui cadru deja existent pt a-l imparti pe acesta la randul lui in alte doua cadre. Cadrul I ramane la fel iar cel de-al doilea se imparte in doua la randul sau.
Exemplu.
<html>
<head>
<title>Vertical Frames With Content</title>
</head>
<frameset rows='40%,60%'>
<frame src='Fonturi.html' name='upper'> - cadrul 1
<frameset cols='50%,50%' > - cadrul 2
<frame src='Link.html' name='lower'> - subcadrul 1
<frame src='Fonturi.html' name='right'> - subcadrul 2
</frameset>
</frameset>
</html>
Cadre asezate pe orizontala
Se introduce atributul ROW in interiorul etichetei <frameset> unde Marime este nr sau procent care spune ce parte din ecran se aloca fiecarui cadru. Daca se doreste ca primul ecran sa ocupe o anumita marime (ex 100pixeli / 20%), iar al doilea cadru sa ocupe locul ramas in fereastra se foloseste un asterix (*) pentru a doua valoare.
EX:<frameset rows="100,*">
EX: <frameset rows="Marime1, Marime2, .">
Cadru.html - doua cadre unu de 25% iar celalalt de 75% din pagina
<html>
<head>
<title>Horizontal Frames</title>
</head>
<frameset rows='25%,75%'>
<frame>
<frame>
</frameset>
</html>
Cadre asezate pe verticala
Se introduce atributul COLS in interiorul etichetei <frameset> unde Marime este nr sau procent care spune ce parte din ecran se aloca fiecarui cadru.
Exemplu care imparte fereastra in trei cadre de 20%, 60% si 20%.
<html>
<head>
<title>Vertical Frames</title>
</head>
<frameset cols='20%,60%,20%'>
<frame>
<frame>
<frame>
</frameset>
</html>
Umplerea cadrelor cu pagini de continut
Trebuie specificata cate o pagina separata de continut care sa fie afisata in fiecare cadru. Acest lucru se realizeaza adaugand cu atributul SRC="url (pagina care se incarca in cadrul respectiv)" in fiecare dintre etichetele <frame>.
<html>
<head>
<title>Vertical Frames With Content</title>
</head>
<frameset cols='20%,60%,20%'>
<frame src="Fonturi.html">
<frame src="Link.html">
<frame src="Tabel2.html">
</frameset>
</html>
OBS. Daca cadrul 2 de ex are drept continut o pagina care contine legaturi catre alte pagini cand se face click pe o legatura se incarca pagina respectiva numai in cadrul 2 nu si in celelalte cadre din pagina. Pentru a fi mai siguri de acest lucru se asociaza un nume cadrului NUME="ceva" iar legatura se face prin atribuirea atributului TARGET in eticheta <a href>.
<html>
<head>
<title>Vertical Frames With Content</title>
</head>
<frameset cols='20%,60%,20%'>
<frame src="Fonturi.html" NAME="left">
<frame src="Link.html" NAME="center">
<frame src="Tabel2.html" NAME="right">
</frameset>
</html>
<a href="Pagina.3" target="left">Legatura</a>
Sfat: nu este bine ca paginile de legatura sa fie afisate doar in interiorul cadrului specificat (pe care il vrem). Cel mai bine este fie sa se afiseze pagina in toata fereastra (TARGET="_top") fie intr-o fereastra de browser separata (TARGET="_blank"). Mai exista si TARGET="_self" - adica incarca noua pagina in acelasi cadru care contine legatura.
Ex: <a href="Pagina.3" target="_blank">Legatura</a>
<a href="Pagina.3" target="_top">Legatura</a>
Ce se intampla cand ai un cadru care contine foarte multe legaturi? Nu se mai adauga target la fiecare legatura pentru ca este o munca prea istovitoare. Se seteaza o TINTa IMPLICITa astfel: intre etichetele <head> </head> se introduce <BASE TARGET="Nume cadru">
EX: <head> <base target="center"></head>
ORNAMENTE PENTRU CADRE
v NORESIZE - fara redimensionare = impiedica pe navigatori sa modifice marimea cadrului prin tragerea marginii sale cu mouse-ul.
v SCROLLING - derulare = determina daca o bara de defilare apare sau nu intr-un cadru. Se foloseste scrolling="yes" / "no".
v BORDER - margine = border="0" nu se afiseaza marginea dintre cadre;In Internet Explorer se foloseste <frameborder="0">
FOILE DE STILURI
Metoda 1 - eticheta <STYLE>
Se implementeaza o eticheta <style> si una de final </style> in interiorul documentului si apoi se insereaza toate definitiile de stil in interiorul lor. Cel mai bun loc pentru plasarea acestor lucruri este antetul paginii <head> . </head>. In exemplu de mai jos intre etichetele <style> se specifica pentru ce etichete se va folosi fontul si culoarea aleasa si anume pentru H1 - deci unde va intalni H1 va scrie cu acele atribute.
Exemplu:Style1.html
<html>
<head>
<title> Style Sheet</title>
<style> H1 </style>
</head>
<body>
<H1>Paragraful va aparea de fontul 34 si de culoare rosie</H1>
</body>
</html>
TIPURI DE STILURI
Exista cateva valori predefinite pentru marime (font-size) pe care le poti folosi: xx-small, x-small, small, medium, large si x-large.
In locul atributului <B></B> se va folosi stilul font-weight: valoare. Unde valoare poate fi:
o grosime predefinita: normal (normal), bold (bolduit), bolder (mai ingrosat) sau lighter (mai subtire).
o anumita grosime: 100, 200., 400 (normal), 500, 600, 700 (bold), 800 sau 900
In locul atributului <I>.</I> se va folosi stilul font-style: italic.
Unele fonturi au un stil oblic care arata ca un fel de italic, dar in realitate literele sunt doar aplecate intr-o parte. font-style: oblique.
Pentru a seta alinierea unei sectiuni de text , se foloseste stilul text-align: aliniere
Aliniere poate fi: left, center, right, justify.
Stiluri de decorare a textului - text-decoration: valoare. Valoarea poate fi:
line-through (trece o linie prin mijlocul textului), none (fara decorare), overline (apare o linie deasupra textului), underline (apare o linie sub text).
Stilul care transforma textul in minuscul sau majuscul: text-transform: valoare.
Valoarea poate fi:
-capitalize = converteste prima litera a fiecarui cuvant in majuscula;
-lowercase = converteste toate literele in minuscule;
-none = lasa textul asa cum este;
-uppercase = converteste toate literele in majuscule.
In locul atributului COLOR se foloseste stilul color.
<span style="color:LemonChiffon"> cuvant sau fraza</span>
Aplicarea unei culori ca fundal unei sectiuni din pagina sau unor cuvinte individuale: background-color: blue
Aplicarea unei imagini ca fundal unei sectiuni din pagina sau unor cuvinte individuale:
Exemplu: Style3.html
<html>
<head>
<title> Style Sheet Backgrounds </title>
</head>
<body>
<div style='background-color:black; color: white'>
The background style is great for setting off entire sections<br>
of text using a different color. For exemple, this section uses<br>
a black background with white text.
</div><br><br>
<div style='background-color: skyblue; color: navy'>
On the other hand, this section achives a slightly different effect by using
a pleasant Sky Blue background with Navy text.
</div>
<p>You can also use the background style to
<span style='background-color: yellow'> highlight individual words</span>
<p>
<div style='background-image:url(TOACA.JPG.gif); font-size: 16pt'>
<b> One of the most intersting ways to use the background style is to
specify a background image. The browser will tile the image so that
it fills the entire section, like this.</b>
</div>
</body>
</html>
Stilul background-repeat: val unde val= repeat (imaginea de fundal este repetata pt a acoperi intreaga fereastra a browser-ului); repeat-x (repeta imaginea numai pe orizontala); repeat-y (repeta imaginea numai pe verticala); no-repeat (nu repeta imaginea de fundal)
Metoda 2: realizarea unei legaturi catre o foaie de stiluri externa
Se creaza mai intai foaia de stil externa = fisier separat care contine definitiile de stil. Se creaza un fisier de text, se adauga in el definitiile de stil si apoi se salveaza fisierul in acelasi director precum fisierele HTML folosindu-se extensia .css = cascading style sheet. Pentru fiecare pagina in care doresti sa apara stilurile respective, adauga o eticheta LINK in interiorul antetului paginii.
<LINK REL="stylesheet" TYPE="text/css" HREF="numefisier.css">
Exemplu:
Mai intai se creeaza foaia de stil externa cu numele: StyleSheet.css
H1
TT
Apoi se creaza fisierul Style2.html
<html>
<head>
<LINK REL='stylesheet' TYPE='text/css' HREF='StyleSheet.css'>
</head>
<body>
<H1>Acest text va aparea rosu.</H1>
<TT>Acest text va aparea albastru.</TT>
</body>
</html>
Aplicarea stilului pentru o sectiune
Se foloseste eticheta <div>.</div> incluzand in interiorul ei atributul STYLE si astfel se aplica de fapt un stil interior intregului text care se afla in interiorul sectiunii div.
Exemplu:
<div style="font-size: 12pt">
<H1>Acesta este un titlu de 12pt</H1>
Aceasta propozitie va aparea cu un font de 12pt.
<H2>La fel se va intampla si cu acest titlu</H2>
</div>
Aplicarea stilului pentru un cuvant sau o fraza
Se inconjoara cuvantul sau fraza cu etichetele <SPAN> si </SPAN> si apoi se inghesuie atributul STYLE in interiorul etichetei.
Exemplu:
<SPAN STYLE="font-size: 20pt">cuvant/fraza</SPAN>
Lucrul cu clasele de stiluri
Mai intai se creeaza clasa in interiorul etichetei <STYLE>
Sintaxa clase: NumeClasa
Exemplu de clase: TextTitlu
TextSubtitlu
Exemplu de fisier:
<html>
<head>
<title>Style Classes</title>
</head>
<style type="text/css">
TextTitlu
TextSubtitlu
</style>
<body>
<div class="TextTitlu"> Acesta este titlul documentului</div>
<div class="TextSubtitlu"> Acesta este subtitlul documentului</div>
</body>
</html>
REVIZUIRE HTML CU EXEMPLE
1.Scrierea cu paragrafe - se foloseste etichetele <p>text<p/> ori de cate ori se vrea a se scrie un paragra.
2. Text preformatat <pre> </pre> - comunica browserului sa prezinte textul exact cum a fost introdus.
3.Evidentieri simple si intarite: se pot folosi etichetele fizice <B> text </B> si <I> text </I> dar mai nou au aparut ale etichete logice. Ele au acelasi efect dar se recomanda folosirea lor pentru a boldui <STRONG> text</STRONG> si pentru a scrie cu italice <EM> text </EM>
4. Scrierea unui citat - se foloseste sintaxa <CITE> Source </CITE> Source este numele / textul citatului. Redactarea citatului se face automat de catre browser in caractere italice.
5.Definirea termenilor: <DFN> si <ACRONYM> - Termenii si definitiile se pot reprezenta prin folosirea diferitelor tipuri de liste. Dar mai exista o varianta care este mai noua. Termenul definitiei se poate reprezenta cu ajutorul etichetei <DFN> TERMENUL </DNF>. Obs: este folosita la identificarea cuvintelor in cadrul unui paragraf care include definitia in aceasi propozitie. Redarea termenului se va face cu italice.
Eticheta <ACRONYM> este folosita pentru a evidentia amestecurile de litere si numere cum ar fi WWW W3C, ASCII, IRS etc. SE utilizeaza astfel:
<ACRONYM> ALL THE LETTERS </ACRONYM>
6.Informatia de adresa - eticheta <address> adresa care poate sa aiba si un Link </address>
Exemplu:
<address><a href="mailto:gordanandreea@yahoo.com">Gordan Andreea </a><br>
Trivale, Bl 42, scE, ap 21, etj 3<br>
Pitesti, Romania
</address>
Va aparea:
Gordan Andreea
Trivale, Bl 42, scE, ap 21, etj 3
Pitesti, Romania
7. Lucrul cu citate lungi si scurte -
a.pentru citate mai scurte este bine a se folosi ghilimelele sau eticheta <q>citat</q> si astfel textul ramane in acelasi rand cu restul continutului. Textul / citatul este afisat normal si nu italic sau bolduit.
b. daca marimea textului depaseste cateva propozitii, atunci este mai usor pentru cititor sa observe citatul daca acesta este separat de restul textului. Acest lucru se realizeaza cu etichetele <blockquote>.text.</blockquote>.
8.Intreruperea unei liste pentru a introduce un text explicativ - o lista cu 10 repere se afiseaza dar dupa al 5-lea reper se vrea a se introduce un text explicativ = paragraf iar apoi lista sa continue numerotarea cu 6,7,8,9,10. Acest lucru se realizeaza astfel: upa primele 5 repere se inchide lista. Apoi se introduce <p>paragraful vrut</p> apoi se deschide alta lista <ol> dar aici se adauga atributul start - de la ce nr pleaca lista in continuare si anume nr=6. Deci <ol start=6>.
|
