1.1. Prezentarea Textului in Pagina Web - Pagina 31: TD (Table Data) "

1.1.
Prezentarea textului in pagina web - pagina 31 (I)

Informaia de tip text coninut intr-o pagina Web poate fi structurat n diverse moduri. Elementele care in de
aspectul textului n pagin paragrafe, subtitluri, alinierea, etc sunt caracteristici de baz ale unui document
HTML
1.2. <html>
<head>
<title>Camp de tip text</title>
</head>
<body>
<h4>Camp de editare</h4>
<form action=mailto:gdgi@geom.desc.pub.ro method="post">
Numele:
<input type="text" name="numele" value="Numele si prenumele">
</form>
</body>
</html>
2.1. Tabele n pagina WEB pagina 44 (I)
Folosirea tabelelor ntr-o pagina web permite structurarea informaiei pe diverse criterii i prezentarea eficient
a acesteia. Tabelele permit organizarea coninutului unei pagini WEB ntr-o reea rectangular de seciuni,
fiecare seciune avnd propriile opiuni privind culoarea fondului, culoarea i alinierea textului. Tabelele
uureaz machetarea paginii, permind plasarea textului pe coloane, setarea marginilor paginii, etc. Un tabel
este definit prin elementul table, fiind format din linii, definite ca elemente tr (table row) i celule, definite ca
td (table data)
2.2.<html>
<head>
<title>Elementul Buton</title>
</head>
<body>
<h4>Elementul Buton</h4>
Un nou buton:
<button name=butonul2>Apasa aici</button><br>
Numele:<br>
<input type="text" name="numele"><br>
Prenumele:<br>
<input type="text" name="prenumele"><br>
<button name=butonul3 type="submit">Transmite</button>
</form>
</body>
</html>
3.1. Crearea hiperlegturilor pagina 54 (I)
Pentru a naviga de la o pagin la alta, sau pentru a efectua salturi controlate n cadrul aceleai pagini Web, se
folosesc hiperlegturile (hyperlink). De asemenea, prin intermediul hiperlegturilor, se poate activa un fiier
executabil ce poate genera o pagin HTML sau un anumit coninut media (animaie, imagini, secvene sonore).
Construcia unei hiperlegturi se obine cu ajutorul elementului a (acnhor) care aparine seciunii body a unui
document HTML. Elementul a are mai multe atribute care permit definirea complet a hiperlegturii. Din
acestea, cele mai importante atribute sunt href (definete destinaia hiperlegturii), id sau name (prin id sau
name, elementului a i se asociaz un nume prin care acesta poate fi folosit, la rndul su, ca destinaie a unei
alte hiperlegturi) i link (permite stabilirea unei relaii ntre documentul curent i alt document; acest element
este plasat n seciune head a documentului HTML)
3.2. <html>
<head>
<title>Buton executabil</title>
</head>
<body>
<h4>Buton executabil</h4>
<form action="mailto:gdgi@geom.desc.pub.ro" method="post">

<b>Acesta este un buton</b>
<input type="button" name="butonul1" value="Apasa aici" onClick=alert(Asta este tot ce poti obtine
deocamdata)><br>
</form>
</body>
</html>
4.1. Crearea de imagini n pagina web pagina 62 (I)
Exist dou modaliti principale de memorare a imaginii:
- imaginea de tip bitmap (tipuri de fiiere bitmap JEEP, JPEG, PNG, PCX, TIFF, BMP, DIB) n care
formatul de memorare este la nivel de bit
- imaginea de tip vectorial obinut prin compunerea unor primitive grafice, la care formatul de memorare este
de tip vectorial.
Inserarea unei imagini ntr-un document HTML se obine folosind elementul img. Identitatea imaginii inserate
se obine prin atributul src (source). Un atribut al elementului img, folosit n mod uzual este alt (alternate) care
determin asocierea unui text alternativ unei imagini. Atributele lang (language) i dir (direction) ale
elementului img pot indica browserului limba n care este scris textul alternativ i direcia acestuia. Valoarea
atributului dir poate fi ltr (lef-to-right) sau rtl (right-to left). Mrimea unei imagini poate fi modificat prin
intermediu atributelor width si height. Alinierea imaginii n cadrul unei linii de text se realizeaz cu atributul
align, ce are urmtoarele valori: top, middle, bottom. Alinierea unui text mai amplu n raport cu imaginea se
obine prin alte dou valori ale atributului align: left i right. Distanele pe orizontal i respectiv pe vertical
ale elementului img se realizeaz cu atributele hspace i vspace.
4.2. <html>
<head>
<title>Casete de Validare</title>
</head>
<body>
<h4>Casete de Validare</h4>
<b>Alegeti cursul</b><br>
<input type="checkbox" name="autocad" value="autocad">AUTOCAD<br>
<input type="checkbox" name="solidedge" value="solidedge">SOLIDEDGE<br>
<input type="checkbox" name="catia" value="catia">CATIA<br>
<input type="reset" value="Sterge">
<input type="submit" value="Transmite">
</form>
</body>
</html>
5.1. Imagini de tip hart pagina74 (I)
O caracteristic special a paginilor Web const n folosirea imaginilor de tip hart (Image Map), care permit ca
anumite zone active ale unei imagini s fie definite ca hiperlegturi ctre diferite adrese Web. Imaginile hart se
creeaz direct pe calculatorul client sau pe server.
Pentru realizarea i folosirea imaginii hart direct pe calculatorul client, se parcurg urmtoarele etape:
- construcia imaginii
- construcia hrii definirea hrii se face n interiorul unui bloc special, introdus prin elementul map
- divizarea hrii se realizeaz prin elementul area
- includerea imaginii n codul HTML se folosete elementul img, cruia i se asociaz atributele: src i
usermap
Pentru construcia imaginii hart pe server se procedeaz astfel:
- construcia imaginii
- construcia hrii descrierea zonei active i relaiile acestora cu diverse URL se stocheaz ntr-un fiier
special cu extensia .map, ca conine linii de comand de forma:
DEFAULT /index.htm
http://www.zona1.pub.ro 3,3,25,15
RECT
POLY
http://zona2.pub.ro 4,5,20,10,48,20,45,15,35,20
CIRCLE
http://zona3.pub.ro 50,30,10
- funcionarea imaginii hart se folosete atributul ismap (indic browserului c se afl n zona unei imagini
hart) al elementului img
Zonele active ale hrii se definesc, prin elementul area, care are ca atribute:
- shape - ce determin forma zonei active i poate lua valorile: rect (zone de form dreptunghiular), circle
(zone de form circular), poly(zone de form poligonal), default (pentru restul imaginii care nu este acoperit
de zonele de tipul precizat anterior)
- href primete ca valoare locaia URL a resursei accesate de hiperlegtura zonei active respective
- nohref definete zona care nu este activ din cadrul unei imagini hart
- accesskey aosciaz o anumit tast zonei active
- title determin afiarea n pagina Web, n cadrul unei etichete, a unui text descriptiv pentru hiperlegtura
zonei active
- target primete valoarea numelui unei ferestre a browserului n care va fi afiat documentul apelat de
hiperlegtura zonei respective
- coords determin coordonatele zonei
5.2. <html>
<head>
<title>Butoane Radio</title>
</head>
<body>
<h4> Butoane Radio</h4>
<b>Alegeti specializarea:</b><br>
<input type="radio" name="specializare" value="cad">CAD<br>
<input type="radio" name="specializare" value="design">DESIGN<br>
</form>
</body>
</html>
6.1. Ferestre n pagina Web pagina 79 (I)
Folosirea freme-urilor permite divizarea ferestrei browserului n mai multe subferestre, n care pot fi ncrcate
documente HTML diferite. Aceast tehnic de concepere a paginilor HTML este realizat cu ajutorul
elementelor: frameset, frame, iframe, noframe.
Definirea ferestrelor se face din aproape n aproape, prin mprirea ferestrei iniiale n coloane i linii, folosind
atributele cols i rows ale elementului frameset.
Atributul principal i obligatoriu al elementului frame este src care are ca valoare URL-ul documentului
HTML ce va fi ncrcat n acea fereastr.
Atribute ale elementului frame:
1. Chenarul ferestrelor
- culoarea chenarului bordercolor
- dimensiunea chenarului cu ajutorul atributului border al elementului frameset
- chenare invizibile se pot obine prin atributul frameborder setat la valorea no sau 0
2. Bara de defilare
- atributul scrolling pentru adugarea unei ferestre o bar de defilare, care permite navigarea n interiorul
documentului, valorile posibile ale acestui atribut sunt yes (barele de defilare sunt adugate ntotdeauna),
no (barele de definare nu sunt afiate) i auto (barele de defilare sunt vizibile atunci cnd este necesar)
- atributul noresize anlarea redimensionrii ferestrei
- distanele de la marginile unei ferestre: marginheight (distana vertical), marginwidth (distana orizontal)
Elementul iframe permite inserarea unor ferestre inline difer de cele normale prin aceea c ele pot fi
manipulate independent n interiorul unei pagini Web.
Atributele elementului iframe pe lng cele ale elementului frame: width (limea ferestrei), height (nlimea
ferestrei), align (alinierea ferestrei n cadrul ferestrei browserului), hspace (distana de la fereastr la marginile
laterale ale ferestrei browserului), vspace (distana de la fereastr la marginile superioar i inferioar ale
ferestrei browserului)
6.2. <html>
<head>
<title>Camp file</title>
</head>
<body>
<h4> Camp file</h4>
<b>Alegeti fisierul:</b><br>
<input type=file namefisier enctype=multipart/form-data accept=text/plain><hr>
</form>
</body>
</html>
7.1. Formulare n pagina Web 84 (I)
Prin includerea unui formular ntr-o pagin Web se poate solicita utilizatorului diverse rspunsuri, sub form de
text sau prin alegerea unor opiuni. Un formular poate conine butoane, casete de selecie, liste derulante,
cmpuri de editare. ntr-o pagin Web pot fi create oricnd formulare. Formularul este definit prin elementul
form. Atributele name sau id asociate elementului form permite recunoaterea acestuia de ctre diverse
programe de prelucrare. Elementul form poate avea un atribut target care primete ca valoare numele unei
ferestre a browserului n care va fi ncrcat rspunsul trimis de serverul Web la expedierea formularului.
Procesarea informaiilor transmise printr-un formular este determinat de atributul action (valoarea acestui
atribut poate fi URL-ul unui script aflat pe un server Web sau o adres de e-mail la care sunt expediate datele
formularului) al elementului form. Metoda folosit de browser pentru expedierea datelor formularului este
definit de atributul method, care are dou valori posibile: get (valoarea implicit) datele formularului sunt
adugate la URL-ul indicat n atributul action (nu sunt permise cantiti de date mai mari de 1KO); post
datele sunt expediate separat. (sunt permise cantiti mari de date)
7.2. <html>
<head>
<title>Lista de selectie</title>
</head>
<body>
<h4>Lista de selectie</h4>
<b>Categoria de varsta:</b><br>
<select name=varsta size=3>
<option value=A selected>15-25
<option calue=B selected>25-35
<option calue=C>35-45
<option calue=D>45-55
<option calue=E>55-65
</select><hr>
</form>
</body>
</html>
8.1. Meta-informaii n pagina Web pagina 96 (I)
Meta informaiile sunt informaiile despre coninutul documentului HTML: cuvinte cheie, informaii despre
autor, o descriere general a documentului, categoriile, tag-urile. Aceste informaii permit indexarea paginilor
Web i nregistrarea lor pe site-urile de cutare. Includerea meta-informaiilor n codul HTML se obine prin
elementul meta plasat ntre marcajele head.
8.2. <html>
<head>
<title>Campuri speciale</title>
</head>
<body>
<h4>Campuri speciale</h4>

Numele:
Prenumele:
<input type="text" name="prenumele"><br>
Parola:
<input type=password name=parola><br>
<input type=hidden name=secret value=10000$><br>
</form>
</body>
</html>
9.1. Diferene ntre limbajele XHTML i HTML pagina 101 (I)
XHTML (EXtensible HyperText Markup Language) este construit pe baza ultimei versiuni HTML 4.01,
respectnd regulile limbajului XML. Cele mai importante elemente prin care XHTML se difereniaz de
HTML:
- elementele XHTML trebuie s fie corect imbricate (chiar i elementele vide exemplu br)
- elementele XHTML trebuie s fie scrise cu litere mici
- elementele XHTML trebuie s fie nchise
- numele atributelor trebuie s fie scrise cu litere mici, iar valorile atributelor trebuie s fie cuprinse ntre
caractere ghilimele
- valoarea atributului trebuie s fie precizat
- atributul id nlocuiete atributul name
- atributul lang care indic limba folosit pentru coninutul elementului va fi nsoit de atributul xml:lang
- atunci cnd sunt necesare seturile speciale de codificare a caracterelor, acestea vor fi indicate n dou locaii:
n declaraia XML i n cadrul unui element meta.
- structura unui document XHTML trebuie s fie corect. Toate elementele CHTML trebuie s fie plasate ntre
marcajele <html> i </html> ale elementului html
9.2. <html>
<head>
<title>Cauta pe web</title>
</head>
<body>
<h4>Cauta pe web</h4>
<form method="get" action=http://search.yahoo.com/search>
<b>Yahoo:</b><input type=text name=search size=12>
<button type=submit>Search</button></form><hr>
<form method="get" action=http://google.com/search>
<b>Google:</b><input type=text name=search size=12>
<form method="get" action=http://www.altavista.digital.com/cgi-bin/query>
<b>Alta Vista:</b><input type=text name=search size=12>
</body>
</html>
10.1. Limbaje script n pagina Web pagina 3 (II)
mbuntirea spectaculoas a aspectului i funcionalitii paginii Web se poate obine prin introducerea, n
codul HTML a unor succesiuni de comenzi (script) scrise n limbare de programare ca: Java, JavaScrip,
VBScript sau prin introducerea unor elemente de prezentarea dinamice, animate, create cu programe
specializare cum ar fi Macromedia Flash, Shockwave, Fireworks, Dreamweaver. Aceste componente sunt
introduse prin elemente speciale: applet, script, embed i object.
10.2. <html>
<head>
<title>Selectii multiple</title>
</head>
<body>
<h4>Selectii multiple</h4>
<b>Limbi straine cunoscute:</b><br>
<select name=limbi straine size=4 multiple>
<option value=A selected>Engleza
<option calue=B>Franceza
<option calue=C>Germana
<option calue=D>Japoneza
<option calue=E>Spaniola
</select><hr>
</form>
</body>
</html>
11.1. Dynamic HTML (DHTML) pagina 49 (II)
DHTML const ntr-un set de tehnologii ce furnizeaz pagini Web care i pot schimba coninutul n mod
dinamic, determinnd efecte vizuale i sonore spectaculoase. Prin dynamic este definit abilitatea
browserului de a schimba aspectul i stilul unei pagini Web dup ce aceasta a fost ncrcat. Acesta poate fi
considerat o combinaie ntre HTML i JavaScript.
11.2. <html>
<head>
<title>Folosirea butonului de resetare</title>
</head>
<body>
<h4> Folosirea butonului de resetare </h4>
Numele:
<input type="text" name="numele" value=Tastati numele aici><br>
Prenumele:
<input type="text" name="prenumele" value=Tastati prenumele aici><br>
<button name=butonul3 type="submit">Transmite</button>
</form>
</body>
</html>
12.1. Layere n pagina Web pagina 57 (II)
n DHTML pagina Web este conceput ca o structur de blocuri care conin elemente. Un astfel de bloc se
numete layer. Layerele se pot suprapune, se pot ascunde la vizualizare sau se pot deplasa pe ecran de-a lungul
unei axe de timp, pentru a crea animaii. De asemenea layerele pot fi imbricate unul n altul. Aceste blocuri
sunt definite de marcaje speciale <div>, <span>, <layer>, <ilayer> - primele dou fiind cele mai folosite.
Pentru definirea layerelor pot fi folosite dou procedee: sintaxa CSS (se bazeaz pe ideea c orice element din
pagina Web suport un obiect stil care este n esen, un obiect dinamic folosit pentru a manipula aspectul i
modul se aciune al elementului) i sintaxa LAYER (este specific browserului Netscape Navigator).
12.2. <html>
<head>
<title>Folosirea butoanelor de expediere</title>
</head>
<body>
<h4>Folosirea butoanelor de expediere</h4>
Numele:
<button type=submit>Submit Query</button><br>
Facultatea absolvita:<br>
<input type="text" name="facultatea"><br>

<input name=facultatea type="submit" value=Trimite daca vrei>
</form>
</body>
</html>
13.1. Foi de stil pagina50 (II)
Principial, codul care controleaz apariia i aspectul elementelor paginii web este stocat ntr-o foaie de stil
(style sheet). Se pot folosi mai multe foi de stil pentru o singur pagin Web, de aici denumirea de foi de stil
n cascad (Cascading Stule Sheets - CSS). n mod normal, sunt patru moduri de a folosi stilurile:
- stilul se aplic unui singur element, n cadrul unui marcaj HTML aceast modalitate se numete inline i
este cea mai puin flexibil
- stilul se aplic mai multor elemente din pagina web, pentru care sunt definite dedicat
- stilul se aplic pentru toate elementele din pagin foile de stil fiind definite la nceputul fiierelor HTML
- foile de stil sunt stocate ntr-un fiier separat de fiierul HTML i pot fi aplicare mai multor pagini simultan
aceasta fiind modalitatea cea mai flexibil de a defini stilurile.
13.2. <html>
<head>
<title>4 ferestre egale</title>
</head>
<frameset rows=*,* cols=*,*>
<frame src=img.jpg>
<frame src=1.html>
<frame src=1.html>
<frame src=1.html>
</html>
VERIFICATE CU http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_checked

1.1. Prezentarea Textului in Pagina Web - Pagina 31: TD (Table Data) "

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

1.1. Prezentarea Textului in Pagina Web - Pagina 31: TD (Table Data) "

Încărcat de

Drepturi de autor:

Formate disponibile

1.1.

Prezentarea textului in pagina web - pagina 31 (I)

<form action="mailto:gdgi@geom.desc.pub.ro" method="post">

<form action=mailto:gdgi@geom.desc.pub.ro method="post">

<input type="text" name="facultatea"><br>

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